:root{--bg:#07101f;--surface:#0d182a;--surface2:#111f34;--text:#f4f0e8;--muted:#96a6bb;--line:#26364d;--accent:#5aaeff;--gold:#efbd43;--shadow:0 30px 80px #0007;--m0:#5aaeff;--m1:#6685ff;--m2:#ef6c6c;--m3:#54d3df;--m4:#e7b64b;--m5:#ae79ef;--m6:#58bd8b;--m7:#dc75a8}*{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 57% 28%,#132d4d 0,transparent 34%),linear-gradient(145deg,#091426,#050b15 72%)}button,select{font:inherit}.shell{width:min(1560px,100%);margin:auto;padding:28px clamp(18px,4vw,64px) 38px}header{display:flex;align-items:end;justify-content:space-between;gap:24px;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.2rem,4.5vw,4.2rem)/.92 Georgia,serif;margin:0;letter-spacing:-.045em}h1 em{color:#8cb4ff;font-weight:400}.subtitle{margin:12px 0 0;color:var(--muted);font-size:.85rem}.audio-button{border:1px solid var(--line);color:var(--text);background:var(--surface);border-radius:99px;padding:10px 16px;cursor:pointer;white-space:nowrap}.audio-button[aria-pressed=false]{color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(230px,285px) minmax(540px,1fr) minmax(240px,295px);gap:clamp(20px,3vw,44px);align-items:center;min-height:745px}.card{background:#0b1627d9;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.control-block label,.label{display:block;font-size:.8rem;color:#c3ccda;margin-bottom:10px}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{color:var(--muted);font-size:.82rem;line-height:1.55}.hint strong{color:#afc5e2}.field-summary{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0;padding:18px 0}.field-summary>span,.formula-card>span{font-size:.64rem;letter-spacing:.17em;color:#70839d}.mini-notes{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.mini-notes button,.mode-notes button{border:1px solid #3b5473;background:#102039;color:white;border-radius:7px;min-width:31px;height:31px;cursor:pointer;font:600 .8rem Georgia,serif}.listen-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.listen-grid button,.center-button{border:1px solid var(--line);background:#101e31;color:white;border-radius:10px;padding:10px 6px;cursor:pointer;font-size:.76rem}.listen-grid button:hover,.center-button:hover{border-color:#597493;background:#142740}.center-button{width:100%;margin-top:8px;border-bottom:3px solid var(--gold)}.principle{border-top:1px solid var(--line);padding-top:18px;margin:24px 0 0;color:#c7d1df;font:italic .92rem/1.5 Georgia,serif}.principle strong{color:#f1c65c;font-weight:400}.map-panel{text-align:center;min-width:0}.map-kicker{color:#73859d;letter-spacing:.22em;font-size:.67rem;margin:0 0 18px}.mode-map{position:relative;width:min(610px,100%);aspect-ratio:1;margin:auto;border-radius:50%;background:radial-gradient(circle,#0b1729 0 24%,transparent 24.5%),radial-gradient(circle,transparent 0 68%,#10233a 68.5% 69%,transparent 69.5%),radial-gradient(circle,#0d1c31 0 79%,#07101f 79.5%);box-shadow:0 0 0 1px #354863,0 45px 90px #0008,inset 0 0 90px #1a3c6955}.mode-map svg{position:absolute;inset:0;width:100%;height:100%}.mode-map svg circle{fill:none;stroke:#344b68;stroke-width:.36}.mode-map svg .inner-orbit{stroke-dasharray:1.2 2;opacity:.55}.door{position:absolute;left:50%;top:50%;width:105px;min-height:74px;padding:9px 6px;translate:-50% -50%;border:1.5px solid var(--mode-color);border-radius:16px;background:#091525;color:white;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 24px #0007;transition:scale .2s,filter .2s,background .2s}.door:hover,.door.active{scale:1.1;filter:drop-shadow(0 0 13px var(--mode-color));background:#12233a}.door.active{box-shadow:inset 0 -3px 0 var(--mode-color),0 10px 28px #0008}.door strong{color:var(--mode-color);font:500 1.25rem Georgia,serif}.door span{font-size:.66rem;line-height:1.12;margin-top:4px}.map-center{position:absolute;inset:37%;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}.map-center small,.map-center span{font-size:.54rem;letter-spacing:.2em;color:var(--muted)}.map-center strong{font:400 clamp(2.7rem,5vw,4.4rem)/.9 Georgia,serif;color:#8eb6ff;margin:5px}.instruction{color:var(--muted);font-size:.76rem;margin:22px 0 0}.selected-head{display:flex;align-items:end;justify-content:space-between;margin-top:20px}.selected-head span{font:italic 1.5rem Georgia,serif;color:#596f8b}.selected-head strong{font:400 4.5rem/.85 Georgia,serif;color:var(--selected,#8cb4ff)}.inspector h2{font:400 1.5rem/1.15 Georgia,serif;margin:14px 0 5px;color:var(--selected,#8cb4ff)}.family{color:var(--muted);font-size:.82rem;margin:0 0 22px}.formula-card{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin-bottom:21px}.formula-card p{font:500 1.04rem Georgia,serif;letter-spacing:.055em;margin:10px 0 0;color:#dfe7f2}.mode-notes{display:flex;flex-wrap:wrap;gap:5px}.mode-notes button:first-child{border-color:var(--selected,#8cb4ff);color:var(--selected,#8cb4ff);box-shadow:0 0 0 3px color-mix(in srgb,var(--selected) 13%,transparent)}.doors-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}.section-title{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:17px}.section-title span{font-weight:700;letter-spacing:.1em}.section-title p{margin:0;color:var(--muted);font-size:.78rem}.mode-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mode-card{border:1px solid var(--line);border-top:3px solid var(--mode-color);border-radius:12px;background:#0b1626;color:white;padding:14px;text-align:left;cursor:pointer;min-height:105px}.mode-card:hover,.mode-card.active{background:#122239;border-color:var(--mode-color)}.mode-card small{color:var(--mode-color);font:italic .85rem Georgia,serif}.mode-card strong{display:block;font:400 .98rem/1.15 Georgia,serif;margin:6px 0}.mode-card span{color:var(--muted);font-size:.68rem}.theory{border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}.theory>div{padding:30px clamp(12px,3vw,34px)}.theory>div+div{border-left:1px solid var(--line)}.theory span{color:#4f6580;font:italic 1.4rem Georgia,serif}.theory h3{font:400 1.15rem Georgia,serif;margin:10px 0}.theory p{color:var(--muted);font-size:.86rem;line-height:1.55;margin:0}.statement{text-align:center;padding:34px 18px}.statement p{max-width:800px;margin:auto;color:#d9e0ea;font:italic clamp(1.05rem,2vw,1.35rem)/1.55 Georgia,serif}footer{display:flex;justify-content:space-between;gap:30px;color:#71839a;font-size:.72rem;border-top:1px solid var(--line);padding-top:25px}footer p{margin:0}footer strong{color:#aeb9c8;font-weight:500}
@media(max-width:1160px){.workspace{grid-template-columns:250px 1fr}.inspector{grid-column:1/-1;display:grid;grid-template-columns:110px 1fr 1fr;gap:20px;align-items:center}.inspector>.eyebrow{display:none}.selected-head{margin:0}.formula-card{margin:0;border:0}.mode-cards{grid-template-columns:repeat(4,1fr)}}
@media(max-width:780px){.shell{padding:18px 14px 32px}header{align-items:center}h1{font-size:2.15rem}.audio-button{font-size:.72rem}.workspace{display:flex;flex-direction:column;min-height:0;padding:26px 0}.controls,.inspector{width:100%}.controls{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field-summary{margin:0;border:0}.principle{grid-column:1/-1}.map-panel{width:100%}.door{width:82px;min-height:62px;padding:6px 4px}.door strong{font-size:1rem}.door span{font-size:.56rem}.inspector{display:block}.selected-head{margin-top:18px}.formula-card{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 21px}.mode-cards{grid-template-columns:repeat(2,1fr)}.theory{grid-template-columns:1fr}.theory>div+div{border-left:0;border-top:1px solid var(--line)}footer{flex-direction:column}}
@media(max-width:470px){header{display:block}.audio-button{margin-top:18px}.controls{display:block}.field-summary{margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.principle{margin-top:22px}.door{width:68px;min-height:54px;border-radius:12px}.door strong{font-size:.9rem}.door span{font-size:.48rem}.map-center{inset:35%}.mode-cards{grid-template-columns:1fr 1fr}.mode-card{min-height:112px}.section-title{display:block}.section-title p{margin-top:6px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}