:root { color-scheme: dark; --bg: #101211; --panel: #191c19; --edge: #343b32; --ink: #e4e8d9; --muted: #919987; --acid: #c2f65a; --orange: #fd9565; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
button, select, input { font: inherit; }
button, select { background: #252a23; color: var(--ink); border: 1px solid #444c3e; border-radius: 4px; padding: 10px 12px; }
button { cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }
button:hover { background: #39452c; border-color: var(--acid); }
button:active { transform: translateY(1px); }
button[aria-pressed="true"] { color: #10170a; background: var(--acid); border-color: var(--acid); }
button:disabled { cursor: wait; opacity: .5; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
input[type="range"] { width: 100%; accent-color: var(--acid); cursor: pointer; height: 18px; margin: 8px 0 0; }
input[type="number"] { width: 60px; padding: 7px; background: #11150e; color: var(--ink); border: 1px solid var(--edge); border-radius: 3px; }
.TopBar { min-height: 66px; padding: 14px 3.5%; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--edge); }
.BrandLink { color: var(--ink); font-size: 12px; font-weight: 800; text-decoration: none; letter-spacing: 2px; flex: 1; }
.BrandLink span { color: var(--acid); margin: 0 10px; }
.EngineStatus, .Eyebrow, .ScopeCaption, .SignalStrip, .KeyboardCaption, footer { font-family: monospace; font-size: 10px; letter-spacing: 1.2px; }
.EngineStatus { color: var(--muted); }
.EngineStatus.Active { color: var(--acid); }
main { max-width: 1700px; margin: auto; padding: 0 3.5%; }
.HeroSection { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 40px; padding: 36px 0 30px; }
.Eyebrow { color: var(--acid); margin: 0 0 12px; }
h1 { font-size: clamp(44px,6.3vw,96px); font-weight: 900; letter-spacing: -5px; line-height: .95; margin: 0; }
h1 span { color: var(--acid); font-size: 22px; vertical-align: top; letter-spacing: 0; margin-left: 10px; }
.HeroDescription { color: var(--muted); font-size: 13px; margin: 17px 0 0; }
.ScopePanel { min-width: 0; border: 1px solid var(--edge); border-radius: 5px; background: #131710; padding: 8px 14px; }
canvas { width: 100%; height: 96px; display: block; }
.ScopeCaption { display: flex; justify-content: space-between; color: var(--muted); padding: 8px 0; border-top: 1px solid #2a3324; }
.ScopeCaption span:last-child { color: var(--acid); }
.PresetBar { display: flex; align-items: center; gap: 10px; padding: 14px 0 22px; flex-wrap: wrap; }
.PresetField { display: flex; gap: 12px; align-items: center; flex: 1; }
.PresetField label, .MasterField label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.PresetField select { min-width: 200px; font-size: 12px; color: var(--acid); }
.DangerButton { color: var(--orange); }
.ErrorNotice { color: var(--orange); border: 1px solid var(--orange); padding: 12px; font-size: 12px; line-height: 1.6; }
.MasterField { width: 145px; margin-left: 10px; }
.MasterField label { display: flex; justify-content: space-between; }
.SignalStrip { display: flex; gap: 13px; color: var(--muted); border-top: 1px solid var(--edge); padding: 14px 0; overflow-x: auto; white-space: nowrap; }
.SignalStrip b { color: var(--acid); }
.RackGrid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.ModuleSection { background: var(--panel); border: 1px solid var(--edge); border-radius: 5px; overflow: hidden; }
.ModuleHeading { padding: 15px 16px; border-bottom: 1px solid var(--edge); display: flex; align-items: center; gap: 9px; }
.ModuleHeading h2 { margin: 0; font-size: 13px; letter-spacing: .5px; flex: 1; }
.ModuleNumber { color: var(--acid); font: 10px monospace; }
.ModuleHeading button { font-size: 9px; padding: 5px 7px; }
.ModuleBody { padding: 15px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.ControlField { min-width: 0; }
.ControlField label { font-size: 10px; color: #b0b7a7; display: flex; justify-content: space-between; gap: 4px; }
.ControlField output { font-family: monospace; color: var(--acid); font-size: 10px; white-space: nowrap; }
.ControlField select { width: 100%; font-size: 11px; padding: 6px; margin-top: 8px; }
.ModuleDescription { color: var(--muted); padding: 0 16px 14px; margin: 0; font-size: 10px; line-height: 1.5; }
.ModSection { border: 1px solid var(--edge); border-radius: 5px; margin-top: 22px; padding: 22px; background: #161a14; }
.SectionHeading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 22px; }
h2 { font-size: 20px; margin: 0; letter-spacing: -.5px; }
.SectionHeading h2 span { color: var(--muted); font: 10px monospace; letter-spacing: 1px; padding-left: 10px; }
.SectionHeading .Eyebrow { font-size: 9px; }
.LFOGrid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.LFOPanel { border: 1px solid var(--edge); border-radius: 4px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #1d2219; }
.LFOTitle { grid-column: 1/-1; color: var(--acid); font: bold 11px monospace; display: flex; justify-content: space-between; }
.LFOPanel select { width: 100%; min-width: 0; font-size: 11px; padding: 6px; }
.LFOPanel label { color: var(--muted); font-size: 10px; }
.LFOPanel output { color: var(--acid); float: right; }
.RouteHeader, .RouteRow { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr 36px; gap: 12px; align-items: center; }
.RouteHeader { margin: 22px 0 9px; color: var(--muted); font: 10px monospace; text-transform: uppercase; }
.RouteRow { padding: 8px 0; border-top: 1px solid #2b3425; }
.RouteRow select { min-width: 0; width: 100%; padding: 7px; font-size: 11px; }
.RouteAmount { display: flex; align-items: center; gap: 12px; }
.RouteAmount output { font: 11px monospace; color: var(--acid); width: 45px; text-align: right; }
.RouteAmount input { margin: 0; }
.SmallText { font-size: 10px; line-height: 1.6; color: var(--muted); margin-bottom: 0; }
.PlaySection { margin-top: 22px; border: 1px solid var(--edge); border-radius: 5px; padding: 22px; }
.PlayToolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.PlayToolbar > div { flex: 1; }
.PlayToolbar label { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.PlayToolbar input[type="range"] { width: 80px; margin: 0; }
.KeyboardPanel { display: flex; height: 104px; gap: 3px; position: relative; touch-action: none; user-select: none; }
.PianoKey { flex: 1; position: relative; border: 0; border-radius: 0 0 4px 4px; background: #c3c7b6; color: #414739; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 9px; font: 10px monospace; touch-action: none; }
.PianoKey.Black { background: #282e25; color: #9ca68e; height: 65%; position: absolute; top: 0; width: 4.3%; z-index: 2; border: 1px solid #0e120a; box-shadow: 0 4px 5px #0007; }
.PianoKey.Held { background: var(--acid); color: #182108; }
.KeyboardCaption { display: flex; justify-content: space-between; color: var(--muted); margin-top: 13px; line-height: 1.6; gap: 20px; }
.KeyboardCaption span:last-child { color: var(--acid); }
.GuidePanel { padding: 22px 0; font-size: 12px; color: var(--muted); }
summary { cursor: pointer; color: var(--ink); }
.GuideGrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; line-height: 1.8; }
.GuideGrid strong { color: var(--acid); display: block; }
footer { padding: 20px 0 28px; border-top: 1px solid var(--edge); display: flex; justify-content: space-between; color: #79836e; }
@media (min-width: 1500px) { .ModuleBody { gap: 22px; } }
@media (max-width: 1050px) { .RackGrid { grid-template-columns: repeat(2,minmax(0,1fr)); } .HeroSection { gap: 20px; } .LFOGrid { grid-template-columns: repeat(2,minmax(0,1fr)); } .SectionHeading h2 span { display: none; } .GuideGrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { main { padding: 0 14px; } .TopBar { padding: 12px 14px; gap: 10px; } .BrandLink { font-size: 10px; letter-spacing: 0; } .EngineStatus { display: none; } .HeroSection { grid-template-columns: 1fr; padding-top: 28px; } h1 { letter-spacing: -3px; font-size: 60px; } .ScopePanel { display: none; } .PresetField { flex-basis: 100%; } .PresetField select { flex: 1; } .RackGrid { gap: 8px; } .ModuleBody { padding: 12px; gap: 14px 10px; grid-template-columns: 1fr; } .ModuleHeading { padding: 12px 10px; gap: 6px; } .ModuleHeading h2 { font-size: 11px; } .ModSection, .PlaySection { padding: 14px; } .RouteHeader, .RouteRow { grid-template-columns: 1fr 1.4fr 32px; gap: 8px; } .RouteHeader span:nth-child(3) { display: none; } .RouteAmount { grid-column: 1/3; grid-row: 2; } .RouteRow button { grid-column: 3; grid-row: 1/3; } .PlayToolbar > div { flex-basis: 100%; } .KeyboardCaption { font-size: 8px; } .GuideGrid { grid-template-columns: 1fr; } footer { font-size: 8px; gap: 20px; } }