:root{--scape-bg-0: #12100f;--scape-bg-1: #1c1717;--scape-line: #000000;--scape-text: #f5efe6;--scape-muted: #a8928b;--scape-accent: #e23d3d;--scape-accent-2: #f2e4c9;--scape-warn: #ffb020;--scape-gold: #ffb020;--bg: var(--scape-bg-0);--bg2: var(--scape-bg-1);--bg-elevated: #221b19;--text: var(--scape-text);--muted: var(--scape-muted);--accent: var(--scape-accent);--accent2: var(--scape-warn);--lime: var(--scape-accent-2);--lane0: #e23d3d;--lane1: #f2e4c9;--lane2: #ffb020;--lane3: #5b8def;--ink: #000000;--stroke-w: 2px;--radius-lg: 14px;--radius-md: 10px;--radius-sm: 6px;--gradient-cta: linear-gradient(135deg, #e23d3d 0%, #ffb020 100%);--glass: rgba(28, 23, 23, .86);--border: #000000;--shadow-card: 0 8px 0 rgba(0, 0, 0, .55);--shadow-glow: none;--glow-accent: none;--glow-mint: none;--halftone: radial-gradient(circle at center, rgba(226, 61, 61, .16) 1px, transparent 1.4px)}*{box-sizing:border-box}a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}body{margin:0;font-family:IBM Plex Sans,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.site-main a:not([class]){color:var(--muted);text-decoration:none;font-weight:500;transition:color .15s ease}.site-main a:not([class]):hover{color:var(--text)}h1,h2,.logo{font-family:Anton,Sora,IBM Plex Sans,system-ui,sans-serif;font-weight:400;letter-spacing:.01em}.app-shell{max-width:1140px;margin:0 auto;padding:0 20px 48px;position:relative}.site-header{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}.bg-fx{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;overflow:hidden;background-color:var(--bg);background-image:var(--halftone);background-size:8px 8px}.bg-fx:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;background-image:repeating-conic-gradient(from 0deg at 50% -12%,rgba(226,61,61,.13) 0deg 1.2deg,transparent 1.2deg 5deg)}.bg-fx:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(620px 420px at 82% 8%,rgba(226,61,61,.1),transparent 68%)}.logo{font-weight:800;font-size:1.15rem;color:var(--text);text-decoration:none;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:8px}.logo-mark{width:30px;height:30px;border-radius:7px;background:var(--bg);border:var(--stroke-w) solid var(--accent);display:grid;place-items:center;color:var(--accent)}.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto}.site-header nav a{color:var(--muted);padding:8px 12px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:500;transition:color .15s ease,background .15s ease}.site-header nav a:hover,.site-header nav a.active{color:var(--text);background:#ffffff0f}.header-avatar{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;margin-left:8px;padding:0;border:none;background:var(--accent);color:var(--scape-accent-2);font-family:Anton,Sora,sans-serif;font-size:13px;font-weight:400;letter-spacing:.04em;line-height:1;text-decoration:none;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);filter:drop-shadow(3px 3px 0 var(--ink))}a.header-avatar:hover{background:var(--scape-accent-2);color:#12100f}.mobile-tabbar{display:none}.site-footer{margin-top:48px;font-size:12px;color:var(--muted);text-align:center}.home{padding-top:8px}.hero-split{display:grid;grid-template-columns:1fr minmax(260px,380px);gap:clamp(24px,4vw,48px);align-items:center;margin:12px 0 48px;min-height:min(72vh,560px)}.hero-copy h1{font-size:clamp(2.4rem,5.5vw,3.75rem);line-height:1.02;margin:0 0 16px;font-weight:800;letter-spacing:-.03em}.eyebrow{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}.hero-copy .tagline{font-size:clamp(1rem,2vw,1.125rem);color:var(--muted);max-width:28rem;line-height:1.55;margin:0 0 20px}.key-chips{display:flex;gap:8px;margin-bottom:28px;filter:drop-shadow(3px 3px 0 var(--ink))}.key-chip{min-width:48px;padding:9px 14px;text-align:center;font-size:16px;line-height:1.2;font-weight:700;color:var(--bg);background:var(--accent);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}.hero-visual{position:relative;height:min(420px,52vw);min-height:280px}.hero-cover-card{position:absolute;width:72%;aspect-ratio:1;border-radius:var(--radius-lg);background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px #0000008c,0 0 0 1px #e23d3d1f}.hero-cover-card:nth-child(1){top:8%;right:0;transform:rotate(6deg)}.hero-cover-card:nth-child(2){top:18%;right:22%;transform:rotate(-4deg) scale(.92);opacity:.92}.hero-cover-card:nth-child(3){top:32%;right:8%;transform:rotate(2deg) scale(.84);opacity:.85}.trending-section{margin-bottom:32px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}.section-head h2{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:-.02em}.section-link{color:var(--accent);text-decoration:none;font-size:14px;font-weight:600}.back-link{display:inline-flex;align-items:center;gap:6px;margin:0 0 20px;padding:8px 0;color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.01em;transition:color .15s ease}.back-link:hover{color:var(--text)}.back-link:before{content:"←";font-size:15px;line-height:1;opacity:.85}.trending-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.trend-card{flex:0 0 200px;scroll-snap-align:start;text-decoration:none;color:inherit;background:var(--bg-elevated);border:var(--stroke-w) solid var(--ink);border-radius:var(--radius-md);overflow:hidden;box-shadow:4px 4px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease}.trend-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.trend-cover{aspect-ratio:1;background-size:cover;background-position:center;position:relative}.trend-bpm{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:#0b0b0fbf;border:1px solid var(--border)}.trend-meta{padding:12px 14px 14px}.trend-meta strong{display:block;font-size:15px;margin-bottom:2px}.trend-meta span{font-size:13px;color:var(--muted)}.tier-chips{display:flex;gap:6px;margin-top:10px}.chip{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border-radius:6px;background:#ffffff0f;color:var(--muted)}.tagline{color:var(--muted)}.cta-row{display:flex;gap:12px;flex-wrap:wrap}.stream-cta{display:flex;align-items:center;gap:16px;margin:20px auto;max-width:520px;padding:16px 18px;border-radius:var(--radius-lg);border:1px solid rgba(226,61,61,.35);background:linear-gradient(135deg,#e23d3d1f,#f2e4c914);text-align:left}.stream-cta-icon{font-size:28px;line-height:1;color:var(--accent);flex-shrink:0}.stream-cta-body strong{display:block;font-size:15px;margin-bottom:4px}.stream-cta-body p{margin:0;font-size:13px;color:var(--muted);line-height:1.45}.stream-cta-btn{flex-shrink:0;white-space:nowrap}.stream-cta-soon{font-size:12px;color:var(--muted)}.stream-cta-inline{margin:12px 0;font-size:14px;color:var(--muted);line-height:1.5}.stream-cta-link{color:var(--accent);margin-left:8px;font-weight:600}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:var(--radius-sm);border:var(--stroke-w) solid var(--ink);background:var(--bg-elevated);color:var(--text);text-decoration:none;cursor:pointer;font:inherit;font-weight:600;font-size:15px;box-shadow:3px 3px 0 var(--ink);transition:transform .08s ease,box-shadow .08s ease,border-color .15s ease}.btn:hover{box-shadow:5px 5px 0 var(--ink)}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.btn.primary{background:var(--accent);border:var(--stroke-w) solid var(--ink);color:var(--lime);font-weight:700;letter-spacing:.02em;box-shadow:4px 4px 0 var(--ink)}.btn.primary:hover{box-shadow:6px 6px 0 var(--ink)}.btn.primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.btn.ghost{background:transparent;border-color:#ffffff24}.btn.linkish{background:transparent;border:none;color:var(--muted);margin-top:12px}.track-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.track-card{display:flex;gap:14px;padding:14px;background:var(--bg-elevated);border:var(--stroke-w) solid var(--ink);border-radius:var(--radius-md);text-decoration:none;color:inherit;box-shadow:4px 4px 0 var(--ink);transition:transform .1s ease,box-shadow .1s ease}.track-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.track-card img{width:72px;height:72px;border-radius:var(--radius-sm);object-fit:cover}.track-card strong{display:block;color:var(--text);font-weight:600}.track-card span{font-size:13px;color:var(--muted)}.settings input,.settings select{background:var(--bg2);border:1px solid rgba(255,255,255,.12);color:var(--text);padding:8px 10px;border-radius:8px}.track-detail{display:grid;gap:24px;grid-template-columns:200px 1fr}.cover-lg{width:200px;border-radius:12px}.artist{color:var(--muted)}.rights{font-size:13px;color:var(--muted)}.track-preview{display:flex;flex-direction:column;gap:6px;margin:12px 0 4px}.track-preview-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.track-preview audio{width:100%;max-width:360px;height:36px}.district-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--district-color, var(--accent));padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--district-color, var(--accent)) 45%,transparent);background:color-mix(in srgb,var(--district-color, var(--accent)) 12%,transparent)}.artist-bio{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--muted);max-width:42ch}.showcase-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}.chip-link{text-decoration:none;color:var(--accent);border:1px solid rgba(226,61,61,.35);padding:4px 10px;border-radius:999px;font-size:12px}.chip-link:hover{background:#e23d3d1a}.library-empty{grid-column:1 / -1;padding:32px 16px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius-md)}.track-card .district-badge{margin-top:6px}.track-card-cover-wrap{position:relative;border-radius:var(--radius-sm);overflow:hidden;border-bottom:2px solid var(--district-color, var(--accent))}.pickers{display:flex;gap:16px;margin:16px 0}.pickers label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.play-page{max-width:560px;margin:0 auto}body.play-immersive .site-header,body.play-immersive .site-footer{display:none}body.play-immersive .app-shell{max-width:none;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:env(safe-area-inset-bottom)}body.play-immersive .play-page{max-width:none;margin:0}.play-meta{display:flex;gap:12px;align-items:center;margin-bottom:10px;font-size:14px;flex-wrap:wrap;padding:10px 14px;border-radius:var(--radius-md);background:#1c1717bf;border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.play-meta-tier{color:var(--muted)}.btn.compact{padding:6px 10px;font-size:12px;margin-left:auto}.play-wrap{touch-action:none;-webkit-user-select:none;user-select:none}.play-hud{display:flex;gap:16px;align-items:center;margin-bottom:8px;font-size:14px}.play-hud .label{color:var(--muted);margin-right:4px;font-size:11px}.hp-bar{flex:1;height:8px;background:#1e2a3a;border-radius:4px;overflow:hidden;max-width:120px}.hp-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}.play-wrap{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;height:calc(100dvh - 88px);min-height:420px;max-width:min(96vw,600px);margin:0 auto;border:3px solid var(--ink);border-radius:var(--radius-md);overflow:hidden;background:var(--bg);box-shadow:8px 8px #0000008c}.play-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background-size:cover;background-position:center;filter:blur(30px) brightness(.32) saturate(1.25);transform:scale(1.12)}.play-canvas{display:block;width:100%;height:100%}.pause-btn{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:12;width:38px;height:38px;padding:0;border-radius:var(--radius-sm);border:2px solid var(--ink);background:var(--scape-accent-2);color:#12100f;font-size:16px;font-weight:800;line-height:1;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.pause-btn:hover{background:var(--accent);color:var(--scape-accent-2);box-shadow:4px 4px 0 var(--ink)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#12100f;background-image:var(--halftone);background-size:10px 10px;z-index:10;text-align:center;padding:20px 16px}.overlay:before{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border:2px solid var(--ink);pointer-events:none;box-shadow:inset 0 0 0 2px #f2e4c91f}.overlay>*{position:relative;z-index:1}.overlay .unlock-btn,.overlay .btn.primary.unlock-btn{font-family:Anton,Sora,sans-serif;font-size:clamp(1.35rem,4vw,1.75rem);font-weight:400;letter-spacing:.06em;text-transform:uppercase;padding:14px 28px;background:var(--accent);color:var(--scape-accent-2);border:3px solid var(--ink);border-radius:var(--radius-sm);box-shadow:5px 5px 0 var(--ink);cursor:pointer}.overlay .unlock-btn:hover,.overlay .btn.primary.unlock-btn:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--ink)}.overlay .unlock-btn:active,.overlay .btn.primary.unlock-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.overlay-kicker{margin:0;font-family:Sora,IBM Plex Sans,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.overlay-title{margin:0;font-family:Anton,Sora,sans-serif;font-size:clamp(1.5rem,4.5vw,2rem);letter-spacing:.02em;line-height:1;color:var(--scape-accent-2);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}.overlay.load-error p{margin:0 16px 12px;text-align:center;color:var(--scape-warn)}.unlock-hint{margin:0;max-width:240px;color:var(--scape-accent-2);font-family:Sora,IBM Plex Sans,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.04em;line-height:1.45;text-transform:uppercase;opacity:.88}.unlock-keys{display:flex;gap:6px;margin:2px 0 4px;filter:drop-shadow(2px 2px 0 var(--ink))}.unlock-keys .key-chip{min-width:36px;padding:6px 10px;font-size:13px}.error{color:var(--accent2);margin:24px 0}.results{text-align:center;padding:24px 0 40px}.results-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:14px}.results-rights{margin-top:28px;font-size:12px}.grade-big{font-family:Anton,Sora,IBM Plex Sans,system-ui,sans-serif;font-weight:400;font-size:7rem;color:var(--accent);line-height:1;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;animation:gradeReveal .6s cubic-bezier(.2,1.4,.4,1) both}.grade-S{color:var(--scape-gold)}.grade-A{color:var(--scape-accent-2)}.grade-B{color:var(--accent)}.grade-C{color:var(--muted)}.grade-D{color:var(--scape-warn)}@keyframes gradeReveal{0%{transform:scale(.3) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.badge.record{border-color:var(--scape-gold);color:var(--scape-gold);box-shadow:3px 3px 0 var(--ink);animation:recordPop 1.4s ease-in-out infinite alternate}@keyframes recordPop{0%{transform:scale(1);box-shadow:3px 3px 0 var(--ink)}to{transform:scale(1.05);box-shadow:5px 5px 0 var(--ink)}}.judge-bars{max-width:420px;margin:20px auto;display:flex;flex-direction:column;gap:8px}.judge-row{display:flex;align-items:center;gap:10px;font-size:13px;animation:barIn .5s ease both}@keyframes barIn{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}.judge-label{width:56px;text-align:right;color:var(--muted)}.judge-track{flex:1;height:12px;background:var(--bg);border:var(--stroke-w) solid var(--ink);border-radius:var(--radius-sm);overflow:hidden}.judge-fill{display:block;height:100%;animation:barGrow .7s cubic-bezier(.2,.9,.3,1) both}@keyframes barGrow{0%{width:0}}.judge-n{width:34px;text-align:left;color:var(--text)}.badge{display:inline-block;margin:4px;padding:4px 10px;border:1px solid rgba(226,61,61,.35);border-radius:999px;font-size:12px;font-weight:600;background:#e23d3d14}.badge.ap{border-color:#fde047;color:#fde047}.badge.beginner{border-color:#86efac;color:#86efac;background:#86efac14}.encourage{color:#c8e6c9;max-width:36rem;line-height:1.5}.practice-btn{border-color:var(--lane2)}.advanced-toggle{margin:8px 0 12px;font-size:13px}.track-card .badge.beginner,.track-detail .badge.beginner{margin-left:0;margin-bottom:6px}.calib-lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:400px;margin:24px 0}.calib-lane{padding:24px;text-align:center;background:var(--bg2);border-radius:8px;border:1px solid #2a3a4f}.calib-lane.flash{border-color:var(--accent);box-shadow:var(--glow-accent)}table{width:100%;border-collapse:collapse;font-size:14px}th,td{border-bottom:1px solid #1e2a3a;padding:8px;text-align:left}@media(max-width:860px){.hero-split{grid-template-columns:1fr;min-height:auto}.hero-visual{order:-1;height:240px;min-height:200px;margin-bottom:8px}.hero-cover-card{width:56%}}@media(max-width:640px){.app-shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:calc(72px + env(safe-area-inset-bottom))}.site-nav{display:none}.header-avatar{margin-left:auto}.site-footer{display:none}.mobile-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:6px 8px calc(8px + env(safe-area-inset-bottom));background:#0b0b0feb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border);justify-content:space-around;gap:4px}.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;font-size:10px;font-weight:600;color:var(--muted);text-decoration:none;border-radius:12px;transition:color .15s ease,background .15s ease}.tab-item.active{color:var(--text);background:#ffffff0f}.tab-icon{font-size:18px;line-height:1}.tab-play .tab-icon-play{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--gradient-cta);color:#fff;font-size:14px;margin-top:-18px;box-shadow:0 8px 20px #e23d3d59}body.play-immersive .mobile-tabbar{display:none}.site-header{flex-wrap:nowrap;gap:8px}.track-detail{grid-template-columns:1fr}.cover-lg{width:min(200px,100%);justify-self:center}.track-grid{grid-template-columns:1fr}.cta-row .btn{flex:1 1 auto;text-align:center;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.play-wrap{height:calc(100dvh - 84px);max-width:100vw;border-radius:10px}.play-hud{font-size:12px;gap:10px}.grade-big{font-size:3.5rem}.pickers{flex-direction:column}.play-wrap{min-height:min(100dvh,720px);touch-action:none}.play-canvas{min-height:58dvh}.overlay-tap{cursor:pointer}.hero-gameplay-preview{min-height:220px}}.hero-gameplay-preview{position:relative;width:100%;max-width:320px;aspect-ratio:9 / 14;border-radius:var(--radius-lg);border:3px solid var(--ink);background:#12100f;overflow:hidden;box-shadow:8px 8px #00000073}.hero-gameplay-canvas{display:block;width:100%;height:100%}.hero-cover-card-float{position:absolute;right:-12px;bottom:-20px;width:88px;height:88px;opacity:.55}.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}.hero-visual-play{width:100%;max-width:340px}.home-hero-play{position:relative;width:100%}.home-hero-play-meta{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.home-hero-play-meta strong{font-family:Anton,Sora,sans-serif;font-size:1.35rem;letter-spacing:.02em;line-height:1.1}.home-hero-play-meta span{color:var(--muted);font-size:.85rem}.home-hero-play-loading,.home-hero-play-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:420px;padding:24px;border:3px solid var(--ink);border-radius:var(--radius-md);background:var(--bg);box-shadow:8px 8px #00000073;text-align:center}.home-hero-play-stage{position:relative;width:100%}.home-hero-demo{position:relative;overflow:hidden}.home-hero-demo .hero-gameplay-preview{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;max-width:none;height:100%;aspect-ratio:auto;border:none;border-radius:0;box-shadow:none}.home-hero-demo-mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px 16px;text-align:center;background:#12100f8c;background-image:linear-gradient(#12100f73,#12100f9e),var(--halftone);background-size:auto,10px 10px}.home-hero-demo-mask:before{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border:2px solid var(--ink);pointer-events:none;box-shadow:inset 0 0 0 2px #f2e4c91f}.home-hero-demo-mask>*{position:relative;z-index:1}.home-play-sound-btn{display:inline-flex!important;align-items:center;gap:10px}.play-wrap-hero{height:min(62dvh,560px);min-height:380px;max-width:100%;margin:0}.play-wrap-hero .unlock-hint{max-width:220px}@media(max-width:720px){.hero-visual-play{max-width:100%}.play-wrap-hero{height:min(58dvh,520px);min-height:340px}}.daily-challenge-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:28px 0;padding:20px 22px;border-radius:var(--radius-lg);border:1px solid rgba(226,61,61,.25);background:linear-gradient(135deg,#e23d3d1a,#f2e4c90f)}.daily-challenge-banner h2{margin:6px 0 0;font-size:1.25rem}.trend-card-wrap{flex:0 0 200px;scroll-snap-align:start}.trend-preview-audio{width:100%;height:32px;margin-top:8px}.board-tabs{display:flex;gap:10px;margin:16px 0}.results-hero-card{padding:8px 0 20px}.overlay-tap{cursor:pointer}.miss-replay{text-align:left;max-width:420px;margin:20px auto;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg2)}.miss-replay summary{cursor:pointer;font-weight:600}.miss-replay-empty{color:var(--muted);font-size:14px}.miss-lane-map{margin:14px 0 10px;padding:10px 0 4px;border-top:1px solid var(--border)}.miss-lane-map-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:0 0 6px 28px}.miss-lane-row{display:flex;align-items:center;gap:8px;margin:6px 0}.miss-lane-label{width:20px;font-size:10px;font-weight:600;color:var(--muted);flex-shrink:0}.miss-lane-track{position:relative;flex:1;height:10px;border-radius:999px;background:#ffffff0f}.miss-dot{position:absolute;top:50%;width:8px;height:8px;margin-left:-4px;margin-top:-4px;background:var(--scape-warn);border:2px solid var(--ink)}.miss-section-stats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.miss-section-chip{font-size:12px;padding:4px 10px;border-radius:999px;background:#e23d3d1f;color:var(--scape-warn)}.miss-timeline{margin:0;padding-left:20px;font-size:13px;color:var(--muted);max-height:160px;overflow-y:auto}.miss-timeline li{margin:4px 0;display:flex;gap:10px;flex-wrap:wrap}.miss-time{color:var(--text);font-variant-numeric:tabular-nums}.miss-lane{color:var(--accent)}.miss-section{color:var(--muted)}.page-header{margin-bottom:24px}.page-header h1{margin:0 0 8px;font-size:clamp(1.75rem,4vw,2.25rem);font-weight:800;letter-spacing:-.03em}.page-header .tagline{margin:0;max-width:52ch;line-height:1.55}.page-count{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);padding:4px 10px;border-radius:999px;background:#e23d3d1a;border:1px solid rgba(226,61,61,.2)}.panel{background:var(--bg-elevated);border:var(--stroke-w) solid var(--ink);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow-card)}.panel h2{margin:0 0 16px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;font-size:13px;color:var(--muted)}.field:last-child{margin-bottom:0}.field-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.field input[type=text],.field input[type=number],.field select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:var(--radius-sm);font:inherit;transition:border-color .15s ease,box-shadow .15s ease}.field input:focus-visible,.field select:focus-visible,.filters-bar input:focus-visible,.filters-bar select:focus-visible{outline:none;border-color:#e23d3d80;box-shadow:0 0 0 3px #e23d3d26}.field input[type=range]{width:100%;accent-color:var(--accent)}.toggle-field{flex-direction:row;align-items:center;justify-content:space-between}.toggle-field input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.settings-grid{display:grid;gap:16px;max-width:520px}.keys-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.keys-grid label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted);text-align:center}.keys-grid input{text-align:center;font-weight:700;font-size:16px;padding:12px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text)}.keys-grid .keycap{font-family:inherit;text-align:center;font-weight:700;font-size:16px;padding:12px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);cursor:pointer}.keys-grid .keycap:hover{border-color:var(--accent)}.keys-grid .keycap.is-listening{font-size:12px;font-weight:500;border-color:var(--accent);color:var(--accent)}.preset-row{display:flex;flex-wrap:wrap;gap:8px}.preset-row .btn.compact{margin-left:0}.preset-row .btn.compact.is-active{border-color:var(--accent);color:var(--accent)}.field-hint{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 12px}.field-hint+.keys-grid{margin-top:4px}.settings .error{margin:10px 0 0;font-size:12px}.loading-state{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 20px;color:var(--muted)}.loading-spinner{width:36px;height:36px;border-radius:50%;border:3px solid rgba(226,61,61,.15);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.track-hero{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:clamp(20px,4vw,32px);align-items:start}.track-hero-cover{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card),var(--shadow-glow);border:1px solid var(--border)}.track-hero-cover img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.track-hero-body h1{margin:10px 0 4px;font-size:clamp(1.6rem,4vw,2.1rem);letter-spacing:-.02em}.track-hero-body .artist{font-size:1.05rem;margin:0}.track-pickers{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.picker-pill{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.picker-pill select{min-width:120px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-weight:600;font-size:14px}.results-hero-card{max-width:480px;margin:0 auto 8px;padding:28px 24px 24px;border-radius:var(--radius-lg);border:1px solid var(--border);background:linear-gradient(180deg,#1c1717e6,#12100ff2);box-shadow:var(--shadow-card)}.results-hero-card h1{margin:12px 0 6px;font-size:1.35rem;font-weight:700}.results-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:420px;margin:0 auto 20px}.stat-pill{padding:12px 10px;border-radius:var(--radius-md);background:var(--bg-elevated);border:var(--stroke-w) solid var(--ink);box-shadow:3px 3px 0 var(--ink)}.stat-pill span{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.stat-pill strong{font-size:1.1rem;font-variant-numeric:tabular-nums}.grade-border-S{border-color:var(--scape-gold);box-shadow:4px 4px 0 var(--ink),inset 0 0 0 2px #ffb02059}.grade-border-A{border-color:var(--scape-accent-2);box-shadow:4px 4px 0 var(--ink),inset 0 0 0 2px #f2e4c938}.grade-border-B{border-color:var(--lane3);box-shadow:4px 4px 0 var(--ink)}.board-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}.board-row{display:grid;grid-template-columns:40px 1fr auto auto;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--radius-md);background:var(--glass);border:1px solid var(--border);transition:border-color .15s ease,transform .12s ease}.board-row:hover{border-color:#e23d3d40;transform:translate(2px)}.board-row.rank-1{border-color:#ffb02066;background:linear-gradient(90deg,rgba(255,176,32,.08),transparent)}.board-row.rank-2{border-color:#f5efe633}.board-row.rank-3{border-color:#c4a48440}.board-rank{font-family:Sora,sans-serif;font-weight:800;font-size:1.1rem;color:var(--muted);text-align:center}.board-row.rank-1 .board-rank{color:var(--scape-gold)}.board-track{min-width:0}.board-track strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-track span{font-size:12px;color:var(--muted)}.board-score{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}.board-acc{font-size:12px;color:var(--muted);text-align:right}.board-empty{padding:40px 20px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius-md)}.calibrate-panel{max-width:440px}.calib-lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0}.calib-lane{padding:28px 8px;text-align:center;font-weight:800;font-size:1.1rem;font-family:Sora,sans-serif;background:#1c1717cc;border-radius:var(--radius-md);border:1px solid var(--border);border-bottom:3px solid var(--lane-color, var(--accent));transition:transform .1s ease,box-shadow .15s ease,border-color .15s ease}.calib-lane.flash{transform:scale(1.04);border-color:var(--lane-color, var(--accent));box-shadow:5px 5px 0 var(--ink),inset 0 0 0 3px var(--lane-color, var(--accent))}.calib-progress{text-align:center;font-size:14px;color:var(--muted);margin-top:8px}.calib-done{padding:20px;border-radius:var(--radius-md);border:1px solid rgba(242,228,201,.3);background:#f2e4c914;margin-bottom:16px}.filter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}.filter-chips-secondary{margin-bottom:16px}.filter-chips-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:4px}.filter-chip{font:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:#ffffff0a;color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s,color .15s}.filter-chip:hover{color:var(--text);border-color:#f2e4c940}.filter-chip.active{color:var(--text);border-color:#e23d3d8c;background:#e23d3d1f}.filter-chip.vibe-night-drive.active{border-color:#5b8def8c;background:#5b8def1f}.filter-chip.vibe-groove.active{border-color:#ffb0208c;background:#ffb0201a}.filter-chip.vibe-battle.active{border-color:#e23d3d8c;background:#e23d3d1f}.filter-chip.vibe-chill.active{border-color:#b0765a8c;background:#b0765a1f}.vibe-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:6px;border:1px solid var(--border);color:var(--muted)}.vibe-badge.vibe-night-drive{border-color:#5b8def59;color:#9bb8f5}.vibe-badge.vibe-groove{border-color:#ffb02059;color:#ffc857}.vibe-badge.vibe-battle{border-color:#e23d3d66;color:#f08080}.vibe-badge.vibe-chill{border-color:#b0765a66;color:#c9a088}.track-card-badges,.track-hero-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}.track-hero-badges{margin-top:0;margin-bottom:8px}.filters-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;padding:14px;border-radius:var(--radius-md);background:#1c171799;border:1px solid var(--border)}.filters-bar input,.filters-bar select{flex:1 1 140px;min-width:0;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit}.filter-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);cursor:pointer;white-space:nowrap}.filter-toggle:has(input:checked){border-color:#e23d3d66;color:var(--text);background:#e23d3d14}@media(max-width:640px){.track-hero{grid-template-columns:1fr}.filters-bar input,.filters-bar select{flex:1 1 100%}.track-hero-cover{max-width:220px;margin:0 auto}.results-stats{grid-template-columns:1fr}.board-row{grid-template-columns:32px 1fr;grid-template-rows:auto auto}.board-score,.board-acc{grid-column:2;text-align:left}.board-score{font-size:14px}}.home-intro-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:grid;place-items:center;padding:24px;background:#040404b8}.home-intro{width:min(440px,100%);background:var(--bg-elevated);border:var(--stroke-w) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:24px;display:grid;gap:14px}.home-intro .eyebrow{color:var(--accent)}.home-intro-track{display:flex;align-items:center;gap:14px}.home-intro-cover{width:64px;height:64px;border-radius:var(--radius-sm);border:var(--stroke-w) solid var(--ink);background-size:cover;background-position:center;flex:none}.home-intro-track-meta{display:grid;gap:2px}.home-intro-track-meta strong{font-size:18px}.home-intro-track-meta span{color:var(--muted);font-size:13px}.home-intro .cta-row{display:flex;flex-wrap:wrap;gap:10px}.character-avatar{display:block;object-fit:cover;background:#12100f;border:2px solid var(--district-color, #e23d3d)}.character-avatar.rounded{border-radius:50%}.character-avatar.glow{box-shadow:0 0 0 1px #ffffff1f,0 8px 28px -8px var(--district-color, #e23d3d)}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:22px}.character-card{display:flex;flex-direction:column;background:linear-gradient(180deg,#ffffff0a,#ffffff03);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;border-top:3px solid var(--district-color, #e23d3d);transition:transform .15s ease,box-shadow .15s ease}.character-card:hover{transform:translateY(-3px);box-shadow:0 14px 38px -16px var(--district-color, #e23d3d)}.character-card-art{background:#12100f;aspect-ratio:640 / 935;overflow:hidden}.character-card-art .character-avatar{width:100%;height:100%;border:none;border-radius:0}.character-card-body{padding:14px 16px 18px}.character-code{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--district-color, #e23d3d);border:1px solid var(--district-color, #e23d3d);border-radius:999px;padding:2px 10px;margin-bottom:8px}.character-card-body h2{font-size:19px;margin:0 0 6px}.character-role{margin:0 0 8px;font-size:14px;color:var(--text)}.character-motif{margin:0;font-size:13px;color:var(--muted);line-height:1.45}.motif-label{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);border:1px solid rgba(255,255,255,.16);border-radius:4px;padding:1px 6px;margin-right:6px}.characters-foot{margin-top:24px;font-size:13px;color:var(--muted);max-width:680px}.track-card-cover-wrap{position:relative}.track-card-avatar{position:absolute;right:8px;bottom:8px;width:52px!important;height:52px!important;border-radius:50%;border:2px solid var(--district-color, #e23d3d);box-shadow:0 4px 14px -4px #0009}.meet-characters{margin-top:34px}.character-strip{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}.character-strip-item{padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:#ffffff05;transition:transform .15s ease,border-color .15s ease}.character-strip-link{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit}.character-strip-item:hover{transform:translateY(-2px);border-color:var(--district-color, #e23d3d)}.character-strip-code{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--district-color, #e23d3d)}.play-wrap{position:relative}.play-wrap-hero{border:1px solid var(--district-color, transparent)}.play-char-watermark{position:absolute;right:18px;bottom:18px;width:clamp(108px,26%,220px);height:auto;opacity:.16;pointer-events:none;z-index:3;mix-blend-mode:screen;border-radius:12px;-webkit-user-select:none;user-select:none}@media(max-width:600px){.play-char-watermark{width:clamp(84px,30%,140px);right:10px;bottom:10px}}