*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0b1722;color:#e6eef8;font-family:Arial,Helvetica,sans-serif}body{display:grid;place-items:center;min-height:100svh}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:3px}.synth{width:480px;height:480px;max-width:100vw;position:relative;padding:18px;background:linear-gradient(120deg,#18344b,#10202e);box-shadow:0 20px 80px #0006;overflow:hidden}header{height:53px;display:flex;justify-content:space-between;align-items:start}.eyebrow{font:8px monospace;letter-spacing:1.8px;color:#a8c0d8}h1{font-size:23px;letter-spacing:-.8px;margin:5px 0}h1 small{font-size:9px;letter-spacing:2px;color:#e8b83a;margin-left:5px}#power{border:1px solid #4a6a92;background:#10202e;color:#e8b83a;border-radius:50%;width:28px;height:28px}#power:disabled{color:#6a8ab2}.panel{height:340px;padding:14px;border:1px solid #4a6a92;background:repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 3px),linear-gradient(135deg,#1e3a5e,#16304e);border-radius:3px;box-shadow:inset 0 1px #ffffff15}.panel-heading{display:flex;justify-content:space-between;gap:8px;font:8px monospace;letter-spacing:1px;color:#a8c0d8}#status{color:#e8b83a;white-space:nowrap}.rack{position:relative;display:flex;gap:9px;margin-top:14px;height:126px}.module{flex:1;border:1px solid #6a8ab2;padding:10px 11px;position:relative;background:linear-gradient(130deg,#224367,#18344f);overflow:hidden}.module>span{font:8px monospace;letter-spacing:1px}.module small{display:block;font:6px monospace;letter-spacing:1px;color:#a8c0d8;margin-top:10px}.wave{font:65px/47px Georgia,serif;color:#dce8f4;letter-spacing:10px}.wave.gate{font-size:48px;line-height:47px}.jacks{display:flex;justify-content:space-between;margin:3px 1px 0}.jacks i{display:block;width:10px;height:10px;border-radius:50%;background:#071522;border:2px solid #88aacc;box-shadow:0 0 0 2px #10202e}#cables{position:absolute;inset:0;width:100%;height:126px;pointer-events:none;overflow:visible}#cables path{fill:none;stroke:#e8b83a;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 3px 1px #0007);transition:d .4s,stroke .4s}#cables #cable-b{stroke:#dce8f4;stroke-width:2.5}.patch-info{position:relative;margin-top:16px;height:59px}.patch-info .eyebrow{font-size:7px;color:#e8b83a;letter-spacing:1.3px}.patch-info h2{font-size:19px;font-weight:500;letter-spacing:-.4px;margin:5px 0 4px}.patch-info p{font:9px monospace;color:#a8c0d8;margin:0}.actions{display:flex;gap:9px;margin-top:9px}.actions button{flex:1;position:relative;height:61px;padding:10px 8px 8px 37px;text-align:left;font-size:17px;font-weight:bold;border-radius:3px;border:1px solid #e8b83a;background:#e8b83a;color:#10202e}.actions #repatch{background:#10283f;color:#e6eef8;border-color:#88aacc}.actions small{display:block;font:8px monospace;letter-spacing:0;margin-top:5px;font-weight:normal}.button-icon{position:absolute;left:11px;top:11px;font-size:22px}.hint{text-align:center;font:8px monospace;color:#a8c0d8;margin:11px 0 0;letter-spacing:.2px}footer{display:flex;align-items:center;justify-content:space-between;height:51px}footer>span{font:7px/1.7 monospace;letter-spacing:1px;color:#a8c0d8}footer a{background:#e8b83a;color:#10202e;text-decoration:none;font-size:11px;font-weight:bold;padding:11px 12px;border-radius:2px}#overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#244a6ef5,#10202efa 70%);text-align:center}#overlay[hidden]{display:none}.orbit{font-size:63px;color:#e8b83a;line-height:1;margin:26px 0 10px}#overlay h2{font-size:34px;font-weight:500;line-height:1.12;letter-spacing:-1px;margin:10px 0 24px}#start{border:0;background:#e8b83a;color:#10202e;border-radius:3px;padding:16px 25px;font-size:17px;box-shadow:0 5px 25px #0004}#start span{margin-left:10px}#start-hint{font:10px monospace;color:#a8c0d8;max-width:85%;line-height:1.5;margin-top:19px}#probe{position:absolute;z-index:8;top:2px;left:2px;font:9px/1.4 monospace;background:#000e;color:#b9ffca;padding:7px;pointer-events:none;margin:0}.synth.playing .jacks i:first-child{background:#e8b83a;box-shadow:0 0 8px #e8b83a66}.synth.playing .wave{animation:breathe 2s ease-in-out infinite alternate}@keyframes breathe{to{opacity:.45}}@media(prefers-reduced-motion:reduce){.synth.playing .wave{animation:none}#cables path{transition:none}}@media(max-width:400px){.synth{padding:18px 12px}h1{font-size:20px}.panel{padding:12px 10px}.panel-heading{font-size:7px;letter-spacing:.5px}.actions button{font-size:16px;padding-left:32px}.actions small{font-size:6.5px}.button-icon{left:8px}.module>span{font-size:7px}.module small{font-size:5px;letter-spacing:.5px}footer a{font-size:10px;padding:11px 8px}}
/* Abstract signal field: eight native modules, three performance macros. */
.signal-field{position:relative;height:112px;margin-top:10px;border:1px solid #4a6a92;background:radial-gradient(ellipse at center,#264b70,#10283f);overflow:hidden}.signal-field #cables{inset:0;height:112px}.signal-field .field-label{position:absolute;top:9px;left:11px;font:7px monospace;letter-spacing:1px;color:#a8c0d8;z-index:1}.signal-field #active-count{position:absolute;bottom:9px;left:11px;font:7px monospace;letter-spacing:1px;color:#e8b83a}.signal-field #cables path{stroke-width:2;stroke:#e8b83a;opacity:var(--signal,.5);transition:opacity .1s;stroke-dasharray:5 3}.signal-field #cables path:nth-child(2){stroke:#dce8f4}.signal-field #cables path:nth-child(3){stroke:#88aacc}.signal-field #cables circle{fill:#10202e;stroke:#dce8f4;stroke-width:2}.playing .signal-field #cables path{animation:signal-flow 1.6s linear infinite}.playing .signal-field #cables path:nth-child(2){animation-direction:reverse}.patch-info{height:41px;margin-top:7px}.patch-info h2{font-size:17px;margin:3px 0}.patch-info #module-list{font:7px monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a8c0d8;margin:0}.patch-info .eyebrow{font-size:7px}.macros{display:flex;justify-content:space-around;gap:7px;margin-top:8px;height:65px}.macros label{position:relative;width:105px;display:flex;align-items:center;flex-direction:column;font:7px monospace;letter-spacing:1px;color:#a8c0d8}.dial{display:block;position:relative;width:35px;height:35px;border-radius:50%;border:2px solid #88aacc;background:radial-gradient(circle at 30% 20%,#f5faff,#dce8f4 45%,#8da6bf);box-shadow:1px 3px 5px #0007;transform:rotate(var(--angle,0deg));margin-bottom:5px}.dial:after{content:'';position:absolute;left:14px;top:2px;width:2px;height:11px;background:#16304e}.macros input{position:absolute;top:0;left:0;width:100%;height:44px;opacity:.001;cursor:ew-resize;touch-action:none}.macros label:focus-within .dial{outline:2px solid #e8b83a;outline-offset:2px}.macros output{font:7px monospace;letter-spacing:0;color:#e8b83a;position:absolute;right:8px;top:14px}.actions{margin-top:7px}.actions button{height:55px}.actions small{font-size:7px}@keyframes signal-flow{to{stroke-dashoffset:-32}}@media(prefers-reduced-motion:reduce){.playing .signal-field #cables path{animation:none}}@media(max-width:400px){.macros label{font-size:6px}.macros output{right:1px}.panel{padding-top:14px}}
.history-controls{position:absolute;right:0;top:0;display:grid;grid-template-columns:27px 27px;gap:3px 4px;text-align:center}.history-controls button{width:27px;height:25px;padding:0;border:1px solid #88aacc;border-radius:3px;background:#10283f;color:#e6eef8;font-size:17px;line-height:1}.history-controls button:disabled{opacity:.25;cursor:default}.history-controls span{grid-column:1/3;font:6px monospace;color:#a8c0d8;letter-spacing:1px}.patch-info h2{max-width:calc(100% - 65px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.signal-field #cables path:nth-child(4){stroke:#cf9b1a}.signal-field #cables path:nth-child(5){stroke:#88aacc}.signal-field #cables path:nth-child(6){stroke:#dce8f4}.signal-field #cables path[data-domain=control]{stroke-dasharray:2 5;stroke-width:1.5}footer a{font-size:10px}
.signal-field #active-count{left:auto;bottom:auto;right:9px;top:9px;font-size:6px;letter-spacing:.7px}.history-controls{grid-template-columns:30px 30px}.history-controls button{width:30px;height:27px}.patch-info h2{max-width:calc(100% - 72px)}

/* Six miniature modules; delay and reverb remain in the audio graph. */
.signal-field{height:128px}.signal-field #cables{height:128px;z-index:2}
#mini-rack{position:absolute;inset:24px 8px 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:40px 40px;gap:13px 12px}
.mini-module{border:1px solid #6484a4;border-radius:2px;background:linear-gradient(135deg,#284c6b,#18344b);text-align:center;padding:4px 3px 10px;box-shadow:inset 0 1px #ffffff18}
.mini-module span{display:block;font:11px/12px Arial,Helvetica,sans-serif;color:#e6eef8;max-width:100px;margin:auto}
.patch-info{height:41px}.macros{margin-top:8px;height:49px}
.patch-info #module-list[hidden]{display:none}