/* Recursive. Dark pages in the game's own colors (Xcode/docs/design.md): the navy screen, the stage the boards and
   the editor sit on, tiles and raised tiles, and white text at a few opacities. The four function colors only mean
   functions, as in the game: links, states and errors stay white. */

:root {
    color-scheme: dark;
    --page: #0E1A2C;
    --stage: #15233A;
    --tile: #1C2D48;
    --raised: #24375A;
    --deepest: #070D18;
    --scrim: rgba(6, 12, 22, 0.64);
    --text: #FFFFFF;
    --body: rgba(255, 255, 255, 0.8);
    --secondary: rgba(255, 255, 255, 0.64);
    --tertiary: rgba(255, 255, 255, 0.5);
    --disabled: rgba(255, 255, 255, 0.3);
    --outline: rgba(255, 255, 255, 0.22);
    --border: rgba(255, 255, 255, 0.18);
    --fill: rgba(255, 255, 255, 0.06);
    --divider: rgba(255, 255, 255, 0.1);
    --hairline: rgba(255, 255, 255, 0.08);
    --tile-border: rgba(255, 255, 255, 0.06);
    --blue: #2F80ED;
    --green: #219653;
    --red: #EB5757;
    --yellow: #E1E377;
    /* The chips' numbers: each function's hue, lighter, to read as text at 4.5:1 on a tile, as in the app
       (Colors.blueNumber); yellow is light enough. */
    --blue-number: #69A7FE;
    --green-number: #4DB974;
    --red-number: #FE7F7B;
    --yellow-number: #E1E377;
    --radius: 24px;
    --wrap: 1140px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; background: var(--page); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--page); color: var(--text); font: 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
/* A <picture> only offers its <img> a WebP copy: the image lays out as if it stood alone. Its <source>, which shows
   nothing, would otherwise become a grid or flex item of its own once the <picture> has no box. */
picture { display: contents; }
picture > source { display: none; }
img, video { height: auto; }
a { color: inherit; }
p a, li a, td a, dd a { color: var(--text); text-decoration-color: var(--outline); text-underline-offset: 3px; transition: text-decoration-color .15s; }
p a:hover, li a:hover, td a:hover, dd a:hover { text-decoration-color: var(--text); }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.022em; margin: 0; }
h2 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 700; }
h3 { font-size: 22px; font-weight: 650; letter-spacing: -0.012em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--raised); }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--page); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
.nowrap { white-space: nowrap; }
kbd { font: 600 12px/1 var(--mono); padding: 3px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--tile); color: var(--text); }

/* Buttons and the badge, as the game's panels have them: primary white with navy text, secondary translucent. */

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--fill); color: var(--text);
    font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.button:hover { background: var(--hairline); border-color: var(--outline); }
.button:active { transform: scale(0.98); }
.button svg { width: 18px; height: 18px; }
.button.is-primary { background: var(--text); border-color: var(--text); color: var(--page); }
.button.is-primary:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16); }
.button.is-small { min-height: 38px; padding: 0 16px; font-size: 15px; }

/* Apple's badge, hosted with the site, as Apple draws it: its own black, border and corners, at its own shape. */
.store-badge { display: inline-block; border-radius: 9px; line-height: 0; }
.store-badge img { height: 52px; width: auto; }

.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; transition: background-color .15s; }
.icon-button:hover:not(:disabled) { background: var(--divider); }
.icon-button:disabled { color: var(--disabled); cursor: default; }
.icon-button svg { width: 22px; height: 22px; }

/* The app's icon, on the navy it's drawn on, edged with a hairline as on the game's Home screen. */
.app-icon { border-radius: 22.37%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }

/* Header */

.nav { --nav-height: 64px; position: sticky; top: 0; z-index: 20; background: rgba(14, 26, 44, 0.8); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--hairline); }
.nav-inner { display: flex; align-items: center; gap: 26px; height: var(--nav-height); }
.brand { display: flex; align-items: center; gap: 12px; font: 600 19px/1 var(--mono); text-decoration: none; letter-spacing: -0.01em; }
.nav nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
/* The sections and the language: a popover behind the menu button on a phone; on wider screens it has no box of its
   own, and its links sit in the bar. */
.sections { display: contents; }
.nav nav a { color: var(--secondary); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .15s; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--text); }
.nav a.lang { font: 600 13px/1 var(--mono); padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.nav .lang-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav nav a.contact { color: var(--text); }
.menu-button { display: none; }
.menu-button path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transform-origin: 12px 12px; transition: transform .2s; }
.sections:popover-open ~ .menu-button path:first-child { transform: rotate(45deg) translateY(3px); }
.sections:popover-open ~ .menu-button path:last-child { transform: rotate(-45deg) translateY(-3px); }

