@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/fredoka-latin-600-normal.b62f2898.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/fredoka-latin-ext-600-normal.d7d22ddf.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/fredoka-latin-700-normal.ee61b48a.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/fredoka-latin-ext-700-normal.e5272989.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-600-normal.45f437de.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-ext-600-normal.a7ba5f4f.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/nunito-latin-800-normal.2363d3ed.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/nunito-latin-ext-800-normal.39f54b55.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-600-italic.7901a2c0.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-ext-600-italic.cf7c951f.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Generated from packages/shared/src/brand.ts and mascots.ts by apps/web/src/lib/tokens.ts. */
:root {
  color-scheme: light dark;
  --paper: #FFFBF2;
  --raised: #FFFFFF;
  --ink: #22243A;
  --soft: #6B6F86;
  --line: #EDE6D6;
  --line-2: #B8B3C6;
  --accent: #FF7A3D;
  --accent-ink: #C2410C;
  --on-accent: #22243A;
  --ok: #1B8F75;
  --warn: #9A6B00;
  --bad: #D7263D;
  --ok-bg: #DDF7EF;
  --warn-bg: #FFF3C4;
  --bad-bg: #FFE4DA;
  --photo: #EFE7D5;
  --water: #DCEBFF;
  --block: #FFF3E0;
  --shadow: rgba(34,36,58,0.08);
  --tint-mint: #DDF7EF;
  --tint-sky: #E3F0FF;
  --tint-lemon: #FFF3C4;
  --tint-blush: #FFE4DA;
  --tint-lilac: #EEE6FF;
  --mint-ink: #1B8F75;
  --sky-ink: #2B6CB0;
  --lemon-ink: #9A6B00;
  --berry: #E84A8A;
  --on-accent-words: #22243A;
  --note: #ffeee0;
  --team-fox-ink: #B3261E;
  --team-fox-fill16: #fddfd5;
  --team-tiger-ink: #9A6B00;
  --team-tiger-fill16: #fff6d5;
  --team-owl-ink: #2B6CB0;
  --team-owl-fill16: #e0e9f4;
  --team-frog-ink: #1B8F75;
  --team-frog-fill16: #def2e6;
  --team-squirrel-ink: #B45309;
  --team-squirrel-fill16: #ffecd6;
  --team-octopus-ink: #6D3FD6;
  --team-octopus-fill16: #ece2f3;
  --team-koala-ink: #4E5A6B;
  --team-koala-fill16: #efeee9;
  --team-bear-ink: #6B4423;
  --team-bear-fill16: #ece1d2;
  --team-penguin-ink: #2F3B52;
  --team-penguin-fill16: #dedcd8;
  --team-flamingo-ink: #C2185B;
  --team-flamingo-fill16: #ffe7e8;
  --team-whale-ink: #0B5F68;
  --team-whale-fill16: #d8e7e1;
  --team-dolphin-ink: #0E6E8C;
  --team-dolphin-fill16: #e5f4f0;
  --team-parrot-ink: #3F7D0B;
  --team-parrot-fill16: #eaf5d4;
  --team-rabbit-ink: #8A4FBF;
  --team-rabbit-fill16: #f9f0f4;
  --team-turtle-ink: #14593F;
  --team-turtle-fill16: #dbe7da;
  --team-hedgehog-ink: #8A5A2B;
  --team-hedgehog-fill16: #f9eedd;
  --team-cat-ink: #8E1F66;
  --team-cat-fill16: #f5dce2;
  --team-dog-ink: #8A6508;
  --team-dog-fill16: #f9edd0;
  --team-monkey-ink: #8E3A1E;
  --team-monkey-fill16: #f6e2d5;
  --light-paper: #FFFBF2;
  --light-raised: #FFFFFF;
  --light-ink: #22243A;
  --light-soft: #6B6F86;
  --light-line: #EDE6D6;
  --light-line-2: #B8B3C6;
  --light-accent: #FF7A3D;
  --light-accent-ink: #C2410C;
  --light-on-accent: #22243A;
  --light-ok: #1B8F75;
  --light-warn: #9A6B00;
  --light-bad: #D7263D;
  --light-ok-bg: #DDF7EF;
  --light-warn-bg: #FFF3C4;
  --light-bad-bg: #FFE4DA;
  --light-photo: #EFE7D5;
  --light-water: #DCEBFF;
  --light-block: #FFF3E0;
  --light-shadow: rgba(34,36,58,0.08);
  --light-tint-mint: #DDF7EF;
  --light-tint-sky: #E3F0FF;
  --light-tint-lemon: #FFF3C4;
  --light-tint-blush: #FFE4DA;
  --light-tint-lilac: #EEE6FF;
  --light-mint-ink: #1B8F75;
  --light-sky-ink: #2B6CB0;
  --light-lemon-ink: #9A6B00;
  --light-berry: #E84A8A;
  --dark-paper: #171A2B;
  --dark-raised: #22263A;
  --dark-ink: #F4F1EA;
  --dark-soft: #A9ACC0;
  --dark-line: #2F3448;
  --dark-line-2: #5B607A;
  --dark-accent: #FF8A55;
  --dark-accent-ink: #FFB08A;
  --dark-on-accent: #22243A;
  --dark-ok: #5CD7B8;
  --dark-warn: #FFD56A;
  --dark-bad: #FF7A8A;
  --dark-ok-bg: #173A33;
  --dark-warn-bg: #3B3317;
  --dark-bad-bg: #3D2228;
  --dark-photo: #2C3146;
  --dark-water: #1F2E44;
  --dark-block: #262B40;
  --dark-shadow: transparent;
  --dark-tint-mint: #173A33;
  --dark-tint-sky: #1D3350;
  --dark-tint-lemon: #3B3317;
  --dark-tint-blush: #3D2228;
  --dark-tint-lilac: #2B2644;
  --dark-mint-ink: #5CD7B8;
  --dark-sky-ink: #8CC2FF;
  --dark-lemon-ink: #FFD56A;
  --dark-berry: #FF7AB0;
  --shadow-card: 0 6px 14px rgb(34 36 58 / 0.07);
  --shadow-phone: 0 24px 48px rgb(34 36 58 / 0.18);
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 0.75rem;
  --space-l: 1rem;
  --space-xl: 1.25rem;
  --space-xxl: 1.5rem;
  --space-h: 2rem;
  --space-hh: 2.5rem;
  --space-hhh: 3rem;
  --radius-square: 4px;
  --radius-tag: 10px;
  --radius-photo: 16px;
  --radius-input: 16px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --target-min: 3rem;
  --target-button: 3.25rem;
  --target-child: 3.75rem;
  --target-shutter: 5.5rem;
  --bunting-1: #FF7A3D;
  --bunting-2: #FFD93D;
  --bunting-3: #3D8BFF;
  --bunting-4: #2EC4A6;
  --bunting-5: #E84A8A;
  --bunting-6: #8A5CF6;
  --team-fox-tint: #F04A3E;
  --team-fox-on: #FFFFFF;
  --team-tiger-tint: #FFD93D;
  --team-tiger-on: #22243A;
  --team-owl-tint: #3D8BFF;
  --team-owl-on: #FFFFFF;
  --team-frog-tint: #2EC4A6;
  --team-frog-on: #22243A;
  --team-squirrel-tint: #FF9F43;
  --team-squirrel-on: #22243A;
  --team-octopus-tint: #8A5CF6;
  --team-octopus-on: #FFFFFF;
  --team-koala-tint: #9AA7B8;
  --team-koala-on: #22243A;
  --team-bear-tint: #8B5A2B;
  --team-bear-on: #FFFFFF;
  --team-penguin-tint: #2F3B52;
  --team-penguin-on: #FFFFFF;
  --team-flamingo-tint: #FF7FB2;
  --team-flamingo-on: #22243A;
  --team-whale-tint: #0E7C86;
  --team-whale-on: #FFFFFF;
  --team-dolphin-tint: #5BD1E8;
  --team-dolphin-on: #22243A;
  --team-parrot-tint: #7BD335;
  --team-parrot-on: #22243A;
  --team-rabbit-tint: #D9B8FF;
  --team-rabbit-on: #22243A;
  --team-turtle-tint: #1E7F5C;
  --team-turtle-on: #FFFFFF;
  --team-hedgehog-tint: #D7A86E;
  --team-hedgehog-on: #22243A;
  --team-cat-tint: #BE3A8C;
  --team-cat-on: #FFFFFF;
  --team-dog-tint: #D9A520;
  --team-dog-on: #22243A;
  --team-monkey-tint: #C65D3B;
  --team-monkey-on: #FFFFFF;
  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-text: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171A2B;
    --raised: #22263A;
    --ink: #F4F1EA;
    --soft: #A9ACC0;
    --line: #2F3448;
    --line-2: #5B607A;
    --accent: #FF8A55;
    --accent-ink: #FFB08A;
    --on-accent: #22243A;
    --ok: #5CD7B8;
    --warn: #FFD56A;
    --bad: #FF7A8A;
    --ok-bg: #173A33;
    --warn-bg: #3B3317;
    --bad-bg: #3D2228;
    --photo: #2C3146;
    --water: #1F2E44;
    --block: #262B40;
    --shadow: transparent;
    --tint-mint: #173A33;
    --tint-sky: #1D3350;
    --tint-lemon: #3B3317;
    --tint-blush: #3D2228;
    --tint-lilac: #2B2644;
    --mint-ink: #5CD7B8;
    --sky-ink: #8CC2FF;
    --lemon-ink: #FFD56A;
    --berry: #FF7AB0;
    --on-accent-words: #22243A;
    --note: #2e252f;
    --team-fox-ink: #FF8A80;
    --team-fox-fill16: #3a222e;
    --team-tiger-ink: #FFE275;
    --team-tiger-fill16: #3c392e;
    --team-owl-ink: #8CC2FF;
    --team-owl-fill16: #1d2c4d;
    --team-frog-ink: #5CD7B8;
    --team-frog-fill16: #1b353f;
    --team-squirrel-ink: #FFB870;
    --team-squirrel-fill16: #3c2f2f;
    --team-octopus-ink: #C4ADFF;
    --team-octopus-fill16: #29254b;
    --team-koala-ink: #C3CDDA;
    --team-koala-fill16: #2c3142;
    --team-bear-ink: #D9A078;
    --team-bear-fill16: #2a242b;
    --team-penguin-ink: #B8C4DD;
    --team-penguin-fill16: #1b1f31;
    --team-flamingo-ink: #FFB0CF;
    --team-flamingo-fill16: #3c2a41;
    --team-whale-ink: #6FC9D3;
    --team-whale-fill16: #162a3a;
    --team-dolphin-ink: #9EE3F2;
    --team-dolphin-fill16: #223749;
    --team-parrot-ink: #A8E86A;
    --team-parrot-fill16: #27382d;
    --team-rabbit-ink: #E9D7FF;
    --team-rabbit-fill16: #36334d;
    --team-turtle-ink: #6FC9A6;
    --team-turtle-fill16: #182a33;
    --team-hedgehog-ink: #F0CBA0;
    --team-hedgehog-fill16: #363136;
    --team-cat-ink: #F08AD0;
    --team-cat-fill16: #321f3b;
    --team-dog-ink: #F2C94C;
    --team-dog-fill16: #363029;
    --team-monkey-ink: #F0A086;
    --team-monkey-fill16: #33252e;
  }
}
.t-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.0167em; }
.t-score { font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; line-height: 1.0714; letter-spacing: -0.0268em; }
.t-code { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1.1; letter-spacing: 0.15em; }
.t-h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.0167em; }
.t-h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2727; }
.t-navTitle { font-family: var(--font-display); font-weight: 600; font-size: 1.3125rem; line-height: 1.2381; }
.t-taskNumber { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.1818; }
.t-prompt { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2917; }
.t-choice { font-family: var(--font-text); font-weight: 600; font-size: 1.1875rem; line-height: 1.3684; }
.t-body { font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; line-height: 1.4118; }
.t-button { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3333; }
.t-small { font-family: var(--font-text); font-weight: 600; font-size: 0.9375rem; line-height: 1.3333; }
.t-smallBold { font-family: var(--font-text); font-weight: 800; font-size: 0.9375rem; line-height: 1.3333; }
.t-cap { font-family: var(--font-text); font-weight: 600; font-size: 0.8125rem; line-height: 1.3846; }
.t-capBold { font-family: var(--font-text); font-weight: 800; font-size: 0.8125rem; line-height: 1.3846; }
.t-spec { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3333; }
.t-stamp { font-family: var(--font-text); font-weight: 800; font-size: 0.75rem; line-height: 1.0833; letter-spacing: 0.08em; text-transform: uppercase; }
.t-tab { font-family: var(--font-text); font-weight: 800; font-size: 0.75rem; line-height: 1.3333; }
.team-fox { --tint: var(--team-fox-tint); --on: var(--team-fox-on); --tink: var(--team-fox-ink); --fill16: var(--team-fox-fill16); }
.team-tiger { --tint: var(--team-tiger-tint); --on: var(--team-tiger-on); --tink: var(--team-tiger-ink); --fill16: var(--team-tiger-fill16); }
.team-owl { --tint: var(--team-owl-tint); --on: var(--team-owl-on); --tink: var(--team-owl-ink); --fill16: var(--team-owl-fill16); }
.team-frog { --tint: var(--team-frog-tint); --on: var(--team-frog-on); --tink: var(--team-frog-ink); --fill16: var(--team-frog-fill16); }
.team-squirrel { --tint: var(--team-squirrel-tint); --on: var(--team-squirrel-on); --tink: var(--team-squirrel-ink); --fill16: var(--team-squirrel-fill16); }
.team-octopus { --tint: var(--team-octopus-tint); --on: var(--team-octopus-on); --tink: var(--team-octopus-ink); --fill16: var(--team-octopus-fill16); }
.team-koala { --tint: var(--team-koala-tint); --on: var(--team-koala-on); --tink: var(--team-koala-ink); --fill16: var(--team-koala-fill16); }
.team-bear { --tint: var(--team-bear-tint); --on: var(--team-bear-on); --tink: var(--team-bear-ink); --fill16: var(--team-bear-fill16); }
.team-penguin { --tint: var(--team-penguin-tint); --on: var(--team-penguin-on); --tink: var(--team-penguin-ink); --fill16: var(--team-penguin-fill16); }
.team-flamingo { --tint: var(--team-flamingo-tint); --on: var(--team-flamingo-on); --tink: var(--team-flamingo-ink); --fill16: var(--team-flamingo-fill16); }
.team-whale { --tint: var(--team-whale-tint); --on: var(--team-whale-on); --tink: var(--team-whale-ink); --fill16: var(--team-whale-fill16); }
.team-dolphin { --tint: var(--team-dolphin-tint); --on: var(--team-dolphin-on); --tink: var(--team-dolphin-ink); --fill16: var(--team-dolphin-fill16); }
.team-parrot { --tint: var(--team-parrot-tint); --on: var(--team-parrot-on); --tink: var(--team-parrot-ink); --fill16: var(--team-parrot-fill16); }
.team-rabbit { --tint: var(--team-rabbit-tint); --on: var(--team-rabbit-on); --tink: var(--team-rabbit-ink); --fill16: var(--team-rabbit-fill16); }
.team-turtle { --tint: var(--team-turtle-tint); --on: var(--team-turtle-on); --tink: var(--team-turtle-ink); --fill16: var(--team-turtle-fill16); }
.team-hedgehog { --tint: var(--team-hedgehog-tint); --on: var(--team-hedgehog-on); --tink: var(--team-hedgehog-ink); --fill16: var(--team-hedgehog-fill16); }
.team-cat { --tint: var(--team-cat-tint); --on: var(--team-cat-on); --tink: var(--team-cat-ink); --fill16: var(--team-cat-fill16); }
.team-dog { --tint: var(--team-dog-tint); --on: var(--team-dog-on); --tink: var(--team-dog-ink); --fill16: var(--team-dog-fill16); }
.team-monkey { --tint: var(--team-monkey-tint); --on: var(--team-monkey-on); --tink: var(--team-monkey-ink); --fill16: var(--team-monkey-fill16); }
/*
 * farandole.app. Colours, type, spacing and radii come from the generated tokens (brand.ts);
 * this file only arranges them. Rules: docs/17-brand.md. Paper ground, ink words, tinted fills
 * instead of outlines, one tangerine action per view, one bunting per screen.
 * Surfaces that keep one scheme on purpose use the fixed copies (`--light-ink`, `--dark-paper`).
 * The only colour literals are the app's own whites inside the phone pictures (toggle knob, QR box).
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.41;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
svg { flex-shrink: 0; }
a { color: var(--accent-ink); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.14em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
/* Where the ground does not follow the theme, the ring takes the ink that reads on that ground. */
.beta-band :focus-visible { outline-color: var(--on-accent-words); }
.btn:focus-visible, .chip:focus-visible { border-radius: var(--radius-pill); }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--radius-pill); font-family: var(--font-display); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 20px; }
.measure { max-width: 68ch; }
.soft { color: var(--soft); }
.small { font-size: 0.9375rem; line-height: 1.33; }
.cap { font-size: 0.8125rem; line-height: 1.38; }
.stack { display: flex; flex-direction: column; gap: var(--space-l); }
.stack-s { display: flex; flex-direction: column; gap: var(--space-s); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.ico { display: inline-block; vertical-align: -0.2em; }

/* Section rhythm: 48 px apart on phones, 96 on wide screens. */
.section { padding-block: var(--space-hhh); }
.section + .section { padding-top: 0; }
@media (min-width: 960px) { .section { padding-block: 96px; } }
.section-head { display: flex; flex-direction: column; gap: var(--space-m); margin-bottom: var(--space-h); max-width: 46rem; }
.h-section { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.0167em; }
@media (min-width: 960px) { .h-section { font-size: 2.25rem; } }
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.33; color: var(--soft); }
.lead { font-size: 1.125rem; line-height: 1.5; }
@media (min-width: 960px) { .lead { font-size: 1.25rem; } }

