/* Layout: the app's own look carried onto the page. The background is the app background (charcoal to black, or white into
   the accent), content sits on the app's rounded cards, headings follow the App Store screenshots (one heavy wide word over a
   small-caps line), and drawn phone and watch screens copy the app's Challenges and workout screens. */

/* Accent colors: the app's seven, as dark-mode fill, light-mode fill and light-mode text. */
[data-accent="green"] {
    --accent-dark: #afff00;
    --accent-light: #6ccf08;
    --accent-text-light: #3e7d00;
    --on-accent: #000000;
}

/* :where() gives the default no weight, so a chosen accent always wins over it. */
:where(:root),
[data-accent="blue"] {
    --accent-dark: #24e0ff;
    --accent-light: #09ade9;
    --accent-text-light: #0077a3;
    --on-accent: #000000;
}

[data-accent="teal"] {
    --accent-dark: #00dcb9;
    --accent-light: #00b9ad;
    --accent-text-light: #007c74;
    --on-accent: #000000;
}

[data-accent="purple"] {
    --accent-dark: #c04dff;
    --accent-light: #c04dff;
    --accent-text-light: #a82ee4;
    --on-accent: #ffffff;
}

[data-accent="orange"] {
    --accent-dark: #ff5c00;
    --accent-light: #ea5400;
    --accent-text-light: #c34500;
    --on-accent: #000000;
}

[data-accent="pink"] {
    --accent-dark: #ff00aa;
    --accent-light: #ea009c;
    --accent-text-light: #d3008d;
    --on-accent: #ffffff;
}

[data-accent="red"] {
    --accent-dark: #ff3034;
    --accent-light: #ff3034;
    --accent-text-light: #df001c;
    --on-accent: #ffffff;
}

/* Resolved on every element that names an accent, so a spotlight panel can carry its own. */
:root,
[data-accent] {
    --accent: var(--accent-light);
    --accent-text: var(--accent-text-light);
}

:root {
    /* App background: from-color into the accent at the tint, then to-color. */
    --app-from: #ffffff;
    --app-to: #ffffff;
    --app-tint: 20%;
    --panel-from: #ffffff;
    --panel-to: #ffffff;
    --panel-tint: 30%;
    --page-glow: 0%;

    --ink: #000000;
    --ink-soft: #6c6c70;
    --line: rgba(0, 0, 0, 0.08);
    --card: #ffffff;
    --card-edge: rgba(0, 0, 0, 0.05);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    --nav-bg: rgba(255, 255, 255, 0.72);
    --track: rgba(0, 0, 0, 0.08);
    --display-from: #3a3a3a;
    --display-to: #000000;
    --glow: 0.5;

    --bezel: #1c1c1e;
    --bezel-edge: #4a4a4c;
    --device-shadow: rgba(0, 0, 0, 0.22);

    /* Workout metric colors from the app, darkened where they would not read on white. */
    --metric-red: #ff3034;
    --metric-yellow: #b38900;
    --metric-teal: #00a08f;
    --metric-orange: #e06f00;

    /* Chart series: the app's accents, stepped darker on white so marks keep 3:1 contrast. */
    --chart-blue: #0789c2;
    --chart-green: #4e9a00;
    --chart-neutral: #6c6c70;
    --chart-orange: #d94e00;
    --chart-pink: #d3008d;
    --chart-purple: #a82ee4;
    --chart-red: #df001c;
    --chart-surface: #ffffff;
    --chart-teal: #00897b;
    --tooltip-bg: #ffffff;

    --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Archivo", "Arial Black", system-ui, sans-serif;

    --display-size: clamp(2.5rem, 6.2vw, 4.75rem);
    --radius: 22px;
    --gutter: 20px;
    --column: 1160px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]),
    :root:not([data-mode="light"]) [data-accent] {
        --accent: var(--accent-dark);
        --accent-text: var(--accent-dark);
    }

    :root:not([data-mode="light"]) {
        --app-from: #333333;
        --app-to: #000000;
        --app-tint: 0%;
        --panel-from: #2b2b2b;
        --panel-to: #000000;
        --panel-tint: 26%;
        --page-glow: 14%;
        --ink: #ffffff;
        --ink-soft: #a1a1a6;
        --line: rgba(255, 255, 255, 0.1);
        --card: rgba(255, 255, 255, 0.075);
        --card-edge: rgba(255, 255, 255, 0.06);
        --card-shadow: none;
        --nav-bg: rgba(24, 24, 24, 0.72);
        --track: rgba(255, 255, 255, 0.1);
        --display-from: #ffffff;
        --display-to: #b8b8b8;
        --glow: 1;
        --bezel-edge: #3a3a3c;
        --device-shadow: rgba(0, 0, 0, 0.6);
        --metric-yellow: #ffd600;
        --metric-teal: #00dac3;
        --metric-orange: #f88518;
        --chart-blue: #24e0ff;
        --chart-green: #afff00;
        --chart-neutral: #a1a1a6;
        --chart-orange: #ff5c00;
        --chart-pink: #ff00aa;
        --chart-purple: #c04dff;
        --chart-red: #ff3034;
        --chart-surface: #1e1e1e;
        --chart-teal: #00dcb9;
        --tooltip-bg: #2a2a2a;
        color-scheme: dark;
    }
}

