:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#eef8ff;--muted:#8ea6b8;--glass:#08121fb8;--line:#96d6ea2e;--mint:#62e6c6;--gold:#ffcf5b;--blue:#7aa7ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang TC,Noto Sans TC,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{color:var(--ink);overscroll-behavior:none;background:#07101c;margin:0}button,input{font:inherit}button{color:inherit}#app{opacity:1;transition:opacity .18s;position:fixed;inset:0}#game-canvas{touch-action:none;cursor:grab;outline:none;width:100%;height:100%;display:block}body.instrument-hovering #game-canvas{cursor:none}.eyebrow{color:var(--mint);letter-spacing:.2em;font:700 10px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;display:block}.topbar{z-index:4;top:max(14px, env(safe-area-inset-top));border:1px solid var(--line);-webkit-backdrop-filter:blur(18px)saturate(1.25);backdrop-filter:blur(18px)saturate(1.25);background:linear-gradient(100deg,#0c1b2ce6,#07111dad);border-radius:18px;grid-template-columns:minmax(170px,1fr) minmax(260px,1.35fr) minmax(170px,1fr);align-items:center;width:min(940px,100% - 32px);min-height:68px;padding:11px 16px;display:grid;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 18px 48px #00000040}.brand-block strong{letter-spacing:.08em;margin-top:5px;font-size:18px;display:block}.song-block{border-inline:1px solid var(--line);padding:0 24px}.song-line{justify-content:space-between;align-items:center;gap:16px;display:flex}.song-line strong{font-size:14px}.song-line span{color:var(--muted);font-size:12px}.song-progress{background:#ffffff1a;border-radius:99px;height:4px;margin-top:9px;overflow:hidden}.song-progress i{transform-origin:0;background:linear-gradient(90deg, var(--mint), var(--gold));width:100%;height:100%;display:block;transform:scaleX(0)}.sound-block{justify-content:flex-end;align-items:center;gap:12px;display:flex}.sound-block input{width:min(120px,11vw);accent-color:var(--mint)}.ghost-button{border:1px solid var(--line);cursor:pointer;background:#ffffff0a;border-radius:9px;padding:7px 10px}.status-card,.instrument-card,.hall-card{z-index:3;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(16px)saturate(1.18);backdrop-filter:blur(16px)saturate(1.18);position:fixed;box-shadow:0 16px 42px #0000003d}.status-card{top:max(102px, calc(env(safe-area-inset-top) + 88px));border-radius:14px;gap:4px;min-width:148px;padding:13px 15px;display:grid;left:18px}.connection{color:var(--muted);align-items:center;gap:7px;font-size:11px;display:flex}.connection i{background:var(--gold);border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px}.connection[data-state=online] i{background:var(--mint)}.connection[data-state=reconnecting] i{animation:1s steps(2,end) infinite blink}.status-card strong{font-size:16px}.status-card>span{color:var(--muted);font-size:12px}.status-card>small{color:#ffcf5bb3;letter-spacing:.08em;margin-top:4px;font-size:9px}.instrument-card{left:18px;bottom:max(24px, calc(env(safe-area-inset-bottom) + 14px));border-radius:16px;width:min(310px,100% - 36px);padding:16px 18px}.instrument-card strong{margin-top:7px;font-size:22px;display:block}.instrument-card p,.hall-card p{color:var(--muted);margin:6px 0 0;font-size:12px;line-height:1.55}.hall-card{top:max(102px, calc(env(safe-area-inset-top) + 88px));border-radius:16px;width:290px;padding:15px;right:18px}.hall-heading strong{margin-top:5px;font-size:15px;display:block}.hall-buttons{grid-template-columns:repeat(2,1fr);gap:7px;margin-top:12px;display:grid}.hall-buttons button{border:1px solid var(--line);cursor:pointer;background:#ffffff09;border-radius:10px;justify-content:space-between;align-items:center;padding:9px 8px;transition:border-color .18s,background .18s,transform .18s;display:flex}.hall-buttons button:hover{border-color:#62e6c68c;transform:translateY(-1px)}.hall-buttons button[aria-pressed=true]{border-color:var(--mint);background:#62e6c621}.hall-buttons span{font-size:12px}.hall-buttons b{background:#ffffff14;border-radius:7px;place-items:center;min-width:40px;height:22px;font-size:10px;display:grid}.quality-toast{z-index:5;opacity:0;color:var(--blue);letter-spacing:.14em;text-shadow:0 0 28px;pointer-events:none;font:800 clamp(24px,4vw,42px)/1 Inter,ui-sans-serif,system-ui,sans-serif;position:fixed;top:25%;left:50%;transform:translate(-50%)}.quality-toast[data-grade=perfect]{color:var(--gold)}.quality-toast[data-grade=great]{color:var(--mint)}.finger-cursor{z-index:12;opacity:0;visibility:hidden;pointer-events:none;will-change:transform;width:1px;height:1px;transition:opacity .14s,visibility .14s;position:fixed;top:0;left:0}.finger-cursor.is-visible{opacity:1;visibility:visible}.finger-hand{filter:drop-shadow(0 8px 12px #00000073)drop-shadow(0 0 10px #ffcf5b38);transform-origin:24px 10px;width:54px;height:62px;transition:transform .1s cubic-bezier(.2,.8,.2,1);position:absolute;top:-8px;left:-25px;overflow:visible}.finger-hand>path:not(.finger-rays){fill:#fff2cf;stroke:#6c4817;stroke-width:2.5px;stroke-linejoin:round}.finger-rays{fill:none;stroke:var(--gold);stroke-width:3px;stroke-linecap:round}.finger-cursor.is-pressed .finger-hand{transform:translateY(5px)scale(.88)rotate(-4deg)}.finger-ring{border:2px solid var(--gold);opacity:.55;border-radius:50%;width:34px;height:34px;position:absolute;top:2px;left:0;transform:translate(-50%,-50%)scale(.45);box-shadow:0 0 18px #ffcf5b8c}.finger-label{color:#fff5d9;letter-spacing:.03em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#050c16db;border:1px solid #ffcf5b57;border-radius:9px;width:max-content;padding:7px 10px;font-size:11px;font-weight:750;position:absolute;top:48px;left:26px;box-shadow:0 8px 24px #00000057}.mobile-controls{z-index:5;inset:auto 0 max(18px, env(safe-area-inset-bottom)) 0;pointer-events:none;position:fixed}.joystick,.play-button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;bottom:0}.joystick{background:radial-gradient(circle,#62e6c61f,#07101ca6);border:1px solid #ffffff2b;border-radius:50%;width:118px;height:118px;display:none;left:20px;box-shadow:inset 0 0 28px #62e6c617}.joystick>i{border:1px solid #62e6c642;border-radius:50%;position:absolute;inset:32%}.joystick>b{will-change:transform;background:linear-gradient(145deg,#7af0d2,#319e91);border-radius:50%;width:42px;height:42px;margin:-21px;position:absolute;top:50%;left:50%;box-shadow:0 8px 20px #00000059}.play-button{text-align:left;cursor:pointer;background:linear-gradient(145deg,#583b0cd1,#18171de0);border:1px solid #ffcf5b7a;border-radius:17px;grid-template-rows:auto auto;grid-template-columns:36px auto;column-gap:9px;min-width:174px;padding:12px 17px;display:grid;right:22px;box-shadow:0 14px 36px #00000052,inset 0 0 24px #ffcf5b0f}.play-button:disabled{opacity:.4;filter:grayscale(.6);cursor:default}.play-button:active:not(:disabled){transform:scale(.97)}.play-icon{color:var(--gold);text-align:center;grid-row:1/3;align-self:center;font:700 30px/1 Inter,ui-sans-serif,system-ui,sans-serif}.play-button strong{font-size:13px}.play-button small{color:var(--muted);font-size:10px}.audio-gate{z-index:20;background:radial-gradient(circle at 50% 36%,#16555ed1,#0000 34%),radial-gradient(circle at 18% 70%,#663d7642,#0000 34%),linear-gradient(150deg,#071624,#050b15 64%);place-items:center;padding:24px;transition:opacity .55s,visibility .55s;display:grid;position:fixed;inset:0;overflow:hidden}.audio-gate.is-dismissed{opacity:0;visibility:hidden;pointer-events:none}.gate-content{z-index:3;text-align:center;width:min(720px,100%);position:relative}.gate-content h1{letter-spacing:-.04em;white-space:nowrap;text-shadow:0 16px 50px #0000009e;margin:12px 0 15px;font:750 clamp(34px,5.2vw,60px)/1.05 Inter,ui-sans-serif,system-ui,sans-serif}.gate-content p{color:#aec1cf;max-width:520px;margin:0 auto;font-size:clamp(14px,2vw,17px);line-height:1.85}.gate-hall-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(540px,100%);margin:28px auto 0;display:grid}.gate-hall-buttons button{color:#eafff9;cursor:pointer;background:#62e6c61f;border:1px solid #a7f7e4b8;border-radius:15px;gap:4px;padding:14px 18px;transition:transform .18s,background .18s,border-color .18s;display:grid;box-shadow:0 0 34px #62e6c621}.gate-hall-buttons button:last-child{background:#7aa7ff1f;border-color:#7aa7ffb8;box-shadow:0 0 34px #7aa7ff21}.gate-hall-buttons button:hover{background:#62e6c638;transform:translateY(-2px)}.gate-hall-buttons button:last-child:hover{background:#7aa7ff38}.gate-hall-buttons button:disabled{opacity:.65;transform:none}.gate-hall-buttons strong{font-size:14px}.gate-hall-buttons small{color:#8faebb;font-size:10px}.gate-content>small{color:#7f9aaa;margin-top:12px;display:block}.control-hints{color:#668291;justify-content:center;gap:20px;margin-top:28px;font-size:11px;display:flex}.gate-orbit{aspect-ratio:1;border:1px solid #62e6c61c;border-radius:50%;width:min(72vw,720px);animation:18s linear infinite orbit;position:absolute}.gate-orbit:before,.gate-orbit:after{content:"";border:1px solid #ffcf5b17;border-radius:50%;position:absolute;inset:14%}.gate-orbit:after{inset:30%}.gate-orbit i{background:var(--mint);width:12px;height:12px;box-shadow:0 0 24px var(--mint);border-radius:50%;margin:-6px;position:absolute;top:50%;left:50%}.gate-orbit i:first-child{transform:translate(36vw)}.gate-orbit i:nth-child(2){background:var(--gold);transform:rotate(120deg)translate(36vw)}.gate-orbit i:nth-child(3){background:var(--blue);transform:rotate(240deg)translate(36vw)}.gate-instruments{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.gate-instrument{object-fit:contain;filter:drop-shadow(0 28px 36px #00000094);opacity:.9;animation:5.4s ease-in-out infinite alternate instrument-float;position:absolute}.gate-horn{width:min(27vw,390px);top:3%;left:clamp(-90px,-4vw,-26px);transform:rotate(-9deg)}.gate-piano{opacity:.4;width:min(50vw,720px);animation-delay:-1.2s;bottom:-23%;left:50%;transform:translate(-50%)}.gate-sax{width:min(25vw,370px);animation-delay:-2.1s;top:5%;right:clamp(-105px,-4vw,-30px);transform:rotate(10deg)}.context-warning{z-index:30;color:#ffd4df;background:#2f2430;border-radius:12px;padding:10px 15px;font-size:12px;position:fixed;bottom:22px;left:50%;transform:translate(-50%)}@keyframes blink{50%{opacity:.35}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes instrument-float{to{filter:drop-shadow(0 40px 46px #0000009e)brightness(1.06);margin-top:-12px}}@media (pointer:coarse),(max-width:820px){.topbar{grid-template-columns:1fr auto;min-height:58px;padding:9px 12px}.brand-block strong{font-size:15px}.brand-block .eyebrow{display:none}.song-block{border-inline:0;border-left:1px solid var(--line);padding:0 0 0 12px}.song-line{justify-items:end;gap:2px;display:grid}.song-line strong{white-space:nowrap;font-size:11px;display:block}.song-line span{white-space:nowrap}.sound-block{display:none}.status-card{top:max(88px, calc(env(safe-area-inset-top) + 74px));min-width:130px;padding:10px 12px;left:12px}.status-card>small{display:none}.hall-card{top:max(88px, calc(env(safe-area-inset-top) + 74px));width:220px;padding:11px;right:12px}.hall-heading strong{font-size:13px}.hall-card p{display:none}.hall-buttons{margin-top:9px}.hall-buttons button{padding:8px 6px}.instrument-card{display:none}.joystick{display:block}.play-button{min-width:154px;right:20px}.control-hints{flex-direction:column;gap:5px}.finger-cursor{display:none}.gate-horn{opacity:.46;width:48vw;top:10%;left:-16%}.gate-sax{opacity:.46;width:48vw;top:20%;right:-25%}.gate-piano{opacity:.24;width:96vw;bottom:-8%}}@media (max-width:520px){.topbar{width:calc(100% - 20px)}.song-line span{font-size:10px}.status-card{min-width:118px}.status-card strong{font-size:13px}.hall-card{width:188px}.hall-heading .eyebrow{display:none}.hall-buttons span{font-size:11px}.hall-buttons b{display:none}.gate-hall-buttons{grid-template-columns:1fr;gap:8px;margin-top:22px}.gate-content h1{font-size:clamp(30px,9vw,36px)}.joystick{width:104px;height:104px;left:14px}.play-button{min-width:136px;padding:10px 12px;right:14px}.play-button small{display:none}.play-button strong{align-self:center}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}