:root{color-scheme:dark;--bg:#090c0f;--surface:#11161b;--raised:#181e25;--line:rgba(255,255,255,.11);--muted:#929ca7;--text:#f5f7f8;--accent:#c4a7ff;--cyan:#6dd9d5;--soft:rgba(196,167,255,.11)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,select{font:inherit}.app{max-width:1500px;margin:auto}.site-header{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,4vw,56px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;color:var(--text);font-size:13px;font-weight:750;text-decoration:none}.brand-mark{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--accent));box-shadow:0 0 14px rgba(196,167,255,.4)}.site-header p,.eyebrow{margin:0;color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}.hero{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:50px;padding:clamp(52px,8vw,105px) clamp(20px,6vw,90px);border-bottom:1px solid var(--line);background:radial-gradient(circle at 80% 5%,rgba(196,167,255,.09),transparent 31%)}h1,h2,p{margin-top:0}h1{margin:12px 0 0;font-size:clamp(42px,7vw,88px);font-weight:610;line-height:.95;letter-spacing:-.065em}h1 span{color:var(--accent)}.hero>p{max-width:590px;margin:0;color:#c2c9d0;font-size:clamp(17px,2vw,22px);line-height:1.58}.controls{display:flex;align-items:end;gap:12px;padding:24px clamp(20px,4vw,56px);border-bottom:1px solid var(--line)}label{display:grid;gap:7px;color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}select{min-width:155px;padding:11px 35px 11px 12px;background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:8px}.quiet{padding:11px 15px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:8px;cursor:pointer}.quiet:hover{color:var(--text);border-color:var(--accent)}.workbench,.result,.harmony,.presets{padding:46px clamp(20px,4vw,56px);border-bottom:1px solid var(--line)}.section-heading,.result-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:24px}.section-heading h2,.result-heading h2{margin:7px 0 0;font-size:clamp(26px,3vw,39px);letter-spacing:-.045em}.section-heading>p{max-width:390px;margin:0;color:var(--muted);font-size:13px}.degrees{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.degree{position:relative;display:grid;justify-items:center;gap:12px;padding:18px 8px;background:var(--surface);border:1px solid var(--line);border-radius:11px}.degree.changed{border-color:rgba(196,167,255,.58);background:var(--soft)}.degree-label{color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.degree-note{font-size:clamp(25px,3vw,38px);font-weight:650}.interval{color:var(--accent);font-size:13px;font-weight:750}.stepper{display:grid;grid-template-columns:36px 36px 36px;gap:3px}.stepper button,.stepper output{display:grid;place-items:center;height:32px;background:var(--raised);color:var(--text);border:1px solid var(--line)}.stepper button{cursor:pointer}.stepper button:first-child{border-radius:6px 0 0 6px}.stepper button:last-child{border-radius:0 6px 6px 0}.stepper button:disabled{opacity:.25;cursor:not-allowed}.result{background:var(--surface)}.description{margin:8px 0 0;color:var(--muted)}.play{padding:13px 19px;background:var(--accent);color:#17111f;font-weight:800;border:0;border-radius:999px;cursor:pointer}.play.playing{background:var(--cyan)}.notes{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:32px 0}.note{display:grid;place-items:center;min-height:76px;background:var(--raised);border:1px solid var(--line);border-radius:8px;font-size:clamp(19px,2.5vw,29px);font-weight:650;transition:.12s}.note.root{color:var(--accent);border-color:rgba(196,167,255,.5)}.note.sounding{background:var(--accent);color:#17111f;transform:translateY(-4px)}.analysis-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}.analysis-grid>div{display:grid;gap:8px;padding:18px;background:var(--raised)}.analysis-grid span,.chord small{color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.11em;text-transform:uppercase}.chords{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.chord{display:grid;gap:8px;padding:17px;background:var(--surface);border:1px solid var(--line);border-radius:9px}.chord strong{font-size:20px}.chord em{color:var(--muted);font-size:12px;font-style:normal}.experiments{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.experiment{padding:17px;text-align:left;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:9px;cursor:pointer}.experiment:hover{border-color:var(--accent)}.experiment strong,.experiment span{display:block}.experiment span{margin-top:5px;color:var(--muted);font-size:12px}
@media(max-width:900px){.hero{grid-template-columns:1fr}.degrees,.chords{grid-template-columns:repeat(4,1fr)}.experiments{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.controls{display:grid;grid-template-columns:1fr 1fr}.controls .quiet{grid-column:1/-1}.controls select{width:100%;min-width:0}.degrees,.chords{grid-template-columns:repeat(2,1fr)}.notes{grid-template-columns:repeat(4,1fr)}.analysis-grid,.experiments{grid-template-columns:1fr}.section-heading,.result-heading{align-items:flex-start;flex-direction:column}.play{align-self:flex-start}}