/* Header and footer */
.site-header { padding-block: 14px; }
.site-header .bar { display: flex; align-items: center; gap: var(--space-l); min-height: 52px; }
.lockup { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); color: var(--ink); text-decoration: none; border-radius: var(--radius-tag); }
.lockup svg { width: 40px; height: 40px; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.5625rem; line-height: 1.2; letter-spacing: -0.0167em; color: var(--ink); }
@media (min-width: 760px) {
  .lockup { gap: 10px; }
  .lockup svg { width: 48px; height: 48px; }
  .wordmark { font-size: 1.875rem; }
}
.nav { display: none; margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 14px; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.nav a:hover { background: var(--block); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.3em; }
.site-header .btn { margin-left: auto; }
@media (min-width: 900px) {
  .nav { display: block; }
  .site-header .btn { margin-left: 0; }
}
.header-link { margin-left: auto; font-family: var(--font-display); font-weight: 600; min-height: var(--target-min); display: inline-flex; align-items: center; }

.site-footer { padding-block: var(--space-hhh); background: var(--block); }
.site-footer .wrap { display: grid; gap: var(--space-xxl); }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer a { display: inline-flex; min-height: var(--target-min); align-items: center; }
@media (min-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr auto; align-items: start; } }

/* Buttons: filled pills, Fredoka, one tangerine per view. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--target-button); padding: 12px 24px; border: 0; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.33;
  text-decoration: none; text-align: center; cursor: pointer; color: var(--ink); background: transparent;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}
.btn:hover { opacity: 0.95; text-decoration: none; }
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn-primary { background: var(--accent); color: var(--on-accent-words); box-shadow: 0 8px 12px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn-mint { background: var(--tint-mint); color: var(--ink); }
/* The white button on the tangerine band, as on the app's Start card: white and ink in both themes. */
.btn-white { background: var(--light-raised); color: var(--light-ink); }
.btn-sm { min-height: var(--target-min); padding: 8px 18px; font-size: 1rem; }
.btn .ico { width: 22px; height: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; }
@media (max-width: 479px) { .actions-stack > .btn { width: 100%; } }
.copy-btn { font-family: var(--font-display); }