@media (max-width: 820px) {
    .nav-inner { gap: 16px; }
    .nav nav { gap: 12px; }
    /* Browsers without popovers (Safari before 17) keep the sections hidden: the footer links to every page. */
    .sections { display: none; }
}
@supports selector(:popover-open) {
    @media (max-width: 820px) {
        /* The button's glyph lines up with the page's edge. */
        .menu-button { display: inline-grid; margin-right: -9px; }
        /* A tap leaves :hover on a touch screen: no circle stays behind once the menu closes. */
        @media (hover: none) { .menu-button:hover:not(:disabled) { background: transparent; } }
        /* The menu: a sheet under the bar, in its navy, one link a row. */
        .sections:popover-open {
            display: flex; flex-direction: column;
            position: fixed; inset: calc(var(--nav-height) + 1px) 0 auto; width: auto; height: auto; margin: 0;
            max-height: calc(100dvh - var(--nav-height) - 1px); overflow-y: auto; overscroll-behavior: contain;
            padding: 4px 20px 16px; border: 0; border-bottom: 1px solid var(--hairline); color: var(--text);
            background: rgba(14, 26, 44, 0.94); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
            box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
        }
        .nav .sections a { display: flex; align-items: center; min-height: 54px; padding: 0; border: 0; border-bottom: 1px solid var(--divider); border-radius: 0; color: var(--text); font: 600 19px/1.2 var(--font); }
        .nav .sections a:last-child { border-bottom: 0; }
        .nav .sections a[aria-current]::after { content: ""; width: 8px; height: 8px; margin-left: auto; transform: rotate(45deg); background: currentColor; }
        .nav .sections .lang-short { display: none; }
        .nav .sections .lang-long { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    }
}
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
    .sections:popover-open { transition: opacity .2s, translate .2s, display .2s allow-discrete, overlay .2s allow-discrete; }
    @starting-style { .sections:popover-open { opacity: 0; translate: 0 -8px; } }
}

/* Hero */

.hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px); }
.hero::before { content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; right: -160px; top: -120px; border-radius: 50%; background: radial-gradient(circle, var(--raised), rgba(36, 55, 90, 0) 68%); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.eyebrow { font: 600 13px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary); margin-bottom: 22px; }
h1 { font-size: clamp(44px, 6.6vw, 82px); font-weight: 750; letter-spacing: -0.035em; line-height: 1.02; }
h1 .second { color: var(--secondary); }
.lede { font-size: clamp(18px, 1.9vw, 21px); color: var(--secondary); max-width: 580px; margin: 26px 0 34px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
.hero-note { margin: 22px 0 0; font-size: 15px; color: var(--secondary); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.hero-note span::before, .kicker::before { content: ""; flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--c); }

/* Game screens, as the App Store screenshots frame them: no drawn bezel, the device's own corners (--corner, a
   fraction of the screen's width, from appstore/config.toml, through build.py), a hairline and a shadow. The figure is
   the container its corners are measured in, so they keep their shape at any size. */
.screen { margin: 0; container-type: inline-size; }
.screen img {
    width: 100%; border-radius: calc(var(--corner) * 100cqw); background: var(--stage);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 70px -35px rgba(0, 0, 0, 0.8);
}
.hero-screen { justify-self: center; width: min(320px, 78vw); }
.hero-screen img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 50px 100px -30px rgba(0, 0, 0, 0.7); }

@media (max-width: 860px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-screen { width: min(280px, 70vw); }
}

/* The playable demo, laid out as the game's screen: the board on its stage, the palette bar, one row per function,
   and the footer with the count, the tools and Run. Every size is a share of the tile, --t, as in the game's
   EditorMetrics. */

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section.is-soft { background: var(--stage); }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head p { font-size: 19px; color: var(--secondary); margin: 16px 0 0; }

.play {
    --t: 50px;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; padding: 20px; border-radius: 30px;
    background: var(--page); border: 1px solid var(--hairline); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}
.play-board { position: relative; align-self: start; }
.play-board canvas, .play-result { border-radius: calc(var(--t) * 0.45); }
.play-board canvas { width: 100%; aspect-ratio: 1; background: var(--stage); }
.play-result[hidden] { display: none; }
.play-result { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px; background: var(--scrim); animation: fade .2s ease-out; }
.panel { width: 100%; padding: 22px 24px; border-radius: 22px; background: var(--tile); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); animation: rise .3s ease-out; }
.panel p { margin: 0 0 14px; color: var(--body); }
.panel .result-title { display: flex; align-items: center; gap: 10px; font: 650 24px/1.1 var(--display); color: var(--text); margin-bottom: 8px; }
.panel .result-title svg { width: 22px; height: 22px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }

