:root{--bg:#0f1115;--panel:rgba(22,26,34,0.82);--border:rgba(255,255,255,0.10);--text:#e6e9ef;--muted:#99a2b2;--accent:#60a5fa}*{box-sizing:border-box}body,html{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}.board{position:fixed;inset:0}.board canvas{display:block;width:100%;height:100%;touch-action:none}.topbar{position:fixed;top:16px;left:16px;display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--panel);border:1px solid var(--border);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;z-index:10}.brand{font-weight:700;letter-spacing:.2px}.brand span{color:var(--accent)}.room{color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%}.dot.open{background:#22c55e;box-shadow:0 0 8px #22c55e}.dot.connecting{background:#f59e0b}.dot.closed{background:#ef4444}.presence{position:fixed;top:16px;right:16px;display:flex;align-items:center;gap:-8px;z-index:10}.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#0b0d12;border:2px solid var(--bg);margin-left:-8px}.toolbar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:8px;background:var(--panel);border:1px solid var(--border);border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(0,0,0,.45);z-index:10}.tool{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;font-size:17px;transition:background .12s,border-color .12s}.tool:hover:not(:disabled){background:rgba(255,255,255,.06)}.tool.active{background:rgba(96,165,250,.18);border-color:rgba(96,165,250,.5)}.tool:disabled{opacity:.32;cursor:default}.sep{width:1px;height:26px;background:var(--border);margin:0 4px}.swatches{display:flex;gap:5px;align-items:center}.swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s}.swatch:hover{transform:scale(1.15)}.swatch.active{border-color:#fff}.hint{position:fixed;bottom:22px;right:16px;font-size:12px;color:var(--muted);z-index:10}@media (max-width:640px){.hint{display:none}.toolbar{max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center}}.sticky-editor{position:fixed;z-index:20;resize:none;border:2px solid var(--accent);border-radius:6px;padding:10px;font-family:inherit;font-size:15px;line-height:18px;color:#1f2937;outline:none}.travel-tag{color:#a78bfa;font-weight:700;font-size:12px}.timeline{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--panel);border:1px solid var(--border);border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(0,0,0,.45);z-index:10;width:min(560px,90vw)}.timeline input[type=range]{flex:1 1;accent-color:var(--accent);cursor:pointer}.tcount{font-size:12px;color:var(--muted);min-width:96px;text-align:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.tool.live{color:#22c55e;font-weight:700;font-size:12px;width:auto;padding:0 12px}.netbtn{margin-left:4px;padding:4px 10px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:12px;cursor:pointer}.netbtn:hover{background:rgba(255,255,255,.06)}.netbtn.off{color:#fca5a5;border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.12)}.offline-banner{padding:7px 16px;border-radius:10px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.5);color:#fca5a5}.net-banner,.offline-banner{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:11;font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.net-banner{padding:8px 18px;border-radius:10px;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.5);color:#fcd34d;text-align:center;max-width:min(92vw,720px)}.net-banner .hint{position:static;display:block;margin-top:2px;font-size:12px;color:rgba(252,211,77,.66);font-weight:500}.net-banner code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;padding:1px 5px;border-radius:5px;background:rgba(245,158,11,.16)}.archive{position:fixed;top:64px;left:16px;z-index:12;width:240px;max-height:62vh;overflow-y:auto;padding:8px;background:var(--panel);border:1px solid var(--border);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(0,0,0,.45)}.archive-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px;font-size:12px;color:var(--muted)}.archive-head .tool{width:26px;height:26px;font-size:13px}.archive-empty{padding:10px 6px;font-size:12px;color:var(--muted)}.archive-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 10px;margin-bottom:4px;border-radius:8px;border:1px solid transparent;background:rgba(255,255,255,.03);color:var(--text);font-size:12px;cursor:pointer;text-align:left}.archive-item:hover{background:rgba(255,255,255,.08)}.archive-item.current{border-color:rgba(34,197,94,.5);color:#86efac}.archive-count{color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.pg{position:fixed;inset:0;display:flex;flex-direction:column;overflow-y:auto;padding:12px 14px;gap:10px}.pg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.pg-sub{color:var(--muted);font-weight:500;font-size:13px;margin-left:6px}.pg-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pg-links .netbtn{text-decoration:none}.pg-note{color:var(--muted);font-size:12px;margin-right:6px}.pg-controls{gap:12px;flex-wrap:wrap;padding:8px 12px;background:var(--panel);border:1px solid var(--border);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px}.pg-controls,.pg-ctl{display:flex;align-items:center}.pg-ctl{gap:7px;color:var(--muted)}.pg-ctl b{color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:52px;font-weight:600}.pg-ctl input[type=range]{width:110px;accent-color:var(--accent);cursor:pointer}.pg-demo{padding:7px 14px;border-radius:9px;border:1px solid rgba(96,165,250,.55);background:rgba(96,165,250,.16);color:#bfdbfe;font-size:13px;font-weight:700;cursor:pointer}.pg-demo:hover{background:rgba(96,165,250,.26)}.pg-demo.on{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.14);color:#fca5a5}.pg-part{padding:6px 12px;border-radius:9px;border:1px solid rgba(239,68,68,.5);background:transparent;color:#fca5a5;font-size:12px;font-weight:600;cursor:pointer}.pg-part:hover{background:rgba(239,68,68,.1)}.pg-part.on{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.5);color:#86efac}.pg-presets{display:flex;gap:5px}.pg-preset{padding:5px 10px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:12px;cursor:pointer}.pg-preset:hover{background:rgba(255,255,255,.06);color:var(--text)}.pg-panes{flex:1 1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.pg-pane{position:relative;min-height:300px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#0c0e13}.pg-pane canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.pg-pane-head{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:7px;padding:5px 10px;background:var(--panel);border:1px solid var(--border);border-radius:9px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;pointer-events:none}.pg-peer-dot{width:8px;height:8px;border-radius:50%}.pg-fp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;padding:1px 6px;border:1px solid;border-radius:6px;color:var(--text)}.pg-toolbar{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px 7px;background:var(--panel);border:1px solid var(--border);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center}.pg-toolbar .tool{width:32px;height:32px;font-size:14px}.pg-toolbar .swatch{width:17px;height:17px}.pg-editor{position:absolute}.pg-wire-wrap{position:relative;height:116px;flex:none;border:1px solid var(--border);border-radius:14px;background:rgba(12,14,19,.8);overflow:hidden}.pg-wire{display:block;width:100%;height:100%}.pg-badge{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:5px 14px;border-radius:9px;border:1px solid;font-size:12px;font-weight:700;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}.pg-badge-fps{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:11px;opacity:.85}.pg-badge.converged{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.55);color:#86efac}.pg-badge.syncing{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.5);color:#fcd34d}.pg-badge.partitioned{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.55);color:#fca5a5}.pg-badge.diverged{background:rgba(239,68,68,.25);border-color:#ef4444;color:#fecaca}.pg-foot{color:var(--muted);font-size:11.5px;text-align:center;padding-bottom:2px}@media (max-width:820px){.pg-panes{grid-template-columns:1fr}.pg-pane{min-height:340px}.pg-note{display:none}}.toast{position:fixed;bottom:78px;left:50%;transform:translateX(-50%);z-index:13;padding:8px 16px;border-radius:10px;background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.5);color:#86efac;font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}