/* Practice Dojo · landing page · Field Unit (marketing chassis)
   The public site's side of the Field Unit design system
   (docs/DESIGN-field-unit.md): a mineral chassis by day, Kiln at night,
   paper modules at 22px, data in a black glass well, one signal key per
   view, spec rows indexed in signal mono.

   The palette below mirrors the raw tokens in app/css/field-unit.css. The
   app's stylesheet is not loaded here: it is the app's component layer and
   would restyle this page. If a Field Unit colour changes, change it in both. */

@font-face {
    font-family: 'Liberation Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Liberation Mono'), local('LiberationMono'), url('../app/fonts/LiberationMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Liberation Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Liberation Mono Bold'), local('LiberationMono-Bold'), url('../app/fonts/LiberationMono-Bold.woff2') format('woff2');
}

/* Inter (text) and Inter Display (titles, names, numerals), self-hosted so
   they always load. Built from the Inter 4.1 release (rsms/inter, OFL — see
   app/fonts/Inter-OFL.txt), Latin subset. InterVariable keeps both axes, so text
   gets its optical size automatically; InterDisplayVariable is the same
   design pinned at the display optical size (opsz 32), every weight. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../app/fonts/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../app/fonts/InterVariable-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter Display';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../app/fonts/InterDisplayVariable.woff2') format('woff2');
}

/* ===================================================================
   TOKENS — Mineral (day)
=================================================================== */
:root {
    color-scheme: light;

    --fu-chassis: #E7E2D8;
    --fu-paper: #F4F0E8;
    --fu-paper-sunk: #EDE9E1;
    --fu-glass: #121212;
    --fu-glass-raised: #1A1A1A;
    --fu-ink: #161513;
    --fu-body: #3C3934;
    --fu-mute: #8A847A;
    --fu-zero: #A39E94;
    --fu-line: #D5CFC4;
    --fu-line-soft: #E0DBD1;
    --fu-row-rule: #E4DFD6;
    --fu-strong: #BDB6AA;
    /* Fixed in both themes: light text on glass, dark text on a light fill. */
    --fu-light: #F4F0E8;
    --fu-dark: #161513;
    --fu-glass-line: #2A2A2A;
    --fu-glass-rule: #242424;
    --fu-glass-2: #C9C3B8;
    --fu-glass-mute: #9A948A;
    --fu-glass-faint: #6F6A62;
    --fu-edge: #6A655E;

    /* Ink identities: ticks and cost pips, never a wash. */
    --ink-amber: #E0A23A;
    --ink-amethyst: #7A5CFF;
    --ink-ruby: #D64545;
    --ink-emerald: #1F9D6A;
    --ink-sapphire: #3C7DFF;
    --ink-steel: #8E8C88;

    /* The demo match: P1 Amber/Amethyst, P2 Amber/Emerald. */
    --p1: var(--ink-amber);
    --p1-2: var(--ink-amethyst);
    --p2: var(--ink-amber);
    --p2-2: var(--ink-emerald);
    --tick-p1: linear-gradient(90deg, var(--p1) 0 3px, transparent 3px 5px, var(--p1-2) 5px 8px);
    --tick-p2: repeating-linear-gradient(135deg, var(--p2) 0 2px, var(--p2-2) 2px 4px);
    --tick-mask: linear-gradient(90deg, #000 0 3px, transparent 3px 5px, #000 5px 8px);

    /* Signal: Ember by day. Every tone derives from l / c / h, as in the app. */
    --sig-l: 0.637;
    --sig-c: 0.184;
    --sig-h: 36.5;
    --signal: oklch(var(--sig-l) var(--sig-c) var(--sig-h));
    --signal-hover: oklch(calc(var(--sig-l) - 0.06) var(--sig-c) var(--sig-h));
    --signal-active: oklch(calc(var(--sig-l) - 0.108) calc(var(--sig-c) * 0.85) var(--sig-h));
    /* The signal as small text on the chassis: the darker "hi" tone, so an
       index stays readable on #E7E2D8. */
    --signal-text: oklch(calc(var(--sig-l) - 0.06) var(--sig-c) var(--sig-h));
    --signal-ink: #FFF8F4;

    /* Shell roles */
    --bg: var(--fu-chassis);
    --surface: var(--fu-paper);
    --surface-2: var(--fu-paper-sunk);
    --text: var(--fu-ink);
    --text-2: var(--fu-body);
    --text-dim: var(--fu-mute);
    --text-faint: var(--fu-zero);
    --border: var(--fu-line);
    --border-soft: var(--fu-line-soft);
    --rule: var(--fu-row-rule);
    --border-strong: var(--fu-strong);
    --danger: oklch(0.56 0.18 24.5);

    /* Type */
    --font-sans: 'Inter', 'Noto Sans Display', system-ui, -apple-system, sans-serif;
    --font-display: 'Inter Display', 'Inter', 'Noto Sans Display', system-ui, -apple-system, sans-serif;
    --font-mono: 'Liberation Mono', 'DejaVu Sans Mono', ui-monospace, monospace;
    --label-track: 0.14em;

    /* Geometry. Marketing modules are 22px; the app's well is 16px. */
    --r-module: 22px;
    --r-well: 16px;
    --r-inset: 10px;
    --r-control: 8px;
    --page-pad: 48px;
    --page-max: 1440px;
    --nav-h: 56px;
    --dur: 120ms;
    --ease: ease-out;

    --shadow-node: 0 10px 24px -14px oklch(0 0 0 / 0.8);
}

/* ===================================================================
   KILN — night. <html data-theme="night">, set before first paint from
   the app's own Theme choice (Auto follows the device).
=================================================================== */
:root[data-theme="night"] {
    color-scheme: dark;

    --fu-chassis: #141311;
    --fu-paper: #221F1B;
    --fu-paper-sunk: #1A1815;
    --fu-glass: #0C0C0C;
    --fu-glass-raised: #161412;
    --fu-ink: #F4F0E8;
    --fu-body: #C9C3B8;
    --fu-mute: #8A847A;
    --fu-zero: #6B655C;
    --fu-line: #2C2924;
    --fu-line-soft: #2C2924;
    --fu-row-rule: #2A2622;
    --fu-strong: #3E3933;

    /* Radio #E86B2A, dark text on the key. */
    --sig-l: 0.67;
    --sig-c: 0.172;
    --sig-h: 44.5;
    --signal-text: var(--signal);
    --signal-ink: #1A0A05;
    --danger: oklch(0.66 0.18 24.5);
}

/* The glass well: same role tokens, glass values. */
.glass {
    --bg: var(--fu-glass);
    --surface: var(--fu-glass-raised);
    --surface-2: #202020;
    --text: var(--fu-light);
    --text-2: var(--fu-glass-2);
    --text-dim: var(--fu-glass-mute);
    --text-faint: var(--fu-glass-faint);
    --border: var(--fu-glass-line);
    --border-soft: var(--fu-glass-rule);
    --rule: var(--fu-glass-rule);
    --border-strong: #3B3A37;
    --danger: oklch(0.64 0.19 24.5);
    --signal-text: oklch(calc(var(--sig-l) + 0.07) var(--sig-c) var(--sig-h));
    background: var(--fu-glass);
    color: var(--text);
}

/* Paper sits on glass in one place here: the multiverse nodes. */
.paper {
    --bg: var(--fu-chassis);
    --surface: var(--fu-paper);
    --surface-2: var(--fu-paper-sunk);
    --text: var(--fu-ink);
    --text-2: var(--fu-body);
    --text-dim: var(--fu-mute);
    --text-faint: var(--fu-zero);
    --border: var(--fu-line);
    --border-soft: var(--fu-line-soft);
    --rule: var(--fu-row-rule);
    --danger: oklch(0.56 0.18 24.5);
    color: var(--text);
}

:root[data-theme="night"] .paper {
    --danger: oklch(0.66 0.18 24.5);
}

/* The well is blacker than the night chassis; a hairline keeps its edge. */
:root[data-theme="night"] .glass {
    box-shadow: 0 0 0 1px var(--fu-line);
}

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

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

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.45;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

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

.wrap {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-pad);
}