:root[data-mode="dark"],
:root[data-mode="dark"] [data-accent] {
    --accent: var(--accent-dark);
    --accent-text: var(--accent-dark);
}

:root[data-mode="dark"] {
    --app-from: #333333;
    --app-to: #000000;
    --app-tint: 0%;
    --panel-from: #2b2b2b;
    --panel-to: #000000;
    --panel-tint: 26%;
    --page-glow: 14%;
    --ink: #ffffff;
    --ink-soft: #a1a1a6;
    --line: rgba(255, 255, 255, 0.1);
    --card: rgba(255, 255, 255, 0.075);
    --card-edge: rgba(255, 255, 255, 0.06);
    --card-shadow: none;
    --nav-bg: rgba(24, 24, 24, 0.72);
    --track: rgba(255, 255, 255, 0.1);
    --display-from: #ffffff;
    --display-to: #b8b8b8;
    --glow: 1;
    --bezel-edge: #3a3a3c;
    --device-shadow: rgba(0, 0, 0, 0.6);
    --metric-yellow: #ffd600;
    --metric-teal: #00dac3;
    --metric-orange: #f88518;
    --chart-blue: #24e0ff;
    --chart-green: #afff00;
    --chart-neutral: #a1a1a6;
    --chart-orange: #ff5c00;
    --chart-pink: #ff00aa;
    --chart-purple: #c04dff;
    --chart-red: #ff3034;
    --chart-surface: #1e1e1e;
    --chart-teal: #00dcb9;
    --tooltip-bg: #2a2a2a;
    color-scheme: dark;
}

/* Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(1100px 600px at 85% -5%, color-mix(in srgb, var(--accent) var(--page-glow), transparent), transparent 65%),
        linear-gradient(135deg, var(--app-from), color-mix(in srgb, var(--accent) var(--app-tint), var(--app-to)));
    background-attachment: fixed;
    background-color: var(--app-to);
    color: var(--ink);
    font: 400 1.0625rem / 1.55 var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
p {
    margin: 0;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 8px;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* An icon drawn from the icons written into the page. Duotone Font Awesome icons draw their second layer at 40% opacity. */
.icon {
    width: 1.2em;
    height: 1.2em;
    flex: none;
    overflow: visible;
    fill: currentColor;
}

.wrap {
    max-width: var(--column);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.narrow {
    max-width: 820px;
}

.small-caps {
    font-variant-caps: small-caps;
}

/* One heavy, wide word in capitals, as on the App Store screenshots. */
.display {
    color: var(--ink);
    background: linear-gradient(180deg, var(--display-from), var(--display-to));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font: 900 var(--display-size) / 0.95 var(--font-display);
    font-stretch: 125%;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.display-small {
    --display-size: clamp(2rem, 4.4vw, 3.25rem);
}

.subtitle {
    color: var(--ink);
    font-size: clamp(1.1rem, 1.9vw, 1.45rem);
    font-variant-caps: small-caps;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-wrap: balance;
}

.prose {
    display: grid;
    gap: 1em;
}

.prose p {
    max-width: 62ch;
    color: var(--ink-soft);
}

.prose a {
    color: var(--accent-text);
}

.accent-text {
    color: var(--accent-text);
}

.app-card {
    border: 1px solid var(--card-edge);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--card-shadow);
}

/* Buttons */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    font: 600 1rem / 1.2 var(--font-ui);
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-accent {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 calc(18px * var(--glow)) color-mix(in srgb, var(--accent) 45%, transparent);
}

/* A store the app is not in yet. */
/* The label keeps to one line; a status tag that does not fit beside it moves below. */
.button-soon {
    flex-wrap: wrap;
    row-gap: 8px;
    border: 1.5px dashed var(--line);
    color: var(--ink-soft);
    white-space: nowrap;
    cursor: default;
}

.button-soon:hover {
    transform: none;
}

/* When the store is expected, as a small tag inside its coming-soon button. */
.button-status {
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-text);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.button-small {
    padding: 9px 18px;
    font-size: 0.9rem;
}

/* Navigation */

.nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 10;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(1.6) blur(18px);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
}

.nav-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 64px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
}

/* The app icon: the heart-and-arms glyph on a white tile. */
.logo-tile {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 4px;
    border-radius: 23%;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.logo-tile img {
    display: block;
    width: 100%;
    height: auto;
}

.logo-tile-large {
    width: 96px;
    height: 96px;
    padding: 10px;
}

.site-nav {
    margin-left: auto;
}

.nav-links {
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
    font-weight: 500;
}

.nav-links a {
    color: var(--ink-soft);
    text-decoration: none;
}

.nav-links a:hover {
    color: var(--ink);
}

.nav-links a[aria-current="page"],
.nav-menu-button[data-current="true"] {
    color: var(--ink);
    font-weight: 600;
}

/* The Science dropdown: opens on click or keyboard, and on hover where there is a pointer. */
.nav-menu {
    position: relative;
}

.nav-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
    font: inherit;
}

