/* generated by pronto from program.cue — do not edit */

/* The value vocabulary, composed from several sources, each bucket under
   its own source's upstream names. #scale says which sources those are;
   naming them here too would make this sentence false at the next
   registration. A rung, unlike a role, means only
   "the Nth one": it is what an author reaches for when no role fits,
   which is exactly the case that otherwise produces a number. Nothing
   here has an appearance, so nothing here has a dark twin — what
   changes with the appearance is which rung a role points at, one
   namespace up, where the twin is closed. */
:where(html) {
  --size-000: -.5rem;
  --size-00: -.25rem;
  --size-1: .25rem;
  --size-2: .5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-11: 7.5rem;
  --size-12: 10rem;
  --size-13: 15rem;
  --size-14: 20rem;
  --size-15: 30rem;
  --border-size-1: 1px;
  --border-size-2: 2px;
  --border-size-3: 5px;
  --border-size-4: 10px;
  --border-size-5: 25px;
  --shadow-1: 0 1px 2px -1px var(--shadow-ink-10);
  --shadow-2: 0 3px 5px -2px var(--shadow-ink-4), 0 7px 14px -5px var(--shadow-ink-6);
  --shadow-3: 0 -1px 3px 0 var(--shadow-ink-3), 0 1px 2px -5px var(--shadow-ink-3), 0 2px 5px -5px var(--shadow-ink-5), 0 4px 12px -5px var(--shadow-ink-6), 0 12px 15px -5px var(--shadow-ink-8);
  --shadow-4: 0 -2px 5px 0 var(--shadow-ink-3), 0 1px 1px -2px var(--shadow-ink-4), 0 2px 2px -2px var(--shadow-ink-4), 0 5px 5px -2px var(--shadow-ink-5), 0 9px 9px -2px var(--shadow-ink-6), 0 16px 16px -2px var(--shadow-ink-7);
  --shadow-5: 0 -1px 2px 0 var(--shadow-ink-3), 0 2px 1px -2px var(--shadow-ink-4), 0 5px 5px -2px var(--shadow-ink-4), 0 10px 10px -2px var(--shadow-ink-5), 0 20px 20px -2px var(--shadow-ink-6), 0 40px 40px -2px var(--shadow-ink-8);
  --shadow-6: 0 -1px 2px 0 var(--shadow-ink-3), 0 3px 2px -2px var(--shadow-ink-4), 0 7px 5px -2px var(--shadow-ink-4), 0 12px 10px -2px var(--shadow-ink-5), 0 22px 18px -2px var(--shadow-ink-6), 0 41px 33px -2px var(--shadow-ink-7), 0 100px 80px -2px var(--shadow-ink-8);
  --ease-1: cubic-bezier(.25,0,.5,1);
  --ease-2: cubic-bezier(.25,0,.4,1);
  --ease-3: cubic-bezier(.25,0,.3,1);
  --ease-4: cubic-bezier(.25,0,.2,1);
  --ease-5: cubic-bezier(.25,0,.1,1);
  --ease-in-1: cubic-bezier(.25,0,1,1);
  --ease-in-2: cubic-bezier(.50,0,1,1);
  --ease-in-3: cubic-bezier(.70,0,1,1);
  --ease-in-4: cubic-bezier(.90,0,1,1);
  --ease-in-5: cubic-bezier(1,0,1,1);
  --ease-out-1: cubic-bezier(0,0,.75,1);
  --ease-out-2: cubic-bezier(0,0,.50,1);
  --ease-out-3: cubic-bezier(0,0,.3,1);
  --ease-out-4: cubic-bezier(0,0,.1,1);
  --ease-out-5: cubic-bezier(0,0,0,1);
  --ease-in-out-1: cubic-bezier(.1,0,.9,1);
  --ease-in-out-2: cubic-bezier(.3,0,.7,1);
  --ease-in-out-3: cubic-bezier(.5,0,.5,1);
  --ease-in-out-4: cubic-bezier(.7,0,.3,1);
  --ease-in-out-5: cubic-bezier(.9,0,.1,1);
  --ease-elastic-out-1: cubic-bezier(.5,.75,.75,1.25);
  --ease-elastic-out-2: cubic-bezier(.5,1,.75,1.25);
  --ease-elastic-out-3: cubic-bezier(.5,1.25,.75,1.25);
  --ease-elastic-out-4: cubic-bezier(.5,1.5,.75,1.25);
  --ease-elastic-out-5: cubic-bezier(.5,1.75,.75,1.25);
  --ease-elastic-in-1: cubic-bezier(.5,-0.25,.75,1);
  --ease-elastic-in-2: cubic-bezier(.5,-0.50,.75,1);
  --ease-elastic-in-3: cubic-bezier(.5,-0.75,.75,1);
  --ease-elastic-in-4: cubic-bezier(.5,-1.00,.75,1);
  --ease-elastic-in-5: cubic-bezier(.5,-1.25,.75,1);
  --ease-elastic-in-out-1: cubic-bezier(.5,-.1,.1,1.5);
  --ease-elastic-in-out-2: cubic-bezier(.5,-.3,.1,1.5);
  --ease-elastic-in-out-3: cubic-bezier(.5,-.5,.1,1.5);
  --ease-elastic-in-out-4: cubic-bezier(.5,-.7,.1,1.5);
  --ease-elastic-in-out-5: cubic-bezier(.5,-.9,.1,1.5);
  --ease-step-1: steps(2);
  --ease-step-2: steps(3);
  --ease-step-3: steps(4);
  --ease-step-4: steps(7);
  --ease-step-5: steps(10);
  --ease-elastic-1: var(--ease-elastic-out-1);
  --ease-elastic-2: var(--ease-elastic-out-2);
  --ease-elastic-3: var(--ease-elastic-out-3);
  --ease-elastic-4: var(--ease-elastic-out-4);
  --ease-elastic-5: var(--ease-elastic-out-5);
  --ease-squish-1: var(--ease-elastic-in-out-1);
  --ease-squish-2: var(--ease-elastic-in-out-2);
  --ease-squish-3: var(--ease-elastic-in-out-3);
  --ease-squish-4: var(--ease-elastic-in-out-4);
  --ease-squish-5: var(--ease-elastic-in-out-5);
  --ease-spring-1: linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);
  --ease-spring-2: linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);
  --ease-spring-3: linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);
  --ease-spring-4: linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);
  --ease-spring-5: linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);
  --ease-bounce-1: linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);
  --ease-bounce-2: linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);
  --ease-bounce-3: linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);
  --ease-bounce-4: linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);
  --ease-bounce-5: linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);
  --ease-circ-in: cubic-bezier(.6,.04,.98,.335);
  --ease-circ-in-out: cubic-bezier(.785,.135,.15,.86);
  --ease-circ-out: cubic-bezier(.075,.82,.165,1);
  --ease-cubic-in: cubic-bezier(.55,.055,.675,.19);
  --ease-cubic-in-out: cubic-bezier(.645,.045,.355,1);
  --ease-cubic-out: cubic-bezier(.215,.61,.355,1);
  --ease-expo-in: cubic-bezier(.95,.05,.795,.035);
  --ease-expo-in-out: cubic-bezier(1,0,0,1);
  --ease-expo-out: cubic-bezier(.19,1,.22,1);
  --ease-quad-in: cubic-bezier(.55,.085,.68,.53);
  --ease-quad-in-out: cubic-bezier(.455,.03,.515,.955);
  --ease-quad-out: cubic-bezier(.25,.46,.45,.94);
  --ease-quart-in: cubic-bezier(.895,.03,.685,.22);
  --ease-quart-in-out: cubic-bezier(.77,0,.175,1);
  --ease-quart-out: cubic-bezier(.165,.84,.44,1);
  --ease-quint-in: cubic-bezier(.755,.05,.855,.06);
  --ease-quint-in-out: cubic-bezier(.86,0,.07,1);
  --ease-quint-out: cubic-bezier(.23,1,.32,1);
  --ease-sine-in: cubic-bezier(.47,0,.745,.715);
  --ease-sine-in-out: cubic-bezier(.445,.05,.55,.95);
  --ease-sine-out: cubic-bezier(.39,.575,.565,1);
  --layer-1: 1;
  --layer-2: 2;
  --layer-3: 3;
  --layer-4: 4;
  --layer-5: 5;
  --layer-important: 2147483647;
  --ratio-square: 1;
  --ratio-landscape: 4/3;
  --ratio-portrait: 3/4;
  --ratio-widescreen: 16/9;
  --ratio-ultrawide: 18/5;
  --ratio-golden: 1.6180/1;
  --min-touch: 24px;
  --base-text-size-2xl: 2.5rem;
  --base-text-size-lg: 1.25rem;
  --base-text-size-md: 1rem;
  --base-text-size-sm: 0.875rem;
  --base-text-size-xl: 2rem;
  --base-text-size-xs: 0.75rem;
  --base-text-lineHeight-loose: 1.75;
  --base-text-lineHeight-normal: 1.5;
  --base-text-lineHeight-relaxed: 1.625;
  --base-text-lineHeight-snug: 1.375;
  --base-text-lineHeight-tight: 1.25;
}

