* { box-sizing: border-box; }
html { width: 100%; min-width: 320px; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 105px; background: var(--bg); }
body { width: 100%; margin: 0; overflow-x: clip; color: var(--text); background: radial-gradient(ellipse at 70% 0%, rgba(35,101,111,.12), transparent 35rem), var(--bg); font-family: Manrope, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; } a { color: inherit; text-decoration: none; } button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; color: var(--bg); background: var(--cyan); border-radius: 7px; transform: translateY(-150%); }.skip-link:focus { transform: none; }
.reading-progress { position: fixed; z-index: 40; top: 0; left: 0; width: 100%; height: 3px; }.reading-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--amber)); }
.learn-topbar { height: 66px; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(18px, 4vw, 58px); border-bottom: 1px solid var(--border); background: var(--surface-glass); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.5px; white-space: nowrap; }.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #0a171c; background: var(--cyan); font-size: 18px; }.brand-light { color: var(--cyan); }
.topbar-meta, .eyebrow, .readout-label, .hero-steps, .readout-loop, .rail-title, .state-number, .state-tag, .energy-head, .equation-kicker, .readout-example, .experiment-number, .source-links span, .phase-links, .learn-footer > p { font-family: "DM Mono", monospace; }.topbar-meta { display: flex; align-items: center; gap: 9px; color: var(--text-faint); font-size: 9px; letter-spacing: 1.1px; }.live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px color-mix(in srgb, var(--green) 70%, transparent); }
.learn-actions { display: flex; align-items: center; gap: 10px; }.icon-button { width: 38px; height: 38px; display: grid; place-items: center; color: var(--text-soft); background: transparent; border: 1px solid var(--border); border-radius: 9px; font-size: 20px; }.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 1px solid var(--border-strong); border-radius: 9px; font-size: 11px; font-weight: 800; }.button-accent { color: #0b191d; background: var(--cyan); border-color: var(--cyan); }
.eyebrow { margin: 0 0 10px; color: var(--cyan); font-size: 9px; letter-spacing: 1.3px; font-weight: 500; }
.learn-hero { min-height: 415px; position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(30px, 8vw, 110px); overflow: hidden; padding: 55px max(6vw, calc((100vw - 1220px)/2)); border-bottom: 1px solid var(--border); background: linear-gradient(120deg, rgba(18,29,39,.2), rgba(18,29,39,.88)); }.hero-inner, .hero-readout { position: relative; z-index: 1; }.hero-inner { max-width: 635px; } h1, h2, h3, p { margin-top: 0; }
.learn-hero h1 { margin: 0 0 18px; font-size: clamp(39px, 6vw, 68px); line-height: 1.02; letter-spacing: -3px; }.learn-hero h1 span { color: var(--cyan); }.hero-deck { max-width: 560px; margin-bottom: 24px; color: var(--text-soft); font-size: 15px; }.hero-steps { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0 0 22px; color: var(--text-faint); font-size: 9px; letter-spacing: .3px; }.hero-steps b { margin-right: 5px; color: var(--amber); }.hero-link { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; color: var(--cyan); font-size: 11px; font-weight: 800; }
.hero-orbit { position: absolute; width: 460px; height: 460px; border: 1px solid color-mix(in srgb, var(--cyan) 12%, transparent); border-radius: 50%; pointer-events: none; }.orbit-one { right: 4%; top: -260px; }.orbit-two { width: 620px; height: 620px; right: -2%; top: -340px; }.hero-readout { min-height: 190px; padding: 25px; border: 1px solid var(--border-strong); border-radius: 16px; background: linear-gradient(145deg, var(--surface-glass), var(--surface)); box-shadow: var(--shadow); }.readout-label { color: var(--text-faint); font-size: 9px; letter-spacing: 1px; }.readout-loop { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 32px; color: var(--text); font-size: 10px; letter-spacing: .5px; }.readout-loop span:first-child { color: var(--amber); }.readout-loop i { color: var(--cyan); font-size: 15px; font-style: normal; }.hero-readout p { margin: 24px 0 0; padding-top: 15px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 10px; }
.chapter-nav { position: sticky; z-index: 25; top: 66px; display: flex; gap: 7px; overflow-x: auto; padding: 10px max(16px, calc((100vw - 1220px)/2)); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); scrollbar-width: none; }.chapter-nav::-webkit-scrollbar { display: none; }.chapter-nav a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--text-faint); border: 1px solid transparent; border-radius: 20px; font-size: 10px; font-weight: 700; white-space: nowrap; }.chapter-nav a:hover, .chapter-nav a[aria-current="location"] { color: var(--cyan); background: var(--cyan-soft); border-color: var(--border); }
.learn-layout { width: min(1280px, 100%); display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(30px, 5vw, 72px); margin: 0 auto; padding: 46px clamp(18px, 4vw, 40px) 20px; }.lesson-rail { position: sticky; top: 135px; align-self: start; display: grid; gap: 5px; padding-top: 10px; }.rail-title { margin: 0 0 11px; color: var(--text-faint); font-size: 8px; letter-spacing: 1.1px; }.lesson-rail > a { min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 10px; color: var(--text-faint); border-left: 1px solid var(--border); font-size: 10px; }.lesson-rail > a span { color: var(--text-faint); font: 9px "DM Mono", monospace; }.lesson-rail > a:hover, .lesson-rail > a[aria-current="location"] { color: var(--text); border-left: 2px solid var(--cyan); background: linear-gradient(90deg, var(--cyan-soft), transparent); }.lesson-rail > a[aria-current="location"] span { color: var(--cyan); }.rail-note { display: flex; align-items: center; gap: 7px; margin-top: 20px; padding: 10px; color: var(--text-faint); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; font-size: 9px; line-height: 1.5; }
.lesson-content { min-width: 0; }.lesson-section { padding: 8px 0 55px; scroll-margin-top: 122px; }.lesson-section + .lesson-section { border-top: 1px solid var(--border); padding-top: 48px; }.chapter-heading { max-width: 720px; margin-bottom: 26px; }.chapter-heading .eyebrow { margin-bottom: 7px; }.chapter-heading h2 { margin-bottom: 10px; font-size: clamp(25px, 3.2vw, 36px); line-height: 1.13; letter-spacing: -1.3px; }.chapter-heading > p:last-child { max-width: 680px; margin-bottom: 0; color: var(--text-soft); font-size: 13px; line-height: 1.75; }.panel { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface-glass), var(--surface)); box-shadow: var(--shadow); }
.cycle-figure { margin: 0; padding: 14px 18px 12px; border-radius: 15px; }.cycle-figure svg { width: 100%; height: auto; overflow: visible; }.plant-unit rect, .plant-unit circle { fill: var(--surface-raised); stroke: var(--border-strong); stroke-width: 2; }.plant-unit path { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }.boiler-unit path { stroke: var(--amber); }.plant-unit text { fill: var(--text); text-anchor: middle; font: 700 13px Manrope, sans-serif; letter-spacing: .6px; }.plant-unit .unit-small { fill: var(--text-faint); font: 10px "DM Mono", monospace; letter-spacing: 0; }.turbine-unit .rotor-ring { fill: none; stroke: var(--cyan); stroke-opacity: .45; stroke-dasharray: 2 5; }.turbine-unit .rotor-blades { fill: var(--cyan); stroke: var(--cyan); stroke-width: 1; opacity: .8; transform-origin: 458px 91px; animation: rotor-turn 9s linear infinite; }.turbine-unit .rotor-hub { fill: var(--cyan); stroke: var(--surface); }.cycle-pipe { fill: none; stroke-width: 3; stroke-dasharray: 8 7; animation: flow-dash 2.4s linear infinite; }.pipe-hot { stroke: var(--amber); }.pipe-steam { stroke: var(--cyan); }.pipe-cold, .pipe-water { stroke: color-mix(in srgb, var(--cyan) 45%, var(--text-faint)); }.flow-label, .heat-input, .electric-output { fill: var(--text-faint); font: 8px "DM Mono", monospace; letter-spacing: .7px; text-anchor: middle; }.label-heat, .heat-input { fill: var(--amber); }.label-work, .electric-output { fill: var(--cyan); }.electric-output { text-anchor: start; }.cycle-figure figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 22px; padding: 12px 6px 0; color: var(--text-faint); font-size: 9px; }.cycle-figure figcaption span:last-child { margin-left: auto; font-family: "DM Mono", monospace; }.key-dot { width: 7px; height: 7px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--cyan); }.key-heat { background: var(--amber); }.key-work { background: var(--green); }
.takeaway { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 13px; padding: 14px 17px; border: 1px solid var(--border); border-radius: 10px; background: var(--cyan-soft); }.takeaway-mark { display: grid; place-items: center; width: 37px; height: 37px; color: #0b191d; background: var(--cyan); border-radius: 50%; font: 10px "DM Mono", monospace; }.takeaway p { margin: 0; color: var(--text); font-size: 11px; }
.state-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.state-card { min-height: 238px; padding: 17px 15px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }.state-number { color: var(--cyan); font-size: 16px; letter-spacing: .5px; }.state-number span { margin-left: 5px; color: var(--text-faint); font-size: 7px; letter-spacing: .6px; }.state-icon { width: 43px; height: 43px; display: grid; place-items: center; margin: 16px 0 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 24px; }.state-liquid, .state-pump, .state-work { color: var(--cyan); background: var(--cyan-soft); }.state-hot { color: var(--amber); background: var(--amber-soft); }.state-card h3 { margin: 0 0 7px; font-size: 13px; line-height: 1.35; }.state-card p { min-height: 66px; margin: 0 0 13px; color: var(--text-soft); font-size: 10px; line-height: 1.65; }.state-tag { display: inline-flex; padding: 5px 7px; color: var(--text-faint); background: var(--surface-raised); border-radius: 5px; font-size: 7px; letter-spacing: .3px; }.state-loop-note { display: flex; gap: 14px; align-items: baseline; margin-top: 14px; padding: 13px 15px; border-left: 2px solid var(--amber); background: var(--amber-soft); }.state-loop-note span { color: var(--amber); font: 10px "DM Mono", monospace; white-space: nowrap; }.state-loop-note p { margin: 0; color: var(--text-soft); font-size: 10px; }
.energy-panel { padding: 19px 21px 14px; border-radius: 14px; }.energy-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-faint); font-size: 8px; letter-spacing: .8px; }.balance-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }.balance-badge i { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }.learning-sankey { width: 100%; height: auto; margin-top: 10px; overflow: visible; }.flow { fill: none; stroke-linecap: butt; opacity: .46; }.heat-flow { stroke: var(--amber); }.work-flow { stroke: var(--cyan); }.waste-flow { stroke: var(--text-faint); }.electric-flow { stroke: var(--green); }.loss-flow { stroke: var(--amber); opacity: .8; }.flow-node { fill: var(--surface-raised); stroke: var(--border-strong); }.sankey-heading { fill: var(--text); font: 700 10px Manrope, sans-serif; letter-spacing: .4px; }.sankey-sub { fill: var(--text-faint); font: 8px "DM Mono", monospace; }.energy-equation { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--text-soft); font-size: 11px; }.energy-equation b { color: var(--cyan); }.energy-equation small { flex-basis: 100%; color: var(--cyan); text-align: center; font: 11px "DM Mono", monospace; }.energy-footnote { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 9px; text-align: center; }
.equation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 11px; }.equation-card { padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }.equation-kicker { color: var(--text-faint); font-size: 8px; letter-spacing: .8px; }.equation { margin: 12px 0 8px; color: var(--cyan); font: 17px "DM Mono", monospace; white-space: nowrap; }.equation sub { color: var(--amber); font-size: 10px; }.equation-card p { margin: 0; color: var(--text-soft); font-size: 9px; }
.math-details, .faq-item { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }.math-details { margin-top: 11px; }.math-details summary, .faq-item summary, .glossary-card summary { min-height: 43px; display: flex; align-items: center; padding: 0 14px; color: var(--text); cursor: pointer; font-size: 10px; font-weight: 800; list-style: none; }.math-details summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker, .glossary-card summary::-webkit-details-marker { display: none; }.math-details summary::after, .faq-item summary::after, .glossary-card summary::after { content: "+"; margin-left: auto; color: var(--cyan); font: 17px "DM Mono", monospace; }.math-details[open] summary::after, .faq-item[open] summary::after, .glossary-card details[open] summary::after { content: "−"; }.math-body { padding: 0 15px 15px; color: var(--text-soft); font-size: 10px; }.math-body p { margin: 12px 0 5px; }.math-body code { display: block; padding: 10px 12px; overflow-x: auto; color: var(--cyan); background: var(--bg-soft); border-radius: 7px; font: 10px "DM Mono", monospace; white-space: nowrap; }
.readout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.readout-card { min-height: 169px; padding: 17px; border: 1px solid var(--border); border-radius: 11px; background: linear-gradient(145deg, var(--surface-raised), var(--surface)); }.readout-symbol { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; font: 13px "DM Mono", monospace; }.symbol-cyan { color: var(--cyan); background: var(--cyan-soft); }.symbol-amber { color: var(--amber); background: var(--amber-soft); }.symbol-green { color: var(--green); background: var(--green-soft); }.symbol-violet { color: #c0a5ff; background: rgba(153,119,255,.13); }.readout-card h3 { margin: 11px 0 5px; font-size: 13px; }.readout-card p { min-height: 55px; margin: 0 0 9px; color: var(--text-soft); font-size: 10px; line-height: 1.65; }.readout-card p b { color: var(--text); }.readout-example { color: var(--cyan); font-size: 8px; letter-spacing: .3px; }
.quality-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }.quality-scale > div { display: grid; grid-template-columns: 8px 1fr; column-gap: 7px; align-items: center; }.quality-scale b { font-size: 9px; }.quality-scale small { grid-column: 2; color: var(--text-faint); font: 8px "DM Mono", monospace; }.quality-scale p { grid-column: 1/-1; margin: 9px 0 0; color: var(--text-faint); font-size: 8px; }.quality-color { grid-row: span 2; width: 7px; height: 7px; border-radius: 50%; }.quality-good { background: var(--green); }.quality-caution { background: var(--amber); }.quality-wet { background: var(--red); }
.experiment-board { padding: 20px; border-radius: 14px; }.experiment-instructions, .experiment-observe, .experiment-record { display: grid; grid-template-columns: 35px 1fr; gap: 13px; padding: 4px 0 18px; }.experiment-observe, .experiment-record { padding-top: 17px; border-top: 1px solid var(--border); }.experiment-number { color: var(--cyan); font-size: 11px; }.experiment-board h3 { margin: 0 0 4px; font-size: 13px; }.experiment-board p, .experiment-board li { color: var(--text-soft); font-size: 10px; }.experiment-board ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin: 8px 0 0; padding-left: 17px; }.experiment-board .button { margin-top: 4px; }.record-table-wrap { overflow-x: auto; }.record-table-wrap table { width: 100%; border-collapse: collapse; }.record-table-wrap th, .record-table-wrap td { min-width: 82px; height: 32px; padding: 5px 8px; border: 1px solid var(--border); text-align: left; }.record-table-wrap th { color: var(--text-faint); background: var(--surface-raised); font: 8px "DM Mono", monospace; }.record-table-wrap td { color: var(--text-soft); font: 9px "DM Mono", monospace; }.experiment-board .experiment-prompt { margin: 0; padding: 12px 14px; color: var(--text); border-left: 2px solid var(--amber); background: var(--amber-soft); }.challenge-strip { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 14px 17px; border: 1px solid var(--border); border-radius: 10px; }.challenge-icon { color: var(--amber); font-size: 20px; }.challenge-strip b { font-size: 11px; }.challenge-strip p { margin: 2px 0 0; color: var(--text-soft); font-size: 9px; }
.faq-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 13px; align-items: start; }.faq-column { display: grid; gap: 7px; }.faq-item summary { min-height: 47px; }.faq-item p { margin: 0; padding: 0 14px 14px; color: var(--text-soft); font-size: 10px; line-height: 1.7; }.glossary-card { padding: 15px 0 7px; border-radius: 11px; }.glossary-heading { padding: 0 15px 6px; }.glossary-heading .eyebrow { margin-bottom: 3px; font-size: 8px; }.glossary-heading h3 { margin: 0 0 7px; font-size: 14px; }.glossary-card details { border-top: 1px solid var(--border); }.glossary-card summary { min-height: 37px; font-size: 9px; }.glossary-card details p { margin: 0; padding: 0 14px 12px; color: var(--text-soft); font-size: 9px; }
.model-card { margin-top: 13px; padding: 17px; border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--border)); border-radius: 11px; background: var(--amber-soft); }.model-card > div { display: flex; align-items: center; gap: 9px; }.model-icon { color: var(--amber); }.model-card h3 { margin: 0; font-size: 12px; }.model-card p { margin: 8px 0 0; color: var(--text-soft); font-size: 10px; }.sources-block { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; margin-top: 25px; }.sources-block h3 { margin: 0 0 5px; font-size: 14px; }.sources-block > div:first-child p:last-child { margin: 0; color: var(--text-soft); font-size: 9px; }.source-links { display: grid; gap: 7px; }.source-links a { display: grid; grid-template-columns: 45px 1fr; gap: 1px 9px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.source-links span { grid-row: span 2; align-self: center; color: var(--cyan); font-size: 9px; }.source-links b { font-size: 9px; }.source-links small { color: var(--text-faint); font-size: 8px; }
.whats-changed { margin: 0 0 35px; padding: 18px; border-radius: 12px; }.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.section-heading h2 { margin: 0; font-size: 16px; }.status-pill { padding: 4px 8px; color: var(--green); background: var(--green-soft); border-radius: 20px; font: 8px "DM Mono", monospace; letter-spacing: .4px; }.whats-changed ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin: 17px 0; padding-left: 18px; color: var(--text-soft); font-size: 9px; }.whats-changed li::marker { color: var(--cyan); }.phase-links { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 8px; }.phase-links b { color: var(--text-soft); font-weight: 500; }.phase-links i { color: var(--cyan); font-style: normal; }
.learn-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 0 35px; border-top: 1px solid var(--border); }.learn-footer .brand { font-size: 12px; }.learn-footer .brand-mark { width: 25px; height: 25px; font-size: 15px; }.learn-footer > p, .learn-footer > a:last-child { margin: 0; color: var(--text-faint); font-size: 8px; letter-spacing: .7px; }.learn-footer > a:last-child { color: var(--cyan); }
@keyframes rotor-turn { to { transform: rotate(360deg); } } @keyframes flow-dash { to { stroke-dashoffset: -30; } }
@media (max-width: 900px) { .learn-layout { grid-template-columns: 1fr; padding-top: 28px; }.lesson-rail { display: none; }.learn-hero { grid-template-columns: 1fr .75fr; gap: 25px; padding-right: 5vw; padding-left: 5vw; }.state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.state-card { min-height: 210px; }.state-card p { min-height: 42px; } }
@media (max-width: 620px) { html { scroll-padding-top: 106px; }.learn-topbar { height: 58px; gap: 8px; padding: 0 12px; }.brand { gap: 7px; font-size: 13px; }.brand-mark { width: 27px; height: 27px; font-size: 16px; }.topbar-meta { display: none; }.learn-actions { gap: 6px; }.learn-actions .button { min-height: 36px; padding: 0 9px; font-size: 9px; }.icon-button { width: 34px; height: 34px; }.chapter-nav { top: 58px; gap: 2px; padding: 7px 10px; }.chapter-nav a { min-height: 32px; padding: 0 9px; font-size: 9px; }.learn-hero { min-height: initial; grid-template-columns: 1fr; gap: 23px; padding: 42px 20px 25px; }.learn-hero h1 { font-size: clamp(39px, 12vw, 54px); letter-spacing: -2.2px; }.hero-deck { font-size: 12px; }.hero-steps { gap: 7px 12px; font-size: 8px; }.hero-readout { min-height: 150px; padding: 17px; }.readout-loop { gap: 7px; margin-top: 18px; font-size: 8px; }.hero-readout p { margin-top: 14px; }.orbit-one { right: -50%; }.learn-layout { padding: 23px 14px 10px; }.lesson-section { padding-bottom: 35px; scroll-margin-top: 106px; }.lesson-section + .lesson-section { padding-top: 34px; }.chapter-heading { margin-bottom: 18px; }.chapter-heading h2 { font-size: 26px; }.chapter-heading > p:last-child { font-size: 11px; }.cycle-figure { padding: 8px 7px; }.cycle-figure figcaption { gap: 7px 12px; padding: 9px 5px 2px; font-size: 8px; }.cycle-figure figcaption span:last-child { flex-basis: 100%; margin-left: 0; }.takeaway { gap: 10px; padding: 11px; }.takeaway p { font-size: 10px; }.state-grid { gap: 7px; }.state-card { min-height: 220px; padding: 12px 10px; }.state-number { font-size: 14px; }.state-number span { display: block; margin: 0; font-size: 7px; }.state-icon { margin: 11px 0; }.state-card h3 { font-size: 11px; }.state-card p { min-height: 82px; font-size: 9px; }.state-tag { font-size: 6px; }.state-loop-note { gap: 9px; padding: 10px; }.state-loop-note p { font-size: 9px; }.energy-panel { padding: 13px 9px 11px; }.sankey-heading { font-size: 13px; }.sankey-sub { font-size: 11px; }.energy-footnote { font-size: 8px; }.equation-grid { grid-template-columns: 1fr; gap: 7px; }.equation-card { padding: 12px; }.equation { margin: 7px 0 4px; font-size: 16px; }.equation-card p { font-size: 9px; }.readout-grid { gap: 7px; }.readout-card { min-height: 185px; padding: 12px 10px; }.readout-card h3 { font-size: 11px; }.readout-card p { min-height: 88px; font-size: 9px; }.readout-example { font-size: 7px; }.quality-scale { grid-template-columns: 1fr; gap: 8px; }.quality-scale p { grid-column: auto; }.experiment-board { padding: 14px 11px; }.experiment-instructions, .experiment-observe, .experiment-record { grid-template-columns: 24px 1fr; gap: 8px; }.experiment-board ul { grid-template-columns: 1fr; gap: 2px; }.record-table-wrap th, .record-table-wrap td { min-width: 78px; }.faq-grid { grid-template-columns: 1fr; }.sources-block { grid-template-columns: 1fr; gap: 13px; }.whats-changed { padding: 13px; }.whats-changed h2 { font-size: 14px; }.whats-changed ul { grid-template-columns: 1fr; gap: 6px; }.learn-footer { gap: 10px; }.learn-footer > p { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.model-card details { margin-top: 12px; border-top: 1px solid var(--border-strong); }.model-card details summary { min-height: 38px; display: flex; align-items: center; color: var(--text); cursor: pointer; font-size: 10px; font-weight: 800; list-style: none; }.model-card details summary::after { content: '+'; margin-left: auto; color: var(--amber); font: 16px 'DM Mono', monospace; }.model-card details[open] summary::after { content: '−'; }.model-card details ul { display: grid; gap: 6px; margin: 0; padding: 0 0 0 17px; color: var(--text-soft); font-size: 9px; }.model-card details li::marker { color: var(--amber); }