.nav-menu-button:hover {
    color: var(--ink);
}

.nav-chevron {
    width: 10px;
    height: 10px;
    transition: transform 0.15s ease;
}

.nav-menu-button[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: -16px;
    z-index: 20;
    display: none;
    gap: 4px;
    width: 300px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--card-edge);
    border-radius: 18px;
    background: var(--tooltip-bg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    list-style: none;
}

.nav-menu-button[aria-expanded="true"] + .nav-dropdown {
    display: grid;
}

@media (hover: hover) and (min-width: 981px) {
    .nav-menu:hover .nav-dropdown {
        display: grid;
    }

    /* Bridges the gap between the button and the dropdown so hover is not lost crossing it. */
    .nav-menu::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        height: 16px;
    }
}

.nav-dropdown a {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
}

.nav-dropdown a:hover,
.nav-dropdown a[aria-current="page"] {
    background: var(--track);
}

.nav-dropdown strong {
    color: var(--ink);
    font-weight: 600;
}

.nav-dropdown span {
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.35;
}

.menu-toggle {
    display: none;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.menu-toggle .icon {
    width: 18px;
    height: 18px;
}

.theme-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
}

.theme-switch > button,
.accent-menu-button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

.theme-switch > button:hover,
.accent-menu-button:hover {
    color: var(--ink);
}

.theme-switch > button[aria-pressed="true"] {
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--card-edge);
}

.theme-switch .icon {
    width: 16px;
    height: 16px;
}

/* The color dropdown in the appearance pill. */
.accent-menu {
    position: relative;
}

.accent-dot {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 calc(6px * var(--glow)) color-mix(in srgb, var(--accent) 60%, transparent);
}

.accent-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: -8px;
    z-index: 20;
    display: none;
    gap: 2px;
    width: 168px;
    padding: 6px;
    border: 1px solid var(--card-edge);
    border-radius: 16px;
    background: var(--tooltip-bg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.accent-menu-button[aria-expanded="true"] + .accent-dropdown {
    display: grid;
}

.accent-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-soft);
    font: 500 0.92rem / 1.2 var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.accent-option:hover {
    background: var(--card);
    color: var(--ink);
}

.accent-option[aria-pressed="true"] {
    color: var(--ink);
    font-weight: 600;
}

/* On narrow screens every link moves into a panel the menu button opens, with the dropdown laid flat. */
@media (max-width: 980px) {
    .nav-inner {
        position: relative;
        gap: 12px;
    }

    .theme-switch {
        margin-left: auto;
    }

    .menu-toggle {
        display: grid;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        margin: 0;
        padding: 12px var(--gutter) 20px;
        border-bottom: 1px solid var(--line);
        background: var(--tooltip-bg);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15);
    }

    .nav.is-open .site-nav {
        display: block;
    }

    .nav-links {
        display: grid;
        gap: 4px;
        font-size: 1.05rem;
    }

    .nav-links > li > a,
    .nav-menu-button {
        display: block;
        padding: 10px 0;
    }

    .nav-menu-button {
        pointer-events: none;
    }

    .nav-chevron {
        display: none;
    }

    .nav-dropdown {
        position: static;
        display: grid;
        width: auto;
        padding: 0 0 6px;
        border: 0;
        background: none;
        box-shadow: none;
    }
}

@media (max-width: 400px) {
    .nav .brand > span:last-child {
        display: none;
    }

    .nav-inner {
        gap: 8px;
    }

    .theme-switch > button,
    .accent-menu-button {
        width: 27px;
        height: 27px;
    }
}

/* Hero */

.hero {
    padding-block: clamp(40px, 7vw, 96px) clamp(28px, 4vw, 56px);
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
}

.hero-copy {
    display: grid;
    justify-items: start;
    gap: 20px;
    min-width: 0;
}

.hero .display {
    --display-size: clamp(2.4rem, 5.6vw, 4.6rem);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-size: 0.875rem;
    font-weight: 500;
}

.badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 calc(8px * var(--glow)) var(--accent);
}

.lede {
    max-width: 34rem;
    color: var(--ink-soft);
    font-size: 1.2rem;
    line-height: 1.5;
}

.hero-art {
    display: grid;
    justify-items: center;
    gap: 28px;
    min-width: 0;
}

.hero-devices {
    position: relative;
    width: min(100%, 480px);
    aspect-ratio: 480 / 610;
}

.hero-devices .device-phone {
    position: absolute;
    top: 0;
    left: 4%;
    width: 56%;
}

.hero-devices .device-watch {
    position: absolute;
    right: 0;
    bottom: 6%;
    width: 41%;
}

.accent-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    color: var(--ink-soft);
}

.swatches {
    display: flex;
    gap: 10px;
}

.swatch {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--accent) 60%, transparent);
    cursor: pointer;
}

.swatch[aria-pressed="true"] {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* Stacked on narrow screens with the phone and watch first, so the app is the first thing seen. */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-art {
        order: -1;
    }

    .hero-devices {
        width: min(100%, 400px);
    }
}

/* Devices: a generic phone and watch. Everything inside is sized against the device's own width. */

.device {
    position: relative;
    container-type: inline-size;
    margin: 0;
}

