/* Alcedo RDP website
   Palette drawn from the Alcedo film (deep navy, blue light) and the app (graphite panels,
   fine borders, pill buttons). One type family: Manrope, close to the film's captions. */

/* ---------- Tokens ---------- */

:root {
    --navy-950: #060f1c;
    --navy-900: #081525;
    --navy-850: #0b1b30;
    --navy-800: #10243d;
    --graphite-800: #222329;
    --graphite-750: #26272e;
    --blue-600: #2d6bbb;
    --blue-500: #3a7bd0;
    --blue-300: #72b7f5;
    --silver: #cad2dd;

    --text: #f3f6fa;
    --text-2: #adb9c9;
    --text-3: #8b99ad;
    --line: rgba(202, 210, 221, 0.13);
    --line-strong: rgba(202, 210, 221, 0.26);
    --focus: #9fd0ff;

    --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --step--1: 0.875rem;
    --step-0: 1.0625rem;
    --step-1: 1.25rem;
    --step-2: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
    --step-3: clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem);
    --step-4: clamp(2.125rem, 1.4rem + 2.9vw, 3.625rem);
    --step-5: clamp(2.625rem, 1rem + 4vw, 4.5rem);

    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 48px);
    --inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
    --header-h: 68px;
    --section-y: clamp(80px, 12vh, 152px);

    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 24px;

    color-scheme: dark;
}

/* ---------- Base ---------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    position: relative;
    margin: 0;
    background: var(--navy-900);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.6;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

[hidden] {
    display: none !important;
}

img,
svg,
video {
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: var(--blue-300);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

a:hover {
    color: #9fd0ff;
}

p {
    margin: 0 0 1em;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 800;
    text-wrap: balance;
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

main:focus {
    outline: none;
}

::selection {
    background: rgba(114, 183, 245, 0.35);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radius-s);
    background: var(--text);
    color: var(--navy-900);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: none;
}

/* ---------- Buttons and links ---------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* Gradient stops keep white label text at 4.5:1 or better from top to bottom. */
.button--primary {
    background: linear-gradient(180deg, #3573c5, #2b64b2);
    border-color: rgba(159, 208, 255, 0.28);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 28px -12px rgba(45, 107, 187, 0.9);
}

.button--primary:hover {
    background: linear-gradient(180deg, #3776c9, #2f6bbb);
    color: #fff;
}

.button--secondary {
    background: rgba(202, 210, 221, 0.06);
    border-color: var(--line-strong);
    color: var(--text);
}

.button--secondary:hover {
    background: rgba(202, 210, 221, 0.12);
    color: var(--text);
}

.button--large {
    min-height: 52px;
    padding: 0 26px;
    font-size: var(--step-0);
}

.button--compact {
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.9375rem;
}

.text-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    color: var(--blue-300);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(114, 183, 245, 0.4);
}

.text-action:hover {
    text-decoration-color: currentColor;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}

.icon-button:hover {
    background: rgba(202, 210, 221, 0.08);
    color: var(--text);
}

.icon-button[hidden] {
    display: none;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(8, 21, 37, 0.86);
    border-bottom: 1px solid transparent;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: border-color 0.2s;
}

.site-header.is-scrolled {
    border-bottom-color: var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--header-h);
    padding-inline: var(--inline);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    text-decoration: none;
}

.brand:hover {
    color: var(--text);
}

.brand__icon {
    flex: none;
}

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

.site-nav__list {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--text-2);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.site-nav a:hover {
    background: rgba(202, 210, 221, 0.06);
    color: var(--text);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

.motion-toggle[aria-pressed="false"] {
    color: var(--text-3);
}

.motion-toggle__off {
    display: none;
}

.motion-toggle[aria-pressed="false"] .motion-toggle__off {
    display: inline;
}

.nav-toggle__close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: inline;
}

/* ---------- Shared section type ---------- */

.section-title {
    font-size: var(--step-4);
    line-height: 1.08;
    letter-spacing: -0.032em;
}

.section-lede {
    max-width: 58ch;
    margin: 20px 0 0;
    color: var(--text-2);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.6;
}

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

