:root{color-scheme:dark;--surface-0: hsl(350 3% 7%);--surface-1: hsl(350 3% 9%);--surface-2: hsl(350 3% 11%);--surface-3: hsl(350 3% 15%);--surface-sunk: hsl(350 3% 6%);--hair: hsl(350 3% 17%);--hair-strong: hsl(350 3% 23%);--hair-bright: hsl(350 3% 30%);--ink: hsl(20 5% 90%);--ink-2: hsl(350 6% 70%);--ink-3: hsl(350 6% 56%);--ink-max: hsl(20 20% 98%);--red: hsl(354 78% 60%);--red-fill: hsl(354 70% 46%);--red-fill-hi: hsl(354 80% 47%);--red-hi: hsl(356 90% 68%);--red-deep: hsl(354 65% 30%);--red-ink: hsl(356 85% 80%);--red-wash: hsl(354 78% 60% / .1);--red-line: hsl(354 78% 60% / .3);--red-glow: hsl(354 85% 50% / .22);--red-ambient: hsl(354 70% 40% / .08);--ok: hsl(150 32% 56%);--ok-wash: hsl(150 32% 56% / .1);--ok-line: hsl(150 32% 56% / .3);--warn: hsl(34 70% 62%);--warn-wash: hsl(34 70% 62% / .1);--warn-line: hsl(34 70% 62% / .32);--danger: var(--red-hi);--info: hsl(350 6% 70%);--veil: hsl(350 12% 3% / .7);--glass: hsl(350 3% 9% / .98);--scrim: hsl(350 20% 1% / .7);--shade: hsl(350 20% 1% / .45);--sheen: hsl(20 20% 98% / .16);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--measure: 720px;--r-1: 4px;--r-2: 8px;--r-3: 12px;--r-pill: 999px;--fs-xs: 10px;--fs-sm: 11px;--fs-md: 12px;--fs-base: 14px;--fs-lg: 15px;--fs-xl: 22px;--z-feed: 1;--z-sticky: 5;--z-dock: 10;--z-pop: 40;--z-sheet: 45;--z-overlay: 50;--lift-0: 0 6px 18px -10px hsl(350 20% 1% / .9);--lift-1: 0 8px 24px hsl(350 20% 1% / .55), 0 0 0 1px var(--hair-strong);--lift-2: 0 24px 64px hsl(350 20% 1% / .72), 0 0 0 1px var(--hair-strong);--lift-dock: 0 12px 32px -16px hsl(350 20% 1% / .9);--lift-side: 16px 0 48px hsl(350 20% 1% / .6);--ring-live: 0 0 0 3px var(--red-wash);--glow-0: 0 0 8px var(--red-glow);--glow-1: 0 0 16px var(--red-glow);--glow-2: 0 0 0 1px var(--red-wash), 0 0 24px var(--red-glow);--t-quick: .15s;--t-base: .18s;--t-panel: .2s;--ease-out: cubic-bezier(.2, .8, .2, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--ease-spring: linear(0, .18 4%, .6 13%, .93 22%, 1.06 30%, 1.08 36%, 1.03 47%, .995 60%, 1);--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Leelawadee UI", system-ui, sans-serif;--font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--surface-0);color:var(--ink);font:var(--fs-base)/1.5 var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}body{background:radial-gradient(120% 60% at 50% -10%,var(--red-ambient),transparent 70%),var(--surface-0)}#app{min-height:100%;padding:calc(env(safe-area-inset-top) + var(--space-4)) max(var(--space-4),env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + var(--space-4)) max(var(--space-4),env(safe-area-inset-left));transition:opacity .2s ease}#app.working{pointer-events:none}h1{margin:0;font-size:var(--fs-xl);font-weight:650;letter-spacing:-.01em}.glyph{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}.gate{min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--space-8));max-width:360px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);text-align:center;animation:rise .2s ease-out both}.mark{position:relative;width:72px;height:72px;margin-bottom:var(--space-2)}.mark-ring,.mark-core{position:absolute;inset:0;border-radius:50%}.mark-ring{border:1.5px solid var(--red-line);box-shadow:0 0 24px var(--red-glow),inset 0 0 16px var(--red-wash);animation:breathe 3.2s ease-in-out infinite}.mark-core{inset:24px;background:radial-gradient(circle at 35% 35%,var(--red-hi),var(--red-fill) 60%,var(--red-deep));box-shadow:0 0 16px var(--red-glow)}.button{height:48px;padding:0 var(--space-4);border:0;border-radius:var(--r-3);font:600 var(--fs-lg)/1 var(--font-ui);color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--hair-strong);cursor:pointer;transition:transform .15s ease,background .15s ease,opacity .15s ease}.button:active{transform:scale(.98)}.button.ghost{height:36px;padding:0 var(--space-3);font-size:var(--fs-md);color:var(--ink-3);background:transparent;box-shadow:none}.lead{margin:calc(var(--space-2) * -1) 0 0;color:var(--ink-3)}.link-form,.code-form{width:100%;display:grid;gap:var(--space-4);margin-top:var(--space-2)}.link-form input{height:48px;padding:0 var(--space-4);border:0;border-radius:var(--r-3);font:16px/1 var(--font-ui);color:var(--ink);background:var(--surface-sunk);box-shadow:inset 0 0 0 1px var(--hair-strong);outline:none;transition:box-shadow .15s ease}.link-form input:focus{box-shadow:inset 0 0 0 1px var(--red-line),var(--ring-live)}.code-field{position:relative;display:block}.code-field input{position:absolute;inset:0;width:100%;opacity:0;font-size:16px;caret-color:transparent}.cells{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-2)}.cell{display:grid;place-items:center;height:56px;border-radius:var(--r-3);font:600 24px/1 var(--font-mono);color:var(--ink-max);background:var(--surface-sunk);box-shadow:inset 0 0 0 1px var(--hair-strong);transition:box-shadow .15s ease,background .15s ease}.cell.filled{background:var(--surface-2)}.code-field:focus-within .cell.caret{box-shadow:inset 0 0 0 1px var(--red-line),var(--ring-live)}.remember{display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--fs-md);color:var(--ink-2);cursor:pointer}.remember input{position:absolute;opacity:0;pointer-events:none}.switch{position:relative;width:32px;height:20px;border-radius:var(--r-pill);background:var(--surface-3);transition:background .15s ease}.switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink-2);transition:transform .15s ease,background .15s ease}.remember input:checked+.switch{background:var(--red-fill)}.remember input:checked+.switch:after{transform:translate(12px);background:var(--ink-max)}#app.working .cells{opacity:.6}#app.shake .cells{animation:shake .35s ease}.list{max-width:var(--measure);margin:0 auto;animation:rise .2s ease-out both}.list-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) 0 var(--space-6)}.device{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:calc(var(--space-2) * -1) 0 var(--space-4)}.chip{display:inline-flex;align-items:center;gap:var(--space-2);height:32px;padding:0 var(--space-3);border:0;border-radius:var(--r-pill);font:500 var(--fs-md)/1 var(--font-ui);color:var(--ink-2);background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--hair-strong);transition:color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease}button.chip:active{transform:scale(.97)}.chip.on{color:var(--red-ink);background:var(--red-wash);box-shadow:inset 0 0 0 1px var(--red-line),var(--glow-0)}.chip.muted{color:var(--ink-3);background:transparent}.rooms{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-2)}.room{display:flex;align-items:center;gap:var(--space-3);min-height:64px;padding:var(--space-3) var(--space-4);border-radius:var(--r-3);color:inherit;text-decoration:none;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--hair);transition:transform .15s ease,background .15s ease}.room:active{transform:scale(.99);background:var(--surface-2)}.room-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-3)}.room-text{flex:1;min-width:0;display:grid;gap:2px}.room-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-detail{font-size:var(--fs-md);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-state{flex:none;font:600 var(--fs-sm)/1 var(--font-ui);color:var(--ink-3)}.room .glyph{flex:none;color:var(--ink-3)}.room[data-state=ready] .room-dot{background:var(--ok)}.room[data-state=busy] .room-dot{background:var(--red);box-shadow:0 0 8px var(--red-glow);animation:breathe 1.6s ease-in-out infinite}.room[data-state=busy] .room-state{color:var(--red-ink)}.room[data-state=waiting] .room-dot{background:var(--warn)}.room[data-state=waiting] .room-state{color:var(--warn)}.room[data-state=offline]{opacity:.55}.empty{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-8) 0;color:var(--ink-3)}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes breathe{50%{opacity:.55}}