@media (max-width: 760px) {
    :root {
        --page-pad: 20px;
    }
}

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

/* label/sm: mono, uppercase, 0.14em. Every label, index and column head. */
.label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: var(--label-track);
    text-transform: uppercase;
    color: var(--text-dim);
}

.fig {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.mute {
    color: var(--text-dim);
}

.sig {
    color: var(--signal-text);
}

/* Ink ticks: two 3×16 bars for a deck's ink pair. P2's are striped, so a
   mirror match still reads when colour alone can't. The app keeps them on
   the win-probability meters; everywhere else a deck is its deck icon. */
.ticks {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 16px;
    vertical-align: middle;
}

.ticks.p1 {
    background: var(--tick-p1);
}

.ticks.p2 {
    background: var(--tick-p2);
    -webkit-mask-image: var(--tick-mask);
    mask-image: var(--tick-mask);
}

.ticks.sm {
    height: 11px;
}

/* Deck icon (img/deck_icon.svg): a card in the deck's first ink with a
   star cut out of it in the second. Two masks, so both inks come from
   tokens: --di-a (card) and --di-b (star). A mono-ink deck fills both.
   P2's card is hatched — the barber pole — so a mirror match still reads.
   Size it with height; the width follows the card's 0.684 aspect. */
:root {
    --deck-icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3393 4961'%3E%3Cpath transform='matrix(300.833978,0,0,300.833978,-628927.680203,-668522.017211)' d='M2090.614,2232.243L2090.614,2223.357C2090.614,2222.735 2091.119,2222.229 2091.741,2222.229L2094.709,2222.229C2094.68,2227.769 2092.86,2232.243 2090.623,2232.243L2090.614,2232.243ZM2097.78,2222.229L2100.762,2222.229C2101.384,2222.229 2101.889,2222.735 2101.889,2223.357L2101.889,2237.591C2101.889,2238.213 2101.384,2238.719 2100.762,2238.719L2097.166,2238.719C2098.174,2235.957 2099.91,2234.13 2101.882,2234.123L2101.882,2232.243L2101.866,2232.243C2099.629,2232.243 2097.81,2227.769 2097.78,2222.229ZM2095.33,2238.719L2091.741,2238.719C2091.119,2238.719 2090.614,2238.213 2090.614,2237.591L2090.614,2234.123C2092.586,2234.129 2094.322,2235.957 2095.33,2238.719Z'/%3E%3C/svg%3E");
    --deck-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3393 4961'%3E%3Cpath transform='matrix(5.785071,0,0,5.785071,283.638917,191.904772)' d='M199.155,350.491C241.006,151.68 235.663,5.994 241.771,3.116C251.505,-1.47 246.476,7.481 249.025,37.224C271.674,301.528 281.264,506.929 463.988,532.906C465.191,533.077 510.547,539.524 474.207,544.146C253.295,572.238 254.91,783.269 246.196,788.666C242.992,790.651 239.777,789.023 231.613,743.864C212.427,637.733 117.149,557.177 31.199,545.902C29.242,545.645 -20.275,539.15 9.51,534.134C123.536,514.934 163.64,470.61 199.155,350.491Z'/%3E%3C/svg%3E");
}

.deck-icon {
    --di-a: var(--text-dim);
    --di-b: var(--di-a);
    position: relative;
    display: inline-block;
    flex: none;
    height: 16px;
    aspect-ratio: 3393 / 4961;
    vertical-align: -3px;
}

.deck-icon::before,
.deck-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--di-a);
    -webkit-mask: var(--deck-icon-card) center / contain no-repeat;
    mask: var(--deck-icon-card) center / contain no-repeat;
}

