:root {
  --steel-dark: #1e2124;
  --steel: #2b2f33;
  --steel-light: #3a3f44;
  --amber: #e8a33d;
  --amber-dim: #8a6220;
  --green: #3cff6a;
  --panel: #26292d;
  --etch: #9aa0a6;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Oswald', sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #2a2d31 0%, #141618 60%, #0a0b0c 100%);
  min-height: 100vh;
  color: #d8dbde;
  padding: 12px;
  -webkit-user-select: none; user-select: none;
}
.mono, .mono-val, .knob-val, .ht-freq, .gauge-num, .trigger-readout, .brand-main {
  font-family: 'Share Tech Mono', monospace;
}

.chassis-outer { max-width: 1240px; margin: 0 auto; }
.chassis {
  position: relative;
  background:
    linear-gradient(145deg, #34383c 0%, #202225 30%, #26292d 70%, #1a1c1e 100%);
  border-radius: 14px;
  padding: 22px 20px 14px;
  box-shadow:
    0 30px 70px rgba(0,0,0,0.7),
    inset 0 2px 3px rgba(255,255,255,0.08),
    inset 0 -3px 8px rgba(0,0,0,0.6);
  border: 1px solid #45494e;
}
.chassis::before {
  content: ''; position: absolute; inset: 6px; border-radius: 9px;
  border: 1px solid rgba(0,0,0,0.4); pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255,255,255,0.008) 3px, rgba(255,255,255,0.008) 4px);
}
.bolt {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a6f74, #2a2d30 70%, #16181a);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.6);
  z-index: 3;
}
.bolt::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: linear-gradient(45deg, #1a1c1e, #3a3f44);
}
.bolt-tl { top: 8px; left: 8px; } .bolt-tr { top: 8px; right: 8px; }
.bolt-bl { bottom: 8px; left: 8px; } .bolt-br { bottom: 8px; right: 8px; }