/* Chips and tags */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--block); color: var(--ink); font-family: var(--font-text); font-weight: 800; font-size: 0.875rem; line-height: 1.29; }
.chip-mint { background: var(--tint-mint); }
.chip-sky { background: var(--tint-sky); }
.chip-lemon { background: var(--tint-lemon); }
.chip-blush { background: var(--tint-blush); }
.chip .ico { width: 18px; height: 18px; }

/* Cards and tints */
.card { background: var(--raised); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-card); }
.card-block { background: var(--block); border-radius: var(--radius-card); padding: 20px; }
.card-dashed { border: 1.5px dashed var(--line-2); border-radius: var(--radius-card); padding: 20px; }
.tint-mint { background: var(--tint-mint); }
.tint-sky { background: var(--tint-sky); }
.tint-lemon { background: var(--tint-lemon); }
.tint-blush { background: var(--tint-blush); }
.tint-lilac { background: var(--tint-lilac); }
/* On a tint, `soft` falls under 4.5:1 in light mode (docs/17 section 4): hints and eyebrows there are ink. */
:is(.tint-mint, .tint-sky, .tint-lemon, .tint-blush, .tint-lilac) :is(.soft, .eyebrow) { color: var(--ink); }
@media (prefers-color-scheme: dark) { .card { box-shadow: none; } }
.h-card { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.27; }
.icon-disc { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--raised); flex-shrink: 0; }