.deck-icon::after {
    background: var(--di-b);
    -webkit-mask-image: var(--deck-icon-star);
    mask-image: var(--deck-icon-star);
}

.deck-icon.is-p1 {
    --di-a: var(--p1);
    --di-b: var(--p1-2);
}

.deck-icon.is-p2 {
    --di-a: var(--p2);
    --di-b: var(--p2-2);
}

.deck-icon.is-p2::before {
    background: repeating-linear-gradient(135deg, var(--di-a) 0 1.5px, transparent 1.5px 3px);
}

.deck-icon.sm {
    height: 12px;
    vertical-align: -2px;
}

/* ===================================================================
   CONTROLS
=================================================================== */
/* Signal key: Launch. Filled, pill, one per view. */
.key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--signal);
    color: var(--signal-ink);
    font-size: 14px;
    font-weight: 560;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}

.key:hover {
    background: var(--signal-hover);
}

.key:active {
    background: var(--signal-active);
}

.key.lg {
    height: 48px;
    padding: 0 26px;
    font-size: 15px;
}

/* Paper tool: everything that isn't the one key. */
.tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tool:hover {
    background: var(--surface-2);
}

.tool.sm {
    height: 28px;
    padding: 0 10px;
    font-size: 12.5px;
}

/* The emphasised paper tool: a next step that isn't the signal key. */
.tool.strong {
    border-color: var(--text);
}

.tool .ar {
    font-family: var(--font-sans);
}

/* Segmented control (Theme: Auto / Day / Night). The picked segment is the
   open tool: glass with paper text. */
.seg {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    background: var(--surface);
}

.seg button {
    height: 22px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

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

.seg button[aria-pressed="true"] {
    background: var(--fu-glass);
    color: var(--fu-light);
}

:root[data-theme="night"] .seg button[aria-pressed="true"] {
    box-shadow: inset 0 0 0 1px var(--fu-line);
}

/* Keycap */
.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
}

/* ===================================================================
   NAV
=================================================================== */
.nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.nav .wrap {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    flex: 0 0 auto;
}

.brand img {
    width: 22px;
    height: 22px;
}

/* The mark is drawn in ink, like the app's .brand-mark. */
.brand-mark {
    filter: brightness(0);
    opacity: 0.88;
}

:root[data-theme="night"] .brand-mark {
    filter: brightness(0) invert(0.94);
}

.brand .name {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--label-track);
    text-transform: uppercase;
}

.brand .ver {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
}

.nav-links {
    display: flex;
    gap: 22px;
    margin: 0 auto;
    font-size: 13px;
    color: var(--text-2);
}

.nav-links a {
    text-decoration: none;
}

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

.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

@media (max-width: 1020px) {
    .nav-links {
        display: none;
    }
}

@media (max-width: 640px) {
    .nav .seg,
    .brand .ver {
        display: none;
    }
}

/* ===================================================================
   SECTIONS
=================================================================== */
.section {
    padding: 96px 0;
    border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
    .section {
        padding: 64px 0;
    }
}

/* Section index: "02  Import ────────" */
.sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sec-head .n {
    color: var(--text);
}

.sec-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* display/xl — marketing headline only. Sentence case. */
.display {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(44px, 6.2vw, 72px);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.045em;
    color: var(--text);
    text-wrap: balance;
}

.h2 {
    margin: 22px 0 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4.2vw, 48px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text);
    text-wrap: balance;
}

/* The muted half of a headline: #8A847A, not a second accent. It starts
   its own line, so each headline reads as two beats. */
.display .mute,
.h2 .mute {
    display: block;
    color: var(--fu-mute);
}

.lede {
    margin: 18px 0 0;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-2);
}

.lede.lg {
    font-size: 17px;
}

.sec-head + .sec-intro .h2 {
    margin-top: 22px;
}

.sec-intro {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px 48px;
    align-items: end;
    margin-bottom: 40px;
}

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

/* Paper module on the chassis */
.module {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-module);
}

/* Black inset / well on the chassis */
.well {
    border-radius: var(--r-module);
}