.checklist li {
    position: relative;
    padding-left: 30px;
    color: var(--text);
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.28em;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%2372b7f5' stroke-opacity='.45'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%2372b7f5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Hero ---------- */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
    min-height: min(calc(100svh - var(--header-h)), 900px);
    padding: clamp(40px, 7vh, 88px) var(--inline) clamp(64px, 10vh, 112px);
    overflow-x: clip;   /* the glow behind the screenshot must not widen the page on phones */
    background:
        radial-gradient(55% 60% at 72% 42%, rgba(45, 107, 187, 0.34), transparent 70%),
        radial-gradient(40% 50% at 8% 0%, rgba(16, 36, 61, 0.9), transparent 70%);
}

.hero__title {
    font-size: var(--step-5);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.hero__title-line {
    display: block;
}

@media (min-width: 1081px) {
    .hero__visual {
        margin-right: calc(-0.04 * (100vw - 1080px));
    }
}

.hero__lede {
    max-width: 26ch;
    margin: 28px 0 0;
    color: var(--text);
    font-size: var(--step-2);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.012em;
}

.hero__text {
    max-width: 46ch;
    margin: 16px 0 0;
    color: var(--text-2);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 32px;
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-3);
    font-size: 0.9375rem;
    font-weight: 600;
}

.hero__facts li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero__facts li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-300);
}

.hero__visual {
    position: relative;
    isolation: isolate;
}

.hero__visual::before {
    content: "";
    position: absolute;
    inset: -8% -6%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(45, 107, 187, 0.4), transparent);
    pointer-events: none;
}

/* Perched kingfishers: the logo bird standing on an edge. --perch-w sets its width; the drawing
   is 905 × 916, and its chest rests on the edge at 90% of its height. */
.perch {
    --perch-w: 80px;
    position: absolute;
    width: var(--perch-w);
    height: auto;
    aspect-ratio: 905 / 916;
    overflow: visible;
    pointer-events: none;
}

.shot {
    margin: 0;
}

.shot__frame {
    position: relative;
}

/* The app window's top edge sits 5% down the screenshot image. */
.hero__bird {
    --perch-w: clamp(64px, 5.6vw, 84px);
    right: 14%;
    bottom: calc(95% - var(--perch-w) * 0.1);
}

.shot__link {
    position: relative;
    display: block;
    border-radius: 18px;
    color: var(--text);
    text-decoration: none;
}

.shot__link:focus-visible {
    outline-offset: -4%;
}

.shot__image {
    display: block;
    width: 100%;
}

.shot__zoom {
    position: absolute;
    right: 9%;
    bottom: 13%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(8, 21, 37, 0.78);
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 700;
    transition: color 0.15s, border-color 0.15s;
}

.shot__link:hover .shot__zoom,
.shot__link:focus-visible .shot__zoom {
    border-color: rgba(114, 183, 245, 0.6);
    color: var(--text);
}

.shot__caption {
    margin: 4px 0 0 6%;
    color: var(--text-3);
    font-size: var(--step--1);
}

/* ---------- Feature story ---------- */

.features {
    padding: var(--section-y) var(--inline);
    background: linear-gradient(180deg, var(--navy-900), var(--navy-850) 22%, var(--navy-850) 78%, var(--navy-900));
}

.features__intro {
    max-width: 780px;
}

.chapter {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    column-gap: clamp(24px, 3vw, 48px);
    padding-block: clamp(64px, 12vh, 152px) 0;
}

.chapter__copy {
    max-width: 480px;
}

.chapter__copy p {
    color: var(--text-2);
}

.chapter__title {
    margin-bottom: 14px;
    font-size: var(--step-3);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.028em;
}

.chapter__tag {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px !important;
    padding: 3px 12px;
    border: 1px solid rgba(114, 183, 245, 0.28);
    border-radius: 999px;
    background: rgba(114, 183, 245, 0.08);
    color: var(--blue-300) !important;
    font-size: var(--step--1);
    font-weight: 700;
}

