/* ScaleTrip: a reading desk around an immersive science exhibit. */
:root {
  --paper: #f5f7fa;
  --paper-white: #fff;
  --text: #172b46;
  --text-secondary: #526176;
  --rule: #d7dfe9;
  --action: #2459d3;
  --action-hover: #1744ad;
  --action-soft: #e5edff;
  --control-border: #73859f;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
}
html { background: var(--paper); }
body { background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.site-shell { max-width: 1440px; border: 0; background: var(--ink); }
button, input, select { font: inherit; }
a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #4078ed; outline-offset: 5px; }
[hidden] { display: none !important; }
summary { cursor: pointer; }
summary::marker { font-size: .8em; }
::selection { background: #c6dcff; color: #172b46; }

/* Shared navigation is a quiet, readable frame on every route. */
.masthead { min-height: 88px; gap: 1.5rem; padding-block: 1.1rem; background: #fff; color: var(--text); border-bottom-color: var(--rule); }
.brand { color: var(--text); font-size: 1.25rem; letter-spacing: -.045em; gap: .8rem; }
.brand-mark { width: 1.75rem; border-color: var(--action); }
.brand-mark::before, .brand-mark::after { background: var(--action); }
.brand-mark i { background: var(--action); }
.primary-nav { gap: 1.5rem; justify-content: center; }
.primary-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-secondary); font-size: .88rem; font-weight: 600; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--action); }
.primary-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .65rem; }
.masthead-tools > p { display: none; }
.language-switch { border: 0; background: var(--paper); border-radius: 6px; padding: 3px; }
.language-switch a { display: inline-flex; min-height: 38px; align-items: center; padding: .4rem .7rem; color: var(--text-secondary); font-size: .75rem; }
.language-switch a + a { border: 0; }
.language-switch a[aria-current="page"] { background: #fff; color: var(--text); border-radius: 4px; box-shadow: 0 1px 3px #172b4614; }
.nav-toggle { border-color: var(--control-border); color: var(--text); background: #fff; }
.nav-toggle i b { background: var(--text); }

/* The illustration is the subject. Chrome, labels and colour step back. */
.home-main { background: var(--paper); }
.home-hero { min-height: 0; padding-block: clamp(2.5rem, 5vw, 4.5rem) 2.5rem; gap: 2.5rem; background: var(--paper); color: var(--text); border: 0; }
.home-hero-copy { grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: end; }
.home-hero h1 { max-width: none; font-size: clamp(2.7rem, 4.7vw, 4.4rem); font-weight: 740; line-height: 1.18; letter-spacing: -.055em; }
.home-hero-intro { display: block; font-size: 1.05rem; line-height: 1.85; color: var(--text-secondary); margin: 0; }
.home-hero-intro p { margin: 0 0 1.1rem; }
.home-hero-intro .hero-library-link { color: var(--action); font-size: .9rem; font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.home-hero .home-journey-field { grid-template-columns: 1fr 1fr; grid-template-rows: 340px 155px; gap: 1rem; overflow: visible; border: 0; background: transparent; }
.home-hero .home-journey { min-height: 0; padding: 2rem; border: 0; border-radius: 10px; background: #091424; isolation: isolate; }
.home-hero .home-journey-outward { grid-column: 1; grid-row: 1; }
.home-hero .home-journey-inward { grid-column: 2; grid-row: 1; }
.home-hero .home-journey-downward { grid-column: 1; grid-row: 2; }
.home-hero .home-journey-tsunami { grid-column: 2; grid-row: 2; }
.home-hero .journey-origin { display: none; }
.home-hero .journey-copy { gap: .6rem; }
.home-hero .journey-copy > span { font-size: .85rem; font-weight: 500; color: #e5edf7; }
.home-hero .journey-copy strong { font-size: clamp(1.6rem, 2.7vw, 2.45rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.25; color: #fff; }
.home-hero .journey-copy .journey-range { margin-top: .35rem; font-size: .85rem; color: #e5edf7; }
.home-hero :is(.home-journey-downward, .home-journey-tsunami) .journey-copy { gap: .3rem; }
.home-hero :is(.home-journey-downward, .home-journey-tsunami) .journey-copy strong { font-size: 1.35rem; line-height: 1.35; }
.home-hero :is(.home-journey-downward, .home-journey-tsunami) .journey-copy > span:last-child { font-size: .8rem; }
.home-hero .journey-visual img { filter: saturate(.85) brightness(.9); object-position: center 44%; }
.home-hero .home-journey-downward .journey-visual img { object-position: center 40%; }
.home-hero .journey-visual::after { background: linear-gradient(0deg, #06101ae8, #06101a08 90%); }
.home-hero :is(.home-journey-downward, .home-journey-tsunami) .journey-visual::after { background: linear-gradient(90deg, #06101ae8, #06101a35); }
.home-hero .home-journey:hover .journey-visual img { filter: saturate(.95) brightness(1); }

/* Interactive instruments keep their dark visual field. */
.home-main > .app { background: var(--ink); border-radius: 12px; margin-inline: var(--pad); width: calc(100% - 2 * var(--pad)); overflow: hidden; }
.app { --accent: #aac9ff; --accent-dim: #51729d; }
/* Clear reference track: reserve image + label space, and show physical ratios separately. */
.app .stage { background: #080e16; }
.app .cosmic-texture { display: none; }
.app :is(.scale-y-axis, .x-axis-ticks, .object-glow) { display: none; }
.app .stage-focus { right: 1.5rem; width: auto; max-width: none; min-height: 0; }
.app .stage-focus strong { font-size: clamp(1.15rem, 1.7vw, 1.65rem); line-height: 1.35; }
.app .stage-focus p { display: none; }
.app .scale-object, .app .scale-object.is-prev { color: #c1cddf; transition: none; }
.app .scale-object svg, .app .scale-object.is-prev svg, .app .scale-object.is-focus svg { opacity: 1; filter: none; transition: none; }
.app .scale-object .reference-art { filter: none; mix-blend-mode: normal; }
.app .scale-object { bottom: 4.1rem; }
.app .scale-world::before { display: none; }
.app .scale-world::after { left: 1.5rem; right: 1.5rem; bottom: 4.1rem; background: #354154; }
.app .scale-object::after { display: none; }
.scale-object-caption { position: absolute; left: 50%; top: calc(100% + 10px); width: 156px; transform-origin: center top; display: grid; gap: 3px; text-align: center; color: #c1cddf; font-size: 12px; line-height: 1.4; }
.scale-object-caption strong { font-size: 12px; font-weight: 550; max-height: 2.8em; overflow: hidden; }
.scale-object-caption span { color: #9eafc6; font-variant-numeric: tabular-nums; }
.is-focus .scale-object-caption strong { color: #fff; }
.is-focus .scale-object-caption span { color: #aac9ff; }
.scale-context { position: absolute; top: 9rem; left: 1.5rem; right: 1.5rem; z-index: 4; padding-top: .9rem; border-top: 1px solid #354154; color: #dce5f2; }
.scale-context > strong { display: block; color: #e9f1ff; font-size: 1rem; line-height: 1.5; height: 1.5em; margin-bottom: .75rem; font-weight: 600; }
.scale-context-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .4rem 1rem; margin-top: .55rem; font-size: .74rem; line-height: 1.5; }
.scale-context-row > b { color: #c7daff; font-weight: 550; font-variant-numeric: tabular-nums; }
.scale-context-track { grid-column: 1 / -1; height: 4px; background: #1b2737; overflow: hidden; }
.scale-context-track > i { display: block; width: 100%; height: 100%; background: #a4b6d0; transform-origin: left; }
.scale-context-track > [data-scale-context-input-bar] { background: #aac9ff; }
.scale-context > p { color: #9eafc6; margin: .6rem 0 0; font-size: .68rem; line-height: 1.5; }
.controls { padding-block: 2.25rem; }
.prompt-copy h1, .prompt-copy h2 { font-size: clamp(1.65rem, 2.6vw, 2.6rem); line-height: 1.35; letter-spacing: -.035em; }
.prompt-copy p { max-width: 55ch; line-height: 1.75; font-size: .95rem; }
.distance-field input { font-weight: 580; }
.submit-button { background: #dae7ff; color: #152d52; border-color: #dae7ff; min-height: 48px; }
.result-detail, .stage-focus p { line-height: 1.8; }
.reference-evidence { font-size: .82rem; line-height: 1.7; color: #b7c6d8; }
.reference-evidence a { color: #b9d6ff; text-underline-offset: .2em; }
.site-footer [data-privacy-reopen] { min-height: 44px; padding: .4rem 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.travel-times { padding-block: 2.5rem; }
.travel-heading h2 { font-size: 1.35rem; line-height: 1.5; }
.travel-heading p, .travel-note { line-height: 1.75; }
.art-disclosure { padding-block: 1.5rem; }
.optional-tool { margin: 1.25rem var(--pad) 0; background: #fff; color: var(--text); border: 1px solid var(--control-border); border-radius: 8px; }
.optional-tool > summary { padding: 1.3rem 1.5rem; min-height: 64px; font-weight: 650; }
.optional-tool > summary > span { display: block; margin: .35rem 0 0 1rem; font-weight: 400; color: var(--text-secondary); font-size: .9rem; line-height: 1.7; }
.optional-tool .learning-experiment { margin: 0; border-radius: 0; }

/* Reading surfaces share one typographic rhythm. */
.content-page, .home-editorial, .learning-home, .site-footer { background: var(--paper); color: var(--text); }
.page-breadcrumbs { padding: 1.75rem var(--pad) 0; color: var(--text-secondary); font-size: .8rem; }
.page-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.page-breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: #7e8a9a; }
.page-breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.page-breadcrumbs a:hover { color: var(--action); text-decoration: underline; }
.page-breadcrumbs li[aria-current] { color: var(--text); }
.content-header { display: block; padding-block: 2.5rem 3rem; border-bottom-color: var(--rule); }
.content-header h1 { max-width: 22ch; margin: 0 0 1.2rem; font-size: clamp(2.2rem, 4vw, 3.7rem); font-weight: 720; line-height: 1.22; letter-spacing: -.045em; color: var(--text); }
.content-header p { max-width: 66ch; font-size: 1.12rem; line-height: 1.85; color: var(--text-secondary); }
.content-page { border-bottom: 0; color-scheme: light; --white: #172b46; --muted: #526176; --line: #d7dfe9; --accent: #2459d3; }
.content-page .learning-experiment { --white: #f7f9fb; --muted: #adb7c1; --line: #293038; --accent: #5ae4a7; }
.content-page .learning-experiment, .home-log-tool .learning-experiment { color-scheme: dark; }
.content-page .learning-experiment .learning-formula { background: #0b1522; color: #dce6f4; border-color: #304256; }
.content-page .micro-answer p { color: var(--text-secondary); }
.content-page .micro-topic-media { background: var(--paper); }
.content-page .fact-band :is(strong, dd) { color: var(--text); }
.content-page .fact-band :is(span, dt) { color: var(--text-secondary); }
.content-page .converter-tool { color: var(--text); }
.content-page .converter-tool input { background: #fff; color: var(--text); border-color: var(--control-border); }
.content-page .converter-result { border-color: var(--rule); }
.content-page .converter-result strong { line-height: 1.25; }
.content-page .converter-tool button { background: var(--action); color: #fff; }
.content-page .scale-share { background: #e8eef7; border-color: var(--rule); color: var(--text); }
.content-page .scale-share :is(h2, .scale-share-title, button, a) { color: var(--text); }
.content-page .scale-share :is(button, a) { border-color: #aebcd0; }
.content-page :is(.micro-topic-grid, .micro-topic-media, .micro-topic-source, .related-links, .article-split) { color: var(--text); }
.content-page :is(.micro-topic-grid, .micro-topic-media, .micro-topic-source, .related-links, .article-split) :is(h2, h3, strong) { color: var(--text); }
.content-page :is(.micro-topic-grid, .micro-topic-media, .micro-topic-source, .related-links, .article-split) :is(p, span, figcaption) { color: var(--text-secondary); }
.content-page :is(.micro-topic-grid, .micro-topic-media, .micro-topic-source, .related-links, .article-split) a { color: var(--action); }
.content-page :is(.micro-topic-grid, .micro-topic-media, .micro-topic-source, .related-links, .article-split) :is(aside, a) { border-color: var(--rule); }
.content-page .micro-topic-cta { background: #e5edff; border-color: var(--control-border); padding: 1.5rem; }
.content-page .micro-topic-cta :is(span, strong) { color: var(--text); }
.content-page .article-kicker { color: var(--text-secondary); letter-spacing: 0; text-transform: none; }
.content-page .related-links a { border-color: var(--rule); }
.content-page .content-figure figcaption { color: var(--text-secondary); line-height: 1.75; }
.content-page .data-dictionary dt, .content-page .data-reference caption { color: var(--text); }
.content-page .data-dictionary dd { color: var(--text-secondary); }
.prose-section { width: min(calc(100% - 2 * var(--pad)), 68ch); padding-block: 3rem; }
.prose-section h2 { color: var(--text); font-size: 1.65rem; line-height: 1.45; letter-spacing: -.025em; }
.prose-section :is(p, li, dd) { color: var(--text-secondary); font-size: 1.06rem; line-height: 1.9; }
.prose-section p { margin-block: 0 1.3rem; }
.prose-section h2:not(:first-child) { margin-top: 2.75rem; }
.prose-section a { color: var(--action); text-underline-offset: .25em; }
.content-page .prose-section + .prose-section { border-top: 1px solid var(--rule); }
.content-page :is(.learning-formula, .method-code) { background: #e9eff7; color: var(--text); border-color: var(--rule); padding: 1.2rem; overflow-wrap: anywhere; }
.content-page .learning-experiment { color: var(--white); background: #101a27; border-color: #304256; }
.content-page .learning-experiment a { color: #b9d6ff; }
.content-page .learning-experiment :is(p, li, dd) { color: #c6d2e1; }
.content-page .learning-experiment h2 { color: var(--white); }
.content-page :is(.data-table-wrap, .data-record, .data-downloads a) { background: #fff; border-color: var(--rule); color: var(--text); }
.content-page :is(.data-reference, .data-record) :is(p, td, dd, li) { color: var(--text-secondary); }
.content-page :is(.data-reference, .data-record) :is(th, dt, h2, h3, strong) { color: var(--text); }
.content-page :is(.data-reference, .data-record) a { color: var(--action); }
.content-page :is(.data-reference, .data-record) :is(td, th, summary) { border-color: var(--rule); }
.content-page .data-review-list summary { min-height: 48px; line-height: 1.7; }

.home-featured { padding-block: 4rem; border: 0; background: var(--paper); }
.home-featured-heading { display: block; margin-bottom: 2rem; }
.home-featured-heading h2 { color: var(--text); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.35; letter-spacing: -.035em; }
.home-featured-heading p { color: var(--text-secondary); font-size: .98rem; max-width: 65ch; line-height: 1.85; }
.featured-tracks { gap: 3rem; }
.featured-track { padding: 0; background: transparent; border: 0; }
.featured-track h3 { color: var(--text); font-size: 1rem; }
.featured-track header p { color: var(--text-secondary); line-height: 1.75; }
.featured-track li { border-color: var(--rule); }
.featured-track li a { padding-block: 1.1rem; color: var(--text); }
.featured-track li a:hover { background: #eaf0f8; }
.featured-track .featured-scale-name { color: var(--text); }
.featured-track .featured-scale-context { color: var(--text-secondary); }
.featured-track li strong { color: var(--text); font-size: 1.5rem; letter-spacing: -.025em; }
.featured-track .featured-track-more { min-height: 44px; display: inline-flex; align-items: center; color: var(--action); font-size: .9rem; }
.scale-of-day { background: #e8eef7; border: 0; padding-block: 3rem; }
.scale-of-day-heading h2 { color: var(--text); font-size: 1.5rem; line-height: 1.4; letter-spacing: -.025em; }
.scale-of-day-heading :is(p, time), .scale-of-day-note { color: var(--text-secondary); }
.scale-of-day-body { color: var(--text); border-color: #cad6e5; padding-block: 2rem; align-items: center; }
.scale-of-day-body .scale-of-day-value { color: var(--text); font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.2; letter-spacing: -.035em; }
.scale-of-day-body h3 { font-size: 1.6rem; line-height: 1.45; color: var(--text); }
.scale-of-day-body div > p { color: var(--text-secondary); }
.scale-of-day-action { color: var(--action); }
.learning-home { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; padding-block: 4rem; border: 0; }
.learning-home > header { margin: 0; }
.learning-home h2 { color: var(--text); font-size: 2rem; line-height: 1.4; letter-spacing: -.035em; }
.learning-home > header > p { color: var(--text-secondary) !important; line-height: 1.85; }
.learning-home .learning-text-link { color: var(--action); }
.home-log-tool { min-width: 0; border: 1px solid var(--control-border); background: #fff; border-radius: 8px; }
.home-log-tool > summary { padding: 1.5rem; min-height: 64px; line-height: 1.7; font-weight: 600; }
.home-log-tool .learning-experiment { background: #101a27; color: var(--white); border-radius: 0; border: 0; margin: 0; }
.home-log-tool .learning-text-link { color: #b9d6ff; }

/* Browse, filter, read. Everything is present before script enhancement. */
.library-search { max-width: 44rem; margin: 0 0 2.25rem; }
.content-page > .library-search { margin: 2rem var(--pad); }
.library-search > label { display: block; margin-bottom: .6rem; font-size: .9rem; font-weight: 650; color: var(--text); }
.library-search-field { display: flex; align-items: center; gap: .75rem; min-height: 54px; padding-inline: 1rem; border: 1px solid var(--control-border); background: #fff; border-radius: 6px; }
.library-search-field:focus-within { outline: 3px solid #2459d333; border-color: var(--action); }
.library-search-field svg { flex-shrink: 0; fill: none; stroke: var(--text-secondary); stroke-width: 1.6; }
.library-search-field input { width: 100%; min-height: 52px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 1rem; }
.library-search-field input::placeholder { color: #68788b; opacity: 1; }
.library-search-field button { border: 0; color: var(--action); background: transparent; min-height: 44px; min-width: 44px; flex-shrink: 0; white-space: nowrap; font-size: .85rem; }
.library-search p { color: var(--text-secondary); font-size: .85rem; line-height: 1.8; margin: .6rem 0 0; }
.library-search [data-library-empty] { background: #e8eef7; padding: 1rem; border-radius: 6px; }
.editorial-directory { padding-block: 2.5rem 4rem; border: 0; background: var(--paper); color: var(--text-secondary); }
.editorial-directory > header { margin-bottom: 2rem; }
.editorial-directory h2 { color: var(--text); font-size: 1.7rem; letter-spacing: -.025em; }
.editorial-group { grid-template-columns: minmax(9rem, .3fr) 1fr; gap: 2rem; border-color: var(--rule); padding-block: 2rem; }
.editorial-group h3 { color: var(--text); font-size: 1rem; }
.editorial-group a { color: var(--text); text-decoration: none; font-weight: 650; font-size: 1.16rem; line-height: 1.6; }
.editorial-group a:hover { color: var(--action); text-decoration: underline; text-underline-offset: .25em; }
.editorial-group p { color: var(--text-secondary); max-width: 65ch; line-height: 1.85; }
.editorial-group li + li { margin-top: 1.6rem; }
.learning-activities { padding: 3rem var(--pad); background: #e8eef7; }
.learning-activities > header { color: var(--text); margin-bottom: 2rem; }
.learning-activities > header h2 { font-size: 1.8rem; line-height: 1.4; }
.learning-activities > header p { color: var(--text-secondary); }
.learning-activities .lesson-list { color: var(--text); padding: 0; }
.learning-activities .lesson-list li { border-color: #cbd6e4; }
.learning-activities .lesson-number { color: var(--text-secondary); }
.learning-activities .lesson-list :is(h3, a) { color: var(--text); }
.learning-activities .lesson-list :is(p, .learning-eyebrow) { color: var(--text-secondary); }
.distance-group { padding-block: 2rem; }
.distance-group h2 { color: var(--text); font-size: 1.4rem; }
.distance-group li { border-color: var(--rule); }
.distance-group a { color: var(--text); padding-block: 1.25rem; }
.distance-group small { color: var(--text-secondary); line-height: 1.8; }
.distance-group b { color: var(--text); font-size: 1.1rem; }
.distance-group a:hover { background: #e8eef7; }

.science-article { color: var(--text-secondary); max-width: 76rem; padding-block: 2.5rem 4rem; font-size: 1.08rem; line-height: 1.9; }
.science-article > section, .science-article > nav, .science-article > .science-standfirst { max-width: 68ch; }
.science-article .science-standfirst { color: var(--text); font-size: 1.2rem; line-height: 1.85; margin-block: 0 2rem; }
.science-article h2 { color: var(--text); font-size: 1.65rem; line-height: 1.45; letter-spacing: -.025em; }
.science-article > section { margin-block: 3.25rem; }
.science-article p { margin-block: 0 1.4rem; }
.science-article a { color: var(--action); }
.science-toc { background: #eaf0f8; border: 0; padding: 1.5rem 1.75rem; border-radius: 8px; }
.science-toc h2 { font-size: .95rem; }
.science-toc li { margin-block: .35rem; }
.science-toc a { color: var(--text-secondary); font-size: .95rem; }
.science-worked { background: #fff; border-color: var(--rule); border-radius: 8px; padding: 1.75rem; }
.science-worked :is(dt, dd) { color: var(--text-secondary); }
.science-worked dd { color: var(--text); font-size: 1.15rem; }
.science-evidence { padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.science-evidence > p, .science-evidence li > p { font-size: .9rem; line-height: 1.85; color: var(--text-secondary); }
.science-related { border-top: 1px solid var(--rule); padding-top: 2rem; }
.science-related a { font-size: .98rem; }
.editorial-context, .editorial-further { background: var(--paper); color: var(--text-secondary); border-color: var(--rule); padding-block: 3rem; }
.editorial-context h2, .editorial-further h2 { color: var(--text); font-size: 1.6rem; }
.editorial-context p, .editorial-further p { color: var(--text-secondary); line-height: 1.9; }
.editorial-context a, .editorial-further a { color: var(--action); }
.editorial-context > div { max-width: 68ch; }
.editorial-further ul { max-width: 68ch; margin-inline: auto; }

/* Each chapter gets the same concise entrance; the stage is untouched. */
.micro-intro, .earth-intro, .tsu-intro { background: var(--paper); color: var(--text); padding: 3rem var(--pad); border-color: var(--rule); gap: 2rem; }
.earth-intro { max-width: none; margin: 0; }
.micro-intro h1, .earth-intro h1, .tsu-intro h1 { color: var(--text); font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: 1.3; letter-spacing: -.035em; max-width: 25ch; }
.micro-intro p, .earth-intro p, .tsu-intro p { color: var(--text-secondary); max-width: 65ch; line-height: 1.85; font-size: 1rem; }
.tsu-page .tsu-intro > div:last-child > p { color: var(--text-secondary); }
.micro-intro a, .earth-intro a, .tsu-intro a { color: var(--action); }
.micro-intro .micro-kicker { font-size: .8rem; letter-spacing: 0; text-transform: none; }
.scale-share { padding-block: 1.5rem; }
.home-main > .scale-share { margin: 0; padding-inline: var(--pad); background: #e8eef7; border: 0; color: var(--text); }
.home-main > .scale-share :is(h2, .scale-share-title) { color: var(--text); font-size: 1.1rem; }
.home-main > .scale-share :is(button, a) { color: var(--text); border-color: #aebcd0; min-height: 44px; font-size: .85rem; }
.home-main > .scale-share .scale-share-status { color: var(--action); }
.home-editorial .scale-share { background: transparent; border-color: #cad6e5; color: var(--text); }
.home-editorial .scale-share :is(h2, .scale-share-title, button, a) { color: var(--text); }
.home-editorial .scale-share :is(button, a) { border-color: #aebcd0; }
.site-footer { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; padding-block: 3rem; border-top: 1px solid var(--rule); }
.footer-brand { display: grid; gap: .6rem; margin: 0; }
.footer-brand strong { color: var(--text); font-size: 1.2rem; }
.footer-brand span { color: var(--text-secondary); max-width: 35ch; line-height: 1.8; }
.site-footer nav { gap: .2rem 1.3rem; align-content: start; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-secondary); text-decoration: none; }
.site-footer a:hover { color: var(--action); text-decoration: underline; }

/* Explicit states: light reading surfaces never inherit mint/grey dark-stage states. */
.primary-nav a:hover { color: var(--action-hover); background: var(--action-soft); border-radius: 4px; }
.language-switch a:hover { color: var(--action-hover); background: var(--action-soft); border-radius: 4px; }
.language-switch a[aria-current="page"]:hover { color: var(--text); background: #fff; }
.nav-toggle:hover { background: var(--action-soft); border-color: var(--action); color: var(--action-hover); }
.home-hero-intro .hero-library-link:hover { color: var(--action-hover); text-decoration-thickness: 2px; }
.content-page a:hover { color: var(--action-hover); text-decoration: underline; text-underline-offset: .25em; }
.content-page .learning-experiment a:hover, .home-log-tool .learning-experiment a:hover { color: #eaf2ff; }
.content-page .comparison-more > summary { color: var(--action); background: #fff; border: 1px solid var(--control-border); border-radius: 6px; padding: 1rem; line-height: 1.75; font-weight: 600; }
.optional-tool > summary:hover, .home-log-tool > summary:hover,
.content-page .comparison-more > summary:hover { background: var(--action-soft); color: var(--action-hover); }
.optional-tool[open] > summary, .home-log-tool[open] > summary,
.content-page .comparison-more[open] > summary { background: #eaf0f8; color: var(--text); }
.content-page .data-downloads a { border: 1px solid var(--control-border); background: #fff; padding: .75rem 1rem; border-radius: 6px; color: var(--action); font-weight: 600; }
.content-page .data-downloads a:hover { border-color: var(--action); background: var(--action-soft); color: var(--action-hover); }
.content-page .micro-topic-cta:hover { background: #dce7fa; border-color: var(--action); }
.content-page .micro-topic-cta:hover :is(span, strong) { color: var(--action-hover); }
.content-page .converter-tool button:hover { background: var(--action-hover); color: #fff; }
.content-page .converter-tool button:active { background: #113888; }
.content-page .converter-tool input:hover { border-color: var(--action); }
.content-page .converter-tool input:focus-visible { outline: 3px solid #2459d344; border-color: var(--action); outline-offset: 2px; }
.content-page .converter-unit { color: var(--text-secondary); border-color: var(--control-border); background: #eaf0f8; }
:is(.content-page, .home-editorial, .home-main) .scale-share-actions :is(button, a) { background: #fff; color: var(--text); border: 1px solid var(--control-border); }
:is(.content-page, .home-editorial, .home-main) .scale-share-actions :is(button, a):hover { background: var(--action-soft); border-color: var(--action); color: var(--action-hover); text-decoration: none; }
:is(.content-page, .home-editorial, .home-main) .scale-share-actions [data-share-copy] { background: var(--action); border-color: var(--action); color: #fff; }
:is(.content-page, .home-editorial, .home-main) .scale-share-actions [data-share-copy]:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.library-search-field button:hover { background: var(--action-soft); color: var(--action-hover); border-radius: 4px; }
.science-toc a:hover, .editorial-group a:hover, .editorial-further a:hover, .editorial-context a:hover { color: var(--action-hover); text-decoration: underline; }
:is(.content-page, .home-editorial, .learning-home, .masthead, .site-footer, .optional-tool, .home-log-tool) :is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--action); outline-offset: 4px; }
.library-search-field input:focus-visible { outline: none; }
.learning-experiment :is(a, button, input, select, summary):focus-visible { outline: 3px solid #a8c8ff; outline-offset: 4px; }
.learning-presets button:hover { background: #243a51; border-color: #a8c8ff; color: #fff; }
.learning-controls input[type="radio"], .learning-controls input[type="range"] { accent-color: #a8c8ff; }
.submit-button:hover { background: #bcd3ff; color: #152d52; border-color: #bcd3ff; transform: none; }
.submit-button:hover::after { opacity: 0; }
.submit-button:active { background: #a8c5fc; }
.app .submit-button:focus-visible { outline: 3px solid #a8c8ff; outline-offset: 4px; }
.scrubber-play:hover:not(:disabled), .share-button:hover { background: #1e3046; border-color: #a8c8ff; color: #eff5ff; }
.scrubber-play:disabled { opacity: 1; color: #8793a4; background: #151d28; border-color: #354151; cursor: not-allowed; }
.micro-icon-button:disabled { color: #8793a4; background: #151d28; border-color: #354151; opacity: 1; }
.micro-icon-button:hover:not(:disabled), .micro-distance-form button:hover { background: #243a51; color: #eff5ff; border-color: #a8c8ff; }
.micro-icon-button[aria-pressed="true"] { color: #152d52; background: #bcd3ff; border-color: #bcd3ff; }
.earth-page :is(button, select):disabled, .tsu-controls button:disabled, .tsu-scene-actions button:disabled { opacity: 1; color: #9cacc1; background: #151d28; border-color: #46546a; cursor: not-allowed; }
.learning-controls:disabled { opacity: 1; }
.learning-controls:disabled :is(select, button) { color: #9cacc1; background: #151d28; border-color: #46546a; }
:is(.micro-intro, .earth-intro, .tsu-intro) a:focus-visible { outline: 3px solid var(--action); outline-offset: 4px; }

@media (min-width: 881px) and (max-width: 1140px) {
  .masthead { gap: 1rem; padding-inline: 1.5rem; }
  .primary-nav { gap: .8rem; }
  .primary-nav a { font-size: .8rem; }
  .brand { font-size: 1.1rem; gap: .5rem; }
}
@media (max-width: 880px) {
  .masthead { min-height: 76px; gap: .75rem; }
  .masthead[data-nav-ready="true"] .primary-nav { background: #fff; border-color: var(--rule); padding-block: .75rem; }
  .primary-nav a { color: var(--text-secondary); padding: .4rem .65rem; }
  .home-hero-copy { grid-template-columns: 1fr; gap: 1.5rem; }
  .home-hero h1 { font-size: clamp(2.7rem, 7vw, 4rem); }
  .home-hero-intro { max-width: 50ch; }
  .home-hero .home-journey-field { grid-template-rows: 310px 155px; }
  .home-hero .home-journey { padding: 1.5rem; }
  .home-hero .journey-copy strong { font-size: 1.65rem; }
  .learning-home { grid-template-columns: 1fr; gap: 1.5rem; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .masthead { padding-inline: 1.25rem; }
  .brand { font-size: 1.05rem; gap: .55rem; }
  .brand-mark { width: 1.45rem; }
  .brand-mark::before { height: 1.9rem; }
  .brand-mark::after { width: 1.9rem; }
  .language-switch a { padding-inline: .45rem; font-size: .68rem; }
  .nav-toggle { font-size: .75rem; gap: .4rem; padding-inline: .5rem; }
  .home-hero { padding-block: 2.25rem 1.75rem; gap: 1.75rem; }
  .home-hero h1 { font-size: clamp(2.3rem, 9.5vw, 3.4rem); line-height: 1.2; }
  .home-hero-intro { font-size: .95rem; line-height: 1.85; }
  .home-hero .home-journey-field { grid-template-columns: 1fr; grid-template-rows: 280px 280px 145px 145px; gap: .75rem; }
  .home-hero .home-journey-outward { grid-column: 1; grid-row: 1; }
  .home-hero .home-journey-inward { grid-column: 1; grid-row: 2; }
  .home-hero .home-journey-downward { grid-column: 1; grid-row: 3; }
  .home-hero .home-journey-tsunami { grid-column: 1; grid-row: 4; }
  .home-hero .journey-copy strong { font-size: 1.9rem; }
  .home-hero .journey-copy > span { font-size: .8rem; }
  .home-main > .app { margin-inline: 0; width: 100%; border-radius: 0; }
  .app .stage { min-height: 720px; }
  .app .scale-context { top: 10.3rem; left: 1.25rem; right: 1.25rem; }
  .app .scale-context > strong { font-size: .95rem; height: 3em; }
  .app .scale-object-caption { width: 136px; }
  .app .scale-world { inset-inline: 0; }
  .controls { padding-block: 1.75rem; }
  .optional-tool > summary { padding: 1rem; }
  .content-header { padding-block: 2rem; }
  .content-header h1 { font-size: 2rem; line-height: 1.3; }
  .content-header p { font-size: 1rem; }
  .page-breadcrumbs { padding-top: 1.25rem; font-size: .75rem; }
  .prose-section { padding-block: 2rem; }
  .prose-section :is(p, li) { font-size: 1rem; line-height: 1.9; }
  .home-featured, .learning-home { padding-block: 2.75rem; }
  .featured-tracks { gap: 2rem; }
  .scale-of-day-heading { grid-template-columns: 1fr; }
  .scale-of-day-body { grid-template-columns: 1fr; gap: 1.25rem; }
  .scale-of-day-body .scale-of-day-value { font-size: 2.5rem; }
  .editorial-directory { padding-block: 2rem; }
  .editorial-group { grid-template-columns: 1fr; gap: 1rem; }
  .editorial-group h3 { font-size: .9rem; }
  .editorial-group a { font-size: 1.08rem; }
  .editorial-group p { font-size: .92rem; }
  .science-article { padding-block: 2rem; font-size: 1rem; line-height: 1.9; }
  .science-article .science-standfirst { font-size: 1.08rem; }
  .science-article h2 { font-size: 1.4rem; }
  .science-toc, .science-worked { padding: 1.2rem; }
  .science-toc li { margin-block: .6rem; }
  .library-search-field { padding-inline: .75rem; gap: .5rem; }
  .library-search-field input { font-size: .95rem; }
  .library-search-field svg { width: 18px; }
  .distance-group a { grid-template-columns: 1fr; gap: .5rem; }
  .distance-group b { justify-self: start; font-size: 1rem; }
  .micro-intro, .earth-intro, .tsu-intro { padding-block: 2rem; }
}
@media (max-width: 360px) {
  .masthead { gap: .4rem; padding-inline: 1rem; }
  .brand { font-size: .95rem; }
  .language-switch a { padding-inline: .35rem; }
  .nav-toggle { padding-inline: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-journey .journey-visual, .home-journey .journey-visual img { transition: none; transform: none; }
}

/* Illustrated explanations: a school science book beside the instrument. */
.student-guide {
  max-width: 58rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  color: #172b46;
  background: #fff;
  font-size: 1.0625rem;
  line-height: 1.9;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.student-guide :is(h2,h3,h4,p,figure,dl,ol) { margin-top: 0; }
.student-guide header { margin-bottom: 1.8rem; }
.student-guide h2 { max-width: 28ch; font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.4; letter-spacing: -.035em; margin-bottom: 1rem; }
.student-guide h3 { font-size: 1.2rem; line-height: 1.5; margin-block: 2rem 1rem; }
.student-guide h4 { font-size: 1.08rem; line-height: 1.5; margin-block: 0 .65rem; }
.student-guide p { max-width: 64ch; margin-bottom: 1rem; }
.student-guide .student-intro { font-size: 1.12rem; line-height: 1.95; }
.student-figure { margin: 1.5rem 0 2rem; background: #eef3fa; border-radius: 8px; overflow: hidden; }
.student-diagram { display: block; width: 100%; height: auto; font: 25px system-ui, sans-serif; }
.student-figure figcaption { padding: 1rem 1.3rem 1.4rem; color: #374b66; font-size: .93rem; line-height: 1.9; }
.student-worked ol { padding-left: 1.65rem; }
.student-worked li { padding-left: .6rem; margin-bottom: 1.65rem; }
.student-worked li::marker { color: #2459d3; font-size: 1.1rem; font-weight: 800; }
.student-guide .student-expression { background: #eef3fa; border-radius: 4px; padding: .85rem 1rem; font-size: clamp(1rem, 2.2vw, 1.18rem); line-height: 1.8; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: normal; }
.student-words { border-top: 1px solid #d7dfe9; padding-top: .25rem; }
.student-words dl > div { display: grid; grid-template-columns: minmax(7rem, .3fr) 1fr; gap: 1rem; margin-bottom: 1rem; }
.student-words dt { font-weight: 750; }
.student-words dd { margin: 0; }
.student-check { border: 1px solid #73859f; border-radius: 6px; margin-block: 1.5rem; }
.student-check summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; line-height: 1.8; color: #172b46; }
.student-check summary:hover { background: #e5edff; color: #1744ad; }
.student-check[open] summary { border-bottom: 1px solid #d7dfe9; }
.student-check > p { padding: 1rem 1.2rem; margin: 0; }
.student-guide .student-source { color: #526176; font-size: .88rem; line-height: 1.85; }
.student-source a { color: #1744ad; text-decoration: underline; text-underline-offset: .2em; }
.student-deep { max-width: 58rem; margin: 1rem auto 3rem; border: 1px solid #73859f; border-radius: 6px; padding: 0 1.4rem 1.4rem; }
.student-deep:not([open]) { padding-bottom: 0; }
.student-deep > summary { padding: 1.2rem 0; cursor: pointer; color: #172b46; font-size: 1rem; font-weight: 750; line-height: 1.8; }
.student-deep > summary:hover { color: #1744ad; }
.student-deep[open] > summary { margin-bottom: 1.5rem; border-bottom: 1px solid #d7dfe9; }
.student-method { padding-left: 1.6rem; }
.student-method li { padding-left: .5rem; }
.student-method-details > .prose-section { padding-inline: 0; }
.student-path { max-width: 90rem; padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem) 4rem; margin: 0 auto; color: #172b46; }
.student-path > header { max-width: 52rem; margin-bottom: 1.8rem; }
.student-path h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.45; letter-spacing: -.035em; margin: 0 0 1rem; }
.student-path header p { line-height: 1.9; font-size: 1.05rem; }
.student-path > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.student-path a { display: block; color: #172b46; text-decoration: none; }
.student-path a img { display: block; width: 100%; height: 210px; object-fit: cover; background: #101722; border-radius: 7px; }
.student-path a h3 { font-size: 1.2rem; line-height: 1.6; margin: 1rem 0 .5rem; }
.student-path a p { font-size: .97rem; line-height: 1.85; color: #526176; margin: 0; }
.student-path a:hover h3 { color: #1744ad; text-decoration: underline; text-underline-offset: .2em; }
.student-guide :is(summary,a):focus-visible, .student-deep > summary:focus-visible, .student-path a:focus-visible { outline: 3px solid #2459d3; outline-offset: 4px; }
.science-article > .student-guide { padding-inline: 0; padding-top: 0; background: transparent; }
.science-article > .student-deep { margin-top: 2rem; }
.science-evidence > ul { list-style: none; padding: 0; }
.science-evidence > ul > li { border-bottom: 1px solid #d7dfe9; padding-block: 1rem; }
.science-evidence summary { color: #172b46; cursor: pointer; line-height: 1.8; font-weight: 650; }
.science-evidence summary:hover { color: #1744ad; }
.science-evidence details[open] p { margin-top: 1rem; }
.science-evidence details a { display: inline-block; padding-block: .6rem; }
.distance-article > .optional-tool { margin-inline: auto; max-width: 58rem; }
.student-route-links { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: 1rem; }
.student-route-links a { color: #1744ad; padding: .6rem 1rem; border: 1px solid #73859f; border-radius: 5px; font-weight: 650; }
@media (max-width: 700px) {
  .student-path > div { grid-template-columns: 1fr; gap: 2rem; }
  .student-path a img { height: 220px; }
  .student-words dl > div { grid-template-columns: 1fr; gap: .3rem; }
  .student-guide { font-size: 1rem; padding-inline: 1.25rem; }
  .student-guide .student-intro { font-size: 1.05rem; }
  .student-guide h4 { font-size: 1rem; }
  .student-figure figcaption { padding: .8rem 1rem 1.2rem; }
  .student-worked ol { padding-left: 1.3rem; }
  .student-worked li { padding-left: .25rem; }
  .student-deep { padding-inline: 1rem; margin-inline: 1rem; }
  .science-article > .student-deep { margin-inline: 0; }
}
.student-visuals { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; margin-block: 1.5rem 2rem; }
.student-visuals > figure { margin: 0; min-width: 0; }
.student-visuals:has(> figure:only-child) { grid-template-columns: 1fr; }
.student-scene img { display: block; width: 100%; height: 240px; object-fit: contain; border-radius: 8px; background: #101722; }
.student-scene figcaption { font-size: .85rem; line-height: 1.85; color: #526176; padding-top: .8rem; }
@media (max-width: 700px) {
  .student-visuals { grid-template-columns: 1fr; gap: 1.25rem; }
  .student-scene img { height: 210px; }
}
/* Keep large text readable without changing the result's font by its digits. */
.app .result-value { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .app .stage-readout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .app .stage-readout > #stageOrder { min-width: 0; }
  .app .target-marker { min-width: 0; flex-wrap: wrap; }
  .orbit-range > div { min-width: 0; grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .orbit-range dd { white-space: normal; overflow-wrap: anywhere; }
}