*,:before,:after{box-sizing:border-box}html,body{color:#0f172a;background:#f8fafc;height:100%;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit;cursor:pointer}.landing{max-width:560px;margin:12vh auto;padding:0 24px}.landing h1{margin:0 0 8px;font-size:2.5rem}.landing p{color:#475569}.landing form{gap:8px;margin-top:24px;display:flex}.landing input{font:inherit;border:1px solid #cbd5e1;border-radius:8px;flex:1;padding:10px 12px}.btn{color:#fff;background:#0f172a;border:0;border-radius:8px;padding:10px 16px}.btn.secondary{color:#0f172a;background:#fff;border:1px solid #cbd5e1}.board{touch-action:none;background:#f8fafc;flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.board-chrome{z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);isolation:isolate;background:#f8fafcfa;border-bottom:1px solid #e2e8f0;flex-shrink:0;grid-template-rows:auto auto;gap:8px;padding:8px 10px 10px;display:grid}@media (max-width:820px){.board-chrome{grid-template-rows:auto;gap:0;padding:4px 6px 6px}}.board-hud{z-index:2;flex-wrap:wrap;grid-row:1;justify-content:flex-end;align-items:center;gap:8px;width:100%;min-height:32px;display:flex;position:relative}.toolbar-scroll{z-index:1;-webkit-overflow-scrolling:touch;grid-row:2;width:100%;position:relative;overflow:auto hidden}.board-surface{flex:1;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.board-surface-main{flex:1;min-width:0;min-height:0;position:relative}.board-side-panel{z-index:12;color:#0f172a;background:#fffffffa;border-left:1px solid #e2e8f0;flex-shrink:0;width:min(300px,34vw);padding:10px 10px 16px;font-size:13px;overflow-y:auto}.board-side-panel.collapsed,.side-panel-backdrop{display:none}.side-panel-header{z-index:3;background:inherit;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;margin-bottom:8px;padding:8px 0;display:flex;position:sticky;top:0}.side-panel-title{color:#334155;margin:0;font-size:14px;font-weight:600}.side-section{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:8px;overflow:hidden;box-shadow:0 2px 8px #0f172a0a}.side-section-heading{text-transform:uppercase;letter-spacing:.04em;color:#475569;cursor:pointer;background:#f8fafc;border:0;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:10px 12px;font-size:12px;font-weight:600;display:flex}.side-section-chevron{color:#94a3b8;font-size:11px}.side-section-body{flex-direction:column;gap:10px;padding:10px 12px 12px;display:flex}.side-field{flex-direction:column;gap:4px;width:100%;display:flex}.side-field-label{color:#64748b;font-size:11px;font-weight:600}.side-check{cursor:pointer;color:#334155;align-items:center;gap:8px;min-height:36px;display:inline-flex}.side-check input[type=checkbox]{accent-color:#2563eb;flex-shrink:0;width:20px;min-width:20px;height:20px;min-height:20px}.side-select{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:8px;width:100%;min-height:36px;padding:6px 10px;font-size:13px}.side-select-grow{flex:1;min-width:0}.side-range{accent-color:#2563eb;width:100%}.side-btn-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.side-btn{color:#0f172a;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:36px;padding:6px 12px;font-size:12px;font-weight:500}.side-btn:hover:not(:disabled){background:#f1f5f9;border-color:#cbd5e1}.side-btn:disabled{opacity:.5;cursor:not-allowed}.side-btn-ghost{background:0 0;border-color:#0000;min-width:36px;padding:4px 8px}.side-btn-sm{min-height:32px;padding:4px 8px;font-size:11px}.side-file{cursor:pointer;justify-content:center;align-items:center;display:inline-flex}.side-list{max-height:120px;margin:0;padding:0;list-style:none;overflow-y:auto}.side-list li{align-items:center;gap:6px;margin-bottom:6px;display:flex}.side-list-btn{text-align:left;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;flex:1;min-height:32px;padding:4px 8px;font-size:11px}.side-list-label{flex:1;font-size:12px}.side-muted{color:#64748b;margin:0;font-size:12px}.side-banner,.import-error{border-radius:8px;margin:0 0 8px;padding:8px 10px;font-size:12px}.side-banner{color:#92400e;background:#fef3c7}.import-error{color:#991b1b;background:#fee2e2}.side-collab-footer{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.board-side-panel .role-pill{text-transform:capitalize;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600}.comment-coords{color:#94a3b8;font-size:10px}.side-panel-toggle{z-index:8;background:#fff;border:1px solid #cbd5e1;border-radius:999px;width:44px;height:44px;position:absolute;bottom:8px;right:8px;box-shadow:0 2px 8px #0f172a1f}@media (max-width:900px){.side-panel-backdrop{z-index:11;cursor:pointer;background:#0f172a59;border:0;padding:0;display:block;position:absolute;inset:0}.board-side-panel:not(.force-open).collapsed{display:none}.board-side-panel.sheet-open{border-top:1px solid #e2e8f0;border-left:0;border-radius:16px 16px 0 0;flex-direction:column;width:100%;max-height:min(72vh,520px);display:flex;position:absolute;inset:auto 0 0;box-shadow:0 -8px 32px #0f172a2e}.board-side-panel.sheet-open>*{flex-shrink:0}}.board-side-panel .history-list,.board-side-panel .frame-list,.board-side-panel .comment-list{list-style:none}.board.dark{color:#e2e8f0;background:#0f172a}.board.dark .board-chrome{background:#0f172afa;border-color:#334155}.board.dark .board-side-panel{color:#e2e8f0;background:#0f172afa;border-color:#334155}.board.dark .side-panel-header{border-color:#334155}.board.dark .side-panel-title{color:#e2e8f0}.board.dark .side-section{box-shadow:none;background:#1e293b;border-color:#334155}.board.dark .side-section-heading{color:#cbd5e1;background:#0f172a}.board.dark .side-field-label,.board.dark .side-muted,.board.dark .comment-coords{color:#94a3b8}.board.dark .side-check{color:#e2e8f0}.board.dark .side-select,.board.dark .side-list-btn{color:#e2e8f0;background:#0f172a;border-color:#475569}.board.dark .side-btn{color:#f8fafc;background:#334155;border-color:#475569}.board.dark .side-btn:hover:not(:disabled){background:#475569}.board.dark .board-side-panel .role-pill{color:#e2e8f0;background:#334155;border-color:#475569}.board.dark .side-panel-toggle{color:#e2e8f0;background:#1e293b;border-color:#475569}@media (max-width:900px){.board.dark .board-side-panel.sheet-open{border-top-color:#334155}}.board.dark .pill,.board.dark .toolbar,.board.dark .presence-chip,.board.dark .role-pill{color:#e2e8f0;background:#1e293b;border-color:#475569}.board.dark .toolbar .zoom-label{color:#cbd5e1}.board.dark .toolbar button.tool:hover{background:#334155}.board-surface canvas{touch-action:none;width:100%;height:100%;position:absolute;inset:0}.note-layer{pointer-events:none;z-index:4;position:absolute;inset:0;overflow:hidden}.sticky-note{pointer-events:auto;border:1px solid #ca8a04;border-radius:4px;position:absolute;top:0;left:0;box-shadow:0 2px 8px #0f172a1f}.sticky-note.selected{outline:2px solid #2563eb}.sticky-text{resize:none;width:100%;height:100%;font:inherit;box-sizing:border-box;background:0 0;border:0;padding:8px}.toolbar-scroll.compact{max-height:min(9vh,56px)}@media (max-width:820px){.toolbar-scroll{max-height:min(9vh,52px)}.toolbar{border-radius:10px;gap:3px;padding:3px 5px}.toolbar button.tool{padding:2px 6px;font-size:14px}.toolbar .zoom-label{min-width:36px;font-size:11px}}.toolbar-status{flex-shrink:0;align-items:center;gap:6px;display:inline-flex}.status-chip{background:#94a3b8;border-radius:999px;flex-shrink:0;width:10px;height:10px}.status-chip.status-connected{background:#22c55e}.status-chip.status-connecting{background:#f59e0b}.status-chip.status-disconnected{background:#ef4444}.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}.presence-chip{color:#475569;text-align:center;flex-shrink:0;min-width:18px;font-size:11px;font-weight:600}.toolbar{background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-wrap:wrap;align-items:center;gap:6px;min-width:min-content;padding:6px 8px;display:inline-flex;box-shadow:0 4px 16px #0f172a14}.toolbar-scroll.compact .toolbar{flex-wrap:nowrap}.toolbar .zoom-label{text-align:center;color:#475569;min-width:44px;font-size:12px}.toolbar .size-btn{min-width:28px;font-size:12px}.color-picker-wrap input{cursor:pointer;background:0 0;border:0;width:28px;height:28px;padding:0}.swatch{box-sizing:content-box;border:2px solid #fff;border-radius:999px;outline:1px solid #cbd5e1;flex-shrink:0;width:24px;height:24px;padding:0}.swatch[aria-pressed=true]{outline:2px solid #0f172a}@media (pointer:coarse){.toolbar{align-items:center}.toolbar-status{align-items:center;min-height:44px}.toolbar .color-picker-wrap input{width:44px;min-width:44px;height:44px;min-height:44px}.board-hud .pill,.toolbar-scroll.compact+.board-surface .side-panel-toggle,.side-panel-toggle,button.pill[data-testid=copy-link]{justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}.toolbar .swatch{padding:10px}.toolbar .size-btn,.toolbar button.tool,.board-side-panel .side-btn,.board-side-panel .side-select,.board-side-panel .side-section-heading,.board-side-panel .side-list-btn,.side-panel-toggle{justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:8px 10px;display:inline-flex}.board-side-panel .side-range{min-height:44px}.board-side-panel .side-check{align-items:center;gap:8px;min-height:44px;padding:6px 4px;display:inline-flex}}.toolbar .sep{background:#e2e8f0;flex-shrink:0;width:1px;height:24px;margin:0 2px}.toolbar button.tool{background:0 0;border:1px solid #0000;border-radius:8px;flex-shrink:0;padding:4px 10px}.toolbar button.tool:hover{background:#f1f5f9}.pill{white-space:nowrap;background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:4px 10px}.status-connected{color:#15803d}.status-connecting{color:#b45309}.status-disconnected{color:#b91c1c}.avatars{display:flex}.avatar{color:#fff;border:2px solid #fff;border-radius:999px;place-items:center;width:26px;height:26px;margin-left:-6px;font-size:12px;font-weight:600;display:grid}.cursor{pointer-events:none;z-index:5;transition:transform 60ms linear;position:absolute;top:0;left:0}.cursor-label{color:#fff;white-space:nowrap;border-radius:6px;padding:2px 6px;font-size:12px;position:absolute;top:14px;left:14px}