.chapter__note {
    margin: -4px 0 16px !important;
    color: var(--text-3) !important;
    font-size: 0.9375rem;
}

.chapter__visual {
    margin: 0;
}

.chapter__visual svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chapter--workspace .chapter__copy { grid-column: 1 / 6; }
.chapter--workspace .chapter__visual { grid-column: 6 / 13; }

.chapter--print .chapter__visual { grid-column: 1 / 8; }
.chapter--print .chapter__copy { grid-column: 8 / 13; align-self: end; padding-bottom: 6%; }

.chapter--scan .chapter__copy { grid-column: 1 / 5; align-self: start; padding-top: 4%; }
.chapter--scan .chapter__visual { grid-column: 5 / 13; }

.chapter--webcam .chapter__copy {
    grid-column: 3 / 11;
    max-width: 620px;
    justify-self: center;
    text-align: center;
}

.chapter--webcam .chapter__copy p {
    margin-inline: auto;
}

.chapter--webcam .chapter__visual {
    grid-column: 1 / 13;
    justify-self: center;
    width: min(100%, 940px);
    margin-top: 40px;
}

.link-line {
    fill: none;
    stroke: url(#g-link);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.ill-focus {
    fill: none;
    stroke: var(--blue-300);
    stroke-opacity: 0.75;
    stroke-width: 1.5;
}

.ill-label {
    fill: var(--text-2);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
}

.platforms {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
    align-items: center;
    gap: 16px clamp(24px, 3vw, 48px);
    margin-top: clamp(80px, 14vh, 160px);
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

.platforms__title {
    font-size: var(--step-2);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.platforms p {
    margin: 0;
    color: var(--text-2);
}

/* ---------- Film ---------- */

.film {
    padding: var(--section-y) var(--inline);
    background: radial-gradient(60% 50% at 40% 45%, rgba(45, 107, 187, 0.22), transparent 70%);
}

.film__stage {
    position: relative;
}

.film__bird {
    --perch-w: clamp(64px, 5.6vw, 84px);
    right: 8%;
    bottom: calc(100% - var(--perch-w) * 0.1);
}

.film__layout {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: start;
    gap: clamp(28px, 3.5vw, 48px);
    margin-top: 48px;
}

.film__player {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: var(--navy-800);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.75);
}

.film__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--navy-800);
}

.film__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: clamp(14px, 2.5vw, 28px);
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.film__play[hidden] {
    display: none;
}

.film__play:focus-visible {
    outline-offset: -6px;
}

.film__play-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 30px -10px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s;
}

.film__play-icon svg {
    margin-left: 3px;
}

.film__play-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin-left: 12px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(6, 15, 28, 0.78);
    font-weight: 700;
}