/* ===================================================================
   SPEC ROWS — 1px hairlines, indexed in signal mono
=================================================================== */
.spec {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-soft);
}

.spec > li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-soft);
}

.spec .n {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 20px;
    letter-spacing: 0.06em;
    color: var(--signal-text);
}

.spec h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 560;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.spec p {
    margin: 5px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
}

/* Spec rows under a demo module. */
.spec.after {
    margin-top: 40px;
}

/* Three across, each with its own top rule. */
.spec.cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 32px;
    border-top: 0;
}

.spec.cols > li {
    border-top: 1px solid var(--border-soft);
    border-bottom: 0;
}

/* Five across: the notes under the board screenshot. */
.spec.cols.c5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 24px;
}

@media (max-width: 1100px) {
    .spec.cols.c5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .spec.cols > li + li {
        border-top: 1px solid var(--border-soft);
    }
}

/* The full spec sheet: index · name · what it does · tag. */
.spec.sheet > li {
    grid-template-columns: 44px minmax(0, 4fr) minmax(0, 7fr) 96px;
    align-items: baseline;
    padding: 20px 0;
}

.spec.sheet p {
    margin: 0;
}

.spec.sheet .tag {
    text-align: right;
}

@media (max-width: 860px) {
    .spec.sheet > li {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .spec.sheet p,
    .spec.sheet .tag {
        grid-column: 2;
    }

    .spec.sheet p {
        margin-top: 5px;
    }

    .spec.sheet .tag {
        text-align: left;
        margin-top: 8px;
    }
}

/* ===================================================================
   HERO
=================================================================== */
.hero {
    padding: 72px 0 96px;
}

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

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

@media (max-width: 760px) {
    .hero {
        padding: 44px 0 64px;
    }
}

.hero .label.top {
    margin-bottom: 28px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

.hero-actions .tool {
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 36px 0 0;
    padding: 14px 0 0;
    list-style: none;
    border-top: 1px solid var(--border-soft);
}

.hero-points li {
    display: flex;
    gap: 8px;
}

.hero-points .n {
    color: var(--signal-text);
}

/* The black inset: the whole demo match as one map. */
.inset {
    padding: 22px 22px 18px;
    min-width: 0;
}

.inset-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.inset-title {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 560;
    letter-spacing: -0.02em;
    color: var(--text);
}

.inset-sub {
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-dim);
}

.inset-readouts {
    display: flex;
    gap: 8px;
}

/* Turn stamp: glass chip, the turn number is signal. */
.turn-stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--r-control);
    background: var(--fu-glass-raised);
    border: 1px solid var(--fu-glass-line);
    font-size: 12px;
    color: var(--fu-light);
    white-space: nowrap;
}

.turn-stamp b {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 560;
    color: var(--signal-text);
}

/* Lore box: glass raised, label mute, numeral display/lg in signal. */
.lore-box {
    min-width: 76px;
    padding: 7px 10px 6px;
    border-radius: var(--r-inset);
    background: var(--fu-glass-raised);
    border: 1px solid var(--fu-glass-line);
}

.lore-box .label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fu-glass-mute);
}

.lore-box .num {
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 520;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--signal-text);
    font-variant-numeric: tabular-nums;
}

.map-wrap {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.map-wrap svg {
    width: 100%;
    height: auto;
    min-width: 520px;
}

.map-wrap text {
    font-family: var(--font-mono);
}

.inset .map-label {
    margin: 14px 0 2px;
}

/* The map: every saved node. Hairlines and hollow dots off the line you're
   on; the line you're on in signal; the node you're on filled, with a ring. */
.m-edge {
    fill: none;
    stroke: var(--fu-edge);
    stroke-width: 1.2;
    stroke-linecap: round;
}

.m-edge.is-live {
    stroke: var(--signal);
    stroke-width: 2;
}

.m-dot {
    fill: var(--fu-glass);
    stroke: var(--fu-edge);
    stroke-width: 1.2;
}

.m-dot.is-live {
    fill: var(--signal);
    stroke: none;
}

.m-dot.is-here {
    fill: var(--signal);
    stroke: none;
}

.m-ring {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1;
    opacity: 0.55;
}

.m-bn,
.m-tick,
.m-who {
    font-size: 9.5px;
    fill: var(--fu-glass-mute);
}

.m-bn {
    fill: var(--fu-glass-2);
}

.m-here {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    fill: var(--signal-text);
}

/* Lore race */
.m-grid {
    stroke: var(--fu-glass-rule);
    stroke-width: 1;
}

.m-grid.is-win {
    stroke: var(--fu-glass-line);
    stroke-dasharray: 4 4;
}

.m-p1,
.m-p2 {
    fill: none;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.m-p1 {
    stroke: var(--fu-glass-2);
}

.m-p2 {
    stroke: var(--fu-glass-mute);
    stroke-dasharray: 4 3;
}

.m-end {
    fill: var(--fu-glass-2);
}

.m-who {
    font-size: 10.5px;
}

.m-num {
    font-size: 12px;
    fill: var(--signal-text);
}

.inset .stamp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 6px;
}

/* Branch points, in the order they were tried. */
.branch-notes {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.branch-notes li {
    display: grid;
    grid-template-columns: 22px 34px minmax(0, 1fr);
    gap: 6px;
    padding: 6px 0;
    border-top: 1px solid var(--fu-glass-rule);
    font-size: 11.5px;
    color: var(--fu-glass-2);
    min-width: 0;
}

.branch-notes .bn,
.branch-notes .bt {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fu-glass-mute);
}

.branch-notes .bx {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

    .inset {
        padding: 18px 16px 14px;
    }
}

/* ===================================================================
   SEE IT — the real board, day and night
=================================================================== */
.shot {
    margin: 0;
    padding: 8px;
}

.shot-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px 12px;
}

