/* PhysicsHub V5 Unit reading frame (Unit 4 first, 2026-10-22).
 * Opt-in: unit-page-manifest.json frame:v5; builder sets html[data-unit-frame="v5"].
 * Ethan's frame: warm paper, quiet rail, reading/figure width tiers, one Part rhythm.
 * Canonical content, official questions, renderer and site Header keep their own contracts.
 */

html[data-unit-frame="v5"] {
    --v5-paper: #faf9f5;
    --v5-card: #fffefb;
    --v5-scene: #f2f0eb;
    --v5-ink: #1f1e1c;
    --v5-grey: #6b6a64;
    --v5-line: #e6e3da;
    --v5-line-strong: #d9d5cb;
    --v5-raised: #f5f3ee;
    --v5-tint: #edf3f1;
    --v5-r: 12px;
    --v5-read: 16.5px;
    --v5-small: 13.5px;
    --v5-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", sans-serif;
    --v5-serif: "Iowan Old Style", "Charter", "Georgia", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", serif;
    --v5-gutter: clamp(16px, 3.2vw, 56px);
    --v5-rail: clamp(160px, 13vw, 220px);
    --v5-gap: clamp(32px, 4vw, 72px);
    --v5-wide: 1060px;
    --v5-measure: 720px;
    scroll-padding-top: 76px;
}
html[data-unit-frame="v5"][data-reading-text-size="small"] { --v5-read: 15.5px; }
html[data-unit-frame="v5"][data-reading-text-size="large"] { --v5-read: 18.5px; }