.film__play-length {
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.film__play:hover .film__play-icon {
    transform: scale(1.06);
}

.film__summary-title {
    margin-bottom: 8px;
    font-size: var(--step-1);
    font-weight: 800;
    letter-spacing: -0.015em;
}

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

.film__chapter {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.film__time,
.film__seek {
    color: var(--blue-300);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.film__seek {
    align-self: start;
    min-height: 32px;
    margin: -6px 0 0 -8px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.film__seek:hover {
    background: rgba(114, 183, 245, 0.12);
}

.film__chapter-body strong {
    display: block;
    color: var(--text);
}

.film__chapter-body span {
    color: var(--text-2);
}

/* ---------- Download ---------- */

.download {
    padding: var(--section-y) var(--inline);
    background: radial-gradient(60% 55% at 28% 55%, rgba(45, 107, 187, 0.2), transparent 70%);
}

.download__platforms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.download__help {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 16px;
}

.help-link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px clamp(20px, 3vw, 28px);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    color: var(--text-2);
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.help-link:hover {
    border-color: var(--line-strong);
    background: rgba(202, 210, 221, 0.04);
    color: var(--text-2);
}

.help-link__icon {
    flex: none;
    margin-top: 1px;
    color: var(--blue-300);
}

.help-link__text {
    display: grid;
    gap: 2px;
}

.help-link__text strong {
    color: var(--blue-300);
    text-decoration: underline;
    text-decoration-color: rgba(114, 183, 245, 0.4);
    text-underline-offset: 0.2em;
}

.help-link:hover .help-link__text strong {
    text-decoration-color: currentColor;
}

.help-link__text span {
    font-size: 0.9375rem;
}

.platform {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(24px, 3.5vw, 44px);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: linear-gradient(180deg, var(--graphite-750), #1d1e23);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 60px -40px rgba(0, 0, 0, 0.8);
}

.platform:focus {
    outline: none;
}

.platform__name {
    font-size: var(--step-3);
    line-height: 1.1;
    letter-spacing: -0.028em;
}

.platform__summary {
    margin: 0;
    color: var(--text-2);
    font-size: 1.125rem;
}

.specs {
    margin: 0;
}

.specs__row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.specs__row:last-child {
    border-bottom: 1px solid var(--line);
}

.specs dt {
    color: var(--text-3);
    font-weight: 600;
}

.specs dd {
    margin: 0;
}

.platform__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 8px;
}

/* Stands beside the download button, chest level with the button's baseline. */
.platform__bird {
    --perch-w: clamp(60px, 5vw, 72px);
    position: static;
    flex: none;
    align-self: flex-end;
    margin-bottom: calc(var(--perch-w) * -0.1);
}

/* Install on Linux: full width below the platform cards. Choose on the left, do on the right. */

.linux {
    margin-top: 48px;
    padding: clamp(24px, 3.5vw, 44px);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: linear-gradient(180deg, var(--graphite-750), #1d1e23);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 60px -40px rgba(0, 0, 0, 0.8);
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.linux:focus {
    outline: none;
}

.linux__title {
    font-size: var(--step-3);
    line-height: 1.1;
    letter-spacing: -0.028em;
}

.linux__lede {
    max-width: 60ch;
    margin: 10px 0 0;
    color: var(--text-2);
    font-size: 1.125rem;
}

.linux__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px clamp(32px, 5vw, 72px);
    margin-top: 32px;
}

.linux__choose,
.linux__do {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
}

.linux__do {
    gap: 28px;
}

.linux__block {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.linux__block p {
    margin: 0;
    color: var(--text-2);
}

.linux__step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--step-1);
    line-height: 1.3;
}

.linux__num {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue-600);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 800;
}

/* Choices: radio buttons drawn as tiles; the whole tile is the label. */
.choices {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.choices--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4px;
}

.linux__legend {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    padding: 0;
    color: var(--text-3);
    font-size: var(--step--1);
    font-weight: 600;
}

.choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: rgba(202, 210, 221, 0.03);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.choice--compact {
    justify-content: center;
    padding: 10px 14px;
}

.choice:hover {
    border-color: rgba(159, 208, 255, 0.45);
}

.choice input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--blue-500);
}

.choice:has(input:checked) {
    border-color: var(--blue-300);
    background: rgba(114, 183, 245, 0.1);
}

.choice:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.choice__text {
    display: grid;
    gap: 1px;
}

.choice__text strong {
    color: var(--text);
    line-height: 1.35;
}

.choice__text span {
    color: var(--text-3);
    font-size: 0.875rem;
}

.linux__hint {
    margin: 0;
    color: var(--text-3);
    font-size: 0.9375rem;
}

.linux__requirements {
    margin-top: 4px;
    border-top: 1px solid var(--line);
}

.linux__requirements summary {
    padding: 14px 0 6px;
    color: var(--blue-300);
    font-weight: 700;
    cursor: pointer;
}

.linux__requirements .specs__row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    font-size: 0.9375rem;
}

.linux__requirements .specs__row:last-child {
    border-bottom: 0;
}

/* Variants: one per package type and processor. Only the chosen one shows (in browsers with
   :has(); in others every variant shows, with its label). */
