:root{--accent: #ff5a1f;--bg0: #ff8a3d;--ink: #fff;--title: "Audiowide", "Trebuchet MS", sans-serif;--body: "Exo 2", "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#120a26;color:var(--ink);font-family:var(--body);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app,#app canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#hud{position:fixed;inset:0;pointer-events:none}#hud button{pointer-events:auto}#brand{position:absolute;top:max(22px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left))}.logo{display:flex;align-items:center;gap:10px;font-family:var(--title);font-size:34px;letter-spacing:1px}.chrome{background:linear-gradient(180deg,#fff,#e9eef8 46%,#8a94ad 52%,#dfe6f6 78%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(10,6,24,.55)) drop-shadow(0 0 18px rgba(255,255,255,.25))}.pill{font-size:17px;padding:6px 12px 5px;border-radius:999px;color:#160c2c;background:linear-gradient(180deg,#fff 0%,var(--bg0) 100%);box-shadow:inset 0 1px #fff,0 3px 12px #00000040;transition:background .6s}.sub{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:3px;opacity:.72}#title-block{position:absolute;left:0;right:0;bottom:calc(118px + env(safe-area-inset-bottom));text-align:center;transition:opacity .35s,transform .35s}#g-index{font-size:13px;font-weight:800;letter-spacing:4px;color:var(--accent);text-shadow:0 0 12px rgba(0,0,0,.4);filter:brightness(1.3)}#g-title{margin:4px 0 2px;font-family:var(--title);font-weight:400;font-size:clamp(30px,5vw,56px);line-height:1;letter-spacing:1px;background:linear-gradient(180deg,#fff,#eef2fb 45%,#9aa3bd 53%,#f2f5ff 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(10,6,24,.6)) drop-shadow(0 0 22px rgba(255,255,255,.18))}#g-genre{font-size:15px;font-weight:700;letter-spacing:2px;opacity:.85;text-transform:uppercase}#title-block.swap{animation:swap .4s ease-out}@keyframes swap{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}body[data-state=inspect] #title-block,body[data-state=open] #title-block,body[data-state=return] #title-block{bottom:auto;top:max(92px,calc(env(safe-area-inset-top) + 80px))}body[data-state=inspect] #g-title,body[data-state=open] #g-title,body[data-state=return] #g-title{font-size:clamp(22px,3.2vw,34px)}body[data-state=launch] #title-block{opacity:0}.bar{position:absolute;left:50%;bottom:calc(40px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:12px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;white-space:nowrap}body[data-state=shelf] #shelf-nav,body[data-state=inspect] #inspect-nav,body[data-state=open] #open-nav{opacity:1;visibility:visible}.aqua{position:relative;font-family:var(--title);font-size:16px;letter-spacing:1px;color:#10233f;padding:0 26px;height:50px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:linear-gradient(180deg,#f9fcff,#cfe0f5 48%,#a9c3e6 52%,#e3f0ff);box-shadow:0 6px 18px #08041e59,inset 0 -3px 8px #5078be59,inset 0 2px #fff;cursor:pointer;outline:none;overflow:hidden;transition:filter .15s,box-shadow .15s}.aqua:before{content:"";position:absolute;left:10%;right:10%;top:3px;height:42%;border-radius:999px;background:linear-gradient(180deg,#fffffff2,#ffffff1a);pointer-events:none}.aqua:hover{filter:brightness(1.08);box-shadow:0 8px 26px #08041e73,inset 0 -3px 8px #5078be59,inset 0 2px #fff,0 0 0 3px #ffffff59}.aqua:active{filter:brightness(.94)}.aqua:focus-visible{box-shadow:0 0 0 3px #fff,0 6px 18px #08041e59}.aqua.round{width:50px;padding:0;font-size:30px;line-height:46px;font-family:var(--body);font-weight:800}.aqua.primary{color:var(--on-accent, #fff);text-shadow:0 1px 1px rgba(255,255,255,.25);border-color:#ffffffd9;background:linear-gradient(180deg,#ffffff59,#fff0 50%,#0000002e 52%,#ffffff1f),var(--accent);box-shadow:0 6px 22px #08041e66,0 0 26px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 2px #ffffffb3}.aqua.primary:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 2.6s ease-in-out infinite;pointer-events:none}@keyframes shimmer{0%,55%{left:-60%}to{left:130%}}.aqua.play{font-size:20px;padding:0 38px;height:56px}.tri{display:inline-block;width:0;height:0;border-left:14px solid var(--on-accent, #fff);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-right:10px;vertical-align:-2px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}#hint{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));text-align:center;font-size:13px;font-weight:700;letter-spacing:1px;opacity:.7}#credit{position:absolute;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));font-size:10px;opacity:.4}body[data-state=launch] .bar,body[data-state=launch] #hint{opacity:0;visibility:hidden}#toast{position:fixed;left:50%;top:22px;transform:translate(-50%,-140%);max-width:min(560px,92vw);padding:12px 20px;border-radius:14px;background:#0e0822db;border:1px solid rgba(255,255,255,.25);font-weight:700;font-size:14px;text-align:center;transition:transform .35s cubic-bezier(.2,1.4,.4,1);pointer-events:none}#toast.show{transform:translate(-50%)}#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s}body.flash #flash{opacity:1}#loader{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(circle at 50% 40%,#2a2d6e,#07051a 70%);opacity:0;visibility:hidden;transition:opacity .35s}body.loading #loader{opacity:1;visibility:visible}#loader-title{font-family:var(--title);font-size:clamp(26px,4vw,42px)}.loadbar{width:min(360px,70vw);height:18px;border-radius:4px;border:2px solid #c9d2ff;padding:2px;background:#0c0a2a}.loadbar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#7ef0ff 0 14px,transparent 14px 18px)}body.loading .loadbar i{animation:fill 1.25s steps(18) forwards}@keyframes fill{to{width:100%}}.loadtxt{font-size:13px;font-weight:800;letter-spacing:4px;opacity:.75}.cd{width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,#07051a 0 9%,#c8ccd8 9.5% 15%,transparent 15.5%),conic-gradient(from 0deg,#e8e8ef,#ffd1f5,#c5f7ff,#e5ffc9,#fff4c4,#e8e8ef,#d4c9ff,#e8e8ef);box-shadow:0 0 30px #8cdcff66;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#120a26;transition:opacity .6s}body.ready #boot{opacity:0;pointer-events:none}@media(max-width:640px){.logo{font-size:24px}.pill{font-size:13px}.sub{font-size:10px;letter-spacing:2px}#title-block{bottom:calc(108px + env(safe-area-inset-bottom))}.aqua{height:46px;padding:0 18px;font-size:14px}.aqua.round{width:46px;line-height:42px}.bar{gap:8px;bottom:calc(36px + env(safe-area-inset-bottom))}#credit{display:none}}body.returning #flash{transition:opacity .8s ease-out}body.returning #boot,body.returning #loader{transition:none}body.returning #boot{display:none}