:root{--bg:#07101f;--surface:#0d182a;--surface2:#111f34;--text:#f4f0e8;--muted:#99a8bc;--line:#26364d;--t:#2474ff;--s:#e8b93f;--d:#e85454;--shadow:0 30px 80px #0007}*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 62% 30%,#122b4c 0,transparent 34%),linear-gradient(145deg,#091426,#050b15 70%)}button,select{font:inherit}.shell{width:min(1500px,100%);margin:auto;padding:28px clamp(18px,4vw,64px) 40px}header{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:22px}.eyebrow{color:#7e91aa;font-size:.72rem;letter-spacing:.22em;font-weight:750;margin:0 0 8px}h1{font:400 clamp(2.1rem,4.5vw,4.2rem)/.9 Georgia,serif;margin:0;letter-spacing:-.04em}h1 em{color:#83aefc;font-weight:400}.audio-button,.play{border:1px solid var(--line);color:var(--text);background:var(--surface);border-radius:99px;padding:10px 15px;cursor:pointer}.audio-button[aria-pressed=false]{color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(220px,280px) minmax(440px,1fr) minmax(230px,290px);gap:clamp(20px,3vw,48px);align-items:center;min-height:700px}.controls,.inspector{background:#0b1627cc;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.control-block+.control-block{margin-top:28px}.control-block label,.control-block legend,.label{display:block;font-size:.8rem;color:#c3ccda;margin-bottom:10px;border:0;padding:0}select{width:100%;appearance:none;background:var(--surface2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23dce5f2' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;color:var(--text);border:1px solid #31455f;border-radius:10px;padding:13px}.hint,.explanation{color:var(--muted);font-size:.82rem;line-height:1.55}.segmented{display:grid;grid-template-columns:repeat(3,1fr);background:#07111f;padding:3px;border-radius:9px}.segmented input{position:absolute;opacity:0}.segmented label{text-align:center;margin:0;padding:8px 3px;border-radius:7px;cursor:pointer;color:var(--muted)}.segmented input:checked+label{background:#253650;color:white}.cadence{display:flex;gap:7px}.cadence button{flex:1;min-width:0;background:#101e31;border:1px solid var(--line);border-radius:10px;color:white;padding:10px 2px;cursor:pointer}.cadence b{display:block;font:500 1.2rem Georgia}.cadence small{display:none}.cadence button[data-fn=S]{border-bottom:3px solid var(--s)}.cadence button[data-fn=D]{border-bottom:3px solid var(--d)}.cadence button[data-fn=T]{border-bottom:3px solid var(--t)}.play{width:100%;margin-top:9px;border-radius:10px;font-size:.78rem}.wheel-panel{min-width:0}.wheel{position:relative;width:min(600px,100%);aspect-ratio:1;margin:auto;border-radius:50%;background:radial-gradient(circle,#0b1729 0 19%,transparent 19.5%),radial-gradient(circle,transparent 0 55%,#172941 55.5% 56%,transparent 56.5%),radial-gradient(circle,#0d1c31 0 70%,#07101f 70.5%);box-shadow:0 0 0 1px #354863,0 45px 90px #0008,inset 0 0 80px #1a3c6955}.wheel::after{content:"";position:absolute;inset:5%;border:1px solid #3d5067;border-radius:50%;pointer-events:none}.wheel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.axis-line{stroke-width:5;stroke-linecap:round;opacity:.58;filter:drop-shadow(0 0 8px currentColor);transition:.25s}.axis-line.T{stroke:var(--t);color:var(--t)}.axis-line.S{stroke:var(--s);color:var(--s)}.axis-line.D{stroke:var(--d);color:var(--d)}.note{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;border:1px solid;border-radius:50%;display:grid;place-items:center;color:white;font:600 1.08rem Georgia;background:#0b1727;cursor:pointer;z-index:2;transition:transform .22s,opacity .22s,box-shadow .22s}.note.T{border-color:var(--t)}.note.S{border-color:var(--s)}.note.D{border-color:var(--d)}.note:hover,.note.selected{transform:var(--pos) scale(1.18)!important;box-shadow:0 0 0 6px #ffffff12,0 0 28px currentColor}.note.dim{opacity:.16}.wheel-center{position:absolute;inset:39%;border:1px solid #30445f;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#081321;z-index:3;box-shadow:0 10px 35px #0008}.wheel-center span,.wheel-center small{font-size:.54rem;letter-spacing:.18em;color:var(--muted)}.wheel-center strong{font:400 clamp(2rem,5vw,3.6rem)/1 Georgia;margin:5px}.legend{display:flex;justify-content:center;gap:clamp(10px,3vw,34px);margin-top:28px}.legend-item{border:0;background:none;color:var(--text);display:flex;align-items:center;text-align:left;gap:9px;cursor:pointer}.legend-item i{width:9px;height:30px;border-radius:9px;background:currentColor}.legend-item.tonic{color:var(--t)}.legend-item.subdominant{color:var(--s)}.legend-item.dominant{color:var(--d)}.legend-item span{color:var(--text)}.legend-item b,.legend-item small{display:block}.legend-item small{color:var(--muted);margin-top:2px}.legend-item:not(.active){opacity:.3}.selected-note{font:400 5rem/.95 Georgia;color:#88b4ff;margin:22px 0 5px}.inspector h2{font:400 1.35rem Georgia;margin:0 0 8px}.inspector>p:not(.eyebrow){color:var(--muted);line-height:1.5}.axis-card{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin:22px 0}.axis-card>span{font-size:.72rem;color:var(--muted)}.axis-members{display:flex;gap:8px;margin-top:12px}.axis-members button{border:1px solid #38506d;background:#12243a;color:white;border-radius:8px;padding:8px 10px;cursor:pointer}.theory{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:0}.theory>div{padding:30px clamp(12px,3vw,34px);position:relative}.theory>div+div{border-left:1px solid var(--line)}.theory span{color:#4f6580;font:italic 1.4rem Georgia}.theory h3{font:400 1.15rem Georgia;margin:10px 0}.theory p{color:var(--muted);font-size:.86rem;line-height:1.55;margin:0}footer{display:flex;justify-content:space-between;gap:30px;color:#71839a;font-size:.72rem;padding-top:25px}footer p{margin:0}footer strong{color:#aeb9c8;font-weight:500}@media(max-width:1050px){.workspace{grid-template-columns:250px 1fr}.inspector{grid-column:1/-1;display:grid;grid-template-columns:120px 1fr 1fr;gap:20px;align-items:center}.inspector .eyebrow{display:none}.selected-note{margin:0}.axis-card{margin:0;border:0}.explanation{display:none}}@media(max-width:760px){.shell{padding:18px 14px 35px}header{align-items:center}.audio-button{font-size:.72rem}.workspace{display:flex;flex-direction:column;min-height:0;padding:25px 0}.controls{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px}.control-block+.control-block{margin:0}.control-block:last-child{grid-column:1/-1}.wheel-panel{width:100%}.note{width:46px;height:46px;margin:-23px;font-size:.9rem}.legend{gap:5px;justify-content:space-between}.legend-item{gap:5px;padding:2px}.legend-item small{display:none}.inspector{width:100%;grid-template-columns:80px 1fr}.axis-card{grid-column:1/-1}.selected-note{font-size:3.8rem}.theory{grid-template-columns:1fr}.theory>div+div{border-left:0;border-top:1px solid var(--line)}footer{flex-direction:column}}@media(max-width:420px){h1{font-size:2rem}.controls{grid-template-columns:1fr}.control-block:last-child{grid-column:auto}.note{width:42px;height:42px;margin:-21px}.wheel-center{inset:37%}.legend-item b{font-size:.77rem}}
.core-statement{max-width:760px;margin:16px 0 0;color:#bdc9d8;font-size:clamp(.78rem,1.2vw,.94rem);line-height:1.55}.core-statement strong{font-weight:600}.system-intro{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(34px,5vw,62px) 0}.intro-heading{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(22px,4vw,58px);align-items:end;margin-bottom:35px}.intro-heading h2{font:400 clamp(1.8rem,3.2vw,3rem)/1.05 Georgia,serif;margin:0}.intro-heading>p{color:var(--muted);font-size:.9rem;line-height:1.7;margin:0}.intro-heading>p strong{color:#d7dfeb;font-weight:600}.reading-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0a1525aa}.reading-grid article{padding:27px clamp(20px,3vw,32px);border-left:1px solid var(--line)}.reading-grid article:first-child{border-left:0}.reading-grid span{color:#4f6580;font:italic 1.4rem Georgia}.reading-grid h3{font:400 1.18rem Georgia;margin:11px 0}.reading-grid p{color:var(--muted);font-size:.84rem;line-height:1.65;margin:0}.tonal-equation{display:flex;align-items:center;justify-content:center;gap:clamp(9px,2vw,24px);flex-wrap:wrap;margin:26px 0;padding:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 clamp(1.15rem,2.2vw,1.75rem) Georgia,serif}.tonal-equation i{font-style:normal;color:#607994}.tonal-equation strong{color:#8bb7ff;font-weight:400}.axis-example{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(260px,1fr) minmax(260px,1fr);gap:clamp(20px,3vw,42px);padding:26px 0}.axis-example h3{font:400 clamp(1.35rem,2.1vw,2rem)/1.2 Georgia,serif;margin:0;color:#dce6f3}.axis-example p{color:var(--muted);font-size:.86rem;line-height:1.7;margin:0}.axis-example strong{color:#dce5f1}.final-principle{text-align:center;font:400 clamp(1.18rem,2vw,1.65rem)/1.55 Georgia,serif;color:#dbe6f4;max-width:950px;margin:26px auto 10px}.final-insistence{text-align:center;color:#8eb9ff;font-size:clamp(.82rem,1.3vw,.98rem);line-height:1.6;max-width:900px;margin:12px auto 0}.final-principle strong,.final-insistence strong{font-weight:600}@media(max-width:820px){.reading-grid{border-radius:13px}.reading-grid article{border-left:0;border-top:1px solid var(--line)}.reading-grid article:first-child{border-top:0}.axis-example{grid-template-columns:1fr}.core-statement{max-width:520px}}