:root{--bg:#0b0d12;--panel:#121826;--panel2:#0e1420;--ink:#e6e6e6;--ink-dim:#97a0aa;--fg:#62ff9b;--accent:#ff2e8b;--accent2:#00e0ff;--warn:#ffdb4d;--gridA:#1a2233;--gridB:#0f1522;--on:#62ff9b;--on-acc:#98ffbe;--off:#27324a;--play:#ffdb4d;--shadow:#000;--good:#00e28a;--bad:#ff667b}*{box-sizing:border-box}body,html{background:var(--bg);color:var(--ink);margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;line-height:1.35;image-rendering:pixelated}body:after{content:"";pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(180deg,hsla(0,0%,100%,.035) 0,hsla(0,0%,100%,.035) 1px,transparent 2px,transparent 3px);mix-blend-mode:overlay}.wrap{max-width:1100px;margin:24px auto 64px;padding:0 16px}.ascii{background:linear-gradient(180deg,var(--panel),var(--panel2));border:4px solid #000;box-shadow:0 0 0 2px #111,0 0 0 6px #000,0 20px 40px rgba(0,0,0,.5);padding:16px;text-shadow:0 0 8px rgba(98,255,155,.25);color:var(--fg);overflow:auto}.ascii pre{margin:0;font-size:12px;letter-spacing:1px}.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin:18px 0}.panel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:4px solid #000;box-shadow:0 0 0 2px #111,0 0 0 6px #000;padding:12px}.title{color:var(--accent2);text-shadow:0 0 8px rgba(0,224,255,.4);font-weight:700;letter-spacing:1px;margin-bottom:8px}.controls{flex-wrap:wrap;gap:10px}.controls,.ctrl{display:flex;align-items:center}.ctrl{gap:6px;background:#0c1322;border:2px solid #000;padding:6px 8px;box-shadow:inset 0 0 0 2px #172036,2px 2px 0 0 #000;border-radius:3px}.ctrl label{color:var(--ink-dim);font-size:12px}.ctrl input[type=number],.ctrl input[type=range],.ctrl select{accent-color:var(--accent)}.ctrl input[type=number]{width:70px;background:#0a1120;color:var(--ink);border:1px solid #000;padding:3px 6px;font-family:inherit}.btn{background:linear-gradient(180deg,#0f1a2f,#0a1120);border:2px solid #000;box-shadow:inset 0 0 0 2px #172036,2px 2px 0 0 #000;color:var(--ink);padding:8px 12px;cursor:pointer;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:4px}.btn:hover{filter:brightness(1.1)}.btn:active{transform:translate(1px,1px)}.grid{display:grid;grid-template-columns:140px repeat(16,1fr);grid-gap:6px;gap:6px;align-items:center}.grid-head{margin-bottom:8px}.step-head{width:36px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--ink-dim);background:#0c1322;border:2px solid #000;box-shadow:inset 0 0 0 2px #172036,2px 2px 0 0 #000;border-radius:4px;font-size:11px;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.step-head.even{background:#0a1020}.track-name{color:var(--fg);text-shadow:0 0 8px rgba(98,255,155,.25);font-weight:700;letter-spacing:1px;font-size:12px;justify-content:space-between;gap:8px}.track-name,.track-name .ms{display:flex;align-items:center}.track-name .ms{gap:6px}.toggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:11px;font-weight:800;letter-spacing:.5px;border:1px solid #000;border-radius:3px;background:#0e1628;color:var(--ink-dim);box-shadow:inset 0 0 0 1px #1a2746,2px 2px 0 #000;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.toggle:hover{filter:brightness(1.05)}.toggle.active{color:#fff;text-shadow:0 0 6px hsla(0,0%,100%,.25)}.toggle.m.active{background:#1b2c34;box-shadow:inset 0 0 0 1px #2a4858,2px 2px 0 #000}.toggle.s.active{background:#2a1b34;box-shadow:inset 0 0 0 1px #51305d,2px 2px 0 #000}.cell{width:36px;height:36px;background:var(--gridB);border:2px solid #000;box-shadow:inset 0 0 0 2px #16233d,2px 2px 0 0 #000;position:relative;cursor:pointer;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cell.even{background:var(--gridA)}.cell.active{background:var(--on);box-shadow:inset 0 0 0 2px #1a6138,2px 2px 0 0 #000}.cell.active.accent{background:var(--on-acc);box-shadow:inset 0 0 0 2px #2d7a4e,2px 2px 0 0 #000}.cell.playing:after{content:"";position:absolute;inset:-3px;border:3px solid var(--play);box-shadow:0 0 10px var(--play),inset 0 0 8px var(--play);border-radius:6px;pointer-events:none}.tiny{font-size:11px;color:var(--ink-dim)}.vol-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}.vol-row input[type=range]{width:140px}.keyboard{display:flex;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:10px;background:#0c1322;box-shadow:inset 0 0 0 2px #172036,2px 2px 0 0 #000;overflow:hidden}.key,.keyboard{border:2px solid #000}.key{width:40px;height:140px;margin:0 3px;box-shadow:inset 0 0 0 2px #2a395c,2px 2px 0 0 #000;background:#cfd7e6;position:absolute;cursor:pointer;border-radius:3px}.key.black{width:28px;height:92px;background:#151c2e;z-index:2;box-shadow:inset 0 0 0 2px #223054,2px 2px 0 0 #000}.key.down{filter:brightness(.8);transform:translateY(1px)}.kb-wrap{position:relative;height:150px}.kb-note{position:absolute}.help{color:var(--ink-dim);font-size:12px;margin-top:6px}.badge{display:inline-block;padding:2px 6px;border:1px solid #000;background:#0e1628;box-shadow:inset 0 0 0 1px #1a2746,2px 2px 0 #000;border-radius:3px;color:var(--accent2);font-weight:700;letter-spacing:.5px}.footer{margin-top:28px;color:var(--ink-dim);font-size:12px;text-align:right}.inline-note{margin-left:6px;color:var(--ink-dim);font-size:11px}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0f182b;color:#fff;border:2px solid #000;border-radius:6px;box-shadow:inset 0 0 0 2px #1c2a4b,6px 6px 0 #000;padding:8px 12px;font-weight:700;letter-spacing:.5px;z-index:999;opacity:0;transition:opacity .15s ease,transform .15s ease;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,-2px)}@media (max-width:900px){.grid{grid-template-columns:100px repeat(16,minmax(20px,1fr))}.step-head{width:24px;height:20px}.cell{width:24px;height:24px}.keyboard .key{height:100px;width:28px}.key.black{height:66px;width:20px}}