.header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 14px 12px; position: relative; z-index: 2;
  border-bottom: 1px solid rgba(0,0,0,0.4);
}
.brand-main {
  font-size: 32px; font-weight: 700; letter-spacing: 3px;
  color: var(--amber); text-shadow: 0 1px 0 #000, 0 0 12px rgba(232,163,61,0.3);
}
.brand-sub { font-size: 12px; letter-spacing: 5px; color: var(--etch); font-weight: 300; margin-top: -2px; }
.maker { font-size: 10px; letter-spacing: 1px; color: #6a6f74; margin-top: 3px; }
.led-bank { display: flex; gap: 14px; }
.led-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.led { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #000; transition: all 0.1s; }
.led-label { font-size: 8px; letter-spacing: 1px; color: #7a7f84; font-weight: 600; }

.warning-plate {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 2px; color: var(--amber-dim);
  text-align: center; padding: 5px; margin: 8px 0;
  background: linear-gradient(#1a1c1e, #0f1112);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.5);
}

.main-grid {
  display: grid; grid-template-columns: 240px 1fr 300px; gap: 12px;
  position: relative; z-index: 2;
}
.left-col, .center-col, .right-col { display: flex; flex-direction: column; gap: 12px; }

.panel {
  background: linear-gradient(160deg, #2c3034, #202225);
  border-radius: 8px; padding: 12px;
  border: 1px solid #14161800;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), inset 0 -2px 5px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  border: 1px solid #3d4247;
}
.section-label {
  font-size: 10px; letter-spacing: 3px; color: var(--etch); font-weight: 600;
  text-transform: uppercase; margin-bottom: 10px; text-shadow: 0 1px 0 #000;
}

/* TRIGGER */
.trigger-panel { display: flex; flex-direction: column; align-items: center; }
.trigger {
  width: 130px; height: 130px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #4a4d50, #1a1c1e 70%);
  box-shadow: 0 8px 16px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.06s; margin: 4px 0 12px;
}
.trigger-inner {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #b3382e, #6b1712 75%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.5), inset 0 3px 6px rgba(255,255,255,0.2), 0 3px 6px rgba(0,0,0,0.5);
  border: 2px solid #8a2018;
}
.trigger.pressed { transform: scale(0.96); box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 3px 8px rgba(0,0,0,0.5); }
.trigger.pressed .trigger-inner {
  background: radial-gradient(circle at 40% 35%, #ff5a4a, #c0281f 75%);
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.6), 0 0 24px rgba(255,80,60,0.6);
}
.trigger-icon { font-size: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.trigger-text { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #fff; margin-top: 2px; }
.trigger-readout {
  display: flex; flex-direction: column; gap: 3px; font-size: 11px; width: 100%;
  padding: 8px 4px; color: #8a8f94; border-top: 1px solid rgba(0,0,0,0.3);
}
.trigger-readout > div { display: flex; justify-content: space-between; }
.mono-val { color: var(--green); text-shadow: 0 0 6px rgba(60,255,106,0.4); }
.hint { font-size: 9px; color: #6a6f74; letter-spacing: 1px; margin-top: 4px; }

/* DIAPHRAGM + GAUGES */
.diaphragm-wrap { display: flex; justify-content: center; padding: 8px 0 14px; }
.diaphragm {
  width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9ced3, #7a7f84 45%, #3a3f44 80%);
  border: 3px solid #24272a;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.4);
  transition: transform 0.05s ease-out;
}
.gauge { margin-bottom: 10px; }
.gauge-label { font-size: 9px; letter-spacing: 1px; color: #7a7f84; margin-bottom: 3px; }
.gauge-track {
  height: 12px; background: #121416; border-radius: 3px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
.gauge-fill { height: 100%; transition: width 0.08s; }
.gauge-fill.press { background: linear-gradient(90deg, var(--amber-dim), var(--amber)); }
.gauge-fill.spl { background: linear-gradient(90deg, var(--green), var(--amber) 75%, #ff3b3b); }
.gauge-num { font-size: 11px; color: var(--green); text-align: right; margin-top: 2px; }

/* SCOPE */
.scope-panel { padding-bottom: 12px; }
.scope-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.scope-toggle { display: flex; gap: 4px; }
.scope-toggle button {
  font-family: 'Share Tech Mono', monospace; font-size: 10px; padding: 3px 10px;
  background: #1a1c1e; color: #7a7f84; border: 1px solid #3d4247; border-radius: 3px; cursor: pointer;
}
.scope-toggle button.active { background: var(--green); color: #041006; border-color: var(--green); }
.scope-screen {
  height: 200px; border-radius: 5px; overflow: hidden;
  border: 2px solid #0a0f0b;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
}
.scope-canvas { width: 100%; height: 100%; display: block; }

/* HORN TYPE */
.horntype-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.horntype-btn {
  background: linear-gradient(#2a2d30, #1c1e20); border: 1px solid #3d4247;
  border-radius: 5px; padding: 10px 4px; cursor: pointer; text-align: center;
  transition: all 0.12s;
}
.horntype-btn:hover { border-color: #5a5f64; }
.horntype-btn.selected {
  background: linear-gradient(#3a2f18, #241c0e); border-color: var(--amber);
  box-shadow: 0 0 12px rgba(232,163,61,0.3), inset 0 0 8px rgba(232,163,61,0.15);
}
.ht-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; color: #d8dbde; }
.horntype-btn.selected .ht-label { color: var(--amber); }
.ht-freq { font-size: 10px; color: #7a7f84; margin-top: 2px; }

/* MODE */
.mode-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mode-btn {
  flex: 1; min-width: 70px; font-family: 'Oswald'; font-size: 11px; font-weight: 600; letter-spacing: 1px;
  padding: 8px 6px; background: linear-gradient(#2a2d30,#1c1e20); color: #9aa0a6;
  border: 1px solid #3d4247; border-radius: 5px; cursor: pointer; transition: all 0.12s;
}
.mode-btn.selected { background: linear-gradient(#3a2f18,#241c0e); color: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px rgba(232,163,61,0.25); }
.mode-btn.calib { color: var(--green); border-color: #2a5a38; }
.mode-btn.calib.running { background: #0d2013; color: var(--green); border-color: var(--green); }
.mode-btn:disabled { cursor: default; }
.calib-readout {
  font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--green);
  margin-top: 8px; letter-spacing: 1px; animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0.5; } }

/* KNOBS */
.knob-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px 8px; }
.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.knob { position: relative; cursor: ns-resize; touch-action: none; }
.knob-arc { position: absolute; inset: -4px; border-radius: 50%; }
.knob-body {
  position: absolute; inset: 4px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #4a4d50, #24272a 70%, #16181a);
  box-shadow: 0 3px 6px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.15);
  display: flex; align-items: flex-start; justify-content: center;
}
.knob-pointer {
  width: 3px; height: 42%; background: var(--amber); border-radius: 2px;
  margin-top: 5px; transform-origin: 50% 100%;
  box-shadow: 0 0 4px rgba(232,163,61,0.6);
}
.knob-label { font-size: 8px; letter-spacing: 1px; color: #8a8f94; font-weight: 600; }
.knob-val { font-size: 10px; color: var(--green); }

/* DUAL TOGGLE */
.dual-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.3); }
.dual-row .section-label { margin-bottom: 0; }
.toggle-sw {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 6px;
  background: #16181a; border: 1px solid #3d4247; border-radius: 20px; cursor: pointer;
  position: relative; width: 78px; transition: all 0.15s;
}
.toggle-knob {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #6a6f74, #3a3f44);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5); transition: transform 0.15s;
}
.toggle-sw.on { background: #241c0e; border-color: var(--amber); }
.toggle-sw.on .toggle-knob { transform: translateX(38px); background: radial-gradient(circle at 40% 30%, var(--amber), #8a6220); box-shadow: 0 0 8px rgba(232,163,61,0.6); }
.toggle-txt { font-family: 'Share Tech Mono'; font-size: 11px; color: #7a7f84; position: absolute; left: 30px; }
.toggle-sw.on .toggle-txt { color: var(--amber); left: 12px; }

/* PRESETS */
.preset-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.preset-header .section-label { margin-bottom: 0; }
.save-btn {
  font-family: 'Share Tech Mono'; font-size: 10px; padding: 3px 10px; cursor: pointer;
  background: var(--amber); color: #241c0e; border: none; border-radius: 3px; font-weight: bold;
}
.preset-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.preset-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer;
  background: linear-gradient(#26292d,#1e2124); border: 1px solid #3d4247; border-radius: 4px;
  text-align: left; transition: all 0.12s; color: #c8cbce;
}
.preset-item:hover { border-color: var(--amber); background: linear-gradient(#2e2818,#221c10); }
.preset-num { font-family: 'Share Tech Mono'; font-size: 11px; color: var(--amber-dim); }
.preset-name { font-size: 12px; letter-spacing: 1px; }

.footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding: 10px 14px 4px; font-size: 10px; color: #6a6f74;
  letter-spacing: 1px; border-top: 1px solid rgba(0,0,0,0.4); position: relative; z-index: 2;
}
.footer a { color: var(--amber); text-decoration: none; font-weight: 600; }
.footer a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .main-grid { grid-template-columns: 1fr; }
  .brand-main { font-size: 24px; }
  .brand-sub { font-size: 9px; letter-spacing: 3px; }
  .led-bank { gap: 8px; }
  .knob-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
  body { padding: 6px; }
  .header { flex-direction: column; gap: 10px; align-items: flex-start; }
  .maker { font-size: 8px; }
}
</parameter>
</invoke>