:root {
    --unit-shell-width: 1320px;
    --unit-reading-width: 850px;
    --unit-header-height: 52px;
    --unit-surface: rgba(255, 255, 255, .94);
    --unit-line: color-mix(in srgb, var(--unit-accent) 12%, rgba(15, 23, 42, .07));
    --unit-ink: #18363d;
    --unit-muted: #587078;
    --unit-text-micro: 11px;
    --unit-text-meta: 12px;
    --unit-text-ui: 13px;
    --unit-text-small: 14px;
    --unit-text-body: 16.5px;
    --unit-text-emphasis: 17px;
    --unit-text-detail: 15.5px;
    --unit-text-copy: 15px;
    --unit-text-support: 14.5px;
    --unit-text-caption: 13px;
    --unit-text-action: 13.5px;
    --unit-text-heading-small: 16px;
    --unit-text-heading-medium: 17px;
    --unit-text-heading-large: 18px;
    --unit-text-toc: 13.25px;
    --unit-equation-summary-size: 15px;
    --unit-block-kicker-size: 11.5px;
    --unit-block-title-size: 15px;
    --unit-disclosure-size: 14px;
    --unit-part-title-size: clamp(26px, 2.25vw, 32px);
    --unit-part-number-size: 18px;
    --unit-display-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
    --unit-radius-control: 10px;
    --unit-radius-card: 16px;
    --unit-radius-panel: 22px;
    --unit-shadow-card: 0 12px 32px rgba(16, 59, 74, .07);
    --unit-shadow-overlay: 0 24px 70px rgba(15, 23, 42, .2);
    --unit-motion-fast: 140ms;
    --unit-motion-panel: 220ms;
    --unit-motion-ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-text-size="small"] {
    --display-preference-font: 10px;
    --unit-text-micro: 10px;
    --unit-text-meta: 11px;
    --unit-text-ui: 12px;
    --unit-text-small: 13px;
    --unit-text-body: 15px;
    --unit-text-emphasis: 15.5px;
    --unit-text-detail: 14px;
    --unit-text-copy: 13.5px;
    --unit-text-support: 13px;
    --unit-text-caption: 12px;
    --unit-text-action: 12.5px;
    --unit-text-heading-small: 14.5px;
    --unit-text-heading-medium: 15.5px;
    --unit-text-heading-large: 16.5px;
    --unit-text-toc: 12px;
    --unit-equation-summary-size: 14px;
    --unit-block-kicker-size: 10.5px;
    --unit-block-title-size: 14px;
    --unit-disclosure-size: 13px;
    --unit-part-number-size: 17px;
}

html[data-text-size="large"] {
    --display-preference-font: 11.5px;
    --unit-text-micro: 12.5px;
    --unit-text-meta: 13.5px;
    --unit-text-ui: 14.5px;
    --unit-text-small: 15.5px;
    --unit-text-body: 18px;
    --unit-text-emphasis: 19px;
    --unit-text-detail: 17px;
    --unit-text-copy: 16.5px;
    --unit-text-support: 15.5px;
    --unit-text-caption: 14.5px;
    --unit-text-action: 15px;
    --unit-text-heading-small: 17.5px;
    --unit-text-heading-medium: 18.5px;
    --unit-text-heading-large: 20px;
    --unit-text-toc: 14.5px;
    --unit-equation-summary-size: 16px;
    --unit-block-kicker-size: 13px;
    --unit-block-title-size: 16.5px;
    --unit-disclosure-size: 15.5px;
    --unit-part-number-size: 20px;
}

html { scroll-behavior: smooth; }
html.unit-language-rendering { scroll-behavior: auto !important; }
html.unit-language-rendering .unit-article { overflow-anchor: none; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body.unit-shell-v2 {
    min-width: 0; max-width: 100%; margin: 0; overflow-x: clip; color: var(--unit-ink);
    background:
        radial-gradient(circle at 5% 16%, color-mix(in srgb, var(--unit-light) 19%, transparent), transparent 30rem),
        radial-gradient(circle at 96% 42%, rgba(255, 204, 178, .22), transparent 26rem),
        #f4f8f7;
}

.unit-skip-link {
    position: fixed; z-index: 1000; top: 8px; left: 12px; min-height: 36px;
    display: inline-flex; align-items: center; padding: 0 13px;
    border-radius: var(--unit-radius-control); background: #fff; color: var(--unit-deep);
    box-shadow: var(--unit-shadow-overlay); font-size: var(--unit-text-ui); font-weight: 740;
    text-decoration: none; transform: translateY(calc(-100% - 16px));
    transition: transform var(--unit-motion-fast) var(--unit-motion-ease);
}
.unit-skip-link:focus { outline: 2px solid var(--unit-accent); outline-offset: 2px; transform: translateY(0); }

.unit-shell-header {
    position: sticky; top: 0; z-index: 120; height: var(--unit-header-height);
    border-bottom: 1px solid rgba(15, 23, 42, .08); background: rgba(250, 250, 252, .8);
    -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
}
.unit-shell-header-inner {
    width: min(var(--unit-shell-width), calc(100% - 36px)); height: 100%; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.unit-shell-identity { min-width: 0; display: flex; flex: 0 1 auto; align-items: center; }
.unit-shell-header .app-nav-back, .unit-shell-header .app-nav-brand { color: #172033; }
.unit-shell-tools { min-width: 0; display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 8px; }
.unit-switcher-wrap { position: relative; display: inline-flex; align-items: center; }
.unit-switcher-wrap::after {
    content: ""; position: absolute; right: 12px; width: 6px; height: 6px;
    border-right: 1.5px solid #667085; border-bottom: 1.5px solid #667085;
    transform: translateY(-2px) rotate(45deg); pointer-events: none;
}
.unit-switcher {
    max-width: 230px; height: 34px; appearance: none; border: 1px solid rgba(15, 23, 42, .11);
    border-radius: var(--unit-radius-control); padding: 0 32px 0 12px; background: rgba(255, 255, 255, .72);
    color: #344054; font-size: var(--unit-text-ui); font-weight: 650; white-space: nowrap; cursor: pointer;
}
.unit-switcher:hover { border-color: color-mix(in srgb, var(--unit-accent) 28%, rgba(15, 23, 42, .11)); background: #fff; }
.unit-switcher:focus-visible { outline: 2px solid color-mix(in srgb, var(--unit-accent) 42%, transparent); outline-offset: 2px; }
.unit-shell-header #authBtn { min-width: 0; }
.unit-shell-header .nav-admin-label-compact { display: none; }
.unit-shell-header #authBtn .login-link, .unit-shell-header #authBtn .user-profile-link {
    min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
    border: 1px solid rgba(15, 23, 42, .1); border-radius: var(--unit-radius-control); background: rgba(255, 255, 255, .72);
    color: #344054; text-decoration: none; font-size: var(--unit-text-ui); font-weight: 650;
}
.unit-shell-header #authBtn .user-avatar {
    width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 8px;
    color: #fff; font-size: var(--unit-text-micro);
}
.unit-shell-header #authBtn :is(.login-link, .user-profile-link):hover {
    border-color: color-mix(in srgb, var(--unit-accent) 26%, rgba(15, 23, 42, .1));
    background: color-mix(in srgb, var(--unit-accent) 7%, #fff);
    color: var(--unit-deep);
}
.unit-shell-header :is(.physics-language-switch, .physics-text-size-trigger) {
    border-color: color-mix(in srgb, var(--unit-accent) 14%, rgba(15, 23, 42, .08));
}
.unit-shell-header :is(.physics-language-switch button:hover, .physics-language-switch button:focus-visible, .physics-language-switch button.is-active, .physics-text-size-trigger:hover, .physics-text-size-trigger:focus-visible) {
    color: var(--unit-deep);
}
.unit-shell-header .physics-language-switch button.is-active {
    box-shadow: 0 2px 7px color-mix(in srgb, var(--unit-accent) 13%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--unit-accent) 10%, transparent);
}
.unit-shell-header :is(.physics-language-switch button:focus-visible, .physics-text-size-trigger:focus-visible) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--unit-accent) 22%, transparent);
}
.unit-shell-header .physics-text-size-menu {
    border-color: color-mix(in srgb, var(--unit-accent) 16%, rgba(15, 23, 42, .08));
}
.unit-shell-header .physics-text-size-menu button:is(:hover, :focus-visible, .is-active) {
    color: var(--unit-deep); background: color-mix(in srgb, var(--unit-accent) 9%, #fff);
}

.unit-shell-hero { position: relative; overflow: hidden; color: #fff; background: var(--unit-hero-background); }
.unit-shell-hero::before {
    content: ""; position: absolute; width: 460px; height: 460px; top: -310px; right: 6%;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%;
    box-shadow: 0 0 0 58px rgba(255, 255, 255, .025), 0 0 0 118px rgba(255, 255, 255, .018);
}
.unit-shell-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(112deg, rgba(255, 255, 255, .075), transparent 36%, rgba(255, 255, 255, .025));
}
.unit-shell-hero-inner {
    position: relative; z-index: 1; width: min(var(--unit-shell-width), calc(100% - 48px)); margin: 0 auto;
    padding: clamp(64px, 8vw, 108px) 0 clamp(48px, 7vw, 78px);
}
.unit-hero-eyebrow {
    display: flex; align-items: center; gap: 9px; margin: 0 0 20px; color: rgba(255, 255, 255, .7);
    font-size: var(--unit-text-meta); font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
}
.unit-hero-eyebrow::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--unit-light);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .08);
}
.unit-shell-hero h1 {
    max-width: 1120px; margin: 0; color: #fff;
    font-family: var(--unit-display-font);
    font-size: clamp(42px, 5vw, 64px); font-weight: 650; letter-spacing: -.04em; line-height: 1.02;
}
.unit-hero-subtitle {
    max-width: 720px; margin: 24px 0 0; color: rgba(255, 255, 255, .76);
    font-size: clamp(16px, 2vw, 20px); line-height: 1.55;
}
.unit-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.unit-hero-chip {
    min-height: 29px; display: inline-flex; align-items: center; padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .82); font-size: var(--unit-text-meta); font-weight: 650; white-space: nowrap;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.unit-practice-count-chip { text-decoration: none; transition: background .16s ease, transform .16s ease; }
.unit-practice-count-chip:hover { background: rgba(255, 255, 255, .17); transform: translateY(-1px); }
.unit-practice-count-chip::after { content: "↓"; margin-left: 6px; font-size: var(--unit-text-micro); opacity: .78; }
.unit-hero-chip.is-status { background: rgba(255, 255, 255, .16); color: #fff; }
.unit-reading-progress { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, .1); }
.unit-reading-progress span { display: block; width: 0; height: 100%; background: rgba(255, 255, 255, .86); transition: width .12s linear; }

