:root {
  --bg: #16120c;
  --panel: #221c14;
  --panel2: #2c241a;
  --metal: linear-gradient(160deg,#4a4038 0%,#6b5c48 40%,#3a322a 100%);
  --brass: #b5842f;
  --amber: #ff9d2f;
  --copper: #c47b3a;
  --ink: #f3e6cf;
  --dim: #a89478;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #33291d 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', sans-serif;
  min-height: 100vh;
}
.app-wrap { max-width: 760px; margin: 0 auto; padding: 0 14px 40px; }

/* header */
.metal-band {
  margin-top: 18px;
  border-radius: 16px;
  padding: 20px 22px;
  background: var(--metal);
  border: 1px solid #7a6a52;
  box-shadow: inset 0 2px 6px rgba(255,255,255,.15), inset 0 -6px 14px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
  position: relative;
}
.metal-band::before, .metal-band::after {
  content: ''; position: absolute; top: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d8c9ad, #4a3f2e);
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.metal-band::before { left: 12px; }
.metal-band::after { right: 12px; }
.title { margin: 0; font-weight: 800; font-size: clamp(1.5rem,5vw,2.4rem); letter-spacing: -1px; color: #fff2dd; }
.goose { filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.model {
  font-family: 'JetBrains Mono', monospace; font-size: .6em; font-weight: 700;
  background: #16120c; color: var(--amber); padding: 3px 9px; border-radius: 6px; vertical-align: middle;
  border: 1px solid var(--copper);
}
.tagline { margin: 6px 0 0; font-size: .82rem; color: #e8d4b0; font-style: italic; }

/* console */
.console { margin-top: 16px; }
.display-panel {
  background: #0d0b08;
  border-radius: 14px;
  padding: 14px;
  border: 1px solid #443727;
  box-shadow: inset 0 3px 20px rgba(0,0,0,.8);
  position: relative;
}
.angry-badge {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700;
  color: #ff6b2f; background: rgba(255,60,20,.12); border: 1px solid #ff6b2f;
  padding: 3px 8px; border-radius: 6px; opacity: 0; transform: scale(.9); pointer-events: none;
  transition: all .25s;
}
.angry-badge.show { opacity: 1; transform: scale(1); animation: pulseAngry .8s infinite alternate; }
@keyframes pulseAngry { to { box-shadow: 0 0 14px #ff6b2f; } }

.diagram-svg { width: 100%; height: auto; display: block; }
.dg-lbl { fill: var(--dim); font-size: 9px; font-family: 'JetBrains Mono', monospace; text-anchor: middle; }
.bell-glow { animation: bellPulse .35s infinite alternate; }
@keyframes bellPulse { to { filter: drop-shadow(0 0 12px var(--amber)); } }
.reed-vib { animation: reedShake .05s infinite alternate; }
@keyframes reedShake { to { transform: translateY(1.5px); } }

.scope { width: 100%; height: auto; border-radius: 8px; margin-top: 8px; border: 1px solid #332a1e; }
.readout {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: #7ecb6a;
  margin-top: 10px; line-height: 1.6; text-shadow: 0 0 6px rgba(126,203,106,.4);
}
.readout-msg { color: var(--amber); text-shadow: 0 0 6px rgba(255,157,47,.4); }

/* honk button */
.honk-row { display: flex; align-items: center; gap: 16px; margin: 20px 0 14px; flex-wrap: wrap; justify-content: center; }
.honk-btn {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.6rem;
  letter-spacing: 2px; color: #2a1a05;
  background: radial-gradient(circle at 40% 30%, #ffd27f, var(--amber) 60%, #d97a1c);
  border: none; border-radius: 50%; width: 150px; height: 150px; cursor: pointer;
  box-shadow: 0 8px 0 #a8560f, 0 12px 24px rgba(0,0,0,.6), inset 0 3px 8px rgba(255,255,255,.5);
  transition: transform .06s, box-shadow .06s;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.honk-btn:active, .honk-btn.honking {
  transform: translateY(6px) scale(.98);
  box-shadow: 0 2px 0 #a8560f, 0 4px 10px rgba(0,0,0,.6), inset 0 3px 12px rgba(160,60,0,.4), 0 0 30px var(--amber);
}
.counter { font-family: 'JetBrains Mono', monospace; font-size: .9rem; color: var(--dim); }
.counter b { color: var(--amber); }

/* articulations */
.artic-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.artic-btn {
  font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 700;
  color: var(--ink); background: var(--panel2); border: 1px solid #5a4a34;
  padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all .15s;
}
.artic-btn:hover { background: var(--copper); color: #1a1206; transform: translateY(-2px); }

/* controls */
.controls-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 640px) { .controls-grid { grid-template-columns: 1fr; } }
.ctrl-card {
  background: var(--panel);
  border: 1px solid #4a3d2a;
  border-radius: 12px;
  padding: 14px 12px 12px;
  text-align: center;
  box-shadow: inset 0 2px 5px rgba(255,255,255,.05), inset 0 -4px 10px rgba(0,0,0,.5);
}
.knob-wrap { position: relative; width: 66px; height: 66px; margin: 0 auto 8px; }
.knob {
  width: 66px; height: 66px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8c090, #7a5f36 55%, #3e2f18);
  box-shadow: 0 3px 8px rgba(0,0,0,.6), inset 0 2px 4px rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.5);
  position: relative;
}
.knob-tick {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 18px; border-radius: 2px; background: #2a1c08;
}
.knob-range {
  position: absolute; inset: 0; width: 66px; height: 66px; opacity: 0; cursor: grab; margin: 0;
}
.ctrl-label { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; color: var(--amber); text-transform: uppercase; letter-spacing: .5px; }
.ctrl-val { font-family: 'JetBrains Mono', monospace; font-size: .85rem; color: var(--ink); margin-top: 2px; }
.ctrl-hint { font-size: .64rem; color: var(--dim); margin-top: 4px; min-height: 14px; }

.sel-label { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; color: var(--amber); text-transform: uppercase; margin-bottom: 10px; letter-spacing: .5px; }
.sel-btns { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.sel-btn {
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700;
  color: var(--dim); background: #16120c; border: 1px solid #4a3d2a;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: all .15s; flex: 1 1 auto; min-width: 52px;
}
.sel-btn:hover { border-color: var(--copper); color: var(--ink); }
.sel-active { background: var(--brass); color: #1a1206; border-color: var(--amber); box-shadow: 0 0 10px rgba(255,157,47,.4); }

/* presets */
.preset-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.txt-btn {
  font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 700;
  color: var(--amber); background: transparent; border: 1px solid var(--copper);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: all .15s;
}
.txt-btn:hover { background: var(--copper); color: #1a1206; }
.preset-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.preset-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel2); border: 1px solid #5a4a34; border-radius: 20px;
  padding: 4px 6px 4px 12px; font-family: 'JetBrains Mono', monospace; font-size: .74rem;
}
.preset-chip span { cursor: pointer; color: var(--ink); }
.preset-chip span:hover { color: var(--amber); }
.preset-chip button { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.preset-chip button:hover { color: #ff6b2f; }

/* footer */
.ftr { text-align: center; margin-top: 30px; font-size: .72rem; color: var(--dim); }
.ftr p { font-style: italic; margin-bottom: 8px; }
.remix {
  color: var(--amber); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-weight: 700;
  border-bottom: 1px dotted var(--amber);
}
.remix:hover { color: #fff; }