.linux:has(input[value="deb"]:checked) .variant[data-package]:not([data-package="deb"]),
.linux:has(input[value="rpm"]:checked) .variant[data-package]:not([data-package="rpm"]),
.linux:has(input[value="appimage"]:checked) .variant[data-package]:not([data-package="appimage"]),
.linux:has(input[value="x64"]:checked) .variant[data-arch="arm64"],
.linux:has(input[value="arm64"]:checked) .variant[data-arch="x64"] {
    display: none;
}

.linux:has(input:checked) .variant__label {
    display: none;
}

.variant {
    display: grid;
    justify-items: start;
    gap: 8px;
    min-width: 0;
}

.variant__label {
    font-weight: 600;
}

.linux__file {
    color: var(--text-3);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

/* A package whose file is not published yet. */
.linux__pending {
    display: grid;
    gap: 4px;
    justify-self: stretch;
    padding: 14px 16px;
    border: 1px dashed var(--line-strong);
    border-radius: 14px;
    color: var(--text-2);
    font-size: 0.9375rem;
}

.linux__checksums a {
    font-size: 0.9375rem;
}

.linux__note {
    font-size: 0.9375rem;
}

.linux__after {
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
}

.linux code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--navy-950);
    color: var(--text);
    font-size: 0.875em;
}

.linux pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

/* A command with its Copy button beside it (below it on phones), never on top of the text. */
.command {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    justify-self: stretch;
    margin: 0;
}

.command pre {
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--navy-950);
    font-size: 0.9rem;
}

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

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

    .command__copy {
        justify-self: end;
    }

    .linux__requirements .specs__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

/* ---------- FAQ ---------- */

.faq {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: 32px clamp(32px, 5vw, 80px);
    padding: var(--section-y) var(--inline);
}

.faq__list {
    border-bottom: 1px solid var(--line);
}

.faq__item {
    border-top: 1px solid var(--line);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 44px;
    padding: 20px 0;
    list-style: none;
    cursor: pointer;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question h3 {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.012em;
}

.faq__question::after {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background:
        linear-gradient(var(--blue-300), var(--blue-300)) center / 12px 1.5px no-repeat,
        linear-gradient(var(--blue-300), var(--blue-300)) center / 1.5px 12px no-repeat;
    transition: transform 0.2s;
}

.faq__item[open] .faq__question::after {
    transform: rotate(45deg);
}

.faq__question:hover h3 {
    color: #fff;
}

.faq__answer {
    max-width: 62ch;
    padding-bottom: 20px;
    color: var(--text-2);
}

.faq__answer p:last-child {
    margin-bottom: 0;
}

/* ---------- Contact ---------- */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    gap: 40px clamp(32px, 5vw, 80px);
    padding: var(--section-y) var(--inline);
    border-top: 1px solid var(--line);
    background: radial-gradient(50% 70% at 80% 100%, rgba(45, 107, 187, 0.22), transparent 70%);
}

.contact-card {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--graphite-800);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.contact-card:hover {
    border-color: rgba(114, 183, 245, 0.45);
    background: var(--graphite-750);
    color: var(--text);
}