.unit-mobile-toc-bar, .unit-mobile-resume { display: none; }
.unit-shell-workspace {
    width: min(var(--unit-shell-width), calc(100% - 32px)); margin: 0 auto; padding: 34px 0 72px;
    display: grid; grid-template-columns: 206px minmax(0, var(--unit-reading-width)) 206px;
    justify-content: center; gap: 20px; align-items: start;
}
.unit-toc, .unit-action-rail { position: sticky; top: calc(var(--unit-header-height) + 24px); }
.unit-toc-panel, .unit-action-card, .unit-section {
    border: 1px solid var(--unit-line); background: var(--unit-surface); box-shadow: var(--unit-shadow-card);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.unit-toc-panel { overflow: hidden; border-radius: var(--unit-radius-card); padding: 9px; }
.unit-toc-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 9px 10px; }
.unit-toc-head strong { color: #344054; font-size: var(--unit-text-meta); letter-spacing: .065em; text-transform: uppercase; }
.unit-toc-close { display: none; width: 30px; height: 30px; border: 0; border-radius: 9px; background: #f2f4f7; color: #475467; cursor: pointer; }
.unit-toc-list { position: relative; display: grid; gap: 2px; }
.unit-toc-indicator {
    position: absolute; z-index: 0; top: 0; left: 1px; width: 3px; height: 32px;
    border-radius: 999px; background: var(--unit-accent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--unit-accent) 28%, transparent);
    transform: translateY(0); transition: transform .28s cubic-bezier(.2, .8, .2, 1), height .2s ease;
    pointer-events: none;
}
.unit-toc-link {
    position: relative; z-index: 1; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px; align-items: start;
    padding: 8px 9px; border-radius: 10px; color: #667085; text-decoration: none;
    font-size: var(--unit-text-toc); line-height: 1.42; transition: background .16s ease, color .16s ease;
}
.unit-toc-link:not(.is-unnumbered) > span:first-child { color: #98a2b3; font-variant-numeric: tabular-nums; }
.unit-toc-label { min-width: 0; display: grid; gap: 1px; }
.unit-toc-label-en { min-width: 0; }
.unit-toc-label-zh { display: none; color: #7c8b98; font-size: var(--unit-text-meta); font-weight: 560; line-height: 1.38; }
html[lang^="zh"] .unit-toc-label-zh { display: block; }
.unit-toc-start-mark {
    align-self: center; justify-self: center; width: 5px; height: 5px; border-radius: 50%;
    background: color-mix(in srgb, var(--unit-accent) 28%, #d6dddf);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--unit-accent) 5%, transparent);
}
.unit-toc-link:hover { background: #f2f4f7; color: #344054; }
.unit-toc-link.is-active { background: transparent; color: var(--unit-deep); font-weight: 680; }
.unit-toc-link.is-active:not(.is-unnumbered) > span:first-child { color: var(--unit-accent); }
.unit-toc-link.is-active .unit-toc-label-zh { color: color-mix(in srgb, var(--unit-accent) 72%, #667085); }
.unit-toc-link.is-active .unit-toc-start-mark { background: var(--unit-accent); }

.unit-article { min-width: 0; display: grid; gap: 16px; }
.unit-content-loading { min-height: 240px; display: grid; align-content: center; }
.unit-content-loading .unit-section-lead { max-width: 440px; }
.unit-content-block {
    margin-top: 17px; padding: 17px 18px; border: 0; border-radius: 18px;
    background: color-mix(in srgb, var(--unit-accent) 3.5%, #f8fafb);
}
.unit-content-block h3 { margin: 0; color: #214b52; font-size: var(--unit-text-emphasis); line-height: 1.38; }
.unit-content-block p { margin: 8px 0 0; color: #526b72; font-size: var(--unit-text-detail); line-height: 1.66; }
.unit-block-heading { display: block; }
.unit-block-identity { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.unit-block-label {
    display: inline-flex; align-items: center; width: fit-content; min-height: 15px;
    color: var(--unit-accent); font-size: var(--unit-block-kicker-size); font-weight: 760; letter-spacing: .075em; line-height: 1.2; text-transform: uppercase;
}
.unit-block-title {
    color: #35575e; font-size: var(--unit-block-title-size); font-weight: 610; line-height: 1.42;
}
.unit-block-paragraph {
    max-width: 670px; margin-top: 16px; padding: 0; border: 0; border-radius: 0; background: transparent;
}
.unit-block-paragraph p { color: #36575f; font-size: var(--unit-text-body); line-height: 1.72; }
.unit-block-paragraph p { min-width: 0; overflow-wrap: anywhere; }
.unit-block-paragraph p mjx-container {
    display: inline-block !important; max-width: 100%; overflow-x: auto; overflow-y: hidden;
    vertical-align: -.25em; overscroll-behavior-inline: contain;
}
.unit-block-definition {
    position: relative; padding: 13px 16px 13px 19px; border: 0;
    background: linear-gradient(120deg, color-mix(in srgb, var(--unit-accent) 8%, #f8fafb), color-mix(in srgb, var(--unit-accent) 2%, #fff) 76%);
    box-shadow: none;
}
.unit-block-definition::before {
    content: ""; position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px;
    border-radius: 0 999px 999px 0; background: linear-gradient(var(--unit-light), var(--unit-accent));
}
.unit-block-definition .unit-block-label {
    min-height: 0; padding: 0; background: transparent;
    font-size: var(--unit-block-kicker-size); letter-spacing: .065em;
}
.unit-definition-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.unit-memory-badge {
    display: inline-flex; align-items: center; gap: 5px; color: #71868a;
    font-size: var(--unit-text-micro); font-weight: 740; letter-spacing: .045em; text-transform: uppercase;
}
.unit-memory-badge::before {
    content: ""; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--unit-accent) 62%, #fff);
}
.unit-definition-entry {
    display: grid; grid-template-columns: fit-content(220px) minmax(0, 1fr); gap: 15px;
    align-items: baseline; margin: 7px 0 0;
}
.unit-definition-entry dt {
    margin: 0; color: var(--unit-deep); font-size: var(--unit-text-detail); font-weight: 760; line-height: 1.48;
    overflow-wrap: anywhere;
}
.unit-definition-entry dt.is-compact-term { white-space: nowrap; overflow-wrap: normal; }
.unit-definition-entry dd {
    margin: 0; color: #35575e; font-size: var(--unit-text-detail); line-height: 1.62;
}
.unit-definition-entry dd p { margin: 0; }
.unit-definition-support {
    margin-top: 5px !important; padding-top: 0; border-top: 0;
    color: #587078; font-size: var(--unit-text-small); line-height: 1.58;
}
.unit-block-worked_example { background: color-mix(in srgb, var(--unit-accent) 2.5%, #fff); }
.unit-block-misconception, .unit-block-exam_tip {
    padding: 14px 16px; border: 0; border-radius: 15px; box-shadow: none;
}
.unit-block-misconception { background: color-mix(in srgb, #bf9565 7%, #fff); }
.unit-block-misconception .unit-block-label { color: #8d6a43; }
.unit-block-exam_tip { background: color-mix(in srgb, #6785c7 7%, #fff); }
.unit-block-exam_tip .unit-block-label { color: #526faf; }
.unit-block-misconception h3, .unit-block-exam_tip h3 { font-size: var(--unit-text-heading-small); }
.unit-block-misconception .unit-block-title, .unit-block-exam_tip .unit-block-title { font-size: var(--unit-block-title-size); font-weight: 610; }
.unit-block-misconception p, .unit-block-exam_tip p { margin-top: 6px; font-size: var(--unit-text-detail); line-height: 1.62; }
.unit-block-formula {
    display: grid; gap: 7px; align-items: start; padding: 15px 18px;
    border: 0; border-left: 3px solid color-mix(in srgb, var(--unit-accent) 40%, transparent);
    border-radius: 4px 15px 15px 4px; background: color-mix(in srgb, var(--unit-accent) 4%, #fbfdfd);
}
.unit-formula-copy p { max-width: 500px; font-size: var(--unit-text-copy); line-height: 1.62; }
.unit-formula {
    display: grid; min-height: 38px; justify-content: safe center; align-items: center; width: 100%; padding: 4px 0; overflow-x: auto;
    border: 0; border-radius: 11px; background: transparent; color: var(--unit-deep);
    font-size: clamp(16px, 1.7vw, 19px); text-align: center;
}
.unit-formula mjx-container { margin: 0 !important; min-width: max-content; }
.unit-step-list { display: grid; gap: 9px; margin: 0; padding-left: 23px; color: #475467; font-size: var(--unit-text-detail); line-height: 1.64; }
.unit-step-list li::marker { color: var(--unit-accent); font-weight: 760; }

.unit-block-derivation {
    overflow: hidden; border: 0; background: color-mix(in srgb, var(--unit-accent) 3%, #f8fafb); box-shadow: none;
}
.unit-derivation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.unit-derivation-origin {
    flex: 0 0 auto; display: inline-flex; align-items: center; color: #819095;
    font-size: var(--unit-text-micro); font-weight: 680; white-space: nowrap;
}
.unit-derivation-intro { max-width: 660px; font-size: var(--unit-text-copy) !important; line-height: 1.62 !important; }
.unit-derivation-body {
    display: grid; gap: 15px; margin-top: 13px; padding-top: 4px; border-top: 0;
}
.unit-derivation-formula {
    display: grid; min-width: 0; max-width: 100%; justify-content: safe center; overflow: visible;
    color: var(--unit-deep); font-size: clamp(17px, 1.8vw, 20px); text-align: center;
}
.unit-derivation-formula.is-long { font-size: clamp(14px, 1.55vw, 18px); }
.unit-derivation-formula.is-very-long { font-size: clamp(12.5px, 1.4vw, 16px); }
.unit-derivation-formula mjx-container { max-width: 100%; margin: 0 !important; }
.unit-derivation-reasoning { display: grid; gap: 6px; padding-top: 2px; }
.unit-derivation-reasoning-label {
    color: #76898e; font-size: var(--unit-text-micro); font-weight: 760; letter-spacing: .06em; text-transform: uppercase;
}
.unit-derivation-steps { grid-template-columns: 1fr; gap: 7px; padding-left: 21px; font-size: var(--unit-text-support); line-height: 1.6; }
.unit-derivation-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    padding: 2px 0 0; border: 0; background: transparent;
}
.unit-derivation-facts > div {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: center; align-items: baseline;
    gap: 10px; min-width: 0; min-height: 36px; padding: 4px 2px;
    border-radius: 0; background: transparent;
}
.unit-derivation-facts > div + div { border-left: 0; }
.unit-derivation-facts span { display: block; color: color-mix(in srgb, var(--unit-accent) 56%, #667b81); font-size: var(--unit-text-micro); font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.unit-derivation-facts strong { display: block; color: var(--unit-deep); font-size: var(--unit-text-detail); font-weight: 690; line-height: 1.45; }
.unit-derivation-facts mjx-container { margin: 0 !important; font-size: 1.12em !important; vertical-align: 0 !important; }

.unit-block-equation-summary {
    padding: 18px 19px 19px; border: 0;
    background: color-mix(in srgb, var(--unit-accent) 3.5%, #fff); box-shadow: none;
}
.unit-equation-summary-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.unit-equation-summary-intro { max-width: 680px; margin-top: 8px !important; font-size: var(--unit-text-copy) !important; line-height: 1.62 !important; }
.unit-equation-summary-rows {
    display: grid; grid-template-columns: fit-content(58%) minmax(0, 1fr); gap: 0; margin-top: 14px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--unit-accent) 16%, #d8e1e3); border-radius: 14px;
    background: rgba(255, 255, 255, .9); box-shadow: none;
}
.unit-equation-summary-row {
    display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: stretch; gap: 0;
    min-height: 60px; padding: 0; background: rgba(255, 255, 255, .8);
}
.unit-equation-summary-row + .unit-equation-summary-row {
    border-top: 1px solid color-mix(in srgb, var(--unit-accent) 13%, #dde5e7);
}
.unit-equation-summary-formula {
    display: grid; place-items: center; min-width: 0; min-height: 60px; padding: 9px 15px;
    border-right: 1px solid color-mix(in srgb, var(--unit-accent) 13%, #dde5e7);
    background: color-mix(in srgb, var(--unit-accent) 3.5%, #fff);
    color: var(--unit-deep); font-size: var(--unit-equation-summary-size); text-align: center;
}
.unit-equation-summary-formula mjx-container {
    display: inline-block !important; max-width: 100%; margin: 0 !important;
    font-size: 108% !important;
}
.unit-equation-summary-formula mjx-mtr:not(:last-child) > mjx-mtd { padding-bottom: .26em !important; }
.unit-equation-summary-formula mjx-mtr + mjx-mtr > mjx-mtd { padding-top: .26em !important; }
.unit-equation-summary-note { display: grid; align-content: center; gap: 3px; min-width: 0; padding: 11px 17px; }
.unit-equation-summary-note strong {
    color: #314d55; font: 630 var(--unit-text-detail)/1.42 var(--unit-display-font); letter-spacing: 0;
}
.unit-equation-summary-note span { color: #63787e; font-size: var(--unit-text-caption); line-height: 1.52; }

.unit-block-equation-chooser {
    padding: 17px 19px 18px; border: 0;
    background: color-mix(in srgb, var(--unit-accent) 2.5%, #fff); box-shadow: none;
}
.unit-equation-chooser-intro { max-width: 660px; margin-top: 8px !important; font-size: var(--unit-text-copy) !important; line-height: 1.62 !important; }
.unit-equation-chooser-controls {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 2px 12px;
    margin-top: 14px; padding: 0 0 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--unit-accent) 15%, #dbe4e6); background: transparent;
}
.unit-equation-chooser-button {
    min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 8px 6px;
    border: 0; border-bottom: 2px solid transparent; border-radius: 7px 7px 0 0; background: transparent;
    color: #61767c; font: 630 var(--unit-text-caption)/1.28 var(--unit-display-font);
    cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.unit-equation-chooser-button:hover { color: var(--unit-deep); }
.unit-equation-chooser-button[aria-pressed="true"] {
    border-bottom-color: var(--unit-accent); background: color-mix(in srgb, var(--unit-accent) 4%, #fff);
    color: var(--unit-accent); box-shadow: none;
}
.unit-equation-chooser-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--unit-accent) 42%, transparent); outline-offset: 2px; }
.unit-equation-chooser-results { min-height: 92px; display: block; padding: 0; }
.unit-equation-chooser-result {
    display: grid; grid-template-columns: minmax(250px, .9fr) minmax(0, 1.1fr); align-items: stretch;
    min-width: 0; border-bottom: 1px solid color-mix(in srgb, var(--unit-accent) 11%, #e0e7e8);
}
.unit-equation-chooser-result[hidden] { display: none !important; }
.unit-equation-chooser-formula {
    display: grid; place-items: center; min-width: 0; min-height: 92px; padding: 15px 18px;
    color: var(--unit-deep); font-size: clamp(16px, 1.45vw, 18px); text-align: center;
}
.unit-equation-chooser-formula mjx-container { max-width: 100%; margin: 0 !important; }
.unit-equation-chooser-context {
    display: grid; align-content: center; gap: 4px; min-width: 0; padding: 14px 17px;
    border-left: 1px solid color-mix(in srgb, var(--unit-accent) 11%, #e0e7e8);
}
.unit-equation-chooser-context strong { color: #314d55; font: 630 var(--unit-text-detail)/1.42 var(--unit-display-font); }
.unit-equation-chooser-context span { color: #63787e; font-size: var(--unit-text-caption); line-height: 1.52; }

.unit-block-motion-route, .unit-block-motion-snapshot, .unit-block-motion-graph, .unit-block-vertical-motion { background: rgba(255, 255, 255, .84); }
.unit-motion-intro { max-width: 620px; }
.unit-block-motion-route svg {
    display: block; width: min(100%, 720px); height: auto; margin: 8px auto 0; overflow: visible;
}
.unit-motion-place { fill: #fff; stroke: var(--unit-deep); stroke-width: 1.8; }
.unit-motion-place.is-finish { fill: var(--unit-light); }
.unit-motion-place-label, .unit-motion-route-label, .unit-motion-displacement-label {
    fill: #526b72; stroke: rgba(255, 255, 255, .94); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke fill;
    font-family: var(--unit-display-font); font-size: 14px; font-weight: 650;
}
.unit-motion-route { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .88; }
.unit-motion-route.is-route-a { stroke: color-mix(in srgb, var(--unit-accent) 26%, #1677ff); }
.unit-motion-route.is-route-b { stroke: #df6b57; }
.unit-motion-traveller { fill: #fff; stroke-width: 1.8; opacity: 1; }
.unit-motion-route.is-route-a.unit-motion-traveller { stroke: color-mix(in srgb, var(--unit-accent) 26%, #1677ff); }
.unit-motion-route.is-route-b.unit-motion-traveller { stroke: #df6b57; }
.unit-motion-displacement { stroke: #223c61; stroke-width: 1.3; stroke-dasharray: 7 8; opacity: .62; }
.unit-motion-displacement-label { fill: #223c61; font-size: 13px; }
.unit-motion-displacement-arrow {
    fill: none; stroke: #223c61; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.unit-motion-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 3px; }
.unit-motion-legend span { display: inline-flex; align-items: center; gap: 6px; color: #61767c; font-size: var(--unit-text-meta); }
.unit-motion-legend span::before { content: ""; width: 17px; height: 3px; border-radius: 999px; background: var(--unit-accent); }
.unit-motion-legend .is-route-a::before { background: color-mix(in srgb, var(--unit-accent) 26%, #1677ff); }
.unit-motion-legend .is-route-b::before { background: #df6b57; }
.unit-motion-legend .is-displacement::before { height: 0; border-top: 2px dashed #223c61; background: transparent; }

.unit-motion-snapshot-stage { display: grid; gap: 12px; margin-top: 15px; }
.unit-motion-snapshot-row {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 70px;
    padding: 11px 13px; border-radius: 14px; background: color-mix(in srgb, var(--unit-accent) 4%, #f7faf9);
}
.unit-motion-snapshot-label strong { display: block; color: #35575e; font-size: 14.5px; }
.unit-motion-snapshot-label small { display: block; margin-top: 3px; color: #718489; font-size: var(--unit-text-meta); line-height: 1.45; }
.unit-motion-dot-track {
    position: relative; height: 30px; border-bottom: 2px solid color-mix(in srgb, var(--unit-accent) 25%, #cfd8dc);
    background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(77, 99, 105, .08) calc(20% - 1px) 20%);
}
.unit-motion-dot {
    position: absolute; left: 0; bottom: -6px; width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%;
    background: var(--unit-accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--unit-accent) 32%, transparent);
    transform: translateX(-50%); animation: unit-motion-dot-arrive 3.4s calc(var(--dot-index) * 110ms) ease-in-out infinite;
}
.unit-block-vertical-motion svg { display: block; width: min(100%, 720px); height: auto; margin: 10px auto 0; overflow: visible; }
.unit-vertical-motion-panel { fill: color-mix(in srgb, var(--unit-accent) 3%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 11%, #dce5e7); stroke-width: 1; }
.unit-vertical-motion-track { stroke: #819196; stroke-width: 1.15; stroke-dasharray: 5 6; }
.unit-vertical-motion-point { fill: #fff; stroke: var(--unit-accent); stroke-width: 1.8; }
.unit-vertical-motion-vector { fill: none; stroke: #283f47; stroke-width: 1.65; stroke-linecap: round; }
.unit-vertical-motion-arrowhead { fill: none; stroke: #283f47; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.unit-vertical-motion-title, .unit-vertical-motion-time, .unit-vertical-motion-note, .unit-vertical-motion-symbol {
    stroke: rgba(255, 255, 255, .96); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke fill;
}
.unit-vertical-motion-title { fill: #35575e; font: 720 15px var(--unit-display-font); }
.unit-vertical-motion-time { fill: #809095; font: 650 11px var(--unit-display-font); }
.unit-vertical-motion-note { fill: #718489; font: 650 11px var(--unit-display-font); }
.unit-vertical-motion-symbol { fill: #283f47; font: italic 700 15px Georgia, "Times New Roman", serif; }
.unit-block-light-gate { overflow: hidden; background: rgba(255, 255, 255, .84); }
.unit-block-light-gate > svg { display: block; width: min(100%, 720px); height: auto; margin: 9px auto 0; overflow: visible; }
.unit-light-gate-panel { fill: color-mix(in srgb, var(--unit-accent) 3%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 11%, #dce5e7); stroke-width: 1; }
.unit-light-gate-panel.is-apparatus { fill: transparent; stroke: none; }
.unit-light-gate-panel.is-logger { fill: color-mix(in srgb, var(--unit-accent) 3.5%, #fff); }
.unit-light-gate-title, .unit-light-gate-note, .unit-light-gate-symbol, .unit-light-gate-time-label,
.unit-light-gate-time-value, .unit-light-gate-axis-label, .unit-light-gate-gradient-label {
    stroke: rgba(255, 255, 255, .96); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke fill;
}
.unit-light-gate-title { fill: #35575e; font: 720 15px var(--unit-display-font); }
.unit-light-gate-note { fill: #7b8d91; font: 650 11px var(--unit-display-font); }
.unit-light-gate-symbol { fill: #2d4850; font: italic 700 15px Georgia, "Times New Roman", serif; }
.unit-light-gate-beam { stroke: color-mix(in srgb, var(--unit-accent) 65%, #49a39b); stroke-width: 1.55; stroke-linecap: round; transition: opacity .2s ease, stroke-dasharray .2s ease; }
.unit-light-gate-beam.is-blocked { opacity: .54; stroke-dasharray: 7 5; }
.unit-light-gate-body { fill: none; stroke: #526d74; stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; }
.unit-light-gate-sensor { fill: #3b5960; }
.unit-light-gate-wire { fill: none; stroke: #8da0a4; stroke-width: 1.1; stroke-linecap: round; }
.unit-light-gate-label-leader { stroke: #8da0a4; stroke-width: 1; stroke-dasharray: 3 4; }
.unit-light-gate-fall-line { stroke: #61767c; stroke-width: 1.25; stroke-linecap: round; }
.unit-light-gate-fall-arrow { fill: none; stroke: #61767c; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.unit-light-gate-card { transform-box: view-box; transition: transform .62s cubic-bezier(.22, .78, .24, 1); }
.unit-light-gate-card-body { fill: #fff; stroke: #60757b; stroke-width: 1.2; }
.unit-light-gate-strip { fill: #365760; }
.unit-light-gate-measure { stroke: #8a999d; stroke-width: 1; }
.unit-light-gate-event-pair { opacity: 0; transition: opacity .18s ease; }
.unit-light-gate-event-pair.is-active { opacity: 1; }
.unit-light-gate-event-tick { stroke: var(--unit-accent); stroke-width: 1.25; stroke-linecap: round; }
.unit-light-gate-event-leader { stroke: color-mix(in srgb, var(--unit-accent) 48%, #8da0a4); stroke-width: 1; stroke-dasharray: 3 4; }
.unit-light-gate-event-label {
    fill: var(--unit-accent); stroke: rgba(255, 255, 255, .96); stroke-width: 4px; stroke-linejoin: round;
    paint-order: stroke fill; font: italic 750 13px Georgia, "Times New Roman", serif;
}
.unit-light-gate-time-label { fill: #7d8e93; font: italic 700 13px Georgia, "Times New Roman", serif; }
.unit-light-gate-time-value { fill: #8b999d; font: 650 12px var(--unit-display-font); font-variant-numeric: tabular-nums; }
.unit-light-gate-time-row.is-active .unit-light-gate-time-label,
.unit-light-gate-time-row.is-active .unit-light-gate-time-value { fill: var(--unit-accent); }
.unit-dynamics-math.unit-light-gate-event-label { color: var(--unit-accent); }
.unit-dynamics-math.unit-light-gate-time-value { color: #8b999d; font-variant-numeric: tabular-nums; }
.unit-dynamics-math.unit-light-gate-time-value.is-active { color: var(--unit-accent); }
.unit-light-gate-axis { stroke: #65787e; stroke-width: 1.25; }
.unit-light-gate-fit { stroke: var(--unit-accent); stroke-width: 2; stroke-linecap: round; }
.unit-light-gate-point { fill: #fff; stroke: var(--unit-accent); stroke-width: 1.7; }
.unit-light-gate-axis-label { fill: #74878c; font: 650 10px var(--unit-display-font); }
.unit-light-gate-gradient-label { fill: #365760; font: 720 11px var(--unit-display-font); }
.unit-light-gate-graph { opacity: 0; transition: opacity .25s ease; }
.unit-light-gate-graph.is-active { opacity: 1; }
.unit-light-gate-controls { margin-top: 1px; }
.unit-light-gate-formulae {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px;
    border: 0;
}
.unit-light-gate-formulae > span {
    min-width: 0; padding: 9px 8px; border-radius: 0; background: transparent;
    color: #294e55; font-size: clamp(12px, 1.5vw, 15px); line-height: 1.4; text-align: center;
}
.unit-light-gate-formulae > span + span { border-left: 0; }
.unit-light-gate-formulae mjx-container { margin: 0 !important; }
.unit-block-component-motion { overflow: hidden; background: rgba(255, 255, 255, .84); }
.unit-block-component-motion > svg { display: block; width: min(100%, 720px); height: auto; margin: 8px auto 0; overflow: visible; }
.unit-component-panel { fill: color-mix(in srgb, var(--unit-accent) 3%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 11%, #dce5e7); stroke-width: 1; }
.unit-component-track { stroke: #89999d; stroke-width: 1.15; stroke-dasharray: 5 6; }
.unit-component-trajectory { fill: none; stroke: color-mix(in srgb, var(--unit-accent) 82%, #3e73a2); stroke-width: 2.35; stroke-linecap: round; }
.unit-component-guide { stroke: color-mix(in srgb, var(--unit-accent) 34%, #9ca9ac); stroke-width: .95; stroke-dasharray: 4 6; }
.unit-component-point { fill: #fff; stroke: var(--unit-accent); stroke-width: 1.75; }
.unit-component-vector { fill: none; stroke: #2d4850; stroke-width: 1.45; stroke-linecap: round; }
.unit-component-arrow { fill: none; stroke: #2d4850; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.unit-component-title, .unit-component-note, .unit-component-time, .unit-component-symbol {
    stroke: rgba(255, 255, 255, .96); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke fill;
}
.unit-component-title { fill: #35575e; font: 720 15px var(--unit-display-font); }
.unit-component-note { fill: #6f8388; font: 650 11px var(--unit-display-font); }
.unit-component-time { fill: #7d8e93; font: 650 10.5px var(--unit-display-font); }
.unit-component-symbol { fill: #2d4850; font: italic 700 15px Georgia, "Times New Roman", serif; }
.unit-motion-graph-canvas { position: relative; width: min(100%, 680px); margin: 8px auto 0; }
.unit-motion-graph-canvas svg { display: block; width: 100%; height: auto; margin: 0; }
.unit-motion-graph-axis { stroke: #50636a; stroke-width: 1.35; }
.unit-motion-graph-arrowhead { fill: none; stroke: #50636a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.unit-motion-graph-grid { stroke: color-mix(in srgb, var(--unit-accent) 7%, #dce5e7); stroke-width: 1; }
.unit-motion-graph-tick-mark { stroke: #7d8e93; stroke-width: 1; }
.unit-motion-graph-tick {
    fill: #78898e; font-family: var(--unit-display-font); font-size: 12px; font-variant-numeric: tabular-nums;
}
.unit-motion-graph-line { fill: none; stroke: var(--unit-accent); stroke-width: 2.2; stroke-linecap: round; }
.unit-motion-graph-curve { fill: none; stroke: color-mix(in srgb, var(--unit-accent) 86%, #376ea4); stroke-width: 2.5; stroke-linecap: round; }
.unit-motion-graph-secant {
    stroke: #4e5e64; stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 6 5;
}
.unit-motion-graph-tangent { stroke: #182d35; stroke-width: 1.5; stroke-linecap: round; }
.unit-motion-graph-point { fill: #fff; stroke: var(--unit-accent); stroke-width: 1.8; }
.unit-motion-graph-second-point { fill: #fff; stroke: #839399; stroke-width: 1.6; }
.unit-motion-graph-guide { stroke: color-mix(in srgb, var(--unit-accent) 55%, #7b8790); stroke-width: 1.05; stroke-dasharray: 6 5; }
.unit-motion-graph-rectangle {
    fill: color-mix(in srgb, var(--unit-accent) 15%, transparent); stroke: color-mix(in srgb, var(--unit-accent) 46%, #78888d); stroke-width: .85;
}
.unit-motion-graph-area { stroke: none; }
.unit-motion-graph-area.is-positive { fill: color-mix(in srgb, var(--unit-accent) 17%, transparent); }
.unit-motion-graph-area.is-negative { fill: rgba(184, 107, 99, .13); }
.unit-motion-graph-area-label { fill: color-mix(in srgb, var(--unit-accent) 72%, #526b72); font-family: var(--unit-display-font); font-size: 16px; font-weight: 680; }
.unit-motion-graph-area-label.is-negative { fill: #9b625d; }
.unit-motion-graph-suvat-rectangle {
    fill: color-mix(in srgb, var(--unit-accent) 13%, transparent); stroke: none;
}
.unit-motion-graph-suvat-triangle { fill: rgba(220, 140, 109, .16); stroke: none; }
.unit-motion-graph-symbol {
    fill: #405a62; stroke: rgba(255, 255, 255, .96); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke fill;
    font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-style: italic; font-weight: 700;
}
.unit-motion-graph-symbol.is-area { fill: color-mix(in srgb, var(--unit-accent) 74%, #405a62); font-family: var(--unit-display-font); font-size: 14px; font-style: normal; }
.unit-motion-graph-symbol.is-triangle { fill: #a86751; }
.unit-motion-graph-point-name, .unit-motion-graph-delta-label, .unit-motion-graph-tangent-label {
    fill: #52656b; stroke: rgba(255, 255, 255, .96); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke fill;
    font-family: var(--unit-display-font); font-size: 12px; font-weight: 720;
}
.unit-motion-graph-tangent-label { fill: #182d35; stroke-width: 6px; }
.unit-motion-limit-stage { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.unit-motion-limit-stage.is-active { visibility: visible; opacity: 1; }
.unit-motion-graph-axis-label, .unit-motion-graph-callout {
    fill: #526b72; font-family: var(--unit-display-font); font-weight: 650;
}
.unit-motion-graph-axis-label { font-size: 15px; }
.unit-motion-graph-math {
    position: absolute; z-index: 1; color: var(--unit-deep); font-size: clamp(13px, 1.6vw, 16px);
    line-height: 1; pointer-events: none; transform: translate(-50%, -50%);
}
.unit-motion-graph-math mjx-container { margin: 0 !important; }
.unit-motion-graph-math.is-delta-t { left: 49%; top: 72%; }
.unit-motion-graph-math.is-delta-v { left: 74%; top: 47%; }
.unit-motion-graph-math.is-delta-s { left: 74%; top: 46%; }
.unit-motion-graph-math.is-area-product { left: 29%; top: 55%; color: color-mix(in srgb, var(--unit-accent) 76%, var(--unit-deep)); }
.unit-motion-graph-point-label { position: absolute; left: 52%; top: 49%; color: #6d7f84; font-size: 10px; transform: translate(12px, 8px); }
.unit-motion-graph-callout { fill: var(--unit-accent); font-size: 13px; }
.unit-motion-graph-caption {
    width: fit-content; margin: 4px auto 0 !important; color: #6d7f84 !important; font-size: 10.5px !important; line-height: 1.45 !important;
}
.unit-motion-graph-caption strong { color: var(--unit-accent); font-weight: 720; }
.unit-motion-limit-controls {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: min(100%, 620px); margin: 3px auto 0;
    padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--unit-accent) 5%, #f5f8f8);
}
.unit-motion-limit-step {
    min-height: 30px; padding: 5px 10px; border: 0; border-radius: 9px; background: transparent; color: #697d82;
    font: 680 10.5px/1.2 var(--unit-display-font); white-space: nowrap; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.unit-motion-limit-step:hover { color: var(--unit-deep); }
.unit-motion-limit-auto {
    color: color-mix(in srgb, var(--unit-accent) 80%, #415a61); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--unit-accent) 16%, transparent);
}
.unit-motion-limit-step[aria-pressed="true"] {
    background: rgba(255, 255, 255, .96); color: var(--unit-accent); box-shadow: 0 1px 4px rgba(26, 48, 58, .1);
}
.unit-motion-limit-status {
    min-height: 20px; margin: 7px auto 0 !important; color: #5f7379 !important; font-size: 11px !important; line-height: 1.55 !important; text-align: center;
}
.unit-motion-limit-formula {
    margin: 5px auto 0 !important; color: var(--unit-deep) !important; font-size: clamp(14px, 1.8vw, 18px) !important; line-height: 1.45 !important; text-align: center;
}
.unit-motion-limit-formula mjx-container { margin: 0 !important; }
@keyframes unit-motion-dot-arrive {
    0%, 12% { opacity: .2; transform: translateX(-50%) scale(.65); }
    28%, 82% { opacity: 1; transform: translateX(-50%) scale(1); }
    100% { opacity: .2; transform: translateX(-50%) scale(.65); }
}
.unit-checkpoint-reveal summary {
    display: flex; align-items: center; width: fit-content; min-height: 28px; margin-top: 8px; padding: 4px 0;
    border: 0; border-radius: 0;
    background: transparent; color: color-mix(in srgb, var(--unit-accent) 76%, #334f56);
    font-size: var(--unit-disclosure-size); font-weight: 710; cursor: pointer; list-style: none;
    box-shadow: none;
}
.unit-checkpoint-reveal summary:hover { background: transparent; color: var(--unit-deep); }
.unit-checkpoint-reveal summary:focus { outline: none; }
.unit-checkpoint-reveal summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--unit-accent) 34%, transparent); outline-offset: 3px; border-radius: 6px;
}
.unit-checkpoint-reveal summary::-webkit-details-marker { display: none; }
.unit-answer-label.is-open { display: none; }
.unit-checkpoint-reveal[open] .unit-answer-label.is-closed { display: none; }
.unit-checkpoint-reveal[open] .unit-answer-label.is-open { display: inline; }
.unit-answer-chevron { margin-left: 7px; font-size: 16px; line-height: 1; transform: translateY(-1px); transition: transform .18s ease; }
.unit-checkpoint-reveal[open] .unit-answer-chevron { transform: rotate(180deg) translateY(1px); }
.unit-worked-solution {
    margin-top: 13px; padding: 8px 0 0; border: 0; border-radius: 0;
    background: transparent;
}
.unit-worked-answer {
    margin-top: 12px; padding: 3px 0 3px 12px; border: 0; border-left: 3px solid color-mix(in srgb, var(--unit-accent) 38%, transparent); border-radius: 0;
    background: transparent;
}
.unit-worked-answer strong, .unit-checkpoint-answer strong { display: block; margin-bottom: 4px; color: var(--unit-accent); font-size: var(--unit-text-micro); letter-spacing: .065em; text-transform: uppercase; }
.unit-block-checkpoint {
    position: relative; padding: 15px 18px; border: 0;
    background: color-mix(in srgb, var(--unit-accent) 4%, #f9fbfc); box-shadow: none;
}
.unit-block-checkpoint::before {
    content: none;
}
.unit-block-checkpoint .unit-block-label,
.unit-block-worked_example .unit-block-label {
    font-size: var(--unit-disclosure-size); font-weight: 740; letter-spacing: 0; text-transform: none;
}
.unit-block-checkpoint .unit-block-title { font-size: var(--unit-block-title-size); font-weight: 610; }
.unit-block-checkpoint > p { color: #36575f; font-size: var(--unit-text-body); line-height: 1.68; }
.unit-checkpoint-reveal { margin-top: 9px; border-top: 0; }
.unit-checkpoint-answer {
    margin-top: 7px; padding: 4px 0 3px 12px; border: 0; border-left: 2px solid color-mix(in srgb, var(--unit-accent) 30%, transparent); border-radius: 0;
    background: transparent;
}
.unit-checkpoint-answer p, .unit-worked-solution li, .unit-worked-answer p { min-width: 0; overflow-wrap: anywhere; }
.unit-checkpoint-answer mjx-container, .unit-worked-solution mjx-container, .unit-worked-answer mjx-container {
    display: inline-block !important; max-width: 100%; overflow-x: auto; overflow-y: hidden;
    font-size: 1em !important; vertical-align: -.25em; overscroll-behavior-inline: contain;
}
.unit-worked-solution li, .unit-worked-answer p, .unit-checkpoint-answer p { font-size: var(--unit-text-detail); line-height: 1.66; }
.unit-block-figure { overflow: hidden; padding: 0; background: #fff; }
.unit-block-figure .unit-figure { margin: 0; }
.unit-block-figure .unit-figure figcaption { padding: 0 16px 14px; }
.unit-block-figure:not(.unit-block-lesson-opening) {
    width: min(100%, 590px); margin: 18px auto 0; padding: 10px 10px 0; border: 0; background: transparent;
}
.unit-block-figure:not(.unit-block-lesson-opening) .unit-figure img { max-height: 300px; object-fit: contain; }
.unit-block-figure:not(.unit-block-lesson-opening) .unit-figure figcaption { padding: 0 6px 9px; text-align: center; }
.unit-block-figure.unit-block-studio-opening {
    width: min(100%, 640px); margin: 18px auto 4px; padding: 0; border: 0; background: transparent;
}
.unit-block-figure.unit-block-studio-opening .unit-figure img {
    width: 100%; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 46%; border-radius: 16px;
}
.unit-block-figure.unit-block-studio-opening .unit-figure figcaption { padding: 0 4px 4px; text-align: center; }
.unit-figure { margin: 14px 0 0; }
.unit-figure img { display: block; width: 100%; height: auto; border-radius: 13px; }
.unit-block-lesson-opening .unit-figure img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 45%; border-radius: 17px 17px 0 0; }
.unit-block-lesson-opening { width: min(100%, 700px); margin-right: auto; margin-left: auto; }
.unit-figure figcaption { margin-top: 8px; color: #7e8d96; font-size: var(--unit-text-meta); line-height: 1.5; }
.unit-section {
    position: relative; overflow: hidden; scroll-margin-top: calc(var(--unit-header-height) + 24px);
    border-radius: var(--unit-radius-panel); padding: clamp(24px, 4vw, 38px);
}
.unit-section::after {
    content: ""; position: absolute; width: 180px; height: 180px; top: -125px; right: -95px;
    z-index: 0; border-radius: 50%; background: color-mix(in srgb, var(--unit-light) 12%, transparent); pointer-events: none;
}
.unit-section > * { position: relative; z-index: 1; }
.unit-section-heading { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 15px; align-items: center; }
.unit-section-number {
    width: 48px; height: 48px; display: grid; place-items: center; border: 0;
    border-radius: 16px; background: color-mix(in srgb, var(--unit-accent) 9%, #f6f8fa); color: var(--unit-accent);
    font-family: var(--unit-display-font); font-size: var(--unit-part-number-size); font-weight: 690; letter-spacing: -.02em;
}
.unit-section-kicker { margin: 0 0 5px; color: #637a80; font-size: var(--unit-text-micro); font-weight: 790; letter-spacing: .075em; text-transform: uppercase; }
.unit-section h2 {
    margin: 0; color: #173c43; font-family: var(--unit-display-font);
    font-size: var(--unit-part-title-size); font-weight: 720; letter-spacing: -.028em; line-height: 1.1;
}
.unit-section-lead { max-width: 700px; margin: 13px 0 0; color: #526b72; font-size: var(--unit-text-emphasis); line-height: 1.72; }
.unit-section.is-memory-hub {
    padding: clamp(25px, 4vw, 36px); background: linear-gradient(145deg, color-mix(in srgb, var(--unit-accent) 5%, #fff), #fff 66%);
}
.unit-section.is-memory-hub::after { background: color-mix(in srgb, var(--unit-light) 24%, transparent); }
.unit-section.is-memory-hub h2 { max-width: 620px; font-size: clamp(23px, 2vw, 28px); }
.unit-section.is-memory-hub .unit-section-lead { max-width: 680px; font-size: var(--unit-text-heading-small); }
.unit-guest-gate {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px; align-items: center; scroll-margin-top: calc(var(--unit-header-height) + 24px);
    padding: clamp(24px, 4vw, 34px); border: 1px solid color-mix(in srgb, var(--unit-accent) 14%, #e6eceb);
    border-radius: var(--unit-radius-panel); background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--unit-light) 22%, #fff));
    box-shadow: 0 18px 48px rgba(20, 59, 54, .08);
}
.unit-guest-gate::after {
    content: ""; position: absolute; width: 210px; height: 210px; right: -112px; bottom: -132px;
    border: 1px solid color-mix(in srgb, var(--unit-accent) 15%, transparent); border-radius: 50%;
    box-shadow: 0 0 0 38px color-mix(in srgb, var(--unit-accent) 3%, transparent); pointer-events: none;
}
.unit-guest-gate > * { position: relative; z-index: 1; }
.unit-guest-gate-icon {
    position: relative; width: 54px; height: 54px; display: block; flex: 0 0 auto;
    border-radius: 17px; background: color-mix(in srgb, var(--unit-accent) 10%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--unit-accent) 12%, transparent);
}
.unit-guest-gate-icon::before {
    content: ""; position: absolute; left: 17px; top: 13px; width: 18px; height: 16px;
    border: 3px solid var(--unit-accent); border-bottom: 0; border-radius: 11px 11px 0 0;
}
.unit-guest-gate-icon::after {
    content: ""; position: absolute; left: 14px; top: 27px; width: 26px; height: 19px;
    border-radius: 7px; background: var(--unit-accent); box-shadow: inset 0 1px rgba(255,255,255,.3);
}
.unit-guest-gate-copy { min-width: 0; }
.unit-guest-gate h2 {
    margin: 0; color: #173c43; font-family: var(--unit-display-font);
    font-size: var(--unit-part-title-size); font-weight: 720; letter-spacing: -.028em; line-height: 1.12;
}
.unit-guest-gate .unit-section-lead { max-width: 630px; }
.unit-guest-gate-actions { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; }
.unit-guest-gate-actions .unit-primary-action { background: var(--unit-deep); color: #fff; }
.unit-notice {
    margin-top: 17px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; padding: 11px 13px;
    border: 0; border-radius: var(--unit-radius-card); background: color-mix(in srgb, var(--unit-accent) 3.5%, #f8fafb);
}
.unit-notice-label {
    display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--unit-accent) 8%, #fff); color: var(--unit-accent);
    font-size: var(--unit-text-micro); font-weight: 790; letter-spacing: .055em; text-transform: uppercase;
}
.unit-notice strong { display: block; color: #465e64; font-size: var(--unit-text-detail); }
.unit-notice p { margin: 3px 0 0; color: #5f747a; font-size: var(--unit-text-support); line-height: 1.58; }

.unit-lesson-transition {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
    margin: 20px 4px 1px; padding: 12px 13px;
    border: 0; border-radius: var(--unit-radius-card); background: color-mix(in srgb, var(--unit-accent) 2.8%, #fafbfc);
}
.unit-lesson-transition-label {
    display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px;
    border-radius: 999px; background: color-mix(in srgb, var(--unit-accent) 8%, #fff); color: var(--unit-accent);
    font-size: var(--unit-text-micro); font-weight: 790; letter-spacing: .055em; line-height: 1.25; text-transform: uppercase;
}
.unit-lesson-transition p { margin: 0; color: #5d747a; font-size: var(--unit-text-support); line-height: 1.58; }
.unit-lesson-transition-arrow { color: var(--unit-accent); font-size: 15px; }

.unit-practice-card {
    margin-top: 18px; overflow: hidden; border: 0;
    border-radius: var(--unit-radius-card); background: rgba(255, 255, 255, .94);
    box-shadow: var(--unit-shadow-card);
    scroll-margin-top: calc(var(--unit-header-height) + 24px);
}
.unit-practice-heading {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px 14px;
    padding: 13px 17px 9px;
}
.unit-practice-identity { display: inline-flex; align-items: center; gap: 10px; }
.unit-practice-identity strong {
    display: inline-flex; align-items: center; color: #315961;
    font-size: var(--unit-text-micro); font-weight: 780; letter-spacing: .045em; line-height: 1.35; text-transform: uppercase;
}
.unit-practice-index {
    min-width: 38px; min-height: 34px; display: inline-grid; place-items: center; padding: 3px 8px;
    border-radius: 11px; background: color-mix(in srgb, var(--unit-accent) 11%, #f7f9fc); color: var(--unit-accent);
    font-size: 14px; font-weight: 790; letter-spacing: -.01em;
}
.unit-practice-card.is-navigation-active .unit-practice-index { background: var(--unit-accent); color: #fff; }
.unit-practice-source { color: #6e8187; font-size: var(--unit-text-meta); line-height: 1.45; white-space: nowrap; }
.unit-practice-body { padding: 0 17px 17px; }
.unit-practice-status { margin: 8px 0 0; color: #647b81; font-size: var(--unit-text-action); line-height: 1.55; }
.unit-practice-status.is-error { color: #a84f2b; }
.unit-practice-question-host { min-width: 0; padding: 5px 0 0; }

.unit-practical-studio {
    display: grid; gap: 8px; margin-top: 20px; border: 0;
}
.unit-studio-item { overflow: hidden; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--unit-accent) 3%, #fafbfc); }
.unit-studio-item summary {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center;
    padding: 15px 14px; cursor: pointer; list-style: none;
}
.unit-studio-item summary::-webkit-details-marker { display: none; }
.unit-studio-item summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--unit-accent) 34%, transparent); outline-offset: 3px; border-radius: 10px;
}
.unit-studio-summary-copy { min-width: 0; }
.unit-studio-label {
    display: block; margin-bottom: 5px; color: var(--unit-accent); font-size: var(--unit-text-micro); font-weight: 790;
    letter-spacing: .1em; text-transform: uppercase;
}
.unit-studio-summary-copy strong { display: block; color: #294e55; font-size: var(--unit-text-heading-small); line-height: 1.42; }
.unit-studio-summary-copy p { margin: 4px 0 0; color: #667a80; font-size: 14px; line-height: 1.55; }
.unit-studio-action {
    display: inline-flex; align-items: center; gap: 5px; color: var(--unit-accent);
    font-size: var(--unit-text-meta); font-weight: 750; white-space: nowrap;
}
.unit-studio-action-label.is-open { display: none; }
.unit-studio-item[open] .unit-studio-action-label.is-closed { display: none; }
.unit-studio-item[open] .unit-studio-action-label.is-open { display: inline; }
.unit-studio-item[open] .unit-answer-chevron { transform: rotate(180deg) translateY(1px); }
.unit-studio-body { padding: 0 20px 18px 14px; }
.unit-studio-body ul { display: grid; gap: 8px; margin: 0; padding-left: 22px; color: #425f66; font-size: var(--unit-text-copy); line-height: 1.64; }
.unit-studio-body li::marker { color: var(--unit-accent); }
.unit-studio-note {
    margin: 13px 0 0; padding: 9px 0 0 12px; border-left: 2px solid color-mix(in srgb, var(--unit-accent) 28%, transparent);
    color: #61767c; font-size: var(--unit-text-small); line-height: 1.58;
}
.unit-studio-visual {
    margin: 1px 0 15px; padding: 12px 0;
    border: 0; border-radius: 0; background: transparent;
}
.unit-studio-visual-title { display: block; margin-bottom: 10px; color: #49676d; font-size: var(--unit-text-small); font-weight: 760; }
.unit-studio-comparison, .unit-studio-graph-examples {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.unit-studio-visual-item, .unit-studio-graph-example { position: relative; min-width: 0; padding: 2px 15px 2px 17px; }
.unit-studio-visual-item + .unit-studio-visual-item,
.unit-studio-graph-example + .unit-studio-graph-example { border-left: 1px solid color-mix(in srgb, var(--unit-accent) 12%, transparent); }
.unit-studio-visual-item::before, .unit-studio-graph-example::before {
    content: ""; position: absolute; top: 7px; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: #d89a7d;
}
.unit-studio-visual-item.is-strong::before, .unit-studio-graph-example.is-strong::before { background: var(--unit-accent); }
.unit-studio-visual-item > span {
    display: block; margin-bottom: 3px; color: #75888d; font-size: var(--unit-text-micro); font-weight: 790; letter-spacing: .06em; text-transform: uppercase;
}
.unit-studio-visual-item > strong, .unit-studio-graph-example > strong { display: block; color: #294e55; font-size: 14.5px; line-height: 1.4; }
.unit-studio-visual-item > small, .unit-studio-graph-example > small { display: block; margin-top: 3px; color: #667b81; font-size: 13px; line-height: 1.5; }
.unit-studio-graph-example { display: grid; grid-template-columns: 90px minmax(0, 1fr); column-gap: 11px; align-items: center; }
.unit-studio-graph-example > strong, .unit-studio-graph-example > small { grid-column: 2; }
.unit-studio-graph-example > strong { align-self: end; }
.unit-studio-graph-example > small { align-self: start; }
.unit-mini-graph {
    position: relative; grid-column: 1; grid-row: 1 / span 2; width: 90px; height: 62px;
    border-left: 1px solid #8ca0a4; border-bottom: 1px solid #8ca0a4;
    background-image: linear-gradient(to right, rgba(79, 118, 123, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(79, 118, 123, .08) 1px, transparent 1px);
    background-size: 18px 15px;
}
.unit-mini-graph span { position: absolute; width: 4px; height: 4px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--unit-accent); }
.unit-studio-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.unit-studio-flow-arrow { color: var(--unit-accent); font-size: 17px; }

.unit-quantity-compare {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0; margin-top: 16px;
    overflow: hidden; border: 0; border-radius: 14px;
    background: color-mix(in srgb, var(--unit-accent) 3%, #fafbfc);
}
.unit-quantity-kind {
    position: relative; min-width: 0; padding: 13px 15px 14px;
    border-radius: 0; background: transparent;
}
.unit-quantity-kind + .unit-quantity-kind { border-left: 1px solid color-mix(in srgb, var(--unit-accent) 11%, #e2e8ea); }
.unit-quantity-kind > span { color: #75888d; font-size: var(--unit-text-micro); font-weight: 790; letter-spacing: .065em; text-transform: uppercase; }
.unit-quantity-kind > strong { display: block; margin-top: 3px; color: #244d55; font-size: 16px; }
.unit-quantity-kind > p { margin: 4px 0 0; color: #5a7278; font-size: 14.5px; line-height: 1.52; }
.unit-quantity-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.unit-quantity-examples span { padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--unit-accent) 6%, #fff); color: #567078; font-size: var(--unit-text-meta); }

.unit-block-vector-diagram { overflow: hidden; padding: 17px 19px 14px; background: rgba(255, 255, 255, .84); }
.unit-vector-intro { max-width: 650px; }
.unit-block-vector-diagram svg { display: block; width: min(100%, 660px); height: auto; margin: 12px auto 0; overflow: visible; }
.unit-vector-axis { stroke: #9aabad; stroke-width: 1.25; }
.unit-vector-guide { stroke: rgba(73, 111, 117, .32); stroke-width: 1.05; stroke-dasharray: 6 6; }
.unit-vector-route-leg { stroke: rgba(73, 111, 117, .2); stroke-width: 1.1; }
.unit-vector-line { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.unit-vector-line.is-primary { stroke: #2b89a0; }
.unit-vector-line.is-secondary { stroke: #69b6a6; }
.unit-vector-line.is-resultant { stroke: #dc8c6d; stroke-width: 2.8; }
.unit-vector-arrowhead {
    fill: none; stroke: #dc8c6d; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.unit-vector-arrowhead.is-resultant { stroke: #dc8c6d; }
.unit-vector-line.is-component { stroke-width: 2.1; }
.unit-vector-line.is-route-path { stroke-width: 2.1; }
.unit-vector-route-corner { fill: #5c9ca0; }
.unit-vector-direction-arrow {
    fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.unit-vector-direction-arrow.is-primary { stroke: #2b89a0; }
.unit-vector-direction-arrow.is-secondary { stroke: #69b6a6; }
.unit-vector-point { fill: #244d55; }
.unit-vector-angle { fill: none; stroke: #83999e; stroke-width: 1.35; }
.unit-vector-svg-label {
    fill: #315b63; stroke: rgba(255, 255, 255, .96); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke fill;
    font: 700 16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.unit-vector-svg-note { fill: #8a999d; font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-transform: uppercase; }
.unit-vector-theta {
    fill: #526f75; stroke: rgba(255, 255, 255, .96); stroke-width: 4px; paint-order: stroke fill;
    font: italic 18px Georgia, serif;
}
.unit-vector-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px;
    border: 0;
}
.unit-vector-facts > div { padding: 10px 4px 3px; border-radius: 0; background: transparent; }
.unit-vector-facts > div + div { border-left: 0; }
.unit-vector-facts span, .unit-vector-facts small { display: block; color: #75888d; font-size: var(--unit-text-meta); line-height: 1.5; }
.unit-vector-facts strong { display: block; margin: 3px 0; color: #274f57; font-size: 15px; }

.unit-dynamics-visual { overflow: hidden; background: rgba(255, 255, 255, .84); }
.unit-dynamics-intro { max-width: 640px; }
.unit-dynamics-controls {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 4px;
    width: min(100%, 510px); margin: 14px auto 3px; padding: 4px;
    border-radius: 13px; background: color-mix(in srgb, var(--unit-accent) 5%, #f3f6f7);
}
.unit-dynamics-controls.has-auto {
    grid-template-columns: minmax(50px, .68fr) repeat(var(--unit-dynamics-state-count), minmax(0, 1fr));
}
.unit-dynamics-control {
    min-height: 38px; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent;
    color: #61767c; font: 680 12.5px/1.25 var(--unit-display-font); cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.unit-dynamics-auto {
    color: color-mix(in srgb, var(--unit-accent) 80%, #415a61);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--unit-accent) 16%, transparent);
}
.unit-dynamics-control:hover { color: var(--unit-deep); }
.unit-dynamics-control[aria-pressed="true"] {
    background: rgba(255, 255, 255, .97); color: var(--unit-accent); box-shadow: 0 1px 5px rgba(26, 48, 58, .1);
}
.unit-dynamics-control:focus-visible { outline: 2px solid color-mix(in srgb, var(--unit-accent) 35%, transparent); outline-offset: 1px; }
.unit-dynamics-visual svg { display: block; width: min(100%, 700px); height: auto; margin: 7px auto 0; overflow: visible; }
.unit-dynamics-arrowhead {
    fill: none; stroke: var(--unit-accent); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
}
.unit-dynamics-arrowhead.is-contact { stroke: #278b9d; }
.unit-dynamics-arrowhead.is-weight, .unit-dynamics-arrowhead.is-friction { stroke: #c56f62; }
.unit-dynamics-arrowhead.is-motion { stroke: #31525a; }
.unit-dynamics-arrowhead.is-secondary { stroke: #73878c; }
.unit-dynamics-arrowhead.is-acceleration { stroke: #273f72; }
.unit-dynamics-arrowhead.is-pair { stroke: #526ec8; }
.unit-dynamics-arrowhead.is-drag { stroke: #278b9d; }
.unit-dynamics-arrowhead.is-momentum { stroke: #526ec8; }
.unit-dynamics-arrowhead.is-external { stroke: #c56f62; }
.unit-dynamics-arrowhead.is-component { stroke: #278b9d; }
.unit-dynamics-arrowhead.is-resultant { stroke: #273f72; }
.unit-dynamics-arrowhead.is-energy { stroke: #a56f26; }
.unit-dynamics-svg-label {
    fill: #385b63; stroke: rgba(255, 255, 255, .96); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke fill;
    font: 680 14px/1 var(--unit-display-font);
}
.unit-dynamics-svg-note {
    fill: #819095; stroke: rgba(255, 255, 255, .94); stroke-width: 3px; paint-order: stroke fill;
    font: 650 11px/1 var(--unit-display-font);
}
.unit-dynamics-object-label {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .94); stroke-width: 3px; paint-order: stroke fill;
    font: 720 14px/1 var(--unit-display-font);
}
.unit-dynamics-caption {
    min-height: 18px; width: fit-content; max-width: 620px; margin: 1px auto 0 !important;
    color: #647a80 !important; font-size: 11px !important; line-height: 1.5 !important; text-align: center;
}
.unit-dynamics-drawing {
    position: relative;
    width: min(100%, 680px);
    aspect-ratio: var(--unit-dynamics-drawing-ratio, 680 / 330);
    margin: 7px auto 0;
    container-type: inline-size;
}
.unit-dynamics-drawing > svg {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}
.unit-dynamics-math {
    position: absolute;
    z-index: 2;
    max-width: 42%;
    color: var(--unit-deep);
    font-size: clamp(.64rem, 2.25cqw, .98rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--unit-dynamics-math-rotation, 0deg));
}
.unit-dynamics-math[data-math-anchor="start"] {
    transform: translate(0, -50%) rotate(var(--unit-dynamics-math-rotation, 0deg));
}
.unit-dynamics-math[data-math-anchor="end"] {
    transform: translate(-100%, -50%) rotate(var(--unit-dynamics-math-rotation, 0deg));
}
.unit-dynamics-math[hidden] { display: none !important; }
.unit-dynamics-math :is(mjx-container, mjx-container[display="true"]) {
    max-width: 100%;
    margin: 0 !important;
}
.unit-dynamics-math.is-small { font-size: clamp(.58rem, 1.9cqw, .84rem); }
.unit-dynamics-math.is-large { font-size: clamp(.72rem, 2.65cqw, 1.1rem); }
.unit-dynamics-math.is-muted { color: #60777d; }
.unit-dynamics-math.is-accent { color: var(--unit-accent); }
.unit-dynamics-math.is-force { color: #273f72; }
.unit-dynamics-math.is-motion { color: #31525a; }
.unit-dynamics-math.is-secondary { color: #237c8b; }
.unit-dynamics-math.is-chip {
    padding: .18rem .35rem;
    border-radius: .42rem;
    background: rgb(255 255 255 / .9);
    box-shadow: 0 1px 5px rgb(38 60 68 / .08);
}
.unit-dynamics-math:is(
    .unit-vector-svg-label,
    .unit-vector-theta,
    .unit-motion-graph-symbol,
    .unit-motion-graph-point-name,
    .unit-motion-graph-delta-label,
    .unit-motion-graph-tangent-label,
    .unit-motion-graph-axis-label,
    .unit-motion-graph-tick,
    .unit-vertical-motion-time,
    .unit-vertical-motion-symbol,
    .unit-light-gate-symbol,
    .unit-light-gate-event-label,
    .unit-light-gate-time-label,
    .unit-light-gate-time-value,
    .unit-light-gate-axis-label,
    .unit-component-time,
    .unit-component-symbol,
    .unit-dynamics-svg-label,
    .unit-moment-distance-label,
    .unit-moment-result,
    .unit-moments-dimension-label,
    .unit-moments-force-label,
    .unit-couple-force-label,
    .unit-couple-distance-label,
    .unit-density-value,
    .unit-pressure-value,
    .unit-fluid-force-label,
    .unit-components-vector-label,
    .unit-components-balance-value,
    .unit-collision-momentum,
    .unit-collision-value
) {
    color: #315b63;
    font-family: var(--unit-display-font);
    font-size: clamp(.61rem, 2.12cqw, .93rem);
    font-weight: 700;
}
.unit-dynamics-math:is(.unit-motion-graph-tick, .unit-light-gate-axis-label, .unit-vertical-motion-time, .unit-component-time) {
    color: #78898e;
    font-size: clamp(.55rem, 1.7cqw, .78rem);
    font-weight: 650;
}
.unit-dynamics-math:is(.unit-motion-graph-tangent-label) { color: #182d35; }
.unit-dynamics-math.unit-vector-theta { font-size: clamp(.56rem, 1.72cqw, .78rem); }
.unit-dynamics-math.unit-vector-svg-label.is-compact-vector { font-size: clamp(.54rem, 1.82cqw, .8rem); }
.unit-dynamics-math.unit-fluid-force-label.is-compact-fluid { font-size: clamp(.54rem, 1.82cqw, .8rem); }
.unit-dynamics-math:is(.unit-moments-force-label.is-clockwise, .unit-couple-force-label.is-clockwise) { color: #c56f62; }
.unit-dynamics-math:is(.unit-moments-force-label.is-anticlockwise, .unit-couple-force-label.is-anticlockwise) { color: #278b9d; }
.unit-dynamics-math:is(.unit-motion-graph-symbol.is-triangle) { color: #a86751; }
.unit-dynamics-math:is(.unit-vector-svg-label.is-route-resultant-label, .unit-moment-result, .unit-moments-balance-value) {
    color: #a86751;
}
.unit-block-circular-motion svg { width: min(100%, 680px); }
.unit-circular-track {
    fill: color-mix(in srgb, var(--unit-accent) 2%, #fff); stroke: #aebdc1; stroke-width: 1.35;
}
.unit-circular-track.is-inner { fill: none; stroke: color-mix(in srgb, var(--unit-accent) 42%, #aebdc1); }
.unit-circular-track.is-outer { fill: color-mix(in srgb, var(--unit-accent) 3%, #fff); }
.unit-circular-centre { fill: var(--unit-deep); stroke: none; }
.unit-circular-radius {
    fill: none; stroke: #81969b; stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 5 5;
}
.unit-circular-radius.is-inner { stroke: #278b9d; }
.unit-circular-radius.is-outer, .unit-circular-radius.is-current { stroke: var(--unit-accent); }
.unit-circular-radius.is-start { stroke: #9cadb1; }
.unit-circular-object {
    fill: var(--unit-accent); stroke: #fff; stroke-width: 2.1;
}
.unit-circular-object.is-quiet { fill: #9cadb1; }
.unit-circular-object.is-inner { fill: #278b9d; }
.unit-circular-object.is-outer { fill: var(--unit-accent); }
.unit-circular-velocity {
    fill: none; stroke: #31525a; stroke-width: 2.05; stroke-linecap: round;
}
.unit-circular-velocity.is-inner { stroke: #278b9d; stroke-width: 1.75; }
.unit-circular-velocity.is-outer { stroke: #31525a; stroke-width: 2.05; }
.unit-circular-arc {
    fill: none; stroke: var(--unit-accent); stroke-width: 2.2; stroke-linecap: round;
}
.unit-circular-arc.is-full-turn { stroke-width: 2.35; }
.unit-circular-angle {
    fill: none; stroke: #73878c; stroke-width: 1.45; stroke-linecap: round;
}
.unit-circular-divider { stroke: #c2ced1; stroke-width: 1; }
.unit-circular-summary {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 730 15px/1 var(--unit-display-font);
}
.unit-circular-summary.is-direction { fill: var(--unit-accent); }
.unit-circular-formula {
    fill: #47666d; stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 700 15px/1 var(--unit-display-font);
}
.unit-circular-formula.is-result { fill: var(--unit-accent); font-weight: 760; }
.unit-circular-track.is-released { fill: none; stroke-dasharray: 6 6; opacity: .72; }
.unit-circular-radius.is-release { stroke: #81969b; }
.unit-circular-tangent {
    fill: none; stroke: #81969b; stroke-width: 1.05; stroke-linecap: round; stroke-dasharray: 6 6;
}
.unit-circular-release-path {
    fill: none; stroke: #31525a; stroke-width: 2.05; stroke-linecap: round;
}
.unit-circular-not-path {
    fill: none; stroke: #c56f62; stroke-width: 1.05; stroke-dasharray: 5 5;
}
.unit-circular-not-path-cross {
    fill: none; stroke: #c56f62; stroke-width: 1.55; stroke-linecap: round;
}
.unit-circular-object.is-released { fill: #31525a; }
.unit-circular-velocity.is-released { stroke: #31525a; }
.unit-block-velocity-change svg { width: min(100%, 680px); }
.unit-velocity-panel-divider {
    stroke: #c7d1d3; stroke-width: 1; stroke-dasharray: 5 7;
}
.unit-velocity-panel-title {
    fill: #667d82; stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 740 13px/1 var(--unit-display-font); letter-spacing: .02em;
}
.unit-velocity-position-circle {
    fill: color-mix(in srgb, var(--unit-accent) 2%, #fff); stroke: #aebdc1; stroke-width: 1.35;
}
.unit-velocity-position-radius {
    stroke: #81969b; stroke-width: 1.2; stroke-dasharray: 5 5;
}
.unit-velocity-position-chord {
    stroke: var(--unit-accent); stroke-width: 2.05; stroke-linecap: round;
}
.unit-velocity-position-point {
    fill: var(--unit-accent); stroke: #fff; stroke-width: 1.8;
}
.unit-velocity-position-centre, .unit-velocity-common-origin {
    fill: #fff; stroke: var(--unit-deep); stroke-width: 1.65;
}
.unit-velocity-angle-arc {
    fill: none; stroke: #73878c; stroke-width: 1.35; stroke-linecap: round;
}
.unit-velocity-chord-label {
    fill: var(--unit-accent); stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 720 13px/1 var(--unit-display-font);
}
.unit-velocity-vector {
    fill: none; stroke-width: 2.05; stroke-linecap: round;
}
.unit-velocity-vector.is-first { stroke: #31525a; }
.unit-velocity-vector.is-second { stroke: #278b9d; }
.unit-velocity-vector-label {
    stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 740 14px/1 var(--unit-display-font);
}
.unit-velocity-vector-label.is-first { fill: #31525a; }
.unit-velocity-vector-label.is-second { fill: #237c8b; }
.unit-velocity-difference {
    fill: none; stroke: #273f72; stroke-width: 2.3; stroke-linecap: round;
}
.unit-velocity-difference-chevron {
    fill: none; stroke: #273f72; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
}
.unit-velocity-difference-label {
    fill: #273f72; stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 760 15px/1 var(--unit-display-font);
}
.unit-velocity-quiet-message {
    fill: #6e8287; stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 700 14px/1 var(--unit-display-font);
}
.unit-velocity-quiet-message.is-accent { fill: var(--unit-accent); font-size: 16px; }
.unit-velocity-similarity {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 760 15px/1 var(--unit-display-font);
}
.unit-block-force-provider svg { width: min(100%, 680px); }
.unit-block-force-provider .unit-dynamics-controls { width: min(100%, 610px); }
.unit-provider-track {
    fill: color-mix(in srgb, var(--unit-accent) 2%, #fff); stroke: #aebdc1; stroke-width: 1.35;
}
.unit-provider-orbit {
    fill: none; stroke: #aebdc1; stroke-width: 1.25; stroke-dasharray: 6 6;
}
.unit-provider-centre { fill: var(--unit-deep); stroke: none; }
.unit-provider-centre-label {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 750 13px/1 var(--unit-display-font);
}
.unit-provider-force {
    fill: none; stroke: #273f72; stroke-width: 2.35; stroke-linecap: round;
}
.unit-provider-velocity {
    fill: none; stroke: #31525a; stroke-width: 1.85; stroke-linecap: round;
}
.unit-provider-force-label, .unit-provider-velocity-label {
    stroke: rgba(255, 255, 255, .98); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke fill;
    font: 750 14px/1 var(--unit-display-font);
}
.unit-provider-force-label { fill: #273f72; }
.unit-provider-velocity-label { fill: #31525a; font-style: italic; }
.unit-provider-string { stroke: #7d9095; stroke-width: 1.45; }
.unit-provider-object { fill: #fff; stroke: var(--unit-deep); stroke-width: 1.75; }
.unit-provider-object.is-mass { fill: color-mix(in srgb, var(--unit-accent) 12%, #fff); }
.unit-provider-object.is-satellite { fill: color-mix(in srgb, #526ec8 11%, #fff); stroke: #526ec8; }
.unit-provider-object.is-car { fill: color-mix(in srgb, #278b9d 13%, #fff); stroke: #237c8b; }
.unit-provider-object.is-wall-object { fill: color-mix(in srgb, #b9822f 12%, #fff); stroke: #9a6f2c; }
.unit-provider-planet { fill: color-mix(in srgb, #c56f62 15%, #fff); stroke: #ad6258; stroke-width: 1.8; }
.unit-provider-car-window { stroke: #667c82; stroke-width: 1.2; stroke-linecap: round; }
.unit-provider-road { fill: none; stroke: #d8e0e2; stroke-width: 22; }
.unit-provider-wall { fill: none; stroke: #b9822f; stroke-width: 2.6; stroke-linecap: round; }
.unit-provider-context-panel {
    fill: color-mix(in srgb, var(--unit-accent) 4%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 20%, #cad5d7); stroke-width: 1.1;
}
.unit-provider-kicker {
    fill: var(--unit-accent); font: 790 11px/1 var(--unit-display-font); letter-spacing: .08em;
}
.unit-provider-interaction { fill: var(--unit-deep); font: 760 17px/1 var(--unit-display-font); }
.unit-provider-context { fill: #60777d; font: 680 12px/1 var(--unit-display-font); }
.unit-provider-context.is-quiet { fill: #829297; font-size: 11px; }
.unit-provider-role { fill: #273f72; font: 770 13px/1 var(--unit-display-font); }
.unit-provider-results { min-height: 37px; display: grid; place-items: center; margin-top: -2px; }
.unit-provider-result { color: var(--unit-deep); font-size: clamp(13px, 1.55vw, 16px); text-align: center; }
.unit-provider-result[hidden] { display: none; }
.unit-provider-result mjx-container { margin: 0 !important; }

.unit-block-gravity-field svg,
.unit-block-inverse-gravity svg,
.unit-block-gravity-orbit svg,
.unit-block-gravity-potential svg { width: min(100%, 680px); }
.unit-block-gravity-field .unit-dynamics-controls,
.unit-block-inverse-gravity .unit-dynamics-controls,
.unit-block-gravity-orbit .unit-dynamics-controls,
.unit-block-gravity-potential .unit-dynamics-controls { width: min(100%, 610px); }
.unit-gravity-planet {
    fill: color-mix(in srgb, var(--unit-accent) 10%, #f7fafb);
    stroke: color-mix(in srgb, var(--unit-accent) 68%, #627b82);
    stroke-width: 1.8;
}
.unit-gravity-field-line {
    fill: none; stroke: #526ec8; stroke-width: 1.45; stroke-linecap: round;
}
.unit-gravity-field-arrow {
    fill: none; stroke: #273f72; stroke-width: 2.1; stroke-linecap: round;
}
.unit-gravity-radius-guide,
.unit-gravity-radius-axis {
    fill: none; stroke: #97a8ac; stroke-width: 1.05; stroke-dasharray: 5 5;
}
.unit-gravity-distance,
.unit-gravity-distance-tick {
    fill: none; stroke: #82969b; stroke-width: 1.15; stroke-linecap: round;
}
.unit-gravity-distance-label {
    fill: #667d82; stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 700 13px/1 var(--unit-display-font);
}
.unit-gravity-test-mass {
    fill: #fff; stroke: #273f72; stroke-width: 1.9;
}
.unit-gravity-centre {
    fill: var(--unit-deep); stroke: none;
}
.unit-gravity-centre-label {
    fill: var(--unit-deep); font: 760 11px/1 var(--unit-display-font);
}
.unit-gravity-local-earth {
    fill: color-mix(in srgb, var(--unit-accent) 8%, #f7fafb);
}
.unit-gravity-local-surface {
    fill: none; stroke: color-mix(in srgb, var(--unit-accent) 68%, #627b82); stroke-width: 1.8;
}
.unit-gravity-building {
    fill: #fff; stroke: #71878d; stroke-width: 1.35;
}
.unit-gravity-building-label {
    fill: #5e747a; font: 720 11px/1 var(--unit-display-font);
}
.unit-gravity-mass {
    fill: color-mix(in srgb, #526ec8 10%, #fff); stroke: #526ec8; stroke-width: 1.8;
}
.unit-gravity-mass.is-second {
    fill: color-mix(in srgb, var(--unit-accent) 11%, #fff); stroke: var(--unit-accent);
}
.unit-gravity-mass-label {
    fill: var(--unit-deep); font: italic 740 14px/1 Georgia, serif;
}
.unit-gravity-force {
    fill: none; stroke: #273f72; stroke-width: 2.35; stroke-linecap: round;
}
.unit-gravity-force.is-pair { stroke: #526ec8; }
.unit-gravity-velocity {
    fill: none; stroke: #31525a; stroke-width: 1.9; stroke-linecap: round;
}
.unit-gravity-external-force {
    fill: none; stroke: #c56f62; stroke-width: 1.9; stroke-linecap: round;
}
.unit-gravity-displacement {
    fill: none; stroke: #31525a; stroke-width: 1.65; stroke-linecap: round;
}
.unit-gravity-vector-label {
    fill: #31525a; stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: italic 760 14px/1 var(--unit-display-font);
}
.unit-gravity-vector-label.is-force { fill: #273f72; }
.unit-gravity-vector-label.is-external { fill: #b46258; font-style: normal; }
.unit-gravity-orbit-track {
    fill: none; stroke: #9daeb2; stroke-width: 1.35; stroke-dasharray: 6 6;
}
.unit-gravity-orbit-track.is-equatorial { stroke: #526ec8; }
.unit-gravity-orbit-track.is-polar { stroke: #c56f62; }
.unit-gravity-satellite {
    fill: #fff; stroke: #526ec8; stroke-width: 2;
}
.unit-gravity-spacecraft {
    fill: color-mix(in srgb, #526ec8 10%, #fff); stroke: #526ec8; stroke-width: 1.7;
}
.unit-gravity-astronaut {
    fill: #fff; stroke: var(--unit-accent); stroke-width: 1.7;
}
.unit-gravity-equator {
    stroke: #7d9398; stroke-width: 1.05; stroke-dasharray: 5 5;
}
.unit-gravity-surface-point { fill: #c56f62; stroke: #fff; stroke-width: 1.4; }
.unit-gravity-longitude-guide {
    stroke: #c56f62; stroke-width: 1.1; stroke-dasharray: 4 4;
}
.unit-gravity-orbit-direction {
    fill: none; stroke: #73878c; stroke-width: 1.45; stroke-linecap: round;
}
.unit-gravity-state-panel {
    fill: color-mix(in srgb, var(--unit-accent) 4%, #fff);
    stroke: color-mix(in srgb, var(--unit-accent) 21%, #cad5d7);
    stroke-width: 1.1;
}
.unit-gravity-state-kicker {
    fill: var(--unit-accent); font: 790 11px/1 var(--unit-display-font); letter-spacing: .06em;
}
.unit-gravity-state-title {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 770 16px/1 var(--unit-display-font);
}
.unit-gravity-state-copy {
    fill: #60777d; stroke: rgba(255, 255, 255, .96); stroke-width: 3px; paint-order: stroke fill;
    font: 680 12px/1 var(--unit-display-font);
}
.unit-gravity-state-copy.is-quiet { fill: #829297; font-size: 11px; }
.unit-gravity-graph-axis {
    stroke: #6f858b; stroke-width: 1.2; stroke-linecap: round;
}
.unit-gravity-graph-guide {
    stroke: #9aabad; stroke-width: 1; stroke-dasharray: 4 5;
}
.unit-gravity-potential-curve {
    fill: none; stroke: #273f72; stroke-width: 2.35; stroke-linecap: round;
}
.unit-gravity-potential-point {
    fill: #fff; stroke: #526ec8; stroke-width: 2;
}
.unit-gravity-potential-point.is-second { stroke: var(--unit-accent); }
.unit-gravity-axis-label {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: italic 760 15px/1 Georgia, serif;
}
.unit-block-thermal-transfer svg,
.unit-block-thermometric-property svg,
.unit-block-temperature-scale svg,
.unit-block-specific-energy svg { width: min(100%, 680px); }
.unit-block-thermal-transfer .unit-dynamics-controls,
.unit-block-thermometric-property .unit-dynamics-controls,
.unit-block-temperature-scale .unit-dynamics-controls,
.unit-block-specific-energy .unit-dynamics-controls { width: min(100%, 630px); }
.unit-thermal-body {
    fill: color-mix(in srgb, #c56f62 11%, #fff); stroke: #b4665c; stroke-width: 1.8;
}
.unit-thermal-body.is-b {
    fill: color-mix(in srgb, #278b9d 10%, #fff); stroke: #278b9d;
}
.unit-thermal-contact {
    fill: color-mix(in srgb, #b9822f 9%, #fff); stroke: #a87a35; stroke-width: 1.25; stroke-dasharray: 4 4;
}
.unit-thermal-energy-arrow {
    fill: none; stroke: #a56f26; stroke-width: 2.35; stroke-linecap: round;
}
.unit-thermal-energy-arrow.is-reverse { stroke: #278b9d; }
.unit-thermal-body-label {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 770 15px/1 var(--unit-display-font);
}
.unit-thermal-temperature {
    fill: #273f72; stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: italic 760 17px/1 Georgia, serif;
}
.unit-thermal-state-title {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 780 17px/1 var(--unit-display-font);
}
.unit-thermal-contact-label,
.unit-thermal-net-label {
    fill: #6c8186; stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 700 12px/1 var(--unit-display-font);
}
.unit-thermal-net-label { fill: #a56f26; font-size: 14px; }
.unit-thermometric-axis {
    fill: none; stroke: #6f858b; stroke-width: 1.2; stroke-linecap: round;
}
.unit-thermometric-guide {
    stroke: #a5b4b7; stroke-width: 1; stroke-dasharray: 5 6;
}
.unit-thermometric-curve {
    fill: none; stroke: #273f72; stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round;
}
.unit-thermometric-title {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 770 16px/1 var(--unit-display-font);
}
.unit-thermometric-axis-label {
    fill: #273f72; stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: italic 780 16px/1 Georgia, serif;
}
.unit-thermometric-note {
    fill: #72868b; stroke: rgba(255, 255, 255, .97); stroke-width: 3px; paint-order: stroke fill;
    font: 680 11px/1 var(--unit-display-font);
}
.unit-temperature-scale-axis {
    stroke: #6f858b; stroke-width: 1.35; stroke-linecap: round;
}
.unit-temperature-scale-guide {
    stroke: #a3b2b5; stroke-width: 1; stroke-dasharray: 5 6;
}
.unit-temperature-scale-tick {
    stroke: #526ec8; stroke-width: 1.7; stroke-linecap: round;
}
.unit-temperature-scale-heading,
.unit-temperature-interval-title {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 770 15px/1 var(--unit-display-font);
}
.unit-temperature-scale-reading {
    fill: #273f72; stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 730 14px/1 var(--unit-display-font);
}
.unit-temperature-scale-formula {
    fill: #273f72; stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 760 16px/1 Georgia, serif;
}
.unit-temperature-interval-bracket {
    fill: none; stroke: #526ec8; stroke-width: 2.2; stroke-linecap: round;
}
.unit-temperature-interval-bracket.is-celsius { stroke: var(--unit-accent); }
.unit-temperature-interval-title { fill: var(--unit-accent); font-size: 17px; }
.unit-temperature-scale-note {
    fill: #74888d; stroke: rgba(255, 255, 255, .97); stroke-width: 3px; paint-order: stroke fill;
    font: 680 11px/1 var(--unit-display-font);
}
.unit-energy-axis {
    stroke: #6f858b; stroke-width: 1.2; stroke-linecap: round;
}
.unit-energy-axis-label {
    fill: #60777d; stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 720 13px/1 var(--unit-display-font);
}
.unit-energy-bar {
    fill: color-mix(in srgb, #526ec8 16%, #fff); stroke: #526ec8; stroke-width: 1.6;
}
.unit-energy-bar.is-changed {
    fill: color-mix(in srgb, var(--unit-accent) 17%, #fff); stroke: var(--unit-accent);
}
.unit-energy-bar-value,
.unit-energy-bar-label,
.unit-energy-ratio-label {
    fill: #273f72; stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 740 14px/1 var(--unit-display-font);
}
.unit-energy-bar-label { fill: #60777d; font: 700 13px/1 Georgia, serif; }
.unit-energy-ratio-label { fill: var(--unit-accent); font-size: 16px; }
.unit-energy-stage-title {
    fill: #273f72; stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 770 17px/1 Georgia, serif;
}
.unit-energy-stage {
    fill: none; stroke: #273f72; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.unit-energy-stage.is-quiet { stroke: #bec9cb; stroke-width: 1.35; }
.unit-energy-stage.is-fusion,
.unit-energy-stage.is-vaporisation { stroke: var(--unit-accent); }
.unit-energy-stage.is-quiet.is-fusion,
.unit-energy-stage.is-quiet.is-vaporisation { stroke: #c7d0d2; }
.unit-energy-stage-label {
    fill: #273f72; stroke: rgba(255, 255, 255, .98); stroke-width: 4px; paint-order: stroke fill;
    font: 770 13px/1 Georgia, serif;
}
.unit-energy-stage-note {
    fill: #6c8186; stroke: rgba(255, 255, 255, .97); stroke-width: 3px; paint-order: stroke fill;
    font: 690 11px/1 var(--unit-display-font);
}
.unit-cog-card, .unit-turning-board {
    fill: color-mix(in srgb, var(--unit-accent) 7%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 62%, #778f94);
    stroke-width: 1.65;
}
.unit-cog-small-weight, .unit-cog-equivalent-weight, .unit-plumb-weight {
    fill: none; stroke: #c56f62; stroke-width: 1.75; stroke-linecap: round;
}
.unit-cog-weight-point { fill: #c56f62; }
.unit-cog-centre-point, .unit-plumb-centre {
    fill: var(--unit-deep); stroke: #fff; stroke-width: 1.2;
}
.unit-cog-line-of-action, .unit-turning-line-of-action, .unit-moment-line-of-action {
    fill: none; stroke: #94a5a9; stroke-width: 1.05; stroke-dasharray: 6 6;
}
.unit-cog-support, .unit-moment-pivot, .unit-moments-pivot {
    fill: color-mix(in srgb, var(--unit-accent) 8%, #fff); stroke: #70868b; stroke-width: 1.45; stroke-linejoin: round;
}
.unit-cog-support-base, .unit-moment-pivot-base, .unit-moments-pivot-base { stroke: #70868b; stroke-width: 1.3; stroke-linecap: round; }
.unit-plumb-lamina {
    fill: color-mix(in srgb, var(--unit-accent) 8%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 62%, #778f94);
    stroke-width: 1.75; stroke-linejoin: round;
}
.unit-plumb-hole { fill: #fff; stroke: #667c82; stroke-width: 1.4; }
.unit-plumb-hidden-centre { fill: transparent; }
.unit-plumb-cord { stroke: #6f8388; stroke-width: 1.2; stroke-dasharray: 4 4; }
.unit-plumb-support { fill: #fff; stroke: var(--unit-deep); stroke-width: 1.7; }
.unit-plumb-bob { fill: color-mix(in srgb, var(--unit-accent) 28%, #fff); stroke: var(--unit-deep); stroke-width: 1.35; }
.unit-plumb-mark { fill: none; stroke-width: 1.55; stroke-linecap: round; stroke-dasharray: 7 5; }
.unit-plumb-mark.is-first { stroke: #278b9d; }
.unit-plumb-mark.is-second { stroke: #c56f62; }
.unit-plumb-line-label {
    fill: #61777c; stroke: rgba(255, 255, 255, .96); stroke-width: 4px; paint-order: stroke fill;
    font: 700 12px/1 var(--unit-display-font);
}
.unit-plumb-line-label.is-first { fill: #237c8b; }
.unit-plumb-line-label.is-second { fill: #ad5d52; }
.unit-turning-centre { fill: color-mix(in srgb, var(--unit-accent) 70%, #fff); }
.unit-turning-force, .unit-moment-force {
    fill: none; stroke: var(--unit-accent); stroke-width: 2.15; stroke-linecap: round;
}
.unit-turning-rotation { fill: none; stroke: #273f72; stroke-width: 1.7; stroke-linecap: round; }
.unit-turning-result, .unit-moment-result {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 740 14px/1 var(--unit-display-font);
}
.unit-moment-lever { stroke: #596f75; stroke-width: 2.6; stroke-linecap: round; }
.unit-moment-pivot-point, .unit-moments-pivot-point { fill: #fff; stroke: var(--unit-deep); stroke-width: 1.8; }
.unit-moment-application { fill: #fff; stroke: var(--unit-accent); stroke-width: 1.8; }
.unit-moment-perpendicular { fill: none; stroke: #278b9d; stroke-width: 1.35; stroke-dasharray: 5 5; }
.unit-moment-right-angle { fill: none; stroke: #278b9d; stroke-width: 1.35; stroke-linecap: square; stroke-linejoin: miter; }
.unit-moment-distance-label {
    fill: #237c8b; stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 720 13px/1 var(--unit-display-font);
}
.unit-moments-beam { stroke: #566d73; stroke-width: 2.6; stroke-linecap: round; }
.unit-moments-force { fill: none; stroke-width: 2.15; stroke-linecap: round; }
.unit-moments-force.is-clockwise { stroke: #c56f62; }
.unit-moments-force.is-anticlockwise { stroke: #278b9d; }
.unit-moments-force-label, .unit-moments-direction {
    stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 720 13px/1 var(--unit-display-font);
}
.unit-moments-force-label.is-clockwise, .unit-moments-direction.is-clockwise { fill: #ad5d52; }
.unit-moments-force-label.is-anticlockwise, .unit-moments-direction.is-anticlockwise { fill: #237c8b; }
.unit-moments-direction { font-size: 11px; letter-spacing: .02em; }
.unit-moments-dimension, .unit-moments-dimension-tick { stroke: #94a5a9; stroke-width: 1.05; }
.unit-moments-dimension-label {
    fill: #72868b; stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 670 11px/1 var(--unit-display-font);
}
.unit-moments-results { min-height: 34px; display: grid; place-items: center; margin-top: -2px; }
.unit-moments-result { color: var(--unit-deep); font-size: clamp(12px, 1.45vw, 15px); text-align: center; }
.unit-moments-result[hidden] { display: none; }
.unit-moments-result mjx-container { margin: 0 !important; }
.unit-block-couple-torque svg { width: min(100%, 680px); overflow: hidden; }
.unit-couple-wheel-outer {
    fill: color-mix(in srgb, var(--unit-accent) 11%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 66%, #6f858a);
    stroke-width: 1.8;
}
.unit-couple-wheel-inner { fill: rgba(255, 255, 255, .97); stroke: #9eb0b4; stroke-width: 1.15; }
.unit-couple-spoke { stroke: color-mix(in srgb, var(--unit-accent) 52%, #71868b); stroke-width: 2.35; stroke-linecap: round; }
.unit-couple-hub { fill: #fff; stroke: var(--unit-deep); stroke-width: 1.65; }
.unit-couple-force { fill: none; stroke: #526ec8; stroke-width: 2.15; stroke-linecap: round; }
.unit-couple-force-origin { fill: #fff; stroke: #526ec8; stroke-width: 1.8; }
.unit-couple-line-of-action { fill: none; stroke: #94a5a9; stroke-width: 1.05; stroke-dasharray: 6 6; }
.unit-couple-rotation { fill: none; stroke: #273f72; stroke-width: 1.7; stroke-linecap: round; }
.unit-couple-force-label,
.unit-couple-distance-label,
.unit-couple-point-label {
    stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font-family: var(--unit-display-font);
}
.unit-couple-force-label { fill: #445fc0; font-size: 13px; font-weight: 720; }
.unit-couple-dimension, .unit-couple-dimension-tick { stroke: #819499; stroke-width: 1.1; }
.unit-couple-dimension.is-a { stroke: #278b9d; }
.unit-couple-dimension.is-b { stroke: #73878c; stroke-dasharray: 4 3; }
.unit-couple-distance-label { fill: #61787e; font-size: 11.5px; font-weight: 690; }
.unit-couple-distance-label.is-a { fill: #237c8b; }
.unit-couple-reference-point { fill: var(--unit-deep); stroke: #fff; stroke-width: 1.2; }
.unit-couple-point-label { fill: var(--unit-deep); font-size: 13px; font-weight: 760; }
.unit-couple-results { min-height: 34px; display: grid; place-items: center; margin-top: -2px; }
.unit-couple-result { color: var(--unit-deep); font-size: clamp(12px, 1.45vw, 15px); text-align: center; }
.unit-couple-result[hidden] { display: none; }
.unit-couple-result mjx-container { margin: 0 !important; }
.unit-block-equilibrium svg,
.unit-block-density-model svg,
.unit-block-pressure-area svg,
.unit-block-fluid-pressure svg { width: min(100%, 680px); overflow: hidden; }
.unit-equilibrium-object {
    fill: color-mix(in srgb, var(--unit-accent) 9%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 63%, #71878d);
    stroke-width: 1.7;
}
.unit-equilibrium-concurrent-point { fill: var(--unit-deep); stroke: #fff; stroke-width: 1.2; }
.unit-equilibrium-vector { fill: none; stroke-width: 2.15; stroke-linecap: round; }
.unit-equilibrium-vector.is-horizontal { stroke: #278b9d; }
.unit-equilibrium-vector.is-weight { stroke: #c56f62; }
.unit-equilibrium-vector.is-tension { stroke: #273f72; }
.unit-equilibrium-vector.is-reversed { stroke-dasharray: 5 4; }
.unit-equilibrium-vector-label,
.unit-equilibrium-force-label,
.unit-equilibrium-support-label,
.unit-equilibrium-moment-label,
.unit-equilibrium-gap-label,
.unit-equilibrium-triangle-note,
.unit-equilibrium-dimension-label {
    stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font-family: var(--unit-display-font);
}
.unit-equilibrium-vector-label { fill: #385b63; font-size: 13px; font-weight: 730; }
.unit-equilibrium-start-point { fill: var(--unit-deep); stroke: #fff; stroke-width: 1.2; }
.unit-equilibrium-gap { fill: none; stroke: #c56f62; stroke-width: 1.35; stroke-dasharray: 5 5; }
.unit-equilibrium-gap-label { fill: #ad5d52; font-size: 12px; font-weight: 720; }
.unit-equilibrium-triangle-note { fill: #667b80; font-size: 13px; font-weight: 720; }
.unit-equilibrium-beam { stroke: #566d73; stroke-width: 2.6; stroke-linecap: round; }
.unit-equilibrium-pivot {
    fill: color-mix(in srgb, var(--unit-accent) 8%, #fff); stroke: #70868b; stroke-width: 1.45; stroke-linejoin: round;
}
.unit-equilibrium-pivot-base { stroke: #70868b; stroke-width: 1.3; stroke-linecap: round; }
.unit-equilibrium-load { fill: none; stroke: #c56f62; stroke-width: 2.15; stroke-linecap: round; }
.unit-equilibrium-support-force { fill: none; stroke: #278b9d; stroke-width: 2.15; stroke-linecap: round; }
.unit-equilibrium-force-label { fill: #ad5d52; font-size: 13px; font-weight: 720; }
.unit-equilibrium-support-label { fill: #237c8b; font-size: 13px; font-weight: 720; }
.unit-equilibrium-moment { fill: none; stroke: #273f72; stroke-width: 1.65; stroke-linecap: round; }
.unit-equilibrium-moment.is-clockwise { stroke: #c56f62; }
.unit-equilibrium-moment-label { fill: #536970; font-size: 11.5px; font-weight: 700; }
.unit-equilibrium-dimension { stroke: #94a5a9; stroke-width: 1.05; }
.unit-equilibrium-dimension-label { fill: #71868b; font-size: 11.5px; font-weight: 680; }
.unit-equilibrium-result,
.unit-density-result,
.unit-pressure-result,
.unit-fluid-result {
    fill: var(--unit-deep); stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font: 740 14px/1 var(--unit-display-font);
}
.unit-equilibrium-result.is-error { fill: #ad5d52; }
.unit-density-sample {
    stroke-width: 1.7; stroke-linejoin: round;
}
.unit-density-sample.is-light { fill: #f3f7f7; stroke: #8ea3a8; }
.unit-density-sample.is-dense { fill: color-mix(in srgb, var(--unit-accent) 13%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 68%, #71878d); }
.unit-density-particle { stroke-width: 1; }
.unit-density-particle.is-light { fill: #a7b7ba; stroke: #82969a; }
.unit-density-particle.is-dense { fill: color-mix(in srgb, var(--unit-accent) 70%, #536970); stroke: var(--unit-deep); }
.unit-density-sample-title,
.unit-density-fixed-label,
.unit-density-value {
    stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font-family: var(--unit-display-font);
}
.unit-density-sample-title { fill: #536970; font-size: 13px; font-weight: 720; }
.unit-density-fixed-label { fill: var(--unit-deep); font-size: 13px; font-weight: 760; letter-spacing: .03em; }
.unit-density-value { fill: #385b63; font-size: 13px; font-weight: 730; }
.unit-density-value.is-volume { fill: #71868b; font-size: 11.5px; font-weight: 680; }
.unit-pressure-block {
    fill: color-mix(in srgb, var(--unit-accent) 10%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 64%, #71878d);
    stroke-width: 1.7;
}
.unit-pressure-table { stroke: #708489; stroke-width: 2; stroke-linecap: round; }
.unit-pressure-contact-zone { fill: color-mix(in srgb, var(--unit-accent) 24%, #dfe8e9); }
.unit-pressure-normal-force { fill: none; stroke: #278b9d; stroke-width: 2.15; stroke-linecap: round; }
.unit-pressure-area-dimension { stroke: #819499; stroke-width: 1.05; }
.unit-pressure-force-label,
.unit-pressure-area-label,
.unit-pressure-block-label,
.unit-pressure-state-title {
    stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font-family: var(--unit-display-font);
}
.unit-pressure-force-label { fill: #237c8b; font-size: 12.5px; font-weight: 720; }
.unit-pressure-area-label { fill: #667c82; font-size: 11.5px; font-weight: 690; }
.unit-pressure-block-label { fill: var(--unit-deep); font-size: 14px; font-weight: 760; }
.unit-pressure-state-title { fill: #536970; font-size: 13px; font-weight: 740; }
.unit-fluid-liquid { fill: color-mix(in srgb, #74b7c7 19%, #fff); stroke: none; }
.unit-fluid-tank { fill: none; stroke: #74898e; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.unit-fluid-surface { stroke: #5a99aa; stroke-width: 1.25; }
.unit-fluid-object,
.unit-fluid-displacing-object {
    fill: color-mix(in srgb, var(--unit-accent) 12%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 67%, #71878d);
    stroke-width: 1.75;
}
.unit-fluid-side-force,
.unit-fluid-top-force,
.unit-fluid-bottom-force,
.unit-fluid-column-weight,
.unit-fluid-displaced-weight,
.unit-fluid-upthrust { fill: none; stroke-linecap: round; }
.unit-fluid-side-force,
.unit-fluid-top-force,
.unit-fluid-bottom-force { stroke: #278b9d; stroke-width: 2; }
.unit-fluid-side-force.is-muted { opacity: .2; }
.unit-fluid-column-weight,
.unit-fluid-displaced-weight { stroke: #c56f62; stroke-width: 2.05; }
.unit-fluid-upthrust { stroke: #273f72; stroke-width: 2.2; }
.unit-fluid-force-label,
.unit-fluid-upthrust-label,
.unit-fluid-weight-label,
.unit-fluid-state-title,
.unit-fluid-cancel-mark,
.unit-fluid-parcel-label,
.unit-fluid-parcel-mass,
.unit-fluid-object-label,
.unit-fluid-area-label,
.unit-fluid-depth-label,
.unit-fluid-column-expression,
.unit-fluid-equation {
    stroke: rgba(255, 255, 255, .97); stroke-width: 4px; paint-order: stroke fill;
    font-family: var(--unit-display-font);
}
.unit-fluid-force-label { fill: #237c8b; font-size: 12.5px; font-weight: 720; }
.unit-fluid-force-label.is-bottom { fill: #1f7180; }
.unit-fluid-upthrust-label { fill: #273f72; font-size: 13px; font-weight: 760; }
.unit-fluid-weight-label { fill: #ad5d52; font-size: 12.5px; font-weight: 720; }
.unit-fluid-state-title { fill: #536970; font-size: 13px; font-weight: 740; }
.unit-fluid-cancel-mark { fill: #71868b; font-size: 10.5px; font-weight: 700; }
.unit-fluid-displaced-parcel {
    fill: rgba(111, 177, 194, .22); stroke: #278b9d; stroke-width: 1.6; stroke-dasharray: 6 5;
}
.unit-fluid-parcel-label,
.unit-fluid-object-label { fill: #385b63; font-size: 12px; font-weight: 720; }
.unit-fluid-parcel-mass { fill: var(--unit-deep); font-size: 15px; font-weight: 760; }
.unit-fluid-column { fill: rgba(255, 255, 255, .35); stroke: #6aa6b4; stroke-width: 1.2; stroke-dasharray: 5 4; }
.unit-fluid-column-face { stroke: #278b9d; stroke-width: 1.45; }
.unit-fluid-depth-dimension { stroke: #819499; stroke-width: 1.05; }
.unit-fluid-area-label,
.unit-fluid-depth-label { fill: #667c82; font-size: 11.5px; font-weight: 690; }
.unit-fluid-column-expression { fill: #385b63; font-size: 17px; font-weight: 730; }
.unit-fluid-column-expression.is-weight { fill: #ad5d52; }
.unit-fluid-equation-strip { fill: color-mix(in srgb, var(--unit-accent) 6%, #fff); stroke: color-mix(in srgb, var(--unit-accent) 17%, #d7e2e3); stroke-width: 1; }
.unit-fluid-equation { fill: var(--unit-deep); font-size: 14px; font-weight: 760; }
.unit-timeline-controls {
    --unit-timeline-progress: 0%;
    display: grid; grid-template-columns: auto minmax(150px, 1fr) auto; gap: 11px; align-items: center;
    width: min(100%, 560px); margin: 14px auto 3px; padding: 5px 7px;
    border-radius: 14px; background: color-mix(in srgb, var(--unit-accent) 5%, #f3f6f7);
}
.unit-timeline-play {
    min-width: 62px; min-height: 32px; padding: 6px 11px; border: 0; border-radius: 9px;
    background: rgba(255, 255, 255, .96); color: var(--unit-accent);
    box-shadow: 0 1px 5px rgba(26, 48, 58, .09); font: 720 10px/1 var(--unit-display-font); cursor: pointer;
}
.unit-timeline-play[aria-pressed="true"] { background: var(--unit-accent); color: #fff; }
.unit-timeline-play:focus-visible,
.unit-timeline-scrubber:focus-visible { outline: 2px solid color-mix(in srgb, var(--unit-accent) 36%, transparent); outline-offset: 2px; }
.unit-timeline-scrubber {
    width: 100%; height: 18px; margin: 0; appearance: none; background: transparent; cursor: pointer;
}
.unit-timeline-scrubber::-webkit-slider-runnable-track {
    height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, var(--unit-accent) 0 var(--unit-timeline-progress), color-mix(in srgb, var(--unit-accent) 12%, #dfe7e9) var(--unit-timeline-progress) 100%);
}
.unit-timeline-scrubber::-webkit-slider-thumb {
    width: 14px; height: 14px; margin-top: -5px; appearance: none; border: 2px solid #fff; border-radius: 50%;
    background: var(--unit-accent); box-shadow: 0 1px 5px rgba(34, 74, 82, .24);
}
.unit-timeline-scrubber::-moz-range-track { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--unit-accent) 12%, #dfe7e9); }
.unit-timeline-scrubber::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--unit-accent); }
.unit-timeline-scrubber::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--unit-accent); }
.unit-timeline-phase {
    min-width: 112px; color: #657a7f; font: 700 9.5px/1.25 var(--unit-display-font); text-align: right;
}
.unit-force-scene-floor, .unit-force-model-floor { stroke: #bdc8cb; stroke-width: 1.4; }
.unit-force-scene-table { fill: color-mix(in srgb, var(--unit-accent) 8%, #f1f4f5); stroke: #759096; stroke-width: 1.6; }
.unit-force-scene-leg { stroke: #759096; stroke-width: 2; stroke-linecap: round; }
.unit-force-scene-book { fill: color-mix(in srgb, var(--unit-light) 28%, #fff); stroke: var(--unit-accent); stroke-width: 1.8; }
.unit-force-owner-boundary { fill: none; stroke: var(--unit-accent); stroke-width: 1.4; stroke-dasharray: 6 6; }
.unit-force-vector {
    fill: none; stroke: var(--unit-accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
}
.unit-force-vector.is-weight { stroke: #c56f62; }
.unit-force-vector.is-contact { stroke: #278b9d; }
.unit-force-vector.is-secondary { stroke: #73878c; stroke-width: 1.45; }
.unit-force-vector.is-horizontal { stroke: var(--unit-accent); stroke-width: 2.25; }
.unit-galileo-track { stroke: #92a4a8; stroke-width: 1.4; stroke-linecap: round; }
.unit-galileo-velocity, .unit-galileo-continue { fill: none; stroke: #31525a; stroke-width: 1.8; stroke-linecap: round; }
.unit-galileo-friction { fill: none; stroke: #c56f62; stroke-width: 1.8; stroke-linecap: round; }
.unit-galileo-position { fill: color-mix(in srgb, var(--unit-accent) 52%, #fff); stroke: #fff; stroke-width: 1.5; }
.unit-galileo-position.is-final { fill: var(--unit-accent); stroke: #fff; stroke-width: 1.8; }
.unit-galileo-trolley { fill: #fff; stroke: var(--unit-deep); stroke-width: 1.7; }
.unit-force-model-object { fill: color-mix(in srgb, var(--unit-accent) 9%, #fff); stroke: var(--unit-deep); stroke-width: 1.8; }
.unit-force-acceleration { fill: none; stroke: #273f72; stroke-width: 1.8; stroke-linecap: round; }
.unit-resultant-results { min-height: 37px; display: grid; place-items: center; margin-top: -2px; }
.unit-resultant-result { color: var(--unit-deep); font-size: clamp(13px, 1.55vw, 16px); text-align: center; }
.unit-resultant-result[hidden] { display: none; }
.unit-resultant-result mjx-container { margin: 0 !important; }
.unit-newton-track { stroke: #aebdc1; stroke-width: 1.4; }
.unit-newton-interaction-guide { stroke: #aebdc1; stroke-width: 1.05; stroke-dasharray: 5 6; }
.unit-newton-cart { fill: color-mix(in srgb, var(--unit-accent) 8%, #fff); stroke: var(--unit-deep); stroke-width: 1.7; }
.unit-newton-wheel { fill: #fff; stroke: #63777c; stroke-width: 1.45; }
.unit-newton-pair-force { fill: none; stroke: #526ec8; stroke-width: 2.15; stroke-linecap: round; }
.unit-newton-object { transition: opacity .18s ease; }
.unit-block-newton-pair svg[data-newton-state="a"] .unit-newton-object-b,
.unit-block-newton-pair svg[data-newton-state="b"] .unit-newton-object-a { opacity: .28; }
.unit-drag-object, .unit-terminal-object { fill: color-mix(in srgb, var(--unit-accent) 8%, #fff); stroke: var(--unit-deep); stroke-width: 1.75; }
.unit-block-drag-speed svg { width: min(100%, 650px); }
.unit-block-drag-speed .unit-dynamics-controls,
.unit-block-terminal-velocity .unit-dynamics-controls { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 590px); }
.unit-block-parachute-opening .unit-dynamics-controls { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 590px); }
.unit-skydiver-head { fill: color-mix(in srgb, var(--unit-accent) 22%, #fff); stroke: var(--unit-deep); stroke-width: 1.55; }
.unit-skydiver-body, .unit-skydiver-limb {
    fill: none; stroke: var(--unit-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.unit-force-origin {
    fill: #fff; stroke: var(--unit-deep); stroke-width: 1.45;
}
.unit-parachute-canopy {
    fill: color-mix(in srgb, var(--unit-accent) 11%, #fff); stroke: var(--unit-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.unit-parachute-line { stroke: #7d9095; stroke-width: 1.15; stroke-linecap: round; }
.unit-drag-force { fill: none; stroke: #278b9d; stroke-width: 2.15; stroke-linecap: round; }
.unit-drag-velocity-reference { fill: none; stroke: #31525a; stroke-width: 1.65; stroke-linecap: round; }
.unit-terminal-axis { stroke: #7d9095; stroke-width: 1.35; stroke-linecap: round; }
.unit-terminal-guide { stroke: #9cadb1; stroke-width: 1.05; stroke-dasharray: 5 6; }
.unit-terminal-curve { fill: none; stroke: var(--unit-accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.unit-parachute-speed-curve { fill: none; stroke: #31525a; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.unit-terminal-point { fill: #fff; stroke: var(--unit-accent); stroke-width: 2.1; }
.unit-terminal-caption { max-width: 660px; }
.unit-block-momentum-state .unit-dynamics-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 530px); }
.unit-momentum-track { stroke: #bcc8cb; stroke-width: 1.25; stroke-linecap: round; }
.unit-momentum-cart { fill: color-mix(in srgb, var(--unit-accent) 8%, #fff); stroke: var(--unit-deep); stroke-width: 1.7; }
.unit-momentum-wheel { fill: #fff; stroke: #687d82; stroke-width: 1.35; }
.unit-momentum-velocity { fill: none; stroke: #31525a; stroke-width: 1.65; stroke-linecap: round; }
.unit-momentum-vector { fill: none; stroke: #526ec8; stroke-width: 2.15; stroke-linecap: round; }
.unit-block-impulse-cushion .unit-dynamics-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 430px); }
.unit-dynamics-visual .unit-dynamics-controls.has-auto {
    grid-template-columns: minmax(50px, .68fr) repeat(var(--unit-dynamics-state-count), minmax(0, 1fr));
}
.unit-impulse-scene-title {
    fill: var(--unit-deep); font: 720 15px/1 var(--unit-display-font);
}
.unit-impulse-track { stroke: #b8c5c8; stroke-width: 1.35; stroke-linecap: round; }
.unit-impulse-wall { fill: #71868b; }
.unit-impulse-cart { fill: color-mix(in srgb, var(--unit-accent) 8%, #fff); stroke: var(--unit-deep); stroke-width: 1.7; }
.unit-impulse-wheel { fill: #fff; stroke: #687d82; stroke-width: 1.35; }
.unit-impulse-buffer {
    fill: color-mix(in srgb, #55aa9b 17%, #fff); stroke: #4d9a8e; stroke-width: 1.65;
}
.unit-impulse-buffer-fold { fill: none; stroke: #4d9a8e; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.unit-impulse-momentum-reference { fill: none; stroke: #526ec8; stroke-width: 1.85; stroke-linecap: round; }
.unit-impulse-axis { stroke: #7d9095; stroke-width: 1.35; stroke-linecap: round; }
.unit-impulse-tick { stroke: #7d9095; stroke-width: 1.05; }
.unit-impulse-pulse { stroke-width: 1.8; stroke-linejoin: round; }
.unit-impulse-pulse.is-hard { fill: rgba(197, 111, 98, .15); stroke: #c56f62; }
.unit-impulse-pulse.is-cushion { fill: rgba(39, 139, 157, .13); stroke: #278b9d; }
.unit-impulse-pulse-label {
    stroke: rgba(255, 255, 255, .97); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke fill;
    font: 720 12px/1 var(--unit-display-font);
}
.unit-impulse-pulse-label.is-hard { fill: #ad5c51; }
.unit-impulse-pulse-label.is-cushion { fill: #237b8b; }
.unit-impulse-caption { max-width: 680px; }
.unit-block-momentum-system .unit-dynamics-controls { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 590px); }
.unit-momentum-system-heading {
    fill: #6f8287; font: 720 11px/1 var(--unit-display-font); letter-spacing: .035em; text-transform: uppercase;
}
.unit-momentum-system-total {
    fill: var(--unit-deep); font: 760 13px/1 var(--unit-display-font);
}
.unit-momentum-system-boundary {
    fill: color-mix(in srgb, var(--unit-accent) 2.5%, transparent); stroke: color-mix(in srgb, var(--unit-accent) 58%, #9badb1);
    stroke-width: 1.45; stroke-dasharray: 7 6;
}
.unit-momentum-system-boundary.is-external { stroke: #c56f62; }
.unit-momentum-system-boundary-label {
    fill: color-mix(in srgb, var(--unit-accent) 72%, #667b81); font: 720 10px/1 var(--unit-display-font); letter-spacing: .045em;
}
.unit-momentum-system-choice {
    fill: var(--unit-deep); font: 720 14px/1 var(--unit-display-font);
}
.unit-momentum-system-surroundings {
    fill: #819095; font: 650 11px/1 var(--unit-display-font);
}
.unit-momentum-system-track { stroke: #afbec2; stroke-width: 1.35; stroke-linecap: round; }
.unit-momentum-system-cart { stroke: var(--unit-deep); stroke-width: 1.7; }
.unit-momentum-system-cart.is-a { fill: color-mix(in srgb, var(--unit-accent) 11%, #fff); }
.unit-momentum-system-cart.is-b { fill: color-mix(in srgb, #55aa9b 12%, #fff); }
.unit-momentum-system-wheel { fill: #fff; stroke: #687d82; stroke-width: 1.35; }
.unit-momentum-system-vector { fill: none; stroke: #526ec8; stroke-width: 2; stroke-linecap: round; }
.unit-momentum-system-zero { fill: #526ec8; }
.unit-momentum-system-pair-force { fill: none; stroke: #526ec8; stroke-width: 2.15; stroke-linecap: round; }
.unit-momentum-system-external-force { fill: none; stroke: #c56f62; stroke-width: 2.15; stroke-linecap: round; }
.unit-momentum-system-change,
.unit-momentum-system-external-label {
    fill: #526f75; stroke: rgba(255, 255, 255, .96); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke fill;
    font: 700 12px/1 var(--unit-display-font);
}
.unit-momentum-system-change.is-external,
.unit-momentum-system-external-label { fill: #ad5c51; }
.unit-momentum-system-caption { max-width: 680px; }

.unit-block-collision-type svg { width: min(100%, 700px); }
.unit-collision-heading {
    fill: #6f8287; font: 720 11px/1 var(--unit-display-font); letter-spacing: .035em; text-transform: uppercase;
}
.unit-collision-total { fill: var(--unit-deep); font: 760 13px/1 var(--unit-display-font); }
.unit-collision-boundary {
    fill: color-mix(in srgb, var(--unit-accent) 2.5%, transparent); stroke: color-mix(in srgb, var(--unit-accent) 50%, #aab9bd);
    stroke-width: 1.35; stroke-dasharray: 7 6;
}
.unit-collision-track { stroke: #afbec2; stroke-width: 1.3; stroke-linecap: round; }
.unit-collision-cart { stroke: var(--unit-deep); stroke-width: 1.65; }
.unit-collision-cart.is-a { fill: color-mix(in srgb, var(--unit-accent) 11%, #fff); }
.unit-collision-cart.is-b { fill: color-mix(in srgb, #55aa9b 12%, #fff); }
.unit-collision-wheel { fill: #fff; stroke: #687d82; stroke-width: 1.3; }
.unit-collision-zero { fill: #31525a; }
.unit-collision-lane-title { fill: var(--unit-deep); font: 760 14px/1 var(--unit-display-font); }
.unit-collision-lane-summary { fill: #657a7f; font: 680 11px/1 var(--unit-display-font); }
.unit-collision-momentum { fill: none; stroke: #526ec8; stroke-width: 1.9; stroke-linecap: round; }
.unit-collision-momentum-label {
    fill: #385b63; stroke: rgba(255, 255, 255, .96); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke fill;
    font: 700 12px/1 var(--unit-display-font);
}
.unit-collision-contact-pulse { fill: color-mix(in srgb, var(--unit-accent) 18%, transparent); stroke: var(--unit-accent); stroke-width: 1.3; opacity: 0; }
.unit-collision-latch { fill: none; stroke: #2b8b7e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.unit-collision-caption { max-width: 680px; }

.unit-block-momentum-components svg { width: min(100%, 680px); }
.unit-components-axis { fill: none; stroke: #73878c; stroke-width: 1.05; stroke-linecap: round; }
.unit-components-resultant { fill: none; stroke: #273f72; stroke-width: 2.05; stroke-linecap: round; }
.unit-components-vector { fill: none; stroke-width: 1.9; stroke-linecap: round; }
.unit-components-vector.is-first { stroke: #526ec8; }
.unit-components-vector.is-second { stroke: #278b9d; }
.unit-components-vector-label {
    fill: #385b63; stroke: rgba(255, 255, 255, .96); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke fill;
    font: 700 13px/1 var(--unit-display-font);
}
.unit-components-scene-heading {
    fill: #6f8287; font: 760 12px/1 var(--unit-display-font); letter-spacing: .04em;
}
.unit-components-event-arrow { fill: none; stroke: #73878c; stroke-width: 1.25; stroke-linecap: round; }
.unit-components-event-label,
.unit-components-zero-label {
    fill: #71858a; stroke: rgba(255, 255, 255, .96); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke fill;
    font: 680 10.5px/1 var(--unit-display-font);
}
.unit-components-puck { stroke-width: 1.65; }
.unit-components-puck.is-first { fill: color-mix(in srgb, #526ec8 14%, #fff); stroke: #526ec8; }
.unit-components-puck.is-second { fill: color-mix(in srgb, #278b9d 14%, #fff); stroke: #278b9d; }
.unit-components-puck-label { fill: var(--unit-deep); font: 760 11px/1 var(--unit-display-font); }
.unit-components-balance-axis {
    fill: color-mix(in srgb, var(--unit-accent) 82%, #385b63); font: 820 15px/1 var(--unit-display-font);
}
.unit-components-balance-value {
    fill: var(--unit-deep); font: 720 14px/1 var(--unit-display-font); font-variant-numeric: tabular-nums;
}
.unit-components-balance-check { fill: #2b8b7e; font: 800 17px/1 var(--unit-display-font); }
.unit-components-balance-total { fill: #657a7f; font: 700 11px/1 var(--unit-display-font); }

.unit-retrieval-map {
    display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 18px; padding: 7px;
    border-radius: 20px; background: color-mix(in srgb, var(--unit-accent) 4%, #f7faf9);
}
.unit-retrieval-strand {
    display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; min-height: 0; padding: 13px 12px;
    border-radius: 14px; background: rgba(255, 255, 255, .54);
}
.unit-retrieval-marker {
    width: 3px; height: 26px; margin: 1px auto 0; border-radius: 999px;
    background: linear-gradient(180deg, var(--unit-light), var(--unit-accent));
}
.unit-retrieval-copy { min-width: 0; }
.unit-retrieval-code { display: block; margin-bottom: 3px; color: #75888d; font-size: var(--unit-text-micro); font-weight: 720; letter-spacing: .05em; text-transform: uppercase; }
.unit-retrieval-copy strong { color: #274f57; font-size: var(--unit-text-detail); }
.unit-retrieval-copy p { margin: 3px 0 0; color: #60777d; font-size: var(--unit-text-small); line-height: 1.55; }

.unit-memory-deck { display: grid; gap: 12px; margin-top: 24px; }
.unit-memory-heading { padding: 0 3px 3px; }
.unit-memory-heading > span { color: var(--unit-accent); font-size: var(--unit-text-micro); font-weight: 790; letter-spacing: .065em; text-transform: uppercase; }
.unit-memory-heading > strong { display: block; margin-top: 4px; color: #274f57; font-size: var(--unit-text-heading-medium); }
.unit-memory-heading > p { margin: 5px 0 0; color: #657a80; font-size: var(--unit-text-small); line-height: 1.55; }
.unit-memory-group { padding: 14px; border-radius: 20px; }
.unit-memory-group.is-tier-1 { background: linear-gradient(135deg, color-mix(in srgb, var(--unit-accent) 8%, #fff), color-mix(in srgb, var(--unit-accent) 3%, #fff)); }
.unit-memory-group.is-tier-2 { background: linear-gradient(135deg, #f4f7f8, #fafcfc); }
.unit-memory-group-heading { display: flex; align-items: center; gap: 11px; padding: 0 1px 12px; }
.unit-memory-tier {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 50px; min-height: 27px; padding: 4px 9px;
    border-radius: 999px; background: var(--unit-accent); color: #fff; font-size: var(--unit-text-micro); font-weight: 800; letter-spacing: .045em; text-transform: uppercase;
    white-space: nowrap;
}
.unit-memory-group.is-tier-2 .unit-memory-tier { background: #536c72; }
.unit-memory-group-heading strong { display: block; color: #294f57; font-size: var(--unit-text-copy); line-height: 1.35; }
.unit-memory-group-heading p { margin: 2px 0 0; color: #687d82; font-size: var(--unit-text-caption); line-height: 1.48; }
.unit-memory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.unit-memory-group.is-tier-2 .unit-memory-grid { grid-template-columns: 1fr; }
.unit-memory-item {
    min-width: 0; overflow: hidden; border-radius: 15px; background: rgba(255, 255, 255, .88);
    box-shadow: 0 3px 14px rgba(24, 65, 74, .055); transition: transform .16s ease, box-shadow .16s ease;
}
.unit-memory-item[open] { box-shadow: 0 7px 22px rgba(24, 65, 74, .09); }
.unit-memory-item summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 78px; padding: 14px; cursor: pointer; list-style: none; }
.unit-memory-item summary::-webkit-details-marker { display: none; }
.unit-memory-item summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--unit-accent) 38%, transparent); outline-offset: -2px; border-radius: 15px; }
.unit-memory-item summary:hover { background: color-mix(in srgb, var(--unit-accent) 3%, #fff); }
.unit-memory-prompt > span { display: block; margin-bottom: 5px; color: #75888d; font-size: var(--unit-text-micro); font-weight: 760; letter-spacing: .055em; text-transform: uppercase; }
.unit-memory-prompt > strong { display: block; color: #294f57; font-size: var(--unit-text-copy); line-height: 1.48; }
.unit-memory-action {
    display: inline-flex; align-items: center; gap: 7px; color: var(--unit-accent);
    font-size: var(--unit-text-meta); font-weight: 760; white-space: nowrap;
}
.unit-memory-action-icon {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: color-mix(in srgb, var(--unit-accent) 8%, #fff); transition: background .16s ease;
}
.unit-memory-item summary:hover .unit-memory-action-icon { background: color-mix(in srgb, var(--unit-accent) 14%, #fff); }
.unit-memory-action-open { display: none; }
.unit-memory-chevron { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .18s ease; }
.unit-memory-item[open] .unit-memory-action-closed { display: none; }
.unit-memory-item[open] .unit-memory-action-open { display: inline; }
.unit-memory-item[open] .unit-memory-chevron { transform: rotate(-135deg) translate(-1px, -1px); }
.unit-memory-answer {
    margin: 0 12px 11px; padding: 4px 0 3px 11px; border-left: 2px solid color-mix(in srgb, var(--unit-accent) 30%, transparent);
    border-radius: 0; background: transparent;
}
.unit-memory-answer p { margin: 0; color: #385c64; font-size: var(--unit-text-copy); line-height: 1.64; }
.unit-memory-answer .unit-memory-answer-translation {
    margin-top: 7px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--unit-accent) 12%, transparent);
    color: #587078; font-size: var(--unit-text-small); line-height: 1.58;
}
.unit-memory-answer small { display: block; margin-top: 6px; color: #718489; font-size: var(--unit-text-meta); line-height: 1.5; }

.unit-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.unit-topic-card { min-height: 128px; padding: 17px; border: 1px solid var(--unit-line); border-radius: 17px; background: rgba(247, 252, 251, .82); }
.unit-topic-code {
    display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--unit-accent) 10%, #fff); color: var(--unit-accent); font-size: var(--unit-text-meta); font-weight: 750;
}
.unit-topic-card h3 { margin: 13px 0 5px; color: #344054; font-size: var(--unit-text-heading-small); line-height: 1.4; }
.unit-topic-card p { margin: 0; color: #697b8a; font-size: var(--unit-text-small); line-height: 1.55; }

.unit-topic-grid.is-base-units {
    grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 5px;
    border: 1px solid color-mix(in srgb, var(--unit-accent) 13%, transparent); border-radius: 18px;
    background: color-mix(in srgb, var(--unit-accent) 4%, #fff);
}
.unit-topic-grid.is-base-units .unit-topic-card {
    min-height: 88px; padding: 12px; border: 0; border-right: 1px solid color-mix(in srgb, var(--unit-accent) 11%, transparent);
    border-radius: 0; background: transparent; box-shadow: none;
}
.unit-topic-grid.is-base-units .unit-topic-card:last-child { border-right: 0; }
.unit-topic-grid.is-base-units .unit-topic-code {
    width: auto; height: auto; min-height: 0; justify-content: flex-start; padding: 0; border-radius: 0; background: transparent;
    font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-size: 20px;
}
.unit-topic-grid.is-base-units .unit-topic-card h3 { margin-top: 8px; color: #214b52; font-size: 14px; }
.unit-topic-grid.is-base-units .unit-topic-card p { color: #60777d; font-size: 12.5px; line-height: 1.5; }

.unit-prefix-scale {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
    width: min(100%, 650px); margin: 18px auto 0;
}
.unit-prefix-item {
    min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
    gap: 1px 8px; align-items: center; min-height: 68px; padding: 10px 11px;
    border-radius: 14px; background: linear-gradient(145deg, #f4fbfa, #e8f5f2); color: #254f56;
}
.unit-prefix-item strong { grid-row: 1 / 3; color: var(--unit-accent); font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-size: 21px; }
.unit-prefix-item span { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.unit-prefix-item small { color: #60777d; font-size: var(--unit-text-meta); }
.unit-prefix-item.is-base { border: 1px solid color-mix(in srgb, var(--unit-accent) 24%, transparent); background: color-mix(in srgb, var(--unit-accent) 10%, #fff); }

.unit-module-list { display: grid; gap: 10px; margin-top: 24px; }
.unit-module {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 13px; align-items: center;
    padding: 15px; border: 1px solid var(--unit-line); border-radius: 17px; background: rgba(255, 255, 255, .78);
}
.unit-module-index {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px;
    background: color-mix(in srgb, var(--unit-accent) 10%, #fff); color: var(--unit-accent); font-size: var(--unit-text-ui); font-weight: 760;
}
.unit-module strong { display: block; color: #344054; font-size: var(--unit-text-copy); }
.unit-module span { display: block; margin-top: 2px; color: #697b8a; font-size: var(--unit-text-small); }
.unit-module-status {
    min-height: 25px; padding: 4px 8px; border-radius: 999px; background: #f2f4f7; color: #667085;
    font-size: var(--unit-text-micro); font-weight: 740; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}

.unit-practice-panel {
    position: relative; overflow: hidden; margin-top: 24px; border-radius: 19px; padding: 24px;
    background: linear-gradient(145deg, var(--unit-deep), color-mix(in srgb, var(--unit-accent) 56%, var(--unit-deep))); color: #fff;
}
.unit-practice-panel::after {
    content: ""; position: absolute; width: 180px; height: 180px; right: -70px; bottom: -110px;
    border: 1px solid rgba(255, 255, 255, .13); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255, 255, 255, .025);
}
.unit-practice-panel strong, .unit-practice-panel p, .unit-practice-panel a { position: relative; z-index: 1; }
.unit-practice-panel strong { display: block; font-size: var(--unit-text-heading-large); }
.unit-practice-panel p { max-width: 500px; margin: 7px 0 17px; color: rgba(255, 255, 255, .78); font-size: var(--unit-text-support); line-height: 1.58; }
.unit-practice-panel .unit-primary-action { width: 100%; }
.unit-primary-action, .unit-secondary-action {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: var(--unit-radius-control); padding: 8px 12px; text-decoration: none; font-size: var(--unit-text-ui); font-weight: 720; white-space: nowrap; cursor: pointer;
    transition: transform var(--unit-motion-fast) var(--unit-motion-ease), background var(--unit-motion-fast) ease, box-shadow var(--unit-motion-fast) ease;
}
.unit-primary-action { background: #fff; color: var(--unit-deep); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.unit-secondary-action { background: #f2f4f7; color: #475467; }
.unit-primary-action:hover, .unit-secondary-action:hover { transform: translateY(-1px); }

.unit-release-list { display: grid; gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; }
.unit-release-list li {
    display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; align-items: center;
    padding: 11px 0; border-bottom: 1px solid #eef0f3; color: #475467; font-size: var(--unit-text-small);
}
.unit-release-list li:last-child { border-bottom: 0; }
.unit-release-dot { width: 8px; height: 8px; margin-left: 3px; border-radius: 50%; background: #d0d5dd; }
.unit-release-dot.is-ready { background: #12b76a; box-shadow: 0 0 0 4px rgba(18, 183, 106, .1); }
.unit-release-list small { color: #7f8e99; font-size: var(--unit-text-meta); }

.unit-action-rail { display: grid; gap: 12px; }
.unit-action-card { border-radius: var(--unit-radius-card); padding: 15px; }
.unit-action-card.is-primary {
    color: #fff; border-color: transparent;
    background: linear-gradient(145deg, var(--unit-deep), color-mix(in srgb, var(--unit-accent) 48%, var(--unit-deep)));
    box-shadow: 0 18px 46px color-mix(in srgb, var(--unit-deep) 20%, transparent);
}
.unit-action-label { display: block; margin-bottom: 8px; color: #7f8e99; font-size: var(--unit-text-micro); font-weight: 760; letter-spacing: .075em; text-transform: uppercase; }
.unit-action-card.is-primary .unit-action-label { color: rgba(255, 255, 255, .55); }
.unit-action-card strong { display: block; color: #344054; font-size: var(--unit-text-copy); line-height: 1.45; }
.unit-action-card.is-primary strong { color: #fff; }
.unit-action-card p { margin: 7px 0 13px; color: #697b8a; font-size: var(--unit-text-action); line-height: 1.55; }
.unit-action-card.is-primary p { color: rgba(255, 255, 255, .65); }
.unit-action-card .unit-primary-action, .unit-action-card .unit-secondary-action { width: 100%; }
.unit-learning-card { padding: 12px 13px; }
.unit-learning-card .unit-action-label { margin-bottom: 5px; }
.unit-learning-card p { margin: 4px 0 9px; font-size: 13px; line-height: 1.5; }
.unit-learning-card .unit-secondary-action { min-height: 32px; padding-block: 5px; }
.unit-learning-card .unit-secondary-action { justify-content: space-between; text-align: left; }
.unit-learning-card .unit-secondary-action::after {
    content: ""; width: 7px; height: 7px; flex: 0 0 auto;
    border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
    transform: rotate(45deg); opacity: .58;
}
.unit-learning-card.is-ready { border-color: color-mix(in srgb, var(--unit-accent) 22%, var(--unit-line)); }
.unit-learning-card.is-ready .unit-secondary-action {
    background: color-mix(in srgb, var(--unit-accent) 9%, #fff);
    color: var(--unit-deep);
}
.unit-learning-sync {
    display: block; margin-top: 7px; color: #98a2b3;
    font-size: var(--unit-text-micro); font-weight: 650; line-height: 1.45;
}
.unit-mini-links { display: grid; gap: 5px; }
.unit-mini-link {
    min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 9px; border-radius: 10px; color: #475467; text-decoration: none; font-size: var(--unit-text-ui); font-weight: 650; white-space: nowrap;
}
.unit-mini-link:hover { background: #f2f4f7; }
.unit-mini-link[aria-disabled="true"] { color: #98a2b3; cursor: default; }
.unit-mini-chevron {
    width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
    transform: rotate(45deg); opacity: .62;
}
.unit-mini-count {
    min-height: 20px; display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px;
    background: color-mix(in srgb, var(--unit-accent) 8%, #fff); color: var(--unit-accent); font-size: var(--unit-text-micro); font-weight: 760;
}

.unit-question-nav-card strong { font-size: 14.5px; }
.unit-question-nav-list {
    display: grid; grid-template-columns: repeat(5, 30px); gap: 5px; justify-content: start; margin-top: 10px;
}
.unit-question-nav-link {
    min-width: 30px; min-height: 30px; display: inline-grid; place-items: center; border-radius: 9px;
    background: color-mix(in srgb, var(--unit-accent) 6%, #f4f6f8); color: #667085;
    font-size: var(--unit-text-meta); font-weight: 760; text-decoration: none;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.unit-question-nav-link:hover { background: color-mix(in srgb, var(--unit-accent) 11%, #f4f6f8); color: var(--unit-deep); transform: translateY(-1px); }
.unit-question-nav-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--unit-accent) 34%, transparent); outline-offset: 2px; }
.unit-question-nav-link.is-active { background: var(--unit-accent); color: #fff; box-shadow: 0 5px 14px color-mix(in srgb, var(--unit-accent) 22%, transparent); }
.unit-toc-question-group { display: none; }

.unit-toc-memory-shortcut {
    min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 10px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--unit-accent) 13%, var(--unit-line)); border-radius: 15px;
    background: color-mix(in srgb, var(--unit-accent) 4%, rgba(255, 255, 255, .92)); color: var(--unit-deep);
    box-shadow: 0 10px 28px rgba(16, 59, 74, .05); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    font-size: var(--unit-text-ui); font-weight: 730; text-decoration: none; transition: background .16s ease, color .16s ease, transform .16s ease;
}
.unit-toc-memory-shortcut:hover { background: color-mix(in srgb, var(--unit-accent) 9%, #fff); color: var(--unit-accent); transform: translateY(-1px); }
.unit-toc-memory-shortcut.is-active { border-color: color-mix(in srgb, var(--unit-accent) 28%, var(--unit-line)); background: color-mix(in srgb, var(--unit-accent) 9%, #fff); color: var(--unit-accent); }
.unit-toc-memory-shortcut:focus-visible { outline: 2px solid color-mix(in srgb, var(--unit-accent) 34%, transparent); outline-offset: 2px; }

.unit-shell-footer { border-top: 1px solid var(--unit-line); background: rgba(255, 255, 255, .64); }
.unit-shell-footer-inner { width: min(var(--unit-shell-width), calc(100% - 48px)); margin: 0 auto; padding: 24px 0 30px; }
.unit-neighbour-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.unit-neighbour-link {
    min-width: 0; padding: 14px 15px; border: 1px solid var(--unit-line); border-radius: 15px;
    background: rgba(255, 255, 255, .72); color: #344054; text-decoration: none;
}
.unit-neighbour-link:last-child { text-align: right; }
.unit-neighbour-link small { display: block; margin-bottom: 3px; color: #7f8e99; font-size: var(--unit-text-micro); text-transform: uppercase; letter-spacing: .065em; }
.unit-neighbour-link strong { font-size: var(--unit-text-small); }
.unit-footer-credit { margin: 20px 0 0; color: #7f8e99; font-size: var(--unit-text-meta); text-align: center; }
.unit-toc-scrim { display: none; }

@media (max-width: 1060px) {
    .unit-shell-workspace { grid-template-columns: 206px minmax(0, 1fr); }
    .unit-action-rail { position: static; grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .unit-topic-grid.is-base-units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .unit-topic-grid.is-base-units .unit-topic-card { border-bottom: 1px solid color-mix(in srgb, var(--unit-accent) 11%, transparent); }
    .unit-topic-grid.is-base-units .unit-topic-card:nth-child(3n) { border-right: 0; }
    .unit-topic-grid.is-base-units .unit-topic-card:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (min-width: 980px) {
    .unit-shell-hero h1 { white-space: nowrap; }
}

@media (max-width: 760px) {
    :root {
        --unit-header-height: 52px;
    }
    html.unit-toc-open, body.unit-toc-open { overflow: hidden; overscroll-behavior: none; }
    .unit-shell-header-inner { width: calc(100% - 20px); gap: 8px; }
    .unit-shell-identity { min-width: 0; flex: 0 0 auto; }
    .unit-shell-tools { min-width: 0; flex: 0 0 auto; max-width: calc(100% - 68px); }
    .unit-shell-header #authBtn {
        min-width: 0; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px;
    }
    .unit-shell-header #authBtn > * { flex: 0 0 auto; }
    .unit-shell-header .app-nav-context { display: none; }
    .unit-shell-header .app-nav-brand { font-size: var(--unit-text-meta); padding-right: 3px; }
    .unit-shell-header .app-nav-mark { width: 17px; height: 17px; }
    .unit-shell-tools { gap: 5px; }
    .unit-switcher { width: 108px; padding-left: 9px; font-size: var(--unit-text-meta); }
    .unit-shell-header #authBtn .login-link, .unit-shell-header #authBtn .user-profile-link { padding: 4px 9px; font-size: var(--unit-text-meta); }
    .unit-shell-header #authBtn .user-name { display: none; }
    .unit-shell-header .nav-admin-label { display: none; }
    .unit-shell-header .nav-admin-label-compact { display: inline; }
    .unit-shell-hero-inner { width: calc(100% - 36px); padding: 52px 0 40px; }
    .unit-shell-hero h1 { font-size: clamp(38px, 10.4vw, 44px); line-height: 1.03; }
    .unit-hero-subtitle { margin-top: 17px; font-size: var(--unit-text-emphasis); line-height: 1.55; }
    .unit-hero-meta { flex-wrap: wrap; gap: 6px; margin-top: 24px; overflow: visible; }
    .unit-hero-chip { flex: 0 0 auto; }
    .unit-mobile-toc-bar {
        position: fixed; right: max(12px, env(safe-area-inset-right, 0px));
        bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 170;
        display: inline-flex; align-items: center; width: auto; min-height: 0; padding: 0;
        border: 0; background: transparent;
        transition: opacity .18s ease, transform .18s ease;
    }
    .unit-mobile-resume {
        width: 100%; min-height: 42px; align-items: center; justify-content: center; margin: 0 0 8px; overflow: hidden;
        border: 0; border-radius: 13px; padding: 7px 12px;
        background: color-mix(in srgb, var(--unit-accent) 10%, #fff); color: var(--unit-deep);
        font-size: var(--unit-text-meta); font-weight: 720; text-overflow: ellipsis; white-space: nowrap;
    }
    .unit-mobile-resume:not([hidden]) { display: flex; }
    .unit-mobile-resume[hidden] { display: none; }
    .unit-mobile-toc-toggle {
        flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
        border: 1px solid color-mix(in srgb, var(--unit-light) 42%, transparent); border-radius: 999px;
        padding: 0 16px 0 14px;
        background: linear-gradient(145deg, color-mix(in srgb, var(--unit-light) 76%, var(--unit-accent)), var(--unit-accent));
        color: #fff; box-shadow: 0 14px 32px color-mix(in srgb, var(--unit-deep) 27%, transparent), inset 0 1px rgba(255, 255, 255, .28);
        font-size: var(--unit-text-ui); font-weight: 760; letter-spacing: -.005em; cursor: pointer;
    }
    .unit-mobile-toc-toggle::before {
        content: ""; width: 14px; height: 11px; flex: 0 0 auto;
        border-top: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
        background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1.7px no-repeat;
    }
    .unit-mobile-toc-toggle:hover { transform: translateY(-1px); }
    .unit-mobile-toc-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--unit-accent) 28%, transparent); outline-offset: 3px; }
    .unit-toc-open .unit-mobile-toc-bar { opacity: 0; pointer-events: none; transform: translateY(8px); }
    .unit-shell-workspace { width: calc(100% - 24px); padding: 14px 0 44px; display: block; }
    .unit-toc {
        position: fixed; z-index: 210; top: auto; left: 10px; right: 10px; bottom: 10px;
        transform: translateY(calc(100% + 24px)); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
    }
    .unit-toc-open .unit-toc { transform: translateY(0); }
    .unit-toc-panel {
        max-height: min(calc(70vh - 52px), 506px); overflow-y: auto; border-radius: var(--unit-radius-panel); padding: 11px;
        background: rgba(255, 255, 255, .96); box-shadow: var(--unit-shadow-overlay);
    }
    .unit-toc-memory-shortcut {
        min-height: 44px; margin: 8px 2px 0; padding-inline: 14px; border-color: transparent; border-radius: 15px;
        background: rgba(255, 255, 255, .97); box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
    }
    .unit-toc-close { display: grid; place-items: center; }
    .unit-toc-scrim {
        position: fixed; z-index: 200; inset: 0; display: block; visibility: hidden; opacity: 0;
        border: 0; background: rgba(15, 23, 42, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
        transition: opacity .2s ease, visibility .2s ease;
    }
    .unit-toc-open .unit-toc-scrim { visibility: visible; opacity: 1; }
    .unit-article { gap: 12px; }
    .unit-section { scroll-margin-top: calc(var(--unit-header-height) + 16px); border-radius: var(--unit-radius-panel); padding: 22px 19px; }
    .unit-section h2 { font-size: var(--unit-part-title-size); }
    .unit-section-lead { font-size: var(--unit-text-emphasis); }
    .unit-section-heading { grid-template-columns: 40px minmax(0, 1fr); gap: 11px; }
    .unit-section-number { width: 40px; height: 40px; border-radius: 13px; font-size: var(--unit-part-number-size); }
    .unit-guest-gate { grid-template-columns: 46px minmax(0, 1fr); gap: 13px; padding: 22px 19px; border-radius: var(--unit-radius-panel); }
    .unit-guest-gate-icon { width: 46px; height: 46px; border-radius: 14px; }
    .unit-guest-gate-icon::before { left: 14px; top: 11px; width: 16px; height: 14px; }
    .unit-guest-gate-icon::after { left: 12px; top: 24px; width: 23px; height: 17px; }
    .unit-guest-gate-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .unit-guest-gate-actions :is(.unit-primary-action, .unit-secondary-action) { width: 100%; min-width: 0; }
    .unit-content-block { padding: 15px; }
    .unit-block-definition { padding: 12px 14px 12px 18px; }
    .unit-definition-entry { grid-template-columns: 1fr; gap: 3px; margin-top: 7px; }
    .unit-block-formula { grid-template-columns: 1fr; gap: 8px; }
    .unit-formula { justify-content: safe center; width: 100%; padding: 6px 0; text-align: center; }
    .unit-derivation-heading { display: grid; gap: 8px; }
    .unit-derivation-origin { justify-self: start; }
    .unit-derivation-body { grid-template-columns: 1fr; gap: 13px; }
    .unit-derivation-formula { padding: 4px 0; }
    .unit-derivation-formula.is-long { font-size: 13px; }
    .unit-derivation-formula.is-very-long { font-size: 11.5px; }
    .unit-derivation-facts { grid-template-columns: 1fr; gap: 6px; }
    .unit-derivation-facts > div { min-height: 36px; padding: 8px 10px; }
    .unit-derivation-facts > div + div {
        border-top: 0; border-left: 0;
    }
    .unit-block-equation-summary { padding: 15px; }
    .unit-equation-summary-heading { align-items: center; }
    .unit-equation-summary-rows { grid-template-columns: 1fr; border-radius: 12px; }
    .unit-equation-summary-row { grid-column: 1; grid-template-columns: 1fr; gap: 0; min-height: 0; padding: 0; }
    .unit-equation-summary-formula {
        min-height: 52px; padding: 8px 9px; border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--unit-accent) 13%, #dde5e7);
    }
    .unit-equation-summary-note { justify-items: start; padding: 10px 13px 12px; text-align: left; }
    .unit-block-equation-chooser { padding: 15px; }
    .unit-equation-chooser-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 7px; margin-top: 12px; }
    .unit-equation-chooser-button { min-height: 44px; padding: 6px 4px; }
    .unit-equation-chooser-results { min-height: 0; }
    .unit-equation-chooser-result { grid-template-columns: 1fr; }
    .unit-equation-chooser-formula { min-height: 60px; padding: 12px 8px 10px; font-size: 16px; }
    .unit-equation-chooser-context { padding: 9px 11px 12px; border-top: 1px solid color-mix(in srgb, var(--unit-accent) 11%, #e0e7e8); border-left: 0; }
    .unit-motion-route-label, .unit-motion-place-label { font-size: 19px; }
    .unit-motion-displacement-label { font-size: 17px; }
    .unit-motion-graph-axis-label { font-size: 20px; }
    .unit-motion-graph-tick { font-size: 15px; }
    .unit-motion-graph-point-name { font-size: 17px; }
    .unit-motion-graph-delta-label, .unit-motion-graph-tangent-label { font-size: 15px; }
    .unit-motion-graph-symbol { font-size: 19px; }
    .unit-motion-graph-symbol.is-area { font-size: 17px; }
    .unit-motion-graph-math { font-size: 16px; }
    .unit-motion-limit-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(45px, 1fr)); gap: 3px; }
    .unit-motion-limit-step { min-height: 36px; padding: 6px 3px; font-size: 12px; }
    .unit-block-checkpoint { padding: 14px 15px; }
    .unit-motion-graph-callout { font-size: 18px; }
    .unit-motion-snapshot-row { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
    .unit-vertical-motion-title { font-size: 20px; }
    .unit-vertical-motion-time, .unit-vertical-motion-note { font-size: 15px; }
    .unit-vertical-motion-symbol { font-size: 19px; }
    .unit-block-light-gate { padding: 15px 12px 14px; }
    .unit-light-gate-title { font-size: 19px; }
    .unit-light-gate-note, .unit-light-gate-time-value { font-size: 15px; }
    .unit-light-gate-time-label, .unit-light-gate-symbol { font-size: 18px; }
    .unit-light-gate-event-label { font-size: 21px; }
    .unit-light-gate-axis-label, .unit-light-gate-gradient-label { font-size: 14px; }
    .unit-light-gate-formulae { grid-template-columns: 1fr; margin-top: 8px; }
    .unit-light-gate-formulae > span { padding: 8px 6px; font-size: 13px; }
    .unit-light-gate-formulae > span + span { border-top: 0; border-left: 0; }
    .unit-block-component-motion { padding: 15px 12px 14px; }
    .unit-component-title { font-size: 20px; }
    .unit-component-note, .unit-component-time { font-size: 15px; }
    .unit-component-symbol { font-size: 19px; }
    .unit-block-identity { gap: 3px; }
    .unit-lesson-transition { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; padding: 12px; }
    .unit-lesson-transition-label { grid-column: 1; justify-self: start; }
    .unit-lesson-transition p { grid-column: 1 / -1; grid-row: 2; font-size: var(--unit-text-small); }
    .unit-lesson-transition-arrow { grid-column: 2; grid-row: 1; }
    .unit-practice-card { scroll-margin-top: calc(var(--unit-header-height) + 16px); }
    .unit-practice-heading { padding: 12px 14px 9px; }
    .unit-practice-body { padding: 0 14px 14px; }
    .unit-practice-question-host { padding-top: 4px; }
    .unit-studio-item summary { gap: 10px; padding: 14px 12px; }
    .unit-studio-summary-copy strong { font-size: var(--unit-text-heading-small); }
    .unit-studio-summary-copy p { font-size: var(--unit-text-small); }
    .unit-studio-body { padding: 0 12px 16px; }
    .unit-studio-body ul { padding-left: 20px; font-size: var(--unit-text-copy); }
    .unit-block-figure.unit-block-studio-opening { width: 100%; }
    .unit-block-figure.unit-block-studio-opening .unit-figure img { max-height: none; }
    .unit-studio-visual { padding: 11px 0; }
    .unit-studio-visual-item, .unit-studio-graph-example { padding-right: 9px; padding-left: 14px; }
    .unit-studio-graph-example { grid-template-columns: 66px minmax(0, 1fr); column-gap: 8px; }
    .unit-mini-graph { width: 66px; height: 54px; background-size: 13px 13px; }
    .unit-studio-flow { gap: 6px; }
    .unit-studio-flow-arrow { font-size: 14px; }
    .unit-quantity-compare { grid-template-columns: 1fr; }
    .unit-quantity-kind { padding: 12px 13px 13px; }
    .unit-quantity-kind + .unit-quantity-kind {
        border-top: 1px solid color-mix(in srgb, var(--unit-accent) 11%, #e2e8ea); border-left: 0;
    }
    .unit-quantity-kind > strong { font-size: 16px; }
    .unit-quantity-kind > p { font-size: 14.5px; }
    .unit-block-vector-diagram { padding: 15px 12px 12px; }
    .unit-block-vector-diagram svg { width: 100%; margin-top: 8px; }
    .unit-vector-svg-label { font-size: 24px; }
    .unit-vector-svg-note { font-size: 18px; }
    .unit-vector-theta { font-size: 26px; }
    .unit-vector-facts > div { padding: 9px 8px 2px; }
    .unit-vector-facts strong { font-size: 14.5px; }
    .unit-retrieval-map { grid-template-columns: 1fr; }
    .unit-retrieval-map { padding: 5px; }
    .unit-retrieval-strand { grid-template-columns: 10px minmax(0, 1fr); gap: 9px; min-height: 0; padding: 12px 10px; }
    .unit-retrieval-copy strong { font-size: var(--unit-text-copy); }
    .unit-retrieval-copy p { font-size: var(--unit-text-small); }
    .unit-memory-group { padding: 11px; border-radius: 18px; }
    .unit-memory-group-heading { padding-bottom: 10px; }
    .unit-memory-grid { grid-template-columns: 1fr; gap: 8px; }
    .unit-memory-item summary { gap: 8px; min-height: 70px; padding: 13px; }
    .unit-memory-prompt > strong { font-size: var(--unit-text-copy); }
    .unit-memory-action { font-size: var(--unit-text-meta); }
    .unit-memory-action-icon { width: 25px; height: 25px; }
    .unit-topic-grid { grid-template-columns: 1fr; }
    .unit-topic-grid.is-base-units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .unit-topic-grid.is-base-units .unit-topic-card { min-height: 78px; border-right: 1px solid color-mix(in srgb, var(--unit-accent) 11%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--unit-accent) 11%, transparent); }
    .unit-topic-grid.is-base-units .unit-topic-card:nth-child(2n) { border-right: 0; }
    .unit-topic-grid.is-base-units .unit-topic-card:nth-child(3) { border-right: 1px solid color-mix(in srgb, var(--unit-accent) 11%, transparent); }
    .unit-topic-grid.is-base-units .unit-topic-card:nth-child(4) { border-bottom: 1px solid color-mix(in srgb, var(--unit-accent) 11%, transparent); }
    .unit-topic-grid.is-base-units .unit-topic-card:last-child { grid-column: 1 / -1; min-height: 74px; border-right: 0; border-bottom: 0; }
    .unit-topic-grid.is-base-units .unit-topic-card h3 { margin-top: 7px; }
    .unit-prefix-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .unit-prefix-item { min-height: 62px; padding: 8px 9px; }
    .unit-prefix-item strong { font-size: 19px; }
    .unit-prefix-item span { font-size: 12.5px; }
    .unit-prefix-item small { font-size: 11.5px; }
    .unit-block-figure:not(.unit-block-lesson-opening) { width: min(100%, 460px); padding-inline: 0; }
    .unit-block-figure:not(.unit-block-lesson-opening) .unit-figure img { max-height: 230px; }
    .unit-topic-card { min-height: 0; }
    .unit-module { grid-template-columns: 36px minmax(0, 1fr); }
    .unit-module-index { width: 36px; height: 36px; }
    .unit-module-status { grid-column: 2; justify-self: start; }
    .unit-practice-panel { padding: 21px; }
    .unit-action-rail { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
    .unit-question-nav-card { display: none !important; }
    .unit-toc-question-group {
        display: block; margin: 8px 2px 0; padding: 9px 4px 2px; border-top: 1px solid color-mix(in srgb, var(--unit-accent) 11%, var(--unit-line));
        background: transparent;
    }
    .unit-toc-question-label {
        display: block; margin: 0 2px 6px; color: #7b8794; font-size: var(--unit-text-micro); font-weight: 750; letter-spacing: .04em;
    }
    .unit-toc-question-nav { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin-top: 0; }
    .unit-toc-question-nav .unit-question-nav-link { width: auto; min-width: 0; min-height: 30px; border-radius: 8px; }
    .unit-shell-footer-inner { width: calc(100% - 24px); padding-bottom: max(86px, calc(70px + env(safe-area-inset-bottom, 0px))); }
    .unit-neighbour-nav { grid-template-columns: 1fr; }
    .unit-neighbour-link:last-child { text-align: left; }
}

@media (max-width: 480px) {
    .unit-shell-header .app-nav-brand > span:last-child { display: none; }
    .unit-shell-header .app-nav-brand { padding-right: 2px; }
}

@media (max-width: 359px) {
    .unit-toc-question-nav { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .unit-dynamics-visual { padding: 15px 12px 13px; }
    .unit-dynamics-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 12px; }
    .unit-dynamics-visual .unit-dynamics-controls.has-auto {
        grid-template-columns: minmax(43px, .68fr) repeat(var(--unit-dynamics-state-count), minmax(0, 1fr));
    }
    .unit-dynamics-control { min-height: 38px; padding: 6px 4px; font-size: 11.5px; line-height: 1.2; white-space: normal; }
    .unit-dynamics-auto { padding-inline: 3px; font-size: 11px; }
    .unit-timeline-controls { grid-template-columns: 54px minmax(0, 1fr); gap: 5px 8px; margin-top: 12px; padding: 5px; }
    .unit-timeline-play { min-width: 0; min-height: 38px; padding-inline: 6px; font-size: 11.5px; }
    .unit-timeline-phase { grid-column: 1 / -1; min-width: 0; font-size: 11.5px; text-align: center; }
    .unit-block-drag-speed .unit-dynamics-control,
    .unit-block-terminal-velocity .unit-dynamics-control { padding-inline: 2px; font-size: 11px; }
    .unit-block-parachute-opening .unit-dynamics-control { padding-inline: 3px; font-size: 11.5px; }
    .unit-dynamics-visual svg { width: 100%; margin-top: 6px; }
    .unit-dynamics-svg-label { font-size: 19px; stroke-width: 5px; }
    .unit-dynamics-svg-note { font-size: 16px; stroke-width: 4px; }
    .unit-dynamics-object-label { font-size: 19px; stroke-width: 4px; }
    .unit-block-circular-motion .unit-dynamics-svg-label { font-size: 21px; }
    .unit-block-circular-motion .unit-dynamics-svg-note { font-size: 18px; }
    .unit-circular-summary { font-size: 22px; stroke-width: 5px; }
    .unit-circular-formula { font-size: 21px; stroke-width: 5px; }
    .unit-block-velocity-change .unit-dynamics-svg-label { font-size: 21px; }
    .unit-block-velocity-change .unit-dynamics-svg-note { font-size: 18px; }
    .unit-velocity-panel-title { font-size: 19px; stroke-width: 5px; }
    .unit-velocity-chord-label { font-size: 19px; stroke-width: 5px; }
    .unit-velocity-vector-label { font-size: 21px; stroke-width: 5px; }
    .unit-velocity-difference-label { font-size: 22px; stroke-width: 5px; }
    .unit-velocity-quiet-message { font-size: 19px; stroke-width: 5px; }
    .unit-velocity-quiet-message.is-accent { font-size: 21px; }
    .unit-velocity-similarity { font-size: 20px; stroke-width: 5px; }
    .unit-block-force-provider .unit-dynamics-control { padding-inline: 2px; font-size: 11px; }
    .unit-provider-force-label, .unit-provider-velocity-label { font-size: 20px; stroke-width: 5px; }
    .unit-provider-centre-label { font-size: 18px; stroke-width: 5px; }
    .unit-provider-kicker { font-size: 16px; }
    .unit-provider-interaction { font-size: 20px; }
    .unit-provider-context { font-size: 16px; }
    .unit-provider-context.is-quiet { font-size: 15px; }
    .unit-provider-role { font-size: 18px; }
    .unit-provider-result { font-size: 13.5px; }
    .unit-block-gravity-field .unit-dynamics-control,
    .unit-block-inverse-gravity .unit-dynamics-control,
    .unit-block-gravity-orbit .unit-dynamics-control,
    .unit-block-gravity-potential .unit-dynamics-control { padding-inline: 3px; font-size: 11.5px; }
    .unit-gravity-state-title { font-size: 20px; stroke-width: 5px; }
    .unit-gravity-state-kicker { font-size: 16px; }
    .unit-gravity-state-copy { font-size: 17px; stroke-width: 5px; }
    .unit-gravity-state-copy.is-quiet { font-size: 15px; }
    .unit-gravity-distance-label { font-size: 17px; stroke-width: 5px; }
    .unit-gravity-vector-label { font-size: 20px; stroke-width: 5px; }
    .unit-gravity-axis-label { font-size: 20px; stroke-width: 5px; }
    .unit-gravity-building-label,
    .unit-gravity-centre-label { font-size: 16px; }
    .unit-block-thermal-transfer .unit-dynamics-control,
    .unit-block-temperature-scale .unit-dynamics-control { padding-inline: 3px; font-size: 11.5px; }
    .unit-block-thermometric-property .unit-dynamics-control,
    .unit-block-specific-energy .unit-dynamics-control { padding-inline: 2px; font-size: 11px; line-height: 1.18; }
    .unit-thermal-body-label { font-size: 20px; stroke-width: 5px; }
    .unit-thermal-temperature { font-size: 22px; stroke-width: 5px; }
    .unit-thermal-state-title { font-size: 21px; stroke-width: 5px; }
    .unit-thermal-contact-label { font-size: 16px; stroke-width: 5px; }
    .unit-thermal-net-label { font-size: 19px; stroke-width: 5px; }
    .unit-thermometric-title { font-size: 21px; stroke-width: 5px; }
    .unit-thermometric-axis-label { font-size: 22px; stroke-width: 5px; }
    .unit-thermometric-note { font-size: 16px; stroke-width: 4px; }
    .unit-temperature-scale-heading { font-size: 20px; stroke-width: 5px; }
    .unit-temperature-scale-reading { font-size: 19px; stroke-width: 5px; }
    .unit-temperature-scale-formula { font-size: 21px; stroke-width: 5px; }
    .unit-temperature-interval-title { font-size: 22px; stroke-width: 5px; }
    .unit-temperature-scale-note { font-size: 16px; stroke-width: 4px; }
    .unit-energy-axis-label { font-size: 18px; stroke-width: 5px; }
    .unit-energy-bar-value,
    .unit-energy-bar-label { font-size: 19px; stroke-width: 5px; }
    .unit-energy-ratio-label,
    .unit-energy-stage-title { font-size: 22px; stroke-width: 5px; }
    .unit-energy-stage-label { font-size: 18px; stroke-width: 5px; }
    .unit-energy-stage-note { font-size: 16px; stroke-width: 4px; }
    .unit-plumb-line-label { font-size: 17px; stroke-width: 5px; }
    .unit-turning-result, .unit-moment-result { font-size: 19px; stroke-width: 5px; }
    .unit-moment-distance-label { font-size: 18px; stroke-width: 5px; }
    .unit-moments-force-label { font-size: 18px; stroke-width: 5px; }
    .unit-moments-direction { font-size: 15px; stroke-width: 5px; }
    .unit-moments-dimension-label { font-size: 15px; stroke-width: 5px; }
    .unit-moments-result { font-size: 13.5px; }
    .unit-block-couple-torque .unit-dynamics-control { padding-inline: 3px; font-size: 11.5px; line-height: 1.18; }
    .unit-block-couple-torque svg { height: min(78vw, 340px); }
    .unit-couple-force-label { font-size: 18px; stroke-width: 5px; }
    .unit-couple-distance-label { font-size: 16px; stroke-width: 5px; }
    .unit-couple-point-label { font-size: 18px; stroke-width: 5px; }
    .unit-couple-result { font-size: 13.5px; }
    .unit-block-equilibrium .unit-dynamics-control,
    .unit-block-fluid-pressure .unit-dynamics-control { padding-inline: 3px; font-size: 11.5px; }
    .unit-equilibrium-vector-label,
    .unit-equilibrium-force-label,
    .unit-equilibrium-support-label { font-size: 18px; stroke-width: 5px; }
    .unit-equilibrium-gap-label,
    .unit-equilibrium-moment-label,
    .unit-equilibrium-dimension-label { font-size: 16px; stroke-width: 5px; }
    .unit-equilibrium-triangle-note,
    .unit-equilibrium-result,
    .unit-density-result,
    .unit-pressure-result,
    .unit-fluid-result { font-size: 18px; stroke-width: 5px; }
    .unit-density-sample-title,
    .unit-density-fixed-label,
    .unit-density-value,
    .unit-pressure-force-label,
    .unit-pressure-block-label,
    .unit-pressure-state-title,
    .unit-fluid-force-label,
    .unit-fluid-upthrust-label,
    .unit-fluid-weight-label,
    .unit-fluid-state-title,
    .unit-fluid-parcel-label,
    .unit-fluid-object-label { font-size: 18px; stroke-width: 5px; }
    .unit-density-value.is-volume,
    .unit-pressure-area-label,
    .unit-fluid-area-label,
    .unit-fluid-depth-label,
    .unit-fluid-cancel-mark { font-size: 16px; stroke-width: 5px; }
    .unit-fluid-parcel-mass,
    .unit-fluid-column-expression,
    .unit-fluid-equation { font-size: 19px; stroke-width: 5px; }
    .unit-block-turning-effect .unit-turning-result,
    .unit-block-equilibrium .unit-equilibrium-result,
    .unit-block-density-model .unit-density-result,
    .unit-block-pressure-area .unit-pressure-result,
    .unit-block-fluid-pressure .unit-fluid-result,
    .unit-block-fluid-pressure .unit-fluid-state-title { display: none !important; }
    .unit-block-couple-torque .unit-dynamics-math.unit-couple-distance-label,
    .unit-block-density-model .unit-dynamics-math.unit-density-value,
    .unit-block-fluid-pressure .unit-dynamics-math.unit-fluid-column-expression,
    .unit-block-fluid-pressure .unit-dynamics-math.unit-fluid-equation {
        font-size: 12.5px !important;
    }
    .unit-block-equilibrium :is(.unit-equilibrium-start-label, .unit-equilibrium-gap-label) {
        display: none !important;
    }
    .unit-block-pressure-area .unit-dynamics-math.unit-pressure-area-label,
    .unit-block-fluid-pressure .unit-dynamics-math:is(.unit-fluid-weight-label, .unit-fluid-upthrust-label) {
        font-size: 12.5px !important;
    }
    .unit-block-fluid-pressure .unit-dynamics-math.unit-fluid-equation {
        font-size: 11.5px !important;
    }
    .unit-impulse-scene-title { font-size: 20px; }
    .unit-impulse-pulse-label { font-size: 17px; stroke-width: 5px; }
    .unit-momentum-system-heading { font-size: 16px; }
    .unit-momentum-system-total { font-size: 18px; }
    .unit-momentum-system-boundary-label { font-size: 15px; }
    .unit-momentum-system-choice { font-size: 19px; }
    .unit-momentum-system-surroundings { font-size: 16px; }
    .unit-momentum-system-change,
    .unit-momentum-system-external-label { font-size: 17px; stroke-width: 5px; }
    .unit-collision-heading { font-size: 16px; }
    .unit-collision-total { font-size: 18px; }
    .unit-collision-lane-title { font-size: 19px; }
    .unit-collision-lane-summary { font-size: 15px; }
    .unit-collision-momentum-label { font-size: 17px; stroke-width: 5px; }
    .unit-components-scene-heading { font-size: 20px; }
    .unit-components-vector-label { font-size: 20px; stroke-width: 5px; }
    .unit-components-puck-label { font-size: 18px; }
    .unit-components-event-label,
    .unit-components-zero-label { font-size: 17px; stroke-width: 5px; }
    .unit-components-balance-axis { font-size: 23px; }
    .unit-components-balance-value { font-size: 19px; }
    .unit-components-balance-check { font-size: 23px; }
    .unit-components-balance-total { font-size: 17px; }
    .unit-block-impulse-cushion :is(
        .unit-impulse-axis-label.is-time,
        .unit-impulse-area-label,
        .unit-impulse-stopping-time,
        .unit-impulse-before-label,
        .unit-impulse-delta-label,
        .unit-impulse-same-label
    ) { display: none !important; }
    .unit-block-momentum-system :is(
        .unit-momentum-system-heading,
        .unit-momentum-system-choice,
        .unit-momentum-system-surroundings,
        .unit-momentum-contact-time
    ) { display: none !important; }
    .unit-block-momentum-system [data-dynamics-state-panel="choose"] .unit-momentum-system-total,
    .unit-block-momentum-system .unit-dynamics-math[data-dynamics-math-panel="choose"].unit-momentum-system-total { display: none !important; }
    .unit-block-momentum-system .unit-dynamics-math.unit-momentum-system-change {
        font-size: 12.5px !important;
    }
    .unit-block-collision-type :is(
        .unit-collision-heading,
        .unit-collision-total,
        .unit-collision-lane-summary
    ) { display: none !important; }
    .unit-block-momentum-components :is(
        .unit-components-balance-axis,
        .unit-components-balance-value,
        .unit-components-balance-check,
        .unit-components-balance-total
    ) { display: none !important; }
    .unit-dynamics-caption { padding-inline: 5px; font-size: 12.5px !important; line-height: 1.5 !important; }
    .unit-resultant-result { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .unit-toc, .unit-toc-indicator, .unit-reading-progress span, .unit-primary-action, .unit-secondary-action,
    .unit-motion-limit-stage, .unit-motion-limit-step { transition: none; }
    .unit-light-gate-card, .unit-light-gate-beam, .unit-light-gate-graph, .unit-light-gate-event-pair, .unit-block-component-motion .unit-motion-limit-stage { transition: none; }
    .unit-motion-dot { animation: none; opacity: 1; }
}