@font-face{font-family:Area X;src:url(/fonts/AREA_X_2026.ttf) format("truetype");font-weight:400 900;font-display:swap}:root{--bg: #B5B7BC;--fg: #0F1219;--accent: #0F1219;--success: #0D7A4E;--gold: #B5860D;--r: #B91C1C;--b: #1D4ED8;--dim: rgba(15,18,25,.42);--hairline: rgba(15,18,25,.16);--text: #0F1219;--text-dim: rgba(15,18,25,.42);--text-mid: rgba(15,18,25,.6);--border: rgba(15,18,25,.16)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg);color:var(--fg);font-family:JetBrains Mono,Space Grotesk,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100dvh;background:var(--bg);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");background-size:150px 150px;pointer-events:none;z-index:9999;opacity:.45;mix-blend-mode:multiply}body:after{content:"";position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(15,18,25,.025) 2px,rgba(15,18,25,.025) 4px);pointer-events:none;z-index:9998}#app{min-height:100dvh;display:flex;flex-direction:column}.page{flex:1;display:flex;flex-direction:column;width:100%;max-width:720px;margin:0 auto;padding:0 24px;padding-bottom:max(60px,calc(env(safe-area-inset-bottom) + 40px))}.site-header{padding:24px 0 0;display:flex;align-items:center;justify-content:space-between}.header-logo{font-family:Area X,JetBrains Mono,monospace;font-size:13px;letter-spacing:.2em;color:var(--fg);text-transform:uppercase}.artist-credit{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);font-weight:500}.lang-toggle{font-size:10px;letter-spacing:.2em;color:var(--dim);background:none;border:1px solid var(--hairline);cursor:pointer;font-family:JetBrains Mono,monospace;text-transform:uppercase;padding:4px 10px;transition:color .12s,border-color .12s}.lang-toggle:hover{color:var(--fg);border-color:var(--fg)}.main-content{flex:1;display:flex;flex-direction:column;gap:28px;padding-top:40px}.hero{display:flex;flex-direction:column;gap:8px}.song-title{font-family:Area X,JetBrains Mono,monospace;font-size:clamp(72px,20vw,180px);font-weight:900;line-height:.88;letter-spacing:-.02em;color:var(--fg);user-select:none}.challenge-tagline{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--dim);font-weight:500}.frame-chrome{border:1px solid var(--hairline);position:relative;background:#0f12190a}.frame-chrome:before{content:attr(data-label);position:absolute;top:-9px;left:12px;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);background:var(--bg);padding:0 6px}.tier-table{width:100%;border-collapse:collapse;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.tier-table td{padding:10px 12px;border-bottom:1px solid var(--hairline);color:var(--dim)}.tier-table tr:last-child td{border-bottom:none}.tier-table .tier-score{font-family:JetBrains Mono,monospace;font-weight:700;color:var(--fg);white-space:nowrap;width:100px}.tier-table .tier-score.gold{color:var(--gold)}.tier-table .tier-reward{color:var(--dim)}.tier-reward .baya-name{color:var(--fg);font-weight:700}.tier-reward-full{color:var(--fg)!important;font-weight:700;letter-spacing:.15em}.tier-reward-gold{color:var(--gold)!important;font-weight:700;letter-spacing:.18em;font-size:12px}.tier-mystery{color:var(--gold);font-weight:900;letter-spacing:.12em;animation:mystery-pulse 1.8s ease-in-out infinite}@keyframes mystery-pulse{0%,to{opacity:.5}50%{opacity:1;text-shadow:0 0 8px rgba(181,134,13,.6)}}.rhythm-lane-wrap{position:relative;width:100%;height:clamp(180px,42vw,280px);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);overflow:hidden;background:#0f12190a}.rhythm-lane-canvas{display:block;width:100%;height:100%}.controls-wrap{display:flex;flex-direction:column;gap:14px}.btn-row{display:flex;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 32px;border:1px solid rgba(15,18,25,.55);background:transparent;color:var(--fg);font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .08s,color .08s,border-color .08s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;text-decoration:none;white-space:nowrap}.btn:hover:not(:disabled),.btn:active:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--fg)}.btn:disabled{opacity:.25;cursor:default}.btn-accent{background:var(--fg);color:var(--bg);border-color:var(--fg)}.btn-accent:hover:not(:disabled),.btn-accent:active:not(:disabled){background:#0f1219cc;color:var(--bg)}.btn-wide{width:100%}.btn-download{background:var(--fg);color:var(--bg);border-color:var(--fg);width:100%;font-size:12px;height:58px;letter-spacing:.25em}.btn-download:hover,.btn-download:active{background:#0f1219cc}.btn-share{border-color:var(--b);color:var(--b);width:100%;height:52px}.btn-share:hover,.btn-share:active{background:var(--b);color:#fff}.stop-row{display:flex;justify-content:flex-end}.btn-stop{border-color:#b91c1c8c;color:var(--r);height:40px;padding:0 20px;font-size:10px;letter-spacing:.22em}.btn-stop:hover,.btn-stop:active{background:var(--r);color:#fff;border-color:var(--r)}.status-text{font-size:10px;letter-spacing:.3em;color:var(--fg);min-height:14px;text-transform:uppercase;font-weight:600;font-family:JetBrains Mono,monospace}.status-text:empty{opacity:0}.countin-display{font-size:clamp(80px,22vw,140px);font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--fg);text-align:left;transition:transform .08s cubic-bezier(.34,1.56,.64,1);font-family:JetBrains Mono,monospace}.countin-display.pulse{transform:scale(1.06)}.score-display{display:flex;flex-direction:column;gap:8px}.score-number{font-family:JetBrains Mono,monospace;font-size:clamp(80px,22vw,140px);font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--fg)}.score-number.passed{color:var(--success)}.score-number.failed{color:var(--fg)}.score-label{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--dim);font-weight:600}.score-breakdown{font-size:10px;letter-spacing:.15em;color:var(--dim);font-weight:500;text-transform:uppercase}.denied-title{font-family:Area X,JetBrains Mono,monospace;font-size:clamp(48px,14vw,96px);font-weight:900;line-height:1;color:var(--r);letter-spacing:-.02em;text-transform:uppercase}.denied-code{font-size:10px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase;margin-top:10px}.denied-score{font-family:JetBrains Mono,monospace;font-size:clamp(48px,12vw,80px);font-weight:900;letter-spacing:-.05em;color:var(--r);line-height:1;margin-top:16px}.result-cover{width:100%;max-width:320px;aspect-ratio:1;object-fit:cover;display:block}.download-row{display:flex}.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}.confetti-particle{position:absolute;font-size:14px;animation:fall linear forwards;will-change:transform,opacity}@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.glitch{position:relative}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;inset:0}.glitch:before{color:#b91c1c99;transform:translate(-2px,1px);animation:glitch-top 4s step-start infinite}.glitch:after{color:#1d4ed899;transform:translate(2px,-1px);animation:glitch-bot 4s step-start infinite}@keyframes glitch-top{0%,94%{clip-path:inset(0 0 60% 0);transform:translate(0)}95%{clip-path:inset(5% 0 55% 0);transform:translate(-3px)}97%{clip-path:inset(0 0 60% 0);transform:translate(0)}}@keyframes glitch-bot{0%,94%{clip-path:inset(60% 0 0 0);transform:translate(0)}95%{clip-path:inset(58% 0 5% 0);transform:translate(3px)}97%{clip-path:inset(60% 0 0 0);transform:translate(0)}}.hidden{display:none!important}.mono{font-family:JetBrains Mono,monospace}.text-fg{color:var(--fg)}.text-dim{color:var(--dim)}.text-success{color:var(--success)}.text-r{color:var(--r)}.text-b{color:var(--b)}.text-gold{color:var(--gold)}@media (max-width: 400px){.btn-row{flex-direction:column}.btn{width:100%}}