.contact-card__tile {
    display: grid;
    flex: none;
    place-items: center;
    width: clamp(76px, 9vw, 104px);
    background: linear-gradient(160deg, #3a6fb3, #1c3f72);
    color: #fff;
}

.contact-card__body {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    padding: 22px 24px;
}

.contact-card__label {
    color: var(--text-2);
    font-size: 0.9375rem;
    font-weight: 600;
}

.contact-card__value {
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.contact__more {
    margin: 16px 0 0;
    color: var(--text-3);
    font-size: 0.9375rem;
}

.contact__pending {
    margin: 0;
    padding: 22px 24px;
    border: 1px dashed var(--line-strong);
    border-radius: 20px;
    color: var(--text-2);
    font-weight: 600;
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--navy-950);
    border-top: 1px solid var(--line);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    padding: 64px var(--inline) 48px;
}

.site-footer__tagline {
    margin: 12px 0 4px;
    color: var(--text);
    font-weight: 600;
}

.site-footer__maker {
    margin: 0;
    color: var(--text-3);
    font-size: 0.9375rem;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.site-footer__heading {
    margin-bottom: 10px;
    color: var(--text-3);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.site-footer__group ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__group a {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 36px;
    color: var(--text-2);
    font-size: 0.9375rem;
    text-decoration: none;
}

/* Parts of an email address (see _Email): each stays whole. */
.email {
    white-space: nowrap;
}

.site-footer__group a:hover {
    color: var(--text);
    text-decoration: underline;
}

.site-footer__base {
    padding: 20px var(--inline) 28px;
    border-top: 1px solid var(--line);
    color: var(--text-3);
    font-size: 0.875rem;
}

.site-footer__base p {
    margin: 0;
}

/* ---------- Document pages (privacy policy, help) ---------- */

.doc {
    padding: calc(var(--section-y) * 0.7) var(--inline) var(--section-y);
    background: radial-gradient(45% 420px at 75% 0, rgba(45, 107, 187, 0.2), transparent 75%) no-repeat;
}

.doc__head {
    max-width: 52rem;
}

.doc__bird {
    display: block;
    width: 72px;
    height: auto;
    margin-bottom: 20px;
}

.doc__head .section-title {
    margin: 0;
}

.doc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 20px 0 0;
}

.doc__meta div {
    display: flex;
    gap: 8px;
}

.doc__meta dt {
    color: var(--text-3);
}

.doc__meta dd {
    margin: 0;
    font-weight: 600;
}

.doc__intro {
    max-width: 68ch;
    margin: 16px 0 0;
    color: var(--text-2);
}

.doc__layout {
    display: grid;
    gap: 40px;
    margin-top: clamp(40px, 7vh, 72px);
    padding-top: clamp(32px, 5vh, 48px);
    border-top: 1px solid var(--line);
}

.doc__toc-title {
    margin: 0 0 12px;
    color: var(--text-3);
    font-size: var(--step--1);
    font-weight: 600;
}

.doc__toc ol {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0 0 0 1.4em;
    color: var(--text-3);
    font-size: 0.9375rem;
}

.doc__toc li {
    padding-left: 4px;
}

.doc__toc a {
    display: block;
    padding: 4px 0;
    line-height: 1.4;
    color: var(--text-2);
    text-decoration: none;
}

.doc__toc a:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.doc__body {
    max-width: 68ch;
}

.doc__body section + section {
    margin-top: 48px;
}

.doc__body h2 {
    margin: 0 0 16px;
    font-size: var(--step-2);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.doc__body h3 {
    margin: 28px 0 8px;
    color: var(--blue-300);
    font-size: var(--step-0);
    line-height: 1.4;
}

.doc__body p {
    margin: 0 0 14px;
    color: var(--text-2);
}

.doc__body ul {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
    padding-left: 1.25em;
    color: var(--text-2);
}

.doc__body li::marker {
    color: var(--blue-300);
}

.doc__body a {
    color: var(--blue-300);
    overflow-wrap: anywhere;
}

.doc__contact .specs__row {
    grid-template-columns: 9rem minmax(0, 1fr);
}

@media (min-width: 900px) {
    .doc__layout {
        grid-template-columns: 16rem minmax(0, 1fr);
        gap: clamp(40px, 6vw, 96px);
    }

    .doc__toc {
        position: sticky;
        top: calc(var(--header-h) + 24px);
        align-self: start;
    }
}

@media (max-width: 560px) {
    .doc__contact .specs__row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* Help pages: one topic after another, each with its sections. */

.help__topic + .help__topic {
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid var(--line);
}

.help .doc__body h2 {
    font-size: var(--step-3);
    letter-spacing: -0.025em;
}

.help__subtitle {
    font-size: var(--step-1);
    line-height: 1.5;
}

.help__section {
    margin-top: 36px;
}

.help .doc__body h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--text);
    font-size: var(--step-1);
}

.help__options,
.help__keys {
    margin: 0 0 16px;
}

.help__options div {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.help__options div:last-child {
    border-bottom: 1px solid var(--line);
}

.help__options dt {
    color: var(--text);
    font-weight: 700;
}

.help__options dd {
    margin: 2px 0 0;
    color: var(--text-2);
}

.help__keys div {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.help__keys div:last-child {
    border-bottom: 1px solid var(--line);
}

.help__keys dd {
    margin: 0;
    color: var(--text-2);
}

.help__keys kbd {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--navy-850);
    color: var(--text);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
}

.help__steps {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.help__steps li {
    position: relative;
    padding-left: 40px;
    color: var(--text-2);
    counter-increment: step;
}

.help__steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.1em;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--blue-600);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

.doc__body .help__tip {
    margin: 16px 0;
    padding: 14px 18px;
    border-left: 3px solid var(--blue-300);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    background: rgba(114, 183, 245, 0.08);
    color: var(--text);
}

.doc__body .help__tip--warning {
    border-left-color: #f2b45a;
    background: rgba(242, 180, 90, 0.08);
}

.help__tip strong {
    margin-right: 6px;
}

.doc__body .help__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.doc__body .help__links a {
    color: var(--text);
}

@media (max-width: 560px) {
    .help__keys div {
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: 12px;
    }

    .help__keys kbd {
        white-space: normal;
    }
}

/* "Back to top": a round button with the kingfisher flying up. Without JavaScript it is simply
   always there. */

.to-top {
    position: fixed;
    right: max(16px, calc(var(--inline) - 80px));
    bottom: 24px;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #19396a, var(--navy-850) 70%);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s, border-color 0.15s, box-shadow 0.15s;
}

.to-top__bird {
    width: 46px;
    height: 46px;
    transition: transform 0.25s ease-out;
}

.to-top:hover {
    border-color: rgba(159, 208, 255, 0.55);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(114, 183, 245, 0.12);
}

/* At rest the wings are lowered; on hover (or keyboard focus) they spread and the bird rises
   a little, as if taking off. They turn where they join the body. */
.to-top__wing {
    transform-box: view-box;
    transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.to-top__wing--left {
    transform-origin: 46px 40px;
    transform: rotate(-24deg);
}

.to-top__wing--right {
    transform-origin: 54px 40px;
    transform: rotate(24deg);
}

.to-top:hover .to-top__bird,
.to-top:focus-visible .to-top__bird {
    transform: translateY(-3px);
}

.to-top:hover .to-top__wing,
.to-top:focus-visible .to-top__wing {
    transform: none;
}

/* Tooltip, to the left of the button. */
.to-top__tip {
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--navy-800);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(6px, -50%);
    transition: opacity 0.15s, transform 0.15s;
}

.to-top__tip::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -5px;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
    background: var(--navy-800);
    transform: translateY(-50%) rotate(45deg);
}

.to-top:hover .to-top__tip,
.to-top:focus-visible .to-top__tip {
    opacity: 1;
    transform: translate(0, -50%);
}

@media (hover: none) {
    .to-top__tip {
        display: none;
    }
}

.js .to-top:not(.is-visible) {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
}

[data-top-heading]:focus {
    outline: none;
}

@media (max-width: 560px) {
    .to-top {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }

    .to-top__bird {
        width: 42px;
        height: 42px;
    }
}

/* ---------- Status pages ---------- */

.status-page {
    display: grid;
    justify-items: start;
    align-content: center;
    min-height: min(70vh, 720px);
    padding: var(--section-y) var(--inline);
    background: radial-gradient(50% 60% at 70% 30%, rgba(45, 107, 187, 0.22), transparent 70%);
}

.status-page__bird {
    width: 104px;
    height: auto;
    margin-bottom: 24px;
}

.status-page__code {
    margin: 0 0 10px;
    color: var(--blue-300);
    font-weight: 700;
}

.status-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 32px;
}

/* ---------- Screenshot viewer ---------- */

.viewer {
    width: min(1440px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: var(--navy-850);
    color: var(--text);
}

.viewer::backdrop {
    background: rgba(3, 8, 16, 0.84);
}

.viewer[open] {
    animation: viewer-in 0.18s ease-out;
}

@keyframes viewer-in {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
}

.viewer__bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--navy-850);
}

