@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap";:root{--bg:#0c0e12;--ink:#f4efe6;--ink-muted:#9aa3ad;--ink-deep:#161a20;--teal:#7eb8ae;--teal-dim:#7eb8ae26;--copper:#c4784a;--copper-dim:#c4784a59;--line:#5a646e59;--font-display:"Fraunces", Georgia, serif;--font-sans:"IBM Plex Sans", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);overflow-x:hidden}button,input,select{font:inherit}::selection{background:var(--copper-dim);color:var(--ink)}.landing{background:var(--bg);justify-content:center;align-items:center;min-height:100dvh;display:flex;position:relative;overflow:hidden}.landing-canvas{width:100%;height:100%;position:absolute;inset:0}.landing-grain{opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.landing-content{z-index:1;text-align:center;padding:2rem;animation:1.1s both land-in;position:relative}@keyframes land-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.landing-eyebrow{font-family:var(--font-sans);letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin:0 0 .75rem;font-size:.75rem}.landing-brand{font-family:var(--font-display);letter-spacing:-.03em;color:var(--ink);margin:0;font-size:clamp(3.2rem,12vw,6.5rem);font-weight:500;line-height:.95}.landing-tag{font-family:var(--font-sans);color:var(--ink-muted);margin:1.25rem 0 .75rem;font-size:clamp(1rem,2.5vw,1.2rem);font-weight:400}.landing-path{font-family:var(--font-sans);letter-spacing:.06em;color:var(--teal);margin:0 0 1.75rem;font-size:.75rem}.landing-hint{font-family:var(--font-sans);color:var(--ink-muted);max-width:22rem;margin:1.25rem auto 0;font-size:.8rem;line-height:1.45}.landing-cta{appearance:none;border:1px solid var(--copper);color:var(--copper);font-family:var(--font-sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:0 0;padding:.9rem 1.75rem;font-size:.9rem;transition:background .25s,color .25s,transform .2s}.landing-cta:hover{background:var(--copper);color:var(--bg);transform:translateY(-1px)}.scene-rail{flex-wrap:wrap;justify-content:center;gap:.15rem;display:flex}.scene-rail-btn{color:var(--ink-muted);cursor:pointer;font-family:var(--font-sans);background:0 0;border:none;border-bottom:2px solid #0000;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.45rem .75rem;transition:color .2s,border-color .2s;display:flex}.scene-rail-btn:hover{color:var(--ink)}.scene-rail-btn.active{color:var(--copper);border-bottom-color:var(--copper)}.scene-rail-num{letter-spacing:.12em;opacity:.6;font-size:.6rem}.scene-rail-label{letter-spacing:.02em;font-size:.8rem;font-weight:500}.caption{text-align:center;max-width:40rem;min-height:1.5rem;margin:.35rem auto 0;padding:0 1rem}.caption p{font-family:var(--font-sans);color:var(--teal);letter-spacing:.02em;margin:0;font-size:.88rem;line-height:1.4}.guide-overlay{z-index:100;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.guide-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background:#06080cb8;border:none;position:absolute;inset:0}.guide-panel{z-index:1;border:1px solid var(--line);background:linear-gradient(165deg,#141820 0%,#0c0e12 55%,#12161c 100%);border-radius:4px;width:min(640px,100%);max-height:min(88dvh,820px);padding:1.5rem 1.5rem 2rem;position:relative;overflow:auto;box-shadow:0 24px 80px #0000008c}.guide-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem;display:flex}.guide-eyebrow{font-family:var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin:0 0 .25rem;font-size:.7rem}.guide-header h2{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0;font-size:clamp(1.5rem,4vw,2rem);font-weight:500}.guide-close{appearance:none;border:1px solid var(--line);color:var(--ink-muted);font-family:var(--font-sans);cursor:pointer;background:0 0;flex-shrink:0;padding:.4rem .7rem;font-size:.75rem}.guide-close:hover{color:var(--ink);border-color:var(--ink-muted)}.guide-intro{font-family:var(--font-sans);color:var(--ink-muted);margin:0 0 1.5rem;font-size:.9rem;line-height:1.5}.guide-chapters{flex-direction:column;gap:1.5rem;display:flex}.guide-chapter h3{font-family:var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin:0 0 .65rem;font-size:.7rem;font-weight:500}.insight-list{flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none;display:flex}.insight-card{text-align:left;appearance:none;border:1px solid var(--line);cursor:pointer;background:#ffffff05;border-radius:2px;flex-direction:column;gap:.35rem;width:100%;padding:.85rem 1rem;transition:border-color .15s,background .15s;display:flex}.insight-card:hover{border-color:var(--teal);background:var(--teal-dim)}.insight-card-title{font-family:var(--font-display);color:var(--ink);letter-spacing:-.01em;font-size:1.05rem}.insight-card-hook{font-family:var(--font-sans);color:var(--ink-muted);font-size:.8rem;line-height:1.4}.insight-detail{flex-direction:column;gap:.85rem;display:flex}.insight-back{appearance:none;color:var(--teal);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:0;font-size:.8rem}.insight-back:hover{color:var(--ink)}.insight-chapter{font-family:var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin:0;font-size:.65rem}.insight-detail h3{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0;font-size:1.55rem;font-weight:500}.insight-hook{font-family:var(--font-sans);color:var(--teal);margin:0;font-size:1rem;line-height:1.45}.insight-block{border-left:2px solid var(--line);padding:.9rem 1rem}.insight-block.wonder{border-left-color:var(--copper);background:#c4784a0f}.insight-block.tech{border-left-color:var(--teal);background:#7eb8ae0f}.insight-block h4{font-family:var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 .45rem;font-size:.7rem;font-weight:500}.insight-block p{font-family:var(--font-sans);color:var(--ink);margin:0;font-size:.9rem;line-height:1.55}.insight-formula{color:var(--teal);border:1px solid var(--line);white-space:pre-wrap;word-break:break-word;background:#00000059;margin-top:.75rem;padding:.55rem .7rem;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.75rem;display:block;overflow-x:auto}.insight-try{appearance:none;border:1px solid var(--copper);color:var(--copper);font-family:var(--font-sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;align-self:flex-start;margin-top:.35rem;padding:.7rem 1.15rem;font-size:.8rem;transition:background .2s,color .2s}.insight-try:hover{background:var(--copper);color:var(--bg)}@media (width<=520px){.guide-panel{max-height:92dvh;padding:1.15rem 1.1rem 1.5rem}.insight-detail h3{font-size:1.3rem}}.global-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.ctrl{color:var(--ink-muted);font-size:.75rem;font-family:var(--font-sans);align-items:center;gap:.4rem;display:flex}.ctrl select{background:var(--ink-deep);color:var(--ink);border:1px solid var(--line);font-family:var(--font-sans);border-radius:4px;padding:.3rem .45rem;font-size:.8rem}.tuning-toggle{border:1px solid var(--line);border-radius:4px;display:flex;overflow:hidden}.tuning-toggle button{color:var(--ink-muted);font-family:var(--font-sans);cursor:pointer;letter-spacing:.04em;background:0 0;border:none;padding:.35rem .65rem;font-size:.75rem}.tuning-toggle button.active{background:var(--teal-dim);color:var(--teal)}.ctrl-icon,.ctrl-text{border:1px solid var(--line);color:var(--ink-muted);font-family:var(--font-sans);cursor:pointer;background:0 0;border-radius:4px;padding:.35rem .65rem;font-size:.75rem}.ctrl-icon.muted{color:var(--copper);border-color:var(--copper-dim)}.ctrl-icon:hover,.ctrl-text:hover{color:var(--ink)}.welcome-banner{border:1px solid var(--copper-dim);background:#c4784a1a;border-radius:2px;flex-wrap:wrap;justify-content:center;align-self:center;align-items:center;gap:.75rem 1rem;width:calc(100% - 2rem);max-width:720px;margin:.5rem 1rem 0;padding:.7rem 1rem;display:flex}.welcome-banner-text{font-family:var(--font-sans);color:var(--ink-muted);text-align:left;flex-direction:column;flex:1;gap:.2rem;min-width:200px;font-size:.8rem;line-height:1.4;display:flex}.welcome-banner-text strong{color:var(--copper);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;font-weight:600}.welcome-link{appearance:none;color:var(--teal);font:inherit;cursor:pointer;text-underline-offset:2px;background:0 0;border:none;padding:0;text-decoration:underline}.welcome-dismiss{appearance:none;border:1px solid var(--copper);color:var(--copper);font-family:var(--font-sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:0 0;flex-shrink:0;padding:.4rem .75rem;font-size:.7rem}.welcome-dismiss:hover{background:var(--copper);color:var(--bg)}.piano{-webkit-user-select:none;user-select:none;touch-action:none;width:100%;max-width:720px;height:5.5rem;position:relative}.piano-whites{gap:2px;height:100%;display:flex}.piano-blacks{pointer-events:none;position:absolute;inset:0 0 35%}.piano-key{cursor:pointer;border:none;padding:0;transition:background 80ms,transform 80ms,box-shadow 80ms}.piano-key.white{background:linear-gradient(#f4efe6 0%,#e8e0d4 100%);border-radius:0 0 4px 4px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:.35rem;display:flex;box-shadow:0 2px #c4b8a8}.piano-key.white.on{background:linear-gradient(#d4e8e4 0%,#7eb8ae 100%);transform:translateY(1px);box-shadow:0 1px #5a9088}.piano-key.white.dim{opacity:.35}.piano-key.black{pointer-events:auto;z-index:2;background:linear-gradient(#2a2622 0%,#1a1714 100%);border-radius:0 0 3px 3px;width:1.4rem;height:100%;position:absolute;top:0;box-shadow:0 3px 4px #00000073}.piano-key.black.on{background:linear-gradient(#3d6b64 0%,#c4784a 100%)}.piano-key.black.dim{opacity:.35}.piano-label{font-family:var(--font-sans);letter-spacing:.04em;color:#6a5f52;pointer-events:none;font-size:.55rem}.piano-key.white.on .piano-label{color:#1a2e2b}.scene-guide{text-align:center;flex-direction:column;align-items:center;gap:.65rem;width:100%;max-width:36rem;display:flex}.scene-guide-do{font-family:var(--font-sans);color:var(--teal);background:var(--teal-dim);border:1px solid #7eb8ae59;border-radius:2px;width:100%;margin:0;padding:.65rem .9rem;font-size:.9rem;line-height:1.45}.scene-guide-label{letter-spacing:.14em;text-transform:uppercase;color:var(--copper);vertical-align:middle;margin-right:.45rem;font-size:.65rem;font-weight:600;display:inline-block}.scene-guide-steps{flex-direction:column;gap:.3rem;width:100%;margin:0;padding:0;list-style:none;display:flex}.scene-guide-steps li{font-family:var(--font-sans);color:var(--ink-muted);text-align:left;padding-left:1.4rem;font-size:.78rem;line-height:1.4;position:relative}.scene-guide-steps li:before{content:counter(step);counter-increment:step;border:1px solid var(--line);text-align:center;width:1.05rem;height:1.05rem;color:var(--copper);border-radius:50%;font-size:.65rem;line-height:1.05rem;position:absolute;top:0;left:0}.scene-guide-steps{counter-reset:step}.scene-guide-next{appearance:none;border:1px solid var(--copper);color:var(--copper);font-family:var(--font-sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;margin-top:.25rem;padding:.55rem 1rem;font-size:.75rem;transition:background .2s,color .2s}.scene-guide-next:hover{background:var(--copper);color:var(--bg)}.scene{flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:960px;margin:0 auto;padding:0 1rem 2rem;animation:.45s both scene-in;display:flex}@keyframes scene-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.scene-header{text-align:center;max-width:36rem}.scene-header h2{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0;font-size:clamp(1.75rem,4vw,2.4rem);font-weight:500}.scene-header p{font-family:var(--font-sans);color:var(--ink-muted);margin:.4rem 0 0;font-size:.95rem;line-height:1.45}.scene-canvas{border:1px solid var(--line);background:#080a0e8c;border-radius:2px;width:100%}.wave-canvas{height:200px}.particle-strip{height:72px}.lissajous-canvas{background:radial-gradient(#1e323066,#080a0ecc);height:min(52vw,360px)}.ratios-viz{gap:.75rem;width:100%;display:grid}.ratios-viz--split{grid-template-columns:1fr}@media (width>=820px){.ratios-viz--split{grid-template-columns:1fr 1fr}.ratios-viz--split .lissajous-canvas,.ratios-viz--split .cymatics-canvas{height:min(42vw,320px)}}.ratios-viz-pane{flex-direction:column;gap:.35rem;min-width:0;display:flex}.viz-label{font-family:var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);text-align:center;margin:0;font-size:.65rem}.morph-panel{border:1px solid var(--line);background:#080a0e73;flex-direction:column;gap:.4rem;width:100%;max-width:420px;padding:.75rem 1rem;display:flex}.morph-head{font-family:var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);justify-content:space-between;align-items:baseline;font-size:.7rem;display:flex}.morph-title{color:var(--copper);letter-spacing:.12em}.morph-slider{width:100%;accent-color:var(--copper)}.morph-readout{font-family:var(--font-sans);color:var(--teal);text-align:center;margin:0;font-size:.72rem;line-height:1.35}.view-toggle{margin-bottom:.15rem}.dissonance-canvas{cursor:crosshair;height:260px}.dissonance-canvas.mic-active{cursor:default;box-shadow:inset 0 0 0 1px #c4784a59}.mic-panel{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem 1rem;width:100%;max-width:520px;display:flex}.mic-drone{font-family:var(--font-sans);color:var(--ink-muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;font-size:.8rem;display:flex}.mic-drone.dim{opacity:.45}.mic-drone input{accent-color:var(--copper)}.mic-meter{background:#5a646e59;border-radius:2px;width:100%;max-width:220px;height:4px;overflow:hidden}.mic-meter-fill{background:linear-gradient(90deg, var(--teal), var(--copper));height:100%;transition:width 50ms linear}.mic-live{font-family:var(--font-sans);color:var(--copper);text-align:center;margin:0;font-size:.85rem}.mic-error{color:#e07a5f!important}.scene-controls{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:1rem;width:100%;display:flex}.scene-controls label{font-family:var(--font-sans);color:var(--ink-muted);flex-direction:column;flex:1;gap:.35rem;min-width:140px;max-width:220px;font-size:.75rem;display:flex}.scene-controls input[type=range]{width:100%;accent-color:var(--teal)}.scene-btn{appearance:none;border:1px solid var(--copper);color:var(--copper);font-family:var(--font-sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;padding:.65rem 1.1rem;font-size:.8rem;transition:background .2s,color .2s,box-shadow .2s}.scene-btn:hover{background:var(--copper);color:var(--bg)}.scene-btn.primary{background:#c4784a26}.scene-btn.pulse{animation:2s ease-in-out infinite btn-pulse}@keyframes btn-pulse{0%,to{box-shadow:0 0 #c4784a59}50%{box-shadow:0 0 0 6px #c4784a00}}.scene-btn.ghost{border-color:var(--line);color:var(--ink-muted)}.scene-btn.ghost:hover{border-color:var(--teal);color:var(--teal);background:0 0}.control-label{font-family:var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin:.25rem 0 0;font-size:.7rem}.scene-hint.tight{margin-top:.25rem}.chip-row{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}.chip{appearance:none;border:1px solid var(--line);color:var(--ink-muted);font-family:var(--font-sans);cursor:pointer;background:0 0;border-radius:2px;padding:.4rem .7rem;font-size:.75rem;transition:border-color .15s,color .15s,background .15s}.chip:hover{color:var(--ink);border-color:var(--ink-muted)}.chip.active{border-color:var(--teal);color:var(--teal);background:var(--teal-dim)}.scene-math{font-family:var(--font-sans);color:var(--ink-muted);text-align:center;max-width:40rem;margin:0;font-size:.75rem;line-height:1.5}.scene-hint{font-family:var(--font-sans);color:var(--ink-muted);text-align:center;margin:0;font-size:.8rem}.scene-hint strong{color:var(--copper);font-weight:500}.scene-piano{justify-content:center;width:100%;margin-top:.5rem;display:flex}.diatonic-layout{flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;width:100%;display:flex}.circle-fifths{width:min(100%,320px);height:auto}.mode-panel{flex-direction:column;align-items:center;gap:.85rem;max-width:28rem;display:flex}.mode-char{font-family:var(--font-sans);color:var(--teal);text-align:center;margin:0;font-size:.9rem;line-height:1.4}.chip-row.modes .chip{padding:.35rem .55rem;font-size:.7rem}.atlas-stage{border:1px solid var(--line);background:radial-gradient(#1e323059,#080a0ee6);border-radius:2px;width:100%;height:min(55vw,420px);overflow:hidden}.atlas-stage.concert-stage{background:radial-gradient(#32504873,#04060af2);border-color:#c4784a40;height:min(78dvh,720px);box-shadow:0 0 80px #7eb8ae1f}.scene.atlas-scene.concert{gap:.75rem;max-width:1100px;padding-top:.5rem}.concert-overlay{text-align:center;z-index:2;flex-direction:column;align-items:center;gap:.35rem;display:flex}.concert-eyebrow{font-family:var(--font-sans);letter-spacing:.28em;text-transform:uppercase;color:var(--copper);margin:0;font-size:.65rem}.concert-title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:500}.concert-vibe{font-family:var(--font-sans);color:var(--teal);margin:0;font-size:.9rem}.concert-step{font-family:var(--font-display);color:var(--copper);margin:.35rem 0 .5rem;font-size:2.5rem;line-height:1}.prog-panel{flex-direction:column;align-items:center;gap:.65rem;width:100%;max-width:640px;display:flex}.prog-now{font-family:var(--font-sans);color:var(--ink-muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem .75rem;margin:0;font-size:.85rem;display:flex}.prog-now strong{color:var(--copper);font-weight:600}.prog-dots{gap:.4rem;display:flex}.prog-dots span{opacity:.35;letter-spacing:.04em;font-size:.75rem}.prog-dots span.done{opacity:.65;color:var(--teal)}.prog-dots span.on{opacity:1;color:var(--copper);font-weight:600}.tonnetz-2d{width:100%;height:100%}.tonnetz-label{color:#9aa3ad;font-size:11px;font-family:var(--font-sans);pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}.tonnetz-label.on{color:#f4efe6}@media (width<=640px){.wave-canvas{height:160px}.dissonance-canvas{height:200px}.atlas-stage{height:300px}}.cymatics-canvas{border:1px solid var(--line);background:#0c0e12;border-radius:2px;width:100%;height:min(52vw,380px);display:block}.observatory{background:var(--bg);background-image:radial-gradient(80% 50% at 50% -10%,#28484459,#0000),radial-gradient(60% 40% at 100% 100%,#50321e1f,#0000);flex-direction:column;min-height:100dvh;display:flex}.obs-top{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#0c0e12bf;flex-direction:column;align-items:center;gap:.75rem;padding:1rem 1rem .5rem;display:flex;position:sticky;top:0}.obs-brand{appearance:none;font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);cursor:pointer;background:0 0;border:none;padding:0;font-size:1.35rem;font-weight:500}.obs-brand:hover{color:var(--copper)}.obs-main{flex:1;padding-top:1.25rem}.obs-scene-wrap{width:100%}.obs-foot{font-family:var(--font-sans);color:var(--ink-muted);letter-spacing:.04em;border-top:1px solid var(--line);flex-wrap:wrap;justify-content:center;gap:.4rem;padding:1rem;font-size:.7rem;display:flex}.obs-sep{opacity:.4}.observatory.concert{background-image:radial-gradient(90% 60% at 50% 20%,#325a5066,#0000),radial-gradient(50% 40% at 80% 90%,#64371e33,#0000)}.obs-main.concert-main{align-items:center;padding-top:.5rem;display:flex}@media (width>=900px){.obs-top{grid-template-columns:1fr auto 1fr;place-items:center;display:grid}.obs-brand{justify-self:start}.global-controls{justify-self:end}}