:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f7f6f2;--ink:#202124;--muted:#6b7280;--status-text:#6b7280;--line:#d7d7cf;--panel:#fff;--panel-soft:#ffffffd1;--control:#f8fafc;--control-hover:#eef2f7;--input-bg:#fff;--workspace:#eef0f3;--key-bg:#f8fafc;--active-bg:#dbeafe;--active-ink:#1d4ed8;--accent:#2563eb;--danger:#c2410c;--danger-line:#c2410c4d;--shadow:0 18px 50px #0f172a1f;--backdrop:#20212461}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#20252b;--ink:#f7f8fa;--muted:#c1c8d2;--status-text:#6b7280;--line:#4a535f;--panel:#303741;--panel-soft:#2b323bf0;--control:#3b4450;--control-hover:#46515f;--input-bg:#252b33;--workspace:#242a31;--key-bg:#3d4652;--active-bg:#245986;--active-ink:#e0f2fe;--accent:#60a5fa;--danger:#fb923c;--danger-line:#fb923c61;--shadow:0 18px 50px #0000006b;--backdrop:#0000009e}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}.app-shell{height:100dvh;min-height:0;display:block}.toolbar{z-index:20;border-right:1px solid var(--line);background:var(--panel-soft);flex-direction:column;gap:18px;width:280px;min-height:0;padding:22px;transition:none;display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-100%)}.app-loading .toolbar,.app-loading .toolbar-toggle{visibility:hidden}.app-ready .toolbar{transition:transform .18s}.toolbar-is-open .toolbar{transform:translate(0)}.brand-row{justify-content:space-between;align-items:center;gap:10px;min-height:36px;display:flex}.brand{align-items:center;gap:10px;font-size:19px;font-weight:750;display:flex}.brand-mark{border:3px solid var(--ink);background:linear-gradient(135deg,#facc15 0 48%,#14b8a6 48% 100%);border-radius:8px;width:28px;height:28px}.field{color:var(--muted);gap:8px;font-size:13px;font-weight:650;display:grid}.field-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.field output{color:var(--ink);font-size:12px;font-weight:750}.field input[type=text],.field input:not([type]){border:1px solid var(--line);background:var(--input-bg);width:100%;height:42px;color:var(--ink);border-radius:8px;padding:0 12px}.field input[type=color]{border:1px solid var(--line);background:var(--input-bg);border-radius:8px;width:100%;height:42px;padding:4px}.field input[type=range]{width:100%}.swatches-panel{gap:8px;display:grid}.swatches-list{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.swatch-button{aspect-ratio:1;border:2px solid var(--line);background:var(--swatch-color);cursor:pointer;border-radius:5px;width:100%;min-height:0}.swatch-button:hover,.swatch-button.is-active{border-color:var(--accent)}.swatch-button.is-active{box-shadow:0 0 0 2px var(--active-bg)}.toggle-field{color:var(--muted);align-items:center;gap:10px;font-size:13px;font-weight:750;display:flex}.toggle-field input{width:18px;height:18px;accent-color:var(--accent)}.tool-row{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.tool-row-five{grid-template-columns:repeat(5,minmax(0,1fr))}.tool-row-three{grid-template-columns:repeat(3,minmax(0,1fr))}.button,.icon-button,.danger-button{border:1px solid var(--line);background:var(--control);min-height:44px;color:var(--ink);cursor:pointer;border-radius:8px}.icon-button:hover,.danger-button:hover{border-color:var(--accent);background:var(--control-hover)}.icon-button{font-weight:800}.icon-button.is-active{border-color:var(--accent);background:var(--active-bg);color:var(--active-ink)}.danger-button{border-color:var(--danger-line);color:var(--danger);font-weight:750}.help-button{font-size:18px}.theme-button{width:64px;min-height:36px;font-size:12px}.toolbar-toggle{z-index:25;border:1px solid var(--line);background:var(--control);min-height:40px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow);border-radius:8px;padding:0 12px;font-weight:800;display:block;position:fixed;top:14px;left:14px}.toolbar-toggle:hover{border-color:var(--accent);background:var(--control-hover)}.toolbar-is-open .toolbar-toggle{left:294px}.toolbar-scrim{z-index:15;cursor:pointer;background:0 0;border:0;display:block;position:fixed;inset:0}.toolbar-scrim[hidden]{display:none}.people{gap:10px;margin-top:auto;display:grid}.layers-panel{gap:10px;display:grid}.layers-list{gap:8px;display:grid}.layer-item{border:1px solid var(--line);background:var(--control);border-radius:8px;grid-template-columns:minmax(0,4fr) minmax(44px,1fr);align-items:center;gap:6px;min-height:42px;padding:4px;display:grid}.layer-select,.layer-visibility{height:32px;color:var(--ink);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;font-weight:800}.layer-select{text-align:left;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:0;display:grid}.layer-select:hover,.layer-visibility:hover{border-color:var(--accent);background:var(--control-hover)}.layer-select.is-active .layer-number{background:var(--active-bg);color:var(--active-ink)}.layer-number{border-radius:5px;place-items:center;height:30px;display:grid}.layer-name{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;overflow:hidden}.layer-visibility{color:var(--accent);place-items:center;padding:0;display:grid}.layer-visibility svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:19px;height:19px}.layer-visibility.is-hidden{color:var(--muted)}.layer-opacity{color:var(--muted);grid-column:1/-1;grid-template-columns:auto minmax(0,1fr) 42px;align-items:center;gap:8px;padding:0 5px 2px;font-size:12px;font-weight:700;display:grid}.layer-opacity input{min-width:0}.layer-opacity output{color:var(--ink);text-align:right}.section-title{color:var(--muted);font-size:13px;font-weight:750}#usersList{gap:8px;display:grid}.user-pill{border:1px solid var(--line);background:var(--control);border-radius:8px;grid-template-columns:10px minmax(0,1fr) 32px;align-items:center;gap:9px;min-width:0;padding:9px 10px;font-size:14px;display:grid}.user-pill.is-hidden-user{color:var(--muted)}.user-pill.is-hidden-user .user-name{text-decoration:line-through}.user-dot{border-radius:50%;flex:none;width:10px;height:10px}.user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-visibility{width:30px;height:30px;color:var(--accent);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;padding:0;display:grid}.user-visibility:hover{border-color:var(--accent);background:var(--control-hover)}.user-visibility:disabled{color:var(--muted);cursor:default;opacity:.45}.user-visibility svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:18px;height:18px}.board-wrap{min-width:0;height:100dvh;padding:22px;position:relative}.status-bar{z-index:3;pointer-events:none;color:var(--status-text);font-size:13px;font-weight:700;position:absolute;inset:34px}#connectionStatus,#resetStatus,#strokeCount{position:absolute}#connectionStatus{bottom:0;left:0}#strokeCount{top:0;right:0}#resetStatus{color:#4b5563;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffef9db;border:1px solid #6b728059;border-radius:6px;padding:5px 8px;bottom:0;right:0}#resetStatus.is-warning{color:#991b1b;background:#fef2f2f0;border-color:#dc26265c}:root[data-theme=dark] #resetStatus{color:#d1d5db;background:#20252bd1}:root[data-theme=dark] #resetStatus.is-warning{color:#fecaca;background:#451a1ae0}#board{border:1px solid var(--line);width:100%;height:100%;box-shadow:var(--shadow);cursor:crosshair;touch-action:none;background:#fffef9;border-radius:8px;display:block}#board.can-pan{cursor:grab}#board.is-panning{cursor:grabbing}#board.is-selecting{cursor:default}#board.is-moving-object{cursor:move}.font-select{z-index:4;border:1px solid var(--accent);background:var(--panel);min-width:132px;height:34px;color:var(--ink);box-shadow:var(--shadow);font:inherit;border-radius:8px;padding:0 10px;position:absolute}.text-editor{z-index:5;border:2px solid var(--accent);resize:none;color:#202124;min-width:48px;min-height:34px;box-shadow:var(--shadow);background:#fffef9d1;border-radius:4px;outline:none;padding:3px;font:16px/1.35 Inter,Arial,sans-serif;position:absolute;overflow:hidden}.text-editor-done{z-index:6;border:2px solid var(--accent);background:var(--accent);color:#fff;width:34px;height:34px;box-shadow:var(--shadow);border-radius:50%;place-items:center;font-size:18px;font-weight:800;line-height:1;display:grid;position:absolute}.text-editor-done:hover{filter:brightness(1.05)}.text-editor-done[hidden]{display:none}#cursors{pointer-events:none;position:absolute;inset:22px}.cursor{color:#fff;white-space:nowrap;align-items:center;gap:6px;font-size:12px;font-weight:750;display:flex;position:absolute;transform:translate(4px,4px)}.cursor:before{content:"";filter:drop-shadow(0 2px 2px #0003);border-top:13px solid;border-right:9px solid #0000;width:0;height:0}.cursor span{background:currentColor;border-radius:6px;padding:4px 7px;box-shadow:0 3px 10px #00000029}.cursor b{color:#fff}.help-dialog{border:1px solid var(--line);background:var(--panel);width:min(420px,100vw - 32px);color:var(--ink);box-shadow:var(--shadow);border-radius:8px;padding:0}.help-dialog::backdrop{background:var(--backdrop)}.help-dialog form{margin:0;padding:18px}.dialog-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;display:flex}.dialog-header h2{margin:0;font-size:18px}.dialog-close{width:36px;min-height:36px}.shortcut-list{gap:8px;margin:0;display:grid}.shortcut-list div{border-top:1px solid var(--line);grid-template-columns:1fr auto;align-items:center;gap:14px;padding:9px 0;display:grid}.shortcut-list dt,.shortcut-list dd{margin:0}.shortcut-list dt{color:var(--muted);font-size:14px;font-weight:700}.shortcut-list dd{border:1px solid var(--line);background:var(--key-bg);border-radius:6px;padding:4px 7px;font-size:13px;font-weight:750}@media (width<=760px){.toolbar{width:min(320px,86vw)}.toolbar-is-open .toolbar-toggle{left:min(334px,86vw + 14px)}.toolbar-scrim{background:var(--backdrop)}.board-wrap{height:100dvh;padding:12px}.status-bar{inset:24px}#cursors{inset:12px}}