:root{--forest-50: #eaf6ef;--forest-300: #6cc79a;--forest-500: #2f9e63;--forest-700: #1e6b45;--forest-900: #123c28;--gold-300: #f2cd74;--gold-500: #d4af37;--gold-700: #a9832a;--ink: #1a211d;--paper: #f7f8f5;--board-bg: #f6f7f4;--board-grid: rgba(28, 45, 36, .07);--on-board: #26312b;--on-board-dim: #6b7a71;--card-bg: #ffffff;--card-border: rgba(20, 40, 30, .1);--glass-tint: rgba(15, 26, 20, .66);--glass-blur: 16px;--glass-sat: 155%;--glass-border: rgba(212, 175, 55, .22);--glass-hi: rgba(255, 255, 255, .1);--chrome-solid: #101a14;--text: #eef2ec;--text-dim: #b3c1b8;--muted: #8b978f;--accent: var(--forest-500);--accent-hi: var(--forest-300);--on-accent: #eafff2;--gold: var(--gold-500);--live: var(--forest-300);--warn: var(--gold-500);--ring: rgba(108, 199, 154, .55);--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--fs-eyebrow: 11px;--fs-sm: 12px;--fs-md: 13px;--fs-lg: 15px;--fw-medium: 600;--fw-bold: 700;--fw-black: 800;--tracking-tight: -.01em;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--r-sm: 8px;--r-md: 11px;--r-lg: 14px;--r-pill: 999px;--e-1: 0 1px 2px rgba(6, 16, 10, .18);--e-2: 0 6px 18px rgba(6, 16, 10, .22);--e-3: 0 14px 40px rgba(6, 16, 10, .3);--ease: cubic-bezier(.2, .7, .2, 1);--dur-fast: .12s;--dur: .2s}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--board-bg: #14181a;--board-grid: rgba(150, 180, 165, .1);--on-board: #e9ede9;--on-board-dim: #9aa8a0;--card-bg: #1b2420;--card-border: rgba(255, 255, 255, .08);--glass-tint: rgba(32, 46, 39, .72);--glass-border: rgba(212, 175, 55, .3);--glass-hi: rgba(255, 255, 255, .07);--chrome-solid: #1c2822;--e-1: 0 1px 2px rgba(0, 0, 0, .5);--e-2: 0 6px 18px rgba(0, 0, 0, .5);--e-3: 0 14px 40px rgba(0, 0, 0, .55)}}:root[data-theme=dark]{--board-bg: #14181a;--board-grid: rgba(150, 180, 165, .1);--on-board: #e9ede9;--on-board-dim: #9aa8a0;--card-bg: #1b2420;--card-border: rgba(255, 255, 255, .08);--glass-tint: rgba(32, 46, 39, .72);--glass-border: rgba(212, 175, 55, .3);--glass-hi: rgba(255, 255, 255, .07);--chrome-solid: #1c2822;--e-1: 0 1px 2px rgba(0, 0, 0, .5);--e-2: 0 6px 18px rgba(0, 0, 0, .5);--e-3: 0 14px 40px rgba(0, 0, 0, .55)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-sans);color:var(--on-board);background:var(--board-bg);-webkit-font-smoothing:antialiased}.app{position:relative;height:100%;overflow:hidden}.board{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--board-bg)}.board-main,.board-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.board-main{touch-action:none}.board-overlay{pointer-events:none}.text-editor{position:absolute;z-index:5;margin:0;padding:2px 5px;border:1px solid var(--accent);border-radius:5px;background:var(--card-bg);color:var(--on-board);font-family:var(--font-sans);font-weight:500;line-height:1.25;resize:none;outline:none;box-shadow:0 0 0 3px var(--ring);overflow:hidden}.top{position:absolute;inset:var(--sp-3) var(--sp-3) auto var(--sp-3);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);pointer-events:none;z-index:10}.top>*{pointer-events:auto}.top-right{display:flex;align-items:center;gap:var(--sp-2)}.toolbar,.presence,.status,.board-chip,.style-pop,.menu-pop,.frost{background:var(--glass-tint);border:1px solid var(--glass-border);box-shadow:var(--e-3),inset 0 1px 0 var(--glass-hi);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));color:var(--text)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.toolbar,.presence,.status,.board-chip,.style-pop,.menu-pop,.frost,.hint{background:var(--chrome-solid)}}.toolbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-lg)}.brand{display:flex;align-items:center;gap:9px;padding-left:2px;text-decoration:none;cursor:pointer;border-radius:var(--r-sm);transition:opacity var(--dur-fast) var(--ease)}a.brand:hover{opacity:.82}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);background:var(--gold);color:#1c1607;font-weight:var(--fw-black);font-size:12px;letter-spacing:.02em;box-shadow:var(--e-1)}.brand-name{font-weight:var(--fw-bold);letter-spacing:var(--tracking-tight);font-size:var(--fs-lg);color:var(--text)}.divider{width:1px;align-self:stretch;margin:3px 0;background:#ffffff17}.tools{display:flex;align-items:center;gap:3px}.tool,.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-md);border:1px solid transparent;background:transparent;color:var(--text-dim);cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}.tool:hover,.icon-btn:hover{background:#ffffff12;color:var(--text)}.tool.active{background:var(--accent);color:var(--on-accent);border-color:#6cc79a80;box-shadow:inset 0 1px #ffffff29}.style{position:relative;display:inline-flex}.style-trigger{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-md);border:1px solid transparent;background:transparent;cursor:pointer;transition:background var(--dur-fast) var(--ease)}.style-trigger:hover{background:#ffffff12}.style-dot{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1.5px #ffffff59,inset 0 0 0 1px #00000026}.style-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:20;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-lg)}.style-pop{min-width:268px}.pop-row{display:flex;align-items:center;gap:10px}.pop-label{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-dim);width:40px;flex-shrink:0}.pop-row .swatches{flex-wrap:wrap;flex:1}.style-pop .width{padding-left:50px}.style-pop .width input[type=range]{width:186px}.menu{position:relative;display:inline-flex}.menu-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:20;min-width:194px;padding:6px;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:2px}.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:transparent;color:var(--text);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);border-radius:var(--r-sm);cursor:pointer;text-align:left}.menu-item svg{width:16px;height:16px;color:var(--text-dim)}.menu-item span{flex:1}.menu-item kbd{font:inherit;font-size:11px;color:var(--muted);background:#ffffff14;padding:1px 5px;border-radius:4px}.menu-item:hover{background:#ffffff14}.menu-item.danger:hover{background:#d1495b29;color:#ffb4b4}.menu-item.danger:hover svg{color:#ffb4b4}.menu-sep{height:1px;background:#ffffff17;margin:4px 2px}.swatch.none{background:#fff;position:relative;overflow:hidden}.swatch.none:after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:#d1495b;transform:translate(-50%) rotate(45deg)}.swatches{display:flex;align-items:center;gap:6px}.swatch{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);cursor:pointer;padding:0;transition:transform var(--dur-fast) var(--ease)}.swatch:hover{transform:scale(1.14)}.swatch.active{outline:2px solid var(--gold);outline-offset:2px;border-color:transparent}.swatch.custom{position:relative;display:inline-grid;place-items:center;width:22px;height:22px;border:none;border-radius:50%;background:conic-gradient(from 90deg,#ff5c5c,#f7b955,#ffe14d,#4fd67a,#45c7e0,#6d8bff,#b06dff,#ff5c5c);overflow:hidden}.swatch.custom .swatch-dot{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 2px var(--chrome-solid)}.swatch.custom input{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;opacity:0;cursor:pointer}.width{display:flex;align-items:center;gap:var(--sp-2)}.width input[type=range]{width:84px;accent-color:var(--gold)}.width-preview{border-radius:50%;min-width:4px;min-height:4px;box-shadow:0 0 0 1px #ffffff4d}.zoom{display:flex;align-items:center;gap:1px}.zoom-level{min-width:46px;font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-dim);background:transparent;border:none;cursor:pointer;padding:6px 4px;border-radius:7px;font-variant-numeric:tabular-nums}.zoom-level:hover{background:#ffffff12;color:var(--text)}.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--glass-border);background:transparent;color:var(--text-dim);font:inherit;font-weight:var(--fw-medium);font-size:var(--fs-md);padding:6px 12px;border-radius:var(--r-md);cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.btn svg{width:15px;height:15px}.btn:hover{background:#d4af3724;color:var(--gold-300);border-color:#d4af376b}.presence{display:flex;align-items:center;gap:var(--sp-2);padding:6px 12px 6px 8px;border-radius:var(--r-pill)}.avatars{display:flex}.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:var(--fw-black);border:2px solid var(--chrome-solid);margin-left:-8px;box-shadow:var(--e-1)}.avatar:first-child{margin-left:0}.avatar.me{outline:2px solid var(--gold);outline-offset:-2px}.avatar.more{background:#55655c;color:#eef2ec}.presence-count{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--muted);white-space:nowrap}.statusbar{display:flex;align-items:center;gap:var(--sp-2)}.board-chip{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--text);padding:7px 12px;border-radius:var(--r-pill);cursor:pointer}.board-chip .hash{color:var(--gold)}.board-chip .copy{margin-left:6px;font-size:11px;font-weight:var(--fw-medium);color:var(--muted);opacity:0;transition:opacity var(--dur-fast) var(--ease)}.board-chip:hover .copy{opacity:1}.status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--muted);padding:7px 12px;border-radius:var(--r-pill)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px #d4af3733}.status.live .status-dot{background:var(--live);box-shadow:0 0 0 3px #6cc79a38}.status .node{color:var(--text);font-variant-numeric:tabular-nums}.hint{position:absolute;left:50%;bottom:var(--sp-3);transform:translate(-50%);z-index:10;font-size:var(--fs-sm);color:var(--text-dim);background:var(--glass-tint);border:1px solid rgba(255,255,255,.08);box-shadow:var(--e-2);padding:5px 12px;border-radius:var(--r-pill);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}.hint kbd{font:inherit;font-weight:var(--fw-bold);color:var(--text);background:#ffffff1a;padding:1px 5px;border-radius:5px}.lobby{height:100%;overflow:auto;background:var(--board-bg);color:var(--on-board);display:flex;flex-direction:column}.lobby-top{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5)}.lobby .brand-name{color:var(--on-board)}.icon-btn.ghost{color:var(--on-board-dim);border:1px solid var(--card-border)}.icon-btn.ghost:hover{color:var(--on-board);background:var(--card-bg)}.lobby-main{width:100%;max-width:860px;margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-6);flex:1}.lobby-title{font-size:30px;font-weight:var(--fw-black);letter-spacing:var(--tracking-tight);margin:var(--sp-4) 0 var(--sp-1)}.lobby-sub{color:var(--on-board-dim);font-size:var(--fs-lg);margin:0 0 var(--sp-5);max-width:60ch}.lobby-create{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-5)}.lobby-create input{flex:1;min-width:220px;font:inherit;font-size:var(--fs-lg);color:var(--on-board);background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-md);padding:10px 14px;outline:none}.lobby-create input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}.lobby .btn{border:1px solid var(--card-border);background:var(--card-bg);color:var(--on-board);font:inherit;font-weight:var(--fw-medium);font-size:var(--fs-md);padding:10px 16px;border-radius:var(--r-md);cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.lobby .btn:hover{border-color:var(--accent)}.lobby .btn.primary{background:var(--accent);border-color:transparent;color:var(--on-accent)}.lobby .btn.primary:disabled{opacity:.5;cursor:default}.lobby-err{color:#d1495b;font-size:var(--fs-md);margin-bottom:var(--sp-4)}.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-3)}.board-card{position:relative;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-lg);box-shadow:var(--e-1);transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.board-card:hover{transform:translateY(-2px);box-shadow:var(--e-2);border-color:var(--accent)}.board-card-main{display:block;text-decoration:none;color:inherit;padding:var(--sp-4);padding-right:40px}.board-del{position:absolute;top:8px;right:8px;width:26px;height:26px;display:grid;place-items:center;border:none;background:transparent;color:var(--on-board-dim);font-size:20px;line-height:1;border-radius:7px;cursor:pointer;opacity:0;transition:opacity var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}.board-card:hover .board-del{opacity:1}.board-del:hover{background:#d1495b24;color:#d1495b}.board-card-title{font-weight:var(--fw-bold);font-size:var(--fs-lg);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-card-meta{color:var(--on-board-dim);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}.lobby-empty{color:var(--on-board-dim);padding:var(--sp-5) 0}