.play-side { display: flex; flex-direction: column; min-width: 0; padding: 6px 6px 0 0; }
.play-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.play-number { font: 600 13px/1 var(--mono); color: var(--secondary); margin: 6px 0 8px; }
.play-title { font: 700 28px/1.1 var(--display); letter-spacing: -0.02em; margin: 0; }
.play-nav { display: flex; align-items: center; gap: 2px; }
.dots { display: flex; gap: 6px; padding: 0 4px; }
.dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1.5px solid var(--disabled); background: transparent; cursor: pointer; }
.dot.is-solved { background: var(--text); border-color: var(--text); }
.dot.is-current { border-color: var(--text); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
.play-hint { color: var(--secondary); margin: 14px 0 20px; min-height: 3.2em; font-size: 16px; }

/* Instruction tiles: a glyph on a tile, a call in its function's color (--call) with the chip's number, lighter
   (--call-number). */
.token {
    position: relative; display: inline-grid; place-items: center; flex: none;
    width: var(--t, 46px); height: var(--t, 46px); padding: 0; border: 0; border-radius: calc(var(--t, 46px) / 4);
    background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-border); color: var(--call, var(--text));
    cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
    transition: background-color .12s, transform .12s, opacity .12s, box-shadow .12s;
}
.token svg, .fn-label svg { width: calc(var(--t, 46px) * 0.55); height: calc(var(--t, 46px) * 0.55); pointer-events: none; }
.token.is-call svg, .fn-label svg { width: calc(var(--t, 46px) * 0.66); height: calc(var(--t, 46px) * 0.66); }
.glyph-number { font: 700 9px/1 var(--font); fill: var(--call-number, currentColor); text-anchor: middle; dominant-baseline: central; }
button.token:hover { background: var(--raised); }
button.token:active { transform: scale(0.94); }

.palette-bar { position: relative; margin-bottom: calc(var(--t) * 0.4); }
.palette { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--t) / 10); padding: calc(var(--t) / 10); border-radius: calc(var(--t) * 0.3); background: var(--stage); transition: opacity .2s; }
.palette.is-full .token { opacity: 0.35; }
.is-running .palette { opacity: 0.28; }
.is-running .token { cursor: default; }
.is-running button.token:hover { background: var(--tile); }

/* While a placed tile is held, the palette bar turns into the delete zone, in place. */
.delete-zone { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 10px; padding: 0 12px; border: 1.5px dashed var(--tertiary); border-radius: calc(var(--t) * 0.3); background: rgba(255, 255, 255, 0.12); color: var(--text); font-size: 15px; text-align: center; }
.delete-zone svg { flex: none; width: 22px; height: 22px; }
.is-deleting .palette { visibility: hidden; }
.is-deleting .delete-zone { display: flex; }

/* One row per function, its color --c. */
.fn[data-fn="0"] { --c: var(--blue); }
.fn[data-fn="1"] { --c: var(--green); }
.fn[data-fn="2"] { --c: var(--red); }
.fn[data-fn="3"] { --c: var(--yellow); }
.rows { display: grid; gap: calc(var(--t) / 5); }
.fn { display: flex; min-height: calc(var(--t) * 1.2); border-radius: calc(var(--t) * 0.3); background: var(--stage); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s; }
/* The chip's cell is a palette tile's width at a palette tile's place, the divider at its end, so that a row's first
   token sits under the palette's second, as in the app. */
.fn-label { display: grid; place-items: center; flex: none; width: calc(var(--t) * 1.1); padding: 0 0 0 calc(var(--t) / 10); border: 0; border-right: 1px solid var(--divider); background: none; color: var(--c); }
button.fn-label { cursor: pointer; }
.fn-slots { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: calc(var(--t) / 10); padding: calc(var(--t) / 10); cursor: pointer; }
.fn.is-selected, .fn.is-drop { box-shadow: inset 0 0 0 1px var(--outline); }
.program-row .fn-slots { cursor: default; }

/* Running: each robot's instruction, ringed in its function's color. */
.token.is-current { background: var(--raised); box-shadow: inset 0 0 0 2px var(--c); }

