:root{--bg: #080a0e;--panel: #12151c;--panel2: #0d1016;--line: #242a35;--fg: #e7ecf3;--dim: #7d8899;--accent: #4ad6a0;--warn: #ff4d4d;--clutch: #5aa9ff;--brake: #ff6b5a;--throttle: #4ad6a0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:var(--bg);color:var(--fg);overscroll-behavior:none}body{touch-action:none;user-select:none;-webkit-user-select:none}.app{min-height:100vh;min-height:100dvh;touch-action:pan-y;display:flex;flex-direction:column;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 8px);max-width:560px;margin:0 auto}.head{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;letter-spacing:.12em;color:var(--dim);flex:none}.title{color:var(--accent)}.cluster{flex:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 8px 2px}.clusterSvg{width:100%;max-height:min(232px,30vh);height:auto;display:block}.dialTick{fill:#aab3c0;font-size:10px;font-family:inherit}.dialUnit{fill:var(--dim);font-size:8px;letter-spacing:.12em;font-family:inherit}.dialDigits{fill:var(--dim);font-size:11px;font-family:inherit;font-variant-numeric:tabular-nums}.dialDigitsBig{fill:var(--fg);font-size:18px;font-family:inherit;font-variant-numeric:tabular-nums}.gearNum{fill:var(--accent);font-size:34px;font-weight:700;font-family:inherit}.gearNum.stalled{fill:var(--warn)}.readout{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex:none}.readoutToggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;color:var(--dim);font:inherit;font-size:11px;letter-spacing:.14em;padding:9px 12px;cursor:pointer}.readout:not(.collapsed) .readoutToggle{border-bottom:1px solid var(--line)}.readoutBody{padding:10px 12px 12px}.kv{width:100%;border-collapse:collapse;font-size:11px}.kv td{padding:2px 0;font-variant-numeric:tabular-nums}.kv td:first-child{color:var(--dim);width:42%}.events{font-size:11px;border-top:1px solid var(--line);margin-top:8px;padding-top:8px;min-height:72px;max-height:130px;overflow:hidden}.eventsTitle{color:var(--accent);letter-spacing:.14em;margin-bottom:4px}.dim{color:var(--dim);font-variant-numeric:tabular-nums}.dim.bad{color:var(--warn)}.stageArea{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-height:0}.shifterWrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;align-items:center;justify-content:center}.gate{width:100%;height:auto;max-height:190px;display:block}.gateLabel{fill:#0a0d12;font-size:13px;font-weight:700;font-family:inherit;opacity:.75}.gateLabel.on{fill:var(--accent);opacity:1}.controls{display:flex;flex-direction:column;gap:10px}.pedals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pedal{text-align:center}.pedalBody{position:relative;height:124px;border-radius:9px;background:linear-gradient(180deg,#171b23,#0c0f14);border:1px solid var(--line);overflow:hidden;box-shadow:inset 0 1px #ffffff0d}.pedalBody.held{border-color:var(--tone);box-shadow:0 0 0 2px color-mix(in srgb,var(--tone) 45%,transparent),inset 0 1px #ffffff14}.pedalFill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 80%,transparent),var(--tone));opacity:.85}.pedalTread{position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 11px);pointer-events:none}.pedalName{margin-top:5px;font-size:10px;letter-spacing:.12em;color:var(--fg)}.pedalBody.held+.pedalName{color:var(--tone)}.pedalKey{font-size:9px;color:var(--dim);margin-top:1px}.pedalValue{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;margin-top:1px}.keycaps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.keycap{min-width:30px;height:30px;padding:0 7px;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:7px;color:var(--dim);background:linear-gradient(180deg,#1a1f28,#11151b);border:1px solid var(--line);box-shadow:0 2px #090c11}.keycap.lit{color:#06251a;background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(1px);box-shadow:0 1px #090c11}@media (max-height: 580px){.clusterSvg{max-height:148px}.gate{max-height:136px}.pedalBody{height:86px}.keycap{height:26px}.events{min-height:0;max-height:96px}}@media (orientation: landscape) and (max-height: 540px){.app{display:grid;max-width:none;gap:6px 10px;grid-template-columns:1fr 1.05fr 1fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"head head head" "controls cluster gate";padding:calc(env(safe-area-inset-top) + 4px) calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 4px) calc(env(safe-area-inset-left) + 10px)}.head{grid-area:head;font-size:10px}.cluster{grid-area:cluster;display:flex;align-items:center;padding:4px}.clusterSvg{max-height:100%}.readout{display:none}.stageArea{display:contents}.controls{grid-area:controls;min-height:0}.shifterWrap{grid-area:gate;min-height:0;padding:6px}.gate{max-height:100%}.pedals{flex:1 1 auto;min-height:0}.pedal{display:flex;flex-direction:column;min-height:0}.pedalBody{height:auto;flex:1 1 auto;min-height:0}.pedalKey,.pedalValue,.keycaps{display:none}}@media (min-width: 760px){.app{max-width:1100px}.stageArea{flex-direction:row;align-items:stretch}.controls{order:1;flex:1 1 46%;justify-content:center}.shifterWrap{order:2;flex:1 1 54%}.gate{max-height:320px}.pedalBody{height:150px}}.headControls{display:flex;align-items:center;gap:6px}.iconBtn{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:7px;font:inherit;font-size:10px;letter-spacing:.08em;padding:3px 7px;cursor:pointer}.iconBtn.off{color:var(--warn);border-color:var(--warn)}.volume{width:70px;accent-color:var(--accent)}.audioGate{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#040609d1;backdrop-filter:blur(2px);cursor:pointer}.audioGateInner{text-align:center;padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.audioGateTitle{font-size:13px;letter-spacing:.1em;color:var(--accent)}.audioGateHint{margin-top:6px;font-size:10px;color:var(--dim)}.audioGateBtn{margin-top:12px;padding:9px 20px;border-radius:9px;border:1px solid var(--accent);background:var(--accent);color:#06251a;font:inherit;font-size:12px;letter-spacing:.12em;cursor:pointer;touch-action:manipulation}.panel{position:fixed;z-index:50;right:0;top:0;bottom:0;width:min(360px,94vw);background:#0b0e13;border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-14px 0 40px #0000008c}.panelHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.14em;color:var(--accent);flex:none}.panelActions{display:flex;gap:5px}.panelActions button{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:6px;font:inherit;font-size:10px;padding:3px 6px;cursor:pointer}.panelBody{overflow-y:auto;padding:10px 12px 24px;flex:1 1 auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}.panelGroup{margin-bottom:14px}.panelGroup h3{margin:0 0 6px;font-size:10px;letter-spacing:.16em;color:var(--fg);text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:4px}.slider{display:block;margin-bottom:7px}.sliderLabel{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-bottom:2px}.sliderLabel b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}.slider input[type=range]{width:100%;accent-color:var(--accent)}.toggle{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--dim);margin-bottom:5px}.toggle input{accent-color:var(--accent)}.keycap{min-width:27px}.touchControls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ctlBtn{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 0;border-radius:9px;background:linear-gradient(180deg,#1a1f28,#11151b);border:1px solid var(--line);color:var(--fg);font:inherit;cursor:pointer;touch-action:none;box-shadow:0 2px #090c11}.ctlBtn:active{transform:translateY(1px);box-shadow:0 1px #090c11;border-color:var(--accent);color:var(--accent)}.ctlIcon{font-size:11px}.ctlLabel{font-size:10px;letter-spacing:.16em}.ctlBtn.start{color:var(--dim)}.ctlBtn.start.needed{color:#06251a;background:var(--accent);border-color:var(--accent);animation:starterPulse 1.1s ease-in-out infinite}.ctlBtn.start.cranking{color:#2a1a06;background:#ffc24a;border-color:#ffc24a;animation:none}@keyframes starterPulse{0%,to{box-shadow:0 2px #090c11}50%{box-shadow:0 2px #090c11,0 0 14px color-mix(in srgb,var(--accent) 70%,transparent)}}@media (prefers-reduced-motion: reduce){.ctlBtn.start.needed{animation:none}}.pedalBody{touch-action:none;cursor:ns-resize}.gate{touch-action:none}.knob circle:first-child{transition:filter 90ms linear}.knob.held circle:first-child{filter:brightness(1.18)}.picker{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--dim);margin-bottom:4px}.picker select{flex:1 1 auto;min-width:0;background:var(--panel2);border:1px solid var(--line);color:var(--fg);font:inherit;font-size:11px;border-radius:7px;padding:5px 6px}.pickerBlurb{margin:0 0 10px;font-size:10px;line-height:1.45;color:var(--dim);opacity:.85}.pickerNote{margin:0;font-size:9px;color:var(--dim);opacity:.6}.sliderDesc{display:block;margin-top:2px;font-size:9.5px;line-height:1.45;color:var(--dim);opacity:.75}.slider{margin-bottom:11px}.groupToggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg);font:inherit;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 0;margin-bottom:6px;cursor:pointer}.groupToggle .chev{color:var(--dim);letter-spacing:normal}.panelAll{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);opacity:.55;margin:16px 0 6px}