@layer reset,tokens,base,shell,home,tiles,overlay,guest,motion;@property --hue{syntax: "<number>"; inherits: false; initial-value: 270;}@layer tokens{:root{color-scheme:dark;--bg: oklch(.13 .03 278);--bg-2: oklch(.19 .05 280);--surface: oklch(.21 .04 278 / .72);--line: oklch(1 0 0 / .09);--line-hi: oklch(1 0 0 / .18);--text: oklch(.97 .01 280);--muted: oklch(.75 .035 275);--dim: oklch(.56 .04 275);--ink: oklch(.18 .04 280);--violet: oklch(.66 .21 288);--blue: oklch(.67 .17 255);--cyan: oklch(.85 .12 212);--grad: linear-gradient(120deg, var(--violet), var(--blue));--p1: oklch(.68 .21 15);--p2: oklch(.72 .15 245);--p3: oklch(.87 .16 92);--p4: oklch(.8 .18 152);--r: 18px;--r-lg: 28px;--safe: max(20px, 3.2vw);--font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "SF Pro Display", Roboto, sans-serif;--ease-out: cubic-bezier(.16, 1, .3, 1);--spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001)}}@layer reset{*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%}h1,h2,h3,h4,p{margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer}}@layer base{html{background:var(--bg);overflow:clip}body{overflow:clip;color:var(--text);font:500 16px/1.45 var(--font);-webkit-font-smoothing:antialiased;user-select:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(120% 80% at 50% -10%,var(--bg-2),var(--bg) 60%)}#app{height:100%;display:flex;flex-direction:column;isolation:isolate}.hidden{display:none!important}:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ic-play{fill:currentColor;stroke:none}.g{display:inline-block;min-width:1.9em;height:1.9em;padding-inline:.45em;border-radius:999px;font:800 11.5px/1.9em var(--font);text-align:center;letter-spacing:.02em;background:var(--text);color:var(--ink);&:not([data-b=A]){background:none;color:var(--text);box-shadow:inset 0 0 0 1.5px currentColor}}kbd{display:inline-block;min-width:1.8em;padding:1px 7px;border-radius:7px;text-align:center;font:700 13px/1.6 ui-monospace,Cascadia Mono,monospace;background:#ffffff14;border:1px solid var(--line-hi);border-bottom-width:2px}.prompt{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600}.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}.tag{padding:2px 8px;border-radius:6px;border:1px solid var(--line-hi);color:var(--muted);letter-spacing:.06em}}@layer shell{.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;contain:strict;background:radial-gradient(55% 60% at 80% 0%,oklch(.46 .17 var(--hue) / .5),transparent 70%),radial-gradient(45% 55% at 0% 100%,oklch(.4 .14 calc(var(--hue) - 45) / .3),transparent 70%);transition:--hue .8s var(--ease-out)}#app:has(>.stage:not(.hidden)) .ambient{display:none}.top{flex:none;display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:18px var(--safe) 6px;container:top / inline-size}.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:.16em;.mark{width:36px;height:36px;filter:drop-shadow(0 4px 14px oklch(.6 .2 285 / .5))}& span{background:linear-gradient(90deg,#fff,oklch(.84 .09 270));background-clip:text;color:transparent}}.search{flex:0 1 260px;min-width:44px;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);cursor:text;transition:border-color .2s,box-shadow .2s,flex-basis .35s var(--ease-out);& input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:15px;user-select:text}& input::placeholder{color:var(--dim)}&:focus-within{flex-basis:360px;border-color:var(--violet);box-shadow:0 0 0 4px oklch(from var(--violet) l c h / .25);color:var(--text)}}.slots{flex:1;display:flex;justify-content:center;gap:10px}.slot{--pc: var(--dim);display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:13.5px;white-space:nowrap;transition:border-color .25s,background-color .25s,color .25s;& b{display:grid;place-items:center;min-width:30px;height:30px;border-radius:50%;font-size:12.5px;font-weight:800;background:oklch(from var(--pc) l c h / .16);color:var(--pc)}.ic{color:var(--pc)}&.on{--pc: var(--p);color:var(--text);border-color:oklch(from var(--pc) l c h / .5);background:oklch(from var(--pc) .3 calc(c*.45) h / .55)}&.on b{background:var(--pc);color:var(--ink);color:contrast-color(var(--pc))}&:not(.on){cursor:default}}.room-chip{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;white-space:nowrap;background:var(--surface);border:1px solid var(--line);font-size:13.5px;& b{color:var(--cyan);letter-spacing:.18em;font-weight:800}}.live{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s ease-in-out infinite}.clock{font-variant-numeric:tabular-nums;font-size:18px;font-weight:600;color:var(--muted)}@container top (width < 1000px){.slot span{display:none}.slot{padding-right:5px}}@container top (width < 640px){.clock,.logo span{display:none}.slots{justify-content:start}.search{flex-basis:44px}}.stage{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center}.game-canvas,.emu-frame,.guest-video{width:100vw;height:100vh;object-fit:contain;border:0;display:block;background:#000}.game-canvas{width:min(100vw,calc(100vh * 16 / 9));height:auto;aspect-ratio:16 / 9}}@layer home{.home{flex:1;min-height:0;display:flex;flex-direction:column;container:home / size}.hero{flex:none;display:grid;align-content:end;gap:12px;min-height:clamp(140px,24cqh,260px);padding:clamp(8px,2cqh,24px) var(--safe) clamp(4px,1.5cqh,16px);& h1{font-size:clamp(30px,min(5cqi,7.5cqh),72px);line-height:1.05;font-weight:800;letter-spacing:-.025em;text-wrap:balance;max-width:20ch;text-box:trim-start cap alphabetic;padding-bottom:4px}& p{max-width:72ch;color:var(--muted);font-size:clamp(15px,1.2cqi,19px);text-wrap:pretty}.acts{display:flex;gap:22px;margin-top:4px;font-size:15px}}@container home (height < 540px){.hero{display:none}}.rows{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding-bottom:8px;container:rows / inline-size}.row{transition:opacity .3s;&:not(:has(.focus)){opacity:.7}& h2{display:flex;align-items:baseline;gap:10px;padding:6px var(--safe) 0;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}& h2 small{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--dim)}&:has(.focus) h2{color:var(--text)}.hint{padding:0 var(--safe) 6px;margin-top:-10px;font-size:14px;color:var(--dim)}}.tiles{display:flex;gap:clamp(12px,1.4cqi,22px);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:14px var(--safe) 18px;scroll-padding-inline:var(--safe);mask:linear-gradient(90deg,transparent,#000 calc(var(--safe) * .6),#000 calc(100% - var(--safe) * .6),transparent)}.bar{flex:none;display:flex;align-items:center;gap:24px;font-size:14px;color:var(--muted);padding:12px var(--safe) max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#03030e8c;overflow:hidden;.sp{flex:1}.ic{width:22px;height:22px}}@container home (width < 760px){.bar .kb{display:none}}@container home (width < 520px){.bar .menu-hint{display:none}}}@layer tiles{.tile{--h: 268;position:relative;flex:none;inline-size:clamp(200px,16cqi,320px);aspect-ratio:16 / 9;scroll-margin-block:52px 30px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:16px 18px;border:0;border-radius:var(--r);text-align:left;color:var(--text);background:linear-gradient(180deg,transparent 40%,oklch(.1 .03 var(--h) / .8)),linear-gradient(135deg,oklch(.44 .15 var(--h)),oklch(.2 .06 calc(var(--h) + 25)));box-shadow:0 12px 30px -14px #000c,inset 0 1px #ffffff24;transition:transform .45s var(--spring),opacity .4s var(--ease-out),translate .55s var(--ease-out);contain:layout style;&:before{content:"";position:absolute;inset:-5px;border-radius:calc(var(--r) + 5px);pointer-events:none;border:3px solid #fff;box-shadow:0 0 0 1px oklch(.75 .15 285 / .5),0 0 26px 2px oklch(.62 .22 288 / .6);opacity:0;transition:opacity .18s}&.focus{transform:scale(1.07);z-index:1}&.focus:before{opacity:1;animation:breathe 2.6s ease-in-out .5s infinite}.t{font-size:clamp(17px,1.45cqi,24px);font-weight:750;line-height:1.15;text-wrap:balance}.s{font-size:13.5px;color:#d1d6ec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{position:absolute;top:12px;left:12px;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#0000006b}>.ic{position:absolute;top:16px;left:18px;width:30px;height:30px;color:oklch(.84 .11 var(--h))}.code{font-size:clamp(30px,3cqi,44px);font-weight:900;line-height:1.1;letter-spacing:.2em;color:var(--cyan)}}.tile[data-mark]:after{content:attr(data-mark);position:absolute;top:2px;right:14px;pointer-events:none;font-size:clamp(46px,5.5cqi,92px);font-weight:900;font-style:italic;letter-spacing:-.04em;line-height:1;color:#ffffff1a}.tile.warn{--h: 20}.tile.art-sumo{background:radial-gradient(circle at 61% 38%,var(--p1) 0 3.5%,transparent 4%),radial-gradient(circle at 76% 33%,var(--p2) 0 3.5%,transparent 4%),radial-gradient(circle at 68% 58%,var(--p3) 0 3.5%,transparent 4%),radial-gradient(circle at 81% 52%,var(--p4) 0 3.5%,transparent 4%),radial-gradient(circle at 71% 45%,oklch(.92 .03 85) 0 27%,oklch(.32 .05 275) 27.5% 30%,transparent 30.5%),linear-gradient(135deg,#293986,#100a23)}.tile.art-sumo .s{white-space:normal;max-width:50%}.tile.mini{inline-size:clamp(180px,13.5cqi,250px);aspect-ratio:auto;padding-top:62px;background:linear-gradient(160deg,oklch(.28 .05 var(--h) / .92),oklch(.18 .04 var(--h) / .92));box-shadow:inset 0 0 0 1px var(--line),0 12px 30px -16px #000}.tile.mini:not(:has(>.ic)){padding-top:16px}.tile.primary{background:linear-gradient(135deg,#7153dd,oklch(.5 .17 255));>.ic{color:#fff}.code{color:#fff}}@supports (corner-shape: squircle){.tile{--r: 32px;corner-shape:squircle;&:before{corner-shape:squircle}}.menu,.card{corner-shape:squircle;--r-lg: 44px}}.home.intro .tile{transition-delay:0s,calc(sibling-index()*45ms),calc(sibling-index()*45ms);@starting-style{opacity:0;translate:0 18px}}}@layer overlay{.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:var(--safe);background:#02020cb3;backdrop-filter:blur(14px) saturate(1.2);transition:opacity .25s var(--ease-out);@starting-style{opacity:0}}.menu{width:min(420px,100%);max-height:100%;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:var(--r-lg);background:linear-gradient(180deg,#1b1c36f0,#0c0d20f5);border:1px solid var(--line-hi);box-shadow:0 30px 80px -20px #000;transition:transform .5s var(--spring),opacity .25s;@starting-style{transform:translateY(18px) scale(.97);opacity:0}& header{display:grid;gap:4px;padding:2px 8px 12px}& h3{font-size:24px;font-weight:800;letter-spacing:-.01em}& button{display:flex;align-items:center;gap:14px;padding:13px 16px;border:0;border-radius:14px;background:none;text-align:left;font-size:18px;font-weight:600;transition:background-color .15s,color .15s;.ic{color:var(--muted);transition:color .15s}&.focus{background:var(--text);color:var(--ink);.ic{color:var(--violet)}}}& footer{display:flex;gap:20px;margin-top:10px;padding:12px 8px 0;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}}.menu.help{width:min(1000px,100%);display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;>header,>footer{grid-column:1 / -1}& section{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:10px 14px;padding:16px;border-radius:var(--r);background:#ffffff0a;border:1px solid var(--line);font-size:14.5px}& h4{grid-column:1 / -1;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--cyan)}.k{color:var(--muted)}.v{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}.kp{white-space:nowrap}}.toast{position:fixed;left:50%;bottom:max(26px,var(--safe));translate:-50% 0;z-index:20;max-width:calc(100vw - 32px);padding:12px 22px;border-radius:999px;overflow-wrap:anywhere;background:var(--text);color:var(--ink);font-weight:650;box-shadow:0 16px 40px -10px #000;transition:opacity .25s,translate .5s var(--spring);@starting-style{opacity:0;translate:-50% 20px}}.drop{position:fixed;inset:16px;z-index:30;display:grid;place-content:center;justify-items:center;gap:14px;border-radius:var(--r-lg);border:2px dashed oklch(.75 .15 285);background:#050613e0;font-size:clamp(22px,3vw,34px);font-weight:700;pointer-events:none;transition:opacity .2s;@starting-style{opacity:0}.ic{width:56px;height:56px;color:var(--violet)}}}@layer guest{.guest-hud{position:fixed;top:16px;left:16px;z-index:5;display:flex;gap:8px;transition:opacity .4s;&.dim{opacity:.2}.room-chip{background:#050613bf}}.guest-center{position:fixed;inset:0;z-index:4;display:grid;place-items:center;padding:20px;background:radial-gradient(90% 60% at 50% 0%,oklch(.32 .13 285 / .55),transparent 70%),var(--bg)}.card{width:min(460px,100%);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:clamp(24px,5vw,40px);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line-hi);box-shadow:0 40px 100px -30px #000;transition:opacity .3s,translate .55s var(--spring);@starting-style{opacity:0;translate:0 16px}& h1{font-size:clamp(26px,5vw,36px);font-weight:800;letter-spacing:-.02em;text-wrap:balance}& p{color:var(--muted);text-wrap:pretty}& input{width:100%;padding:14px 18px;border-radius:14px;border:1px solid var(--line-hi);outline:none;background:#02020c99;font-size:19px;text-align:center;user-select:text;transition:border-color .2s,box-shadow .2s;&:focus{border-color:var(--violet);box-shadow:0 0 0 4px oklch(from var(--violet) l c h / .25)}}.big-ic{width:56px;height:56px;color:var(--violet)}}.code-boxes{display:flex;gap:8px;& span{display:grid;place-items:center;width:54px;height:64px;border-radius:14px;background:#ffffff0f;border:1px solid var(--line-hi);font-size:30px;font-weight:800;color:var(--cyan)}}.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 26px;border:0;border-radius:14px;background:var(--grad);color:#fff;font-size:18px;font-weight:750;box-shadow:0 12px 30px -10px #7965f0b3;transition:transform .3s var(--spring),filter .2s;&:hover{filter:brightness(1.1)}&:active{transform:scale(.97)}}.spin{width:46px;height:46px;border-radius:50%;border:3px solid oklch(1 0 0 / .12);border-top-color:var(--cyan);animation:spin .9s linear infinite}}@layer motion{@keyframes breathe{50%{opacity:.55}}@keyframes pulse{50%{opacity:.35}}@keyframes spin{to{rotate:1turn}}@keyframes vt-out{to{opacity:0;transform:scale(.985)}}@keyframes vt-in{0%{opacity:0;transform:scale(1.02)}}::view-transition-old(root){animation:.2s var(--ease-out) both vt-out}::view-transition-new(root){animation:.32s var(--ease-out) both vt-in}@media(prefers-reduced-motion:reduce){*,*:before,*:after,::view-transition-group(*){animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}}}