/* Physical Modeling Synth — earthy green theme */

:root {
  /* Karplus-Strong is a paper, not a product — so this one is a lab
     instrument: bone panel, ink legends, a single copper accent. It is the
     only light surface in the family, which is the point. */
  --chassis: #cdc7bb;
  --chassis-edge: rgba(60, 55, 45, 0.35);
  --bg: #ded8cc;
  --panel-bg: #f2eee5;
  --panel-border: #b9b1a1;
  --accent: #9a5b2c;
  --accent-dim: #7d4a23;
  --accent-bright: #c47a3f;
  --text: #2c2823;
  --text-dim: #6d665b;
  --knob-track: #cfc8ba;
  --slider-thumb: #9a5b2c;
  --danger: #a33;
  --led: #d1462f;
  --cap: #6f675c;
  --cap-edge: rgba(0,0,0,0.4);
  --display-bg: #1d2420;
  --display-ink: #8fd6a8;
  --display-grid: rgba(143, 214, 168, 0.12);
  --readout-bg: transparent;
  --readout-ink: var(--accent);
  --readout-border: transparent;
  --readout-glow: none;
  --panel-radius: 2px;
  --shadow-strength: 0.35;    /* matte paper, not gloss */
  --label-weight: 700;
  --label-tracking: 1.1px;
  --title-tracking: 2.4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 12px; overflow-x: hidden; }

.synth-container { max-width: 1200px; margin: 0 auto; padding: 10px; }
.synth-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; margin-bottom: 8px; }
.synth-header h1 { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
.synth-header .subtitle { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.header-controls { display: flex; align-items: center; gap: 12px; }

.synth-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.effects-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.bottom-row { display: grid; grid-template-columns: 200px 1fr; gap: 8px; margin-bottom: 8px; }

.panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 6px; padding: 10px; }
.panel-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--panel-border); }
.section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-dim); margin: 6px 0 2px; }

.control-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.control-row label { width: 60px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; flex-shrink: 0; }
.control-row .val { width: 50px; text-align: right; font-size: 10px; font-family: 'Courier New', monospace; color: var(--accent); flex-shrink: 0; }

input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; background: var(--knob-track); border-radius: 2px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--slider-thumb); cursor: pointer; box-shadow: 0 0 4px rgba(68,204,68,0.4); }
select { background: #1a2a1a; color: var(--text); border: 1px solid var(--panel-border); border-radius: 3px; padding: 2px 4px; font-size: 11px; outline: none; }
select:focus { border-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); }
.checkbox-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.checkbox-row label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }

.btn { background: var(--accent-dim); color: #fff; border: none; border-radius: 4px; padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: background 0.15s; }
.btn:hover { background: var(--accent); color: #000; }
.btn:disabled { background: #333; color: #666; cursor: default; }
.btn-small { padding: 3px 8px; font-size: 10px; }

.fx-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fx-header .panel-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

#scope { width: 100%; height: 120px; border-radius: 4px; background: #0a1a0a; }
.status-bar { display: flex; gap: 16px; font-size: 10px; color: var(--text-dim); padding: 4px 0; }
.status-bar span { font-family: 'Courier New', monospace; }

#piano-keyboard { position: relative; height: 100px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.white-key { display: inline-block; width: 38px; height: 100px; background: linear-gradient(180deg, #e8f0e8, #d0e0d0); border: 1px solid #88aa88; border-radius: 0 0 4px 4px; position: relative; cursor: pointer; vertical-align: top; margin-right: 1px; }
.white-key:hover { background: linear-gradient(180deg, #f0f8f0, #e0f0e0); }
.white-key.active { background: linear-gradient(180deg, #88ee88, #44aa44); }
.black-key { position: absolute; width: 24px; height: 60px; background: linear-gradient(180deg, #2a3a2a, #1a2a1a); border: 1px solid #000; border-radius: 0 0 3px 3px; cursor: pointer; z-index: 2; top: 0; }
.black-key:hover { background: linear-gradient(180deg, #3a4a3a, #2a3a2a); }
.black-key.active { background: linear-gradient(180deg, #228822, #115511); }
.key-label { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 9px; color: #88aa88; pointer-events: none; }

@media (max-width: 900px) { .synth-grid { grid-template-columns: 1fr; } .effects-row { grid-template-columns: 1fr 1fr; } }


/* On a light surface panels dissolve into the chassis, so they get a printed
   edge and a paper highlight rather than the drop shadow a dark theme uses. */
.panel,
.synth-header {
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 5px rgba(60, 52, 40, 0.16);
  border-color: #b0a795;
}
.panel-title {
  border-bottom: 1px solid #cfc6b4;
}