:root{--ink:#1e1e1e;--muted:#5c636a;--line:#e3e5e8;--paper:#fff;--canvas:#f8f9fa;--accent:#4263eb;--accent-soft:#edf2ff;--danger:#e03131;--radius:12px;--shadow:0 1px 2px #1018280f, 0 6px 20px #10182814;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.board{position:fixed;inset:0;overflow:hidden}.board-canvas{touch-action:none;outline:none;width:100%;height:100%;display:block;position:absolute;inset:0}.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.top-bar{pointer-events:none;justify-content:space-between;align-items:flex-start;gap:12px;display:flex;position:absolute;top:12px;left:12px;right:12px}.top-bar>*{pointer-events:auto}.brand-panel,.people-panel{align-items:center;gap:4px;min-height:48px;padding:6px;display:flex}.brand{letter-spacing:-.01em;color:var(--ink);align-items:center;gap:8px;padding:0 8px;font-weight:700;text-decoration:none;display:inline-flex}.brand-mark{background:linear-gradient(#fcc419,#fcc419) 0 0/9px 9px no-repeat,linear-gradient(#4263eb,#4263eb) 11px 0/9px 9px no-repeat,linear-gradient(#40c057,#40c057) 0 11px/9px 9px no-repeat,linear-gradient(#fa5252,#fa5252) 11px 11px/9px 9px no-repeat;border-radius:5px;width:20px;height:20px}.room-code{background:var(--canvas);color:var(--muted);border-radius:6px;padding:4px 8px;font:12px/1 ui-monospace,SF Mono,Consolas,monospace}.text-button{height:36px;color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:6px;padding:0 10px;font-size:14px;text-decoration:none;display:inline-flex}.text-button:hover{background:var(--canvas)}.icon-button{cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;width:40px;height:40px;display:inline-grid;position:relative}.icon-button:hover:not(:disabled){background:var(--canvas)}.icon-button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.icon-button:disabled{opacity:.35;cursor:default}.icon-button.danger:hover{color:var(--danger)}.shortcut{color:var(--muted);opacity:.8;font-size:9px;font-weight:600;position:absolute;bottom:2px;right:4px}.divider{background:var(--line);align-self:stretch;width:1px;margin:6px 4px}.avatars{margin:0;padding:0 4px 0 10px;list-style:none;display:flex}.avatar{border:2px solid var(--paper);color:#fff;border-radius:50%;place-items:center;width:32px;height:32px;margin-left:-6px;font-size:12px;font-weight:700;display:grid}.avatar.more{background:var(--muted)}button.avatar.self{cursor:pointer;box-shadow:0 0 0 2px var(--line);margin:0 4px}.popover-anchor{position:relative}.popover{z-index:10;gap:10px;width:280px;padding:16px;display:grid;position:absolute;top:calc(100% + 10px);right:0}.popover-title{margin:0;font-weight:650}.popover-text{color:var(--muted);margin:0;font-size:14px;line-height:1.5}.status-pill{border:1px solid var(--line);background:var(--paper);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:8px;height:36px;padding:0 12px;font-size:14px;font-weight:550;display:inline-flex}.status-dot{background:#adb5bd;border-radius:50%;width:8px;height:8px}.status-online .status-dot{background:#2f9e44;box-shadow:0 0 0 3px #2f9e442e}.status-offline .status-dot{background:#f08c00}.pending-count{color:#7c4a03;background:#fff3bf;border-radius:999px;padding:2px 8px;font-size:12px}.primary-button{background:var(--ink);color:#fff;cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;height:40px;padding:0 16px;font-weight:600;text-decoration:none;display:inline-flex}.primary-button:hover:not(:disabled){background:#343a40}.primary-button:disabled{opacity:.5;cursor:default}.text-input{border:1px solid var(--line);height:40px;font:inherit;border-radius:8px;padding:0 12px}.bottom-bar{pointer-events:none;justify-content:space-between;align-items:flex-end;gap:12px;display:flex;position:absolute;bottom:12px;left:12px;right:12px}.bottom-bar>*{pointer-events:auto}.toolbar{align-items:center;gap:2px;padding:4px;display:flex}.help-button{width:48px;height:48px}.zoom-controls{align-items:center;padding:4px;display:flex}.zoom-value{font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;min-width:56px;height:40px;font-size:13px}.style-panel{gap:14px;width:196px;padding:14px;display:grid;position:absolute;top:76px;left:12px}.style-panel fieldset{border:0;margin:0;padding:0}.style-panel legend{color:var(--muted);margin-bottom:8px;font-size:12px;font-weight:600}.swatches{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.swatch{aspect-ratio:1;border:2px solid var(--paper);background:var(--swatch);box-shadow:0 0 0 1px var(--line);cursor:pointer;border-radius:50%}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}.segmented{background:var(--canvas);border-radius:8px;gap:2px;padding:2px;display:flex}.segmented button{cursor:pointer;background:0 0;border:0;border-radius:6px;flex:1;place-items:center;height:32px;font-size:13px;display:grid}.segmented button[aria-pressed=true]{background:var(--paper);font-weight:600;box-shadow:0 1px 2px #1018281f}.width-sample{background:var(--ink);border-radius:999px;width:26px}.button-row{gap:2px;display:flex}.note-editor{border:2px solid var(--accent);color:#212529;resize:none;background:0 0;border-radius:0;outline:none;margin:0;line-height:1.4;position:absolute;overflow:hidden}.toast{background:var(--ink);color:#fff;max-width:min(90vw,420px);box-shadow:var(--shadow);border-radius:10px;padding:10px 16px;font-size:14px;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}.help-dialog{width:min(92vw,480px);padding:24px}.help-dialog::backdrop{background:#1018284d}.help-dialog h2{margin:0 0 16px;font-size:18px}.help-dialog dl{gap:8px;margin:0 0 16px;display:grid}.shortcut-row{justify-content:space-between;gap:16px;font-size:14px;display:flex}.shortcut-row dd{color:var(--muted);text-align:right;margin:0}kbd{border:1px solid var(--line);background:var(--canvas);white-space:nowrap;border-bottom-width:2px;border-radius:5px;padding:2px 6px;font:12px ui-monospace,SF Mono,Consolas,monospace}.help-note{color:var(--muted);margin:0 0 16px;font-size:14px;line-height:1.5}.not-found{place-content:center;justify-items:start;gap:12px;height:100%;padding:24px;display:grid}.not-found h1{margin:0}.bench-panel{gap:12px;width:min(420px,100vw - 24px);padding:18px;display:grid;position:absolute;top:12px;left:12px}.bench-panel h1{margin:0;font-size:18px}.bench-panel p{color:var(--muted);margin:0;font-size:14px;line-height:1.5}.bench-panel table{border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13px}.bench-panel th,.bench-panel td{border-bottom:1px solid var(--line);text-align:left;padding:6px 8px}@media (width<=720px){.room-code,.text-button span,.brand-panel .text-button:last-child{display:none}.bottom-bar{flex-direction:column;align-items:stretch}.toolbar{overflow-x:auto}.help-button,.zoom-controls{display:none}.style-panel{grid-template-columns:repeat(2,minmax(0,1fr));width:auto;top:auto;bottom:76px;right:12px}.toast{bottom:140px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}