/* Hero */
.hero { padding-top: var(--space-l); padding-bottom: var(--space-hhh); }
.hero-grid { display: grid; gap: var(--space-hh); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: var(--space-l); align-items: flex-start; }
.hero h1 { font-weight: 700; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; }
.hero .actions { width: 100%; }
@media (min-width: 900px) {
  .hero { padding-top: var(--space-hh); padding-bottom: 96px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-hhh); }
  .hero .actions { width: auto; }
}
.hero-visual { display: flex; flex-direction: column; align-items: center; }
.bunting { width: 100%; max-width: 350px; margin-inline: auto; color: var(--ink); }
.bunting svg { display: block; width: 100%; height: 52px; }
.hero-visual .bunting { margin-bottom: -6px; position: relative; z-index: 1; }
.sway svg { transform-origin: 50% 0; }
.js .sway.go svg { animation: sway 2.6s cubic-bezier(0.37, 0, 0.63, 1) 2 alternate; }
@keyframes sway { from { transform: rotate(0deg); } 50% { transform: rotate(1deg); } to { transform: rotate(-1deg); } }

/* The day: four tinted cards on a bead trail. */
.day { list-style: none; position: relative; display: flex; flex-direction: column; gap: var(--space-xxl); }
.day::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 3px; border-radius: 2px; background: var(--ink); }
.day-step { position: relative; padding-left: 60px; }
.bead { position: absolute; left: 0; top: 4px; width: 45px; height: 45px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; }
.step-card { border-radius: var(--radius-card); padding: 24px 20px; display: grid; gap: var(--space-xxl); }
.step-copy { display: flex; flex-direction: column; gap: var(--space-m); max-width: 34rem; }
.step-copy h3 { font-weight: 700; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.0167em; }
.callout { display: flex; gap: 10px; align-items: flex-start; background: var(--raised); border-radius: var(--radius-card); padding: 12px 16px; }
.callout .ico { margin-top: 2px; }
.visuals { display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: flex-start; justify-content: center; }
@media (min-width: 1100px) {
  .step-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); padding: 32px; align-items: start; }
  .visuals { justify-content: flex-end; }
}
@media (max-width: 559px) {
  .day::before { left: 15px; }
  .day-step { padding-left: 0; }
  .bead { position: static; width: 32px; height: 32px; font-size: 1.0625rem; margin-bottom: 10px; }
  .day::before { display: none; }
  .step-card { padding: 20px 16px; }
}

/* Privacy */
.split { display: grid; gap: var(--space-hh); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-hhh); } }
.points { list-style: none; display: flex; flex-direction: column; gap: var(--space-l); }
.points li { display: flex; gap: 14px; align-items: flex-start; }
.points .ico { color: var(--accent-ink); width: 26px; height: 26px; margin-top: 1px; }
.figure { display: flex; flex-direction: column; gap: var(--space-m); align-items: center; }
.figure figcaption { text-align: center; max-width: 30rem; }
.figure > .two-phones { align-self: stretch; }

/* Organisers teaser and other split blocks */
.teaser { border-radius: var(--radius-card); padding: 28px 20px; }
@media (min-width: 960px) { .teaser { padding: 48px; } }

/* Beta band: mirrors the app's Start card. */
/* Radius 28, like the Start card (docs/17 section 6, a value outside the scale on purpose). */
.beta-band { position: relative; background: var(--accent); color: var(--on-accent-words); border-radius: 28px; padding: 32px 20px; box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 28%, transparent); }
.beta-band .inner { display: flex; flex-direction: column; gap: var(--space-l); max-width: 40rem; margin-inline: auto; text-align: center; align-items: center; }
.beta-band h2 { font-weight: 700; font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); line-height: 1.12; letter-spacing: -0.0167em; }
.beta-band .actions { justify-content: center; }
@media (min-width: 960px) { .beta-band { padding: 48px; } }
/* The flags hang clear of the band: the first one is tangerine and would vanish into it. */
#beta .bunting { margin-bottom: 2px; }

/* Questions */
.faq { display: flex; flex-direction: column; gap: var(--space-m); max-width: 50rem; }
.faq details { background: var(--raised); border-radius: var(--radius-card); }
@media (prefers-color-scheme: light) { .faq details { box-shadow: var(--shadow-card); } }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--target-child); padding: 14px 20px; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; border-radius: var(--radius-card); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform 0.2s ease-out; color: var(--soft); }
.faq details[open] summary .ico { transform: rotate(90deg); }
.faq details > div { padding: 0 20px 18px; }

