:root{--bg:#f8f9fa;--canvas-bg:#fff;--panel:#fff;--panel-border:#e9ecef;--text:#1b1b1f;--text-muted:#6c757d;--accent:#6965db;--accent-soft:#e0dfff;--accent-contrast:#fff;--danger:#e03131;--success:#2f9e44;--shadow:0 2px 4px #0000000f, 0 4px 16px #00000014;--radius:10px;--radius-sm:7px;--panel-gap:12px;--font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-hand:Virgil, "Bradley Hand", "Comic Sans MS", "Segoe Print", cursive}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;margin:0;padding:0;overflow:hidden}button{font-family:inherit;font-size:inherit;color:inherit}.board{touch-action:none;position:fixed;inset:0;overflow:hidden}.board__canvas,.board__overlay{width:100%;height:100%;display:block;position:absolute;inset:0}.board__overlay{pointer-events:none}.board__ui{pointer-events:none;gap:var(--panel-gap);padding:var(--panel-gap);grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;display:grid;position:absolute;inset:0}.board__ui>*{pointer-events:auto}.board__top-left{gap:var(--panel-gap);flex-direction:column;grid-area:1/1;align-items:flex-start;min-height:0;display:flex}.board__top-center{grid-area:1/2;place-self:start center}.board__top-right{grid-area:1/3;place-self:start end;align-items:center;gap:8px;display:flex}.board__bottom-left{grid-area:3/1;align-self:end;align-items:center;gap:8px;display:flex}.board__bottom-right{grid-area:3/3;place-self:end}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px}.panel--pad{padding:12px}.toolbar{align-items:center;gap:2px;display:flex}.toolbar__divider{background:var(--panel-border);align-self:stretch;width:1px;margin:4px 6px}.tool{border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;place-items:center;width:38px;height:38px;transition:background .12s;display:grid;position:relative}.tool:hover{background:#f1f3f5}.tool[aria-pressed=true]{background:var(--accent-soft);color:#4a47b1}.tool:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.tool:disabled{opacity:.35;cursor:default}.tool__key{color:var(--text-muted);pointer-events:none;font-size:9px;line-height:1;position:absolute;bottom:1px;right:3px}.tool[aria-pressed=true] .tool__key{color:#6f6cc9}.style-panel{scrollbar-width:thin;flex-direction:column;gap:14px;width:212px;max-height:calc(100vh - 140px);display:flex;overflow-y:auto}.field__label{letter-spacing:.02em;color:var(--text-muted);margin-bottom:6px;font-size:11px;font-weight:600;display:block}.swatches{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.swatch{cursor:pointer;border:1px solid #0000001f;border-radius:6px;width:24px;height:24px;padding:0;position:relative}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--accent)}.swatch--transparent{background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.swatch__custom{cursor:pointer;background:0 0;border:1px solid #0000001f;border-radius:6px;width:24px;height:24px;padding:0}.segmented{gap:4px;display:flex}.segmented__item{border-radius:var(--radius-sm);cursor:pointer;background:#f1f3f5;border:none;flex:1;place-items:center;height:30px;transition:background .12s;display:grid}.segmented__item:hover{background:#e9ecef}.segmented__item[aria-pressed=true]{background:var(--accent-soft);color:#4a47b1}.slider{width:100%;accent-color:var(--accent)}.btn{border:1px solid var(--panel-border);border-radius:var(--radius);background:var(--panel);height:38px;box-shadow:var(--shadow);cursor:pointer;white-space:nowrap;align-items:center;gap:7px;padding:0 14px;font-size:13px;font-weight:600;transition:background .12s;display:inline-flex}.btn:hover{background:#f8f9fa}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.btn--primary:hover{background:#5b57d1}.btn--live{background:var(--success);border-color:var(--success);color:#fff}.btn--live:hover{background:#2b8a3e}.btn--ghost{box-shadow:none;background:0 0;border-color:#0000}.btn--ghost:hover{background:#f1f3f5}.btn--danger{color:var(--danger)}.zoom{align-items:center;gap:2px;display:flex}.zoom__value{border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:none;min-width:56px;height:32px;font-size:12px;font-weight:600}.zoom__value:hover{background:#f1f3f5}.status{background:var(--panel);border:1px solid var(--panel-border);height:32px;box-shadow:var(--shadow);color:var(--text-muted);border-radius:999px;align-items:center;gap:7px;padding:0 12px;font-size:12px;font-weight:600;display:inline-flex}.status__dot{background:var(--text-muted);border-radius:50%;flex:none;width:8px;height:8px}.status--connected .status__dot{background:var(--success)}.status--connecting .status__dot,.status--reconnecting .status__dot{background:#f08c00;animation:1.1s ease-in-out infinite pulse}.status--offline .status__dot{background:var(--danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}.avatars{align-items:center;display:flex}.avatar{border:2px solid var(--panel);color:#fff;cursor:pointer;border-radius:50%;place-items:center;width:30px;height:30px;margin-left:-8px;padding:0;font-size:11px;font-weight:700;transition:transform .12s;display:grid}.avatar:first-child{margin-left:0}.avatar:hover{z-index:1;transform:translateY(-2px)}.avatar--self{border-color:var(--accent)}.dialog-backdrop{z-index:30;background:#00000059;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.dialog{background:var(--panel);border-radius:14px;width:100%;max-width:440px;padding:24px;box-shadow:0 12px 40px #00000040}.dialog__title{margin:0 0 6px;font-size:19px;font-weight:700}.dialog__body{color:var(--text-muted);margin:0 0 18px;font-size:13.5px;line-height:1.55}.dialog__row{align-items:center;gap:8px;display:flex}.dialog__actions{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.input{border:1px solid var(--panel-border);border-radius:var(--radius);background:#f8f9fa;flex:1;min-width:0;height:38px;padding:0 12px;font-family:inherit;font-size:13px}.input:focus{outline:2px solid var(--accent);outline-offset:-1px;background:#fff}.input--readonly{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.text-editor{z-index:20;resize:none;white-space:pre;transform-origin:0 0;caret-color:var(--accent);background:0 0;border:none;outline:none;margin:0;padding:0;line-height:1.25;position:absolute;overflow:hidden}.hint{color:#fff;pointer-events:none;z-index:25;background:#1b1b1fd9;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:500;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.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}@media (width<=720px){.style-panel{width:180px}.board__top-right .btn span{display:none}}