:root{--ground: #f2f5f6;--paper: #ffffff;--chrome: rgba(255, 255, 255, .82);--edge: #d6dfe4;--text: #111a20;--muted: #6b7c88;--accent: #12558c;--danger: #a93226;--ok: #2a6e48;--warn: #8a5a08;--ink: #101820;--shadow: 0 1px 2px rgba(17, 26, 32, .06), 0 12px 32px -18px rgba(17, 26, 32, .4);--bar-radius: 16px;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--ground: #0e151a;--chrome: rgba(23, 32, 39, .84);--edge: #26333c;--text: #e3eaef;--muted: #8496a2;--accent: #67b0eb;--danger: #e98275;--ok: #72c390;--warn: #dba749;--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -18px rgba(0, 0, 0, .9)}}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ground);color:var(--text);font:400 15px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;user-select:none}.surface{position:fixed;inset:0;background:var(--paper);touch-action:none;cursor:crosshair}.surface canvas{position:absolute;inset:0;display:block}body.is-readonly .surface{cursor:default}.bar{position:fixed;left:0;right:0;z-index:10;display:flex;align-items:center;gap:10px;padding:8px 12px;pointer-events:none}.bar>*{pointer-events:auto}.bar--top{top:0;padding-top:max(8px,env(safe-area-inset-top));justify-content:space-between}.bar--bottom{bottom:0;padding-bottom:max(10px,env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center;gap:8px}@media(max-width:460px){.bar--bottom{padding-left:8px;padding-right:8px;gap:6px}.bar--bottom .group{padding:5px;gap:2px}.room,.room__right{padding:6px 10px}#count{display:none}}body.is-readonly .bar--bottom{display:none}.room,.room__right,.group{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--chrome);border:1px solid var(--edge);border-radius:var(--bar-radius);box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.group{padding:6px;gap:4px}.room__meta{display:flex;flex-direction:column;line-height:1.15}.room strong{font-size:.86rem;font-weight:600}.sub{font-size:.72rem;color:var(--muted)}.sub--dim{opacity:.68;font-variant-numeric:tabular-nums}.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}.dot[data-state=online]{background:var(--ok)}.dot[data-state=connecting]{background:var(--warn);animation:pulse 1.4s ease-in-out infinite}.dot[data-state=offline],.dot[data-state=denied]{background:var(--danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}.icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:var(--text);transition:background .12s ease;flex:none}.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}.icon[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}.icon--danger:hover{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}.swatch{width:26px;height:26px;border-radius:50%;background:var(--c);border:2px solid transparent;box-shadow:inset 0 0 0 1.5px #ffffff80;transition:transform .12s ease;flex:none}.swatch[aria-pressed=true]{border-color:var(--accent);transform:scale(1.14)}.size{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;flex:none}.size i{display:block;border-radius:50%;background:var(--ink, var(--text));box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 40%,transparent)}.size:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}.size[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 16%,transparent)}:where(button):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:20;padding:9px 16px;border-radius:999px;background:var(--text);color:var(--ground);font-size:.8rem;box-shadow:var(--shadow);white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}[hidden]{display:none!important}.denied{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(6px)}.denied__card{max-width:34ch;padding:26px 28px;background:var(--paper);border:1px solid var(--edge);border-radius:14px;box-shadow:var(--shadow);text-align:center}.denied h1{margin:0 0 8px;font-size:1.1rem}.denied p{margin:0;color:var(--muted);font-size:.88rem}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}