/* Dragging: the tile lifts, the target row opens a dashed slot, and the tile's old place stays dashed until the drop. */
.slot, .token.is-dragged { background: rgba(255, 255, 255, 0.03); box-shadow: none; outline: 1.5px dashed rgba(255, 255, 255, 0.45); outline-offset: -1.5px; }
.token.is-dragged svg { visibility: hidden; }
.slot { display: inline-block; flex: none; width: var(--t); height: var(--t); border-radius: calc(var(--t) / 4); }
.is-dropping .token.is-dragged { display: none; }
.token.is-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; background: var(--raised); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); transition: opacity .18s, scale .18s; }
.token.is-ghost.is-removing::after { content: "×"; position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--page); font: 700 15px/1 var(--font); }
.token.is-ghost.is-gone { opacity: 0; scale: 0.4; }

.play-controls { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }
.bytes { font: 600 17px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--text); }
.bytes.is-empty { color: var(--secondary); }
.bytes.is-shaking { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
/* The tools, in one translucent capsule, as the game's glass groups. */
.tools { display: flex; gap: 2px; margin: 0 auto; padding: 3px; border-radius: 999px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hairline); }
.run { min-width: 120px; }
.play-note { margin: 18px auto 0; max-width: 760px; text-align: center; font-size: 14px; color: var(--secondary); line-height: 2; }
@media (hover: none) and (pointer: coarse) { .play-note .keys { display: none; } }
@media (max-width: 880px) { .play { grid-template-columns: 1fr; padding: 14px; gap: 18px; border-radius: 24px; } .play-hint { min-height: 0; } }
@media (max-width: 560px) { .play { --t: 40px; } .run { min-width: 0; } }

/* Feature slides: one per chapter, tinted with a function's color */

.slides { display: grid; gap: 22px; }
.slide { --c: var(--blue); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 32px; background: color-mix(in srgb, var(--c) 9%, var(--page)); box-shadow: inset 0 0 0 1px var(--hairline); }
.slide:nth-child(even) .slide-media { order: -1; }
.slide.is-red { --c: var(--red); }
.slide.is-green { --c: var(--green); }
.slide.is-yellow { --c: var(--yellow); }
.slide.is-gray { --c: var(--text); background: var(--stage); }
.slide-media video { width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 1; border-radius: 22px; background: var(--stage); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.slide .kicker { display: flex; align-items: center; gap: 10px; font: 600 13px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--secondary); margin-bottom: 16px; }
.slide h3 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 16px; }
.slide p { color: var(--secondary); font-size: 18px; margin: 0; max-width: 440px; }
@media (max-width: 760px) { .slide { grid-template-columns: 1fr; } .slide:nth-child(even) .slide-media { order: 0; } }

/* Budget */

.budget { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.budget h2 { margin-bottom: 20px; }
.budget > div > p { color: var(--secondary); font-size: 18px; }
.help-note { display: flex; gap: 14px; margin-top: 28px; padding: 18px 20px; border-radius: 16px; background: var(--tile); }
.help-note svg { flex: none; width: 26px; height: 26px; color: var(--text); }
.help-note p { margin: 0; color: var(--secondary); font-size: 16px; }
.help-note strong { color: var(--text); }
.program-card { --t: 46px; margin: 0; padding: 16px; border-radius: 26px; background: var(--page); border: 1px solid var(--hairline); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8); max-width: 420px; justify-self: center; }
.program-card img { width: 100%; border-radius: calc(var(--t) * 0.45); }
.program-card figcaption { padding: 16px 0 4px; }
.program-row .token { cursor: default; }
.program-card p { margin: 14px 6px 0; color: var(--secondary); }
.program-card strong { color: var(--text); }
@media (max-width: 860px) { .budget { grid-template-columns: 1fr; } }

/* Numbers band */

.band { background: var(--deepest); color: var(--text); padding: clamp(56px, 8vw, 96px) 0; }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 48px; }
.numbers div { border-top: 3px solid var(--c); padding-top: 16px; }
.numbers dt { font: 750 clamp(40px, 5.4vw, 64px)/1 var(--display); letter-spacing: -0.03em; }
.numbers dd { margin: 8px 0 0; color: var(--secondary); font-size: 16px; }
.strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; list-style: none; padding: 0; margin: 0; }
.strip img { width: 100%; aspect-ratio: 1; border-radius: 14px; }
@media (max-width: 760px) { .numbers { grid-template-columns: repeat(2, 1fr); } .strip { grid-template-columns: repeat(4, 1fr); } }

/* Devices: two screens a row, each as wide as its shape asks (--ratio) so that the row's screens share one height */