.shot-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.shot-frame img {
    width: 100%;
    height: auto;
}

/* Show the screenshot that matches the theme. The other one is
   display:none and loading=lazy, so it isn't fetched. */
.shot-frame .is-night,
:root[data-theme="night"] .shot-frame .is-day {
    display: none;
}

:root[data-theme="night"] .shot-frame .is-night {
    display: block;
}

/* Index pins on the screenshot, matching the spec rows under it. */
.pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--fu-dark);
    box-shadow: 0 0 0 1px oklch(0.96 0.01 80 / 0.55), 0 6px 14px -6px oklch(0 0 0 / 0.6);
    color: oklch(calc(var(--sig-l) + 0.07) var(--sig-c) var(--sig-h));
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    pointer-events: none;
}

@media (max-width: 760px) {
    .pin {
        display: none;
    }
}

.shot-notes {
    margin-top: 32px;
}

/* ===================================================================
   ON YOUR PHONE — the board and the card drawer, day and night
=================================================================== */
.phone-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: center;
}

/* Two phones side by side on one paper module. The screens carry the
   app's own chassis, so the frame is only a hairline and a radius. */
.phones {
    margin: 0;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.phone-frame {
    position: relative;
    max-width: 340px;
    justify-self: center;
    width: 100%;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 18px 40px -26px oklch(0 0 0 / 0.55);
}

.phone-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.phone-frame .is-night,
:root[data-theme="night"] .phone-frame .is-day {
    display: none;
}

:root[data-theme="night"] .phone-frame .is-night {
    display: block;
}

@media (max-width: 1000px) {
    .phone-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 560px) {
    .phones {
        padding: 12px;
        gap: 12px;
    }

    .phone-frame {
        border-radius: 18px;
    }
}

/* ===================================================================
   IMPORT
=================================================================== */
.import-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) 40px minmax(0, 7fr);
    gap: 16px;
    align-items: stretch;
}

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

    .import-grid .flow {
        transform: rotate(90deg);
        height: 24px;
    }
}

.intake-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.intake-q {
    margin: 4px 2px 2px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 560;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* The app's intake: a glass well with the pasted text and an example bar. */
.intake {
    border-radius: var(--r-well);
    overflow: hidden;
}

.intake pre {
    margin: 0;
    height: 268px;
    overflow: hidden;
    padding: 16px 18px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--fu-glass-2);
    white-space: pre-wrap;
    word-break: break-word;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
    mask-image: linear-gradient(180deg, #000 78%, transparent);
}

.intake pre .t {
    color: var(--fu-glass-mute);
}

.intake-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px 8px 14px;
    border-top: 1px solid var(--fu-glass-rule);
    font-size: 12px;
    color: var(--fu-glass-2);
}

.intake-bar .chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Glass-outline control inside the well. Not signal. */
.g-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--fu-glass-line);
    border-radius: 6px;
    color: var(--fu-glass-2);
    font-size: 11.5px;
    white-space: nowrap;
}

.g-chip.is-on {
    border-color: var(--fu-glass-2);
    color: var(--fu-light);
}

.g-chip i {
    font-size: 10px;
}

/* The readout: what the Dojo understood, and the next step. */
.readout {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px 14px 18px;
    border-radius: 14px;
}

.readout .what {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 560;
    letter-spacing: -0.02em;
}

.readout .detail {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-dim);
}

.readout .tool {
    margin-left: auto;
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .readout {
        flex-direction: column;
        align-items: flex-start;
    }

    .readout .tool {
        margin-left: 0;
    }
}

.flow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--text-dim);
}

/* Imported turns: one row per turn node */
.ledger-mod {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.mod-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border-soft);
}

.mod-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 560;
    letter-spacing: -0.01em;
}

.ledger {
    height: 452px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.ledger:focus-visible {
    outline-offset: -2px;
}

.lg-row {
    display: grid;
    grid-template-columns: 8px 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--rule);
}

.lg-turn {
    font-size: 12px;
    font-weight: 560;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.lg-turn .label {
    display: block;
    margin-top: 2px;
    font-size: 9px;
}

.lg-what {
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-2);
}

.lg-what .rc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lg-what strong {
    color: var(--text);
    font-weight: 560;
}

/* The player's own note on a node: the app's turn note, glass with paper text. */
.note {
    display: inline-block;
    margin-bottom: 3px;
    padding: 3px 8px;
    border-radius: var(--r-control);
    background: var(--fu-glass);
    color: var(--fu-light);
    font-size: 11px;
}

:root[data-theme="night"] .note {
    box-shadow: inset 0 0 0 1px var(--fu-line);
}

.lg-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lg-right .mv-thumb {
    width: 26px;
    height: 36px;
}

.lg-lore {
    min-width: 44px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

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

    .lg-right .mv-thumb {
        display: none;
    }

    .lg-right {
        grid-column: 3;
    }

    .lg-lore {
        text-align: left;
        min-width: 0;
    }
}

