:root{--bg: #f6f7f9;--surface: #ffffff;--text: #16181d;--muted: #6b7280;--border: #e3e6ea;--accent: #2563eb;--error: #b42318;color-scheme:light dark}@media (prefers-color-scheme: dark){:root{--bg: #14161a;--surface: #1c1f25;--text: #e8eaed;--muted: #9aa1ab;--border: #2b2f36;--accent: #5b8dff;--error: #ff8a80}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;-webkit-text-size-adjust:100%}.app{display:flex;flex-direction:column;min-height:100%}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--border)}.brand{font-weight:650}.spacer{flex:1}main{padding:16px}.centre{display:grid;place-items:center;min-height:100%;padding:16px}.stack{display:flex;flex-direction:column;gap:16px;max-width:900px;margin:0 auto}.row{display:flex;gap:8px;align-items:center}.wrap{flex-wrap:wrap}.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;max-width:900px;margin:0 auto;width:100%}.login{max-width:330px;display:flex;flex-direction:column;gap:12px}.login h1{margin:0 0 4px;font-size:22px}h2{margin:0 0 14px;font-size:18px}label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}input{font:inherit;padding:9px 11px;min-height:42px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);min-width:0;width:100%}.row input{flex:1 1 160px;width:auto}input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button{font:inherit;font-weight:550;padding:11px 16px;min-height:44px;border:1px solid transparent;border-radius:10px;cursor:pointer;background:var(--accent);color:#fff}button:disabled{opacity:.55;cursor:default}button.ghost{background:transparent;color:var(--text);border-color:var(--border)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:middle}th{font-size:13px;color:var(--muted);font-weight:550}tr.dim td{opacity:.55}.muted{color:var(--muted)}.error{color:var(--error);margin:0}@media (max-width: 560px){table,thead,tbody,tr,td,th{display:block}thead{display:none}tr{border-bottom:1px solid var(--border);padding:10px 0}td{border:none;padding:3px 0}}.board{display:flex;flex-direction:column;height:100%}.board .canvas{flex:1;position:relative}.board .topbar{gap:10px}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--accent);color:#fff}.badge.subtle{background:transparent;color:var(--muted);border:1px solid var(--border)}ul.boards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}ul.boards li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--border)}ul.boards li:last-child{border-bottom:none}.board-open{flex:1 1 240px;display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left;border-color:transparent}.board-open:hover{border-color:var(--border)}.board-title{font-weight:550}@media (max-width: 560px){.hide-narrow{display:none}}.wb-grid-line{stroke:var(--tl-color-grid, #cfd3d8);stroke-width:1;opacity:.7}.wb-grid-fine{stroke:var(--tl-color-grid, #cfd3d8);stroke-width:.5;opacity:.45}.wb-grid-dot{fill:var(--tl-color-grid, #9aa1ab);opacity:.8}.wb-tool-body{fill:color-mix(in srgb,var(--tl-color-selected, #2563eb) 10%,transparent);stroke:var(--tl-color-selected, #2563eb);stroke-width:1.5}.wb-tool-ticks path{stroke:var(--tl-color-text, #16181d);stroke-width:1}.wb-tool-label{fill:var(--tl-color-text, #16181d);font:11px system-ui,sans-serif;-webkit-user-select:none;user-select:none}.wb-tool-baseline{stroke:var(--tl-color-text, #16181d);stroke-width:1.5}.wb-tool-arm{stroke:var(--tl-color-danger, #e03131);fill:var(--tl-color-danger, #e03131);stroke-width:2}.wb-tool-readout{fill:var(--tl-color-danger, #e03131);font:600 15px system-ui,sans-serif;-webkit-user-select:none;user-select:none}.wb-graph{position:relative;width:100%;height:100%}.wb-graph-svg{display:block;border-radius:6px}.wb-graph-bg{fill:var(--tl-color-background, #fff);stroke:var(--tl-color-grid, #cfd3d8)}.wb-graph-grid{stroke:var(--tl-color-grid, #cfd3d8);stroke-width:.5;fill:none}.wb-graph-axis{stroke:var(--tl-color-text, #16181d);stroke-width:1.5;fill:none}.wb-graph-label{fill:var(--tl-color-text-3, #6b7280);font:11px system-ui,sans-serif;-webkit-user-select:none;user-select:none}.wb-graph-panel{position:absolute;top:100%;left:0;margin-top:8px;width:max(260px,100%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;z-index:2}.wb-graph-row{display:flex;align-items:center;gap:6px;font-size:13px}.wb-graph-row input{min-height:36px;padding:6px 8px;flex:1 1 60px}.wb-graph-error{color:var(--error);font-size:11px}.wb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 16px;background:var(--surface);border-bottom:1px solid var(--border)}.wb-tools-group{display:flex;gap:4px;align-items:center}.wb-tools button{min-height:40px;padding:8px 12px;font-size:14px;background:transparent;color:var(--text);border:1px solid var(--border)}.wb-tools button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.wb-tools-select{font:inherit;min-height:40px;padding:8px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text)}.wb-tools .wb-swatch{width:34px;min-height:34px;padding:0;border-radius:50%;border:2px solid var(--border)}.wb-tools .wb-swatch.active{border-color:var(--text);transform:scale(1.1)}.wb-tools .wb-size{min-width:40px;padding:8px 6px}@media (max-width: 720px){.wb-tools{gap:4px;padding:6px 8px}.wb-tools button{padding:7px 9px;font-size:13px}}.trace,.fatal{font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;margin:0;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px;max-height:40vh;overflow:auto}.fatal{position:fixed;inset:auto 8px 8px 8px;z-index:9999;color:var(--error)}.wb-pdf{display:flex;flex-direction:column;overflow:hidden;background:var(--tl-color-panel, #fff);border:1px solid var(--tl-color-grid, #cfd3d8);border-radius:8px;color:var(--tl-color-text, #16181d)}.wb-pdf-canvas{flex:1;width:100%;min-height:0;object-fit:contain;background:#fff}.wb-pdf-error{padding:12px}.wb-pdf-bar{display:flex;align-items:center;gap:8px;padding:4px 8px;border-top:1px solid var(--tl-color-grid, #cfd3d8);background:var(--tl-color-panel, #fff);font-size:13px}.wb-pdf-bar button{min-height:32px;padding:2px 12px;font-size:18px;line-height:1;background:transparent;color:var(--tl-color-text, #16181d);border:1px solid var(--tl-color-grid, #cfd3d8)}.wb-pdf-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-controls{gap:6px}.board-controls button{min-height:38px;padding:8px 12px;font-size:14px}ul.folders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}ul.folders .folder{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:transparent;color:var(--text);border:1px solid var(--border);padding:14px 16px}ul.folders .folder:hover{border-color:var(--accent)}.folder-icon{font-size:20px;line-height:1}.folder-name{font-weight:600;flex:1}.canvas-status{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}.progress{width:min(280px,70vw);height:6px;border-radius:999px;background:var(--border);overflow:hidden}.progress span{display:block;width:40%;height:100%;border-radius:999px;background:var(--accent);animation:progress-slide 1.1s ease-in-out infinite}@keyframes progress-slide{0%{transform:translate(-100%)}to{transform:translate(260%)}}.reconnecting{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:400;background:var(--error);color:#fff;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 2px 8px #0003}.lesson-timer{font-variant-numeric:tabular-nums;font-weight:600;font-size:15px;padding:6px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--border)}.wb-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:#fff;touch-action:none;overscroll-behavior:none;display:block}.wb-canvas.wb-tool-pen,.wb-canvas.wb-tool-highlighter{cursor:crosshair}.wb-canvas.wb-tool-eraser{cursor:cell}.wb-canvas.wb-tool-pan{cursor:grab}.wb-canvas.wb-tool-select{cursor:default}.wb-canvas.wb-tool-line,.wb-canvas.wb-tool-arrow,.wb-canvas.wb-tool-rect,.wb-canvas.wb-tool-ellipse{cursor:crosshair}.wb-canvas.wb-tool-text{cursor:text}.wb-selection rect,.wb-selection circle{stroke:#2563eb}.wb-selection>rect:first-child{stroke-dasharray:4 3}.wb-handle{fill:#fff;stroke:#2563eb;cursor:pointer}.wb-marquee{fill:#2563eb1a;stroke:#2563eb;stroke-dasharray:4 3}.wb-text-editor{position:absolute;z-index:10;margin:0;padding:0;resize:none;overflow:hidden;background:transparent;border:1px dashed #2563eb;border-radius:2px;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.25;min-height:1.3em}.wb-canvas text{-webkit-user-select:none;user-select:none}.badge.warn{background:var(--error)}.wb-paper-line{stroke:#cbd5e1;stroke-width:1}.wb-paper-fine{stroke:#e2e8f0;stroke-width:.5}.wb-paper-dot{fill:#94a3b8}.wb-maths-body{fill:#2563eb1a;stroke:#2563eb;stroke-width:1.5}.wb-maths-ticks path{stroke:#1d1d1f;stroke-width:1}.wb-maths-label{fill:#1d1d1f;font:11px system-ui,sans-serif;-webkit-user-select:none;user-select:none}.wb-maths-baseline{stroke:#1d1d1f;stroke-width:1.5}.wb-maths-arm{stroke:#dc2626;fill:#dc2626;stroke-width:2}.wb-maths-readout{fill:#dc2626;font:600 15px system-ui,sans-serif;-webkit-user-select:none;user-select:none}.wb-graph-bg{fill:#fff;stroke:#cbd5e1}.wb-graph-grid{stroke:#e2e8f0;stroke-width:.5;fill:none}.wb-graph-axis{stroke:#1d1d1f;stroke-width:1.5;fill:none}.wb-pdf-frame{fill:#fff;stroke:#cbd5e1}.wb-pdf-bar{fill:#f1f5f9;stroke:#cbd5e1;stroke-width:.5}.wb-pdf-button{fill:#1d1d1f;font:600 18px system-ui,sans-serif;-webkit-user-select:none;user-select:none}.wb-laser{fill:none;stroke:#ef4444;stroke-linecap:round;stroke-linejoin:round;opacity:.85}.wb-canvas.wb-tool-laser{cursor:crosshair}.wb-pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:5px 16px;background:var(--surface);border-bottom:1px solid var(--border)}.wb-pages button{min-height:32px;padding:5px 12px;font-size:13px}.wb-quick{position:fixed;z-index:500;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:0 10px 28px #00000038}.wb-quick-tools{display:flex;flex-direction:column;gap:4px;max-height:232px;overflow-y:auto}.wb-quick-tools button{min-height:38px;padding:6px 10px;font-size:14px;text-align:left;background:transparent;color:var(--text);border:1px solid var(--border)}.wb-quick-tools button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.wb-quick-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.wb-quick .wb-swatch{width:24px;min-height:24px;padding:0;border-radius:50%;border:2px solid var(--border)}.wb-quick .wb-swatch.active{border-color:var(--text);transform:scale(1.12)}.wb-quick-size{width:34px;min-height:34px;padding:0;display:grid;place-items:center;background:transparent;border:1px solid var(--border);border-radius:8px}.wb-quick-size.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}.wb-quick-size span{display:block;border-radius:50%;background:var(--text)}