.devices { display: grid; gap: clamp(32px, 4.4vw, 52px); }
.device-row { display: flex; gap: clamp(20px, 3vw, 36px); align-items: flex-start; }
.device-row .screen { flex: var(--ratio) 1 0; min-width: 0; }
.screen figcaption { margin-top: 16px; font-size: 15px; color: var(--secondary); }
.screen figcaption strong { color: var(--text); }
@media (max-width: 700px) {
    .device-row { flex-direction: column; align-items: center; }
    .device-row .screen { flex: none; width: 100%; }
    .device-row .screen.is-portrait { max-width: 280px; }
}

/* FAQ */

.faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 40px clamp(32px, 6vw, 80px); align-items: start; }
.faq-head h2 { margin-bottom: 18px; }
.faq-head p { color: var(--secondary); }
.faq details { border-bottom: 1px solid var(--divider); }
.faq details:first-child { border-top: 1px solid var(--divider); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font: 600 19px/1.3 var(--display); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 26px/1 var(--font); color: var(--secondary); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--secondary); margin: -6px 0 22px; max-width: 680px; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* Final call */

.final { padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 112px); }
.final-card { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; padding: clamp(32px, 5vw, 56px); border-radius: 32px; background: var(--stage); box-shadow: inset 0 0 0 1px var(--hairline); }
.final-card h2 { font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 10px; }
.final-card p { color: var(--secondary); margin: 0; font-size: 18px; }
.final-card .store-badge { margin-left: auto; }
@media (max-width: 760px) { .final-card .store-badge { margin-left: 0; } }

/* Footer, with the game's lockup: the icon, then "Recursive" over its definition */

.footer { border-top: 1px solid var(--hairline); background: var(--deepest); padding: 36px 0 44px; font-size: 14px; color: var(--secondary); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.lockup { display: flex; align-items: center; gap: 12px; margin: 0; }
.lockup span { display: block; }
.wordmark { font: 600 19px/1.2 var(--mono); color: var(--text); }
.tagline { font: 12px/1.4 var(--mono); color: rgba(255, 255, 255, 0.6); }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.footer nav a { color: var(--secondary); text-decoration: none; }
.footer nav a:hover { color: var(--text); }
.legal { flex-basis: 100%; margin: 6px 0 0; font-size: 12px; color: var(--tertiary); }
.legal a { color: inherit; }

/* Text pages */

.page { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 9vw, 112px); }
.page .wrap { max-width: 780px; }
.page h1 { font-size: clamp(38px, 6vw, 60px); margin-bottom: 18px; }
.page .lede { margin: 0 0 44px; }
.page h2 { font-size: 28px; margin: 52px 0 14px; }
.page h3 { font-size: 19px; margin: 28px 0 8px; }
.page p, .page li { color: var(--secondary); }
.page strong { color: var(--text); }
.page ul { padding-left: 1.2em; }
.page li { margin-bottom: 6px; }
.updated { font: 600 13px/1 var(--mono); color: var(--secondary); }
.contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 26px; border-radius: var(--radius); background: var(--stage); }
.contact-card p { margin: 0; }
.table { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: 16px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.table th { width: 34%; color: var(--text); font-weight: 600; padding-right: 16px; }
.table td { color: var(--secondary); }
.moves { --t: 46px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; list-style: none; padding: 0 !important; }
.moves li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px; border-radius: 16px; background: var(--stage); color: var(--text); }
.moves .token { cursor: default; }
.moves div > span { color: var(--secondary); font-size: 15px; }
.moves strong { display: block; }
.lessons { list-style: none; padding: 0 !important; counter-reset: lesson; }
.lesson { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--divider); margin: 0 !important; }
.lesson img { width: 132px; border-radius: 16px; }
.lesson h3 { margin: 4px 0 8px; color: var(--text); }
.lesson blockquote { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid var(--outline); color: var(--text); }
.lesson p { margin: 0; }
@media (max-width: 560px) { .lesson { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; } .lesson img { width: 84px; border-radius: 12px; } }
.press-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; list-style: none; padding: 0 !important; }
.press-assets li { margin: 0; }
.press-assets a { display: block; text-decoration: none; color: var(--text); font-size: 15px; font-weight: 600; }
.press-assets img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; margin-bottom: 8px; background: var(--stage); }
.press-assets .is-icon img { object-fit: contain; padding: 18px; background: var(--stage); }
.press-assets span { display: block; color: var(--secondary); font-weight: 400; font-size: 13px; }

/* French runs longer. */
html[lang="fr"] h1 { font-size: clamp(38px, 4.9vw, 62px); }
html[lang="fr"] .page h1 { font-size: clamp(34px, 5.4vw, 54px); }