.device::after {
    content: "";
    position: absolute;
    right: -4px;
    width: 5px;
    border-radius: 3px;
    background: var(--bezel);
    box-shadow: inset 0 0 0 1px var(--bezel-edge);
}

.screen {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-style: solid;
    border-color: var(--bezel);
    box-shadow: 0 0 0 1px var(--bezel-edge), 0 30px 60px var(--device-shadow);
}

.device-phone {
    width: min(100%, 290px);
}

.device-phone::after {
    top: 17%;
    height: 9%;
}

.device-phone .screen {
    aspect-ratio: 9 / 19.5;
    gap: 3cqi;
    padding: 12cqi 4.5cqi 4cqi;
    border-width: 2.6cqi;
    border-radius: 15% / 7%;
    font-size: 4cqi;
    line-height: 1.3;
}

.app-screen {
    background: linear-gradient(135deg, var(--app-from), color-mix(in srgb, var(--accent) var(--app-tint), var(--app-to)));
    color: var(--ink);
}

.screen .app-card {
    border-radius: 5cqi;
    box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, 0.05);
}

/* Watch: always a black screen with the dark-mode accent, as on the device. */

.device-watch {
    --accent: var(--accent-dark);
    width: min(100%, 230px);
}

.device-watch::after {
    top: 25%;
    height: 17%;
}

.device-watch .screen {
    aspect-ratio: 1 / 1.18;
    align-items: center;
    gap: 2.6cqi;
    padding: 8cqi 8cqi 7cqi;
    border-width: 4.4cqi;
    border-radius: 30%;
    background: #000000;
    color: #ffffff;
    font-size: 6cqi;
    line-height: 1.2;
}

/* Screenshots: an app screenshot fills the device's screen, which rounds its corners */
.screen.screen-shot {
    padding: 0;
    background: #000000;
}

.screen-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.device-phone .screen-shot {
    aspect-ratio: 598 / 1300;
}

.device-watch .screen-shot {
    aspect-ratio: 422 / 514;
    border-radius: 22% / 18%;
}

/* Spotlight screens */

.screen-head {
    display: grid;
    gap: 0.6cqi;
}

.screen-title {
    font-size: 7.4cqi;
    font-weight: 700;
    line-height: 1.15;
}

.screen-subtitle {
    color: var(--ink-soft);
    font-size: 3.8cqi;
}

.items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.item-label {
    color: var(--ink-soft);
}

.item-value {
    display: inline-flex;
    align-items: center;
    gap: 1.6cqi;
    color: var(--metric, var(--ink));
    font-variant-numeric: tabular-nums;
}

.item-value .icon {
    color: var(--accent-text);
}