/* Organisers page */
.minute { display: grid; gap: var(--space-l); }
@media (min-width: 760px) { .minute { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.minute .tile { border-radius: var(--radius-card); padding: 24px 20px; display: flex; flex-direction: column; gap: var(--space-m); }
.minute .ico { width: 26px; height: 26px; }
.two-phones { display: flex; flex-wrap: wrap; gap: var(--space-xl); justify-content: center; align-items: flex-start; }

.families { position: relative; }
.families ol { list-style: none; display: grid; gap: var(--space-l); }
.families li { display: flex; flex-direction: column; gap: var(--space-m); }
.families .bead { position: static; width: 40px; height: 40px; font-size: 1.1875rem; }
.families .step-text { display: flex; flex-direction: column; gap: 6px; }
.families h3 { font-weight: 600; font-size: 1.375rem; line-height: 1.27; }
.snip { border-radius: var(--radius-card); background: var(--block); padding: 14px; display: flex; justify-content: center; align-items: center; min-height: 170px; overflow: hidden; }
.families-track { position: relative; }
.families-trail { display: none; }
@media (min-width: 1100px) {
  .families ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .families-trail { display: block; position: absolute; left: 20px; right: calc((100% - 64px) / 5 - 20px); top: 19px; height: 3px; background: var(--ink); border-radius: 2px; }
  .families li { position: relative; }
  .families-hint { display: none; }
}
@media (max-width: 1099px) {
  .families .scroller { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; padding-bottom: 8px; }
  .families ol { grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); }
  .families li { scroll-snap-align: start; }
}

.office { list-style: none; display: grid; gap: var(--space-l); }
.office li { display: flex; flex-direction: column; gap: 6px; }
.office h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.counts { display: grid; gap: var(--space-l); }
@media (min-width: 760px) { .counts { grid-template-columns: 1fr 1fr; } }
.counts .tile { border-radius: var(--radius-card); padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.counts .ico { width: 26px; height: 26px; }
.pilot { list-style: none; display: flex; flex-direction: column; gap: var(--space-l); position: relative; }
.pilot::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 3px; background: var(--ink); border-radius: 2px; }
.pilot li { position: relative; padding-left: 44px; }
.pilot li::before { content: ""; position: absolute; left: 4px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.not-ready { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.not-ready li { display: flex; gap: 10px; align-items: flex-start; }
.not-ready li::before { content: ""; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; border: 2px solid var(--soft); flex-shrink: 0; }

/* Join and poster links */
.link-page { max-width: 36rem; margin-inline: auto; padding-bottom: var(--space-hhh); display: flex; flex-direction: column; gap: var(--space-l); }
.link-page h1 { font-weight: 700; font-size: 2rem; line-height: 1.15; letter-spacing: -0.0167em; }
.code-card { border-radius: var(--radius-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
/* The row is as wide as the card and the tiles shrink to fit it, so a 12-character code fits at 320 px. */
.code-tiles { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; margin: 0; align-self: stretch; }
.code-tiles span { flex: 0 1 3.25rem; min-width: 0; display: inline-flex; align-items: center; justify-content: center; height: clamp(3rem, 14vw, 4rem); border-radius: var(--radius-tag); background: var(--raised); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1; color: var(--ink); }
.code-tiles.long { gap: 3px; }
.code-tiles.long span { flex-basis: 2.5rem; height: clamp(2.4rem, 11vw, 3.4rem); font-size: clamp(1rem, 5.4vw, 2rem); }
.desktop-qr { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .desktop-qr { display: flex; gap: 24px; align-items: center; }
  .desktop-qr .qr { width: 168px; height: 168px; border-radius: var(--radius-photo); flex-shrink: 0; }
}
.link-foot { display: flex; flex-direction: column; gap: 10px; }
.link-foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.link-foot a { min-height: var(--target-min); display: inline-flex; align-items: center; }

/* How it works: four moments, each a list of steps; text and phone side by side on wide screens. */
.hiw-hero .hero-copy { max-width: 46rem; }
.hiw-jump ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hiw-jump a { min-height: var(--target-min); padding: 6px 16px 6px 6px; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.hiw-jump .n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 700; }
.hiw-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: var(--space-hh); max-width: 46rem; }
.hiw-head .bead { position: static; flex-shrink: 0; }
.hiw-eyebrow { display: block; font-weight: 600; font-size: 1.125rem; line-height: 1.33; color: var(--soft); margin-bottom: 4px; letter-spacing: 0; }
.hiw-steps { list-style: none; display: flex; flex-direction: column; gap: var(--space-hhh); }
.hiw-step { display: grid; gap: var(--space-xl); align-items: center; }
.hiw-copy { display: flex; flex-direction: column; gap: var(--space-m); max-width: 34rem; }
.hiw-copy h3 { font-weight: 700; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
.hiw-shot { border-radius: var(--radius-card); padding: 28px 12px; display: flex; justify-content: center; align-items: flex-start; }
.hiw-shot .phone { --z: 0.72; }
.hiw-shot .frag { --z: 0.8; width: calc(374px * var(--z)); }
.hiw-shot .frag .inner { width: 374px; padding: 12px; background: var(--paper); border-radius: var(--radius-card); }
@media (max-width: 419px) { .hiw-shot .phone { --z: 0.66; } .hiw-shot .frag { --z: 0.7; } }
@media (max-width: 359px) { .hiw-shot { padding: 20px 8px; } .hiw-shot .phone { --z: 0.6; } .hiw-shot .frag { --z: 0.62; } }
@media (max-width: 559px) { .hiw-head .bead { width: 32px; height: 32px; font-size: 1.0625rem; margin-top: 4px; } }
@media (min-width: 900px) {
  .hiw-step.has-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-hhh); }
  .hiw-step.flip .hiw-shot { order: -1; }
  .hiw-step.flip .hiw-copy { justify-self: start; }
  .hiw-shot { padding: 40px 24px; }
}
.hiw-card { padding: 28px 24px; }
@media (min-width: 960px) { .hiw-card { padding: 48px; } }
/* A real screenshot in the phone frame: the frame takes its proportions (--h, set per picture). */
.phone.shot .screen img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Contact form */
.contact-page { max-width: 40rem; margin-inline: auto; padding-bottom: var(--space-hhh); display: flex; flex-direction: column; gap: var(--space-l); }
.contact-page h1 { font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.12; letter-spacing: -0.0167em; }
.contact-page > .bunting { margin-inline: 0; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-xxl); margin-top: var(--space-s); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
fieldset.field { border: 0; margin: 0; padding: 0; position: relative; }
.label { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; padding: 0; }
.label .soft { font-family: var(--font-text); font-weight: 600; font-size: 0.9375rem; }
.hint { font-size: 0.9375rem; line-height: 1.33; color: var(--soft); }
.input { width: 100%; min-height: var(--target-button); padding: 12px 16px; border: 2px solid var(--line); border-radius: var(--radius-input); background: var(--raised); color: var(--ink); font: inherit; font-weight: 600; }
textarea.input { min-height: 11rem; resize: vertical; line-height: 1.41; }
.input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-input); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.field-error { color: var(--bad); font-weight: 800; font-size: 0.9375rem; line-height: 1.33; }
/* Topic pills: real radio buttons, drawn as the app's filter pills. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pill-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pill { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 8px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); font-weight: 800; font-size: 0.9375rem; line-height: 1.33; cursor: pointer; user-select: none; }
.pill:hover { background: var(--block); }
.pill-input:checked + .pill { background: var(--ink); color: var(--paper); }
.pill-input:focus-visible + .pill { outline: 3px solid var(--ink); outline-offset: 2px; }
/* A topic's hint shows once that topic is picked; browsers without :has() show them all. */
.topic-hint { display: none; margin-top: 6px; padding: 10px 14px; border-radius: var(--radius-photo); background: var(--block); color: var(--ink); }
.topics:has(#topic-beta:checked) .hint-beta, .topics:has(#topic-problem:checked) .hint-problem, .topics:has(#topic-partnership:checked) .hint-partnership { display: block; }
@supports not selector(:has(*)) { .topic-hint { display: block; } }
/* The field robots fill in and people never see. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile's widget is at least 300 px wide: on the narrowest phones it borrows a little of the side margin. */
.ts-slot { min-height: 65px; margin-inline: min(0px, calc((100% - 300px) / 2)); }
.form-alert { border-radius: var(--radius-card); padding: 16px 20px; background: var(--bad-bg); display: flex; flex-direction: column; gap: 6px; }
.form-alert ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.form-alert a { color: var(--ink); }
.form-alert:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-card); }
.contact-off { align-items: flex-start; }
.footer-note { max-width: 44rem; }

/* 404 */
.lost { display: grid; gap: var(--space-hh); align-items: center; padding-block: var(--space-hh) var(--space-hhh); }
@media (min-width: 900px) { .lost { grid-template-columns: 1fr 1fr; } }
.map-tile { position: relative; width: 100%; max-width: 350px; margin-inline: auto; color: var(--ink); }
.map-tile .pin { position: absolute; left: 54%; top: 34%; }

/* Privacy policy */
.policy { display: flex; flex-direction: column; gap: var(--space-l); padding-bottom: var(--space-hhh); }
.policy h1 { font-weight: 700; font-size: clamp(2.25rem, 1.5rem + 3vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.policy h2 { font-weight: 600; font-size: 1.5rem; line-height: 1.3; margin-top: var(--space-xl); }
.policy ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.policy li::marker { color: var(--soft); }
.notice { border-radius: var(--radius-card); padding: 14px 18px; background: var(--note); display: flex; gap: 10px; align-items: flex-start; }

@media (min-width: 760px) { .brand-grid.two { grid-template-columns: 1fr 1fr; } .brand-grid.three { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-color-scheme: light) { .swatch { box-shadow: var(--shadow-card); } }
code { font-family: var(--font-text); font-weight: 800; }
@media (min-width: 760px) { .signature { grid-template-columns: repeat(2, 1fr); } }
.words { width: 100%; border-collapse: collapse; }
.words th, .words td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.words th { font-family: var(--font-text); font-weight: 800; }

/* ===== Phone pictures: the app's screens at app scale, zoomed to fit. ===== */
.phone { --z: 0.85; --h: 844px; width: calc(390px * var(--z) + 18px); padding: 9px; border-radius: calc(54px * var(--z) + 9px); background: var(--light-ink); box-shadow: var(--shadow-phone); flex-shrink: 0; }
.phone.crop { --h: 600px; }
/* The largest iPhone, for screens that need the room. */
.phone.tall { --h: 932px; }
.phone .screen { position: relative; width: calc(390px * var(--z)); height: calc(var(--h) * var(--z)); border-radius: calc(54px * var(--z)); overflow: hidden; background: var(--paper); }
.phone .inner { width: 390px; height: var(--h); zoom: var(--z); position: relative; display: flex; flex-direction: column; }
.phone.crop .screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, transparent, var(--paper)); pointer-events: none; }
.frag { --z: 0.85; width: calc(350px * var(--z)); flex-shrink: 0; }
.frag .inner { width: 350px; zoom: var(--z); }
/* A fragment on a tinted card sits on the app's own ground, as on the phone: never straight on the tint. */
.visuals .frag, .figure .frag { width: calc(374px * var(--z)); }
.visuals .frag .inner, .figure .frag .inner { width: 374px; padding: 12px; background: var(--paper); border-radius: var(--radius-card); }
.visuals .phone, .visuals .frag, .two-phones .phone, .figure .frag { --z: 0.72; }
@media (prefers-color-scheme: dark) { .phone { background: var(--line-2); box-shadow: none; } }
@media (max-width: 419px) { .phone, .frag, .visuals .phone, .visuals .frag, .two-phones .phone, .figure .frag { --z: 0.76; } }
@media (max-width: 359px) { .phone, .frag, .visuals .phone, .visuals .frag, .two-phones .phone, .figure .frag { --z: 0.66; } .figure .frag { --z: 0.62; } .visuals .phone, .visuals .frag { --z: 0.6; } }
.snip .frag { --z: 0.62; }
@media (max-width: 359px) { .snip .frag { --z: 0.56; } }

/* Inside the pictures: React Native layout, in points. */
.m { font-family: var(--font-text); font-weight: 600; font-size: 17px; line-height: 24px; color: var(--ink); text-align: left; }
.m * { box-sizing: border-box; }
.m-status { height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0 40px; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.m-status .sys { display: flex; gap: 6px; align-items: center; }
.m-teamband { background: var(--tint); color: var(--on); }
.m-nav { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.m-nav.plain { padding: 0 20px; }
.m-nav .title { flex: 1; min-width: 0; padding: 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-nav .iconbtn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.m-nav .right { margin-right: 8px; }
.m-body { flex: 1; min-height: 0; padding: 4px 20px 16px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.m-body > *, .m-col > *, .m-foot, .m-band { flex-shrink: 0; }
.m-foot { padding: 10px 20px 34px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.m-tabbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; padding: 6px 8px 30px; border-top: 1px solid var(--line); background: var(--raised); }
.m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; color: var(--soft); font-family: var(--font-text); font-weight: 800; font-size: 12px; line-height: 16px; }
.m-tab.on { color: var(--tink); }
.m-h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 36px; letter-spacing: -0.5px; }
.m-h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 28px; }
.m-prompt { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 31px; }
.m-spec { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 24px; }
.m-small { font-size: 15px; line-height: 20px; }
.m-smallb { font-size: 15px; line-height: 20px; font-weight: 800; }
.m-cap { font-size: 13px; line-height: 18px; }
.m-capb { font-size: 13px; line-height: 18px; font-weight: 800; }
.m-code { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 44px; letter-spacing: 6px; }
.m-soft { color: var(--soft); }
.m-ok { color: var(--ok); }
.m-warn { color: var(--warn); }
.m-row { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.m-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex-shrink: 1; }
.m-grow { flex: 1; min-width: 0; }
.m-card { background: var(--raised); border-radius: 24px; padding: 16px; box-shadow: var(--shadow-card); }
.m-card.strong { background: var(--block); box-shadow: none; }
@media (prefers-color-scheme: dark) { .m-card { box-shadow: none; } }
.m-btn { min-height: 52px; padding: 12px 20px; border-radius: 999px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 24px; text-align: center; }
.m-btn.lg { min-height: 60px; font-size: 21px; }
.m-btn.sm { min-height: 44px; padding: 8px 16px; font-size: 16px; line-height: 20px; }
.m-btn.auto { align-self: flex-start; }
.m-btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 12px color-mix(in srgb, var(--accent) 32%, transparent); }
.m-btn.team { background: var(--tint); color: var(--on); box-shadow: 0 8px 12px color-mix(in srgb, var(--tint) 32%, transparent); }
.m-btn.secondary { background: var(--tint-mint); color: var(--mint-ink); }
.m-btn.ghost { color: var(--accent-ink); }
.m-btn.danger { background: var(--bad-bg); color: var(--bad); }
.m-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--block); background: var(--block); color: var(--ink); font-family: var(--font-text); font-weight: 800; font-size: 14px; line-height: 18px; white-space: nowrap; }
.m-chip.small { min-height: 28px; font-size: 13px; }
.m-chip.wait { background: var(--warn-bg); border-color: var(--warn-bg); color: var(--warn); }
.m-chip.ok { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok); }
.m-chip.send { background: var(--tint-sky); border-color: var(--tint-sky); color: var(--sky-ink); }
.m-chip.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-taskrow { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: var(--raised); border: 1px solid var(--line); border-radius: 24px; min-height: 68px; }
.m-taskrow .n { width: 28px; flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 26px; color: var(--tink, var(--soft)); }
.m-taskrow > .m-chip { align-self: center; }
.m-taskrow .p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-next { position: relative; overflow: hidden; padding: 20px 18px; border-radius: 24px; background: var(--fill16); display: flex; flex-direction: column; gap: 16px; }
.m-next .mark { position: absolute; right: -18px; top: -14px; opacity: 0.22; }
.m-next .spec { color: var(--tink); }
.m-pill { background: var(--ink); color: var(--paper); border-radius: 999px; min-height: 40px; padding: 0 14px; display: flex; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 26px; }
.m-avatar { width: 52px; height: 52px; border-radius: 26px; background: var(--paper); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m-band { padding: 4px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.m-band .trail svg { display: block; width: 100%; height: auto; }
.m-photo { position: relative; border-radius: 16px; border: 4px solid var(--tint); background: var(--photo); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; }
.m-photo > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-photo .tag { position: relative; align-self: flex-start; background: var(--raised); border-radius: 10px; padding: 2px 6px; font-weight: 800; font-size: 13px; line-height: 18px; }
.m-photo .hint { position: absolute; left: 8px; top: 8px; }
.m-toggle { width: 52px; height: 32px; border-radius: 999px; background: var(--line-2); position: relative; flex-shrink: 0; }
/* White knob and white QR box: the app's own literals (ui.tsx Toggle, lobby.tsx), the same in both themes. */
.m-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: #FFFFFF; }
.m-toggle.on { background: var(--accent); }
.m-toggle.on::after { left: 23px; }
.m-field { display: flex; flex-direction: column; gap: 6px; }
.m-input { border: 2px solid var(--line); border-radius: 16px; background: var(--raised); min-height: 52px; padding: 12px 16px; display: flex; align-items: center; }
.m-input.code { min-height: 60px; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: 6px; }
.m-input.multi { align-items: flex-start; min-height: 68px; line-height: 22px; }
.m-input .ph { color: var(--soft); }
.m-pile { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 800; font-size: 15px; line-height: 20px; display: flex; align-items: center; }
.m-pile.on { background: var(--ink); color: var(--paper); }
.m-add { min-height: 44px; min-width: 44px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--ink); display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 15px; line-height: 20px; }
.m-qrbox { padding: 8px; background: #FFFFFF; border-radius: 8px; border: 1px solid var(--line); }
.m-qrbox .qr { display: block; width: 150px; height: 150px; }
.m-dots { display: flex; gap: 6px; justify-content: center; }
.m-dots span { width: 8px; height: 8px; border-radius: 4px; background: var(--line); }
.m-dots span.past { background: var(--line-2); }
.m-dots span.now { background: var(--ink); }
.m-review { display: flex; justify-content: space-between; padding: 0 2px; }
.m-review > div { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; font-weight: 800; font-size: 12px; line-height: 16px; }
.m-review .circle { width: 44px; height: 44px; border-radius: 22px; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; }
.m-badge { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; line-height: 20px; }
.m-choice { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--raised); border: 1px solid var(--line); border-radius: 16px; min-height: 72px; }
.m-choice .ico { color: var(--accent-ink); }
.m-postcard { position: relative; background: var(--raised); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.m-postcard .stubs { display: flex; gap: 3px; height: 116px; background: var(--line); }
.m-postcard .stub { flex: 1; position: relative; overflow: hidden; background: var(--photo); border-bottom: 4px solid var(--tint); }
.m-postcard .stub svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-postmark { position: absolute; right: 12px; top: 88px; width: 60px; height: 60px; border-radius: 30px; border: 1.5px solid var(--soft); background: var(--raised); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(8deg); color: var(--soft); font-family: var(--font-text); font-weight: 800; font-size: 9px; line-height: 10px; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; }
.m-postmark::before { content: ""; position: absolute; inset: -4px; border-radius: 40px; border: 2px solid var(--soft); }
.m-postcard .text { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.m-podium { display: flex; align-items: flex-end; gap: 10px; padding: 36px 16px 0; }
.m-podium .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.m-podium .ped { width: 100%; border-radius: 24px 24px 0 0; display: flex; flex-direction: column; align-items: center; padding-top: 12px; gap: 2px; }
.m-podium .score { font-family: var(--font-display); font-weight: 700; letter-spacing: -1.5px; }
.m-podium .floor { height: 6px; border-radius: 3px; background: var(--ink); margin: 0 16px; }
.m-sticker { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.m-sticker.first { width: 68px; height: 68px; position: relative; color: var(--light-ink); font-size: 24px; padding-top: 6px; }
.m-sticker.first svg { position: absolute; inset: 0; }
.m-sticker.first span { position: relative; }
.m-sticker.disc { width: 54px; height: 54px; border-radius: 27px; background: var(--tint); color: var(--on); font-size: 22px; }
.m-confetti { position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; }
.m-headline { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 42px; letter-spacing: -0.5px; }
.m-joinrow { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 24px; background: var(--tint-mint); }
.m-stamp-land { display: inline-flex; }
.js .m-stamp-land.armed > div { opacity: 0; }
.js .m-stamp-land.armed.go > div { animation: land 240ms cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.m-stamp-land > div { --rot: rotate(-8deg); }
@keyframes land { from { opacity: 0; transform: var(--rot) scale(1.3); } to { opacity: 1; transform: var(--rot) scale(1); } }
.m-mapcard { position: relative; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .m-stamp-land.armed > div { opacity: 1; }
}
.m-photo { aspect-ratio: 3 / 4; }
.ico-wrap { display: inline-flex; flex-shrink: 0; }
.accent-ink { color: var(--accent-ink); }
.bunting-in { color: var(--ink); }
.bunting-in svg { display: block; width: 100%; height: 52px; }
.reveal-cols > .m-col { flex: 1 1 0; }
.btn-raised { background: var(--raised); color: var(--ink); }

/* Organisers hero: the Published screen and the family's card side by side on wide screens.
   Two phones need about 504px beside the copy, so this hero only splits in two from 1200px;
   below that the phones sit under the copy. */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-grid-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .hero-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; justify-items: center; }
  .hero-phones .phone { --z: 0.58; }
  .hero-phones .phone + .phone { margin-top: 48px; }
}
@media (min-width: 1100px) {
  .snip .frag { --z: 0.5; }
  .families ol { grid-template-rows: auto auto auto; }
  .families li { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: var(--space-m); }
}

/* The app's components (src/art) */
.rn-v{display:flex;flex-direction:column;position:relative;box-sizing:border-box;min-width:0;min-height:0;flex-shrink:0;align-items:stretch;border:0 solid}
.rn-t{display:inline;white-space:pre-wrap;overflow-wrap:break-word;margin:0;padding:0}
.rn-yp6k80{width:52px;height:52px;transform:rotate(-8deg) scale(1);opacity:1}
.rn-1npr1jq{flex:1;border-radius:26px;background-color:#FFD93D;align-items:center;justify-content:center;overflow:visible;box-shadow:0px 6px 10px rgba(255,217,61,0.35)}
.rn-1yfh5kh{font-family:var(--font-text);font-weight:800;font-size:8.5px;line-height:10px;letter-spacing:0.3px;text-transform:uppercase;color:#22243A;text-align:center;width:42px;margin-left:5px;margin-right:5px}
.rn-e1i2tb{font-family:var(--font-text);font-weight:800;font-size:11px;line-height:13px;letter-spacing:0.3px;text-transform:uppercase;color:#22243A;text-align:center;width:42px;margin-left:5px;margin-right:5px}
.rn-1m75why{width:52px;height:52px;transform:rotate(7deg) scale(1);opacity:1}
.rn-9c1yw6{height:240px;background-color:var(--block);overflow:hidden;border-radius:16px;border-style:solid;border-width:1px;border-color:var(--line)}
.rn-1ekncbj{width:40px;height:48px}
.s-raised{stroke:var(--raised)}
.s-water{stroke:var(--water)}
.f-line-2{fill:var(--line-2)}
.f-accent{fill:var(--accent)}
.f-on-accent-words{fill:var(--on-accent-words)}
/* Picture details (src/lib/inline-styles.ts) */
.s-bjdgzx{gap:0 !important}
.s-urcxlh{opacity:.85 !important}
.s-1tc0076{justify-content:space-between !important}
.s-1olt6pd{gap:12px !important;padding-top:12px !important}
.s-v9un6z{gap:6px !important}
.s-2t7h2{padding-top:4px !important}
.s-cjx69j{gap:2px !important}
.s-t2el1y{gap:12px !important;padding-top:8px !important}
.s-1iu691c{gap:12px !important}
.s-1mhnehb{display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px !important}
.s-lmdudm{display:flex !important;flex-direction:row !important;align-items:center !important;gap:12px !important;padding:10px 14px 10px 16px !important}
.s-1d9ojq7{font-size:17px !important;line-height:24px !important}
.s-qginuq{gap:14px !important}
.s-1psb05k{height:440px !important;aspect-ratio:auto !important}
.s-19dgm5h{gap:8px !important}
.s-tgoca0{font-size:17px !important}
.s-cnvfbm{gap:16px !important;justify-content:space-between !important}
.s-196dx6e{gap:10px !important}
.s-zy454f{gap:4px !important;padding-top:4px !important}
.s-q1kn1j{letter-spacing:0.5px !important;text-transform:uppercase !important}
.s-oz2d77{align-items:flex-start !important;gap:12px !important}
.s-1ddp2ws{gap:8px !important;flex:1 !important}
.s-hxoirw{gap:6px !important;padding-top:12px !important}
.s-1eviv88{position:relative !important}
.s-1p0rnsk{font-family:var(--font-display) !important;font-weight:600 !important;font-size:17px !important}
.s-87yhx8{height:140px !important;background:var(--fill16) !important}
.s-1n3cj90{font-size:36px !important;line-height:40px !important;color:var(--tink) !important}
.s-s787wm{font-family:var(--font-display) !important;font-weight:600 !important;font-size:19px !important}
.s-v4yss2{height:200px !important;background:var(--tint) !important}
.s-ek38x7{font-size:48px !important;line-height:52px !important;color:var(--on) !important}
.s-vuig5s{color:var(--on) !important;opacity:.85 !important}
.s-c0a270{gap:14px !important;padding-top:8px !important}
.s-1txto41{text-align:center !important}
.s-jaizj9{gap:12px !important;align-items:flex-start !important;padding-top:14px !important;padding-bottom:14px !important}
.s-n5gdi2{padding-top:8px !important}
.s-13t9w9x{gap:20px !important}
.s-1jwxygv{padding:0 !important;height:auto !important}
.s-1uykvw{padding:0 !important}
.s-zfhnbg{gap:16px !important}
.s-1w1wt6p{align-items:flex-start !important}
.s-ihkqnt{text-decoration:underline !important}
.s-4pbdgw{--h:760px !important}
.s-12fnyjg{gap:14px !important;padding-top:0 !important}
.s-m7pi4h{gap:4px !important}
.s-x373cv{gap:10px !important;align-items:flex-start !important}
.s-113ez8u{--h:667px !important}
.s-1ad8z5m{gap:16px !important;padding-top:0 !important}
.s-1ubmd2m{display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px !important;padding:24px 16px !important}
.s-1ae9fx1{font-family:var(--font-display) !important;font-weight:600 !important;font-size:44px !important;line-height:52px !important;letter-spacing:4px !important}
.s-1ksj6lu{gap:12px !important;align-items:center !important}
.s-1vff5c0{gap:18px !important;padding-top:8px !important}
.s-18nro8v{font-family:var(--font-display) !important;font-size:24px !important;letter-spacing:3px !important}
.s-zw6xa2{margin-top:20px !important;justify-content:space-between !important;align-items:center !important;gap:24px !important}
.s-fvpir8{padding:28px 24px !important}
.s-14g17hm{font-size:1.1875rem !important}
.s-ld4tzp{font-size:clamp(2.25rem,1.5rem + 3vw,3.25rem) !important;line-height:1.1 !important}