/* GENERATED by scripts/build-tokens-css.mjs from design-system/tokens.json v2.16.0 — do not edit by hand. */
@font-face{font-family:"FireFlash Reader";src:url("/fonts/FireFlashReader-Regular.woff") format("woff");font-weight:400;font-display:block}
@font-face{font-family:"FireFlash Reader";src:url("/fonts/FireFlashReader-Bold.woff") format("woff");font-weight:700;font-display:block}
:root{
  --ff-ink: #191919;
  --ff-red: #EF3029;
  --ff-orange: #FF8322;
  --ff-gold: #FFC83F;
  --ff-soft-gray: #D1D3D6;
  --ff-cream: #FFF7E2;
  --ff-white: #FFFFFF;
  --ff-glow: #FFE39A;
  --ff-card-back: #FFF4D6;
  --ff-choice-neutral: #F4F4F5;
  --ff-stage-tag: #FFF1C7;
  --ff-hover: #FFF6DC;
  --ff-focus: #2699E8;
  --ff-muted-text: #555555;
  --ff-body-muted: #444444;
  --ff-dark-text: #333333;
  --ff-phone-mock: #F2F4F7;
  --ff-placeholder: #C9CED6;
  --ff-water: #4FA9EE;
  --ff-stream: #3E9BEA;
  --ff-stream-highlight: #D6EEFF;
  --ff-soaked: #2E86DE;
  --ff-soaked-highlight: #CFE9FF;
  --ff-water-dark: #1E6FC9;
  --ff-water-light: #A6D6FA;
  --ff-vapor-model: #8CC8F5;
  --ff-label-blue: #1557A8;
  --ff-leaf: #6CC04A;
  --ff-leaf-dark: #2F9E4F;
  --ff-leaf-light: #7FD36A;
  --ff-back-hill: #B5E39A;
  --ff-soil: #EDC793;
  --ff-soil-wet: #C99A5E;
  --ff-soil-grain: #C9935A;
  --ff-trunk: #8B5A2B;
  --ff-cloud: #F5F8FB;
  --ff-cloud-dark: #D3DDE8;
  --ff-cloud-line: #B9C7D6;
  --ff-rock: #A9AEB5;
  --ff-rock-light: #C3C7CC;
  --ff-pebble: #B9BCC2;
  --ff-shadow-scribble: #B8BABE;
  --ff-sun-halo: #FFE58A;
  --ff-sun-mouth: #E8463A;
  --ff-card-rule: #A9D3F5;
  --ff-stem-purple: #7A3E8E;
  --ff-stem-purple-pale: #B993C9;
  --ff-plumage-pink: #F27A9B;
  --ff-plumage-pale: #F9CDD8;
  --ff-fill-accent: linear-gradient(#E8231C, #FF5A1F);
  --ff-fill-ink: linear-gradient(#2A2A2A, #121212);
  --ff-fill-water: linear-gradient(#3B9BEA, #1F6FC9);
  --ff-fill-cheer: linear-gradient(#FFA032, #FF6A1F);
  --ff-fill-retry: linear-gradient(#F2463A, #C41E1A);
  --ff-flame: radial-gradient(circle at 50% 74%, #FFD54A, #FFA12E 34%, #FF6A1F 68%, #E8291F);
  --ff-type-subtitle: clamp(22px, 19.51px + 0.663vw, 28px);
  --ff-type-prompt: clamp(20px, 18.34px + 0.442vw, 24px);
  --ff-type-choice: clamp(18px, 17.17px + 0.221vw, 20px);
  --ff-type-feedback: clamp(17px, 16.17px + 0.221vw, 19px);
  --ff-type-teacher-note: clamp(14px, 13.59px + 0.110vw, 15px);
  --ff-min-tap: 48px;
  --ff-frame-ms: 83ms;
  --ff-read: "FireFlash Reader", sans-serif;
}

/* Page-wide rules for the /guides/ pages only (they are not part of the app). */
*{box-sizing:border-box}
html{font-family:var(--ff-read);color:var(--ff-ink);background:var(--ff-white);font-synthesis:none}
body{margin:0;min-width:320px;line-height:1.6;font-size:18px}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--ff-focus);outline-offset:4px}
img,svg,video{max-width:100%}
body.gd-page{line-height:1.6;font-size:18px}

/* Search article pages (/guides/) and the home page (/). Colours and fonts come from the design tokens
   (src/design/tokens.css). Only gd- classes here: the home page inlines this file into the app's index.html, so
   page-wide rules live in guides-base.css (guides only). */
.gd-wrap{max-width:960px;margin:0 auto;padding:0 16px}
.gd-skip{position:absolute;top:-99px;left:12px;z-index:50;background:var(--ff-gold);padding:12px;font-weight:700}
.gd-skip:focus{top:10px}
.gd-header{border-bottom:2px solid var(--ff-soft-gray);background:var(--ff-white)}
.gd-header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.gd-logo img{display:block;height:56px;width:auto}
.gd-nav{display:flex;gap:4px}
.gd-nav a{text-decoration:none;font-weight:700;padding:10px 12px;border-radius:22px}
.gd-nav a:hover{background:var(--ff-hover)}
.gd-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:18px 0 12px;font-size:15px;color:var(--ff-muted-text)}
.gd-crumbs li+li::before{content:"›";margin-right:6px}
.gd-banner{padding:clamp(20px,4vw,40px);background:var(--ff-cream);border:3px solid var(--ff-ink);box-shadow:5px 5px 0 var(--ff-glow);border-radius:21px;margin:0 0 28px}
.gd-eyebrow{margin:0 0 8px;font-weight:700;font-size:15px;color:var(--ff-body-muted)}
.gd-title{margin:6px 0 8px;line-height:1.1}
.gd-title img{display:block;height:auto;width:min(100%,560px)}
.gd-pack .gd-title img{height:40px;width:auto;max-width:100%}
.gd-title-text{font-size:clamp(32px,4.4vw,50px);letter-spacing:-1px}
.gd-sub{font-weight:700;font-size:20px;margin:0 0 10px}
.gd-lede{margin:0 0 18px}
.gd-free{background:var(--ff-gold);border:2px solid var(--ff-ink);border-radius:10px;padding:0 8px;font-weight:700;color:var(--ff-ink)}
.gd-actions{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 6px}
.gd-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;border:2.5px solid var(--ff-ink);border-radius:12px;padding:11px 17px;box-shadow:3px 4px 0 var(--ff-ink)}
.gd-button--primary{background:var(--ff-red);color:var(--ff-white)}
.gd-button--secondary{background:var(--ff-white);color:var(--ff-ink)}
.gd-button:active{transform:translateY(2px);box-shadow:1px 2px 0 var(--ff-ink)}
.gd-small{font-size:15px;color:var(--ff-body-muted);margin:6px 0}
.gd-hero,.gd-scene{margin:0 0 28px;border:3px solid var(--ff-ink);border-radius:18px;overflow:hidden;background:var(--ff-white)}
.gd-scene-svg{display:block;width:100%;height:auto}
.gd-hero figcaption,.gd-scene figcaption{padding:10px 16px;font-weight:700;border-top:2px solid var(--ff-soft-gray)}
.gd-section{margin:0 0 32px}
.gd-section h2{font-size:clamp(24px,3vw,30px);line-height:1.2;margin:0 0 10px}
.gd-section h3{font-size:20px;margin:18px 0 4px}
.gd-section p{margin:0 0 12px}
.gd-ideas{padding-left:1.4em}
.gd-ideas li{margin:0 0 6px}
.gd-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.gd-chips li{background:var(--ff-stage-tag);border:2px solid var(--ff-ink);border-radius:14px;padding:2px 12px;font-weight:700;font-size:16px}
.gd-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.gd-gallery .gd-scene{margin:0}
.gd-steps,.gd-standards{padding-left:1.2em}
.gd-steps li,.gd-standards li{margin:0 0 8px}
.gd-video video{display:block;width:100%;border:3px solid var(--ff-ink);border-radius:18px;background:var(--ff-ink)}
.gd-packs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.gd-pack{border:3px solid var(--ff-ink);border-radius:18px;padding:14px 16px;background:var(--ff-white);box-shadow:4px 4px 0 var(--ff-glow)}
.gd-pack a{text-decoration:none}
.gd-pack p{margin:4px 0}
.gd-related{padding-left:1.2em}
.gd-related li{margin:0 0 6px}
.gd-related a{font-weight:700}
.gd-related span{color:var(--ff-body-muted)}
.gd-cta{padding:20px;border:3px solid var(--ff-ink);border-radius:18px;background:var(--ff-hover)}
.gd-footer{margin-top:40px;border-top:2px solid var(--ff-soft-gray);padding:18px 0 28px;font-size:15px;color:var(--ff-body-muted)}
@media (max-width:600px){
  .gd-page{font-size:17px}
  .gd-logo img{height:40px}
  .gd-actions{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  .gd-button:active{transform:none}
}
.gd-step-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:step}
.gd-step-cards li{border:3px solid var(--ff-ink);border-radius:18px;padding:14px 16px;background:var(--ff-cream);box-shadow:4px 4px 0 var(--ff-glow)}
.gd-step-cards strong{font-size:22px}
.gd-step-cards p{margin:6px 0 0}
.gd-series-card .gd-related{margin:6px 0;font-size:16px}