.metric-primary { --metric: var(--ink); --watch-metric: #ffffff; }
.metric-accent { --metric: var(--accent-text); --watch-metric: var(--accent-dark); }
.metric-red { --metric: var(--metric-red); --watch-metric: #ff3034; }
.metric-yellow { --metric: var(--metric-yellow); --watch-metric: #ffd600; }
.metric-teal { --metric: var(--metric-teal); --watch-metric: #00dac3; }
.metric-orange { --metric: var(--metric-orange); --watch-metric: #f88518; }

/* A grid of metric tiles, like the app's workout details. */
.layout-tiles .items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.6cqi;
    margin-top: 2cqi;
}

.layout-tiles .item {
    display: grid;
    gap: 1cqi;
    padding: 3.4cqi 4cqi;
    border: 1px solid var(--card-edge);
    border-radius: 4cqi;
    background: var(--card);
}

.layout-tiles .item-label {
    font-size: 3.5cqi;
}

.layout-tiles .item-value {
    font-size: 4.8cqi;
    white-space: nowrap;
}

/* A list on one card, like the app's set log and splits. */
.layout-rows .items {
    margin-top: 2cqi;
    padding: 0 4.5cqi;
    border: 1px solid var(--card-edge);
    border-radius: 5cqi;
    background: var(--card);
}

.layout-rows .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3cqi;
    padding-block: 3.6cqi;
}

.layout-rows .item + .item {
    border-top: 1px solid var(--line);
}

.layout-rows .item-label {
    font-size: 4cqi;
}

.layout-rows .item-value {
    font-size: 4.6cqi;
    font-weight: 600;
    white-space: nowrap;
}

.layout-rows .item-value .icon {
    width: 4.6cqi;
    height: 4.6cqi;
}

/* On a watch the items stack: a small label over a large colored value. */
.device-watch .screen-head {
    justify-self: start;
    width: 100%;
}

.device-watch .screen-title {
    justify-self: start;
    padding: 1.4cqi 4.4cqi;
    border-radius: 999px;
    background: #1c1c1e;
    color: var(--accent);
    font-size: 6.4cqi;
    font-weight: 600;
}

.device-watch .items {
    display: grid;
    gap: 2.4cqi;
    width: 100%;
    margin-top: 1cqi;
}

.device-watch .item {
    display: grid;
}

.device-watch .item-label {
    color: #8e8e93;
    font-size: 4.4cqi;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.device-watch .item-value {
    color: var(--watch-metric, #ffffff);
    font-size: 11cqi;
    font-weight: 500;
    line-height: 1.05;
}

/* Sections */

.section {
    padding-block: clamp(32px, 4.5vw, 60px);
}

/* A section's heading shrinks to fit its column, so a long word never runs into whatever sits beside it. */
.section-head,
.download-copy {
    container-type: inline-size;
}

.section-head .display,
.download-copy .display {
    font-size: min(var(--display-size), 10.4cqi);
}

.section-head {
    display: grid;
    gap: 16px;
    max-width: 50rem;
}

.section-head .prose {
    margin-top: 8px;
}

/* Challenge: the score written as a sum */

/* The score ring, after the app's: a gray track, the fill running clockwise from the top with round ends, and in dark
   mode a blurred copy of the fill as its glow. The score shows until the goal, then the halo. */
.challenge-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}

.score-ring {
    display: grid;
    place-items: center;
    width: clamp(220px, 24vw, 300px);
    aspect-ratio: 1;
    margin: 0;
    color: var(--accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.score-ring > * {
    grid-area: 1 / 1;
}

.ring {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ring-track,
.ring-fill {
    fill: none;
    stroke-width: 20;
}

.ring-track {
    stroke: rgba(142, 142, 147, 0.2);
}

.ring-fill {
    stroke: currentColor;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* --glow is 1 in dark mode and 0.5 in light, which this turns into the app's glow in dark and none in light. */
.ring-glow {
    opacity: calc(2 * var(--glow) - 1);
    filter: blur(6px);
}

.ring-score,
.ring-logo {
    filter: drop-shadow(0 0 calc(8px * (2 * var(--glow) - 1)) color-mix(in srgb, var(--accent) 70%, transparent));
}

.ring-score {
    font: 700 clamp(2.4rem, 4.4vw, 3.4rem) / 1 var(--font-ui);
    font-variant-numeric: tabular-nums;
    opacity: 0;
}

.ring-logo {
    width: 60%;
    height: auto;
    aspect-ratio: 122 / 47;
    opacity: 0;
}

.score-ring.is-complete .ring-logo {
    opacity: 1;
    transition: opacity 2s ease-out;
}

@media (max-width: 900px) {
    .challenge-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .score-ring {
        justify-self: center;
    }
}

.equation {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
}

.term {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
}

.term .icon {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    color: var(--accent-text);
}

.term + .term::before,
.term + .term-total::before {
    position: absolute;
    top: 50%;
    left: -40px;
    width: 40px;
    color: var(--ink-soft);
    font: 900 1.9rem / 1 var(--font-display);
    text-align: center;
    transform: translateY(-50%);
}

.term + .term::before {
    content: "+";
}

.term + .term-total::before {
    content: "=";
}

.term-name {
    font-size: 1.2rem;
    font-weight: 600;
}

.term-detail {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.45;
}

.term-total {
    border-color: transparent;
    background: var(--accent);
    box-shadow: 0 0 calc(28px * var(--glow)) color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--on-accent);
}

.term-total .icon,
.term-total .term-detail {
    color: var(--on-accent);
}

/* The FitHalo mark is wider than it is tall, so it keeps the row height and takes its own width. */
.term-total .icon {
    width: 73px;
}

@media (max-width: 900px) {
    .equation {
        grid-template-columns: minmax(0, 1fr);
    }

    .term + .term::before,
    .term + .term-total::before {
        top: -40px;
        left: 50%;
        line-height: 40px;
        transform: translateX(-50%);
    }
}

/* Spotlights */

.spotlight-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
}

.spotlight-copy {
    container-type: inline-size;
    display: grid;
    gap: 18px;
    min-width: 0;
}

/* Spotlight titles share one size, capped so the longest, Strengthen, fits its column. */
.spotlight-copy .display {
    font-size: min(var(--display-size), 10.4cqi);
}

.spotlight-copy .prose {
    margin-top: 6px;
}

.spotlight:nth-child(even) .spotlight-media {
    order: -1;
}

/* Each panel is the app background in the spotlight's own accent, like the App Store tiles. */
.spotlight-media {
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(40px, 6vw, 64px) 24px;
    border: 1px solid var(--card-edge);
    border-radius: 32px;
    background: linear-gradient(160deg, var(--panel-from), color-mix(in srgb, var(--accent) var(--panel-tint), var(--panel-to)));
    box-shadow: var(--card-shadow);
}

/* A drawn or cropped phone rises out of the bottom of the panel, showing only its upper screen. */
.spotlight-media:has(.app-screen),
.spotlight-media.is-cropped {
    place-items: end center;
    padding-bottom: 0;
}

.spotlight-media .device-phone {
    width: min(100%, 280px);
}

/* A full phone screenshot, one or a slideshow, fills most of its panel. */
.spotlight-media:has(.device-phone .screen-shot):not(.is-cropped) {
    padding: clamp(24px, 3vw, 36px) 16px;
}

.spotlight-media .device-phone:has(.screen-shot) {
    width: min(100%, 330px);
}

.spotlight-media .device-phone .app-screen {
    aspect-ratio: 9 / 14.5;
    border-bottom-width: 0;
    border-radius: 15% 15% 0 0 / 9.6% 9.6% 0 0;
}

/* --crop is how many of the screenshot's 1300 rows show; the corner radius grows as the screen shortens. */
.spotlight-media.is-cropped .device-phone:has(.screen-shot) {
    width: min(100%, 280px);
}

.spotlight-media.is-cropped .screen-shot {
    aspect-ratio: 598 / var(--crop);
    border-bottom-width: 0;
    border-radius: 15% 15% 0 0 / calc(7% * 1300 / var(--crop)) calc(7% * 1300 / var(--crop)) 0 0;
}

.spotlight-media.is-cropped .screen-shot img {
    object-position: top;
}

/* Report pages fanned out left to right like a hand of cards, the first on top unless a page sets its own --layer,
   spreading wider under the pointer. */
.document-fan {
    --spread: 1;
    position: relative;
    width: min(100%, 480px);
    aspect-ratio: 1 / 0.92;
}

.spotlight-media:hover .document-fan {
    --spread: 1.15;
}

.document-page {
    --offset: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--layer, calc(10 - var(--offset) * 2));
    width: 44%;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.22);
    transform: translate(-50%, -50%) translateX(calc(var(--offset) * 38% * var(--spread))) rotate(calc(var(--offset) * 5deg * var(--spread)));
    transform-origin: 50% 90%;
    transition: transform 0.4s ease;
}

.document-page img {
    display: block;
    width: 100%;
    height: auto;
}

/* Each page's place in the fan, counted from its middle */
.document-page:nth-child(1) {
    --offset: -1.5;
}

.document-page:nth-child(2) {
    --offset: -0.5;
}

.document-page:nth-child(3) {
    --offset: 0.5;
}

.document-page:nth-child(4) {
    --offset: 1.5;
}

/* A slideshow stacks its screenshots and fades the showing one in. */
.slideshow {
    position: relative;
}

.slideshow .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slideshow .slide.is-showing {
    opacity: 1;
}

.checks {
    display: grid;
    gap: 10px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.checks li {
    position: relative;
    padding-left: 28px;
}

/* A small ring as the bullet, echoing the score ring. */
/* A bullet with an icon of its own shows that in place of the ring. */
.checks li.has-icon {
    padding-left: 34px;
}

.checks .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    color: var(--accent-text);
}

.checks li:not(.has-icon)::before {
    content: "";
    position: absolute;
    top: 0.38em;
    left: 2px;
    width: 13px;
    height: 13px;
    border: 3px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 calc(6px * var(--glow)) color-mix(in srgb, var(--accent) 60%, transparent);
}

@media (max-width: 900px) {
    .spotlight-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .spotlight:nth-child(even) .spotlight-media {
        order: 0;
    }
}

/* More features */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 20px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.feature-grid li {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 24px;
}

.feature-grid .icon,
.promises .icon {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    color: var(--accent-text);
}

.feature-grid h3 {
    font-size: 1.15rem;
    font-weight: 600;
}

.feature-grid p {
    color: var(--ink-soft);
}

/* About */

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 48px;
}

/* The heading keeps to the top of its column rather than spreading down the height of the copy beside it. */
.about-grid .section-head {
    align-content: start;
}

.about-body {
    display: grid;
    gap: 32px;
    min-width: 0;
}

.promises {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promises li {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 20px;
}

.promises strong {
    font-weight: 600;
}

.promises span {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

@media (max-width: 900px) {
    .about-grid,
    .promises {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* FAQ page */

.faq-topics {
    display: grid;
    gap: 44px;
    min-width: 0;
}

.faq-topic {
    display: grid;
    gap: 14px;
}

.faq-topic h2 {
    font: 800 clamp(1.4rem, 2.6vw, 1.8rem) / 1.15 var(--font-display);
    font-stretch: 112%;
}

.faq-list {
    padding: 0 24px;
}

.faq-list details + details {
    border-top: 1px solid var(--line);
}

.faq-list summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 20px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    flex: none;
    color: var(--accent-text);
    font: 900 1.5rem / 1 var(--font-display);
}

.faq-list details[open] summary::after {
    content: "\2212";
}

.faq-list .prose {
    padding-bottom: 22px;
}

.faq-list .prose a {
    color: var(--accent-text);
}

/* Contact page */

.contact-layout {
    display: grid;
    gap: 32px;
}

.contact-card {
    display: grid;
    gap: 24px;
    padding: clamp(22px, 4vw, 40px);
}

.contact-card .prose a {
    color: var(--accent-text);
}

.contact-form {
    display: grid;
    gap: 8px;
}

.contact-form label {
    margin-top: 10px;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--accent);
    outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 0;
}

.contact-form .cf-turnstile {
    margin-top: 14px;
}

.contact-form .button {
    justify-self: start;
    margin-top: 14px;
    border: 0;
    cursor: pointer;
}

/* Confirmation page, after the contact form */

.confirmation {
    display: grid;
    justify-items: center;
    gap: 18px;
    margin-block: clamp(24px, 6vw, 72px);
    padding: clamp(28px, 5vw, 56px);
    text-align: center;
}

.confirmation .lede {
    max-width: 30rem;
}

.confirmation-icon {
    width: 64px;
    height: 64px;
    color: var(--accent);
    filter: drop-shadow(0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--accent) 60%, transparent));
}

.confirmation.is-error .confirmation-icon {
    color: var(--metric-red);
}

/* Download */

.download-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.download-copy {
    display: grid;
    justify-items: start;
    gap: 18px;
}

.stores {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stores li {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 22px;
}

.store-note {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

@media (max-width: 760px) {
    .download-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Footer */

.footer {
    padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.footer .brand {
    color: var(--ink);
    font-size: 1rem;
}

.footer .logo-tile {
    width: 28px;
    height: 28px;
    padding: 3px;
}

.footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.footer a:hover {
    color: var(--ink);
}

.copyright {
    margin-left: auto;
}

/* Articles: the science page and the privacy policy */

.article {
    padding-block: clamp(32px, 6vw, 72px) clamp(64px, 9vw, 112px);
}

.article-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 40px 48px;
}

.article-head {
    display: grid;
    grid-column: 1 / -1;
    gap: 14px;
}

.byline {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.toc {
    position: sticky;
    top: 92px;
    align-self: start;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    font-size: 0.9rem;
}

.toc-title {
    margin-bottom: 12px;
    color: var(--ink-soft);
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.toc ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.toc ol ol {
    margin-top: 8px;
    padding-left: 14px;
    border-left: 1px solid var(--line);
}

.toc a {
    color: var(--ink-soft);
    text-decoration: none;
}

.toc a:hover {
    color: var(--ink);
}

/* Without a table of contents the article takes the full width, capped for reading. */
.article-layout:not(:has(.toc)) .article-body {
    grid-column: 1 / -1;
    max-width: 860px;
}

.article-body {
    min-width: 0;
    padding: clamp(22px, 4vw, 48px);
    line-height: 1.65;
}

.article-body > * + * {
    margin-top: 1em;
}

.article-body h2 {
    margin-top: 2.2em;
    font: 800 clamp(1.5rem, 2.8vw, 2rem) / 1.15 var(--font-display);
    font-stretch: 112%;
    text-wrap: balance;
}

.article-body h3 {
    margin-top: 1.8em;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
}

.article-body h4 {
    margin-top: 1.5em;
    font-size: 1.1rem;
    font-weight: 600;
}

.article-body > :first-child {
    margin-top: 0;
}

.article-body a {
    color: var(--accent-text);
}

.article-body ul,
.article-body ol {
    padding-left: 1.4em;
}

.article-body li + li,
.article-body li > ul,
.article-body li > ol {
    margin-top: 0.4em;
}

/* Citations are superscript numbers; the references closing an article are a small heading over a small numbered list. */
.footnote {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;
}

.footnote a {
    text-decoration: none;
}

/* An APA citation is a quiet link: the text's own color, underlined only on hover. */
.article-body a.cite {
    color: inherit;
    text-decoration: none;
}

.article-body a.cite:hover {
    text-decoration: underline;
}

/* A note: a word the reader taps to open an explanation below its paragraph. */
.article-body .note-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.15em;
}

.article-body .note-toggle::after {
    content: "\00a0ⓘ";
    color: var(--accent-text);
    font-size: 0.85em;
}

.article-body .note-toggle[aria-expanded="true"]::after {
    content: "\00a0ⓧ";
}

.article-body .note-body {
    margin-top: 0.8em;
    padding: 12px 16px;
    border-left: 3px solid var(--accent);
    border-radius: 0 12px 12px 0;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: 0.92rem;
    line-height: 1.5;
}

.article-body .note-body > * + * {
    margin-top: 0.6em;
}

.article-body h2#references {
    font-size: 1.05rem;
}

.article-body .references {
    padding-left: 1.8em;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* An APA list has no numbers and a hanging indent. */
.article-body ul.references {
    list-style: none;
}

.article-body ul.references li {
    text-indent: -1.8em;
}

.article-body .references li + li {
    margin-top: 0.3em;
}

.reference-back {
    margin-left: 0.3em;
    text-decoration: none;
}

.article-body code {
    padding: 0.1em 0.35em;
    border-radius: 6px;
    background: var(--track);
    font-size: 0.9em;
}

.math-block {
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 0.4em;
}

.table-scroll {
    overflow-x: auto;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

.article-body caption {
    padding-bottom: 10px;
    caption-side: top;
    color: var(--ink-soft);
    font-size: 0.9rem;
    text-align: left;
}

.article-body th,
.article-body td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

/* The first column names the row; the rest are values, centered. */
.article-body th:not(:first-child),
.article-body td:not(:first-child) {
    text-align: center;
}

.article-body thead th {
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-weight: 600;
}

/* A range drawn as a bar in a table cell: the filled part spans --start to --end of the track. */
.range-bar {
    position: relative;
    display: block;
    min-width: 180px;
    height: 1.4em;
    border-radius: 999px;
    background: var(--track);
}

.range-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--start);
    width: calc(var(--end) - var(--start));
    border-radius: 999px;
    background: var(--accent);
}

.range-bar-label {
    position: absolute;
    left: var(--end);
    margin-left: 0.5em;
    line-height: 1.4em;
    font-size: 0.85em;
    white-space: nowrap;
}

.article-body tr.group th {
    padding-top: 16px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-weight: 600;
}

.article-body blockquote {
    margin: 1.5em 0 0;
    padding: 16px 20px;
    border-left: 3px solid var(--accent);
    border-radius: 0 12px 12px 0;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--ink-soft);
}

.article-body hr {
    margin: 2.5em 0 0;
    border: 0;
    border-top: 1px solid var(--line);
}

/* A round photo floated beside the paragraph after it; the next heading starts below it. */
.article-portrait {
    float: right;
    width: clamp(96px, 22vw, 150px);
    aspect-ratio: 1;
    margin: 0 0 12px 24px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px var(--accent), 0 8px 24px rgba(0, 0, 0, 0.18);
}

.article-body h2 {
    clear: both;
}

.article-figure {
    display: grid;
    gap: 10px;
    margin: 1.8em 0 0;
}

/* The strength charts are drawn for a white page, so they keep a white plate in dark mode. */
.article-figure img {
    width: 100%;
    height: auto;
    padding: 12px;
    border-radius: 14px;
    background: #ffffff;
}

@media (max-width: 900px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .toc {
        position: static;
        max-height: none;
    }

    .toc ol ol {
        display: none;
    }
}

/* Charts: drawn by assets/charts.js from the spec the build writes beside each one */

.series-blue { --series: var(--chart-blue); }
.series-green { --series: var(--chart-green); }
.series-neutral { --series: var(--chart-neutral); }
.series-orange { --series: var(--chart-orange); }
.series-pink { --series: var(--chart-pink); }
.series-purple { --series: var(--chart-purple); }
.series-red { --series: var(--chart-red); }
.series-teal { --series: var(--chart-teal); }

.article-body .chart {
    display: grid;
    gap: 10px;
    margin: 2em 0 0;
}

.chart-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.article-body .chart-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.legend-key {
    flex: none;
    background: var(--series);
}

.legend-line {
    width: 18px;
    height: 3px;
    border-radius: 2px;
}

.legend-marker {
    width: 10px;
    height: 10px;
}

.legend-bar {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-dashed {
    background: repeating-linear-gradient(90deg, var(--series) 0 6px, transparent 6px 9px);
}

.marker-circle {
    border-radius: 50%;
}

.marker-square {
    border-radius: 2px;
}

.marker-triangle {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.marker-dash {
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.chart-y-label,
.chart-x-label {
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.chart-x-label {
    text-align: center;
}

.chart-plot {
    position: relative;
    min-height: 240px;
    font: 400 12.5px / 1.3 var(--font-ui);
}

.chart-plot svg {
    display: block;
    overflow: visible;
}

.chart-tick {
    fill: var(--ink-soft);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.chart-category {
    fill: var(--ink);
    font-size: 12.5px;
}

.chart-grid {
    stroke: var(--line);
    stroke-width: 1;
}

.chart-axis {
    stroke: var(--ink-soft);
    stroke-width: 1;
    opacity: 0.5;
}

.chart-line {
    fill: none;
    stroke: var(--series);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-marker {
    fill: var(--series);
    stroke: var(--chart-surface);
    stroke-width: 2;
}

.chart-marker-dash {
    fill: none;
    stroke: var(--series);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.chart-crosshair {
    stroke: var(--ink-soft);
    stroke-width: 1;
}

.chart-connector {
    stroke: var(--ink-soft);
    stroke-width: 2;
    opacity: 0.35;
}

.chart-band {
    fill: transparent;
}

/* Marks and labels let the pointer through to the band under them, which carries the hover. */
.chart-plot svg :is(.chart-bar, .chart-marker, .chart-value, .chart-category, .chart-tick, .chart-grid, .chart-axis, .chart-connector) {
    pointer-events: none;
}

.chart-bar {
    fill: var(--series);
}

.chart-line-dashed {
    stroke-dasharray: 6 5;
}

.chart-value {
    fill: var(--ink-soft);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.chart-band.is-active {
    fill: var(--track);
}

.chart-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 160px;
    padding: 10px 12px;
    border: 1px solid var(--card-edge);
    border-radius: 12px;
    background: var(--tooltip-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 0.85rem;
    pointer-events: none;
}

.chart-tooltip-title {
    margin-bottom: 6px;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-tooltip-row + .chart-tooltip-row {
    margin-top: 3px;
}

.chart-tooltip-row strong {
    min-width: 3.4em;
    font-variant-numeric: tabular-nums;
}

.chart-tooltip-row span:last-child {
    color: var(--ink-soft);
}

.chart-tooltip-key {
    flex: none;
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: var(--series);
}

.chart-data summary {
    color: var(--accent-text);
    cursor: pointer;
    font-size: 0.9rem;
}

.chart-data .table-scroll {
    max-height: 320px;
    margin-top: 10px;
    overflow-y: auto;
}

.article-body figcaption {
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .button,
    .slideshow .slide,
    .document-page {
        transition: none;
    }
}