:root{
  --bg:#FDF0D5; --panel:#FFF8E6; --panel2:#F7EBCF; --edge:rgba(10,10,10,.20);
  --ink:#0A0A0A; --mut:#5C5A55;
  --amber:#7A5C14; --amber-dim:#E9C46A;
  --cyan:#14655C; --cyan-dim:#A8D8D1;
  --good:#1F7A4C; --bad:#A33F26;
  --disp:"Montserrat",sans-serif; --body:"Montserrat",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;line-height:1.72;font-size:17px}
::selection{background:var(--amber);color:#FDF0D5}

/* ---------- hero ---------- */
header{padding:64px 24px 0;max-width:1060px;margin:0 auto;text-align:center}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan)}
h1{font-family:var(--disp);font-weight:300;font-size:clamp(40px,7vw,76px);line-height:1.04;margin:18px 0 20px}
h1 em{font-style:italic;font-weight:600;color:var(--amber)}
.lede{max-width:640px;margin:0 auto;color:var(--mut)}
.hero-cta{margin:30px 0 8px}

/* live oscilloscope ribbon — the app's signature */
#ribbonWrap{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(13,19,30,.96),rgba(13,19,30,.88));
  border-bottom:1px solid var(--edge);backdrop-filter:blur(6px)}
#ribbon{display:block;width:100%;height:64px}
#ribbonLabel{position:absolute;right:14px;top:8px;font-family:var(--mono);font-size:11px;color:var(--mut);letter-spacing:.12em}

