html,body{height:100%;margin:0;overflow:hidden}body{color:#ece6ff;box-sizing:border-box;background:radial-gradient(120% 90% at 50% 0,#1a1426 0%,#0b0a10 60%);grid-template-rows:auto 1fr clamp(44px,12vh,110px);gap:clamp(6px,1.4vh,14px);padding:clamp(8px,2vh,22px) clamp(10px,2.4vw,32px);font-family:JetBrains Mono,monospace;display:grid}header{flex-wrap:nowrap;align-items:center;gap:clamp(8px,1.6vw,18px);min-width:0;display:flex}.brand{letter-spacing:-.03em;white-space:nowrap;margin-right:auto;font-family:Space Grotesk,sans-serif;font-size:clamp(16px,2.4vw,26px);font-weight:700}.brand span{color:#b98cff}button{font:inherit;color:inherit;cursor:pointer;white-space:nowrap;border-radius:999px}.play{color:#160d24;background:#b98cff;border:0;padding:6px 14px;font-size:clamp(11px,1.4vw,14px);box-shadow:0 0 24px #b98cff66}.play b{font-weight:700}.play.on{background:#ff6b9a;box-shadow:0 0 24px #ff6b9a66}.ghost{background:0 0;border:1px solid #ffffff2a;padding:5px 11px;font-size:clamp(10px,1.3vw,13px)}.ghost:hover{border-color:#b98cff}.bpm{opacity:.85;align-items:center;gap:6px;font-size:clamp(10px,1.3vw,13px);display:flex}.bpm input{accent-color:#b98cff;width:clamp(50px,9vw,120px)}.bpm output{width:3ch}#grid{grid-template-columns:auto repeat(16,1fr);grid-auto-rows:1fr;gap:clamp(2px,.45vw,6px);min-height:0;display:grid}.lbl{opacity:.5;letter-spacing:.05em;align-items:center;padding-right:6px;font-size:clamp(8px,1.1vw,11px);display:flex}.cell{background:#ffffff0d;border:0;border-radius:clamp(3px,.5vw,7px);padding:0;transition:background .12s,transform .12s,box-shadow .12s}.cell.beat{background:#ffffff16}.cell:hover{background:#ffffff26}.cell.on{background:var(--c);box-shadow:0 0 12px color-mix(in srgb, var(--c) 55%, transparent)}.cell.head{outline:1px solid #fff5}.cell.on.head{filter:brightness(1.35);transform:scale(1.12)}#scope{background:#00000040;border-radius:10px;width:100%;height:100%;display:block}