.viewer__title {
    font-size: 1rem;
    font-weight: 700;
}

.viewer__image {
    display: block;
    width: 100%;
    height: auto;
    background: var(--navy-900);
}

/* ---------- Flight layer ---------- */

.flight {
    position: absolute;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
}

.flight[hidden] {
    display: none;
}

.flight__trail {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
}

/* 140 × 116 px shows the logo's coordinates -280 40 1400 1160 at 0.1 px per unit.
   The transform origin is the bird's eye (623, 402), which stays put in every pose. */
.flight__bird {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 116px;
    transform-origin: 90.3px 36.2px;
    will-change: transform;
}

.flight__bird svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.flight-on .waypoint-bird {
    visibility: hidden;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .hero__visual {
        max-width: 760px;
        margin-top: 40px;
    }

    .chapter {
        row-gap: 32px;
    }

    .chapter > .chapter__copy,
    .chapter > .chapter__visual {
        grid-column: 1 / -1;
        align-self: start;
        padding: 0;
    }

    .chapter__copy {
        order: -1;
    }

    .chapter__visual {
        max-width: 680px;
    }

    .chapter--webcam .chapter__copy {
        justify-self: start;
        text-align: left;
    }

    .chapter--webcam .chapter__visual {
        max-width: none;
        margin-top: 0;
    }

    .platforms {
        grid-template-columns: minmax(0, 1fr);
    }

    .film__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* In one column the introduction runs full width right above the player: no room to perch. */
    .film__bird {
        display: none;
    }
}