/* Design system values, from DESIGN.md's frontmatter, which the program
   reads as its design block: the roles the preset publishes, each colour
   carrying both appearances. A screen that redeclares one of these has
   forked the system — the shared layer is the only declaration. */
:root {
  --primary: light-dark(#000000, #e8efd6);
  --secondary: light-dark(#4a4a1f, #c3cc9a);
  --accent: light-dark(#784d1e, #e0b07a);
  --danger: light-dark(#b30000, #ff7a6b);
  --attention: light-dark(#a34d00, #f0a860);
  --neutral: light-dark(#3b3008, #141103);
  --chart-bar: light-dark(#fff8dc, #626343);
  --surface: light-dark(#e3efca, #23260f);
  --border: light-dark(#abb561, #5c6230);
  --surface-muted: light-dark(#cee3a3, #2e3314);
  --masthead: light-dark(#8f983b, #4a4f1d);
  --masthead-ink: light-dark(#1f1f00, #eef3db);
  --strip: light-dark(#abb561, #5c6230);
  --strip-ink: light-dark(#333300, #eef3db);
  --band: light-dark(#474d0f, #0f1103);
  --band-ink: light-dark(#ffffff, #f5c542);
  --side: light-dark(#b8c26e, #33371b);
  --table-head: light-dark(#00008b, #1d2a6b);
  --table-head-ink: light-dark(#ffffff, #e8efd6);
  --chip: light-dark(#d6d6d6, #3a3e1a);
  --chip-ink: light-dark(#000000, #e8efd6);
  --wordmark: light-dark(#ffffff, #141103);
  --wordmark-edge: light-dark(#1c1c1c, #eef3db);
  --wordmark-accent: light-dark(#f5c542, #f5c542);
  --date-bar: light-dark(#ffcc00, #8f7400);
  --zone-champion: light-dark(#22bb22, #1e5e1e);
  --zone-qualify: light-dark(#55dd55, #2e6b2e);
  --zone-playoff: light-dark(#99e699, #39573a);
  --zone-promotion: light-dark(#add8e6, #2b4a5c);
  --zone-relegation: light-dark(#ffb6c1, #6b2e38);
  --zone-none: light-dark(#d3d3d3, #33371b);
  --form-win: light-dark(#1f8a1f, #4fc24f);
  --form-draw: light-dark(#e0b000, #f0c84a);
  --form-loss: light-dark(#c41a1a, #ff6b5a);
  --form-rim: light-dark(#1c1c1c, #0a0b02);
  --shadow-ink-3: light-dark(hsl(60 40% 10% / 3%), hsl(60 40% 2% / 27%));
  --shadow-ink-4: light-dark(hsl(60 40% 10% / 4%), hsl(60 40% 2% / 28%));
  --shadow-ink-5: light-dark(hsl(60 40% 10% / 5%), hsl(60 40% 2% / 29%));
  --shadow-ink-6: light-dark(hsl(60 40% 10% / 6%), hsl(60 40% 2% / 30%));
  --shadow-ink-7: light-dark(hsl(60 40% 10% / 7%), hsl(60 40% 2% / 31%));
  --shadow-ink-8: light-dark(hsl(60 40% 10% / 8%), hsl(60 40% 2% / 32%));
  --shadow-ink-10: light-dark(hsl(60 40% 10% / 10%), hsl(60 40% 2% / 34%));
  --r-sm: 2px;
  --r-md: 3px;
  --r-full: 999px;
  --sp-sm: 4px;
  --sp-md: 8px;
  --sp-lg: 12px;
  --sp-xl: 20px;
  --motion-fast: 90ms;
  --motion-base: 140ms;
  --motion-ease: cubic-bezier(.2, 0, 0, 1);
  --motion-shift: 3px;
  --control-h-xs: 24px;
  --control-h-sm: 28px;
  --control-h: 32px;
  --control-h-lg: 40px;
  --control-pad-x: var(--sp-md);
  --measure-page: 960px;
  --measure-side: 200px;
  --measure-masthead: 72px;
  --type-display: 2.25rem;
  --type-title: 1.5rem;
  --type-subtitle: 1.0625rem;
  --type-body: 0.9375rem;
  --type-caption: 0.8125rem;
  --type-label: 0.75rem;
  --type-leading-title: 1.25;
  --type-leading-body: 1.5;
  --shell-bg: var(--neutral);
  --shell-fg: var(--primary);
  --shell-rule: var(--band);
  color-scheme: light dark;
}
/* The storybook stamps -dark frames as data-state values. colour-scheme
   is inherited and light-dark() reads it at the point of use, so
   flipping it on the frame resolves every token inside to its twin —
   both appearances reviewable on one device, with no second palette to
   drift from this one. */
.screen[data-state$="-dark"] {
  color-scheme: dark;
}

/* The terminal's chrome, styled here because the terminal ships no
   style: its markup carries stable classes and attributes, and this
   emission — program-owned, preset-derived, app-overridable — is the
   only stylesheet they have. Aesthetic values stay behind --shell-*
   variables so an app can retheme without repeating structure. */
body { margin: 0; font: var(--shell-font, 1rem/1.5 system-ui, sans-serif);
  background: var(--shell-bg); color: var(--shell-fg); }
/* Sticky, because the navigation stack restores a screen's scroll
   position on return — without it the way back to the primary
   navigation is scrolling up. A sticky element is transparent, so it
   needs its own background or content runs under it.

   One line, always: a wrapped strip is as tall as its rows and pushes
   the masthead below the fold, and any app with more routes than a
   phone's width holds would wrap at its natural size. It scrolls
   instead, and the scrollbar is hidden because a horizontal bar across
   the chrome reads as a second rule under the strip. */
body > nav { position: sticky; top: 0; z-index: 10;
  background: var(--shell-bg);
  display: flex; gap: var(--shell-nav-gap, 20px);
  flex-wrap: nowrap; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  padding: var(--shell-nav-pad, 14px 24px);
  font-weight: var(--shell-nav-weight, 600);
  border-bottom: 1px solid var(--shell-rule); }
body > nav::-webkit-scrollbar { display: none; }
body > nav a { color: inherit; text-decoration: none; }
body > nav a:hover { text-decoration: var(--shell-nav-hover, underline); }
/* The routes carry their own width — shrinking them is what would make
   the strip fit by breaking words, which is the wrap this avoids. The
   identity beside them keeps flex's default shrink, so it is the part
   that gives and ellipsises. 24px is check-visual's touch-target floor:
   nav labels are small type, so the box grows to the floor rather than
   the type growing with it. */
body > nav > a { white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; min-height: 24px; }
/* The signed-in person at the strip's far end, name-then-handle as a
   byline. All four ellipsis rules are load-bearing: nowrap alone
   cannot shrink, and min-width: 0 is what lets a flex item shrink
   below its content width at all. */
body > nav .shell-me { margin-inline-start: auto; display: flex; align-items: center; gap: var(--shell-nav-gap, 20px); min-width: 0; }
body > nav .shell-who { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 24px; }
body > nav .shell-who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body > nav .shell-who .name:empty { display: none; }
body > nav .shell-who .name:not(:empty)::after { content: " ·"; }
body > nav .shell-who .handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* De-emphasis comes from weight alone: layered opacity on --shell-fg
   lands below 4.5:1 contrast on both themes' nav ground. */
/* A short word is still a target: "sair" sets 23px of text, under the
   24px minimum a finger needs, so the box keeps the floor the label
   does not. */
body > nav .shell-signout { font-weight: 400;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; min-width: 24px; }

/* Not a preference to weigh against the design: durations collapse
   and the interpreter's exit path, which waits on running animations,
   finds none and removes immediately. */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0s; --motion-base: 0s; --motion-shift: 0px; }
}

/* Lifecycle slots the interpreter stamps at moments no screen can
   observe. Keyframes, not transitions: screens style rows with
   transition, and the cascade would hand them the whole shorthand.
   These bindings are deliberately rebindable — a screen may point
   them at its own keyframes; the interpreter waits on whatever
   animations actually run. */
@keyframes shell-item-enter {
  from { opacity: 0; transform: translateY(var(--motion-shift)); }
}
@keyframes shell-item-exit {
  to { opacity: 0; transform: scale(.98); }
}
[data-id][data-enter] { animation: shell-item-enter var(--motion-base) var(--motion-ease); }
/* forwards holds the departed row invisible for the frames between
   the animation ending and the interpreter removing the node. */
[data-id][data-exit] { animation: shell-item-exit var(--motion-base) var(--motion-ease) forwards; }
@keyframes shell-reveal {
  from { opacity: 0; transform: translateY(calc(var(--motion-shift) * -1)); }
}
.empty, .invalid, .store-error {
  animation: shell-reveal var(--motion-base) var(--motion-ease);
}
/* A screen arriving on the navigation stack; the one it replaces is
   hidden at once — overlapping two live screens would need a stacking
   layout the terminal does not own. */
.shell-screen { transition: opacity var(--motion-fast) var(--motion-ease); }
.shell-screen[data-entering] { opacity: 0; }

/* The login ceremony — the one full surface the terminal renders,
   on the same tokens as everything else. */
.shell-login { display: grid; place-items: center; min-height: 70vh; }
.shell-login form { display: grid; gap: 12px; width: min(320px, 90vw);
  padding: var(--sp-lg, 24px); border: 1px solid var(--shell-rule);
  border-radius: var(--r-md, 8px); background: var(--surface); }
.shell-login h1 { margin: 0; font-size: 1.25rem; }
.shell-login label { display: grid; gap: 4px; font-weight: 600; }
.shell-login input { font: inherit; padding: 8px 10px;
  border-radius: var(--r-sm, 6px); border: 1px solid var(--shell-rule);
  background: var(--surface); color: var(--shell-fg); }
.shell-login button { font: inherit; font-weight: 600; padding: 8px 10px;
  border-radius: var(--r-sm, 6px); border: 1px solid var(--shell-rule);
  background: var(--shell-fg); color: var(--shell-bg);
  cursor: pointer; min-height: 44px; }
.shell-login .login-hint { margin: 0; font-weight: 400; font-size: .875rem;
  color: var(--shell-fg); }
.shell-login .login-guest { background: var(--surface);
  color: var(--shell-fg); font-weight: 400; }
.shell-login .login-error { color: var(--danger); margin: 0; }