:root{--bg: #0d0716;--panel: #170f26;--panel-2: #22183a;--border: #000;--ink: #0a0612;--paper: #fff6e0;--text: #f4efff;--muted: #a99fc2;--cyan: #00e5ff;--magenta: #ff2e88;--yellow: #ffe600;--accent: var(--yellow);--danger: #ff4d4d;--perfect: #ffe600;--great: #3dffa8;--good: #00e5ff;--miss: #9ca3af;--display: "Bangers", Impact, "Arial Black", sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.45 Space Grotesk,system-ui,-apple-system,Segoe UI,sans-serif}body:before,body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}body:before{background:radial-gradient(circle at 15% 20%,rgba(255,46,136,.28),transparent 40%),radial-gradient(circle at 85% 30%,rgba(0,229,255,.22),transparent 38%),radial-gradient(circle at 60% 90%,rgba(255,230,0,.14),transparent 40%)}body:after{background:radial-gradient(circle,rgba(255,255,255,.09) 1.3px,transparent 1.8px) 0 0 / 12px 12px;-webkit-mask-image:linear-gradient(160deg,#000 0%,transparent 45%,transparent 60%,#000 100%);mask-image:linear-gradient(160deg,#000 0%,transparent 45%,transparent 60%,#000 100%)}@media (hover: hover) and (pointer: fine){body:before{top:-10%;right:-10%;bottom:-10%;left:-10%;animation:drift 18s ease-in-out infinite alternate}}@keyframes drift{to{transform:translate(4%,-3%) rotate(4deg) scale(1.08)}}#app{min-height:100%;position:relative;z-index:1;overflow-x:clip}h1{font:3rem/1 var(--display);margin:0;letter-spacing:.04em;color:var(--paper);text-shadow:-3px -2px 0 var(--magenta),3px 2px 0 var(--cyan),5px 6px 0 var(--ink);transform:rotate(-2deg);animation:glitch-text 6s steps(1) infinite}@keyframes glitch-text{0%,92%,to{clip-path:none;transform:rotate(-2deg)}93%{clip-path:inset(10% 0 55% 0);transform:rotate(-2deg) translate(-6px)}94%{clip-path:inset(60% 0 8% 0);transform:rotate(-2deg) translate(6px)}95%{clip-path:inset(30% 0 40% 0);transform:rotate(-2deg) translate(-3px)}}h2{display:inline-block;font:1.35rem/1 var(--display);letter-spacing:.08em;margin:30px 0 14px;padding:6px 12px 4px;color:var(--ink);background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--magenta);transform:rotate(-1.2deg)}h3{margin:0 0 10px;font:1.25rem/1.1 var(--display);letter-spacing:.06em;color:var(--cyan)}a{color:var(--cyan)}code{background:var(--panel-2);padding:1px 5px;border-radius:4px;font-size:.9em}.muted{color:var(--muted)}.small{font-size:.85rem}.hidden{display:none!important}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.spread{justify-content:space-between}.grow{flex:1;min-width:140px}button{font:600 .95rem/1.2 Space Grotesk,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);padding:8px 14px;border-radius:6px;cursor:pointer;box-shadow:3px 3px 0 var(--magenta);transition:transform .1s ease-out,box-shadow .1s ease-out,background .1s}button:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:5px 5px 0 var(--cyan)}button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}button:disabled{opacity:.5;cursor:default;transform:none}button.primary{background:var(--yellow);box-shadow:3px 3px 0 var(--cyan);font-weight:700}button.primary:hover{background:#fff04d;box-shadow:5px 5px 0 var(--magenta)}button.danger{color:#c3002d}button.small{padding:4px 10px;font-size:.8rem}input[type=text],input[type=number],select{font:inherit;color:var(--text);background:#0a0612;border:2px solid #3a2a5a;border-radius:6px;padding:7px 10px;width:100%;transition:border-color .12s,box-shadow .12s}input[type=text]:focus,input[type=number]:focus,select:focus{outline:none;border-color:var(--cyan);box-shadow:3px 3px 0 var(--magenta)}input[type=file]{font:inherit;color:var(--muted);width:100%}input[type=range]{width:100%;accent-color:var(--magenta)}label{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font-size:.9rem;color:var(--muted)}label.inline{flex-direction:row;align-items:center;gap:6px;margin:0}progress{width:100%;height:10px;accent-color:var(--magenta);margin-top:10px}.screen{max-width:960px;margin:0 auto;padding:28px 16px 60px;animation:glitch-in .45s ease-out both}.screen.narrow{max-width:760px}.screen.wide{max-width:none}.screen.center{min-height:100vh;display:flex;align-items:center;justify-content:center}@keyframes glitch-in{0%{opacity:0;transform:translate(-14px) skew(8deg);clip-path:inset(0 0 70% 0);filter:hue-rotate(90deg)}20%{opacity:1;transform:translate(10px) skew(-6deg);clip-path:inset(40% 0 20% 0)}40%{transform:translate(-5px);clip-path:inset(10% 0 50% 0)}60%{transform:translate(3px);clip-path:inset(0 0 0 0);filter:none}to{opacity:1;transform:none;clip-path:none}}header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}.panel{position:relative;background:var(--panel);border:3px solid var(--ink);border-radius:4px;padding:16px;margin-bottom:16px;box-shadow:6px 6px #00e5ff59,inset 0 0 0 1px #ffffff0d}.panel:after{content:"";position:absolute;right:0;bottom:0;width:45%;height:60%;pointer-events:none;background:radial-gradient(circle,rgba(255,46,136,.35) 1.2px,transparent 1.7px) 0 0 / 8px 8px;-webkit-mask-image:linear-gradient(315deg,#000,transparent 70%);mask-image:linear-gradient(315deg,#000,transparent 70%)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.two-col .panel{margin:0}@media (max-width: 680px){.two-col{grid-template-columns:1fr}}.midi-badge{display:inline-block;font-size:.85rem;color:var(--muted);padding:4px 12px;border:2px dashed #3a2a5a;border-radius:999px}.midi-badge.on{color:var(--great);border:2px solid var(--great);box-shadow:0 0 12px #3dffa859}.list{display:flex;flex-direction:column;gap:12px}.card{position:relative;display:grid;grid-template-columns:1fr auto 110px auto;gap:14px;align-items:center;background:linear-gradient(100deg,var(--panel) 60%,#23123a);border:3px solid var(--ink);border-radius:4px;padding:12px 14px;box-shadow:5px 5px 0 var(--magenta);transform:rotate(-.4deg);transition:transform .15s ease-out,box-shadow .15s ease-out;animation:card-in .4s cubic-bezier(.2,1.4,.4,1) both}.card:nth-child(2n){transform:rotate(.4deg);box-shadow:5px 5px 0 var(--cyan)}.card:nth-child(1){animation-delay:.05s}.card:nth-child(2){animation-delay:.1s}.card:nth-child(3){animation-delay:.15s}.card:nth-child(4){animation-delay:.2s}.card:nth-child(5){animation-delay:.25s}.card:nth-child(n+6){animation-delay:.3s}@keyframes card-in{0%{opacity:0;transform:translate(-30px) skew(-10deg)}}.card:hover{transform:translate(-3px,-3px) rotate(0);box-shadow:8px 8px 0 var(--yellow)}.card:hover .card-title{text-shadow:-2px 0 var(--magenta),2px 0 var(--cyan)}.card-title{font:1.5rem/1.1 var(--display);letter-spacing:.05em;transition:text-shadow .1s}.card-actions{display:flex;gap:8px}.best{text-align:right;font-variant-numeric:tabular-nums}.best b{font-family:var(--display);font-size:1.3rem;color:var(--yellow);letter-spacing:.04em}.empty{padding:18px;border:2px dashed #3a2a5a;border-radius:6px;text-align:center}@media (max-width: 680px){.card{grid-template-columns:1fr auto}.best{text-align:left}}.diff{font:1rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px 3px;border:2px solid var(--ink);border-radius:3px;box-shadow:2px 2px 0 var(--ink);transform:rotate(-3deg);display:inline-block}.diff-easy{background:var(--great);color:var(--ink)}.diff-medium{background:var(--cyan);color:var(--ink)}.diff-hard{background:#ff7a1a;color:var(--ink)}.diff-expert{background:var(--magenta);color:#fff}.msg{margin-top:10px}.errors{color:var(--danger);font-size:.9rem}.play{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.highway{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.hud{position:absolute;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;pointer-events:none}.hud-title{font:1.7rem/1.05 var(--display);letter-spacing:.05em;text-shadow:-2px -1px 0 var(--magenta),2px 1px 0 var(--cyan),3px 4px 0 var(--ink)}.hud-right{text-align:right;font-variant-numeric:tabular-nums}.hud-score{font:2.6rem/1 var(--display);letter-spacing:.05em;color:var(--paper);text-shadow:3px 3px 0 var(--ink),-2px -1px 0 var(--magenta)}.hud-acc{color:var(--muted);font-weight:600}.combo{--dim: var(--magenta);position:absolute;left:max(16px,calc(50% - 470px));top:38%;pointer-events:none;text-align:center;transform:rotate(-6deg)}[data-mult="2"] .combo{--dim: var(--cyan)}[data-mult="3"] .combo{--dim: #ff5e00}[data-mult="4"] .combo{--dim: var(--yellow)}.combo-num{font:5rem/.9 var(--display);color:var(--paper);letter-spacing:.02em;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:-4px -2px 0 var(--dim),4px 3px 0 var(--cyan),6px 8px 0 var(--ink)}.combo-label{font:1.6rem/1 var(--display);letter-spacing:.2em;color:var(--dim);text-shadow:2px 2px 0 var(--ink)}.combo-mult{display:inline-block;margin-top:6px;font:1.6rem/1 var(--display);padding:4px 10px 2px;color:var(--ink);background:var(--dim);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(4deg)}.combo.bump .combo-num{animation:bump .18s ease-out}@keyframes bump{0%{transform:scale(1.35) rotate(-4deg)}to{transform:none}}[data-mult="4"] .combo-mult{animation:hot .5s ease-in-out infinite alternate}@keyframes hot{to{transform:rotate(-4deg) scale(1.1);box-shadow:0 0 18px var(--yellow),3px 3px 0 var(--ink)}}.judgement{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;text-align:center;font:3.2rem/1 var(--display);letter-spacing:.06em;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;text-shadow:-3px -2px 0 var(--magenta),3px 2px 0 var(--cyan),4px 6px 0 var(--ink)}.judgement small{display:block;font:600 .85rem Space Grotesk,sans-serif;letter-spacing:.1em;text-transform:uppercase;-webkit-text-stroke:0;text-shadow:1px 1px 0 var(--ink)}.judgement.pop{animation:pop .5s ease-out}@keyframes pop{0%{opacity:1;transform:translate(-50%,-50%) scale(1.6) rotate(-8deg)}20%{transform:translate(-50%,-50%) scale(.95) rotate(3deg)}35%{transform:translate(-50%,-50%) scale(1.05) rotate(-2deg)}70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}to{opacity:0;transform:translate(-50%,-70%) scale(1) rotate(-2deg)}}.j-perfect{color:var(--perfect)}.j-great{color:var(--great)}.j-good{color:var(--good)}.j-miss{color:var(--miss)}.progress{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--ink)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--magenta),var(--yellow),var(--cyan));width:0;box-shadow:0 0 10px var(--magenta)}.hint{position:absolute;right:16px;bottom:14px}.progress.seekable{height:12px;cursor:pointer;z-index:3}.learn-bar{position:absolute;left:50%;top:14px;translate:-50% 0;z-index:3;white-space:nowrap;display:flex;align-items:center;gap:6px;padding:6px;border:3px solid var(--ink);background:#140c20d9;box-shadow:4px 4px 0 var(--magenta)}.learn-bar .pause-btn{position:static;translate:none;width:34px;height:34px;font-size:1rem}.learn-speed{min-width:3.2em;text-align:center;font:1.1rem var(--display);color:var(--yellow)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0612bf;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay .panel{display:flex;flex-direction:column;gap:12px;min-width:260px}.overlay h2{align-self:center;margin:0 0 6px}.dropzone{display:flex;align-items:center;gap:14px;padding:22px 18px;cursor:pointer;border:3px dashed var(--paper);border-radius:6px;color:var(--paper);background:radial-gradient(rgba(0,229,255,.14) 1.2px,transparent 1.4px) 0 0 / 9px 9px,#fff6e008;transition:transform .12s ease,border-color .12s ease,background-color .12s ease,box-shadow .12s ease}.dropzone:hover,.dropzone:focus-visible{border-color:var(--cyan);box-shadow:4px 4px 0 var(--magenta);outline:none}.dropzone.over{border-style:solid;border-color:var(--yellow);background-color:#ffe6001a;transform:scale(1.02) rotate(-.5deg);box-shadow:6px 6px 0 var(--magenta),-3px -3px 0 var(--cyan)}.dropzone.has-file{border-style:solid;border-color:var(--yellow)}.dropzone-icon{font-size:1.8rem;line-height:1;color:var(--yellow);transition:transform .16s ease}.dropzone.over .dropzone-icon{transform:translateY(4px) scale(1.15)}.dropzone-text{display:flex;flex-direction:column;gap:2px;min-width:0}.dropzone-label{font-family:var(--display);font-size:1.35rem;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropzone-hint{font-size:.8rem;opacity:.7}.import-btn{margin-top:14px}.dropzone.compact{flex:1;min-width:120px;padding:5px 10px;gap:8px;border-width:2px}.dropzone.compact .dropzone-icon{font-size:1rem}.dropzone.compact .dropzone-label{font-size:.95rem}.dropzone.compact .dropzone-hint{font-size:.7rem}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;padding:16px;display:flex;align-items:center;justify-content:center;background:#0a0612b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade-in .12s ease-out}.dialog-backdrop.closing{animation:fade-out .12s ease-in forwards}.dialog{width:min(420px,100%);display:flex;flex-direction:column;gap:12px;box-shadow:6px 6px 0 var(--magenta),-4px -4px 0 var(--cyan);animation:dialog-in .18s cubic-bezier(.2,.9,.3,1.3)}.dialog h2{align-self:flex-start;margin:0;transform:rotate(-1.5deg)}.dialog-msg{margin:0;line-height:1.45}.dialog-actions{justify-content:flex-end}button.danger-solid{background:var(--magenta);color:var(--paper);font-weight:700;box-shadow:3px 3px 0 var(--ink)}button.danger-solid:hover{background:#ff4f9c;box-shadow:5px 5px 0 var(--yellow)}@keyframes fade-in{0%{opacity:0}}@keyframes fade-out{to{opacity:0}}@keyframes dialog-in{0%{opacity:0;transform:scale(.85) rotate(-2deg)}}.countdown{font:3rem/1 var(--display);letter-spacing:.06em;color:var(--yellow);text-shadow:3px 3px 0 var(--ink),-2px -2px 0 var(--magenta);animation:bump .4s ease-out infinite alternate}.results{min-width:340px;display:flex;flex-direction:column;gap:6px}.grade-wrap{position:relative;display:flex;justify-content:center;align-items:center;height:170px;margin:4px 0 8px}.grade-wrap:before{content:"";position:absolute;width:170px;height:170px;background:var(--yellow);border:0;clip-path:polygon(50% 0%,58% 14.9%,71.7% 5%,72.4% 21.9%,89.1% 18.8%,82.4% 34.4%,98.7% 38.9%,86% 50%,98.7% 61.1%,82.4% 65.6%,89.1% 81.2%,72.4% 78.1%,71.7% 95%,58% 85.1%,50% 100%,42% 85.1%,28.3% 95%,27.6% 78.1%,10.9% 81.2%,17.6% 65.6%,1.3% 61.1%,14% 50%,1.3% 38.9%,17.6% 34.4%,10.9% 18.8%,27.6% 21.9%,28.3% 5%,42% 14.9%);filter:drop-shadow(5px 5px 0 var(--magenta));animation:spin-in .6s cubic-bezier(.2,1.5,.4,1) both,slow-spin 14s linear .6s infinite}@keyframes spin-in{0%{transform:scale(0) rotate(-120deg)}}@keyframes slow-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.grade{position:relative;font:6rem/1 var(--display);text-align:center;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:-4px -3px 0 var(--magenta),4px 3px 0 var(--cyan),6px 8px 0 var(--ink);animation:stamp .5s cubic-bezier(.3,1.6,.5,1) .25s both}@keyframes stamp{0%{opacity:0;transform:scale(3) rotate(-25deg)}to{opacity:1;transform:rotate(-8deg)}}.grade-S{color:var(--paper)}.grade-A{color:var(--great)}.grade-B{color:var(--good)}.grade-C,.grade-D{color:var(--miss)}.badge{align-self:center;background:var(--magenta);color:#fff;border:2.5px solid var(--ink);padding:4px 14px 2px;font:1.3rem/1 var(--display);letter-spacing:.08em;box-shadow:3px 3px 0 var(--ink);transform:rotate(-3deg);animation:hot .6s ease-in-out infinite alternate}.stat{display:flex;justify-content:space-between;border-bottom:2px dotted #3a2a5a;padding:5px 0;font-variant-numeric:tabular-nums;animation:card-in .35s ease-out both}.stat:nth-child(n+4){animation-delay:.45s}.stat:nth-child(n+7){animation-delay:.6s}.results .row{margin-top:14px;justify-content:center}.bindings{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.binding{background:var(--panel-2);border:2px solid var(--ink);border-radius:4px;padding:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}.monitor{background:var(--panel);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--cyan);border-radius:4px;padding:10px 14px;margin:12px 0;min-height:46px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.kit-stage{position:relative;width:100%;max-width:720px;aspect-ratio:16 / 10;margin:0 auto 18px;border:3px solid var(--ink);border-radius:6px;background:radial-gradient(circle,rgba(255,255,255,.07) 1.2px,transparent 1.7px) 0 0 / 10px 10px,radial-gradient(ellipse at 50% 60%,#2a1840,#0f0a18 70%);box-shadow:6px 6px 0 var(--magenta)}.kit-pad{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;padding:0;border:4px solid var(--ink);background:color-mix(in srgb,var(--c) 30%,#140c22);box-shadow:0 0 0 3px var(--c),4px 6px 0 3px var(--ink);display:flex;align-items:center;justify-content:center}.kit-pad:hover{background:color-mix(in srgb,var(--c) 45%,#140c22);transform:translate(-50%,-52%);box-shadow:0 0 0 3px var(--c),4px 8px 0 3px var(--ink)}.kit-pad:active{transform:translate(-50%,-50%)}.kit-pad.kick{border-width:6px}.kit-pad-name{font:clamp(.9rem,2.2vw,1.3rem)/1 var(--display);letter-spacing:.05em;color:#fff;text-shadow:2px 2px 0 var(--ink);pointer-events:none}.kit-pad.hit{animation:padhit .28s ease-out}@keyframes padhit{0%{background:var(--c);transform:translate(-50%,-50%) scale(1.14) rotate(-4deg);box-shadow:0 0 0 3px var(--c),0 0 30px 8px var(--c)}to{transform:translate(-50%,-50%) scale(1)}}.kit-pad.learning{animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 3px var(--c),0 0 0 12px color-mix(in srgb,var(--c) 30%,transparent)}}.kit-lists{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:14px}.kit-list{background:var(--panel);border:3px solid var(--ink);border-radius:4px;padding:10px;box-shadow:3px 3px #ff2e8880}.sound-row{margin-top:8px;padding-top:8px;border-top:2px dashed rgba(255,246,224,.15)}.sound-name{flex:1 0 100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.chip{display:inline-flex;align-items:center;gap:2px;background:var(--panel-2);border:1.5px solid var(--ink);border-radius:999px;padding:1px 4px 1px 9px;font-size:.8rem}.chip-x{background:none;border:none;box-shadow:none;padding:0 5px;color:var(--muted);font-size:1rem;line-height:1}.chip-x:hover{color:var(--danger);background:none;box-shadow:none;transform:none}.editor-fields{display:grid;grid-template-columns:2fr 2fr 1fr 1fr 1fr;gap:10px}@media (max-width: 800px){.editor-fields{grid-template-columns:1fr 1fr}}.editor-toolbar{margin-bottom:10px}.editor-toolbar select{width:auto}.editor-canvas{width:100%;display:block;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--cyan);border-radius:4px;cursor:crosshair;touch-action:none}[data-mult="3"] .combo-num,[data-mult="4"] .combo-num{color:#fff3c4;animation:flicker .12s steps(2) infinite}[data-mult="3"] .combo.bump .combo-num,[data-mult="4"] .combo.bump .combo-num{animation:bump .18s ease-out,flicker .12s steps(2) infinite}@keyframes flicker{0%{text-shadow:0 -4px 14px #ff9d00,0 -12px 26px #ff4d00,0 -22px 40px #ff2200,5px 6px 0 var(--ink)}to{text-shadow:0 -6px 18px #ffc400,0 -16px 30px #ff6a00,0 -28px 46px #ff3300,5px 6px 0 var(--ink)}}h1.home-link{cursor:pointer}.landing{--mx: 0;--my: 0;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:24px 16px}.landing-rays{position:absolute;left:50%;top:45%;width:260vmax;height:260vmax;translate:-50% -50%;pointer-events:none;opacity:.5;background:repeating-conic-gradient(from 0deg,rgba(255,46,136,.22) 0deg 4deg,transparent 4deg 12deg,rgba(0,229,255,.16) 12deg 15deg,transparent 15deg 24deg);-webkit-mask-image:radial-gradient(circle,transparent 6%,#000 30%,transparent 60%);mask-image:radial-gradient(circle,transparent 6%,#000 30%,transparent 60%);animation:rays 40s linear infinite}@keyframes rays{to{rotate:360deg}}.landing-notes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;transform:translate(calc(var(--mx) * -30px),calc(var(--my) * -20px));transition:transform .2s ease-out}.fall-note{position:absolute;left:var(--x);top:-40px;width:70px;height:18px;border-radius:6px;background:var(--c);border:2.5px solid var(--ink);box-shadow:-3px 1px 0 var(--cyan),3px -1px 0 var(--magenta);opacity:.55;animation:fall var(--d) linear var(--delay) infinite}@keyframes fall{to{transform:translateY(calc(100vh + 80px))}}.landing-hero{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;transform:translate(calc(var(--mx) * 18px),calc(var(--my) * 12px));transition:transform .2s ease-out;animation:glitch-in .7s ease-out both}.landing-kicker{font:1.1rem/1 var(--display);letter-spacing:.14em;color:var(--ink);background:var(--yellow);border:3px solid var(--ink);padding:6px 12px 4px;box-shadow:4px 4px 0 var(--magenta);transform:rotate(-2deg);margin-bottom:14px}.landing-title{position:relative;font-size:clamp(4rem,15vw,10rem);letter-spacing:.03em;line-height:.95;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:-6px -4px 0 var(--magenta),6px 4px 0 var(--cyan),10px 12px 0 var(--ink)}.landing-title:before,.landing-title:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-text-stroke:0;text-shadow:none}.landing-title:before{color:var(--cyan);animation:slice 3.2s steps(1) infinite}.landing-title:after{color:var(--magenta);animation:slice 2.7s steps(1) .4s infinite reverse}@keyframes slice{0%,86%,to{clip-path:inset(0 0 100% 0);transform:none}88%{clip-path:inset(15% 0 60% 0);transform:translate(-12px)}91%{clip-path:inset(55% 0 20% 0);transform:translate(10px)}94%{clip-path:inset(35% 0 45% 0);transform:translate(-6px)}}.landing-title.bump{animation:title-bump .16s ease-out}@keyframes title-bump{0%{transform:rotate(-2deg) scale(1.06)}to{transform:rotate(-2deg)}}.landing-tag{font-size:1.15rem;color:var(--paper);margin:18px 0 30px;letter-spacing:.02em;text-shadow:2px 2px 0 var(--ink)}.landing-play{position:relative;width:210px;height:210px;padding:0;border:0;background:none;box-shadow:none;color:var(--ink);font:3.4rem/1 var(--display);letter-spacing:.06em;animation:beat .6s ease-out infinite}.landing-play:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--yellow);z-index:-1;filter:drop-shadow(6px 6px 0 var(--magenta)) drop-shadow(-3px -3px 0 var(--cyan));clip-path:polygon(50% 0%,58% 14.9%,71.7% 5%,72.4% 21.9%,89.1% 18.8%,82.4% 34.4%,98.7% 38.9%,86% 50%,98.7% 61.1%,82.4% 65.6%,89.1% 81.2%,72.4% 78.1%,71.7% 95%,58% 85.1%,50% 100%,42% 85.1%,28.3% 95%,27.6% 78.1%,10.9% 81.2%,17.6% 65.6%,1.3% 61.1%,14% 50%,1.3% 38.9%,17.6% 34.4%,10.9% 18.8%,27.6% 21.9%,28.3% 5%,42% 14.9%);animation:slow-spin 12s linear infinite}.landing-play span{display:inline-block;transform:rotate(-6deg);text-shadow:3px 3px 0 #fff}.landing-play:hover{transform:scale(1.08) rotate(-3deg);box-shadow:none;animation-play-state:paused}.landing-play:hover:before{background:#fff04d}.landing-play:active{transform:scale(.95);box-shadow:none}.landing-play:focus-visible{outline:3px dashed var(--cyan);outline-offset:8px;border-radius:50%}@keyframes beat{0%{scale:1.07}40%,to{scale:1}}.landing-hint{margin-top:22px;color:var(--muted);font-size:.9rem}.landing-features{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,240px));gap:18px}.feature{background:var(--panel);border:3px solid var(--ink);padding:12px 14px;box-shadow:5px 5px 0 var(--cyan);transform:rotate(-1deg);animation:card-in .5s cubic-bezier(.2,1.4,.4,1) both}.feature:nth-child(2){transform:rotate(1deg);box-shadow:5px 5px 0 var(--magenta);animation-delay:.12s}.feature:nth-child(3){animation-delay:.24s}.feature p{margin:0}@media (max-width: 720px){.landing-features{grid-template-columns:1fr;width:100%;max-width:360px}.landing{justify-content:flex-start;overflow-y:auto}}@media (max-height: 760px) and (min-width: 721px){.landing-features{display:none}}.splash{position:absolute;z-index:1;pointer-events:none;font:3.2rem/1 var(--display);color:var(--c);letter-spacing:.04em;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:-3px -2px 0 var(--magenta),3px 2px 0 var(--cyan),5px 6px 0 var(--ink);animation:splash .7s ease-out forwards}@keyframes splash{0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(.2);opacity:1}25%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1.2)}60%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}to{opacity:0;transform:translate(-50%,-80%) rotate(var(--r)) scale(1)}}.landing.leaving .landing-hero{animation:warp .55s ease-in forwards}.landing.leaving:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;z-index:5;animation:flash .55s ease-in forwards}@keyframes warp{to{transform:scale(3);opacity:0;filter:blur(4px) hue-rotate(120deg)}}@keyframes flash{0%{opacity:0}70%{opacity:.9}to{opacity:0}}html{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.play{touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}.pause-btn{position:absolute;top:14px;left:50%;translate:-50% 0;width:44px;height:44px;padding:0;font:1.2rem/1 var(--display);letter-spacing:.1em;z-index:3}.pause-btn:hover{translate:-50% 0}.play.versus{display:grid;grid-template-columns:1fr 1fr}.board{position:relative;overflow:hidden;min-width:0}.board+.board{border-left:4px solid var(--ink);box-shadow:inset 3px 0 0 var(--magenta),inset 6px 0 0 var(--cyan)}.versus .hud{top:14px}.versus .board:first-child .hud{right:42px}.versus .board+.board .hud{left:42px}.player-tag{display:inline-block;padding:3px 12px;font:1.5rem/1.1 var(--display);letter-spacing:.06em;color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}.player-tag.p1{background:var(--magenta);color:#fff}.player-tag.p2{background:var(--cyan)}.vs-badge{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;pointer-events:none;width:84px;height:84px;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font:2.2rem/1 var(--display);letter-spacing:.04em;rotate:-8deg;clip-path:polygon(50% 0%,61% 18%,82% 10%,79% 32%,100% 40%,84% 55%,96% 75%,73% 76%,66% 98%,50% 84%,34% 98%,27% 76%,4% 75%,16% 55%,0% 40%,21% 32%,18% 10%,39% 18%);filter:drop-shadow(4px 4px 0 var(--magenta))}.vs-badge.static{position:static;translate:none;align-self:center}.vs-btn{font-family:var(--display);letter-spacing:.08em;background:var(--cyan);color:var(--ink)}.versus-song{margin:-6px 0 14px;font-size:1.1rem}.versus-players{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}.versus-player{display:flex;flex-direction:column;gap:12px}.versus-player.p1{box-shadow:5px 5px 0 var(--magenta)}.versus-player.p2{box-shadow:5px 5px 0 var(--cyan)}.versus-player .player-tag{align-self:flex-start}.test-light{--c: var(--paper);padding:16px;text-align:center;border:2px dashed rgba(255,246,224,.35);border-radius:6px;font:1.2rem/1 var(--display);letter-spacing:.06em;color:var(--muted)}.test-light.lit{animation:lit .6s ease-out}@keyframes lit{0%{background:var(--c);color:var(--ink);border-color:var(--c);transform:scale(1.05)}to{background:transparent}}.versus-start{margin-top:10px;font-size:1.1rem;padding:10px 24px}.versus-results{width:min(760px,100%);display:flex;flex-direction:column;gap:10px}.versus-results>.row{justify-content:center;margin-top:6px}.winner{align-self:center;margin:6px 0 8px;padding:8px 26px;font:3rem/1 var(--display);letter-spacing:.05em;color:var(--ink);background:var(--yellow);border:4px solid var(--ink);transform:rotate(-3deg);box-shadow:6px 6px 0 var(--magenta),-4px -4px 0 var(--cyan);animation:stamp .5s cubic-bezier(.3,1.6,.5,1) both}.winner.p1{background:var(--magenta);color:#fff}.winner.p2{background:var(--cyan)}.versus-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}.versus-col{display:flex;flex-direction:column;gap:4px;padding:12px;border:3px solid var(--ink);border-radius:4px}.versus-col.won{border-color:var(--yellow);box-shadow:0 0 0 3px var(--ink),0 0 22px #ffe60059}.versus-col .player-tag{align-self:flex-start}.versus-col .grade{font-size:4rem;margin:6px 0}.tap-pad{width:100%;height:120px;margin-top:12px;font:2.4rem/1 var(--display);letter-spacing:.1em;background:var(--magenta);color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}.tap-pad:active{background:var(--yellow);color:var(--ink)}.results{min-width:min(340px,100%)}@media (max-width: 680px){.screen{padding:18px 12px 48px}h1{font-size:2.3rem}header.top .row{width:100%}header.top .row button{flex:1;padding:10px 8px;font-size:.8rem}.card{gap:10px}.card-actions{grid-column:1 / -1;justify-content:flex-end;flex-wrap:wrap}.card-actions button{padding:10px 14px}.card-actions button.primary{flex:1;font-size:1.05rem}.card-title{font-size:1.3rem}.midi-badge{display:block;text-align:center;margin-bottom:4px}.hud{top:10px;left:10px;right:10px}.hud>div:first-child{max-width:calc(50% - 30px)}.hud-title{font-size:1.15rem}.hud-score{font-size:1.7rem}.pause-btn{top:10px;width:40px;height:40px}.learn-bar{top:58px;gap:4px;padding:4px}.learn-bar button{padding:6px 9px}.learn-bar .pause-btn{width:32px;height:32px;padding:0}.combo{left:auto;right:10px;top:76px;transform:rotate(-6deg) scale(.5);transform-origin:top right}.judgement{font-size:2.2rem;top:38%}.landing{gap:28px;padding-top:48px}.landing-play{width:170px;height:170px;font-size:2.8rem}.landing-tag{font-size:1rem;margin:14px 0 22px}.landing-kicker{font-size:.9rem}.grade-wrap{height:140px}.grade-wrap:before{width:140px;height:140px}.grade{font-size:4.6rem}.results .row button{flex:1;padding:12px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.find-sng{margin-top:18px;padding-top:14px;border-top:2px dashed rgba(255,255,255,.15)}.find-sng p{margin:6px 0 0}