/* KAST Next website: tokens and components from docs/design/kast-next-baseline-v1.12.html (approved 24 Oct 2026).
   Fonts are bundled locally (Geist and Geist Mono, SIL OFL 1.1, see fonts/OFL-Geist.txt). No external requests. */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  color-scheme: light;
  --font-sans: "Geist", "Geist Variable", ui-sans-serif, system-ui, sans-serif;     /* measured family (bundled locally) */
  --font-mono: "Geist Mono", "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, monospace; /* measured */
  --surface: #fff;            /* measured --color-surface-primary */
  --surface-2: #fafaf7;       /* measured --color-surface-secondary */
  --surface-tint: #f5f5f0;    /* measured --color-surface-tinted */
  --text: #1a1a1a;            /* measured --color-text-primary */
  --text-muted: #6b6b6b;      /* measured --color-text-muted */
  --text-dim: #a8a8a8;        /* measured --color-text-dim (decorative only) */
  --heading: oklch(.141 .005 285.823); /* measured DOM heading colour (zinc-950) */
  --border: #ececea;          /* measured */
  --border-soft: #f1f1ee;     /* measured */
  --border-hover: #9b9b96;    /* measured */
  --orange: #c8743a;          /* measured --color-accent-orange */
  --orange-soft: #ecd6c1;     /* measured */
  --orange-deep: #a75d27;     /* measured */
  --error: #a32d2d;           /* measured */
  --cream: #f4ede1;           /* measured pastel-cream */
  --r-card: 24px;             /* measured rounded-[24px] */
  --r-sheet: 28px;            /* measured rounded-[28px] */
  --r-input: 14px;            /* measured rounded-[14px] */
  --r-pill: 999px;            /* measured rounded-full */
  --shadow-card: 0 1px 2px rgba(41,37,36,.04), 0 14px 34px -22px rgba(41,37,36,.28); /* measured */
  --ring: inset 0 0 0 1px var(--border-soft); /* measured pattern */
  --ease: cubic-bezier(.23,1,.32,1);          /* measured --ease-out-strong */
  --gutter: 20px;             /* PROPOSED phone gutter (live: 16 mobile / 32 desktop) */
}
:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--text); font: 400 15px/1.5 var(--font-sans); font-feature-settings: "cv11","ss01"; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ===== shared components (PROPOSED baseline) ===== */
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--gutter); background: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 15px/1 var(--font-sans); letter-spacing: .14em; color: var(--heading); }
.mk { width: 13px; height: 18px; }
.link { font: 500 14px/1 var(--font-sans); color: var(--text); text-decoration: none; padding: 10px 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: var(--r-pill); border: 0; cursor: pointer; font: 500 15px/1 var(--font-sans); text-decoration: none; transition: transform .15s var(--ease), background-color .15s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--text); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn:focus-visible, .link:focus-visible, input:focus-visible, .pill:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card), var(--ring); padding: 20px; }
.eyebrow { margin: 0 0 6px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.fine { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.empty { display: grid; place-items: center; text-align: center; gap: 4px; min-height: 220px; padding: 28px 20px; border-radius: var(--r-card); background: var(--surface-2); box-shadow: var(--ring); }
.empty-h { margin: 0; font: 600 18px/1.25 var(--font-sans); letter-spacing: -.02em; color: var(--heading); }
.empty-s { margin: 0; font-size: 14px; color: var(--text-muted); }
.d-cards-empty { max-width: 520px; }
.kcard { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-card), var(--ring); }
.sample-note { margin: 8px 0 0; font: 400 12px/1.4 var(--font-mono); color: var(--orange-deep); min-height: 1.4em; }

/* website */
.w-hero { padding: 40px var(--gutter) 28px; }
.w-hero h1 { margin: 0; font: 700 46px/.98 var(--font-sans); letter-spacing: -.045em; color: var(--heading); }
.w-hero p { margin: 18px 0 24px; font-size: 18px; line-height: 1.45; color: var(--text-muted); max-width: 30ch; }
.w-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.w-card { padding: 8px var(--gutter) 28px; }
.w-card figure { margin: 0; max-width: 260px; margin-inline: auto; }
.w-card figcaption { margin-top: 12px; text-align: center; font: 400 12px/1.4 var(--font-mono); color: var(--text-muted); }
.w-foot { padding: 20px var(--gutter) 36px; border-top: 1px solid var(--border-soft); display: grid; gap: 10px; }
/* training (soft restyle of the approved interactive) */
.t-head { padding: 28px var(--gutter) 6px; }
.t-head h1 { margin: 0; font: 700 34px/1.02 var(--font-sans); letter-spacing: -.04em; color: var(--heading); }
.t-head p { margin: 10px 0 0; color: var(--text-muted); font-size: 15px; }
#head { display: block; width: 100%; height: auto; padding: 0 6px; }
.hd-out { fill: none; stroke: var(--heading); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.hd-in { fill: none; stroke: var(--border-hover); stroke-width: 1; stroke-linecap: round; }
.hd-bulb { fill: var(--surface-tint); stroke: var(--border-hover); stroke-width: 1; }
.hd-nerve { fill: none; stroke: var(--border); stroke-width: 2; stroke-linecap: round; }
.hd-brain { fill: var(--orange); fill-opacity: .04; stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.b-spot { fill: var(--orange); opacity: .5; }
.b-ring { fill: none; stroke: var(--orange); stroke-width: 1.5; opacity: 0; }
.route { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.route.on { stroke: var(--orange); }
.hd-epi { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; opacity: .35; }
.rec-dot { fill: var(--orange); }
.hd-lab text { font: 400 11px var(--font-mono); fill: var(--text-muted); }
.hd-lab line { stroke: var(--border); stroke-width: 1; }
.pp { fill: var(--text); } .pp.weak { fill: var(--text-dim); } .pp.strong { fill: var(--orange); }
.pp.c, .zones circle { stroke: rgba(36,33,29,.25); stroke-width: .5; }
.zones .ztag { font: 500 10px var(--font-mono); letter-spacing: .1em; fill: var(--orange-deep); }
.pulse { fill: var(--orange); }
/* Lesson controls sit on the diagram itself: numbers along the top, the lesson's actions along the bottom. */
.pv-title { margin: 2px var(--gutter) 4px; font: 600 18px/1.25 var(--font-sans); letter-spacing: -.015em; color: var(--heading); }
.perceive-panel { padding: 4px var(--gutter) 8px; }
.perceive-panel p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.ref { font: 400 10px/1 var(--font-mono); color: var(--orange-deep); vertical-align: 2px; margin-left: 0; text-decoration: none; display: inline-block; min-width: 24px; min-height: 24px; text-align: center; line-height: 24px; }
.pc-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pc-btn { height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font: 500 13px/1 var(--font-sans); cursor: pointer; color: var(--text); }
.pc-btn[aria-pressed="true"] { background: var(--text); color: #fff; box-shadow: none; }
.t-refs { margin: 6px var(--gutter) 0; }
.t-refs summary { cursor: pointer; font: 500 13px/1 var(--font-sans); padding: 12px 0; }
.t-health { margin: 10px var(--gutter) 0; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); box-shadow: var(--ring); font-size: 14px; line-height: 1.5; color: var(--text); }
.t-health-label { display: block; margin-bottom: 4px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); }
.t-refs ol { margin: 0; padding: 0 0 0 18px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }



/* ===== site layout (desktop up to 1280) ===== */
main { display: block; max-width: 1280px; margin: 0 auto; outline: none; }
.topbar { padding: 0 max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter))); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--text); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); }
.skip:focus { left: 8px; }
.w-foot { max-width: 1280px; margin: 0 auto; }
.w-foot .fine { margin: 0; max-width: 72ch; }
.empty-s, .eyebrow { color: var(--text-muted); }
.pv-fig { position: relative; margin: 0; padding: 54px 0 56px; max-width: 560px; margin-inline: auto; }
.pv-steps { position: absolute; top: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; padding: 0 6px; }
.pv-steps a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-muted); font: 500 13px/1 var(--font-mono); text-decoration: none; transition: background-color .15s var(--ease), color .15s var(--ease); }
.pv-steps a[aria-current="page"] { background: var(--text); color: #fff; box-shadow: none; }
.pv-steps a:focus-visible, .pc-btn:focus-visible, .t-item:focus-visible, .t-refs summary:focus-visible, .ref:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.pv-acts { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 8px; padding: 0 8px; }
.pv-acts .pc-btn { height: 40px; padding: 0 16px; }
.pv-title { margin: 2px var(--gutter) 4px; font: 600 22px/1.25 var(--font-sans); letter-spacing: -.015em; color: var(--heading); }
.perceive-panel p { max-width: 62ch; }
.pager { display: flex; gap: 10px; justify-content: space-between; padding: 8px var(--gutter) 8px; max-width: 560px; margin-inline: auto; }
.pager .btn:only-child { margin-left: auto; }
.t-list ol { list-style: none; margin: 0; padding: 12px var(--gutter); display: grid; gap: 12px; }
.t-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-decoration: none; color: var(--text); transition: transform .15s var(--ease); }
.t-item:active { transform: scale(.97); }
.t-n { color: var(--orange-deep); }
.t-t { font: 600 18px/1.25 var(--font-sans); letter-spacing: -.015em; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 500 11px/1.5 var(--font-mono); }
.tag.m { background: var(--surface-tint); color: var(--text-muted); }
.t-notes { margin-bottom: 28px; }
.t-notes p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.nojs { padding: 20px; }
.mol { fill: var(--orange); }
.rec-dot.hit { opacity: 1; }
@media (min-width: 900px) {
  .w-hero { padding: clamp(48px, 7vw, 96px) clamp(20px, 3vw, 48px); }
  .w-hero h1 { font-size: clamp(64px, 8.6vw, 112px); line-height: .94; letter-spacing: -.05em; max-width: 9ch; }
  .w-hero p { font-size: clamp(22px, 2.5vw, 32px); line-height: 1.3; letter-spacing: -.015em; max-width: 24ch; }
  .w-card { padding: 8px clamp(20px, 3vw, 48px) 56px; }
  .w-card .empty { max-width: 520px; margin-inline: auto; }
  .t-head { padding: 56px clamp(20px, 3vw, 48px) 8px; }
  .t-head h1 { font-size: clamp(40px, 5vw, 72px); line-height: .98; letter-spacing: -.045em; }
  .t-head p { font-size: 22px; }
  .perceive, .perceive-panel, .pv-title, .t-refs, .t-health { margin-left: auto; margin-right: auto; max-width: 720px; }
  .t-list ol { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px clamp(20px, 3vw, 48px); }
  .w-foot { padding-inline: clamp(20px, 3vw, 48px); }
}
/* Motion: everything animated has a static equivalent. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn:active, .t-item:active { transform: none; }
}

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

.canonical-sample{margin:0 auto;max-width:300px}.canonical-sample svg{display:block;width:100%;height:auto}.canonical-sample .stem{stroke:#ccc;stroke-width:.7}.canonical-sample .leaf{stroke:none}