@font-face { font-family:'Chabe Sans'; src:url('../vendor/fonts/DejaVuSans.ttf') format('truetype'); font-display:swap; }
:root { color-scheme:light; --accent:#4f46e5; --accent-soft:#eeecff; --ink:#263247; --muted:#68758a; --line:#dbe1eb; --surface:#fff; --shadow:0 3px 10px #26324709,0 12px 35px #26324710; font-family:'Chabe Sans',Arial,sans-serif; color:var(--ink); background:#eef1f6; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
body { display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
button,input,textarea { font:inherit; }
button,a,input { touch-action:manipulation; }
button { cursor:pointer; }
[hidden] { display:none!important; }
svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-button { position:relative; display:inline-grid; place-items:center; width:48px; min-width:48px; height:48px; padding:11px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--muted); text-decoration:none; flex:0 0 auto; }
.icon-button svg { width:25px; height:25px; pointer-events:none; }
.icon-button:disabled { opacity:.33; cursor:default; }
.icon-button:is(:hover,:focus-visible):not(:disabled) { background:var(--accent-soft); color:var(--accent); }
.icon-button[aria-pressed=true],.icon-button[aria-expanded=true] { color:var(--accent); background:var(--accent-soft); border-color:#c9c3ff; }
.icon-button.primary { color:white; background:var(--accent); }
.icon-button { transition:background .14s,color .14s,border-color .14s,box-shadow .14s; }
.icon-button:active:not(:disabled) { background:#ded9ff; }
:is(button,a,input,textarea,svg [tabindex]):focus-visible { outline:3px solid #8177ef; outline-offset:2px; }
.save-state { width:7px; height:7px; min-width:7px; border-radius:50%; background:#94a3b8; }
.save-state[data-state=saved] { background:#2d9472; }
.save-state[data-state=dirty] { background:#d69731; }
.save-state[data-state=error] { background:#d54545; box-shadow:0 0 0 3px #fce6e6; }
.board-viewport { position:relative; flex:1; min-width:0; overflow:hidden; touch-action:none; cursor:crosshair; user-select:none; outline:none; }
.board-viewport[data-tool=hand] { cursor:grab; }
.board-viewport[data-tool=select] { cursor:default; }
.board-viewport[data-tool=text] { cursor:text; }
.board-viewport[data-tool=eraser] { cursor:none; }
.board-viewport.is-dragging { cursor:grabbing; }
.board-paper { position:absolute; top:0; left:0; transform-origin:0 0; width:595px; height:842px; background:white; box-shadow:0 2px 6px #26324712,0 18px 60px #26324714; isolation:isolate; }
.board-paper[data-background=grid] { background-image:linear-gradient(#d5e1ed 0.4px,transparent .4px),linear-gradient(90deg,#d5e1ed .4px,transparent .4px); background-size:28.346px 28.346px; }
.board-paper[data-background=ruled] { background-image:linear-gradient(#d5e1ed .4px,transparent .4px); background-size:28.346px 28.346px; }
.board-paper[data-background=dark] { background:#172131; }
.board-paper > canvas,.board-paper > svg { position:absolute; inset:0; width:100%; height:100%; }
#pdfCanvas { pointer-events:none; }
.annotation-layer { overflow:hidden; pointer-events:none; stroke:none; }
.instrument-layer { overflow:visible; pointer-events:none; color:#475569; }
.overlay-layer { overflow:visible; pointer-events:none; }
.instrument { pointer-events:none; }
.instrument-body { pointer-events:all; cursor:grab; fill:#e7ebf2d9; stroke:#617088; stroke-width:.8; }
.instrument.is-selected .instrument-body { fill:#eeecffc9; stroke:var(--accent); }
.instrument text { fill:#38465b; stroke:none; font:8px 'Chabe Sans',Arial,sans-serif; pointer-events:none; }
.instrument path { pointer-events:none; stroke-width:var(--instrument-detail,.65); }
.instrument .instrument-body { pointer-events:all; }
.instrument-grip { cursor:grab; pointer-events:all; color:var(--accent); }
.instrument-grip .grip-hit { r:22px; fill:transparent; stroke:none; }
.instrument-grip .grip-face { fill:white; stroke:#bdb5f5; stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.instrument-grip path { stroke:currentColor; stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke; pointer-events:none; }
.instrument-grip.grip-close { cursor:pointer; color:#8791a3; }
.grip-close .grip-face { stroke:#c6ccd7; fill:#fffffff2; }
.grip-close:is(:hover,:focus-visible) { color:#bd3348; }
.grip-close:is(:hover,:focus-visible) .grip-face { fill:#fff0f1; stroke:#e6a4af; }
.instrument-grip.grip-trace { cursor:crosshair; }
.instrument-grip.grip-radius,.instrument-grip.grip-length { cursor:ew-resize; }
.instrument-grip:is(:hover,:focus-visible) .grip-face { stroke:var(--accent); }
.instrument .compass-hit { pointer-events:stroke; stroke:transparent; stroke-width:20; cursor:grab; vector-effect:non-scaling-stroke; }
.instrument .compass-leg { stroke:#596a81; stroke-width:.8; }
.instrument .compass-steel { fill:#c6d3e0; }
.instrument .compass-pencil { fill:#7169d2; stroke:#504997; }
.instrument .compass-leg-shine { stroke:white; stroke-width:.9; opacity:.8; }
.instrument .compass-metal { fill:#8798ac; stroke:#596a81; stroke-width:.6; }
.instrument .compass-wood { fill:#ecc79a; stroke:#ad8152; stroke-width:.6; }
.instrument .compass-point { stroke:#263247; stroke-width:1.3; }
.instrument .compass-stem { stroke:#596a81; stroke-width:3; }
.instrument .compass-handle { fill:#64748b; stroke:#475569; stroke-width:.7; }
.instrument .compass-handle-groove { stroke:#d6dfeb; stroke-width:.6; }
.instrument .compass-joint { fill:#d9b56e; stroke:#8f733f; stroke-width:1; }
.instrument .compass-screw { stroke:#796036; stroke-width:1; }
.instrument .compass-base { stroke:#94a3b8; stroke-width:.7; }
.instrument .instrument-measure { stroke:var(--accent); stroke-width:1.7; }
.instrument .measure-value { font-size:13px; fill:var(--accent); }
.instrument .instrument-leader { opacity:.5; stroke:var(--accent); }
.selection-box { stroke:var(--accent); stroke-width:1; stroke-dasharray:5 4; fill:#4f46e508; vector-effect:non-scaling-stroke; }
.selection-box[data-selection-move] { pointer-events:all; cursor:move; }
.selection-stem { fill:none; stroke:var(--accent); stroke-width:1; vector-effect:non-scaling-stroke; }
.selection-rotate { pointer-events:all; cursor:grab; }
.selection-rotate-hit { fill:transparent; stroke:none; }
.selection-rotate-face { fill:white; stroke:var(--accent); stroke-width:1.2; }
.selection-rotate path { fill:none; stroke:var(--accent); stroke-width:1.5; }
.resize-grip { fill:white; stroke:var(--accent); stroke-width:1.5; pointer-events:all; cursor:nwse-resize; }
.marquee { fill:#4f46e512; stroke:var(--accent); stroke-width:1; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
.floating-panel { z-index:12; border:1px solid #d9deea; border-radius:18px; background:#fffffff5; box-shadow:var(--shadow); backdrop-filter:blur(12px); }
.palette-actions { display:flex; align-items:center; gap:6px; margin:-5px -5px 9px; border-bottom:1px solid var(--line); padding-bottom:5px; }
.palette-actions .icon-button:last-child { margin-left:auto; }
.stroke-presets { display:flex; gap:7px; margin-top:12px; }
.stroke-preset { display:grid; place-items:center; flex:1; min-width:44px; min-height:44px; padding:0; color:var(--ink); background:#f3f5f9; border:1px solid transparent; border-radius:10px; }
.stroke-preset span { width:var(--diameter); height:var(--diameter); border-radius:50%; background:currentColor; pointer-events:none; }
.stroke-preset:is(:hover,[aria-pressed=true]) { color:var(--accent); background:var(--accent-soft); border-color:#c9c3ff; }
.settings-row { display:flex; align-items:center; gap:10px; min-width:0; margin-top:12px; }
.settings-row > svg { width:22px; height:22px; flex:0 0 22px; color:var(--muted); }
.settings-row input[type=range] { width:100%; min-width:0; height:32px; accent-color:var(--accent); }
.settings-row output { min-width:44px; white-space:nowrap; text-align:right; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.color-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.color-swatch { width:100%; max-width:42px; height:42px; border:4px solid white; outline:1px solid #e2e6ee; outline-offset:-2px; border-radius:12px; background:var(--swatch); justify-self:center; padding:0; box-shadow:inset 0 0 0 1px #26324718; transition:box-shadow .14s; }
.color-swatch[aria-pressed=true] { outline:2px solid var(--accent); outline-offset:3px; }
.color-current { display:block; width:23px; height:23px; border-radius:50%; border:2px solid white; outline:1px solid #26324730; background:var(--swatch); }
.color-custom { width:42px; height:38px; border:1px solid var(--line); background:white; border-radius:8px; padding:3px; }
.stroke-preview { flex:1; height:30px; overflow:hidden; }
.stroke-preview svg { width:100%; height:100%; }
.icon-grid { display:flex; flex-wrap:wrap; gap:6px; }
.instrument-size { display:flex; align-items:center; gap:6px; padding-inline:6px; color:var(--muted); font-size:12px; }
.instrument-size > svg { width:21px; height:21px; }
.instrument-size input { width:66px; min-height:44px; border:1px solid var(--line); border-radius:8px; padding:6px; color:var(--ink); background:white; }
.page-list { list-style:none; margin:0; padding:4px 12px 100px; display:grid; gap:13px; }
.page-thumbnail .thumbnail-sheet { box-shadow:0 2px 7px #2632470c; }
.page-thumbnail:is(:hover,:focus-visible) { background:#eae7ff88; }
.page-thumbnail[aria-current=page] small { color:var(--accent); font-weight:700; }
.page-thumbnail { width:100%; min-height:90px; position:relative; padding:6px; border:2px solid transparent; border-radius:10px; background:transparent; }
.page-thumbnail[aria-current=page] { border-color:#a69af6; background:var(--accent-soft); }
.thumbnail-sheet { display:block; width:100%; aspect-ratio:var(--ratio,.707); background:white; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.thumbnail-sheet img { display:block; width:100%; height:100%; object-fit:contain; }
.page-thumbnail small { display:block; margin-top:5px; font-size:11px; color:var(--muted); }
.board-dialog { width:min(500px,calc(100vw - 30px)); border:1px solid var(--line); border-radius:18px; padding:20px; color:var(--ink); box-shadow:var(--shadow); }
.board-dialog::backdrop { background:#26324760; backdrop-filter:blur(3px); }
.board-dialog form { margin:0; }
.board-dialog textarea { width:100%; resize:vertical; min-height:120px; padding:10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:white; }
.dialog-controls { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:14px; }
.dialog-controls input { min-width:0; flex:1; accent-color:var(--accent); }
.confirm-dialog { max-width:380px; }
.confirm-dialog p { margin:0; font-size:16px; line-height:1.6; }
.busy-overlay { position:fixed; z-index:30; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; background:#eef1f6c9; backdrop-filter:blur(3px); }
.spinner { width:36px; height:36px; border:3px solid #d5d0ff; border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.laser-dot { position:absolute; z-index:20; width:16px; height:16px; border-radius:50%; background:#ef4444; box-shadow:0 0 18px #ef4444a0; transform:translate(-50%,-50%); pointer-events:none; }
.eraser-cursor { position:absolute; z-index:21; border:1.5px solid white; border-radius:50%; box-shadow:0 0 0 1.5px var(--accent); background:#4f46e508; transform:translate(-50%,-50%); pointer-events:none; }

/* White cursor faces with a black outline, independent of the OS pointer theme. */
:root {
  --board-cursor-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M3%202v24l6-6%205%2010%205-3-5-9h9Z%22%20fill%3D%22white%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, default;
  --board-cursor-select: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20x%3D%2211%22%20y%3D%223%22%20width%3D%2217%22%20height%3D%2216%22%20rx%3D%221%22%20fill%3D%22white%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.6%22%20stroke-dasharray%3D%223%202%22%2F%3E%3Cpath%20d%3D%22M3%209v21l5-6%204%207%204-2-4-8h8Z%22%20fill%3D%22white%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 9, default;
  --board-cursor-hand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M8%2016V8a2%202%200%200%201%204%200v7-11a2%202%200%200%201%204%200v11-9a2%202%200%200%201%204%200v10-7a2%202%200%200%201%204%200v11c0%206-3%2010-9%2010-4%200-7-2-9-6l-3-5c-2-4%201-6%203-3l2%203Z%22%20fill%3D%22white%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 14 4, grab;
  --board-cursor-grabbing: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M6%2014V9c0-3%204-3%204%200V7c0-3%204-3%204%200V6c0-3%204-3%204%200v2c0-3%204-3%204%200v10c0%207-3%2011-9%2011-5%200-9-4-10-8l-1-4c-1-4%203-5%204-1Z%22%20fill%3D%22white%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 14 14, grabbing;
  --board-cursor-crosshair: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%202v11m0%206v11M2%2016h11m6%200h11%22%20stroke%3D%22white%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M16%202v11m0%206v11M2%2016h11m6%200h11%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%221.8%22%20fill%3D%22%23111%22%20stroke%3D%22white%22%2F%3E%3C%2Fsvg%3E") 16 16, crosshair;
  --board-cursor-move: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%202%2010%208h4v6H8v-4l-6%206%206%206v-4h6v6h-4l6%206%206-6h-4v-6h6v4l6-6-6-6v4h-6V8h4Z%22%20fill%3D%22white%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 16 16, move;
  --board-cursor-resize: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M3%203h11v3H8l16%2016v-6h3v11H16v-3h6L6%208v6H3Z%22%20fill%3D%22white%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 15 15, nwse-resize;
  --board-cursor-ibeam: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M10%203h12M16%203v26m-6%200h12%22%20stroke%3D%22white%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M10%203h12M16%203v26m-6%200h12%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E") 16 16, text;
}
.board-viewport { cursor:var(--board-cursor-crosshair); }
.board-viewport[data-tool=pointer] { cursor:var(--board-cursor-arrow); }
.board-viewport[data-tool=select] { cursor:var(--board-cursor-select); }
.board-viewport[data-tool=hand],.instrument-body,.instrument-grip,.instrument .compass-hit,.selection-rotate { cursor:var(--board-cursor-hand); }
.board-viewport[data-tool=text] { cursor:var(--board-cursor-ibeam); }
.board-viewport[data-tool=eraser] { cursor:none; }
.board-viewport.is-dragging { cursor:var(--board-cursor-grabbing); }
.selection-box[data-selection-move] { cursor:var(--board-cursor-move); }
.resize-grip { cursor:var(--board-cursor-resize); }
.eraser-cursor { border-color:#111; box-shadow:0 0 0 1px #fff; }
.instrument-grip.grip-close { cursor:var(--board-cursor-arrow); }
.instrument-grip.grip-trace { cursor:var(--board-cursor-crosshair); }
.instrument-grip.grip-radius,.instrument-grip.grip-length,.dock-grip { cursor:var(--board-cursor-move); }