*{box-sizing:border-box}body{margin:0;font:14px system-ui;background:#282a2e;color:#eee}.app{height:100vh;display:flex;flex-direction:column}header{display:flex;gap:6px;align-items:center;padding:9px;background:#111827;overflow:auto}header b{font-size:18px;margin-right:12px}button,.btn{padding:7px 10px;border:1px solid #526074;border-radius:6px;background:#243044;color:#fff;cursor:pointer;white-space:nowrap}button:disabled{opacity:.4}.active,.primary{background:#2563eb}.body{display:flex;flex:1;min-height:0}aside{width:190px;background:#111827;padding:12px;overflow:auto}.thumb{padding:12px;border:1px solid #465264;border-radius:7px;margin:7px 0;cursor:pointer}.thumb small{display:block;color:#9ca3af;margin-top:5px}.selected{border-color:#60a5fa;background:#1e3a5f}.deleted{opacity:.45;text-decoration:line-through}main{flex:1;overflow:auto;padding:28px;display:flex;justify-content:center;align-items:flex-start}.paper{position:relative;background:#fff;line-height:0;box-shadow:0 8px 30px #000}.paper canvas{display:block;max-width:100%;height:auto}.mark{position:absolute;border:2px solid #dc2626;line-height:1.1;color:#111;padding:2px;overflow:hidden}.highlight{border:0;background:#ffe50066}.redact{background:#000;border-color:#000}.text{background:#fffb;border-style:dashed;font-size:16px}.ellipse{border-radius:50%}.empty{margin-top:20vh;color:#bac4d2;font-size:18px}footer{padding:8px 14px;background:#111827;color:#93c5fd}footer strong{color:#fbbf24;margin-left:10px}@media(max-width:750px){aside{width:135px}header{flex-wrap:wrap}main{padding:10px}}