:root {
  color-scheme: dark;
  --ink: #f4efe6;
  --muted: #b7b0a5;
  --quiet: #817a71;
  --bg: #05070c;
  --panel: rgba(17, 18, 22, 0.84);
  --panel-soft: rgba(25, 22, 19, 0.65);
  --line: rgba(155, 184, 228, 0.16);
  --blue: #e8b56d;
  --violet: #e8b56d;
  --gold: #e8b56d;
  --green: #e8b56d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); line-height: 1.5; }
body::before { position: fixed; z-index: -3; inset: 0; content: ""; background: radial-gradient(circle at 8% 4%, rgba(232, 181, 109, .12), transparent 36rem), radial-gradient(circle at 93% 16%, rgba(232, 181, 109, .08), transparent 34rem), linear-gradient(180deg, #080d1c 0%, #050811 62%, #090d18 100%); }
.page-glow { position: absolute; z-index: -2; width: 30rem; height: 30rem; border-radius: 50%; filter: blur(90px); opacity: .14; pointer-events: none; }
.page-glow-a { top: 32rem; left: -16rem; background: var(--blue); }
.page-glow-b { top: 105rem; right: -14rem; background: var(--violet); }
.shell { width: min(1240px, calc(100% - 56px)); margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; border-bottom: 1px solid rgba(155, 184, 228, .1); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; }
.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(232, 181, 109, .58); border-radius: 9px; color: var(--blue); font-size: .64rem; letter-spacing: -.05em; box-shadow: inset 0 0 17px rgba(232, 181, 109, .12); }
.main-nav { display: flex; gap: 26px; margin-left: auto; }
.main-nav a { color: var(--muted); font-size: .78rem; text-decoration: none; }
.main-nav a:hover { color: var(--ink); }
.epistemic-badge, .live-label, .measurement-count { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.status-dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.hero { display: grid; grid-template-columns: minmax(0, 1.46fr) minmax(280px, .54fr); gap: 72px; align-items: end; padding: 105px 0 82px; }
.eyebrow, .section-kicker { margin: 0 0 15px; color: var(--blue); font-size: .68rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow span { margin: 0 7px; color: var(--quiet); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 850px; margin-bottom: 25px; font-size: clamp(2.65rem, 6vw, 5.85rem); letter-spacing: -.07em; line-height: .96; }
h1 em { color: var(--blue); font-style: normal; }
h2 { margin-bottom: 12px; font-size: clamp(1.55rem, 3vw, 2.4rem); letter-spacing: -.045em; line-height: 1.08; }
h3 { margin-bottom: 9px; font-size: 1rem; letter-spacing: -.02em; }
.hero-lead { max-width: 670px; margin-bottom: 27px; color: var(--muted); font-size: 1.06rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: transparent; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 750; text-decoration: none; transition: .2s ease; }
.button:hover { transform: translateY(-1px); border-color: rgba(232, 181, 109, .55); }
.button-primary { border-color: rgba(232, 181, 109, .45); background: linear-gradient(135deg, rgba(232, 181, 109, .2), rgba(232, 181, 109, .16)); }
.button-quiet { color: var(--muted); }
.button-full { width: 100%; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--quiet); font-size: .7rem; }
.concept-card, .panel, .controls-panel, .classroom, .knowledge, .explanation, .solver-diagnosis { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 24px 90px rgba(0, 0, 0, .18); backdrop-filter: blur(18px); }
.concept-card { padding: 24px; }
.concept-question { margin-bottom: 28px; color: var(--ink); font-size: 1.2rem; line-height: 1.35; }
.concept-divider { height: 1px; margin: 0 -24px 21px; background: var(--line); }
.concept-list { margin: 0; }
.concept-list div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(155, 184, 228, .09); }
.concept-list div:last-child { border: 0; }
.concept-list dt { color: var(--quiet); font-size: .7rem; }.concept-list dd { margin: 0; color: var(--green); font-size: .72rem; text-align: right; }
.explanation { display: grid; grid-template-columns: .63fr 1.37fr; gap: 60px; padding: 33px 36px 37px; }
.explanation .section-heading { align-self: start; }.explanation h2 { max-width: 290px; font-size: 1.55rem; }.seven-lines { margin: 0; color: #b6c1d3; font-size: .9rem; line-height: 1.75; }.seven-lines span { display: block; }.seven-lines span::before { display: inline-block; width: 20px; color: var(--blue); content: "—"; }
.simulation-section { padding: 105px 0 0; }.section-heading { margin-bottom: 32px; }.section-heading-wide { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.section-heading h2 { margin-bottom: 0; }.live-label { color: var(--green); }.simulation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; }.visual-column { display: grid; gap: 16px; }.panel, .controls-panel { padding: 21px; }.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }.panel-title > div { display: flex; align-items: center; gap: 10px; }.panel-index, .info-number, .lesson-number { color: var(--blue); font-size: .66rem; font-weight: 800; letter-spacing: .14em; }.panel-title h3 { margin: 0; }.panel-note, .control-hint { color: var(--quiet); font-size: .68rem; }.wave-canvas, .detector-canvas { display: block; width: 100%; border-radius: 10px; background: #050a14; }.wave-canvas { height: min(45vw, 440px); min-height: 260px; }.detector-canvas { height: 168px; }.axis-labels, .detector-legend { display: flex; justify-content: space-between; gap: 14px; padding-top: 9px; color: var(--quiet); font-size: .67rem; }.detector-legend { justify-content: flex-start; gap: 20px; }.detector-legend span { display: inline-flex; align-items: center; gap: 6px; }.detector-legend i { width: 7px; height: 7px; border-radius: 2px; }.legend-blue { background: var(--blue); }.legend-gold { background: var(--gold); }
.controls-panel { background: linear-gradient(160deg, rgba(19, 32, 56, .92), rgba(12, 19, 34, .92)); }.controls-intro, .reading-note p, .section-intro, .classroom-header > div > p:last-child { color: var(--muted); font-size: .78rem; line-height: 1.6; }.controls-panel label { display: block; margin: 20px 0; color: #bdc8d9; font-size: .76rem; }.controls-panel output { float: right; color: var(--blue); font-variant-numeric: tabular-nums; }.controls-panel input[type="range"] { display: block; width: 100%; margin-top: 10px; accent-color: var(--blue); }.switch-row { display: flex !important; align-items: start; gap: 10px; color: var(--ink) !important; }.switch-row input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--gold); }.switch-row span { display: grid; gap: 4px; }.switch-row small { color: var(--muted); font-size: .68rem; line-height: 1.5; }.reading-note { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }.reading-note p { margin: 0; }.reading-icon { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); font-size: .68rem; }.solver-diagnosis { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: center; margin-top: 16px; padding: 20px 23px; }.solver-diagnosis .section-kicker { margin-bottom: 6px; }.solver-diagnosis h3 { margin: 0; }.solver-diagnosis p:last-child { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.classroom { margin-top: 105px; padding: 38px; background: linear-gradient(125deg, rgba(20, 35, 58, .9), rgba(25, 20, 46, .85)); }.classroom-header { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 32px; }.classroom-header h2 { margin-bottom: 10px; }.classroom-header > div > p:last-child { max-width: 600px; margin-bottom: 0; }.lesson-progress { display: flex; align-items: center; gap: 10px; color: var(--blue); font-size: .7rem; font-weight: 800; }.lesson-progress > span:last-child { color: var(--quiet); }.progress-line { width: 100px; height: 2px; background: rgba(155, 184, 228, .18); }.progress-line i { display: block; width: 25%; height: 100%; background: var(--blue); transition: width .2s ease; }.lesson-layout { display: grid; grid-template-columns: minmax(230px, .58fr) 1fr; gap: 45px; }.lesson-steps { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }.lesson-step { display: grid; grid-template-columns: 31px 1fr; gap: 4px 10px; width: 100%; padding: 14px 15px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; text-align: left; }.lesson-step:hover { background: rgba(232, 181, 109, .06); }.lesson-step.is-active { border-color: var(--line); color: var(--ink); background: rgba(232, 181, 109, .09); }.lesson-step span { grid-row: span 2; color: var(--blue); font-size: .67rem; font-weight: 800; }.lesson-step strong { font-size: .78rem; }.lesson-step small { color: var(--quiet); font-size: .68rem; }.lesson-content { min-height: 220px; padding: 4px 0; }.lesson-content .lesson-number { display: block; margin-bottom: 17px; }.lesson-content h3 { margin-bottom: 15px; font-size: 1.65rem; letter-spacing: -.04em; }.lesson-content p { max-width: 600px; min-height: 80px; margin-bottom: 25px; color: #b7c4d7; font-size: .95rem; line-height: 1.75; }.lesson-actions { display: flex; gap: 9px; }
.knowledge { margin-top: 105px; padding: 38px; }.section-intro { max-width: 650px; margin: 0; }.knowledge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.info-card { min-height: 210px; padding: 22px; border: 1px solid rgba(155, 184, 228, .11); border-radius: 13px; background: var(--panel-soft); }.info-card-large { grid-column: span 2; }.info-card .info-number { display: block; margin-bottom: 25px; }.info-card h3 { margin-bottom: 11px; font-size: 1.05rem; }.info-card p { margin-bottom: 0; color: var(--muted); font-size: .79rem; line-height: 1.7; }.info-card code, .equation { color: var(--gold); }.equation { margin-top: 20px; padding: 14px; border-left: 2px solid var(--gold); background: rgba(232, 181, 109, .06); font-family: Georgia, serif; font-size: 1.05rem; }.glossary { display: grid; grid-template-columns: .6fr 1.4fr; gap: 35px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }.glossary h3 { margin: 0; }.glossary dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 30px; margin: 0; }.glossary dt { margin-bottom: 4px; color: var(--green); font-size: .77rem; font-weight: 800; }.glossary dd { margin: 0; color: var(--muted); font-size: .75rem; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 32px 0 38px; color: var(--quiet); font-size: .7rem; }.site-footer strong, .site-footer code { color: var(--muted); }.site-footer code { font-family: inherit; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: 35px; padding-top: 75px; }.concept-card { max-width: 620px; }.simulation-layout { grid-template-columns: 1fr; }.controls-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }.controls-panel .panel-title, .controls-intro, .switch-row, .button-full, .reading-note { grid-column: 1 / -1; }.knowledge-grid { grid-template-columns: repeat(2, 1fr); }.info-card-large { grid-column: span 2; } }
@media (max-width: 680px) { .shell { width: min(100% - 28px, 1240px); }.topbar { flex-wrap: wrap; }.main-nav { order: 3; width: 100%; margin: 4px 0 0; }.hero { padding: 55px 0 55px; }.explanation { grid-template-columns: 1fr; gap: 20px; padding: 25px 22px; }.explanation h2 { max-width: none; }.simulation-section, .classroom, .knowledge { margin-top: 70px; }.section-heading-wide, .classroom-header { display: block; }.live-label, .lesson-progress { margin-top: 18px; }.solver-diagnosis { grid-template-columns: 1fr; gap: 15px; }.classroom, .knowledge { padding: 25px 22px; }.lesson-layout, .glossary { grid-template-columns: 1fr; gap: 24px; }.knowledge-grid { grid-template-columns: 1fr; }.info-card-large { grid-column: auto; }.controls-panel { display: block; }.site-footer { display: block; }.site-footer span { display: block; margin-top: 8px; } }
@media (max-width: 430px) { h1 { font-size: 2.7rem; }.hero-meta { display: grid; gap: 5px; }.wave-canvas { min-height: 220px; }.lesson-content h3 { font-size: 1.35rem; }.glossary dl { grid-template-columns: 1fr; } }.panel-wave { overflow: hidden; background: radial-gradient(circle at 50% 12%, rgba(95, 141, 255, .18), transparent 45%), linear-gradient(145deg, rgba(16, 26, 48, .9), rgba(7, 11, 22, .94)); }
.panel-wave .panel-title, .panel-detector .panel-title { position: relative; z-index: 1; }
.wave-canvas { min-height: 360px; border: 1px solid rgba(232, 181, 109, .18); box-shadow: inset 0 0 55px rgba(24, 42, 86, .48), 0 18px 55px rgba(0, 0, 0, .24); }
.panel-detector { background: linear-gradient(145deg, rgba(14, 24, 43, .92), rgba(7, 11, 21, .94)); }
.detector-canvas { height: 205px; border: 1px solid rgba(232, 181, 109, .12); box-shadow: inset 0 0 45px rgba(20, 60, 112, .22); }
.controls-panel { position: relative; overflow: hidden; }
.controls-panel::before { position: absolute; top: -130px; right: -110px; width: 260px; height: 260px; border: 1px solid rgba(232, 181, 109, .22); border-radius: 50%; content: ""; box-shadow: 0 0 70px rgba(232, 181, 109, .1); pointer-events: none; }
@media (max-width: 680px) { .wave-canvas { min-height: 280px; } .detector-canvas { height: 180px; } }.physics-note { max-width: 640px; margin: 20px 0 0; padding: 12px 15px; border-left: 2px solid var(--gold); color: var(--muted); background: rgba(232, 181, 109, .05); font-size: .75rem; line-height: 1.6; }
.physics-note strong { color: var(--gold); }.topbar { position:sticky; top:0; z-index:10; background:rgba(5,7,12,.78); backdrop-filter:blur(16px); }
.main-nav { padding:5px; border:1px solid rgba(5,7,12,.18); border-radius:999px; background:rgba(244,239,230,.93); }
.main-nav a { padding:7px 13px; border-radius:999px; color:#171513; }
.main-nav a:hover { color:#171513; background:var(--gold); }
.epistemic-badge { border-color:var(--gold); color:var(--gold); }
body::before { background:radial-gradient(circle at 8% 4%,rgba(232,181,109,.12),transparent 36rem),radial-gradient(circle at 93% 16%,rgba(232,181,109,.08),transparent 34rem),linear-gradient(180deg,#08080a 0%,#05070c 62%,#090807 100%); }
.panel-wave { background:radial-gradient(circle at 50% 12%,rgba(232,181,109,.12),transparent 45%),linear-gradient(145deg,rgba(28,23,17,.9),rgba(9,8,7,.94)); }
.panel-detector { background:linear-gradient(145deg,rgba(25,22,18,.92),rgba(8,8,8,.94)); }
.controls-panel { background:linear-gradient(160deg,rgba(30,25,19,.92),rgba(13,11,10,.92)); }
.classroom { background:linear-gradient(125deg,rgba(38,29,20,.9),rgba(23,18,15,.85)); }
.wave-canvas { background:#080807; box-shadow:inset 0 0 55px rgba(232,181,109,.12),0 18px 55px rgba(0,0,0,.24); }
.detector-canvas { background:#080807; box-shadow:inset 0 0 45px rgba(232,181,109,.12); }
.controls-panel label { color:#d6cfc4; }
.seven-lines, .lesson-content p { color:#c4bdb3; }
.concept-list div, .info-card { border-color:rgba(244,239,230,.1); }