/* Ugiwise site.
 *
 * Colours are the app's own tokens (ugiwise/lib/design_system/tokens/
 * colors.dart), including its measured accessibility corrections: text never
 * uses a hue below AA on the surface it sits on, and borders that ARE the
 * affordance use the 3:1 interactive edge. Four faces, each with the job it
 * has in the app: Silkscreen for arcade labels, Chakra Petch for headings,
 * Source Sans 3 for reading, JetBrains Mono for code (ligatures off).
 *
 * Sizes are in rem wherever text is involved, so the page follows the
 * reader's own font-size setting.
 */

@font-face { font-family: "Silkscreen"; src: url(../fonts/silkscreen-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url(../fonts/chakrapetch-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url(../fonts/chakrapetch-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(../fonts/sourcesans3-var.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrainsmono-var.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: dark;

  --base: #0a0f18;
  --raised: #111825;
  --panel: #0f1524;
  --sunken: #0c121d;
  --plate: #1b2440;

  --line: #253148;
  --line-code: #202a3c;
  --rule: #232b3c;
  --edge: #4f6ca8;        /* interactive, 3.69:1 on base */
  --brass: #b98b22;
  --brass-deep: #6e4e10;

  --tx: #f2efe8;
  --tx-bright: #fdfbf6;
  --tx-2: #c6ccd8;
  --tx-3: #9aa4ba;
  --tx-faint: #7183ad;

  --cyan: #4ee2ec;
  --cyan-bright: #6ceaf2;
  --cyan-deep: #2bc0d0;
  --mint: #5fd694;
  --gold: #f0c94a;
  --pink: #ef6fc0;
  --purple: #a78bf0;
  --link: #6fd6e8;
  --link-dim: #2f7f92;

  --amber: #ffb13d;
  --amber-deep: #e0851b;
  --amber-bevel: #8a4a08;
  --on-amber: #2a1403;

  --code: #e6ebf5;

  --f-arcade: "Silkscreen", ui-monospace, monospace;
  --f-ui: "Chakra Petch", system-ui, sans-serif;
  --f-read: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gutter: 16px;
  --max: 1180px;
  --r: 14px;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--base);
  /* The prototype's dot grid, 22 px at 5% cyan. */
  background-image: radial-gradient(rgba(78, 226, 236, .05) 1px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--tx);
  font: 400 1.0625rem/1.6 var(--f-read);
  overflow-x: hidden;
}
@media (min-width: 720px) { body { font-size: 1.125rem; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--cyan-bright); }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--f-ui); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; color: var(--tx-bright); text-wrap: balance; }
h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
code, pre, kbd, textarea { font-family: var(--f-mono); font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
code { font-size: .92em; color: var(--cyan-bright); background: #122030; border: 1px solid #24374d; border-radius: 5px; padding: .05em .32em; }
b { color: var(--tx-bright); font-weight: 650; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--amber); color: var(--on-amber); padding: 10px 16px; font: 700 1rem var(--f-ui); border-radius: 6px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.small { font-size: .9rem; color: var(--tx-3); line-height: 1.55; }
.caption { font-size: .95rem; color: var(--tx-3); margin: 16px 0 0; max-width: 46rem; }

/* ------------------------------------------------------------ labels */
.kicker {
  font: 400 .78rem/1.5 var(--f-arcade);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin: 0 0 .9em;
}
.kicker--pink { color: var(--pink); }
.kicker--gold { color: var(--gold); }
.kicker--cyan { color: var(--cyan); }
.kicker--mint { color: var(--mint); }

.chip {
  display: inline-block;
  font: 400 .72rem/1 var(--f-arcade);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5em .7em .45em;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.chip--mint { color: var(--mint); }
.chip--pink { color: var(--pink); }
.chip--gold { color: var(--gold); }

.lamp { flex: none; display: inline-block; width: 9px; height: 9px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.lamp--cyan { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* ------------------------------------------------------------ keys */
/* The lesson's primary key: lit amber face, a bevel it rests on. */
.key {
  --face: linear-gradient(#ffc466, var(--amber) 40%, var(--amber-deep));
  --bevel: var(--amber-bevel);
  --ink: var(--on-amber);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: .4em 1.4em;
  border: 0;
  border-radius: 3px;
  background: var(--face);
  box-shadow: 0 4px 0 var(--bevel), 0 10px 26px -10px rgba(255, 177, 61, .55);
  color: var(--ink);
  font: 400 .86rem/1.3 var(--f-arcade);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.key:hover { color: var(--ink); filter: brightness(1.06); }
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bevel); }
.key--ghost {
  --face: #121722;
  --bevel: #191f2d;
  --ink: var(--tx);
  box-shadow: 0 4px 0 var(--bevel), inset 0 0 0 1px var(--edge);
}
.key--ghost:hover { color: var(--tx-bright); }
.key--ghost:active { box-shadow: 0 1px 0 var(--bevel), inset 0 0 0 1px var(--edge); }
.key--sm { min-height: 46px; font-size: .78rem; }
.key:disabled { filter: grayscale(.8) brightness(.7); cursor: default; transform: none; }

/* ------------------------------------------------------------ header */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 16, 26, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--brass-deep);
}
.top__in {
  max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter);
  display: flex; align-items: center; gap: 4px 24px; flex-wrap: wrap;
}
.top__brand { display: block; padding: 4px 0; }
.top__brand img { width: 118px; height: auto; filter: drop-shadow(0 0 8px rgba(78, 226, 236, .28)); }
.top__nav { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.top__nav a {
  font: 400 .7rem/1 var(--f-arcade); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--tx-2); text-decoration: none; padding: 12px 9px; border-radius: 3px;
}
.top__nav a:hover { color: var(--cyan); background: rgba(78, 226, 236, .07); }
@media (min-width: 900px) { .top__brand img { width: 140px; } }
@media (max-width: 639px) {
  /* One row that scrolls sideways rather than a second row: the sticky
     header stays short, which the pointer demo's one-screen fit depends on. */
  .top__nav { width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: space-between; }
  .top__nav::-webkit-scrollbar { display: none; }
  .top__nav a { padding: 11px 7px; font-size: .62rem; letter-spacing: .06em; }
}

/* ------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding: 40px 0 64px; }
.hero__sky {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 62%, rgba(167, 139, 240, .20), transparent 70%),
    linear-gradient(180deg, rgba(10, 15, 24, 0) 40%, rgba(28, 17, 69, .55) 100%);
}
/* The title screen's horizon: a cyan line and a perspective grid under it. */
.hero__sky::after {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 18%;
  background:
    linear-gradient(90deg, rgba(78, 226, 236, .20) 1px, transparent 1px) 0 0 / 64px 100%,
    linear-gradient(0deg, rgba(78, 226, 236, .16) 1px, transparent 1px) 0 0 / 100% 28px;
  border-top: 2px solid rgba(78, 226, 236, .55);
  transform: perspective(360px) rotateX(58deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
.hero__in { position: relative; display: grid; gap: 40px; align-items: center; }

.hero__title { margin: 0 0 .35em; line-height: 1; }
.hero__title > span { display: block; }
.hero__your { font-size: clamp(1.9rem, 3vw + 1rem, 3rem); color: var(--tx-bright); letter-spacing: -.01em; }
/* ARCADE GYM in the app's arcade face, lit like the title screen's wordmark:
   white top to cyan foot, a one-pixel dark keyline, a wide dim glow. */
.hero__gym {
  font-family: var(--f-arcade); font-weight: 400; text-transform: uppercase;
  /* Sized so ARCADE GYM holds one line in the hero column (~7.9em wide). */
  font-size: clamp(2.2rem, 11.2vw, 4.8rem); line-height: 1.05; letter-spacing: 0;
  margin: .08em 0 .1em;
  background: linear-gradient(180deg, #fdfbf6 0%, #fdfbf6 30%, #cfe9f5 45%, #4ee2ec 62%, #2bc0d0 82%, #1d7e93 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 2px 0 #05040c) drop-shadow(-1px -1px 0 #05040c) drop-shadow(0 0 18px rgba(78, 226, 236, .35));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .hero__gym { color: var(--cyan); } }
.hero__for { font-size: clamp(1.9rem, 3vw + 1rem, 3rem); color: var(--tx-bright); letter-spacing: -.01em; }
.hero__for em { font-style: normal; color: var(--gold); }
.hero__sub { font: 600 clamp(1.2rem, 1vw + 1rem, 1.5rem)/1.35 var(--f-ui); color: var(--tx-2); margin: 0 0 22px; max-width: 30em; }

.reps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.reps li { display: flex; align-items: baseline; gap: 12px; color: var(--tx-2); font-size: 1.05rem; line-height: 1.4; }
.reps__tag {
  flex: none; min-width: 7.2em; white-space: nowrap; font: 400 .7rem/1.4 var(--f-arcade); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); padding: .35em .5em; border: 1px solid var(--link-dim); background: rgba(16, 40, 58, .6); text-align: center;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px 16px; margin: 0 0 20px; }
.hero__note { display: flex; gap: 10px; align-items: baseline; color: var(--tx-3); font-size: .95rem; margin: 0; }

.hero__stage { position: relative; justify-self: center; width: min(78vw, 320px); }
.phone--hero { margin: 0; }
.bolt--hero { position: absolute; left: -36%; bottom: 4%; width: 44%; display: flex; flex-direction: column; align-items: center; }
.bolt--hero img { width: 100%; image-rendering: pixelated; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.bubble {
  position: relative; margin: 0 0 12px; padding: 8px 12px;
  background: var(--tx-bright); color: #101a2c; border-radius: 10px 10px 10px 3px;
  font: 600 .95rem/1.2 var(--f-ui); white-space: nowrap;
}
@media (max-width: 719px) {
  .hero__stage { width: min(68vw, 300px); justify-self: start; margin-left: 4vw; }
  .bolt--hero { left: auto; right: -27%; bottom: 14%; width: 30%; }
  .bubble { display: none; }
}
@media (min-width: 900px) {
  .hero { padding: 64px 0 88px; }
  .hero__in { grid-template-columns: 1.2fr .8fr; gap: 48px; }
  .hero__stage { width: 320px; justify-self: end; margin-right: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .bolt--hero img { animation: bob 2.4s steps(4) infinite; }
  @keyframes bob { 50% { transform: translateY(-4px); } }
}

/* ------------------------------------------------------------ phone frame */
.phone {
  position: relative;
  border-radius: 30px;
  padding: 9px;
  background: linear-gradient(160deg, #222b3d, #0b0f17 55%);
  box-shadow: 0 0 0 1px #2e3a58, 0 24px 60px -24px rgba(0, 0, 0, .9), 0 0 60px -30px rgba(78, 226, 236, .4);
}
.phone img { border-radius: 22px; width: 100%; aspect-ratio: 720 / 1457; background: var(--base); }

/* ------------------------------------------------------------ bands */
.band { padding: 64px 0; border-top: 2px solid var(--brass-deep); position: relative; }
.band::before { /* the brass top rule, lit in the middle */
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass) 30%, var(--gold) 50%, var(--brass) 70%, transparent);
  opacity: .7;
}
.band--deep { background: rgba(8, 14, 24, .75); }
@media (min-width: 900px) { .band { padding: 88px 0; } }

.sec-head { max-width: 46rem; margin-bottom: 32px; }
.sec-head h2 { font-size: clamp(1.8rem, 2.4vw + 1.1rem, 2.7rem); }
.sec-lead { color: var(--tx-2); font-size: 1.1rem; margin: 0; }
@media (min-width: 720px) { .sec-lead { font-size: 1.2rem; } }

/* ------------------------------------------------------------ console panels */
.console {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brass);
  border-radius: 0 0 var(--r) var(--r);
  padding: 18px;
}
@media (min-width: 720px) { .console { padding: 26px; } }

.t-k { color: var(--pink); } .t-n { color: var(--gold); } .t-s { color: var(--mint); } .t-f { color: var(--cyan); } .t-p { color: var(--purple); }

/* ------------------------------------------------------------ challenge */
.task { font-size: 1.14rem; line-height: 1.5; color: var(--tx-bright); font-weight: 600; margin-bottom: 20px; max-width: 44rem; }
.task code { font-weight: 500; }
.editor__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 900px) { .editor__grid { grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; } }
.code-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.code-head .kicker { margin: 0; }
.fname { font: 400 .9rem var(--f-mono); color: var(--tx-faint); }
.code { background: var(--sunken); border: 1px solid var(--line-code); padding: 12px 0; overflow-x: auto; }
.code__fixed { margin: 0; padding: 0 14px; font-size: .95rem; line-height: 1.75; color: var(--code); white-space: pre; }
.code__input {
  display: block; width: 100%; min-height: 3.4em; margin: 4px 0; resize: vertical;
  padding: 8px 14px 8px 44px; /* four spaces of the body's indent */
  background: #0f1829; color: var(--tx-bright);
  border: 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); border-left: 3px solid var(--cyan);
  font-size: 1rem; line-height: 1.6; caret-color: var(--amber);
}
.code__input::placeholder { color: var(--tx-faint); }
.code__input:focus { outline: none; background: #111f33; border-left-color: var(--amber); }
.code__input:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: 0; }
.editor[data-state="accepted"] .code__input { border-left-color: var(--mint); }
.editor[data-state="mistake"] .code__input { border-left-color: var(--pink); }
.editor[data-state="unverified"] .code__input { border-left-color: var(--gold); }

.symbols { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.symbols button {
  min-width: 48px; min-height: 46px; padding: 0 12px;
  background: #121722; color: var(--tx-bright); border: 1px solid var(--edge); border-radius: 6px;
  font: 600 1.05rem var(--f-mono); cursor: pointer;
}
.symbols button:hover { border-color: var(--cyan); }
.symbols button:active { transform: translateY(1px); }

.expected { border-top: 2px solid var(--brass-deep); padding-top: 12px; margin-bottom: 16px; }
.expected .kicker { margin-bottom: .4em; }
.expected pre { margin: 0; font-size: 1rem; color: var(--tx); line-height: 1.6; }

.verdict { border: 1px solid; border-left-width: 4px; padding: 14px 16px; margin-bottom: 16px; font-size: 1.02rem; }
.verdict:empty { display: none; }
.verdict .kicker { margin-bottom: .45em; }
.verdict p { margin: 0; color: var(--tx); }
.verdict--accepted { border-color: #3f9169; background: rgba(95, 214, 148, .07); }
.verdict--accepted .kicker { color: var(--mint); }
.verdict--mistake { border-color: #b84a8f; background: rgba(239, 111, 192, .07); }
.verdict--mistake .kicker { color: var(--pink); }
.verdict--unverified { border-color: #9a8434; background: rgba(240, 201, 74, .07); }
.verdict--unverified .kicker { color: var(--gold); }
.verdict--solution { border-color: var(--edge); background: rgba(79, 108, 168, .08); }
.verdict--solution .kicker { color: var(--tx-2); }
.verdict__row { display: flex; gap: 14px; align-items: center; }
.verdict__row img { width: 52px; flex: none; image-rendering: pixelated; }

.editor__keys { display: flex; flex-wrap: wrap; gap: 14px 12px; }
/* Bases add up to more than a phone's width, so on a phone the two keys
   stack instead of squeezing CHECK ANSWER onto two lines. */
.editor__keys .key { flex: 1 1 11em; }
.editor__keys [type="submit"] { flex: 1.4 1 15em; }
/* Wide layouts: keep each caption on one line and let the keys stack instead.
   (Not on phones - at large text sizes a caption can be wider than the screen.) */
@media (min-width: 900px) { .editor__keys .key { white-space: nowrap; } }

.scope { display: flex; gap: 10px; align-items: baseline; margin: 18px 0 0; font-size: .95rem; color: var(--tx-2); line-height: 1.5; }

.more { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 6px; }
.more summary, .units summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 400 .76rem/1.3 var(--f-arcade); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan);
}
.more summary::-webkit-details-marker, .units summary::-webkit-details-marker { display: none; }
.more summary::before, .units summary::before { content: "\25B8"; font-family: var(--f-read); font-size: 1rem; transition: transform .15s; }
.more[open] summary::before, .units[open] summary::before { transform: rotate(90deg); }
.more__body { max-width: 46rem; color: var(--tx-2); font-size: 1rem; padding: 8px 0 4px; }
.outcomes { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 12px; }
.outcomes .chip { margin-right: 6px; vertical-align: 2px; }

/* ------------------------------------------------------------ pointer demo */
.alias { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) {
  .alias { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "top stage" "keys stage"; column-gap: 36px; align-items: start; }
  .alias__top { grid-area: top; }
  .alias__stage { grid-area: stage; }
  .alias__keys { grid-area: keys; align-self: end; }
}
.alias__count { margin-bottom: 10px; }
.alias__code { list-style: none; margin: 0; padding: 8px 0; background: var(--sunken); border: 1px solid var(--line-code); counter-reset: ln; overflow-x: auto; }
.alias__code li { counter-increment: ln; display: flex; gap: 12px; padding: 4px 14px 4px 10px; border-left: 3px solid transparent; transition: background .2s, opacity .2s; }
.alias__code li::before { content: counter(ln); width: 1.2em; text-align: right; color: var(--tx-faint); font: 400 .85rem/1.6 var(--f-mono); flex: none; }
.alias__code code { background: none; border: 0; padding: 0; color: var(--code); font-size: .92rem; line-height: 1.6; white-space: pre; }
.alias__code li.is-future { opacity: .55; }
.alias__code li.is-now { background: #101c2c; border-left-color: var(--gold); opacity: 1; }
.alias__code li.is-now::before { color: var(--gold); }

.alias__stage { background: rgba(12, 18, 29, .7); border: 1px dashed var(--line); border-radius: 12px; padding: 12px 12px 16px; }
.alias__svg { display: block; width: 100%; height: auto; max-height: 300px; overflow: visible; }
.alias__svg .lbl { font: 700 17px var(--f-mono); fill: var(--code); }
.alias__svg .type { font: 400 12px var(--f-mono); fill: var(--tx-faint); }
.alias__svg .box { fill: #0f2230; stroke: var(--link-dim); stroke-width: 1.5; }
.alias__svg .dot { fill: var(--link); }
.alias__svg .val { font: 700 30px var(--f-mono); fill: var(--cyan); text-anchor: middle; }
.alias__svg .note { font: 400 11px var(--f-arcade); letter-spacing: .12em; text-anchor: middle; fill: var(--gold); text-transform: uppercase; }
.alias__svg .arrow { fill: none; stroke: var(--link); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.alias__svg .ptr, .alias__svg .obj { transition: opacity .3s; }
.alias__svg .ptr.is-off { opacity: 0; }
.alias__svg .arrow.is-drawing { animation: draw .7s ease-out both; }
.alias__svg .ptr.is-new .box { stroke: var(--mint); stroke-width: 2.5; }
.alias__svg .ptr.is-new .arrow { stroke: var(--mint); }
.alias__svg .ptr.is-write .box { stroke: var(--gold); stroke-width: 2.5; }
.alias__svg .ptr.is-write .arrow { stroke: var(--gold); stroke-width: 4; }
.alias__svg .ptr.is-read .arrow { stroke: var(--mint); }
.alias__svg .obj.is-new .box { stroke: var(--mint); stroke-width: 2.5; }
.alias__svg .obj.is-changed .box { stroke: var(--gold); stroke-width: 3; fill: #231d0c; }
.alias__svg .obj.is-changed .val { fill: var(--gold); }
.alias__svg .obj.is-read .box { stroke: var(--mint); stroke-width: 2.5; }
.alias__svg .obj.is-changed .val.is-flip { animation: flip .5s ease-out; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes flip { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } }
.alias__svg .val { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .alias__svg .arrow.is-drawing, .alias__svg .obj.is-changed .val.is-flip { animation: none; }
  .alias__svg .ptr, .alias__svg .obj, .alias__code li { transition: none; }
}

.alias__explain { padding: 10px 6px 0; }
.alias__say { font-size: 1.08rem; line-height: 1.5; color: var(--tx); margin: 0 0 10px; min-height: 3em; }
.alias__out { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.alias__out .kicker { margin: 0; }
.alias__out code { background: none; border: 0; color: var(--mint); font-size: 1.2rem; font-weight: 700; letter-spacing: .2em; }
.alias__keys { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.alias__keys .key { flex: 1 1 auto; }
.tkey {
  min-height: 46px; min-width: 64px; padding: 0 14px;
  background: #121722; color: var(--tx-2); border: 1px solid var(--edge); border-radius: 6px;
  font: 600 .95rem var(--f-ui); letter-spacing: .04em; cursor: pointer; white-space: nowrap;
}
.tkey:hover:not(:disabled) { color: var(--tx-bright); border-color: var(--cyan); }
.tkey:disabled { opacity: .45; cursor: default; }

/* ------------------------------------------------------------ workout viewer */
.viewer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
/* Columns are sized in rem, so larger text drops to fewer, wider tabs. */
.viewer__tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 8px; }
.viewer__tab {
  display: flex; align-items: center; gap: 12px; text-align: left; min-height: 64px; padding: 10px 12px;
  background: #121722; border: 1px solid var(--line); border-radius: 10px; color: var(--tx-2); cursor: pointer;
  font: inherit;
}
.viewer__tab b { display: block; font: 700 1.05rem/1.2 var(--f-ui); color: var(--tx-bright); }
.viewer__tab small { display: block; font-size: .85rem; color: var(--tx-3); line-height: 1.3; }
.viewer__n {
  flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--cyan-deep); color: var(--cyan); font: 700 .9rem var(--f-mono);
}
.viewer__tab:hover { border-color: var(--edge); }
.viewer__tab[aria-selected="true"] { border-color: var(--cyan); background: #101c2c; box-shadow: inset 0 -3px 0 var(--gold); }
.viewer__tab[aria-selected="true"] .viewer__n { background: var(--cyan); color: #032128; border-color: var(--cyan); }
.viewer__panels { display: grid; gap: 48px; }
.viewer__panel { display: grid; gap: 24px; align-items: center; }
.viewer__panel .phone { width: min(88vw, 360px); justify-self: center; }
.viewer__text { max-width: 30rem; order: -1; }
@media (min-width: 900px) { .viewer__text { order: 0; } }
.viewer__text h3 { font-size: 1.5rem; }
.viewer__text p { color: var(--tx-2); margin: 0; }
@media (min-width: 900px) {
  .viewer__panel { grid-template-columns: 380px 1fr; gap: 56px; }
  .viewer__panel .phone { width: 360px; }
}
/* With the script, one panel at a time. Without it, all four stay visible. */
.viewer.is-tabbed .viewer__panel[hidden] { display: none; }

/* ------------------------------------------------------------ programs */
.programs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 1000px) { .programs { grid-template-columns: 1fr 320px; gap: 48px; } .programs__shot { position: sticky; top: 100px; } }
.programs__shot { margin: 0; justify-self: center; width: min(80vw, 320px); }
.programs__shot figcaption { margin-top: 14px; font-size: .95rem; color: var(--tx-3); }
.tracks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.cart, .start, .fact, .faq { overflow-wrap: break-word; }
.cart {
  background: linear-gradient(#1a2233, #121a29); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px;
}
.cart > p { color: var(--tx-2); font-size: 1.02rem; }
.cart__head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-bottom: 14px; }
.cart__head > div { min-width: 0; }
.cart__head h3 { font-size: 1.45rem; margin: 0 0 .2em; }
.cart__head .kicker { margin: 0; }
.cart__glyph {
  flex: none; width: 3.75rem; height: 3.75rem; display: grid; place-items: center;
  border: 2px solid var(--cyan); border-radius: 12px; background: var(--sunken);
  font: 700 1rem var(--f-mono); color: var(--cyan); box-shadow: 0 0 22px -8px var(--cyan);
}
/* Track colours follow the app (track_palette.dart): C mint, C++ purple, Python cyan. */
.cart__glyph--c { border-color: var(--mint); color: var(--mint); box-shadow: 0 0 22px -8px var(--mint); }
.cart__glyph--p { border-color: var(--purple); color: var(--purple); box-shadow: 0 0 22px -8px var(--purple); }
.cart__glyph--py { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 22px -8px var(--cyan); }
.units { border-top: 1px solid var(--line); padding-top: 6px; }
.units__cols { display: grid; gap: 8px 24px; margin-top: 8px; }
@media (min-width: 560px) { .units__cols--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .units__cols:not(.units__cols--2) { grid-template-columns: repeat(3, 1fr); } }
.units__cols .kicker { margin: 10px 0 6px; }
.units ol { margin: 0; padding-left: 2.1em; color: var(--tx-2); font-size: .95rem; line-height: 1.5; }
.units li { padding: 2px 0; }
.units li::marker { font-family: var(--f-mono); color: var(--tx-faint); font-size: .85em; }

.start { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; padding: 20px 22px; background: rgba(16, 22, 36, .8); }
.start > p { color: var(--tx-2); font-size: 1.02rem; }
.start__list { margin: 0; display: grid; gap: 12px; }
.start__list dt { font: 600 1.05rem/1.3 var(--f-ui); color: var(--tx-bright); }
.start__list dd { margin: 2px 0 0; color: var(--tx-2); font-size: 1rem; }

/* ------------------------------------------------------------ trust */
.facts { display: grid; gap: 16px; }
@media (min-width: 720px) { .facts { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media (min-width: 1100px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--panel); border: 1px solid var(--rule); padding: 22px; border-radius: 0 0 var(--r) var(--r); border-top: 2px solid var(--brass); }
.fact h3 { font-size: 1.2rem; }
.fact p:last-child { margin: 0; color: var(--tx-2); font-size: 1rem; }
.fact__icon {
  min-width: 2.75rem; height: 2.75rem; padding: 0 .4em; display: inline-grid; place-items: center; margin-bottom: 14px;
  border: 2px solid var(--mint); border-radius: 10px; color: var(--mint); font: 700 .95rem var(--f-mono);
}

/* ------------------------------------------------------------ FAQ */
.split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: .8fr 1.2fr; gap: 56px; } }
.bolt--status { width: 96px; margin-top: 20px; }
.bolt--status img { width: 100%; image-rendering: pixelated; }
@media (min-width: 900px) { .bolt--status { width: 140px; } }
.faq { margin: 0; display: grid; }
.faq > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq > div:first-child { border-top: 1px solid var(--line); }
.faq dt { font: 600 1.15rem/1.3 var(--f-ui); color: var(--tx-bright); margin-bottom: 6px; }
.faq dd { margin: 0; color: var(--tx-2); }

/* ------------------------------------------------------------ footer */
.foot { border-top: 2px solid var(--brass-deep); padding: 40px 0 56px; background: #080e18; }
.foot__in { display: grid; gap: 6px; }
.foot__in img { width: 140px; margin-bottom: 10px; filter: drop-shadow(0 0 8px rgba(78, 226, 236, .25)); }
.foot p { margin: 0; color: var(--tx-3); }
.foot a { overflow-wrap: anywhere; }
.foot__top { display: inline-block; margin-top: 10px; padding: 10px 0; }

/* ------------------------------------------------------------ narrow phones */
@media (max-width: 419px) {
  .key { letter-spacing: .1em; font-size: .8rem; padding: .4em 1.1em; }
  .cart, .start { padding: 18px; }
  .cart__glyph { width: 3.1rem; height: 3.1rem; font-size: .9rem; }
  .cart__head h3 { font-size: 1.28rem; }
  .console { padding: 14px; }
  .alias__code code { font-size: .82rem; white-space: pre-wrap; }
  .alias__keys .tkey { min-width: 0; padding: 0 10px; }
}

@media print {
  .top, .hero__sky, .bolt, .symbols, .editor__keys, .alias__keys { display: none; }
  body { background: #fff; color: #000; }
}