@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{flex:none;display:flex;align-items:center;gap:12px;font-weight:650;font-size:19px;letter-spacing:.32em;.mark{flex:none;width:36px;height:36px;filter:drop-shadow(0 4px 14px oklch(.6 .2 285 / .5))}& span{background:linear-gradient(90deg,#f3f4fc,#c9c0ff);background-clip:text;color:transparent;margin-right:-.32em}}.mark{.look{translate:var(--lx, 0px) var(--ly, 0px);transition:translate .35s var(--ease-out)}.eyes{transform-box:fill-box;transform-origin:center;animation:blink 7s infinite 2s}.eye-r{transform-box:fill-box;transform-origin:center}}.logo.live .eye-r{animation:eye-live 1.6s ease-in-out infinite}.splash{position:fixed;inset:0;z-index:40;display:grid;place-content:center;justify-items:center;gap:26px;background:radial-gradient(60% 50% at 50% 45%,oklch(.3 .12 285 / .55),transparent 70%),var(--bg);pointer-events:none;animation:splash-out .5s 1.15s var(--ease-out) forwards;.mark{width:128px;height:128px;filter:drop-shadow(0 18px 50px oklch(.6 .2 285 / .55));animation:mark-in .8s var(--spring) both}.eyes{animation:eyes-open .3s .45s var(--ease-out) both,blink .5s .85s}& p{display:flex;font-size:30px;font-weight:650;letter-spacing:.5em;margin-right:-.5em;color:#e6e1ff}& span{animation:letter-in .5s calc(.45s + var(--i) * 45ms) var(--ease-out) both}}.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}}.account-chip{flex:none;display:flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border-radius:999px;white-space:nowrap;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:13.5px;font-weight:600;>.ic{margin-left:6px}&.in{color:var(--text)}&[hidden]{display:none}&:hover{border-color:var(--line-hi)}}@container top (width < 1000px){.account-chip span{display:none}.account-chip{padding-right:6px}}.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{flex:none;white-space:nowrap;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{position:relative;isolation:isolate;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);.kicker{flex-wrap:nowrap;height:28px;overflow:hidden;white-space:nowrap}& h1{font-size:clamp(30px,min(5cqi,7.5cqh),72px);line-height:1.12;height:1.12em;font-weight:800;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}& p:not(.kicker){max-width:72ch;color:var(--muted);font-size:clamp(15px,1.2cqi,19px);line-height:1.45;height:2lh;text-wrap:pretty;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.acts{display:flex;gap:22px;height:28px;margin-top:4px;font-size:15px;white-space:nowrap}}.hero-art{position:absolute;z-index:-1;right:var(--safe);top:4px;height:calc(100% - 8px);max-width:46%;object-fit:cover;aspect-ratio:10 / 9;border-radius:var(--r-lg);opacity:0;transition:opacity .35s var(--ease-out);mask-image:linear-gradient(to left,#000 55%,transparent),linear-gradient(to top,transparent,#000 25%);mask-composite:intersect;&.px{image-rendering:pixelated}&.on[src]{opacity:.85}}@container home (width < 900px){.hero-art{display:none}}@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)}.hint.with-mascot{display:flex;align-items:center;gap:16px;margin-top:4px;font-size:16px;color:var(--muted);.mascot{flex:none;width:52px;height:52px}}}.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)}.row.grid{&:not(:has(.focus)){opacity:1}.tiles{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));overflow:visible;mask:none;padding-block:8px 10px}}.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 .art{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;& img{display:block;width:100%;height:100%;object-fit:cover;&.px{image-rendering:pixelated}}&:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(.1 .03 var(--h) / .1) 30%,oklch(.1 .03 var(--h) / .94) 92%)}}.tile .sil{position:absolute;right:6%;top:8%;height:84%;aspect-ratio:1;pointer-events:none;color:oklch(.86 .1 var(--h) / .26);rotate:-10deg;transition:rotate .5s var(--spring),scale .5s var(--spring),color .3s;& svg{width:100%;height:100%;display:block}}.tile.focus .sil{rotate:-3deg;scale:1.06;color:oklch(.9 .1 var(--h) / .42)}.tile.genre .sil{height:70%;top:12%;.ic{stroke-width:1.5}}.tile.covered .t{text-shadow:0 2px 10px oklch(0 0 0 / .6)}.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.welcome,.menu.profile{width:min(460px,100%);& header{justify-items:center;text-align:center;gap:8px}& header .mascot{width:72px;height:72px;margin-bottom:6px}.note{color:var(--muted);font-size:15px;text-wrap:pretty;padding:0 8px 6px;text-align:center}.gsi{display:grid;place-items:center;min-height:52px;margin:4px 0 8px}}.menu.profile{gap:6px;.field{width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--line-hi);background:#02020c99;font-size:20px;font-weight:700;text-align:center;outline:none;user-select:text;&:focus{border-color:var(--violet)}}.field.pet{font-size:16px;font-weight:600}.label{padding:8px 8px 2px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}.friend-code{color:var(--cyan);letter-spacing:.2em}.swatches{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px;& button{padding:6px;border-radius:50%;& i{display:block;width:26px;height:26px;border-radius:50%}}& button.on{box-shadow:0 0 0 3px var(--cyan)}}.accs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:4px;& button{padding:8px 10px;font-size:15px;gap:10px}& button.on{box-shadow:inset 0 0 0 2px var(--cyan)}}.add-friend{display:flex;gap:6px;.field{flex:1;font-size:16px;letter-spacing:.15em;text-transform:uppercase}& button{flex:none}}}.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)}}input.pin{width:100%;padding:14px 18px;margin:4px 0 8px;border-radius:14px;border:1px solid var(--line-hi);outline:none;background:#02020c99;font-size:28px;font-weight:800;letter-spacing:.4em;text-align:center;user-select:text;&:focus{border-color:var(--violet);box-shadow:0 0 0 4px oklch(from var(--violet) l c h / .25)}}.touchpad{position:fixed;inset:auto 0 0;z-index:6;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:12px;padding:0 max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));>*{pointer-events:auto}& button{touch-action:none;-webkit-tap-highlight-color:transparent}}.tp-btn{display:grid;place-items:center;border:1px solid oklch(1 0 0 / .22);border-radius:50%;background:#1314288c;color:#ffffffd9;font-weight:800;font-size:20px;transition:background-color .08s,scale .08s;&.on{background:oklch(.7 .17 285 / .8);scale:.92}}.tp-dpad{grid-column:1;width:156px;height:156px;border-radius:50%;position:relative;background:#13142873;border:1px solid oklch(1 0 0 / .18);&:before,&:after{content:"";position:absolute;inset:50% 18px auto;height:48px;translate:0 -50%;border-radius:10px;background:#ffffff24}&:after{inset:18px auto 18px 50%;width:48px;height:auto;translate:-50% 0}&:not([data-dir="0"])[data-dir]{background:#2b26548c}}.tp-face{grid-column:3;display:grid;grid-template:repeat(3,52px) / repeat(3,52px);.y{grid-area:2 / 1}.x{grid-area:1 / 2}.b{grid-area:3 / 2}.a{grid-area:2 / 3}.tp-btn{width:60px;height:60px;margin:-4px}.a{background:#6b5dcf99}}.tp-mid{grid-column:2;justify-self:center;display:flex;gap:14px;margin-bottom:8px;.small{width:auto;height:32px;padding:0 14px;border-radius:16px;font-size:13px;text-transform:uppercase;letter-spacing:.06em}}.tp-btn.shoulder{position:fixed;top:max(64px,env(safe-area-inset-top));width:84px;height:44px;border-radius:14px;font-size:16px;&.l{left:max(16px,env(safe-area-inset-left))}&.r{right:max(16px,env(safe-area-inset-right))}}@media(orientation:portrait){.tp-dpad{width:136px;height:136px}.tp-face{grid-template:repeat(3,46px) / repeat(3,46px);.tp-btn{width:54px;height:54px}}.touchpad{grid-template-areas:"mid mid mid" "dpad . face";row-gap:14px}.tp-dpad{grid-area:dpad}.tp-face{grid-area:face}.tp-mid{grid-area:mid;margin-bottom:0}}.mascot{width:84px;height:84px;filter:drop-shadow(0 14px 30px oklch(.6 .2 285 / .45));& svg{width:100%;height:100%;display:block;overflow:visible}.m-body,.m-eyes,.m-tear,.m-z text,.m-spark path{transform-box:fill-box;transform-origin:center}.m-body{transform-origin:50% 100%}}.mascot.mini{width:28px;height:28px;filter:none}.m-idle .m-eyes{animation:blink 5s infinite 1s}.m-look .m-eyes{animation:m-look 2.4s var(--ease-out) infinite}.m-happy .m-body{animation:m-bounce 1.1s var(--ease-out) infinite}.m-happy .m-spark path{animation:m-spark 1.4s ease-in-out infinite;&:nth-child(2){animation-delay:.5s}}.m-sad .m-tear{animation:m-tear 2.6s ease-in infinite}.m-sad .m-body{rotate:-4deg}.m-sleep .m-body{animation:m-breathe 3.2s ease-in-out infinite}.m-sleep .m-z text{animation:m-z 2.8s ease-out infinite;&:nth-child(2){animation-delay:1.4s}}.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 blink{0%,96%,to{scale:1 1}97.5%{scale:1 .1}}@keyframes m-look{0%,to{translate:0 0}20%,40%{translate:-4.5px 0}60%,80%{translate:4.5px 0}}@keyframes m-bounce{0%,to{translate:0 0;scale:1 1}30%{translate:0 -6px;scale:.97 1.03}55%{translate:0 0;scale:1.04 .96}}@keyframes m-breathe{50%{scale:1.025 .975}}@keyframes m-tear{0%,30%{opacity:0;translate:0 -3px}45%{opacity:1}90%{opacity:1;translate:0 6px}to{opacity:0;translate:0 8px}}@keyframes m-z{0%{opacity:0;translate:-4px 6px}30%{opacity:1}to{opacity:0;translate:4px -8px}}@keyframes m-spark{0%,to{opacity:.2;scale:.6}50%{opacity:1;scale:1}}@keyframes eye-live{50%{scale:1.18;opacity:.75}}@keyframes mark-in{0%{scale:.55;opacity:0}40%{opacity:1}}@keyframes eyes-open{0%{scale:1 0}}@keyframes letter-in{0%{opacity:0;translate:0 10px}}@keyframes splash-out{to{opacity:0;scale:1.04}}@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}}}@layer tiles{.row.grid .tile{inline-size:auto}@container rows (width < 600px){.row.grid .tile{padding:10px 12px;.t{font-size:15px}.s{font-size:12px}.badge{display:none}}.row.grid .tile.focus{transform:scale(1.04)}}}