@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;600&display=swap');
:root{--ink:#0b0b0d;--paper:#d9d6cb;--acid:#ddff3e;--rust:#ed4b27;--line:#34343b;--muted:#88878a}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--ink);color:var(--paper);font-family:'IBM Plex Mono',monospace}body{overflow:hidden}button,input{font:inherit}button{color:inherit}main{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:18px 24px 14px;gap:16px;background:radial-gradient(circle at 65% 45%,#242126 0,#0b0b0d 42%)}header{display:flex;align-items:flex-start;justify-content:space-between;border-top:1px solid var(--paper);padding-top:8px}header>div{display:flex;gap:16px;align-items:flex-start}.index,header p,footer{font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.11em}.index{color:var(--acid)}h1{font-family:'Archivo Black',sans-serif;font-size:clamp(34px,4.2vw,66px);line-height:.78;letter-spacing:-.065em;margin:0}header p{text-align:right;margin:0;color:var(--muted)}.instrument{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 290px;border:1px solid var(--line)}.stage{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 64px;border-right:1px solid var(--line)}.strike{position:relative;overflow:hidden;border:0;background:#111116;cursor:pointer;padding:0;isolation:isolate}.strike:focus-visible,.keys button:focus-visible,.actions button:focus-visible{outline:2px solid var(--acid);outline-offset:-3px}.strike:active{filter:brightness(1.3)}canvas{position:absolute;inset:0;width:100%;height:100%}.strike-copy{position:absolute;inset:0;display:grid;place-content:center;z-index:2;text-align:center;pointer-events:none}.strike-copy b{font-family:'Archivo Black';font-size:clamp(90px,19vw,270px);line-height:.75;letter-spacing:-.09em;color:var(--paper);mix-blend-mode:difference}.strike-copy small{margin-top:24px;color:var(--acid);letter-spacing:.22em}.playhead{position:absolute;inset:0 auto 0 0;width:2px;background:var(--acid);box-shadow:0 0 30px var(--acid);opacity:0;z-index:3}.strike.playing .playhead{opacity:1;animation:sweep var(--duration) linear}.keys{display:grid;grid-template-columns:repeat(12,1fr);background:#050506}.keys button{min-width:0;border:0;border-right:1px solid var(--line);background:transparent;font-size:11px;cursor:pointer}.keys button:nth-child(2),.keys button:nth-child(4),.keys button:nth-child(7),.keys button:nth-child(9),.keys button:nth-child(11){background:#29282c;color:#aaa}.keys button.active{background:var(--acid);color:var(--ink);font-weight:600}.cuts{display:flex;flex-direction:column;background:#101012}.cut{padding:24px 18px;border-bottom:1px solid var(--line)}label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;margin-bottom:18px}output{color:var(--acid)}input[type=range]{width:100%;height:24px;margin:0;appearance:none;background:transparent}input::-webkit-slider-runnable-track{height:2px;background:var(--muted)}input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:0;background:var(--paper);margin-top:-8px;border:0}.actions{margin-top:auto;display:grid}.actions button{border:0;border-top:1px solid var(--line);min-height:58px;background:transparent;text-align:left;padding:0 18px;cursor:pointer}.actions button:hover{background:var(--paper);color:var(--ink)}#export{background:var(--rust);color:#080808;font-weight:600}#status{margin:0;padding:12px 18px;font-size:10px;color:var(--muted);border-top:1px solid var(--line)}footer{display:flex;justify-content:space-between;color:var(--muted)}@keyframes sweep{from{left:0}to{left:100%}}@media(max-width:700px){main{padding:10px;gap:9px}header .index{display:none}h1{font-size:35px}header p{font-size:8px}.instrument{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.stage{border-right:0;border-bottom:1px solid var(--line);grid-template-rows:minmax(0,1fr) 49px}.strike-copy b{font-size:34vw}.strike-copy small{font-size:8px;margin-top:14px}.keys{grid-template-columns:repeat(12,minmax(44px,1fr));overflow-x:auto}.keys button{font-size:8px;min-height:49px}.cuts{display:grid;grid-template-columns:repeat(3,1fr)}.cut{padding:12px 8px;border-bottom:0;border-right:1px solid var(--line)}label{display:block;font-size:8px;margin-bottom:8px}output{display:block;margin-top:4px}.actions{grid-column:1/4;grid-template-columns:1fr 1fr;margin:0}.actions button{min-height:49px;font-size:11px}#status{grid-column:1/4;padding:7px 9px;font-size:8px}footer{font-size:8px}}@media(prefers-reduced-motion:reduce){.strike.playing .playhead{animation:none;left:50%}}