:root{
  --bg:#02080d;--panel:#061118;--green:#00ef9d;--cyan:#00c9ff;
  --yellow:#ffd400;--pink:#ff3aa7;--purple:#bd55ff;--orange:#ff9700;
  --text:#f4f7f8;--muted:#9fb0b7;
  font-family:"Segoe UI",Inter,system-ui,sans-serif
}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;color:var(--text);background:
radial-gradient(circle at 20% 10%,rgba(0,239,157,.08),transparent 28%),
radial-gradient(circle at 80% 22%,rgba(189,85,255,.06),transparent 30%),
linear-gradient(180deg,#02080d,#010609)}
button,input,select{font:inherit}.instrument-shell{width:min(1560px,calc(100% - 24px));margin:auto;padding:10px 0 24px}
.panel{border:1px solid rgba(0,239,157,.20);border-radius:15px;background:rgba(4,16,22,.92)}
.microsite-nav{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;border:1px solid rgba(0,239,157,.22);border-radius:12px;color:var(--muted);font-size:.8rem}
.microsite-nav a{color:var(--green);text-decoration:none}
.instrument-header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 4px 20px}
.eyebrow{margin:0;color:var(--green);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}
h1{margin:5px 0;font-size:clamp(2rem,4vw,3.6rem)}.instrument-header p:last-child{max-width:760px;color:var(--muted);line-height:1.5}
.transport{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.transport button{border:1px solid rgba(0,239,157,.45);border-radius:10px;padding:10px 12px;color:var(--green);background:rgba(0,239,157,.055);cursor:pointer;font-weight:700}
.transport button:disabled{opacity:.4;cursor:not-allowed}#pauseButton{color:var(--yellow);border-color:rgba(255,212,0,.4)}#stopButton{color:var(--pink);border-color:rgba(255,58,167,.4)}#resetButton{color:var(--cyan);border-color:rgba(0,201,255,.4)}
.global-controls{display:grid;grid-template-columns:1fr 1fr .7fr 1.6fr;gap:12px;padding:12px;margin-bottom:12px}
.control-block{display:flex;flex-direction:column;gap:6px}.control-block label{color:var(--muted);font-size:.72rem}.control-block select{border:1px solid rgba(110,190,205,.2);border-radius:8px;background:#061016;color:var(--text);padding:8px}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px}.segmented button{border:1px solid rgba(110,190,205,.18);border-radius:8px;background:rgba(255,255,255,.03);color:var(--muted);padding:8px;cursor:pointer}.segmented button.selected{border-color:var(--green);color:var(--green);background:rgba(0,239,157,.1)}
.tempo-block{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:8px}.tempo-block label{grid-column:1/-1}.tempo-block input{width:100%}.tempo-block output{font-size:.78rem;color:var(--yellow)}
.sphere-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
.sphere-card{min-width:0;padding:11px;border:1px solid rgba(0,239,157,.2);border-radius:14px;background:linear-gradient(145deg,rgba(5,19,24,.94),rgba(2,10,15,.92))}
.sphere-card header{display:flex;align-items:center;gap:8px}.sphere-card h2{margin:0;font-size:.95rem}.qubit-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#04100d;font-size:.72rem;font-weight:900}.timbre-card .qubit-number{background:var(--yellow)}.filter-card .qubit-number{background:var(--pink)}.effects-card .qubit-number{background:var(--cyan)}.rhythm-card .qubit-number{background:var(--purple)}
.sphere-view{width:100%;aspect-ratio:1.08/1;min-height:170px;touch-action:none;cursor:crosshair}.sphere-view canvas{display:block;width:100%;height:100%}
.sphere-card output{display:block;color:#71858d;font-size:.64rem;text-align:center}.sphere-card>p{margin:7px 0 0;color:var(--muted);font-size:.7rem;line-height:1.35;text-align:center}
.sequencer{padding:15px}.sequencer-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.sequencer h2{margin:3px 0 0}
.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.68rem}.legend span{display:flex;align-items:center;gap:5px}.swatch{width:13px;height:13px;border-radius:3px;border:1px solid rgba(110,190,205,.18);background:rgba(255,255,255,.03)}.swatch.enabled{border-color:var(--green);background:rgba(0,239,157,.1)}.swatch.current{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow) inset}
.tracks{display:grid;gap:9px;margin-top:13px}.track{display:grid;grid-template-columns:145px minmax(0,1fr);gap:10px;align-items:center}.track-info{display:grid;grid-template-columns:1fr auto;gap:5px 8px;align-items:center}.track-info h3{margin:0;font-size:.84rem}.track-info p{grid-column:1/-1;margin:0;color:var(--muted);font-size:.65rem}.track-controls{display:flex;gap:5px}.mute-button{border:1px solid rgba(110,190,205,.18);border-radius:6px;background:rgba(255,255,255,.025);color:var(--muted);font-size:.65rem;padding:4px 6px;cursor:pointer}.mute-button.muted{border-color:var(--pink);color:var(--pink)}
.volume{width:72px;accent-color:var(--green)}
.step-row{display:grid;grid-template-columns:repeat(16,minmax(22px,1fr));gap:4px}.step{min-width:0;min-height:34px;border:1px solid rgba(110,190,205,.15);border-radius:6px;background:rgba(255,255,255,.025);color:#6e8188;cursor:pointer;padding:0;font-size:.65rem}.step.active{border-color:var(--green);background:rgba(0,239,157,.11);color:var(--green)}.step.playing{box-shadow:0 0 0 2px var(--yellow) inset,0 0 10px rgba(255,212,0,.18);color:var(--yellow)}.step:nth-child(4n+1){margin-left:3px}.step:first-child{margin-left:0}
.track[data-track="bass"] .step.active{border-color:var(--cyan);color:var(--cyan);background:rgba(0,201,255,.08)}
.track[data-track="melody"] .step.active{border-color:var(--purple);color:#d2a8ef;background:rgba(189,85,255,.08)}
.track[data-track="ambient"] .step.active{border-color:var(--pink);color:var(--pink);background:rgba(255,58,167,.08)}
.message{margin:12px 0 0;color:var(--muted);font-size:.78rem}
footer{margin-top:14px;padding:17px 4px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(0,239,157,.18);color:var(--muted);font-size:.76rem}footer div{display:flex;flex-direction:column;gap:4px}footer div span{color:var(--cyan)}footer p{margin:0}footer strong{color:var(--text)}
@media(max-width:1200px){.sphere-grid{grid-template-columns:repeat(3,1fr)}.global-controls{grid-template-columns:repeat(2,1fr)}.track{grid-template-columns:125px minmax(0,1fr)}}
@media(max-width:850px){.instrument-header{flex-direction:column;align-items:flex-start}.transport{justify-content:flex-start}.sphere-grid{grid-template-columns:repeat(2,1fr)}.track{grid-template-columns:1fr}.step-row{grid-template-columns:repeat(8,1fr)}}
@media(max-width:560px){.instrument-shell{width:min(100% - 12px,560px)}.microsite-nav{flex-wrap:wrap}.microsite-nav span{order:-1;width:100%;text-align:center}.global-controls,.sphere-grid{grid-template-columns:1fr}.transport{display:grid;grid-template-columns:repeat(2,1fr);width:100%}.transport button{width:100%}.step-row{grid-template-columns:repeat(4,1fr)}footer{flex-direction:column}}