/* ==========================================================================
   Online Tuner — feature landing for BPM Forge's tuner mode (/online-tuner
   + the /de and /es twins). Loaded AFTER css/landings/bpm-forge.css and
   reuses its palette, .bpl-* sections and buttons; this file only adds the
   live-demo card (driven by js/landings/online-tuner.js) and the instrument
   preset grid.
   ========================================================================== */
.ot-demo{position:relative;z-index:1;}
.ot-card{position:relative;z-index:1;background:var(--surface);border:1px solid var(--border);border-radius:22px;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9);overflow:hidden;}
.ot-body{padding:24px 26px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.ot-note{font-size:clamp(72px,16vw,112px);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--text-dimmer);
  font-variant-numeric:tabular-nums;transition:color .15s,text-shadow .15s;min-height:1em;}
.ot-note sub{font-size:.3em;vertical-align:baseline;margin-left:4px;color:var(--text-dimmer);}
#otDemo.live .ot-note{color:var(--text);}
#otDemo.in-tune .ot-note{color:var(--accent);text-shadow:0 0 28px var(--accent-glow);}
.ot-read{display:flex;gap:14px;justify-content:center;font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;margin-top:10px;min-height:18px;}
.ot-badge{min-height:16px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-top:8px;color:var(--text-dimmer);}
.ot-badge.ok{color:var(--accent);}
.ot-badge.flat,.ot-badge.sharp{color:#f0b35a;}
.ot-cents{position:relative;width:100%;height:30px;margin:18px 0 6px;background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.ot-cents-fill{position:absolute;top:0;height:100%;left:50%;width:0;background:var(--accent);opacity:.35;transition:left .08s linear,width .08s linear;}
.ot-cents-center{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--text-dim);opacity:.6;}
.ot-cents-needle{position:absolute;top:2px;bottom:2px;left:50%;width:4px;margin-left:-2px;border-radius:2px;background:var(--text-dim);transition:left .08s linear,background .15s;}
#otDemo.live .ot-cents-needle{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
.ot-scale{display:flex;justify-content:space-between;width:100%;font-size:10px;color:var(--text-dimmer);letter-spacing:.08em;margin-bottom:18px;font-variant-numeric:tabular-nums;}
.ot-start{width:100%;justify-content:center;cursor:pointer;font:inherit;}
.ot-start.running{background:var(--surface-2);color:var(--text);border:1px solid var(--border);box-shadow:none;}
.ot-error{margin-top:10px;font-size:12px;color:var(--danger);line-height:1.5;}
.ot-priv{margin-top:12px;font-size:11px;color:var(--text-dimmer);line-height:1.5;}
.ot-insts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:34px;}
.ot-inst{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.ot-inst h4{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--text);}
.ot-inst p{font-size:12.5px;color:var(--text-dim);line-height:1.55;}
.ot-inst.chrom{border-color:var(--accent-dim);background:var(--accent-glow);}
.ot-inst.chrom h4{color:var(--accent);}
.ot-shot .bpl-shots{grid-template-columns:minmax(0,960px);justify-content:center;}
.ot-tunerlink{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--accent);font-weight:600;font-size:14px;text-decoration:none;}
.ot-tunerlink:hover{text-decoration:underline;}