/* ---------- layout ---------- */
main{max-width:1060px;margin:0 auto;padding:24px}
section{margin:88px 0;opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
section.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){section{opacity:1;transform:none;transition:none}}
.num{font-family:var(--mono);color:var(--cyan);font-size:13px;letter-spacing:.2em}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(28px,4vw,42px);line-height:1.15;margin:10px 0 14px}
h3{font-family:var(--disp);font-weight:600;font-size:20px;margin:26px 0 8px}
p{max-width:68ch;color:#c6cfdd;margin:12px 0}
p strong{color:var(--ink);font-weight:600}
.note{border-left:2px solid var(--amber);padding:2px 0 2px 16px;color:var(--mut);font-size:15px;max-width:62ch}
.formula{font-family:var(--mono);background:var(--panel);border:1px solid var(--edge);border-radius:10px;
  padding:14px 18px;display:inline-block;margin:10px 0;color:var(--amber);font-size:15px}
.formula .c{color:var(--cyan)} .formula .m{color:var(--mut)}

.panel{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:22px;margin:22px 0}
.panel .caption{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}

/* ---------- controls ---------- */
button{font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer;border:none;border-radius:999px;
  padding:10px 20px;background:var(--amber);color:#FDF0D5;transition:transform .12s,filter .12s}
button:hover{filter:brightness(1.08)} button:active{transform:scale(.97)}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--edge)}
button.ghost:hover{border-color:var(--amber);color:var(--amber);filter:none}
button.cy{background:var(--cyan);color:#FDF0D5}
button.small{padding:7px 14px;font-size:13px}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
input[type=range]{width:100%;accent-color:var(--amber);height:28px}
select{background:var(--panel2);color:var(--ink);border:1px solid var(--edge);border-radius:8px;
  padding:8px 12px;font-family:var(--mono);font-size:14px}
.readout{font-family:var(--mono);font-size:14px;color:var(--mut)}
.readout b{color:var(--amber);font-weight:600;font-size:18px}
canvas.viz{width:100%;border-radius:10px;background:#0a0f18;border:1px solid var(--edge);display:block}

/* harmonic toggles */
.harmToggles{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.harmToggles label{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  font-family:var(--mono);font-size:12px;color:var(--mut);user-select:none}
.harmToggles input{display:none}
.harmToggles .chip{width:40px;height:40px;border-radius:10px;border:1px solid var(--edge);display:grid;place-items:center;
  background:var(--panel2);transition:all .15s;font-size:14px;color:var(--ink)}
.harmToggles input:checked + .chip{background:var(--amber);color:#FDF0D5;border-color:var(--amber);font-weight:600}

/* ---------- piano ---------- */
.piano{position:relative;height:150px;user-select:none;touch-action:manipulation}
.piano .wk,.piano .bk{position:absolute;top:0;border-radius:0 0 7px 7px;cursor:pointer;transition:background .1s}
.piano .wk{height:100%;background:linear-gradient(180deg,#f3f0e8,#ddd8cc);border:1px solid #0a0f18;z-index:1}
.piano .bk{height:60%;background:linear-gradient(180deg,#2b3648,#131a26);border:1px solid #05080d;z-index:2}
.piano .wk.on{background:var(--amber)} .piano .bk.on{background:var(--amber-dim)}
.piano .wk.mark{box-shadow:inset 0 -14px 0 var(--cyan)}
.piano .bk.mark{box-shadow:inset 0 -10px 0 var(--cyan)}
.piano .wk span{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;color:#5a5648;pointer-events:none}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:13px}
th{font-weight:600;color:var(--mut);text-align:left;padding:8px 10px;border-bottom:1px solid var(--edge);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}
td{padding:7px 10px;border-bottom:1px solid #1d2839;color:#cdd6e3;white-space:nowrap}
tr.hl td{background:rgba(245,177,74,.09);color:var(--ink)}
td .pos{color:var(--bad)} td .neg{color:var(--cyan)} td .zero{color:var(--good)}
.scrollx{overflow-x:auto}
tr[data-play]{cursor:pointer} tr[data-play]:hover td{background:rgba(95,208,222,.08)}

/* interval result card */
#ivResult{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:16px}
#ivResult .cell{background:var(--panel2);border:1px solid var(--edge);border-radius:12px;padding:12px 14px}
#ivResult .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
#ivResult .v{font-family:var(--mono);font-size:19px;color:var(--amber);margin-top:4px}
#ivResult .v small{font-size:12px;color:var(--mut)}

.ivBtns{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.ivBtns button{padding:8px 12px;font-size:12.5px;font-family:var(--mono);background:var(--panel2);color:var(--ink);border:1px solid var(--edge);border-radius:8px}
.ivBtns button.sel{background:var(--cyan);color:#FDF0D5;border-color:var(--cyan)}

/* fifths spiral */
#spiralWrap{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:22px;align-items:center}
@media(max-width:820px){#spiralWrap{grid-template-columns:1fr}}
#fifthLog{font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--mut);min-height:120px}
#fifthLog .new{color:var(--amber)}

.letterchain{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.letterchain .L{width:46px;height:46px;border-radius:12px;border:1px solid var(--edge);display:grid;place-items:center;
  font-family:var(--disp);font-size:20px;font-weight:600;color:var(--mut);background:var(--panel2);transition:all .25s}
.letterchain .L.lit{background:var(--cyan);color:#FDF0D5;border-color:var(--cyan);transform:translateY(-3px)}
.letterchain .arrow{align-self:center;color:var(--edge);font-family:var(--mono)}

/* camelot wheel */
#camWrap{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:26px;align-items:start}
@media(max-width:860px){#camWrap{grid-template-columns:1fr}}
#camSvg{width:100%;height:auto;user-select:none}
#camSvg path{cursor:pointer;transition:fill .15s}
#camSvg text{pointer-events:none;font-family:var(--mono)}
.camLegend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--mut);margin-top:10px}
.camLegend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-2px}
.cellgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;margin-top:4px}
.cellgrid .cell{background:var(--panel2);border:1px solid var(--edge);border-radius:12px;padding:12px 14px}
.cellgrid .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.cellgrid .v{font-family:var(--mono);font-size:16px;color:var(--amber);margin-top:4px}
.cellgrid .v small{font-size:11px;color:var(--mut)}
.mixchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.mixchips button{font-family:var(--mono);font-size:12px;padding:7px 11px;border-radius:8px;background:var(--panel2);color:var(--ink);border:1px solid var(--edge)}
.mixchips button:hover{border-color:var(--cyan);color:var(--cyan);filter:none}

#timGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:6px 0 16px}
#timGrid .tim{text-align:left;border-radius:12px;background:var(--panel2);border:1px solid var(--edge);color:var(--ink);padding:12px 14px;font-weight:400}
#timGrid .tim b{display:block;font-family:var(--disp);font-size:16px;font-weight:600;margin-bottom:3px}
#timGrid .tim span{font-family:var(--mono);font-size:10.5px;color:var(--mut);line-height:1.45;display:block;text-transform:none;letter-spacing:0}
#timGrid .tim:hover{border-color:var(--amber);filter:none}
#timGrid .tim.sel{border-color:var(--amber);background:rgba(245,177,74,.12)}
#timGrid .tim.sel b{color:var(--amber)}

.ctlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 18px;margin:14px 0}
.ctl label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
.ctl .val{font-family:var(--mono);font-size:12px;color:var(--amber)}
.ctl select{width:100%}

#meterDots{display:flex;align-items:center;gap:9px;min-height:34px;margin:12px 0}
#meterDots i{border-radius:50%;border:1px solid var(--edge);display:inline-block;transition:outline .05s}

footer{border-top:1px solid var(--edge);margin-top:100px;padding:40px 24px 70px;text-align:center;color:var(--mut);font-size:14px}
footer .formula{margin:16px auto}
.keyhint{font-family:var(--mono);font-size:12px;color:var(--mut)}

/* setlist lab + route finder (ported from AI Studio prototype) */
.slRow{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--edge);border-radius:10px;padding:9px 12px;margin-top:10px;font-size:14px}
.slIdx{font-family:var(--mono);color:var(--mut);width:18px}
.slKeyB{font-family:var(--mono);font-weight:600;color:#FDF0D5;border:none;border-radius:7px;padding:5px 9px;cursor:pointer;font-size:12px}
.slTitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slDel{background:none;border:none;color:var(--mut);cursor:pointer;padding:4px 8px;font-size:13px}
.slDel:hover{color:var(--bad);filter:none}
.slTr{font-family:var(--mono);font-size:12px;color:var(--mut);margin:6px 0 0 30px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.slTr b{color:var(--cyan)} .slTr.bad b{color:var(--bad)}
.slTr .slAud{padding:4px 10px;font-size:11px}
.slInput{background:var(--panel2);border:1px solid var(--edge);color:var(--ink);border-radius:8px;padding:8px 12px;font-family:var(--mono);font-size:13px}