@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');:root{--bg:#111;--panel:#191919;--line:#343434;--text:#f3f0e9;--muted:#8d8a84;--orange:#ff7448;--yellow:#f7c873;--blue:#8ed7d1;--mono:'DM Mono',monospace;--sans:'Space Grotesk',sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at 75% 0%,#2a2520,var(--bg) 42%);font-family:var(--sans)}.app{width:min(1120px,92vw);margin:0 auto;padding:48px 0 32px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:36px}.eyebrow{margin:0 0 10px;color:var(--orange);font:11px var(--mono);letter-spacing:.14em}h1{margin:0;font-size:clamp(38px,7vw,76px);letter-spacing:-.08em;line-height:.95}h1 span{color:var(--muted);font-weight:400}.status{display:flex;align-items:center;gap:9px;color:var(--muted);font:11px var(--mono);letter-spacing:.1em}.status i{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 14px var(--blue)}.status.playing i{background:var(--orange);box-shadow:0 0 14px var(--orange)}.panel{border:1px solid var(--line);background:rgba(25,25,25,.88)}.transport{display:flex;align-items:center;gap:20px;padding:18px;margin-bottom:16px}button{font:inherit;cursor:pointer}.play-button{width:54px;height:54px;border:0;border-radius:50%;color:#141414;background:var(--orange);font-size:19px}.play-button:hover{background:#ff916c}.transport-copy{display:grid;min-width:180px}.transport-copy .eyebrow{margin:0 0 4px;color:var(--muted)}.transport-copy strong{font-size:15px}.tempo-control{display:grid;gap:5px;margin-left:auto;color:var(--muted);font:10px var(--mono)}.tempo-control output{color:var(--text);font-size:14px}input[type=range]{width:180px;accent-color:var(--orange)}.secondary-button{border:1px solid var(--line);padding:10px 14px;color:var(--muted);background:transparent;font-size:12px}.secondary-button:hover{color:var(--text);border-color:var(--muted)}.sequencer{overflow-x:auto;padding:18px}.grid-header,.track{display:grid;grid-template-columns:150px minmax(640px,1fr);gap:14px;min-width:804px}.grid-header{color:var(--muted);font:10px var(--mono);letter-spacing:.08em;padding-bottom:12px}.step-numbers,.steps{display:grid;grid-template-columns:repeat(16,1fr);gap:7px}.step-numbers span{text-align:center}.track{align-items:center;border-top:1px solid var(--line);padding:13px 0}.track-name{display:flex;align-items:center;gap:10px;color:var(--text);font-size:13px}.track-name b{width:9px;height:9px;border-radius:2px;background:var(--track-color)}.track-name small{display:block;margin-top:3px;color:var(--muted);font:9px var(--mono)}.pad{aspect-ratio:1;min-height:30px;border:1px solid #3b3b3b;border-radius:3px;background:#222;transition:background .12s,border-color .12s,transform .12s}.pad:hover{border-color:var(--track-color)}.pad.active{border-color:var(--track-color);background:var(--track-color)}.pad.beat{border-left-color:#626262}.pad.current{transform:translateY(-3px);outline:2px solid var(--yellow);outline-offset:2px}footer{display:flex;justify-content:space-between;color:var(--muted);font:10px var(--mono);padding-top:18px}kbd{padding:3px 6px;border:1px solid var(--line);color:var(--text);background:var(--panel)}@media(max-width:700px){.app{padding-top:28px}.topbar{margin-bottom:25px}.transport{flex-wrap:wrap}.tempo-control{margin-left:0;width:100%}input[type=range]{width:100%}.secondary-button{flex:1}footer{gap:12px;flex-direction:column}}