:root{
  --bg:#07090f;
  --panel:#10141f;
  --ink:#f8fbff;
  --muted:#c3cbdb;
  --soft:#eef5ff;
  --line:rgba(255,255,255,.2);
  --hot:#00e5ff;
  --pink:#ff2bd6;
  --green:#9cff00;
  --accent:#00e5ff;
  --touch:58px;
  --radius:24px;
  --shadow:0 0 30px color-mix(in srgb,var(--accent) 28%, transparent);
}
*{box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;min-height:100%;background:#07090f;color:var(--ink);font-family:Bahnschrift,'Arial Narrow',Arial,sans-serif}
body{background-image:radial-gradient(circle at 20% 0,color-mix(in srgb,var(--accent) 12%, transparent),transparent 32%),linear-gradient(180deg,#05070c,#10131c 48%,#05070c);overflow-x:hidden;line-height:1.5}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.04;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(255,255,255,.42) 3px)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button,.btn,.transport-btn,.pad,.launch-clip,.mini-key,.seq-step,.wave-slice{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.wrap{width:min(1220px,calc(100% - 32px));margin:0 auto}
header{position:sticky;top:0;z-index:20;background:rgba(7,9,15,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;flex-wrap:wrap}
.brand{font-weight:950;text-transform:uppercase;letter-spacing:.08em;font-size:1.08rem}
.rainbow{background:linear-gradient(90deg,#ff3131,#ff9f1c,#fff500,#9cff00,#00e5ff,#5865ff,#d946ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.links{display:flex;gap:10px;flex-wrap:wrap}
.btn,.links a,.transport-btn{border:1px solid var(--line);border-radius:16px;padding:12px 16px;background:rgba(255,255,255,.06);font-weight:950;text-transform:uppercase;letter-spacing:.045em;display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);cursor:pointer;transition:.18s ease;color:var(--ink)}
.btn:hover,.links a:hover,.btn:focus-visible,.links a:focus-visible,.transport-btn:hover,.transport-btn:focus-visible{border-color:var(--accent);box-shadow:var(--shadow);filter:brightness(1.12)}
.hero{padding:50px 0 26px}
.kicker{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:10px 14px;color:var(--soft);font-weight:950;text-transform:uppercase;letter-spacing:.09em;background:rgba(255,255,255,.055);font-size:.86rem}
h1{margin:16px 0 12px;font-size:clamp(3.1rem,10vw,7.8rem);line-height:.84;letter-spacing:-.06em;text-transform:uppercase;text-wrap:balance}
p{color:var(--muted);line-height:1.58;font-size:1.1rem;max-width:860px}.hero p{font-size:clamp(1.12rem,2vw,1.35rem);color:var(--soft)}
.machine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 0 40px;content-visibility:auto;contain-intrinsic-size:920px}
.card{position:relative;min-height:290px;border:1px solid var(--accent);border-radius:26px;overflow:hidden;background:rgba(255,255,255,.05);contain:layout paint;transition:.18s ease;box-shadow:0 0 0 1px rgba(255,255,255,.035)}
.card img{width:100%;display:block;aspect-ratio:1;object-fit:cover}.card-body{padding:16px}.card h2{margin:0 0 4px;font-size:1.34rem;text-transform:uppercase;line-height:1.05}.card small{color:var(--muted);font-weight:900;font-size:.98rem}.card:hover{transform:translateY(-3px) scale(1.012);box-shadow:0 0 32px color-mix(in srgb,var(--accent) 35%, transparent)}
.machine-page{display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:clamp(24px,4vw,36px);align-items:start;padding:34px 0 52px}.tile-preview{border:1px solid var(--accent);border-radius:28px;overflow:hidden;background:#0c1018;contain:layout paint;box-shadow:var(--shadow)}.tile-preview img{width:100%;display:block}.panel{border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.062);padding:clamp(22px,3vw,34px);contain:layout paint;box-shadow:0 18px 42px rgba(0,0,0,.24)}
.machine-transport{display:grid;gap:18px;margin:22px 0 24px;padding:20px;border:1px solid var(--line);border-radius:24px;background:rgba(0,0,0,.25)}
.transport-readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.transport-readouts span{padding:15px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;gap:7px;min-height:76px}.transport-readouts strong{font-size:.82rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}.transport-readouts b{font-size:clamp(1.25rem,2vw,1.8rem);line-height:1}.signal-scope{width:100%;height:auto;min-height:112px;border:1px solid color-mix(in srgb,var(--accent) 45%, var(--line));border-radius:18px;background:#071019;box-shadow:inset 0 0 22px rgba(0,0,0,.45),0 0 20px color-mix(in srgb,var(--accent) 18%, transparent)}
.transport-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.transport-btn.on{background:var(--accent);color:#05070c;border-color:var(--accent)}.slider-row{display:grid;grid-template-columns:1fr 1fr minmax(190px,.7fr);gap:14px}.slider-row label{display:grid;gap:9px;font-weight:950;text-transform:uppercase;font-size:.9rem;letter-spacing:.08em;color:var(--soft)}.slider-row input,.slider-row select{width:100%;accent-color:var(--accent);background:#0c1018;color:var(--ink);border:1px solid var(--line);border-radius:14px;min-height:var(--touch);padding:0 12px;font-weight:850}.machine-hint{margin:0;font-size:1.04rem;line-height:1.56;max-width:none;color:var(--muted)}
.control-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.pad{position:relative;overflow:hidden;min-height:clamp(108px,14vw,142px);border:2px solid var(--accent);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));color:var(--ink);font-weight:950;text-transform:uppercase;cursor:pointer;user-select:none;letter-spacing:.045em;font-size:clamp(1.05rem,2.25vw,1.45rem);line-height:1.05;transition:transform .08s ease,filter .15s ease,box-shadow .18s ease;padding:18px}.pad::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.18),transparent 40%);pointer-events:none}.pad.sample-loaded::before,.pad.sample-recorded::before{content:'BANK';position:absolute;right:8px;top:8px;z-index:2;font-size:.66rem;letter-spacing:.08em;border:1px solid currentColor;border-radius:999px;padding:3px 7px;background:rgba(0,0,0,.58)}.pad.sample-recorded::before{content:'REC';color:#ff2bd6;background:rgba(0,0,0,.72)}.pad.on,.pad:active{background:var(--accent);color:#05070c;transform:scale(.975);box-shadow:0 0 24px color-mix(in srgb,var(--accent) 68%, transparent)}.clock-running .pad{animation:pulseGlow 2.2s infinite alternate}
.status{display:grid;gap:11px;margin-top:18px}.status div{padding:14px 16px;border:1px solid var(--line);border-radius:16px;color:var(--muted);background:rgba(0,0,0,.14);font-size:1.02rem}.footer{border-top:1px solid var(--line);padding:26px 0 44px;text-align:center;color:var(--muted)}
.machine-module{margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.2));box-shadow:inset 0 0 30px rgba(255,255,255,.035)}.module-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px;text-transform:uppercase;letter-spacing:.08em}.module-head strong{font-size:1.14rem}.module-head span{color:var(--muted);font-size:.88rem;font-weight:950}.module-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.module-actions .transport-btn{min-height:58px}.module-actions .transport-btn.on{background:var(--accent);color:#05070c}
.sequencer-grid{display:grid;grid-template-columns:repeat(16,1fr);gap:6px;align-items:stretch}.seq-step{min-height:32px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.05);cursor:pointer}.seq-step:nth-child(4n+1){border-color:color-mix(in srgb,var(--accent) 38%, rgba(255,255,255,.16))}.seq-step.armed{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%, transparent)}.seq-step.playing{outline:2px solid #fff;filter:brightness(1.6)}
.xy-pad{position:relative;min-height:260px;border:1px solid var(--accent);border-radius:24px;overflow:hidden;touch-action:none;background:radial-gradient(circle at calc(var(--x,50)*1%) calc(var(--y,50)*1%),color-mix(in srgb,var(--accent) 35%, transparent),transparent 34%),linear-gradient(135deg,rgba(255,43,214,.2),rgba(0,229,255,.14),rgba(156,255,0,.12))}.xy-pad::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:30px 30px}.xy-cursor{position:absolute;width:32px;height:32px;border:2px solid #fff;border-radius:999px;transform:translate(-50%,-50%);box-shadow:0 0 20px var(--accent),0 0 34px var(--pink);z-index:2}.xy-label{position:absolute;z-index:2;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:rgba(0,0,0,.48);border:1px solid var(--line);border-radius:999px;padding:7px 10px}.xy-label.x{left:12px;bottom:12px}.xy-label.y{right:12px;top:12px}
.wave-strip{display:grid;grid-template-columns:repeat(16,1fr);gap:7px;align-items:end;min-height:150px;padding:14px;border-radius:20px;border:1px solid var(--line);background:rgba(0,0,0,.25)}.wave-slice{align-self:end;min-height:var(--h);border:1px solid var(--accent);border-radius:11px;background:linear-gradient(180deg,var(--accent),rgba(255,255,255,.06));opacity:.85;cursor:pointer}.wave-slice.playing,.wave-slice:hover{filter:brightness(1.55);box-shadow:0 0 16px var(--accent)}
.launch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.launch-clip{min-height:92px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.05);color:var(--ink);font-weight:950;text-transform:uppercase;cursor:pointer;text-align:left}.launch-clip strong{display:block;font-size:1.05rem}.launch-clip span{display:block;height:7px;margin-top:14px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}.launch-clip span::before{content:'';display:block;height:100%;width:32%;background:var(--accent);transform:translateX(-100%)}.launch-clip.armed{border-color:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%, transparent)}.launch-clip.playing span::before{animation:clipProgress .55s linear}
.macro-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.macro-grid label{display:grid;gap:10px;padding:15px;border:1px solid var(--line);border-radius:18px;text-transform:uppercase;font-weight:950;color:var(--soft);background:rgba(0,0,0,.18)}.macro-grid input{width:100%;accent-color:var(--accent)}.mini-keys{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;min-height:140px;align-items:stretch}.mini-key{border:1px solid var(--line);border-bottom-width:6px;border-radius:0 0 14px 14px;background:#f8fbff;color:#05070c;font-size:1.35rem;font-weight:950;cursor:pointer}.mini-key:nth-child(even){background:#141824;color:#f8fbff;min-height:96px}.mini-key.armed{background:var(--accent);box-shadow:0 0 18px var(--accent)}
.sampler-drop{display:grid;gap:8px;min-height:124px;place-items:center;text-align:center;border:1px dashed var(--accent);border-radius:20px;background:rgba(0,229,255,.06);padding:20px}.sampler-drop strong{text-transform:uppercase;letter-spacing:.08em;font-size:1.08rem}.sampler-drop span{color:var(--muted);font-size:1.02rem}.recorder-module{border-color:color-mix(in srgb,var(--pink) 50%, var(--line));background:linear-gradient(180deg,rgba(255,43,214,.08),rgba(0,0,0,.18))}.recorder-bay{display:grid;grid-template-columns:1fr 240px;gap:14px;align-items:center}.recorder-bay div{display:grid;gap:7px}.recorder-bay strong{text-transform:uppercase;letter-spacing:.08em}.recorder-bay span{color:var(--muted)}.recorder-bay select{width:100%;min-height:58px;border:1px solid var(--line);border-radius:16px;background:#0c1018;color:var(--ink);padding:0 12px;font-weight:950}
.pad-memory{border-color:color-mix(in srgb,var(--green) 55%,var(--line));background:linear-gradient(180deg,rgba(156,255,0,.08),rgba(0,0,0,.2))}.pad-memory-box{display:grid;gap:10px;place-items:center;min-height:126px;border:1px dashed var(--green);border-radius:22px;background:rgba(156,255,0,.075);padding:20px;text-align:center}.pad-memory-box strong{text-transform:uppercase;letter-spacing:.08em;font-size:1.22rem}.pad-memory-box span{color:var(--soft);font-size:1.06rem}.pad-memory-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 0;padding:0;list-style:none}.pad-memory-steps li{border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.18);padding:12px;color:var(--muted);font-weight:850}.pad-memory-steps b{display:block;color:var(--green);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}.pad-memory-row{display:grid;grid-template-columns:minmax(190px,.8fr) 1.2fr;gap:14px;margin-top:14px}.pad-memory-row select,.pad-memory-row input{width:100%;min-height:58px;border:1px solid var(--line);border-radius:16px;background:#0c1018;color:var(--ink);padding:10px 12px;font-weight:950}.pad.local-pad::before{content:'LOCAL';position:absolute;right:8px;top:8px;z-index:4;font-size:.66rem;border:1px solid var(--green);border-radius:999px;padding:3px 7px;color:var(--green);background:rgba(0,0,0,.72)}
@keyframes pulseGlow{from{filter:brightness(1)}to{filter:brightness(1.08)}}@keyframes clipProgress{from{transform:translateX(-100%)}to{transform:translateX(310%)}}
@media(max-width:900px){html{font-size:17px}.machine-grid{grid-template-columns:repeat(2,1fr)}.machine-page{grid-template-columns:1fr}.control-grid,.transport-controls{grid-template-columns:repeat(2,1fr)}.transport-readouts,.slider-row,.recorder-bay{grid-template-columns:1fr 1fr}.links{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.btn,.links a{width:100%}.macro-grid,.launch-grid,.pad-memory-steps{grid-template-columns:repeat(2,1fr)}.sequencer-grid{gap:5px}.seq-step{min-height:30px}.tile-preview{max-width:520px}}
@media(max-width:560px){html{font-size:16.5px}.wrap{width:min(100% - 20px,1220px)}.machine-grid{grid-template-columns:1fr}h1{font-size:clamp(3rem,18vw,5.1rem)}header{position:relative}.hero{padding-top:26px}.links,.transport-readouts,.slider-row,.transport-controls,.control-grid,.module-actions,.macro-grid,.launch-grid,.recorder-bay,.pad-memory-row,.pad-memory-steps{grid-template-columns:1fr}.panel{padding:18px;border-radius:22px}.machine-transport,.machine-module{padding:16px;border-radius:20px}.pad{min-height:96px;font-size:1.14rem}.sequencer-grid{grid-template-columns:repeat(8,1fr)}.xy-pad{min-height:210px}.mini-keys{grid-template-columns:repeat(4,1fr)}.card{min-height:0}.transport-btn,.btn,.links a{min-height:56px}.status div{font-size:1rem}.pad-memory-box{min-height:118px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* MATTBEAR loud/readable pickup pass */
:root{--touch:68px;--shadow:0 0 42px color-mix(in srgb,var(--accent) 42%, transparent)}
body{background-image:radial-gradient(circle at 14% 0,color-mix(in srgb,var(--pink) 18%, transparent),transparent 31%),radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--accent) 20%, transparent),transparent 30%),linear-gradient(180deg,#04050a,#121621 48%,#05070c)}
body::before{opacity:.075}
.kicker{font-size:.98rem;border-width:2px;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 25%,transparent)}
.hero p,.machine-hint,.status div,.pad-memory-box span,.pad-memory-steps li{color:#f4f8ff}
.card{border-width:2px;box-shadow:0 0 26px color-mix(in srgb,var(--accent) 20%,transparent),inset 0 0 20px rgba(255,255,255,.05)}
.card h2{font-size:1.55rem}.card small{font-size:1.08rem;color:#eef5ff}
.panel,.machine-transport,.machine-module{border-width:2px;box-shadow:0 0 36px color-mix(in srgb,var(--accent) 22%,transparent),0 18px 42px rgba(0,0,0,.34)}
.transport-readouts span{border-width:2px;background:rgba(255,255,255,.07)}
.transport-readouts strong{font-size:.92rem;color:#fff}.transport-readouts b{font-size:clamp(1.55rem,2.7vw,2.25rem);text-shadow:0 0 14px var(--accent)}
.btn,.links a,.transport-btn{min-height:68px;font-size:1.02rem;border-width:2px;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 16%,transparent)}
.transport-btn.on,.btn:hover,.links a:hover,.transport-btn:hover{filter:brightness(1.22) saturate(1.2);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 45%,transparent)}
.control-grid{gap:18px}.pad{min-height:clamp(132px,16vw,172px);border-width:3px;font-size:clamp(1.28rem,3vw,1.85rem);letter-spacing:.06em;text-shadow:0 0 12px currentColor;box-shadow:0 0 24px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 0 28px rgba(255,255,255,.12)}
.pad::before{font-size:.76rem}.pad::after{background:linear-gradient(to bottom,rgba(255,255,255,.26),transparent 42%)}
.pad.on,.pad:active{transform:scale(.95);filter:brightness(1.85) saturate(1.35);box-shadow:0 0 40px var(--accent),0 0 72px color-mix(in srgb,var(--pink) 42%,transparent),inset 0 0 34px rgba(255,255,255,.28)}
.signal-scope{min-height:148px;border-width:2px;box-shadow:inset 0 0 26px rgba(0,0,0,.5),0 0 34px color-mix(in srgb,var(--accent) 32%,transparent)}
.module-head strong{font-size:1.32rem}.module-head span{font-size:1rem;color:#fff;text-shadow:0 0 10px var(--accent)}
.easy-play-card{border-width:3px!important;box-shadow:0 0 38px color-mix(in srgb,var(--green) 30%,transparent),inset 0 0 25px rgba(255,255,255,.08)!important}
.easy-play-card strong{font-size:clamp(1.7rem,4vw,2.6rem)!important}.easy-play-card p{font-size:1.24rem!important;color:#fff!important}
.easy-play-list li{font-size:1.08rem!important;color:#fff!important;border-width:2px!important}.easy-play-note{font-size:1.14rem!important}
.pad-memory-box{border-width:2px}.pad-memory-box strong{font-size:1.45rem;text-shadow:0 0 12px var(--green)}
.pad-memory-row select,.pad-memory-row input,.slider-row input,.slider-row select,.recorder-bay select{min-height:68px;font-size:1.06rem;border-width:2px}
@keyframes pulseGlow{from{filter:brightness(1.06) saturate(1.08)}to{filter:brightness(1.24) saturate(1.3);box-shadow:0 0 36px color-mix(in srgb,var(--accent) 52%,transparent)}}
@media(max-width:560px){html{font-size:18px}.pad{min-height:124px;font-size:1.35rem}.transport-readouts span{min-height:86px}.signal-scope{min-height:128px}.machine-page{padding-top:18px}.hero p{font-size:1.18rem}.links a{font-size:1rem}}

/* OG MATTMACHINE skin pass: compact mobile sampler feel */
html,body{font-family:Impact,Haettenschweiler,'Arial Narrow Bold','Arial Narrow',Arial,sans-serif;background:#020106}
body{background:radial-gradient(circle at top,rgba(255,43,214,.24),transparent 36%),radial-gradient(circle at bottom,rgba(0,234,255,.18),transparent 38%),#020106;letter-spacing:.01em}
.wrap{width:min(100% - 24px,1120px)}
body .machine-page{display:flex;flex-direction:column;width:min(100% - 24px,620px);margin:0 auto;padding:16px 0 38px;gap:14px}
body .machine-page.wrap{width:min(100% - 24px,620px)}
body .tile-preview{width:100%;max-height:210px;border:2px solid var(--pink);border-radius:28px;background:#000;box-shadow:0 0 28px rgba(255,43,214,.45),inset 0 0 30px rgba(255,43,214,.12)}
body .tile-preview img{height:210px;object-fit:cover;object-position:center}
body .panel{padding:16px;border-radius:26px;background:linear-gradient(180deg,rgba(0,0,0,.86),rgba(18,8,32,.92));border:2px solid rgba(255,255,255,.18);box-shadow:0 0 24px rgba(255,43,214,.28),inset 0 0 28px rgba(255,255,255,.05)}
body h1{font-size:clamp(2.75rem,12vw,4.7rem);letter-spacing:.01em;line-height:.86;margin:10px 0 8px;text-shadow:0 0 18px var(--accent),0 0 26px rgba(255,43,214,.35)}
body .kicker{border-color:var(--cyan,#00eaff);color:#00eaff;background:rgba(0,0,0,.55);border-radius:14px;text-shadow:0 0 10px #00eaff;letter-spacing:.12em}
body .machine-transport,body .machine-module,body .control-panel{background:rgba(12,10,24,.9);border-radius:24px;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 0 20px rgba(255,255,255,.06)}
body .transport-readouts{grid-template-columns:repeat(4,1fr);gap:8px}
body .transport-readouts span{min-height:66px;padding:10px;border-radius:14px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);text-align:center}
body .transport-readouts strong{font-size:.78rem;color:#dfe7ff}body .transport-readouts b{font-size:1.42rem;color:#fff;text-shadow:0 0 12px var(--accent)}
body .transport-controls,body .module-actions{gap:8px}
body .transport-btn,body .links a{border-radius:14px;border:2px solid #00eaff;background:rgba(0,0,0,.55);color:white;font-weight:900;letter-spacing:.08em;min-height:58px;text-shadow:0 0 8px currentColor;box-shadow:0 0 16px rgba(0,234,255,.24)}
body .transport-btn.on{border-color:#ff2bd6;background:linear-gradient(135deg,#ff006e,#ff5ecf);box-shadow:0 0 30px rgba(255,43,214,.56);color:#fff}
body .control-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
body .pad{min-height:92px;border-radius:18px;border:3px solid currentColor;background:rgba(0,0,0,.72);font-size:clamp(1rem,5vw,1.42rem);font-weight:900;line-height:1.05;text-shadow:0 0 8px currentColor;box-shadow:0 0 16px currentColor,inset 0 0 20px rgba(255,255,255,.08);color:white;padding:10px;letter-spacing:.04em}
body .control-grid .pad:nth-child(1){color:#ff9d00}body .control-grid .pad:nth-child(2){color:#ff3131}body .control-grid .pad:nth-child(3){color:#ffe600}body .control-grid .pad:nth-child(4){color:#8b31ff}body .control-grid .pad:nth-child(5){color:#39ff14}body .control-grid .pad:nth-child(6){color:#3a86ff}body .control-grid .pad:nth-child(7){color:#ff2bd6}body .control-grid .pad:nth-child(8){color:#00eaff}
body .pad.on,body .pad:active{background:rgba(0,0,0,.86);color:currentColor;transform:scale(.95);filter:brightness(1.65);box-shadow:0 0 30px currentColor,inset 0 0 26px rgba(255,255,255,.16)}
body .signal-scope{min-height:96px;border-radius:16px;border:2px solid rgba(0,234,255,.55);box-shadow:0 0 20px rgba(0,234,255,.2),inset 0 0 20px rgba(0,0,0,.45)}
body .status{margin-top:14px;gap:8px}body .status div{border-radius:14px;padding:12px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);font-size:.98rem;color:#eaf6ff;letter-spacing:.04em}
body .pad-memory,body .recorder-module{border-color:rgba(255,43,214,.45);background:linear-gradient(180deg,rgba(255,43,214,.08),rgba(0,0,0,.25))}
body .pad-memory-box{border:2px dashed #39ff14;background:rgba(57,255,20,.08);border-radius:20px}body .pad-memory-box strong{font-size:1.28rem;color:#fff;text-shadow:0 0 12px #39ff14}
body .pad-memory-steps{grid-template-columns:repeat(2,1fr);gap:8px}body .pad-memory-steps li{font-size:.98rem;background:rgba(0,0,0,.5);border-radius:14px;color:#fff}
body .slider-row input,body .macro-grid input{accent-color:#ff2bd6}body .slider-row select,body .pad-memory-row select,body .pad-memory-row input,body .recorder-bay select{background:#070511;border:2px solid rgba(0,234,255,.45);border-radius:14px;color:#fff;min-height:56px}
@media(min-width:900px){body .machine-grid{grid-template-columns:repeat(4,1fr)}body .machine-page{width:min(100% - 24px,680px)}}
@media(max-width:560px){body .wrap{width:min(100% - 18px,620px)}body .machine-page,body .machine-page.wrap{width:min(100% - 18px,560px);padding-top:10px}body .tile-preview img{height:170px}body .control-grid{gap:8px}body .pad{min-height:84px;font-size:clamp(.95rem,5.1vw,1.18rem)}body .transport-readouts{gap:6px}body .transport-readouts span{min-height:60px;padding:8px 5px}body .transport-readouts b{font-size:1.08rem}body .pad-memory-steps{grid-template-columns:1fr}}