/* ===================================================================
   MULTIVERSE — chassis frame, glass canvas, paper nodes.
   A port of the app's tree (app/css/field-unit.css · Multiverse),
   drawn by js/landing-multiverse.js.
=================================================================== */
.mv-frame {
    padding: 0 8px 8px;
    overflow: hidden;
}

.mv-head {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 52px;
    padding: 0 6px 0 10px;
}

.mv-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 560;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.mv-head .hint {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.08em;
}

.mv-tools {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
}

.mv-tools .tool {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 11px;
}

@media (max-width: 760px) {
    .mv-head .hint {
        display: none;
    }
}

.mv-body {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 8px;
}

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

.mv-stage {
    position: relative;
    min-width: 0;
    align-self: start;
}

.mv-viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-well);
    background-color: var(--fu-glass);
    background-image: radial-gradient(oklch(1 0 0 / 0.045) 1px, transparent 1px);
    background-size: 32px 32px;
}

.mv-canvas {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.mv-canvas svg {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    overflow: visible;
    pointer-events: none;
}

.mv-viewport.is-glide .mv-canvas {
    transition: transform 1.1s cubic-bezier(.45, .05, .25, 1);
}

.mv-viewport.is-draggable {
    cursor: grab;
}

.mv-viewport.is-dragging {
    cursor: grabbing;
}

.mv-viewport.is-dragging .mv-canvas {
    transition: none;
}

#multi-mv {
    height: 620px;
    touch-action: pan-y;
}

#multi-mv:focus-visible {
    outline: 2px solid var(--fu-light);
    outline-offset: -4px;
}

@media (max-width: 640px) {
    #multi-mv {
        height: 460px;
    }
}

/* Edges: #6A655E hairlines; the path to the node you are on is signal. */
.mv-edge {
    fill: none;
    stroke: var(--fu-edge);
    stroke-width: 1.2;
}

.mv-edge.is-live {
    stroke: var(--signal);
    stroke-width: 1.6;
}

/* Node: paper, 10px radius, 230 wide; the owner's deck icon, title,
   subline, the note as glass, then the Played strip (or, in full, a
   label · value grid of the turn's cards); a 4px bar at the foot. */
.mv-node {
    position: absolute;
    width: 230px;
    height: var(--tn-h, 250px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--fu-paper);
    border: 1px solid var(--fu-line-soft);
    border-radius: var(--r-inset);
    box-shadow: var(--shadow-node);
    font-family: var(--font-sans);
    text-align: left;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.mv-node > .deck-icon {
    position: absolute;
    left: 8px;
    top: 10px;
    z-index: 2;
}

.mv-node::after {
    --tn-bar: var(--fu-line-soft);
    content: '';
    position: absolute;
    inset: 0;
    border-radius: calc(var(--r-inset) - 1px);
    background: linear-gradient(var(--tn-bar), var(--tn-bar)) bottom / 100% 4px no-repeat;
    z-index: 3;
    pointer-events: none;
}

.mv-node.is-active {
    border-color: var(--signal);
}

.mv-node.is-active::after {
    --tn-bar: var(--signal);
}

/* Whose turn it is, as in the app: P1 nodes paper, P2 nodes graphite. */
.mv-node.tn-p2 {
    --fu-paper: #2B2925;
    --fu-paper-sunk: #34302A;
    --fu-ink: #F4F0E8;
    --fu-body: #C9C3B8;
    --fu-mute: #9A948A;
    --fu-zero: #6B655C;
    --fu-line: #3E3933;
    --fu-line-soft: #3E3933;
    --fu-row-rule: #3A3631;
}

:root[data-theme="night"] .mv-node.tn-p1 {
    --fu-paper: #34302A;
    --fu-paper-sunk: #2B2723;
    --fu-line: #423D35;
    --fu-line-soft: #423D35;
    --fu-row-rule: #3C3731;
}

:root[data-theme="night"] .mv-node.tn-p2 {
    --fu-paper: #141210;
    --fu-paper-sunk: #1A1815;
    --fu-line: #38332C;
    --fu-line-soft: #38332C;
    --fu-row-rule: #2A2622;
}

:root[data-theme="night"] .mv-node.tn-p2 .mv-note {
    background: var(--fu-glass);
    border-color: var(--fu-line);
}

/* The selected node: signal corner marks on their own layer (the node
   clips its children). */
.mv-node.is-sel {
    z-index: 30;
}

.mv-cursor {
    position: absolute;
    z-index: 40;
    pointer-events: none;
}

.mv-cursor i {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 0 solid var(--signal);
}

.mv-cursor i:nth-child(1) {
    left: 0;
    top: 0;
    border-width: 2px 0 0 2px;
}

.mv-cursor i:nth-child(2) {
    right: 0;
    top: 0;
    border-width: 2px 2px 0 0;
}

.mv-cursor i:nth-child(3) {
    left: 0;
    bottom: 0;
    border-width: 0 0 2px 2px;
}

.mv-cursor i:nth-child(4) {
    right: 0;
    bottom: 0;
    border-width: 0 2px 2px 0;
}

.is-interactive .mv-node {
    cursor: pointer;
}

.is-interactive .mv-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -14px oklch(0 0 0 / 0.9);
    z-index: 20;
}