@media (max-width: 860px) {
    :root {
        --header-h: 60px;
    }

    .download__platforms,
    .download__help,
    .faq,
    .contact,
    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    /* With JavaScript the navigation collapses behind the menu button. */
    .js .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        padding: 8px var(--gutter) 16px;
        border-bottom: 1px solid var(--line);
        background: var(--navy-900);
    }

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

    .js .site-nav__list {
        flex-direction: column;
    }

    .js .site-nav a {
        min-height: 48px;
        font-size: 1.0625rem;
    }

    .js .site-header__actions {
        margin-left: auto;
    }

    /* Without JavaScript the links wrap onto a second row. */
    .no-js .site-header__inner {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .no-js .site-nav {
        order: 3;
        width: 100%;
        margin: 0 0 8px;
    }

    .no-js .site-nav__list {
        flex-wrap: wrap;
    }

    .no-js .site-nav a {
        padding: 0 10px;
    }

    .no-js .site-header__actions {
        margin-left: auto;
    }

    .hero__actions .button {
        flex: 1 1 auto;
    }
}

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

    /* Support holds the email address: give it the full width. */
    .site-footer__group:last-child {
        grid-column: 1 / -1;
    }

    /* A slimmer icon tile and a size that follows the screen, so the address fits on one line. */
    .contact-card__tile {
        width: 56px;
    }

    .contact-card__tile svg {
        width: 26px;
        height: 26px;
    }

    .contact-card__body {
        padding: 18px 16px;
    }

    .contact-card__value {
        font-size: min(1.125rem, 4.6vw);
    }

    .specs__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .platform__action .button {
        width: 100%;
    }

    .platform__bird {
        display: none;
    }

    .film__play-label {
        display: none;
    }

    .film__chapter {
        grid-template-columns: 44px minmax(0, 1fr);
    }
}

@media (max-width: 380px) {
    .site-header .brand__name {
        font-size: 1rem;
    }

    .site-header__actions .button {
        padding: 0 12px;
    }
}

/* Reduced motion, unless the visitor switched animation on with the bird button in the header
   (the page is then marked with .motion-ok; see boot.js). */
@media (prefers-reduced-motion: reduce) {
    :root:not(.motion-ok) {
        scroll-behavior: auto;
    }

    /* 0s rather than a tiny duration: a non-zero duration turns every property change into a
       transition (transition-property defaults to all), including script-driven transforms. */
    :root:not(.motion-ok) *,
    :root:not(.motion-ok) *::before,
    :root:not(.motion-ok) *::after {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
}