html[data-unit-frame="v5"] body.unit-shell-v2 {
    --v5-unit: var(--unit-accent, #0e7490);
    --v5-unit-ink: color-mix(in srgb, var(--v5-unit) 82%, #000);
    background: var(--v5-paper);
    color: var(--v5-ink);
    font-family: var(--v5-font);
    -webkit-font-smoothing: antialiased;
}

/* ===================== title band (D2) ===================== */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-shell-hero {
    background: var(--v5-paper);
    border: 0;
    border-bottom: 1px solid var(--v5-line);
    box-shadow: none;
    min-height: 0;
    color: var(--v5-ink);
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-shell-hero::before,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-shell-hero::after { display: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-shell-hero-inner.has-v5-band {
    display: block;
    width: 100%;
    max-width: 1520px;
    min-height: 0;
    margin: 0 auto;
    padding: 0 var(--v5-gutter);
}
html[data-unit-frame="v5"] body.unit-shell-v2 .has-v5-band > :not(.v5-band) { display: none !important; }
html[data-unit-frame="v5"] .v5-band {
    display: grid;
    grid-template-columns: var(--v5-rail) minmax(0, var(--v5-wide));
    column-gap: var(--v5-gap);
    align-items: center;
}
html[data-unit-frame="v5"] .v5-band-text {
    grid-column: 1 / 3;
    grid-row: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 22px;
    row-gap: 4px;
    align-content: center;
    padding: 26px calc((100% - var(--v5-rail) - var(--v5-gap) - 56px) / 2.7 + 66px) 24px 0;
}
html[data-unit-frame="v5"] .v5-band-mark {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: center;
    margin: 0 0 4px;
    color: var(--v5-unit);
}
html[data-unit-frame="v5"] .v5-band-mark b {
    display: block;
    min-width: calc(2ch - .03em);
    text-align: right;
    font: 500 108px/.78 var(--v5-serif);
    letter-spacing: -.03em;
    font-variant-numeric: lining-nums tabular-nums;
}
html[data-unit-frame="v5"] .v5-band-text > :not(.v5-band-mark) { grid-column: 2; }
html[data-unit-frame="v5"] .v5-band-kicker {
    margin: 0;
    font: 600 11.5px/1.6 var(--v5-font);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--v5-unit);
}
html[data-unit-frame="v5"] body.unit-shell-v2 .v5-band #unit-title {
    margin: 0;
    font: 600 30px/1.2 var(--v5-serif);
    letter-spacing: -.01em;
    color: var(--v5-ink);
    text-shadow: none;
}
html[data-unit-frame="v5"] body.unit-shell-v2 .v5-band .unit-hero-subtitle {
    margin: 2px 0 0;
    max-width: none;
    font: 400 var(--v5-read)/1.6 var(--v5-font);
    color: var(--v5-grey);
    opacity: 1;
}
html[data-unit-frame="v5"] .v5-band-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; font: 600 var(--v5-small)/1.5 var(--v5-font); }
html[data-unit-frame="v5"] .v5-band-links a { color: var(--v5-unit); text-decoration: none; }
html[data-unit-frame="v5"] .v5-band-links a:hover { text-decoration: underline; }

/* intro video card: lines up with the figures' right column below */
html[data-unit-frame="v5"] .v5-intro {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    box-sizing: border-box;
    width: calc((100% - 56px) / 2.7 + 34px);
    margin: 14px 0;
    padding: 12px 17px 11px;
    display: grid;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    background: #f1ece2;
    box-shadow: 0 0 0 1px #e6dfd1;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
html[data-unit-frame="v5"] .v5-intro:focus-visible { outline: 3px solid var(--v5-unit); outline-offset: 3px; }
html[data-unit-frame="v5"] .v5-intro-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: var(--v5-r);
    overflow: hidden;
    background-size: cover;
    box-shadow: 0 0 0 1px rgba(31, 30, 28, .07), 0 6px 18px rgba(40, 30, 10, .10);
    transition: transform .25s cubic-bezier(.32, .72, 0, 1), box-shadow .25s;
}
html[data-unit-frame="v5"] .v5-intro:hover .v5-intro-frame { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(31, 30, 28, .07), 0 12px 26px rgba(40, 30, 10, .14); }
html[data-unit-frame="v5"] .v5-intro-frame img,
html[data-unit-frame="v5"] .v5-intro-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-unit-frame="v5"] .v5-intro-frame video { opacity: 0; transition: opacity .5s ease; }
html[data-unit-frame="v5"] .v5-intro-frame video.ready { opacity: 1; }
html[data-unit-frame="v5"] .v5-intro-label { display: flex; align-items: center; gap: 8px; color: var(--v5-unit); font: 600 13.5px/1 var(--v5-font); }
html[data-unit-frame="v5"] .v5-intro-label small { color: var(--v5-grey); font: 500 12.5px/1 var(--v5-font); font-variant-numeric: tabular-nums; }
html[data-unit-frame="v5"] .v5-intro-play { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--v5-unit); transition: background .2s; }
html[data-unit-frame="v5"] .v5-intro-play::after { content: ""; position: absolute; left: 7.5px; top: 5.5px; border-left: 7px solid var(--v5-unit); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
html[data-unit-frame="v5"] .v5-intro:hover .v5-intro-play { background: var(--v5-unit); }
html[data-unit-frame="v5"] .v5-intro:hover .v5-intro-play::after { border-left-color: #fff; }
.v5-intro-dialog { width: min(1100px, 92vw); padding: 0; border: 0; border-radius: 16px; background: #000; overflow: visible; }
.v5-intro-dialog::backdrop { background: rgba(20, 18, 14, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.v5-intro-dialog video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; }
.v5-intro-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); font-size: 22px; line-height: 1; cursor: pointer; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-reading-progress { background: transparent; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-reading-progress span { background: var(--v5-unit); }

/* ===================== workspace: quiet rail + reading column ===================== */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-shell-workspace {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 28px var(--v5-gutter) 96px;
    display: grid;
    grid-template-columns: var(--v5-rail) minmax(0, 1fr);
    gap: var(--v5-gap);
    border: 0;
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc { top: 76px; align-self: start; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-panel { background: none; border: 0; box-shadow: none; padding: 0; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-head,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-position,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-indicator,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-question-group,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-top-link { display: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-list { display: block; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-link {
    display: flex;
    gap: 6px;
    align-items: baseline;
    min-height: 0;
    margin: 0;
    padding: 6px 0 6px 12px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font: 400 var(--v5-small)/1.35 var(--v5-font);
    color: var(--v5-grey);
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-link > span:first-child:not(.unit-toc-label) { display: inline; flex: none; margin: 0; color: inherit; font: inherit; min-width: 0; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-link:hover { color: var(--v5-ink); background: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-link.is-active { color: var(--v5-ink); font-weight: 600; border-left-color: var(--v5-unit); background: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-memory-shortcut { display: none; }

/* ===================== reading column ===================== */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article {
    min-width: 0;
    max-width: none;
    --v5-col: 100%;
    font: 400 var(--v5-read)/1.7 var(--v5-font);
    color: var(--v5-ink);
    --unit-text-body: var(--v5-read);
    --unit-text-detail: var(--v5-read);
    --unit-text-copy: var(--v5-read);
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article p,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article li { color: var(--v5-ink); font-size: var(--v5-read); line-height: 1.7; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section {
    margin: 0;
    padding: 0 0 40px;
    border: 0;
    background: none;
    box-shadow: none;
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section + .unit-section { border-top: 1px solid var(--v5-line); padding-top: 40px; }

/* Part heading: “Part N · name” above a question-style title */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font: 600 var(--v5-small)/1.2 var(--v5-font);
    letter-spacing: .01em;
    text-transform: none;
    color: var(--v5-unit-ink);
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section-kicker::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--v5-unit); }
html[data-unit-frame="v5"] body.unit-shell-v2 :is(.unit-section-heading h2, .unit-section > h2) { margin: 0 0 8px; font: 600 var(--v5-title)/1.25 var(--v5-serif); letter-spacing: -.005em; color: var(--v5-ink); }

/* plain explanation paragraphs */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-paragraph { margin: 16px 0 20px; padding: 0; border: 0; background: none; box-shadow: none; }

/* ===================== figure card (style C) ===================== */
html[data-unit-frame="v5"] body.unit-shell-v2 .v5-fig {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid var(--v5-line);
    border-radius: var(--v5-r);
    background: var(--v5-card);
}
html[data-unit-frame="v5"] .v5-fig svg.v5-kit { display: block; width: 100%; height: auto; max-height: 320px; }
html[data-unit-frame="v5"] .v5-fig-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
html[data-unit-frame="v5"] .v5-fig-btn {
    font: 600 var(--v5-small)/1.2 var(--v5-font);
    color: var(--v5-grey);
    background: var(--v5-raised);
    border: 1px solid var(--v5-line);
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    text-align: left;
}
html[data-unit-frame="v5"] .v5-fig-btn:hover { color: var(--v5-ink); }
html[data-unit-frame="v5"] .v5-fig-btn.on { color: #fff; background: var(--v5-unit); border-color: var(--v5-unit); }
html[data-unit-frame="v5"] .v5-fig-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--v5-unit) 45%, transparent); outline-offset: 2px; }
html[data-unit-frame="v5"] .v5-fig-readout { border-top: 1px solid var(--v5-line); margin-top: 10px; padding-top: 10px; }
html[data-unit-frame="v5"] .v5-fig-readout b { display: block; margin-bottom: 2px; font: 600 var(--v5-small)/1.4 var(--v5-font); color: var(--v5-grey); }
html[data-unit-frame="v5"] .v5-fig-readout .eq-line { display: block; font-size: 18px; line-height: 1.6; color: var(--v5-ink); }
html[data-unit-frame="v5"] .v5-fig-readout .eq-line:last-of-type { color: var(--v5-unit-ink); }
html[data-unit-frame="v5"] .v5-fig-readout .why-line { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--v5-ink); }
html[data-unit-frame="v5"] .v5-fig-op { grid-column: 1 / -1; margin: 10px 0 0; font-size: var(--v5-small); color: var(--v5-grey); }
@keyframes v5FigIn { from { opacity: 0; } to { opacity: 1; } }
html[data-unit-frame="v5"] .v5-fig-readout.show .eq-line { animation: v5FigIn .4s ease both .7s; }
html[data-unit-frame="v5"] .v5-fig-readout.show .eq-line + .eq-line { animation-delay: .9s; }
@media (prefers-reduced-motion: reduce) { html[data-unit-frame="v5"] .v5-fig-readout.show .eq-line { animation: none; } }
@media (min-width: 1024px) {
    html[data-unit-frame="v5"] .v5-fig {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(230px, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 22px;
        align-items: start;
    }
    html[data-unit-frame="v5"] .v5-fig > svg { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
    html[data-unit-frame="v5"] .v5-fig > .v5-fig-seg { grid-column: 2; grid-row: 1; flex-direction: column; flex-wrap: nowrap; margin: 4px 0 6px; }
    html[data-unit-frame="v5"] .v5-fig > .v5-fig-seg .v5-fig-btn { padding: 10px 14px; font-size: 14px; }
    html[data-unit-frame="v5"] .v5-fig > .v5-fig-seg .v5-fig-btn::before { content: attr(data-n); display: inline-block; width: 1.4em; color: var(--v5-grey); font-weight: 600; }
    html[data-unit-frame="v5"] .v5-fig > .v5-fig-seg .v5-fig-btn.on::before { color: #fff; }
    html[data-unit-frame="v5"] .v5-fig > .v5-fig-readout { grid-column: 2; grid-row: 2; margin-top: 6px; }
}

/* ===================== must-know (definition + formula): the one soft tint ===================== */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-definition,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-formula {
    margin: 0 0 16px;
    padding: 16px 18px;
    border: 0;
    border-radius: var(--v5-r);
    background: var(--v5-tint);
    box-shadow: none;
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-definition + .unit-block-formula,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-definition + .unit-block-definition { margin-top: -16px; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 4px; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-definition:has(+ .unit-block-formula),
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-definition:has(+ .unit-block-definition) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-meta { margin: 0 0 6px; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-definition + .unit-block-definition .unit-definition-meta { display: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-meta .unit-block-label { display: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-memory-badge::before { display: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-entry { margin: 0; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-entry dt { display: inline; font-weight: 700; color: var(--v5-unit-ink); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-entry dt::after { content: " — "; font-weight: 400; color: var(--v5-grey); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-entry dd p { display: inline; margin: 0; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-entry .unit-definition-support { display: block; margin: 6px 0 0; color: var(--v5-grey); font-size: 15px; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-formula .unit-block-heading { display: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-formula { display: flex; flex-direction: column-reverse; text-align: center; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-formula .unit-formula { margin: 6px 0 4px; padding: 0; border: 0; background: none; font-size: 150%; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-formula .unit-formula-copy p { margin: 0; color: var(--v5-grey); }

/* ===================== worked example: problem + figure beside the solution ===================== */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-worked_example {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid var(--v5-line);
    border-radius: var(--v5-r);
    background: var(--v5-card);
    box-shadow: none;
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-worked_example .unit-block-title::before { content: "· "; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-worked_example .unit-block-identity { display: flex; gap: 4px; flex-wrap: wrap; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-worked_example .unit-block-heading { margin: 0 0 6px; padding: 0; border: 0; }
html[data-unit-frame="v5"] .v5-worked { margin: 8px 0 0; }
html[data-unit-frame="v5"] .v5-worked svg { display: block; width: 100%; height: auto; max-height: 240px; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-worked-solution { margin: 0; padding: 0; border: 0; background: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-worked-answer { margin: 8px 0 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--v5-line); border-radius: 0; background: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-worked-answer strong { display: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-worked-answer p { color: var(--v5-unit-ink); font-weight: 600; }
@media (min-width: 761px) {
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-worked_example {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 24px;
        align-items: start;
    }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-worked_example > .unit-block-heading { grid-column: 1 / -1; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-worked_example > :not(.unit-block-heading):not(.unit-worked-solution) { grid-column: 1; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-worked_example > .unit-worked-solution { grid-column: 2; grid-row: 2 / span 3; }
}

/* ===================== derivation, notice, tip, misconception ===================== */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-derivation,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-notice,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-exam_tip,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-misconception {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--v5-line);
    border-radius: var(--v5-r);
    background: var(--v5-card);
    box-shadow: none;
}

/* ===================== end of Part: check, practice, next (no boxes) ===================== */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-checkpoint {
    margin: 20px 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-checkpoint-reveal { margin: 4px 0 0; padding: 0; border: 0; background: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-checkpoint-reveal summary { display: inline-flex; gap: 4px; padding: 0; border: 0; background: none; font: 600 var(--v5-small)/1.6 var(--v5-font); color: var(--v5-unit); cursor: pointer; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-checkpoint-answer { margin: 6px 0 0; padding: 0; border: 0; background: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-checkpoint-answer strong { display: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-checkpoint-answer p { color: var(--v5-grey); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-lesson-transition {
    display: block;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-lesson-transition-label { display: inline; margin-right: 6px; font: 600 var(--v5-read)/1.7 var(--v5-font); color: var(--v5-grey); text-transform: none; letter-spacing: 0; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-lesson-transition-label::after { content: ":"; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-lesson-transition p { display: inline; color: var(--v5-grey); }
html[data-unit-frame="v5"] details.v5-practice { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--v5-line); }
html[data-unit-frame="v5"] details.v5-practice > summary { list-style: none; cursor: pointer; font: 600 var(--v5-small)/1.5 var(--v5-font); color: var(--v5-unit); }
html[data-unit-frame="v5"] details.v5-practice > summary::-webkit-details-marker { display: none; }
html[data-unit-frame="v5"] details.v5-practice > summary::after { content: " ›"; }
html[data-unit-frame="v5"] details.v5-practice[open] > summary::after { content: " ⌄"; }
html[data-unit-frame="v5"] details.v5-practice > .unit-practice-card { margin: 12px 0 0; }

/* ===================== phones and narrow windows ===================== */
@media (max-width: 1023px) {
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-shell-workspace { grid-template-columns: minmax(0, 1fr); }
    html[data-unit-frame="v5"] .v5-band { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin: 0 auto; }
    html[data-unit-frame="v5"] .v5-band-text { grid-column: 1; padding: 22px 0 16px; }
    html[data-unit-frame="v5"] .v5-intro {
        grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%;
        grid-template-columns: 136px 1fr; align-items: center; gap: 14px;
        margin: 0 0 18px; padding: 0; background: none; box-shadow: none;
    }
    html[data-unit-frame="v5"] .v5-intro-frame { aspect-ratio: 16 / 9; }
    html[data-unit-frame="v5"] .v5-intro-label { font-size: 15px; }
}

/* Between desktop rail and phone drawer, contents stays in normal flow.
   A sticky full-width rail must never cover the single-column article. */
@media (min-width: 761px) and (max-width: 1023px) {
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc { position: static; top: auto; min-width: 0; max-width: 100%; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-panel { min-width: 0; max-width: 100%; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-list { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-link { flex: 0 0 auto; max-width: 16rem; padding: 8px 12px; }
}

@media (max-width: 760px) {
    html[data-unit-frame="v5"] .v5-band-text { column-gap: 14px; }
    html[data-unit-frame="v5"] .v5-band-mark { grid-row: 1 / 3; align-self: end; margin: -12px 0 5px; }
    html[data-unit-frame="v5"] .v5-band-mark b { font-size: 64px; }
    html[data-unit-frame="v5"] .v5-band-text > :is(.unit-hero-subtitle, .v5-band-links) { grid-column: 1 / -1; }
    html[data-unit-frame="v5"] svg.v5-kit text { font-size: 25px; }
}

/* the shared reading profile tints route visuals and may split them on very wide screens;
   the V5 figure card keeps its own scene colour and two-column layout */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig {
    padding: 16px !important;
    box-shadow: none !important;
}
@media (min-width: 1024px) {
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig > svg { grid-column: 1 !important; grid-row: 1 / span 2 !important; max-width: 100% !important; min-width: 0; margin: 0 !important; }
}
html[data-unit-frame="v5"] .v5-fig-lab { justify-self: start; margin-top: 10px; }
/* optional controls under the drawing: play + time slider, and one continuous slider (spec.timeline / spec.range) */
html[data-unit-frame="v5"] .v5-fig-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; }
html[data-unit-frame="v5"] .v5-fig-play {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 50%; background: var(--v5-unit); color: #fff; cursor: pointer;
}
html[data-unit-frame="v5"] .v5-fig-play::before { content: ""; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
html[data-unit-frame="v5"] .v5-fig-play.on::before { width: 11px; height: 13px; margin: 0; border: 0; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }
html[data-unit-frame="v5"] .v5-fig-play:focus-visible { outline: 3px solid color-mix(in srgb, var(--v5-unit) 45%, transparent); outline-offset: 2px; }
html[data-unit-frame="v5"] .v5-fig-range { flex: 1 1 160px; min-width: 120px; margin: 0; accent-color: var(--v5-unit); }
html[data-unit-frame="v5"] .v5-fig-range-wrap { display: flex; flex: 1 1 100%; align-items: center; gap: 12px; }
html[data-unit-frame="v5"] :is(.v5-fig-time, .v5-fig-value) { min-width: 5.5em; font: 500 var(--v5-small)/1.3 var(--v5-font); font-variant-numeric: tabular-nums; color: var(--v5-ink); }
@media (min-width: 1024px) {
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig > .v5-fig-ctl { grid-column: 1 !important; grid-row: 4 !important; }
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-formula .unit-formula-copy { text-align: left; }
/* Chinese support under a definition: term on its own line, then the support, then the English wording */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-entry:has(.unit-definition-support) :is(dt, dd, dd p) { display: block; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-entry:has(.unit-definition-support) dt::after { content: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-entry:has(.unit-definition-support) dd .unit-definition-support { margin: 4px 0 2px; color: var(--v5-ink); font-size: var(--v5-read); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-definition-entry:has(.unit-definition-support) dd .unit-definition-original { color: var(--v5-grey); font-size: 15px; }

/* ===================== outline hierarchy (Ethan 2026-10-22) =====================
   “The original was clearer: big title, sub-title, body, like an outline — but keep the
   new calm look.” Four levels, each clearly different:
   1. Part: number + title   2. sub-heading for each block (figure, example, derivation)
   3. small-caps label (MUST MEMORISE, WORKED EXAMPLE, CHECK)   4. body text. */
html[data-unit-frame="v5"] { --v5-title: 28px; --v5-h3: 19px; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section-heading {
    display: grid;
    margin: 0 0 10px;
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section-number {
    display: block;
    text-align: right;
}
html[data-unit-frame="v5"] .v5-keepcase { text-transform: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section-heading .unit-section-kicker::before { display: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section-kicker {
    font: 600 11.5px/1.6 var(--v5-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v5-unit);
    margin: 0 0 2px;
}
html[data-unit-frame="v5"] body.unit-shell-v2 :is(.unit-section-heading h2, .unit-section > h2) { font: 600 var(--v5-title)/1.2 var(--v5-serif); margin: 0; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section > h2 { margin: 0 0 8px; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section-lead { font-size: 18px; line-height: 1.55; margin: 6px 0 22px; }

/* level 2: a sub-heading for every block that carries its own idea */
html[data-unit-frame="v5"] .v5-fig-title { grid-column: 1 / -1; margin: 0 0 12px; font: 600 var(--v5-h3)/1.35 var(--v5-font); color: var(--v5-ink); }
html[data-unit-frame="v5"] body.unit-shell-v2 :is(.unit-block-worked_example, .unit-block-derivation, .unit-block-notice, .unit-block-exam_tip, .unit-block-misconception) .unit-block-identity { display: flex; flex-direction: column; gap: 4px; }
html[data-unit-frame="v5"] body.unit-shell-v2 :is(.unit-block-worked_example, .unit-block-derivation, .unit-block-notice, .unit-block-exam_tip, .unit-block-misconception) .unit-block-title { font: 600 var(--v5-h3)/1.35 var(--v5-font); color: var(--v5-ink); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-worked_example .unit-block-title::before { content: none; }

/* level 3: one small-caps label style for every kind of block */
html[data-unit-frame="v5"] body.unit-shell-v2 :is(.unit-block-worked_example, .unit-block-derivation, .unit-block-notice, .unit-block-exam_tip, .unit-block-misconception, .unit-block-equation_summary) .unit-block-label,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-memory-badge,
html[data-unit-frame="v5"] details.v5-practice > summary {
    font: 600 11.5px/1.5 var(--v5-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v5-unit-ink);
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-checkpoint .unit-block-heading { display: block; margin: 0 0 2px; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-checkpoint .unit-block-identity { display: block; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-checkpoint .unit-block-label { display: block; margin: 0; font: 600 11.5px/1.5 var(--v5-font); letter-spacing: .14em; text-transform: uppercase; color: var(--v5-unit-ink); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-checkpoint > p { display: block; margin: 0; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-checkpoint { margin-top: 28px; }

/* rhythm: a little more air before each sub-heading, so the outline reads at a glance */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section > :is(.v5-fig, .unit-block-worked_example, .unit-block-derivation, .unit-block-definition, .unit-block-formula:not(.unit-block-definition + .unit-block-formula), .unit-block-equation_summary) { margin-top: 24px; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section > .unit-section-heading + .unit-section-lead + .v5-fig { margin-top: 0; }

/* contents rail: a small heading and a clear current item */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-head { display: block; margin: 0 0 8px 12px; padding: 0; border: 0; background: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-head strong { font: 600 11.5px/1.5 var(--v5-font); letter-spacing: .14em; text-transform: uppercase; color: var(--v5-grey); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-head .unit-toc-close { display: none; }
/* on phones the contents is a drawer over the page: its heading row carries a small grey close key, 44 px to tap */
@media (max-width: 760px) {
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-panel {
        padding: 8px 8px 10px; border: 1px solid var(--v5-line); border-radius: 16px;
        background: var(--v5-card); box-shadow: 0 18px 50px rgba(20, 20, 15, .18);
    }
    html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-toc-panel { box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 2px 12px; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-head .unit-toc-close {
        display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
        border: 0; border-radius: 50%; background: none; color: var(--v5-grey); font: 400 22px/1 var(--v5-font); cursor: pointer;
    }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-head .unit-toc-close:hover { background: var(--v5-raised); color: var(--v5-ink); }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-head .unit-toc-close:focus-visible { outline: 2px solid var(--v5-unit); outline-offset: -2px; }
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-link.is-active { background: color-mix(in srgb, var(--v5-unit) 8%, transparent); border-radius: 0 8px 8px 0; color: var(--v5-unit-ink); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-link > span:first-child:not(.unit-toc-label) { min-width: 1.6em; font-variant-numeric: tabular-nums; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-toc-link .unit-toc-start-mark { visibility: hidden; }   /* "Start" has no number and no mark (Ethan 2026-10-25) */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article p.unit-section-lead { color: var(--v5-grey); }
@media (min-width: 1024px) {
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig { grid-template-rows: auto auto 1fr !important; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig > .v5-fig-title { grid-column: 1 / -1 !important; grid-row: 1 !important; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig > svg { grid-row: 2 / span 2 !important; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig > .v5-fig-seg { grid-row: 2 !important; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig > .v5-fig-readout { grid-row: 3 !important; }
}

/* ===================== calm layers, one column (Ethan 2026-10-22, third pass) =====================
   “Too colourful, and boxes of every width.” Back to the unit accent + neutrals, with the
   definition tint as the only extra colour. Hierarchy comes from size, weight and space only.
   Every block of a Part sits on one column with the same left and right edges. */
/* Unit title: the largest on the page */
html[data-unit-frame="v5"] body.unit-shell-v2 .v5-band #unit-title { font-size: 40px; line-height: 1.12; }
/* Part heading: a plain number beside a smaller title */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section-heading { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section-number {
    grid-row: 1 / span 2;
    align-self: end;
    min-width: 0;
    margin: 0 0 3px;
    font: 600 26px/1 var(--v5-font);
    letter-spacing: 0;
    color: var(--v5-faint, #a8a69e);
    font-variant-numeric: tabular-nums;
}
/* one column for every block */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section > *,
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section > :is(.v5-fig, .unit-block-worked_example, .unit-block-derivation, .unit-block-equation_summary, .unit-block-retrieval_map, .unit-block-memory_deck, details.v5-practice, .unit-section-heading) { max-width: var(--v5-col); }
/* one neutral card for worked examples, derivations and notes */
html[data-unit-frame="v5"] body.unit-shell-v2 :is(.unit-block-worked_example, .unit-block-derivation, .unit-block-notice, .unit-block-exam_tip, .unit-block-misconception) {
    background: var(--v5-card);
    border: 1px solid var(--v5-line);
    border-radius: var(--v5-r);
    box-shadow: none;
}
@media (max-width: 760px) {
    html[data-unit-frame="v5"] { --v5-title: 23px; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .v5-band #unit-title { font-size: 30px; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section-number { font-size: 20px; }
}
/* definitions and their formula stay one must-know card */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section > .unit-block-definition:has(+ :is(.unit-block-definition, .unit-block-formula)) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 8px; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section > .unit-block-definition + :is(.unit-block-definition, .unit-block-formula) { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 8px; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section > .unit-block-definition + :is(.unit-block-definition, .unit-block-formula) { margin-top: 0 !important; }

/* Continuous reading width: window space goes to text and cards, while figures keep a separate cap. */
html[data-unit-frame="v5"] { --v5-shell: 2680px; --v5-col: 1960px; --v5-prose: 100%; --v5-fig-s: 220px; --v5-fig-m: 280px; --v5-fig-l: 340px; }
html[data-unit-frame="v5"] { --v5-wide: var(--v5-col); }
html[data-unit-frame="v5"] body.unit-shell-v2 :is(.unit-shell-workspace, .unit-shell-hero-inner.has-v5-band) { max-width: var(--v5-shell); }
/* One continuous content measure aligns every text/card/figure outer edge.
   Scientific drawings retain their own caps inside this content grid. */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section { max-width: min(100%, var(--v5-prose)); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-section > .unit-block-figure:not(.unit-block-lesson-opening) { width: 100%; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-figure:not(.unit-block-lesson-opening) .unit-figure { max-width: 590px; margin-inline: auto; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-block-paragraph p { max-width: var(--v5-prose); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > :not(.v5-fig, .unit-block-worked_example, .unit-block-derivation, .unit-retrieval-map, .unit-memory-deck, details.v5-practice, .unit-section-heading, .unit-lesson-transition, [data-unit-visual-extension]) { max-width: var(--v5-prose); }

html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > [data-unit-visual-extension]:not(.v5-fig) { max-width: 100%; }

/* figure sizes: the drawing has a fixed height and takes the width its viewBox gives it */
@media (min-width: 1024px) {
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig > svg.v5-kit { width: auto; height: var(--v5-fig-m); max-height: none; max-width: 100%; justify-self: start; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig.v5-fig--s > svg.v5-kit { height: var(--v5-fig-s); }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig.v5-fig--l > svg.v5-kit { height: var(--v5-fig-l); }
    html[data-unit-frame="v5"] .v5-worked svg { width: auto; height: var(--v5-fig-s); max-height: none; max-width: 100%; margin: 0 auto; }
}

/* 1920 px and wider: figure cards stand on the right, the explanation and short cards run beside them */
@media (min-width: 1920px) {
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section { max-width: min(100%, var(--v5-prose)); }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section::after { content: ""; display: block; clear: both; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig {
        float: right; clear: right; width: min(60%, 980px); max-width: none !important; margin: 4px 0 24px 44px !important;
    }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > :is(.unit-block-definition, .unit-block-formula, .unit-block-notice, .unit-block-exam_tip, .unit-block-misconception, .unit-block-checkpoint, .unit-block-equation_summary, .unit-block-equation-summary, .unit-notice) { display: flow-root; width: auto; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section .v5-worked { display: flow-root; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > :is(.unit-section-heading, .unit-block-worked_example, .unit-block-derivation, .unit-block-retrieval_map, .unit-block-memory_deck, details.v5-practice, .unit-lesson-transition, .v5-fig + .v5-fig) { clear: both; }
}

/* ===================== the figure is the door to its experiment (Ethan 2026-10-25, option A) ===================== */
html[data-unit-frame="v5"] .v5-fig-door {
    position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 8px;
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
html[data-unit-frame="v5"] .v5-fig-door::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(120% 90% at 85% 100%, color-mix(in srgb, var(--v5-unit) 16%, transparent), transparent 62%);
}
html[data-unit-frame="v5"] .v5-fig-door:is(:hover, :focus-visible)::after { opacity: 1; }
html[data-unit-frame="v5"] .v5-fig-door:focus-visible { outline: 3px solid color-mix(in srgb, var(--v5-unit) 45%, transparent); outline-offset: 3px; }
html[data-unit-frame="v5"] .v5-fig-badge {
    position: absolute; right: 10px; bottom: 10px; z-index: 1; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 20px);
    padding: 6px 12px 6px 7px; border-radius: 999px; background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 2px 10px rgba(30, 40, 40, .14), inset 0 0 0 1px rgba(255, 255, 255, .6);
    font: 600 13.5px/1.25 var(--v5-font); color: var(--v5-unit-ink);
    transition: transform .35s cubic-bezier(.32, .72, 0, 1), background .25s ease;
}
html[data-unit-frame="v5"] .v5-fig-badge i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--v5-unit); }
html[data-unit-frame="v5"] .v5-fig-badge i::before { content: ""; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
html[data-unit-frame="v5"] .v5-fig-door:is(:hover, :focus-visible) .v5-fig-badge { transform: translateY(-3px) scale(1.03); background: #fff; }
html[data-unit-frame="v5"] .v5-fig-badge-more { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; transition: max-width .45s cubic-bezier(.32, .72, 0, 1); }
html[data-unit-frame="v5"] .v5-fig-door:is(:hover, :focus-visible) .v5-fig-badge-more { max-width: 26em; }
html[data-unit-frame="v5"] .v5-fig-badge-words { white-space: nowrap; }
html[data-unit-frame="v5"] .v5-fig-door:active .v5-fig-badge { transform: scale(.98); }
html[data-unit-frame="v5"] .v5-fig-door.is-badge-below { overflow: visible; }
html[data-unit-frame="v5"] .v5-fig-door.is-badge-below .v5-fig-badge { position: static; width: fit-content; margin: 8px 0 2px auto; }
html[data-unit-frame="v5"] .v5-fig-ghost {
    position: fixed; z-index: 9990; display: grid; place-items: center; overflow: hidden; border-radius: 12px;
    background: var(--v5-scene); box-shadow: 0 30px 80px rgba(20, 30, 30, .28);
    transition: left .43s cubic-bezier(.32, .72, 0, 1), top .43s cubic-bezier(.32, .72, 0, 1), width .43s cubic-bezier(.32, .72, 0, 1), height .43s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
}
html[data-unit-frame="v5"] .v5-fig-ghost > svg { width: 100%; height: 100%; }
/* a Unit's own launch button can wait out of sight while the drawing is the door (its dialog opens on top) */
html[data-unit-frame="v5"] .v5-lab-host { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-unit-frame="v5"] .v5-fig-ghost.gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    html[data-unit-frame="v5"] :is(.v5-fig-badge, .v5-fig-badge-more, .v5-fig-door::after) { transition: none; }
    html[data-unit-frame="v5"] .v5-fig-door:is(:hover, :focus-visible, :active) .v5-fig-badge { transform: none; }
}
/* the door takes the drawing's place in the card grid and its height tier */
@media (min-width: 1024px) {
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig > .v5-fig-door { grid-column: 1 !important; grid-row: 2 / span 2 !important; align-self: center; justify-self: start; width: auto; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig > .v5-fig-door > svg.v5-kit { width: auto; height: var(--v5-fig-m); max-height: none; max-width: 100%; }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig.v5-fig--s > .v5-fig-door > svg.v5-kit { height: var(--v5-fig-s); }
    html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article > .unit-section > .v5-fig.v5-fig--l > .v5-fig-door > svg.v5-kit { height: var(--v5-fig-l); }
}

/* ===================== box system (Ethan 2026-10-25): one card, light and dark =====================
   Every box in the teaching text is the same card: --v5-card with a 1px --v5-line border and --v5-r corners, no
   tint, no shadow. Its kind shows only in its small Unit-colour label; must-know boxes (definition, formula, formula
   summary) add a 3px Unit-colour line on the left. What sits inside a card (step buttons, formula cells, chips, the
   experiment entry) is one level up, --v5-raised. Groups of cards (memory deck, retrieval map, topic grid, practice
   panel) have no surface of their own. A Unit's own stylesheet never restyles these boxes
   (scripts/check-unit-box-styles.cjs); references and inventory: .codex-tmp/v51-shared-frame/boxes/. */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article :is(.v5-fig, .unit-block-definition, .unit-block-formula, .unit-block-worked_example, .unit-block-derivation, .unit-block-notice, .unit-block-exam_tip, .unit-block-misconception, .unit-block-equation-summary, .unit-block-equation_summary, .unit-notice, .unit-memory-item, .unit-retrieval-strand, .unit-topic-card, .unit-quantity-compare, .unit-studio-item, .unit-block-equation-chooser, .unit-practice-card) {
    background: var(--v5-card) !important; background-image: none !important;
    border: 1px solid var(--v5-line) !important; border-radius: var(--v5-r) !important; box-shadow: none !important;
}
html[data-unit-frame="v5"] body.unit-shell-v2.unit-shell-v2 .unit-article :is(.unit-block-definition, .unit-block-formula, .unit-block-equation-summary, .unit-block-equation_summary) { border-left: 3px solid var(--v5-unit) !important; }
/* a definition and its formula stay one must-know card */
html[data-unit-frame="v5"] body.unit-shell-v2.unit-shell-v2 .unit-section > .unit-block-definition:has(+ :is(.unit-block-definition, .unit-block-formula)) { border-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html[data-unit-frame="v5"] body.unit-shell-v2.unit-shell-v2 .unit-section > .unit-block-definition + :is(.unit-block-definition, .unit-block-formula) { border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article :is(.unit-memory-group, .unit-memory-deck, .unit-retrieval-map, .unit-topic-grid, .unit-practice-panel, .unit-derivation-facts, .unit-derivation-facts > div, .unit-equation-summary-row) {
    background: transparent !important; background-image: none !important; box-shadow: none !important; border-color: var(--v5-line) !important;
}
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article :is(.unit-memory-group, .unit-memory-deck, .unit-retrieval-map, .unit-topic-grid, .unit-practice-panel) { border: 0 !important; }
/* the Paper Builder panel was a dark gradient with white words: on no surface its words take the page inks (Unit 5, 2026-10-26) */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article .unit-practice-panel { color: var(--v5-ink); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article .unit-practice-panel p { color: var(--v5-grey); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article .unit-practice-panel::after { content: none; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article .unit-equation-summary-rows { background: transparent !important; border: 1px solid var(--v5-line) !important; box-shadow: none !important; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article :is(.unit-equation-summary-formula, .unit-memory-action-icon, .unit-quantity-examples span, .unit-topic-code, .unit-equation-chooser-button) {
    background: var(--v5-raised) !important; background-image: none !important; border-color: var(--v5-line-strong) !important; box-shadow: none !important;
}
/* the prefix scale (Unit 1) is a row of chips: the inner level, the base unit marked by the Unit line (Unit 1, 2026-10-26) */
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article .unit-prefix-item { background: var(--v5-raised) !important; background-image: none !important; border: 1px solid var(--v5-line-strong); color: var(--v5-ink); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article .unit-prefix-item.is-base { border-color: var(--v5-unit); box-shadow: inset 0 0 0 1px var(--v5-unit); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article .unit-prefix-item strong { color: var(--v5-unit); }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article .unit-prefix-item small { color: var(--v5-grey); }
html[data-unit-frame="v5"] body.unit-shell-v2 a.unit-primary-action { background: var(--v5-raised) !important; border: 1px solid var(--v5-line-strong) !important; box-shadow: none !important; color: var(--v5-ink) !important; }
html[data-unit-frame="v5"] body.unit-shell-v2 .unit-article .unit-equation-chooser-button:is(.is-active, [aria-selected="true"]) { border-color: var(--v5-unit) !important; box-shadow: inset 0 0 0 1px var(--v5-unit) !important; }

/* Dark appearance (V5.1, Ethan 2026-10-25): page/card/raised use site tokens.
 * Native diagrams use kit recolouring; official paper and legacy drawings stay paper.
 * Design: .codex-tmp/v51-shared-frame/dark/深色参考与规则.md
 */
html[data-unit-frame="v5"][data-appearance="dark"] {
    color-scheme: dark;
    --v5-paper: var(--ph-bg, #161513);
    --v5-card: var(--ph-surface, #201f1c);
    --v5-scene: var(--ph-surface, #201f1c);
    --v5-raised: var(--ph-surface-raised, #2a2925);
    --v5-ink: var(--ph-ink, #f1efe9);
    --v5-grey: var(--ph-ink-secondary, #b5b2a8);
    --v5-faint: var(--ph-ink-tertiary, #8d8a81);
    --v5-line: var(--ph-line, #2f2d29);
    --v5-line-strong: var(--ph-line-strong, #3e3b36);
    --v5-tint: var(--ph-surface, #201f1c);
}
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 {
    --v5-unit: var(--unit-accent-dark, #7fc4c9);
    --v5-unit-ink: var(--unit-accent-dark, #7fc4c9);
}
/* contents rail: the Unit colour marks the current item, no tinted block */
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-toc-link.is-active { background: none; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-toc-link .unit-toc-label-zh { color: var(--v5-grey) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-toc-link.is-active .unit-toc-label-zh { color: var(--v5-ink) !important; }

/* ---- outside the article: footer links are cards too ---- */
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 :is(.unit-shell-footer, .unit-neighbour-link) { background: var(--v5-card) !important; border-color: var(--v5-line) !important; color: var(--v5-ink); }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article .unit-equation-chooser-panel { background: var(--v5-card) !important; border-color: var(--v5-line) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-notice, .unit-quantity-compare, .unit-studio-item, .unit-block-equation-chooser, .unit-topic-card, .unit-memory-group, .unit-memory-deck, .unit-retrieval-map) { color: var(--v5-ink); }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-quantity-kind + .unit-quantity-kind) { border-color: var(--v5-line) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 :is(.unit-shell-footer, .unit-neighbour-link) :is(span, strong, small, p) { color: inherit; }
html[data-unit-frame="v5"][data-appearance="dark"] .v5-intro { background: var(--v5-card); box-shadow: 0 0 0 1px var(--v5-line); }
html[data-unit-frame="v5"][data-appearance="dark"] .v5-intro-frame { background: var(--v5-raised); box-shadow: 0 0 0 1px var(--v5-line-strong); }

/* ---- level 3, raised: what sits inside a card (buttons, formula rows, chips, the experiment badge) ---- */
html[data-unit-frame="v5"][data-appearance="dark"] .v5-fig-btn { background: var(--v5-raised); border-color: var(--v5-line-strong); }
html[data-unit-frame="v5"][data-appearance="dark"] .v5-fig-btn.on { background: var(--v5-raised); border-color: var(--v5-unit); color: var(--v5-ink); box-shadow: inset 0 0 0 1px var(--v5-unit); }
html[data-unit-frame="v5"][data-appearance="dark"] .v5-fig > .v5-fig-seg .v5-fig-btn.on::before { color: var(--v5-unit); }
html[data-unit-frame="v5"][data-appearance="dark"] .v5-fig-play { background: var(--v5-unit); color: var(--ph-bg, #161513); }
html[data-unit-frame="v5"][data-appearance="dark"] .v5-fig-badge { background: rgba(42, 41, 37, .9); box-shadow: 0 2px 10px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--v5-line-strong); }
html[data-unit-frame="v5"][data-appearance="dark"] .v5-fig-door:is(:hover, :focus-visible) .v5-fig-badge { background: var(--v5-raised); }
html[data-unit-frame="v5"][data-appearance="dark"] .v5-fig-badge i::before { border-color: transparent transparent transparent var(--ph-bg, #161513); }
html[data-unit-frame="v5"][data-appearance="dark"] .v5-fig-ghost { box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-equation-summary-formula { color: var(--v5-ink); }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-memory-action-icon, .unit-quantity-examples span) { color: var(--v5-ink) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article .unit-topic-code { color: var(--v5-unit) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article .unit-equation-chooser-button { color: var(--v5-ink) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article .unit-equation-chooser-button :is(strong, b, span, small) { color: inherit !important; }

/* ---- type: ink, grey and the Unit colour for small labels; the older styles fix some inks, here they follow ---- */
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-notice, .unit-notice strong, .unit-notice p, .unit-block-title, .unit-equation-summary-row, .unit-retrieval-strand, .unit-memory-item, .unit-memory-item summary) { color: var(--v5-ink); }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-block-label, .unit-memory-badge) { color: var(--v5-unit); }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article .unit-notice-label { background: none !important; color: var(--v5-unit) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 :is(.unit-equation-summary-note strong, .unit-equation-summary-heading .unit-block-title, .unit-equation-summary-intro) { color: var(--v5-ink) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-equation-summary-note :is(span, p, small) { color: var(--v5-grey) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-term-annotation, .unit-term-annotation *) { color: var(--v5-unit) !important; text-decoration-color: color-mix(in srgb, var(--v5-unit) 55%, transparent); }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article > .unit-section :is(h3, h4, [class$="-subsection-title"]):not(.unit-practice-card *, .unit-block-interactive_visual:not(:has(> .v5-fig)) *, [data-unit-visual-extension]:not(.v5-fig) *, .unit-block-figure *) { color: var(--v5-ink) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-retrieval-map, .unit-memory-deck) :is(strong, b, h3, h4, p, li, summary) { color: var(--v5-ink) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-retrieval-map, .unit-memory-deck) :is(span, small):not(.unit-memory-action-icon) { color: var(--v5-grey) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article .unit-memory-deck :is(.unit-memory-action-closed, .unit-memory-action-open, .unit-memory-kicker, [class*="tier"] > span:first-child) { color: var(--v5-unit) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article .unit-memory-deck span.unit-memory-tier { color: var(--v5-ink) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article .unit-memory-action { color: var(--v5-unit) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-practical-studio, .unit-quantity-compare, .unit-block-equation-chooser) :is(strong, b, th, h3, h4, p, li) { color: var(--v5-ink) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article .unit-practical-studio :is(.unit-studio-label, .unit-studio-action-label, .unit-answer-chevron, [class*="studio-step"], [class*="studio-kicker"]) { color: var(--v5-unit) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-quantity-kind > span, .unit-quantity-kind > p, .unit-topic-grid .unit-topic-card p, .unit-studio-summary-copy p, .unit-practical-studio small, .unit-equation-chooser-context span) { color: var(--v5-grey) !important; }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article :is(.unit-studio-flow-arrow, .unit-derivation-facts span) { color: var(--v5-unit) !important; }

/* ---- paper: official past-paper questions and images, and older drawings not yet redrawn with the kit ---- */
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 :is(.unit-practice-card, .unit-article .unit-block-interactive_visual:not(:has(> .v5-fig)), .unit-article .unit-section > [data-unit-visual-extension]:not(.v5-fig), .unit-article .unit-block-figure) {
    color-scheme: light;
    --v5-paper: var(--ph-paper, #eceae4); --v5-card: var(--ph-paper-sheet, #efede7); --v5-scene: var(--ph-paper, #eceae4); --v5-raised: #ffffff;
    --v5-ink: var(--ph-paper-ink, #1f1e1c); --v5-grey: var(--ph-paper-ink-secondary, #55534d); --v5-faint: #8d8a81;
    --v5-line: var(--ph-paper-line, #d6d3ca); --v5-line-strong: #c9c5b8; --v5-tint: #edf3f1;
    --v5-unit: var(--unit-accent, #0e7490); --v5-unit-ink: color-mix(in srgb, var(--unit-accent, #0e7490) 82%, #000);
    color: var(--ph-paper-ink, #1f1e1c);
}
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article .unit-practice-card { background: var(--ph-paper-sheet, #efede7) !important; border-color: transparent !important; }
/* the question renders in its own shadow root: multiply the whole question so a white scan sits in the sheet */
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-practice-card :is(img, .unit-practice-question-host) { mix-blend-mode: multiply; }
/* the older styles write many inks as --unit-deep (dark navy): on dark the article reads it as the page ink, and every
   sheet of paper gets the Unit's own deep ink back */
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 { --v5-deep-light: var(--unit-deep); }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 .unit-article { --unit-deep: var(--v5-ink); }
html[data-unit-frame="v5"][data-appearance="dark"] body.unit-shell-v2 :is(.unit-practice-card, .unit-article .unit-block-interactive_visual:not(:has(> .v5-fig)), .unit-article .unit-section > [data-unit-visual-extension]:not(.v5-fig), .unit-article .unit-block-figure) { --unit-deep: var(--v5-deep-light); }