.mv-nb {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    padding: 8px 9px 6px 24px;
}

.mv-title {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 28px;
    font-size: 12px;
    font-weight: 620;
    letter-spacing: -0.01em;
    color: var(--fu-ink);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.mv-title i {
    color: var(--fu-mute);
    font-size: 10px;
}

.mv-title span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-stats {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: -0.03em;
    color: var(--fu-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* The note: glass raised with a hairline, so it sits on the paper card
   instead of reading as a hole through to the canvas. */
.mv-note {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 7px;
    padding: 6px 8px 7px;
    border: 1px solid var(--fu-glass-line);
    border-radius: var(--r-control);
    background: var(--fu-glass-raised);
    transition: border-color var(--dur) var(--ease);
}

.is-interactive .mv-node:hover .mv-note {
    border-color: var(--fu-glass-2);
}

.mv-note-head,
.side-note-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fu-glass-mute);
}

.mv-note-head i {
    font-size: 9px;
}

.mv-comment {
    flex: 1 1 0;
    min-height: 0;
    padding-right: 4px;
    overflow: hidden;
    overflow-wrap: break-word;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--fu-light);
}

.mv-comment p {
    margin: 0 0 4px;
}

.mv-comment strong {
    color: var(--fu-light);
    font-weight: 620;
}

.mv-comment ul {
    margin: 0 0 4px;
    padding-left: 14px;
    list-style: disc;
}

.mv-comment li {
    margin: 0 0 1px;
}

.mv-ibtn {
    position: absolute;
    top: 7px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fu-paper);
    border: 1px solid var(--fu-line);
    border-radius: 6px;
    color: var(--fu-body);
    font-size: 9px;
    z-index: 3;
}

.mv-ibtn.d {
    right: 7px;
}

.mv-cards {
    margin: 0 9px 6px;
    border-top: 1px solid var(--fu-row-rule);
    flex-shrink: 0;
}

.mv-sec-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 4px 0;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--fu-mute);
}

.mv-sec-n {
    font-size: 10px;
    letter-spacing: 0;
    color: var(--fu-ink);
    font-variant-numeric: tabular-nums;
}

.mv-sec.is-empty .mv-sec-label,
.mv-sec.is-empty .mv-sec-n {
    color: var(--fu-zero);
}

.mv-sec-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 4px 0;
    overflow: hidden;
}

/* Full: one label · value row per section */
.mv-cards.is-full .mv-sec {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    min-height: 22px;
    border-top: 1px solid var(--fu-row-rule);
}

.mv-cards.is-full .mv-sec:first-child {
    border-top: 0;
}

.mv-sec.is-wrap .mv-sec-row {
    flex-wrap: wrap;
}

.mv-sec.is-wrap .mv-thumb {
    width: 24px;
    height: 34px;
}

/* Compact: the Played strip only, centred */
.mv-cards.is-compact .mv-sec-label {
    flex-direction: row;
    justify-content: center;
}

.mv-cards.is-compact .mv-sec-n {
    display: none;
}

.mv-cards.is-compact .mv-sec-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 2px 0 4px;
    max-height: 90px;
}

.mv-cards.is-compact .mv-thumb {
    width: 35px;
    height: 50px;
}

/* Card thumb: the database art over a text face (name + ink strip), which
   shows when the art can't load — the app's .card-fallback. */
.mv-thumb {
    position: relative;
    width: 28px;
    height: 39px;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
    background: var(--fu-paper-sunk);
    box-shadow: 0 0 0 1px var(--fu-line-soft);
}

.mv-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

.mv-cf {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 2px 2px 4px;
    background: var(--fu-paper-sunk);
    text-align: center;
}

.mv-cf::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--cf-ink, transparent);
}

.mv-cf span {
    font-size: 6px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--fu-ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* "Left the hand this turn": greyed, crossed with one hairline. */
.mv-thumb.is-left img,
.mv-thumb.is-left .mv-cf {
    filter: grayscale(1);
    opacity: 0.5;
}

.mv-thumb.is-left::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, transparent calc(50% - .8px), var(--danger) calc(50% - .8px), var(--danger) calc(50% + .8px), transparent calc(50% + .8px));
}

/* Legend on the canvas */
.mv-legend {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 7px 10px;
    border-radius: var(--r-control);
    background: var(--fu-glass-raised);
    border: 1px solid var(--fu-glass-line);
    color: var(--fu-glass-2);
    font-size: 11px;
    pointer-events: none;
}

.mv-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Side panel: the selected node, on the paper frame */
.mv-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 12px 10px 10px;
}

/* Beside the canvas, the panel is the canvas's height and scrolls. */
@media (min-width: 1021px) {
    .mv-side {
        height: 620px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-strong) transparent;
    }
}

.side-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.side-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 18px;
    font-weight: 560;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.side-stats {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
}

.side-here {
    margin-left: 8px;
    color: var(--signal-text);
}

.side-block > .label {
    margin-bottom: 8px;
}

/* Meter: 3px track, a 7px ink marker, figures at the end. */
.meter-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.meter-row + .meter-row {
    margin-top: 8px;
}

.meter-row .who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
}

.meter-row .v {
    text-align: right;
    color: var(--text);
}

.track {
    position: relative;
    height: 3px;
    border-radius: 999px;
    background: var(--border-soft);
}

