:root{--ap-acid:#b8ff3d;--ap-cyan:#42ddff;--ap-orange:#ff843d;--ap-silver:#dce5e8;--ap-ink:#070a0c;--ap-panel:#11171b;--ap-line:rgba(215,232,238,.18)}
html,body{min-height:100%;background:radial-gradient(circle at 50% -5%,#253139 0,#0b1013 44%,#040607 100%)!important}
.site-header,.hero,.lab-tool-nav,.sec-label,footer,.lab-mobile-notice{display:none!important}
.section{max-width:none!important;margin:0!important;padding:14px clamp(10px,2vw,28px) 34px!important}
.synth-wrap{max-width:1500px!important;margin:0 auto!important}
.device{position:relative;overflow:hidden;border:1px solid #65727a!important;border-radius:12px!important;padding:14px!important;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 6px),linear-gradient(145deg,#39454d 0,#20282e 15%,#10161a 55%,#080c0e 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 -5px 0 #030506,0 24px 55px rgba(0,0,0,.68)!important}
.device:before{content:"";position:absolute;inset:4px;pointer-events:none;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:linear-gradient(112deg,rgba(255,255,255,.13),transparent 25%,transparent 70%,rgba(0,0,0,.2))}
.device>*{position:relative;z-index:1}
.d-header{min-height:52px!important;margin:0 0 9px!important;padding:7px 10px!important;border:1px solid #050708!important;border-top-color:#526069!important;border-radius:5px!important;background:linear-gradient(#2c373e,#11181c 52%,#090d10)!important;box-shadow:inset 0 1px rgba(255,255,255,.14),0 3px 8px #000!important}
.d-brand{color:var(--ap-silver)!important;font:900 13px/1 Orbitron,Rajdhani,sans-serif!important;letter-spacing:.13em!important;text-shadow:0 1px #fff,0 3px 4px #000!important}.d-brand:after{content:" / SYNARX9 ENGINE";color:var(--ap-acid);font-size:8px}
.d-screen{border-color:#263038!important;background:#030708!important;box-shadow:inset 0 0 16px #000,0 1px rgba(255,255,255,.08)!important}.d-bpm{color:var(--ap-acid)!important;text-shadow:0 0 8px rgba(184,255,61,.55)}
.ap-pattern-bank{display:grid;grid-template-columns:auto repeat(4,44px) auto auto 1fr;gap:5px;align-items:center;margin:0 0 9px;padding:7px;border:1px solid #050708;border-top-color:#46525a;border-radius:5px;background:linear-gradient(#20292f,#0b1013);box-shadow:inset 0 1px rgba(255,255,255,.09),0 3px 7px #000}
.ap-bank-label{padding:0 8px;color:#6f7d84;font:800 8px/1 monospace;letter-spacing:.15em}
.ap-pattern,.ap-action{height:30px;border:1px solid #07090b;border-top-color:#435058;border-radius:3px;background:linear-gradient(#2a343a,#10161a);color:#76858c;font:800 9px/1 Rajdhani,sans-serif;letter-spacing:.08em;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.08),0 2px 3px #000}.ap-pattern:hover,.ap-action:hover{color:#fff}.ap-pattern.is-active{color:#0a0d0f;border-color:#d8ffa4;background:linear-gradient(#dfff9d,var(--ap-acid));box-shadow:0 0 14px rgba(184,255,61,.26)}
.ap-action{padding:0 11px}.ap-action--mutate{color:var(--ap-orange)}.ap-memory{justify-self:end;padding-right:8px;color:#56636a;font:700 7px/1 monospace;letter-spacing:.12em}
.rand-row,.pro-panel,.seq-area,.note-editor,.controls-row,.transport-row,.visual-card,.export-row{border-color:#050709!important;background:linear-gradient(145deg,rgba(34,43,49,.92),rgba(8,12,14,.96))!important;box-shadow:inset 0 1px rgba(255,255,255,.09),inset 0 -2px 5px #000,0 3px 6px rgba(0,0,0,.5)!important}
.rand-btn,.t-btn,.exp-btn,.mini-btn,.pro-control select{border-color:#06090a!important;border-top-color:#4a575e!important;background:linear-gradient(#303b42,#12191d)!important;color:#9ba8ae!important;box-shadow:inset 0 1px rgba(255,255,255,.1),0 2px 3px #000!important}.rand-btn:hover,.t-btn:hover,.exp-btn:hover{color:#fff!important;border-color:rgba(184,255,61,.5)!important}.smart-btn{color:var(--ap-acid)!important}
.step-btn{border-color:#06090a!important;background:linear-gradient(145deg,#313b41,#11171a)!important;box-shadow:inset 0 1px rgba(255,255,255,.12),0 4px 6px #000!important}.step-btn.on{border-color:rgba(184,255,61,.6)!important;background:linear-gradient(#34442f,#10190f)!important;box-shadow:inset 0 -3px rgba(184,255,61,.3),0 0 12px rgba(184,255,61,.18)!important}
.knob{filter:drop-shadow(0 5px 4px rgba(0,0,0,.65))}.knob:after{box-shadow:0 0 7px currentColor}
.visualizer-grid canvas{background:linear-gradient(#030708,#080d10)!important}.visual-live{color:var(--ap-acid)!important}
@media(max-width:820px){.section{padding:8px!important}.device{padding:8px!important}.ap-pattern-bank{grid-template-columns:auto repeat(4,1fr);}.ap-action{grid-row:2}.ap-memory{grid-column:3/-1;grid-row:2}.d-brand:after{display:none}}

/* Precision alignment: keep the six synth controls as one centered instrument block. */
.controls-row{grid-template-columns:repeat(6,88px)!important;justify-content:center!important;align-items:start!important;column-gap:clamp(24px,4vw,54px)!important;padding-left:20px!important;padding-right:20px!important}
.ctrl-group{width:88px!important;justify-self:center!important;text-align:center!important}
.ctrl-group .knob{margin-inline:auto!important}
.ctrl-label,.knob-val{width:100%!important;text-align:center!important}
@media(max-width:760px){.controls-row{grid-template-columns:repeat(3,88px)!important;column-gap:clamp(12px,6vw,34px)!important;row-gap:18px!important;padding-inline:8px!important}}
@media(max-width:390px){.controls-row{grid-template-columns:repeat(2,88px)!important}}

/* Corrected rack geometry: six equal columns contained inside the panel. */
.controls-row{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;justify-content:stretch!important;align-items:start!important;column-gap:0!important;padding:12px 18px 10px!important;overflow:hidden!important}
.ctrl-group{width:auto!important;min-width:0!important;justify-self:stretch!important;display:flex!important;align-items:center!important;text-align:center!important}
.ctrl-group .knob{flex:0 0 44px!important;margin:0 auto!important}
.ctrl-label,.knob-val{display:block!important;width:100%!important;text-align:center!important;white-space:nowrap!important}
@media(max-width:760px){.controls-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:0!important;row-gap:18px!important;padding:12px 10px!important}}
@media(max-width:390px){.controls-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Sound engine v2 controls */
.pro-panel{grid-template-columns:repeat(6,minmax(105px,1fr)) auto!important}
.pro-control select{width:100%;text-overflow:ellipsis}
@media(max-width:1050px){.pro-panel{grid-template-columns:repeat(3,minmax(0,1fr)) auto!important}.pro-actions{grid-column:auto!important}}
@media(max-width:700px){.pro-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pro-actions{grid-column:1/-1!important}}

/* Performance v3: pattern chain */
.ap-pattern-bank{grid-template-columns:auto repeat(4,44px) auto auto auto 1fr!important}
.ap-action--chain{color:#42ddff!important}
.ap-action--chain.is-active{color:#061014!important;border-color:#a5f1ff!important;background:linear-gradient(#a9f4ff,#42ddff)!important;box-shadow:0 0 14px rgba(66,221,255,.32)!important}
@media(max-width:820px){.ap-pattern-bank{grid-template-columns:auto repeat(4,1fr)!important}.ap-action--chain{grid-row:2}.ap-memory{grid-column:3/-1;grid-row:3}}

/* Structure v4: length and transpose */
.pro-panel{grid-template-columns:repeat(8,minmax(95px,1fr)) auto!important}
.step-btn.outside-length{opacity:.22!important;filter:grayscale(1)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important}
.note-cell.outside-length{opacity:.22!important;filter:grayscale(1)!important}
@media(max-width:1250px){.pro-panel{grid-template-columns:repeat(4,minmax(0,1fr)) auto!important}}
@media(max-width:820px){.pro-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pro-actions{grid-column:1/-1!important}}

/* Export v5 */
.exp-btn--midi{color:#42ddff!important;border-top-color:rgba(66,221,255,.55)!important}
.exp-btn--project{color:#b8ff3d!important;border-top-color:rgba(184,255,61,.5)!important}
.export-row{row-gap:8px!important}
@media(max-width:700px){.export-row .exp-btn{flex:1 1 145px!important}.prog-wrap{flex-basis:100%!important}}