.track .mk {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--text);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.crumbs button {
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 10.5px;
    cursor: pointer;
}

.crumbs button:hover {
    color: var(--text);
    background: var(--surface-2);
}

/* The node you're looking at is the open tool. */
.crumbs button.is-cur {
    background: var(--fu-glass);
    border-color: var(--fu-glass);
    color: var(--fu-light);
}

.crumbs .more {
    align-self: center;
    color: var(--text-dim);
    font-size: 12px;
}

.side-note {
    padding: 8px 10px 9px;
    border: 1px solid var(--fu-glass-line);
    border-radius: var(--r-control);
    background: var(--fu-glass);
    color: var(--fu-light);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.side-note.is-empty {
    border-style: dashed;
    border-color: var(--fu-edge);
}

.side-note.is-empty .side-note-body {
    color: var(--fu-glass-mute);
}

.side-note-body p {
    margin: 0 0 4px;
}

.side-note-body p:last-child {
    margin-bottom: 0;
}

.side-note-body strong {
    font-weight: 620;
}

.side-note-body ul {
    margin: 0;
    padding-left: 16px;
}

/* "Turn recap" with the "Show in nodes" switch: a setting, so it is ink
   when on, never the signal. */
.side-recap-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.side-switch-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    cursor: pointer;
}

.side-switch-row:hover {
    color: var(--text);
}

.side-switch {
    position: relative;
    width: 26px;
    height: 14px;
    border-radius: 999px;
    background: var(--border-soft);
    transition: background var(--dur) var(--ease);
}

.side-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text);
    transition: left var(--dur) var(--ease);
}

.side-switch.is-on {
    background: var(--text);
}

.side-switch.is-on::after {
    left: 14px;
    background: var(--surface);
}

.side-empty {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-dim);
}

.side-secs {
    border-top: 1px solid var(--rule);
}

.side-sec {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule);
}

.side-sec .mv-sec-n {
    display: block;
    margin-top: 2px;
}

.side-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.side-thumbs .mv-thumb {
    width: 36px;
    height: 50px;
    border-radius: 4px;
}

.side-open {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.side-open p {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-dim);
}

/* ===================================================================
   FEATURES — the spec sheet and the hotkeys
=================================================================== */
.directive {
    padding: 14px 16px;
    border-left: 2px solid var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-2);
}

.directive .label {
    display: block;
    margin-bottom: 4px;
}

.keys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 32px;
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text-2);
}

.keys > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.keys .label {
    margin-right: 4px;
}

/* ===================================================================
   HOW IT WORKS
=================================================================== */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

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

.step .step-n {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.step .step-n::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.step h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 560;
    letter-spacing: -0.03em;
}

.step > p {
    margin: 8px 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
}

/* Step 01: the home screen's "On the table" */
.table-mock {
    padding: 14px;
    border-radius: 14px;
}

.seat {
    display: grid;
    grid-template-columns: 74px 11px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    margin-top: 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-control);
    background: var(--surface-2);
    font-size: 13px;
}

.seat .label {
    font-size: 9px;
}

.seat .cnt {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
}

.deck-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 14px;
}

.deck-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text);
}

.table-mock .go {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.table-mock .go .key {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
}

.table-mock .go small {
    font-size: 11.5px;
    color: var(--text-dim);
}

/* Step 02: a slice of the board in the well */
.board-mock {
    padding: 10px;
    border-radius: var(--r-well);
}

.bm-half {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 8px;
    align-items: center;
    padding: 6px 2px;
}

.bm-who {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--fu-glass-mute);
}

.bm-who b {
    font-weight: 500;
    color: var(--fu-light);
}

.bm-cards {
    display: flex;
    gap: 6px;
}

.bm-card {
    position: relative;
    width: 46px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--fu-glass-raised);
    box-shadow: 0 0 0 1px var(--fu-glass-line);
}

.bm-card img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

.bm-card.is-exerted {
    transform: rotate(90deg) scale(0.86);
    margin: 0 8px;
}

.bm-card .new {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    padding: 1px 4px;
    border-radius: 999px;
    background: var(--signal);
    color: var(--signal-ink);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.06em;
}

.bm-rule {
    height: 1px;
    margin: 4px 0;
    background: var(--signal);
}

.bm-half .lore-box {
    min-width: 0;
    padding: 6px 8px;
}

.bm-half .lore-box .num {
    font-size: 26px;
}

.bm-meter {
    margin-top: 14px;
}

.bm-meter .label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bm-meter .ends {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.bm-meter .ends span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Step 03: a slice of the real tree */
#mini-mv {
    height: 236px;
}

/* ===================================================================
   CTA + FOOTER
=================================================================== */
.cta {
    text-align: center;
}

.cta .display {
    margin: 26px auto 0;
}

.cta .lede {
    margin-left: auto;
    margin-right: auto;
}

.cta .key {
    margin-top: 36px;
}

.cta .foot {
    margin-top: 28px;
}

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

.footer .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 28px;
    padding-bottom: 36px;
}

.footer .brand .name {
    font-weight: 500;
    letter-spacing: 0.1em;
}

.footer .legal {
    max-width: 62ch;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-dim);
}

.footer .theme-pick {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .mv-viewport.is-glide .mv-canvas,
    .mv-node,
    .key,
    .tool {
        transition: none;
    }
}