/* =====================================================================
   SAM — Open Plan, v6
   Blend, with each reference carrying one layer:
     Overtake    structure + interaction  (bands, pills, rolling labels, one easing)
     Wello       the grid + the object    (cells divided by fill, one padding
                                          step, no shadows, chips with a dot,
                                          ramped statistics, staged screens)
     Uncle Rudy  discipline + reveal      (alpha hierarchy, blur-lift reveals)
   v5 answers the two v4 mistakes:
     · the sky is ONE solid flood, not a gradient ramp, and it stays the only
       chromatic surface — the product's own warm palette inside the drawings
       and the sun accent on ink are untouched, because painting everything
       blue cost the page its contrast
     · the Today screen is a framed, staged object with props that overflow it
       rather than a bare screenshot, and the three statements sit in one cell
       grid with the visuals carrying them
   v6 moves the flood off the hero: at hero size sky-400 sits within a few
   points of the orange action's lightness, so the button vibrated and the
   largest object on the page was an empty field. Then it moved off the page
   altogether — one blue band left among paper ones read as a survivor, not a
   payoff — so both fields are paper, two depths of it. See DESIGN.md.
   ===================================================================== */

/* ------------------------------------------------------------- tokens */
:root {
  --ground:  #FFFFFF;
  --paper:   #F3F4F6;
  --paper-2: #E6E6E6;
  /* the hero's field: the app's own paper (#FFFEFB) stepped down until the
     product's screens still read above it, and warm enough that the action's
     cool fill is the only saturated thing on the first screen. */
  --paper-warm: #F0EBE0;
  /* the same paper one step deeper, so a second field reads as a band rather
     than as the hero repeating itself */
  --paper-warm-2: #E6DECB;
  --ink:     #17191C;
  --ink-2:   #41454C;
  --ink-3:   #6B7077;

  /* No longer a ground: this ramp survives only where the product uses it
     (chips, screen pills, the limits cell). --sky-ink and --sky-deep go on
     the pale sky fills; any paper field takes the page ink. The two page
     fields are --paper-warm and --paper-warm-2. */
  --sky-50:  #F5FAFF;
  --sky-100: #EAF3FD;
  --sky-200: #C6E0FB;
  --sky-300: #9FCAF6;
  --sky-400: #74B0EE;
  --sky-500: #4A93DF;
  --sky-600: #2C74C4;
  --sky-ink: #0B3A66;
  --sky-deep: #082A4C;
  --flood-text: var(--ink);

  /* the app's focus-card light: the product's own warmth, kept where the
     product is being drawn and on the ink surfaces. Never the page's flood. */
  --sun-100: #FDF2D8;
  --sun-200: #FBE3A2;
  --sun-300: #F7CE7F;
  --sun-400: #F2B94E;
  --sun-ink: #4A3208;

  --on-dark:   #FFFFFF;
  --on-dark-2: #FFFFFFB8;
  --on-dark-3: #FFFFFF7A;
  --dark-card: #FFFFFF0D;
  --dark-well: #FFFFFF17;
  --dark-recess: #0B0D10;

  /* the app's subject colours, taken from the product rather than invented */
  --maths-bg: #FBE3A2;  --maths: #5A3C06;
  --chem-bg:  #E7DCFB;  --chem:  #4B2E8A;
  --phys-bg:  #DCEAD3;  --phys:  #2F5A31;
  --late-bg:  #FBE0DE;  --late:  #9B2C22;

  /* the icon's cool note: used only inside dark surfaces and one link rule */
  --prism-teal: #7FC9C6;
  --prism-blue: #3E7BB8;

  /* the icon's ribbon teal, deepened until it can hold cream type on warm
     paper. This is the action's fill and the page's one saturated object;
     --petrol-mint is the same colour at full light, for the ink floor. */
  --petrol: #116A63;
  --petrol-lit: #18776F;
  --petrol-deep: #0B4A44;
  --petrol-mint: #A7DFD9;

  --sans: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --s1:10px; --s2:20px; --s3:30px; --s4:60px; --s5:80px;
  --section: clamp(52px, 6.6vw, 104px);
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --flood: 1500px;
  /* Wello's rhythm: one padding step for every cell, and a gap two-thirds of it */
  --cell-pad: 30px;
  --cell-gap: 12px;

  --r-xl: 54px; --r-lg: 42px; --r-md: 30px; --r-sm: 12px; --r-xs: 9px;
  --r-pill: 999px;

  /* two textures, each owned by one family of surfaces: grain on the flood,
     a dot grid on the ink cells. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E");
  --dots: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px);
  --hair: inset 0 0 0 1px rgba(23,25,28,.09);

  --shadow-card: 0 1px 2px rgba(23,25,28,.05), 0 18px 40px -26px rgba(23,25,28,.22);
  --shadow-lift: 0 2px 4px rgba(23,25,28,.06), 0 30px 60px -30px rgba(23,25,28,.30);

  --ease: cubic-bezier(.44,0,.56,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --interaction: 420ms;
  --roll: 320ms;
  --reveal: 760ms;
  --reveal-soft: 620ms;
  --stagger: 80ms;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--sun-300); color: var(--sun-ink); }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 16px; top: -70px; z-index: 100;
  background: var(--ink); color: var(--sun-100);
  padding: 12px 22px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; transition: top var(--interaction) var(--ease);
}
.skip:focus { top: 16px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}
.band--ink :where(a, button):focus-visible,
.b-agent :where(a, button):focus-visible,
.floor :where(a, button):focus-visible { outline-color: var(--sun-300); }

.muted { color: var(--ink-3); }

/* ---------------------------------------------------------------- type */
/* Display caps carry their own spacing rules: a heavy wide grotesque at 70px+
   closes its counters and fuses its word gaps if it inherits sentence-case
   tracking. Tracking stays slightly negative so the caps still lock as a block,
   word-spacing opens the gaps back up, and the leading is looser than the
   sentence-case value because nothing hangs below the baseline. */
.display-1 {
  font-size: clamp(2.6rem, 7.2vw, 6.2rem);
  line-height: .95;
  font-weight: 780;
  font-stretch: 116%;
  letter-spacing: -.012em;
  word-spacing: .05em;
  text-transform: uppercase;
  text-wrap: balance;
}
.display-2 {
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: .95;
  font-weight: 780;
  font-stretch: 112%;
  letter-spacing: -.022em;
  text-transform: uppercase;
  text-wrap: balance;
}
.lead {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.label {
  font-size: 13px; font-weight: 620; letter-spacing: .07em;
  text-transform: uppercase; line-height: 1.1;
}
.meta {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--ink-3);
}
.mono-label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .04em; line-height: 1.4;
}
.mono-sm { font-family: var(--mono); font-size: 11px; }
code { font-family: var(--mono); font-size: .93em; }
.key {
  font-family: var(--mono); font-size: 11px;
  background: var(--dark-well); border-radius: 6px; padding: 3px 7px;
  color: var(--on-dark);
}
.on-dark { color: var(--on-dark-2); }
.on-flood { color: var(--flood-text); }

/* -------------------------------------------------------------- layout */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gutter);
}
.band { padding-block: var(--section); }

.band--ink, .floor { background-color: var(--ink); color: var(--on-dark); }

/* THE FLOOD — one solid colour, no gradient and no texture: the flood is a
   field, and texture belongs to the action alone.
   Both floods are paper now, and the blue is gone from the grounds entirely.
   At hero size a mid-value blue field sat at the same lightness as the orange
   action, so the button vibrated instead of reading as the one thing to press;
   and the largest object on a page whose whole bet is the product screenshot
   became an empty rectangle. The sky ramp survives only where the product
   itself uses it: chips and pale fills, never as weather. */
.hero-card {
  background-color: var(--paper-warm);
  color: var(--flood-text);
  box-shadow: inset 0 0 0 1px rgba(23,25,28, calc(.075 * var(--hero-t, 1)));
}
/* the second paper field, a step deeper than the hero's: a band, not a repeat */
.band--paper { background-color: var(--paper-warm-2); color: var(--flood-text); }

/* the ink cells and the recessed panels carry the dot grid instead */
.band--ink, .floor, .b-agent {
  background-image: var(--dots);
  background-size: 22px 22px;
}

.region-head {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: var(--s2) var(--s4); align-items: end; margin-bottom: var(--s5);
}
.region-head .lead { max-width: 34ch; }

/* ---------------------------------------------------------------- nav */
/* The navigation floats fixed above everything as a frosted pill from the first
   paint, so the bar never changes shape under the reader. The hero card runs
   behind it to the top of the page; the pill keeps its own ground over whatever
   surface is beneath it. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  padding-block: 10px;
  /* the pill keeps the page's gutter at widths below the wrap's max measure, so
     it floats as a pill rather than bleeding into the viewport edge */
  padding-inline: var(--gutter);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  border-radius: var(--r-pill);
  padding: 6px 8px 6px 12px;
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(23,25,28,.08), 0 12px 30px -20px rgba(8,42,76,.45);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none;
}
.brand img { border-radius: 9px; display: block; }
.nav-links { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-links a {
  position: relative;
  font-size: 13px; font-weight: 620; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  padding: 9px 15px; border-radius: var(--r-pill);
  transition: color var(--interaction) var(--ease);
}
.nav-links a::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 7px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--roll) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------------ actions */
/* The primary action is the page's one textured object: a warm light carrying
   its own contrast from the deep stop and the near-black label, with grain
   blended into the fill and a lit top edge. On hover the fill deepens, a
   specular band crosses once, and the label rolls from what it does to what
   you get. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 13px; font-weight: 640;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1;
  text-decoration: none; border: 0; cursor: pointer; overflow: hidden;
  min-height: 52px; padding: 0 26px;
  border-radius: var(--r-pill);
  transition: background-color var(--interaction) var(--ease),
              color var(--interaction) var(--ease),
              padding var(--roll) var(--ease),
              transform var(--roll) var(--ease),
              box-shadow var(--interaction) var(--ease);
}
.btn:active { transform: scale(.985); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 12.5px; }
.btn--lg { min-height: 60px; padding: 0 32px; }

/* Petrol, not amber. `paper-warm` is a warm, low-chroma field, so a warm fill
   on it competes for the same hue at the same value and loses its edge — every
   orange put here kept reading as a smudge on the paper. The action instead
   takes the one colour the page already owns and does not show: the teal
   ribbon in the app icon. Cool against warm separates by hue as well as by
   value, so the pill needs no glow; and because the product shots are amber,
   the cool action frames them instead of fighting them. The body is a deep
   petrol so the cream label sits at 5.7:1. No lit rim, no specular line: a pale
   strip along the top of a pill this dark reads as a highlight someone drew,
   and it cheapens the object. The form is carried by the fill alone — one
   smooth fall from #1B7A72 to #0B4A44, the grain on top, and a single dark
   inset hairline so the edge is cut rather than glowing. */
.btn--primary {
  background-color: var(--petrol);
  background-image: var(--grain),
                    linear-gradient(180deg,
                      #1B7A72 0%, #116A63 34%, #116A63 62%, #0D5751 86%, var(--petrol-deep) 100%);
  background-size: 120px 120px, auto;
  background-blend-mode: soft-light, normal;
  color: var(--sun-100);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.26);
}
.btn--primary:hover {
  background-color: var(--petrol-lit);
  background-image: var(--grain),
                    linear-gradient(180deg,
                      #238C83 0%, #18776F 34%, #18776F 62%, #13635C 86%, #0F534D 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.32);
}
/* On the ink floor the same object lifts to the icon's mint, so the action
   never disappears into the surface it is sitting on — and the colour comes
   back at full strength in the last thing you see. Same rule: no light strip. */
.floor .btn--primary {
  background-color: var(--petrol-mint);
  background-image: var(--grain),
                    linear-gradient(180deg,
                      #B4E6E1 0%, #A7DFD9 34%, #A7DFD9 62%, #93CFC9 86%, #85BFB9 100%);
  color: #07302E;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.floor .btn--primary:hover {
  background-color: #B9EAE5;
  background-image: var(--grain),
                    linear-gradient(180deg,
                      #C6F0EB 0%, #B9EAE5 34%, #B9EAE5 62%, #A6DCD6 86%, #97CEC8 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}
/* the sweep: a single specular band crossing once on hover */
.btn--primary::after {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(104deg, transparent 34%, rgba(255,255,255,.3) 48%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 720ms var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(130%); }
.btn-tip { display: inline-grid; place-items: center; color: currentColor; opacity: .72; }

/* The GitHub action carries its mark instead of the word: the label unfurls
   out of the icon on hover, and the icon tilts as it opens. */
.btn--gh {
  /* at rest the mark alone fills a 60px circle: 34px icon + 13px either side */
  background: var(--ink); color: var(--on-dark);
  padding: 0 13px; gap: 0; min-height: 60px;
}
.btn--gh .gh-ico {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  transition: transform var(--roll) var(--ease), background-color var(--roll) var(--ease);
}
.btn--gh .gh-label {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width var(--roll) var(--ease), opacity var(--roll) var(--ease),
              margin-right var(--roll) var(--ease);
}
.btn--gh:hover .gh-ico { transform: rotate(-10deg) scale(1.08); background: rgba(255,255,255,.26); }
.btn--gh:hover .gh-label { max-width: 96px; opacity: 1; margin-right: 10px; }
.btn--gh--dark { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.26); }
.btn--gh--dark .gh-ico { background: rgba(255,255,255,.14); }
.btn--gh--dark:hover { background: var(--dark-well); }

/* the install line: the whole install section, as one row in the hero */
.brew {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: var(--s3);
  background: rgba(255,255,255,.92);
  border-radius: var(--r-pill); padding: 6px 8px 6px 18px;
  box-shadow: inset 0 0 0 1px rgba(23,25,28,.12);
}
.brew-os {
  font-size: 11.5px; font-weight: 620; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
}
.brew code { font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
.brew .btn--mini { background: var(--paper); }
.brew .btn--mini:hover { background: var(--paper-2); color: var(--ink); }

.btn--plain {
  background: rgba(255,255,255,.66); color: var(--ink);
  padding: 0 10px 0 24px;
  box-shadow: inset 0 0 0 1.5px rgba(23,25,28,.14);
}
.btn--plain:hover { padding-left: 18px; background: rgba(255,255,255,.86); }
.btn--mini {
  min-height: 38px; padding: 0 15px; font-size: 12px;
  background: var(--paper); color: var(--ink-2);
}
.btn--mini:hover { background: var(--paper-2); color: var(--ink); }
.btn--onDark { background: var(--dark-well); color: var(--on-dark); }
.btn--onDark:hover { background: #FFFFFF26; }

/* the rolling label: the label duplicated inside a clip, translating one pitch */
.roll-clip { display: block; overflow: hidden; height: 1.12em; }
.roll-stack { display: block; transition: transform var(--roll) var(--ease); }
.roll-line { display: block; height: 1.12em; line-height: 1.12; white-space: nowrap; }
.btn:hover .roll-stack { transform: translateY(-1.12em); }

.btn--icon { padding: 0 12px; }
.ico-stack { display: grid; place-items: center; }
.ico {
  grid-area: 1 / 1; display: grid; place-items: center;
  transition: opacity var(--roll) var(--ease), transform var(--roll) var(--ease);
}
.ico--done { opacity: 0; transform: scale(.7); }
.btn--icon.is-copied { background: var(--ink); color: var(--ground); }
.btn--icon.is-copied .ico--copy { opacity: 0; transform: scale(.7); }
.btn--icon.is-copied .ico--done { opacity: 1; transform: none; }
.btn--onDark.is-copied { background: var(--ground); color: var(--ink); }
.btn--onDark.is-copied .ico--copy { opacity: 0; transform: scale(.7); }
.btn--onDark.is-copied .ico--done { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ hero */
/* the drawing is measured and scaled to fit its stage; the clip is only a
   guard against a transform landing a fraction past the edge before measurement */
.hero { overflow-x: clip; }
/* The flood opens edge to edge and gathers into a field wider than the measure
   it holds, so the colour reads as the page's ground before it becomes a card.
   --hero-t is that gather: 0 at the top of the page, 1 once the reader has
   scrolled. Script scrubs it between those two states; where script is off the
   card opens already resting, and reduced motion keeps it there.
   The horizontal padding grows by the inset as the width gives it back, so the
   measure inside does not move or rewrap while the flood contracts. The top
   padding carries the fixed nav's clearance, because the flood now runs behind
   the nav all the way to the top of the page. */
.hero-card {
  --hero-pad-x: clamp(24px, 3.4vw, 56px);
  --hero-inset: clamp(16px, 2.6vw, 52px);
  --hero-t: 1;
  position: relative;
  width: calc(100% - 2 * var(--hero-inset) * var(--hero-t));
  max-width: calc(100% + (var(--flood) - 100%) * var(--hero-t));
  margin-inline: auto;
  border-radius: calc(var(--r-xl) * var(--hero-t));
  padding: clamp(104px, 9vw, 140px)
           calc(var(--hero-pad-x) + var(--hero-inset) * (1 - var(--hero-t)))
           clamp(84px, 9vw, 112px);
  overflow: hidden;
  isolation: isolate;
}
/* With script available the first paint is already open, so the card never
   flashes its resting measure before the script puts it at the top of the page. */
@media (scripting: enabled) {
  .hero-card { --hero-t: 0; }
}
.hero-inner { position: relative; z-index: 1; max-width: var(--wrap); margin-inline: auto; }
.hero-title {
  font-size: clamp(2.3rem, 5.4vw, 4.8rem);
  /* wide enough that the two balanced lines sit in the measure rather than
     ending a third of the way short of it */
  max-width: 23ch;
  color: var(--flood-text);
}
.hero-lead { margin-top: var(--s3); max-width: 36ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hero-actions--center { justify-content: center; }

.figures {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s3); margin-top: clamp(38px, 4.4vw, 60px);
}
.figures li { border-top: 1.5px solid rgba(23,25,28,.20); padding-top: 15px; }
.figures b {
  display: block; font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 750; font-stretch: 108%; line-height: 1; letter-spacing: -.02em;
  color: var(--flood-text);
}
.figures span {
  display: block; margin-top: 8px; font-size: 11.5px;
  font-weight: 620; letter-spacing: .06em; text-transform: uppercase;
  color: var(--flood-text);
}

/* the object rises over the flood's lower edge and dissolves at its base */
.hero-stage {
  position: relative; z-index: 2;
  margin-top: clamp(-72px, -6.6vw, -34px);
  display: flex; justify-content: center;
  padding-inline: var(--gutter);
}
.today-fig {
  /* the figure is the picture's final box: the width scales with the stage, the
     aspect ratio reserves the height, and the frame inside is scaled to match */
  position: relative;
  flex: 0 0 auto;
  width: min(100%, 1060px);
  aspect-ratio: 1060 / 812;
  margin: 0;
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
/* the frame: a flat ink bezel around the screen, so the object holds its own
   edge by fill rather than by a shadow the flood would swallow. It keeps its
   intrinsic 1060×812 layout and is scaled as one object, like an image. */
.today-frame {
  position: absolute; top: 0; left: 0;
  width: 1060px;
  background: var(--ink); border-radius: 34px; padding: 10px;
  transform-origin: top left;
  transform: scale(var(--fit, 1));
}

/* ---- and inside the frame, the pictured application, not this page ---- */
.today {
  width: 1040px;
  background: #F1F2F4;
  border-radius: 24px;
  overflow: hidden;
  color: #1A1C1F;
  -webkit-font-smoothing: antialiased;
}
.today-body { padding: 32px 32px 34px; }
.today-top { display: flex; align-items: baseline; gap: 13px; }
.today-hi { font-size: 31px; font-weight: 720; letter-spacing: -.032em; line-height: 1.06; color: #17191C; }
.today-date { font-size: 13px; font-weight: 500; letter-spacing: .01em; color: #7A7F87; }

/* the app's own small caps, distinct from the page's mono labels */
.micro-label {
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 660; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.4; color: var(--ink-3);
}

.focus-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(102deg, #FFFEFB 0%, #FFFAEE 30%, #FDF0CF 64%, #F7DA96 100%);
  border-radius: 22px;
  padding: 24px 26px 25px;
  margin-top: 18px;
  box-shadow: inset 0 0 0 1px rgba(90,60,6,.055), inset 0 1px 0 rgba(255,255,255,.55);
}
.focus-head { display: flex; align-items: center; gap: 11px; }
.focus-head .micro-label { color: #6D4A0C; }
.pill.focus-opt {
  margin-left: auto; height: 32px; padding: 0 14px;
  font-size: 12.5px; font-weight: 580;
  background: rgba(255,255,255,.58); color: #33363B;
  box-shadow: inset 0 0 0 1px rgba(23,25,28,.065);
}
.focus-title {
  font-size: 32px; font-weight: 720; letter-spacing: -.03em; line-height: 1.15;
  margin-top: 16px; max-width: 26ch; color: #201A0D;
  text-wrap: balance;
}
.focus-est { margin-top: 11px; color: #4F3B12; }
.focus-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.focus-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.focus-lead { min-width: 0; }
.focus-meter { text-align: center; flex: 0 0 auto; padding-bottom: 2px; }
.focus-pct { font-size: 29px; font-weight: 720; letter-spacing: -.03em; line-height: 1; margin-top: -3px; color: #201A0D; }
.focus-sub { font-size: 11.5px; font-weight: 500; color: #6D5222; margin-top: 6px; }
/* the meter draws once, when the figure arrives */
.meter-arc { stroke-dashoffset: 100; }
.is-drawn .meter-arc { stroke-dashoffset: 93; }
.meter-arc { transition: stroke-dashoffset 1150ms var(--ease-out) 240ms; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--r-pill); padding: 0 16px; height: 40px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.pill--dark { background: #17191C; color: #FFFFFF; }
.pill--ghost { background: rgba(23,25,28,.075); color: #26241F; }
.pill--line { background: rgba(255,255,255,.78); color: #26241F; box-shadow: inset 0 0 0 1px rgba(23,25,28,.14); }

.chip {
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill); padding: 3px 10px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.chip--maths { background: var(--maths-bg); color: var(--maths); }
.chip--chem  { background: var(--chem-bg);  color: var(--chem); }
.chip--phys  { background: var(--phys-bg);  color: var(--phys); }
.badge-late {
  display: inline-flex; align-items: center; white-space: nowrap;
  border-radius: var(--r-pill); padding: 3px 9px;
  background: var(--late-bg); color: var(--late);
  font-size: 10.5px; font-weight: 600;
}
/* inside the screen, the app's chips run a touch larger than the page's */
.today .chip { padding: 4px 11px; font-size: 11.5px; font-weight: 620; }
.today .badge-late { padding: 4px 9px; font-size: 10.5px; font-weight: 620; }

.today-grid { display: grid; grid-template-columns: minmax(0,1.58fr) minmax(0,1fr); gap: 18px; margin-top: 18px; align-items: start; }
.panel { background: #FFFFFF; border: 1px solid rgba(23,25,28,.055); border-radius: 22px; padding: 22px; }
/* Coming up is not a second card: its heading sits on the ground and only the
   date itself is raised, so the queue stays the one heavy object */
.panel.coming { background: transparent; border: 0; border-radius: 0; padding: 0; }
.panel-head { display: flex; align-items: center; gap: 11px; }
.well { width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto; background: #FCE5EB; color: #A43E55; display: grid; place-items: center; }
.well--plan { font-size: 14px; font-weight: 720; }
.panel-title { font-size: 19px; font-weight: 680; letter-spacing: -.022em; color: #17191C; }
.panel-sub { font-size: 11.5px; color: #7A7F87; margin-top: 3px; }
.queue-add { margin-left: auto; height: 32px; padding: 0 13px; font-size: 12.5px; font-weight: 600; background: #F0F1F4; color: #2F3339; }
.tabs-static { display: flex; align-items: center; gap: 2px; background: #F0F1F4; padding: 4px; border-radius: var(--r-pill); margin-top: 16px; overflow: hidden; }
.tabs-static span { padding: 5px 11px; border-radius: var(--r-pill); font-size: 12px; line-height: 1.5; color: #70757D; white-space: nowrap; }
.tabs-static .tab-on { background: #FFFFFF; color: #17191C; font-weight: 620; box-shadow: 0 1px 2px rgba(23,25,28,.10); }
.queue-count { font-size: 12px; color: #7A7F87; margin-top: 13px; }
.queue-rows { margin-top: 3px; }
.queue-rows li { display: flex; align-items: center; gap: 10px; padding: 8px 1px; border-top: 1px dashed #E4E6EA; font-size: 12.5px; }
.queue-rows li:first-child { border-top: 0; }
.row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #25282D; font-size: 14px; letter-spacing: -.005em; }
.row-est { color: #747A82; font-size: 12.5px; flex: 0 0 auto; }
.row-x { color: #8A8F97; font-size: 14px; line-height: 1; flex: 0 0 auto; }
.row-start { height: 30px; padding: 0 11px; font-size: 12px; font-weight: 600; flex: 0 0 auto; background: #FFFFFF; color: #1E2126; box-shadow: inset 0 0 0 1px #DDE0E5; }
.date-card { background: #FFFFFF; border: 1px solid rgba(23,25,28,.06); border-radius: 20px; padding: 16px; margin-top: 16px; }
/* the dated block lays its parts out inline, as the app's own Today screen does */
.today .date-block { display: flex; align-items: baseline; justify-content: center; gap: 7px; width: 100%; border-radius: 13px; padding: 10px 0 12px; text-align: center; background: linear-gradient(102deg, #FAE7BB 0%, #F8D991 55%, #F2C368 100%); color: #211A08; }
.today .date-block span { display: inline; font-size: 12px; font-weight: 620; color: #6D4F16; }
.today .date-block b { display: inline; font-size: 30px; font-weight: 720; letter-spacing: -.035em; line-height: 1; }
.date-card .chip { margin-top: 13px; }
.date-title { font-size: 19px; font-weight: 680; letter-spacing: -.02em; margin-top: 12px; color: #17191C; }
.date-meta { font-size: 12.5px; color: #7A7F87; margin-top: 4px; }
.date-meta .meta-dot { opacity: .55; padding: 0 1px; }
.date-meta .date-today { color: #5A3C06; font-weight: 600; }
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
.pager-btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(23,25,28,.045); color: #4A4F57; }
.pager-count { font-family: var(--mono); font-size: 11.5px; color: #7A7F87; }

/* ------------------------------------------------- the surface switch */
.switch {
  display: grid; grid-template-columns: 292px minmax(0,1fr);
  gap: clamp(24px, 3vw, 48px);
  background: var(--dark-card); border-radius: var(--r-md);
  padding: clamp(20px, 3vw, 38px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.rail { display: flex; flex-direction: column; gap: var(--s3); }
.rail-record { padding: 18px 20px; border-radius: var(--r-sm); background: var(--dark-well); }
.rail-key { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); }
.rail-id { display: block; margin-top: 8px; font-size: 13px; color: var(--sun-300); }
.rail-title { display: block; margin-top: 6px; font-size: 13px; font-weight: 620; color: var(--on-dark); line-height: 1.3; }
.rail-pills { display: flex; flex-direction: column; gap: 4px; }
.rpill {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer; border: 0;
  background: transparent; color: var(--on-dark-2);
  padding: 12px 20px; border-radius: var(--r-sm);
  transition: background-color var(--interaction) var(--ease), color var(--interaction) var(--ease);
}
.rpill-name { font-size: 13px; font-weight: 640; letter-spacing: .07em; text-transform: uppercase; }
.rpill-what { font-family: var(--mono); font-size: 10.5px; color: var(--on-dark-3); }
.rpill:hover { background: var(--dark-well); color: var(--on-dark); }
.rpill[aria-selected="true"] { background: var(--ground); color: var(--ink); }
.rpill[aria-selected="true"] .rpill-what { color: var(--ink-3); }

/* every pane shares one cell, so switching never moves the page */
.stage { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: 'pane'; min-height: 320px; align-content: stretch; }
/* the pane is one column: the rendering, then the line that reads it. The row
   takes its height from the tallest drawing, so switching tabs never changes the
   band; a shorter drawing leaves its air beneath rather than pushing the copy
   away from it. */
.stage-pane {
  grid-area: pane; display: flex; flex-direction: column; min-width: 0;
  gap: clamp(16px, 2vw, 22px);
}
.stage-pane[hidden] { display: none; }
.stage-pane.is-entering { animation: paneIn 420ms var(--ease-out) both; }
@keyframes paneIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* the reading, in the same column as the rendering it reads: the name as a
   pill, the line about it, and what it is in the content model */
.stage-copy {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  margin-top: auto;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12);
}
.stage-key {
  font-size: 11px; font-weight: 620; letter-spacing: .09em; text-transform: uppercase;
  background: var(--dark-well); color: var(--sun-300);
  border-radius: var(--r-pill); padding: 5px 12px;
}
.stage-say { font-size: .9375rem; color: var(--on-dark-2); }
.stage-foot {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px;
  color: var(--on-dark-3); line-height: 1.7; text-align: right;
}
.stage-foot code { color: var(--sun-300); }
.surface-demo { min-width: 0; }

.miniwin { background: var(--ground); border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0,0,0,.8); }

/* ---- The desktop app, drawn as its Today screen: the product's own pink
   masthead and icon rail, the focus card in its warm light with the coverage
   meter, and the day's queue. The screen is the product, not a diagram of it. */
.miniwin--desk {
  width: 100%; max-width: 860px; margin-inline: auto;
  background: #F2F4F7; border-radius: 14px; color: #1A1C1F; line-height: 1.3;
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.18);
}
.app-top {
  display: flex; align-items: center; gap: 12px;
  height: 36px; padding-inline: 13px;
  background: #F9DDE5; border-bottom: 1px solid rgba(23,25,28,.045);
}
.app-brand { display: flex; align-items: center; gap: 7px; min-width: 0; }
.app-mark { width: 17px; height: 17px; border-radius: 5px; display: block; flex: 0 0 auto; }
.app-brand b { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; }
.app-week { font-size: 10.5px; color: #817077; white-space: nowrap; }

.app-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #4D4045; }
.app-tool { display: grid; place-items: center; width: 13px; height: 13px; }
.app-tool svg { width: 12px; height: 12px; display: block; }
.app-search {
  display: flex; align-items: center; gap: 6px;
  width: 144px; height: 24px; padding: 0 8px;
  border-radius: var(--r-pill); background: #F4CBD7;
  color: #6E5B61; font-size: 10px;
}
.app-search svg { width: 11px; height: 11px; flex: 0 0 auto; opacity: .85; }
.app-search kbd {
  margin-left: auto; padding: 1px 4px; border-radius: 4px;
  background: #FBE7EC; box-shadow: inset 0 0 0 1px rgba(23,25,28,.05);
  font-family: var(--mono); font-size: 8px; color: #6E5B61;
}

.app-shell { display: grid; grid-template-columns: 60px minmax(0,1fr); }
.app-rail {
  display: flex; flex-direction: column; align-items: center; gap: 17px;
  margin: 9px 5px 10px 8px; padding: 8px 0 9px;
  background: var(--ground); border: 1px solid #EBEBEF; border-radius: 17px;
  box-shadow: 0 1px 2px rgba(23,25,28,.03);
}
.app-date {
  width: 31px; height: 31px; border-radius: 9px; flex: 0 0 auto;
  background: #17191C; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; gap: 2px;
}
.app-date b { font-size: 12.5px; font-weight: 700; letter-spacing: -.02em; }
.app-date span { font-size: 6.5px; font-weight: 620; letter-spacing: .1em; }
.app-rail-ico { display: grid; place-items: center; width: 14px; height: 14px; color: #4A4F56; opacity: .88; }
.app-rail-ico svg { width: 13px; height: 13px; display: block; }
.app-rail-ico.is-on { color: #17191C; opacity: 1; }
.app-rail-gap { flex: 1 1 auto; min-height: 10px; }

.app-canvas { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; align-content: start; padding: 10px 14px 13px 11px; }
.app-greet { display: flex; align-items: baseline; gap: 8px; padding: 1px 2px 0; }
.app-greet b { font-size: 15px; font-weight: 750; letter-spacing: -.022em; }
.app-greet span { font-size: 9.5px; color: #7A7F87; }

.app-hero {
  position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 100px; gap: 8px;
  padding: 13px 15px; border-radius: 15px; overflow: hidden;
  background: linear-gradient(104deg, #FFFFFF 0%, #FEF9EB 38%, #F8D68C 100%);
  box-shadow: inset 0 0 0 1px rgba(90,60,6,.055);
}
.app-eyebrow { display: flex; align-items: center; gap: 9px; }
.app-chip {
  display: inline-flex; align-items: center; height: 16px; padding: 0 8px;
  border-radius: var(--r-pill); background: #F3D998; color: #5F4510;
  font-size: 9px; font-weight: 700; white-space: nowrap;
}
.app-kicker {
  font-size: 8px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: #77632F; white-space: nowrap;
}
.app-hero-title {
  margin-top: 8px; max-width: 26ch;
  font-size: 17.5px; font-weight: 750; line-height: 1.15; letter-spacing: -.023em;
  color: #17181A;
}
.app-est {
  margin-top: 6px; font-size: 8px; font-weight: 650; letter-spacing: .095em;
  text-transform: uppercase; color: #6C5A2C;
}
.app-est b { font-size: 9px; letter-spacing: .02em; margin-left: 2px; }
.app-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.app-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 11px;
  border-radius: var(--r-pill); background: #E3E5E9; color: #202225;
  font-size: 9.5px; font-weight: 600; white-space: nowrap;
}
.app-btn svg { flex: 0 0 auto; }
.app-btn--dark { background: #17191C; color: #FFFFFF; }
.app-btn--line { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(23,25,28,.15); }

.app-hero-side { position: relative; display: flex; align-items: center; justify-content: center; padding-top: 18px; }
.app-not {
  position: absolute; top: -1px; right: 0;
  display: inline-flex; align-items: center; height: 19px; padding: 0 8px;
  border-radius: var(--r-pill); background: #E5E6E9; color: #4A4B50;
  font-size: 8.5px; font-weight: 600;
}
.app-gauge { width: 88px; text-align: center; }
.app-gauge svg { display: block; width: 86px; height: 48px; margin-inline: auto; }
.app-arc { stroke-dashoffset: 93; transition: stroke-dashoffset 1100ms var(--ease-out) 220ms; }
.miniwin--desk:not(.is-drawn) .app-arc { stroke-dashoffset: 100; }
.app-gauge b {
  display: block; margin-top: -4px;
  font-size: 15px; font-weight: 750; letter-spacing: -.025em; line-height: 1;
}
.app-gauge span { display: block; margin-top: 2px; font-size: 7.5px; color: #6C5A2C; }

.app-card {
  min-width: 0; padding: 11px 12px 12px; border-radius: 15px; background: var(--ground);
  box-shadow: inset 0 0 0 1px rgba(23,25,28,.035);
}
.app-card-head { display: flex; align-items: center; gap: 8px; }
.app-well {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 8px;
  background: #FBE4EA; color: #B65A76;
}
.app-well svg { width: 13px; height: 13px; display: block; }
.app-card-title h4 { margin: 0; font-size: 13px; font-weight: 750; letter-spacing: -.012em; }
.app-card-title p { margin-top: 1px; font-size: 9px; color: #83878E; }
.app-add {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  background: #EFEFF2; color: #2A2C2F; font-size: 9px; font-weight: 600; white-space: nowrap;
}

.app-now { margin-top: 9px; padding: 9px 11px 8px; border-radius: 11px; background: #E2E6EB; }
.app-now-top { display: flex; align-items: baseline; gap: 8px; }
.app-now-title {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.012em;
}
.app-min { font-size: 12.5px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; }
.app-min i { margin-left: 2px; font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: 0; color: #666B72; }
.app-now-sub { display: block; margin-top: 1px; font-size: 8.5px; color: #71767D; }
.app-now-actions { display: flex; align-items: center; gap: 13px; margin-top: 7px; font-size: 9px; color: #3C4046; }
.app-act { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.app-act svg { flex: 0 0 auto; opacity: .85; }

.app-plan-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 9px 2px 6px; font-size: 8.5px; color: #7B8088;
}
.app-plan-label span:first-child { font-weight: 600; color: #53585F; }
.app-plan { display: grid; grid-template-columns: minmax(0,1fr); gap: 5px; }
.app-plan li {
  min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; border-radius: 10px; background: #E8EAEE;
}
.app-plan li > span:first-child { flex: 1 1 auto; min-width: 0; }
.app-plan b {
  display: block; font-size: 11.5px; font-weight: 650; letter-spacing: -.005em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-plan em { display: block; margin-top: 1px; font-style: normal; font-size: 8.5px; line-height: 1.25; color: #71767D; }

.minirows { display: grid; gap: 8px; }
.minirows li {
  display: flex; align-items: center; gap: 10px;
  background: #FBFBFC; border: 1px solid #E9EBEF; border-radius: var(--r-xs);
  padding: 10px 12px; font-size: 12.5px;
}
.minirows-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.minirows .mono-label { color: var(--ink-3); flex: 0 0 auto; }

/* The palette is the one light window on this band: the product's own naming
   surface, not a dark miniature. A field with one verb, then the vocabulary it
   names — commands, screens, kinds — scattered like notes you could pick from,
   not sorted into a table. */
.palette {
  background: #EDEEF0; color: var(--ink);
  border-radius: var(--r-sm); padding: 18px;
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.5);
}
.palette-top { display: flex; align-items: center; gap: 14px; }
.palette-field {
  display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px;
  height: 56px; padding: 0 16px;
  background: var(--ground); border-radius: var(--r-xs);
  box-shadow: 0 1px 2px rgba(23,25,28,.07), 0 10px 24px -18px rgba(23,25,28,.45);
  font-size: .9375rem; color: var(--ink-3);
}
.palette-field svg { color: var(--ink-3); flex: 0 0 auto; }
.palette-ask { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret {
  width: 1.5px; height: 17px; border-radius: 2px;
  animation: blink 1.15s steps(1, end) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.palette .caret { background: var(--ink); height: 16px; flex: 0 0 auto; }
.palette-run {
  flex: 0 0 auto; background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-pill); padding: 12px 18px;
  font-size: 12.5px; font-weight: 650; letter-spacing: .005em;
}
.palette-canvas { padding: 22px 12px 2px; }
.palette-cloud { display: flex; flex-direction: column; gap: 22px; }
.palette-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.palette-cloud .chip {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  width: auto; border-radius: 10px; padding: 12px 14px; white-space: normal;
  background: var(--ground); color: var(--ink);
  font-size: 13px; font-weight: 620; line-height: 1.3; letter-spacing: -.005em;
  box-shadow: 0 2px 4px rgba(23,25,28,.05), 0 12px 20px -10px rgba(23,25,28,.5);
  transform: translateY(var(--lift, 0)) rotate(var(--tilt, 0));
}
/* every chip sits a degree or two off square, the way the objects in a working
   palette end up; each row gets its own set so no two rows share a lean */
.palette-row:nth-child(1) .chip:nth-child(1) { --tilt: -2.2deg; --lift: 0px; }
.palette-row:nth-child(1) .chip:nth-child(2) { --tilt: 1.6deg; --lift: 5px; }
.palette-row:nth-child(1) .chip:nth-child(3) { --tilt: -1.2deg; --lift: -3px; }
.palette-row:nth-child(1) .chip:nth-child(4) { --tilt: 2.3deg; --lift: 6px; }
.palette-row:nth-child(1) .chip:nth-child(5) { --tilt: -1.7deg; --lift: 2px; }
.palette-row:nth-child(2) .chip:nth-child(1) { --tilt: 1.5deg; --lift: 3px; }
.palette-row:nth-child(2) .chip:nth-child(2) { --tilt: -2deg; --lift: -4px; }
.palette-row:nth-child(2) .chip:nth-child(3) { --tilt: 1.1deg; --lift: 2px; }
.palette-row:nth-child(2) .chip:nth-child(4) { --tilt: -1.6deg; --lift: 5px; }
.palette-row:nth-child(2) .chip:nth-child(5) { --tilt: 2deg; --lift: 0px; }
.palette-row:nth-child(3) .chip:nth-child(1) { --tilt: -1.4deg; --lift: 4px; }
.palette-row:nth-child(3) .chip:nth-child(2) { --tilt: 2.1deg; --lift: 0px; }
.palette-row:nth-child(3) .chip:nth-child(3) { --tilt: -1.8deg; --lift: 5px; }
.palette-row:nth-child(3) .chip:nth-child(4) { --tilt: 1.3deg; --lift: -3px; }
.palette-row:nth-child(3) .chip:nth-child(5) { --tilt: -2deg; --lift: 3px; }
.palette-row:nth-child(4) .chip:nth-child(1) { --tilt: 1.8deg; --lift: -2px; }
.palette-row:nth-child(4) .chip:nth-child(2) { --tilt: -1.3deg; --lift: 3px; }
.palette-row:nth-child(4) .chip:nth-child(3) { --tilt: 1.7deg; --lift: 0px; }
.palette-row:nth-child(4) .chip:nth-child(4) { --tilt: -2.1deg; --lift: 4px; }
.palette-row:nth-child(4) .chip:nth-child(5) { --tilt: 1.2deg; --lift: -3px; }
/* bands start a little in from one another instead of on one margin */
.palette-row:nth-child(2) { transform: translateX(12px); }
.palette-row:nth-child(3) { transform: translateX(0); }
.palette-row:nth-child(4) { transform: translateX(18px); }
.chip--cmd { padding-block: 13px !important; }
.chip-note {
  display: block; font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .085em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink-3); opacity: .95;
}
.chip-title { display: block; }
.palette-cloud .chip--screen, .palette-cloud .chip--kind { flex-direction: column-reverse; }
.chip--screen { background: var(--sky-200); color: var(--sky-deep); }
.chip--screen .chip-note { color: var(--sky-ink); }
.chip--lav { background: var(--chem-bg); color: var(--chem); }
.chip--lav .chip-note { color: var(--chem); }
.chip--mint { background: var(--phys-bg); color: var(--phys); }
.chip--mint .chip-note { color: var(--phys); }
.chip--peach { background: var(--late-bg); color: var(--late); }
.chip--peach .chip-note { color: var(--late); }

.editor { display: flex; flex-direction: column; background: var(--dark-recess); border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0,0,0,.8); }
.editor-bar { display: flex; align-items: center; gap: 14px; height: 46px; padding-inline: 18px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.10); }
/* The records it holds open as small tabs; the ones not open stay out of the
   way. The file itself is the subject, not the tab strip. */
.filetabs { display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; }
.file {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 10px; border-radius: 7px;
  font-family: var(--mono); font-size: 10.5px; color: var(--on-dark-3);
}
.file b { font-weight: 500; color: var(--on-dark-3); opacity: .75; }
.file.is-on { background: rgba(255,255,255,.08); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.file.is-on b { color: var(--sun-300); opacity: 1; }
/* the record the watcher just wrote, at reading size, with room to wrap */
.editor .code--records {
  position: relative; padding: 12px 0 22px; overflow: hidden;
  display: grid; align-content: start;
}
.record {
  display: grid; grid-template-columns: 42px minmax(0,1fr);
  align-items: start; padding: 5px 22px 5px 0;
}
.record .ln {
  margin: 0; padding-right: 14px; text-align: right; user-select: none;
  font-size: 10.5px; line-height: 1.95; color: var(--on-dark-3);
}
.record-body {
  display: block; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.95; color: #C9D1DA;
}
.record:not(.is-live) .record-body { opacity: .42; }
.record:not(.is-live) .ln { opacity: .6; }
.record.is-live {
  background: linear-gradient(90deg, rgba(242,185,78,.11), rgba(242,185,78,.035) 62%, transparent);
  box-shadow: inset 2px 0 0 var(--sun-400);
}
.record.is-live .ln { color: var(--sun-300); }
.code--records::after {
  content: ""; position: absolute; inset: auto 0 0; height: 26px;
  background: linear-gradient(transparent, var(--dark-recess)); pointer-events: none;
}
.tok-p { color: rgba(255,255,255,.33); }
.tok-k { color: #9CC4E8; }
.tok-s { color: #F1F4F8; }
.tok-n { color: var(--sun-300); }
.tok-write {
  background: rgba(242,185,78,.26); color: var(--sun-100);
  border-radius: 3px; padding: 1px 3px; margin-inline: -1px;
  box-shadow: 0 0 0 1px rgba(242,185,78,.38);
}
.editor-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 18px; border-top: 1px solid rgba(255,255,255,.09);
  font-family: var(--mono); font-size: 10.5px; color: var(--on-dark-3);
}
.editor-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dotrow { display: inline-flex; gap: 5px; }
.dotrow i { width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF33; display: block; }
.watcher {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--prism-teal);
}
.watcher i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block; animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.code {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
  padding: 20px 22px; overflow-x: auto; white-space: pre;
  color: var(--ink); tab-size: 2;
}
.band--ink .code, .editor .code, .terminal-panel .code, .prompt-block .code { color: var(--on-dark); }
.ln { color: var(--on-dark-3); margin-right: 14px; user-select: none; }
.pr { color: var(--prism-teal); }

.terminal-panel { background: var(--dark-recess); border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0,0,0,.8); }
.terminal-bar { display: flex; align-items: center; gap: 12px; height: 46px; padding-inline: 18px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.10); }
.terminal-title { font-family: var(--mono); font-size: 11px; color: var(--on-dark-2); white-space: nowrap; }
.terminal-path { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 10px; color: var(--on-dark-3); }
.terminal-body {
  padding: 14px 20px 18px; font-family: var(--mono); font-size: 12px; line-height: 1.68;
  color: #C2C9D1;
}
.term-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; min-width: 0; }
.term-line code { font-family: inherit; font-size: inherit; color: var(--on-dark); background: none; padding: 0; white-space: nowrap; }
.term-line--gap { margin-top: 11px; }
.term-meta { margin: 2px 0 6px; color: var(--on-dark-3); font-size: 10.5px; }
.term-table { display: grid; }
.term-row {
  display: grid; grid-template-columns: 20px minmax(0,1fr) 92px 40px 60px;
  gap: 10px; align-items: baseline; padding: 1.5px 0;
}
.term-head {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-3); border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 5px; margin-bottom: 3px;
}
.term-head span:nth-child(4), .term-est { text-align: right; }
.term-n { color: var(--on-dark-3); text-align: right; }
.term-now { color: var(--sun-300); }
.term-late { color: #F0A79F; }
.term-maths { color: #F3CE87; }
.term-chem { color: #D8C2F5; }
.term-phys { color: #B7D9A8; }
.term-out { display: flex; align-items: baseline; gap: 9px; margin: 3px 0 0; }
.term-ok { color: #A6D9A6; }
.term-err { color: #F0A79F; }
.term-mid { color: var(--on-dark-3); }
.term-exit { margin: 7px 0 0; color: var(--on-dark-3); font-size: 10.5px; }
.term-cursor {
  display: inline-block; width: 7px; height: 15px; background: var(--sun-300);
  vertical-align: -2px; animation: blink 1.15s steps(1, end) infinite;
}


/* ---------------------------------------------------------------- cells
   Wello's rules for the grid: medium radius, one padding step, contents
   stacked at the tightest gap, and cells divided by fill and hairline —
   never by a shadow, never by a rule. Fills rotate white / grey / ink /
   flood, so the region has a rhythm without inventing a hue. */
.bento {
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--s2); align-items: stretch;
}
.bento-cell {
  border-radius: var(--r-md);
  padding: var(--cell-pad);
  display: flex; flex-direction: column; gap: var(--cell-gap);
}
.b-methods { grid-column: 1 / span 7; grid-row: 1; background: var(--paper); }
.b-files   { grid-column: 8 / span 5; grid-row: 1; background: var(--ground); box-shadow: var(--hair); }
.b-agent   { grid-column: 1 / span 6; grid-row: 2; background-color: var(--ink); color: var(--on-dark); }
.b-limits  { grid-column: 7 / span 6; grid-row: 2; background: var(--sky-300); color: var(--sky-deep); }

/* The index is the section's only frame: a mono line with a hairline that runs
   to the cell's edge, then the claim in sentence case. The first claim is one
   step larger so the grid still has an entry point without a section head. */
.cell-kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  color: var(--ink-3);
}
.cell-kicker::after {
  content: ''; flex: 1; height: 1px; background: currentColor; opacity: .22;
}
.cell-title {
  color: inherit;
  font-size: clamp(1.35rem, 1.7vw, 1.5rem);
  line-height: 1.06; font-weight: 760; font-stretch: 108%;
  letter-spacing: -.02em; text-wrap: balance;
}
.b-methods .cell-title { font-size: clamp(1.65rem, 2.4vw, 2rem); }
.b-agent .cell-kicker { color: var(--on-dark-2); }
.b-files .lead { max-width: 38ch; }
.b-agent .lead { max-width: 40ch; }
.b-limits .lead { max-width: 36ch; color: var(--sky-ink); }

/* The footer is the cell's floor: a file, a path, or the honest caveat. */
.cell-foot {
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid rgba(23,25,28,.10);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  color: var(--ink-3);
}
.cell-foot code { color: var(--ink-2); }
.b-agent .cell-foot {
  border-top-color: rgba(255,255,255,.14); color: var(--on-dark-2);
}
.b-limits .cell-foot { border-top-color: rgba(8,42,76,.18); color: var(--sky-deep); }

/* the heading badge: a title promoted into its own card, so it reads as an
   object in the grid rather than as page text */
.b-head {
  justify-self: start;
  background: var(--ground); color: var(--ink);
  border-radius: var(--r-md);
  padding: 14px 22px;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1;
  font-weight: 780; font-stretch: 112%; letter-spacing: -.022em;
  text-transform: uppercase;
  box-shadow: var(--hair);
}
.b-head--onDark { box-shadow: none; }
.b-agent .lead { max-width: 40ch; }

/* the badge: a white pill carrying a name */
.badge {
  justify-self: start;
  background: var(--ground); color: var(--ink);
  border-radius: var(--r-pill); padding: 12px 20px;
  font-size: 13px; font-weight: 620; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: var(--hair);
}
.badge--quiet { background: rgba(255,255,255,.62); color: var(--ink-2); box-shadow: none; }

/* the chip: a white pill led by a solid dot (Wello's chip, as a list row) */
.chip-dot {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ground); color: var(--ink);
  border-radius: var(--r-pill); padding: 9px 16px;
  font-size: 12.5px; font-weight: 560; white-space: nowrap;
  box-shadow: var(--hair);
}
.chip-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sky-500); flex: 0 0 auto;
}
.chip-dot--solid::before { background: var(--ink); }
.chip-dot--quiet { background: var(--ground); color: var(--ink-3); box-shadow: none; }
.chip-list { display: grid; gap: 8px; justify-items: start; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: var(--s2); }
.fit-group { display: grid; gap: var(--cell-gap); align-content: start; }

/* ---- the pipeline chain: stages joined by connectors, with the gate drawn
   in the chain between the two stages it guards ---- */
.rules { display: grid; gap: 9px; }
.pipes { display: grid; gap: 8px; }
.pipe {
  display: grid; grid-template-columns: 86px minmax(0,1fr);
  gap: 4px 16px; align-items: center;
  background: var(--ground); border-radius: var(--r-sm);
  padding: 13px 18px;
}
.pipe--star { background: var(--ink); color: var(--on-dark); }
.pipe-name { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.pipe--star .pipe-name { color: var(--sun-300); }
.pipe-chain { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.node {
  border-radius: var(--r-pill); padding: 7px 15px;
  font-size: 11px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 260ms var(--ease), color 260ms var(--ease);
}
.node.s1 { background: #E1E4E9; color: var(--ink-2); }
.node.s2 { background: #CDD2DA; color: var(--ink); }
.node.s3 { background: #6E7580; color: var(--ground); }
.node.s4 { background: var(--ink); color: var(--ground); }
.pipe--star .node.s1 { background: rgba(255,255,255,.16); color: var(--on-dark-2); }
.pipe--star .node.s2 { background: rgba(255,255,255,.32); color: var(--on-dark-2); }
.pipe--star .node.s3 { background: rgba(255,255,255,.72); color: var(--ink); }
.pipe--star .node.s4 { background: var(--ground); color: var(--ink); }
.link { width: 20px; height: 2px; border-radius: 2px; background: rgba(23,25,28,.2); flex: 0 0 auto; }
.pipe--star .link { background: rgba(255,255,255,.28); }
.pipe--star .link--gate { background: var(--sun-300); color: var(--maths); }
.link--gate {
  width: auto; height: 22px; padding: 0 8px; display: inline-grid; place-items: center;
  background: var(--sun-300); color: var(--maths);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  border-radius: var(--r-pill);
}
.pipe-use { grid-column: 2; font-size: 11.5px; color: var(--ink-3); }
.pipe--star .pipe-use { color: var(--on-dark-3); }

/* the hero: one rule gets the floor, so the eye has an object before it has a
   list; the other four sit below it as quiet references */
.pipe--hero {
  padding: 20px 22px 19px;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 8px 18px;
}
.pipe--hero .pipe-name { font-size: 18px; letter-spacing: -.02em; }
.pipe--hero .node { font-size: 11.5px; padding: 8px 14px; }
.pipe--hero .pipe-use {
  font-size: 12.5px; line-height: 1.45;
  color: var(--on-dark-2); max-width: 54ch;
}
.pipe--compact {
  grid-template-columns: 72px minmax(0,1fr);
  gap: 3px 12px; padding: 10px 14px;
}
.pipe--compact .pipe-name { font-size: 12px; }
.pipe--compact .node { font-size: 9.5px; padding: 5px 9px; letter-spacing: .05em; }
.pipe--compact .link { width: 14px; }
.pipe--compact .pipe-use { font-size: 10.5px; }

/* pointing at a pipeline walks its stages: each node lights 70 ms after the last */
.pipe:hover .node, .pipe:focus-within .node {
  transition-delay: calc(var(--k, 0) * 70ms);
  background: var(--sun-200); color: var(--maths);
}
.pipe--star:hover .node, .pipe--star:focus-within .node { background: var(--sun-300); color: #241A02; }
.pipe:hover .link:not(.link--gate) { background: rgba(90,60,6,.34); }
.pipe--star:hover .link:not(.link--gate) { background: rgba(242,185,78,.5); }

/* ---- the folder, the statistics, the paths ---- */
.code.tree {
  font-size: 10.5px; line-height: 1.82; padding: 16px 18px;
  background: var(--paper); border-radius: var(--r-sm);
  white-space: pre; color: var(--ink);
}
.t-dir { font-weight: 600; }
.t-c { color: var(--ink-3); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--cell-gap); }
.stats li { background: var(--paper); border-radius: var(--r-sm); padding: 16px 18px; }
/* the statistic: the largest step with a ramp clipped to the glyphs, so the
   number reads as light rather than as a flat fill */
.stat {
  display: block;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 750; font-stretch: 108%;
  line-height: 1; letter-spacing: -.03em;
  background-image: linear-gradient(92deg, var(--ink) 0%, #1F5AA0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat span {
  font-size: .34em; font-weight: 620; letter-spacing: .06em; text-transform: uppercase;
  margin-left: 7px;
}
.stats .meta { display: block; margin-top: 10px; }

/* one record, enlarged: the tree says where it lives, this says what a line is */
.file-card {
  background: var(--ground); border-radius: var(--r-sm);
  box-shadow: var(--hair); overflow: hidden;
}
.file-card-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; background: var(--paper);
  border-bottom: 1px solid rgba(23,25,28,.07);
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
}
.file-card-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sky-500); flex: 0 0 auto;
}
.file-card code {
  display: block; padding: 10px 12px;
  font-size: 10.5px; line-height: 1.65; color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* the handoff: a syllabus on the left, the receipt on the right. The receipt
   is the proof the agent wrote through SAM, and the Undo is its escape hatch. */
.handoff {
  display: grid; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr);
  gap: 8px; align-items: stretch;
}
.handoff-source, .handoff-receipt {
  border-radius: var(--r-sm); overflow: hidden; min-width: 0;
}
.handoff-source { background: var(--paper); color: var(--ink); }
.handoff-receipt {
  background: var(--dark-card); color: var(--on-dark);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.handoff-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px; font-family: var(--mono); font-size: 9.5px; line-height: 1;
}
.handoff-source .handoff-bar {
  color: var(--ink-3); border-bottom: 1px solid rgba(23,25,28,.08);
}
.handoff-receipt .handoff-bar {
  color: var(--on-dark-3); border-bottom: 1px solid rgba(255,255,255,.08);
}
.handoff-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .55; flex: 0 0 auto;
}
.handoff-lines {
  display: grid; gap: 3px; padding: 11px 12px 13px;
  font-size: 10px; line-height: 1.45; color: var(--ink-2);
}
.handoff-label {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.handoff-title { font-size: 11.5px; font-weight: 650; color: var(--ink); line-height: 1.25; }
.handoff-arrow {
  display: grid; place-items: center;
  color: var(--sun-300); font-size: 17px; line-height: 1;
}
.handoff-counts {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px; padding: 12px 12px 10px;
}
.handoff-counts b {
  display: block; font-size: 19px; line-height: 1; font-weight: 720;
  letter-spacing: -.02em;
}
.handoff-counts span {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--on-dark-3);
}
.handoff-undo {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 12px 12px; padding: 4px 8px;
  border-radius: var(--r-pill); background: rgba(247,206,127,.12);
  color: var(--sun-300); font-family: var(--mono); font-size: 9.5px;
}
.handoff-undo svg { flex: 0 0 auto; }

.agent-open {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.5; color: var(--on-dark-2);
}
.agent-open .key { font-size: 10.5px; padding: 3px 7px; }

.agent-prompt { display: grid; gap: 8px; }
.agent-prompt-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--on-dark-3);
}
.agent-prompt-row { display: flex; gap: 8px; align-items: flex-start; }
.agent-prompt code {
  flex: 1; min-width: 0; padding: 10px 12px;
  border-radius: var(--r-sm); background: var(--dark-card);
  color: var(--on-dark-2); font-size: 10.5px; line-height: 1.55;
  white-space: normal; overflow-wrap: anywhere;
}
.agent-prompt .btn { flex: 0 0 auto; }

/* the fit cell as a ledger: each claim carries its reason, so the close is
   an argument rather than a row of chips */
.fit-ledger { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; }
.fit-set {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; padding-top: 12px;
  border-top: 1px solid rgba(8,42,76,.18);
}
.fit-set-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--sky-deep);
}
.fit-set-title::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.fit-set ul { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.fit-item {
  display: grid; grid-template-columns: 6px minmax(0,1fr);
  gap: 9px; align-items: start;
}
.fit-item::before {
  content: ''; grid-column: 1; grid-row: 1 / span 2;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sky-deep); opacity: .55; margin-top: 7px;
}
.fit-item b {
  grid-column: 2; grid-row: 1;
  display: block; font-size: 13px; line-height: 1.35;
  font-weight: 650; color: var(--sky-deep);
}
.fit-item span {
  grid-column: 2; grid-row: 2;
  display: block; margin-top: 2px;
  font-size: 11.5px; line-height: 1.4; color: var(--sky-ink);
}

.paths { display: grid; gap: 7px; }
.paths li { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 10px; align-items: baseline; }
.paths .mono-label { color: var(--ink-3); }
.paths code { font-size: 10.5px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---- the agent cell: three numbered commands as rows, so no command is ever
   wrapped mid-flag, and the prompt they feed sitting under them ---- */
.cmds { display: grid; gap: 8px; }
.cmds li {
  display: grid; grid-template-columns: auto 116px minmax(0,1fr);
  gap: 14px; align-items: center;
  background: var(--dark-card); border-radius: var(--r-sm);
  padding: 12px 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.cmds .cmd-title { margin: 0; font-size: 14px; }
.cmds code {
  background: #FFFFFF12; border-radius: var(--r-xs); padding: 10px 12px;
  font-size: 11.5px; color: var(--sun-200);
  white-space: nowrap; overflow-x: auto;
}
.b-agent .prompt-block { margin-top: 4px; }
/* the prompt is prose with commands in it, so it wraps inside its cell rather
   than scrolling a line sideways out of view */
.b-agent .prompt-block .code {
  font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.badge-num {
  display: inline-grid; place-items: center; height: 30px; min-width: 30px; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--sky-200); color: var(--sky-deep);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
}
.cmd-title { display: block; font-size: 18px; font-weight: 660; letter-spacing: -.015em; color: var(--on-dark); margin: 10px 0 14px; }
.cmd-card code {
  display: block; background: #FFFFFF12; border-radius: var(--r-xs);
  padding: 12px 14px; font-size: 10.5px; line-height: 1.65; color: var(--sun-200);
  white-space: normal; overflow-wrap: anywhere;
}
.prompt-block { background: var(--dark-recess); border-radius: var(--r-md); overflow: hidden; }
.prompt-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 16px 18px 16px 28px; border-bottom: 1px solid rgba(255,255,255,.10); }
.prompt-bar .meta { color: var(--on-dark-3); }

/* ------------------------------------------------------------ composer
   The Screen Composer, drawn as the app it is: the pink masthead, the screen
   rail, the editing canvas with two live component blocks, and the inspector
   that edits them. It replaces the old field of loose widget cards because the
   claim here is spatial — every screen rebuilds in place — and a single screen
   in edit mode says that better than twelve disconnected fragments. */
.composer-fig { margin: 0; }
/* the same rule as the Today frame: the ink bezel holds the edge by fill, so
   the object needs no shadow to sit on the paper */
.composer-frame {
  background: var(--ink); border-radius: 32px; padding: 9px;
}
.cmp {
  border-radius: 24px; overflow: hidden;
  background: #F1F3F6; color: #1A1C1F;
  font-size: 12px; line-height: 1.3;
}

/* masthead */
.cmp-top {
  display: flex; align-items: center; gap: 12px;
  height: 32px; padding: 0 13px; background: #F9DDE5;
  border-bottom: 1px solid rgba(23,25,28,.045);
}
.cmp-brand { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cmp-brand img { width: 19px; height: 19px; border-radius: 5px; display: block; }
.cmp-brand b { font-size: 12.5px; font-weight: 800; letter-spacing: .09em; }
.cmp-brand span { font-size: 10px; color: #817077; white-space: nowrap; }
.cmp-tools { margin-left: auto; display: flex; align-items: center; gap: 9px; color: #4D4045; }
.cmp-tool { display: grid; place-items: center; width: 16px; height: 16px; }
.cmp-tool svg { width: 14px; height: 14px; display: block; }
.cmp-tool--on {
  width: 24px; height: 24px; border-radius: 50%;
  background: #F3C4D1; color: #3F2A30;
}
.cmp-search {
  display: flex; align-items: center; gap: 6px;
  width: 168px; height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  background: #F4CBD7; color: #6E5B61; font-size: 10px;
}
.cmp-search svg { width: 10px; height: 10px; flex: 0 0 auto; }
.cmp-search kbd {
  margin-left: auto; font-family: var(--mono); font-size: 7px; line-height: 1;
  background: #FBE7EC; border-radius: 3px; padding: 3px 3px 2px;
  box-shadow: inset 0 0 0 1px rgba(23,25,28,.05);
}

/* the screen rail */
.cmp-body { display: grid; grid-template-columns: 60px minmax(0,1fr) 300px; }
.cmp-rail {
  display: flex; flex-direction: column; align-items: center; gap: 17px;
  margin: 9px 6px 9px 9px; padding: 7px 0 9px;
  background: #fff; border: 1px solid #EAEBEF; border-radius: 15px;
}
.cmp-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: 32px; height: 32px; border-radius: 8px;
  background: #17191C; color: #fff; line-height: 1;
}
.cmp-date b { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.cmp-date span { font-size: 6px; font-weight: 620; letter-spacing: .11em; }
.cmp-rail-ico { display: grid; place-items: center; width: 15px; height: 15px; color: #4A4F56; opacity: .8; }
.cmp-rail-ico svg { width: 15px; height: 15px; display: block; }
.cmp-rail-ico.is-on { color: #17191C; opacity: 1; }
.cmp-rail-gap { flex: 1 1 auto; min-height: 18px; }

/* editing toolbar */
.cmp-stage { position: relative; min-width: 0; padding: 10px 24px 12px; }
.cmp-toolbar { display: flex; align-items: center; gap: 10px; padding: 0 2px; margin-bottom: 10px; min-height: 30px; }
.cmp-mode { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.cmp-editing {
  font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #6B7077; white-space: nowrap;
}
.cmp-mode b { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.cmp-hint {
  font-size: 9.5px; color: #7A7F87; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cmp-toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.cmp-gridbtn {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: #3E434A; box-shadow: inset 0 0 0 1px rgba(23,25,28,.05);
}
.cmp-add {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 13px;
  border-radius: var(--r-pill); background: #17191C; color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.cmp-done {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border-radius: var(--r-pill); background: #fff; color: #24262A;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(23,25,28,.10);
}

/* the two selected component blocks */
.cmp-canvas { display: grid; gap: 12px; }
.cmp-block {
  position: relative; padding: 14px 16px 16px;
  border: 1px solid #E4E8EE; border-radius: 16px; background: #F6F8FA;
}
.cmp-block-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.cmp-grip { display: grid; grid-template-columns: repeat(2, 2px); gap: 2px; width: 6px; flex: 0 0 auto; }
.cmp-grip i { display: block; width: 2px; height: 2px; border-radius: 50%; background: #B7BCC4; }
.cmp-name { font-size: 11.5px; font-weight: 680; letter-spacing: -.01em; color: #292C31; }
.cmp-key {
  display: grid; place-items: center; width: 18px; height: 17px; border-radius: 4px;
  background: #E8EBF0; color: #6B7077; font-family: var(--mono); font-size: 8.5px;
  box-shadow: inset 0 0 0 1px rgba(23,25,28,.05);
}
.cmp-half {
  margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0 9px;
  border-radius: var(--r-pill); background: #E6EBF2; color: #3F444B;
  font-size: 8.5px; font-weight: 600; white-space: nowrap;
}
.cmp-x {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%; background: #F8D7DE; color: #AD455B;
}
.cmp-x svg { width: 9px; height: 9px; }

.cmp-greet { display: flex; align-items: baseline; gap: 9px; padding: 0 2px; margin-bottom: 2px; }
.cmp-greet b { font-size: 23px; font-weight: 740; letter-spacing: -.03em; line-height: 1.1; }
.cmp-greet span { font-size: 10px; color: #7A7F87; }

/* the focus card: the product's one warm light, drawn at the canvas size */
.cmp-focus {
  position: relative; margin-top: 12px; padding: 21px 22px 22px;
  border-radius: 19px;
  background: linear-gradient(104deg, #FFFFFF 0%, #FFF9E9 28%, #FBE7B2 62%, #F4CE79 100%);
  box-shadow: inset 0 0 0 1px rgba(90,60,6,.05), inset 0 1px 0 rgba(255,255,255,.55);
}
.cmp-focus-head { display: flex; align-items: center; gap: 9px; }
.cmp-chip {
  display: inline-flex; align-items: center; height: 19px; padding: 0 9px;
  border-radius: var(--r-pill); background: #F4DFA7; color: #67490B;
  font-size: 8.5px; font-weight: 700; white-space: nowrap;
}
.cmp-kicker {
  font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #7C6226; white-space: nowrap;
}
.cmp-not {
  margin-left: auto; display: inline-flex; align-items: center; height: 21px; padding: 0 10px;
  border-radius: var(--r-pill); background: #E9EAED; color: #4A4C51;
  font-size: 8.5px; font-weight: 600; white-space: nowrap;
}
.cmp-focus-main { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; }
.cmp-focus-lead { min-width: 0; }
.cmp-title {
  max-width: 26ch; font-size: 23px; font-weight: 750;
  letter-spacing: -.03em; line-height: 1.12; color: #1D1A12;
}
.cmp-est {
  margin-top: 10px; font-size: 8px; font-weight: 650;
  letter-spacing: .095em; text-transform: uppercase; color: #6C5A2C;
}
.cmp-est b { margin-left: 2px; font-size: 9.5px; letter-spacing: .01em; }
.cmp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.cmp-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px;
  border-radius: var(--r-pill); background: #E4E5E8; color: #222427;
  font-size: 10px; font-weight: 600; white-space: nowrap;
}
.cmp-btn svg { width: 10px; height: 10px; flex: 0 0 auto; }
.cmp-btn--dark { background: #17191C; color: #fff; }
.cmp-btn--line { background: #fff; box-shadow: inset 0 0 0 1px rgba(23,25,28,.16); }
.cmp-meter { flex: 0 0 auto; width: 118px; padding-bottom: 1px; text-align: center; }
.cmp-meter svg { display: block; width: 118px; height: 65px; margin-inline: auto; }
.cmp-meter b {
  display: block; margin-top: -6px; font-size: 21px; font-weight: 750;
  letter-spacing: -.025em; line-height: 1;
}
.cmp-meter span { display: block; margin-top: 5px; font-size: 9px; color: #6C5A2C; white-space: nowrap; }
.cmp-arc { stroke-dashoffset: 100; transition: stroke-dashoffset 1100ms var(--ease-out) 220ms; }
.composer-fig.is-drawn .cmp-arc { stroke-dashoffset: 83; }

/* the day's queue, carried from the Today screen */
.cmp-queue {
  padding: 15px 16px 16px; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23,25,28,.04);
}
.cmp-queue-head { display: flex; align-items: center; gap: 9px; }
.cmp-well {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 27px; height: 27px; border-radius: 8px; background: #FBE4EA; color: #B65A76;
}
.cmp-well svg { width: 13px; height: 13px; display: block; }
.cmp-queue-title h4 { margin: 0; font-size: 15.5px; font-weight: 750; letter-spacing: -.015em; }
.cmp-queue-title p { margin-top: 1px; font-size: 9px; color: #83878E; }
.cmp-queue-add {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  height: 21px; padding: 0 9px; border-radius: var(--r-pill);
  background: #EFEFF2; color: #2A2C2F; font-size: 8px; font-weight: 600; white-space: nowrap;
}
.cmp-task { margin-top: 12px; padding: 13px 14px 12px; border-radius: 10px; background: #DCE3EA; }
.cmp-task--next { margin-top: 0; background: #E2E7ED; }
.cmp-task-top { display: flex; align-items: baseline; gap: 10px; }
.cmp-task-top b {
  flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 720;
  letter-spacing: -.015em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-min { font-size: 14.5px; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; }
.cmp-min i { margin-left: 1px; font-style: normal; font-size: 8px; font-weight: 600; color: #666B72; }
.cmp-task p { margin-top: 2px; font-size: 9px; color: #6E747C; }
.cmp-task-actions { display: flex; align-items: center; gap: 15px; margin-top: 10px; font-size: 9px; color: #3C4046; }
.cmp-act { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cmp-act svg { width: 9px; height: 9px; flex: 0 0 auto; opacity: .85; }
.cmp-next {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 14px 2px 8px; font-size: 9px; color: #7B8088;
}
.cmp-next span:first-child { font-weight: 600; color: #53585F; }

/* the inspector: the screen's own settings, not one of its components */
.cmp-inspector { min-width: 0; padding: 18px 20px 22px; background: #fff; }
.cmp-insp-head {
  display: flex; align-items: center; gap: 10px; padding-bottom: 16px;
  border-bottom: 1px solid #ECEEF1;
}
.cmp-insp-mark {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 9px; background: #F1F2F4; color: #A9AEB6;
}
.cmp-insp-mark svg { display: block; width: 16px; height: 16px; }
.cmp-insp-head h4 { margin: 0; font-size: 15.5px; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; }
.cmp-insp-head p { margin-top: 1px; font-size: 9.5px; color: #7A7F87; }
.cmp-insp-head .cmp-x { width: 18px; height: 18px; margin-left: auto; background: transparent; color: #6B7077; }
.cmp-insp-head .cmp-x svg { width: 10px; height: 10px; }
.cmp-rows { display: grid; }
.cmp-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #F0F1F4; }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 8px; background: #F2F2F4; color: #4A4F56;
}
.cmp-row-ico svg { width: 14px; height: 14px; display: block; }
.cmp-row-txt { flex: 1 1 auto; min-width: 0; }
.cmp-row-txt b { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: -.005em; color: #23262A; }
.cmp-row-txt span { display: block; margin-top: 1px; font-size: 9.5px; line-height: 1.35; color: #7A7F87; }
.cmp-chev { flex: 0 0 auto; color: #A3A8AF; }
.cmp-chev svg { width: 11px; height: 11px; display: block; }
.cmp-selected { margin-top: 16px; border: 1px solid #E8EAEE; border-radius: 12px; overflow: hidden; }
.cmp-selected-head {
  padding: 9px 11px; font-size: 8px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #8A8F97;
}
.cmp-selected-body {
  display: flex; gap: 8px; margin: 0 9px 9px; padding: 11px;
  border-radius: 9px; background: #F0F1F3;
}
.cmp-cursor {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 6px; background: #E3E5E8; color: #4A4F56;
}
.cmp-cursor svg { width: 18px; height: 18px; display: block; }
.cmp-selected-body b { display: block; font-size: 10.5px; font-weight: 650; color: #23262A; }
.cmp-selected-body > div > span { display: block; margin-top: 2px; font-size: 8.5px; line-height: 1.35; color: #7A7F87; }
.cmp-insp-hint { margin: 15px 2px 19px; font-size: 9px; line-height: 1.5; color: #7A7F87; }
.cmp-remove {
  display: flex; align-items: center; gap: 9px; padding: 12px;
  border: 1px solid #E8EAEE; border-radius: 12px;
}
.cmp-remove-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 8px; background: #FBE0DE; color: #9B2C22;
}
.cmp-remove-ico svg { width: 20px; height: 20px; display: block; }
.cmp-remove b { display: block; font-size: 11.5px; font-weight: 650; color: #9B2C22; }
.cmp-remove > div > span { display: block; margin-top: 1px; font-size: 9.5px; color: #7A7F87; }

/* the design switchers sit in the gutters beside the selected component */
.cmp-arrow {
  position: absolute; top: 32%; z-index: 2;
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; color: #4A4F56;
  box-shadow: 0 4px 10px -4px rgba(23,25,28,.28), inset 0 0 0 1px rgba(23,25,28,.05);
}
.cmp-arrow--l { left: 1px; }
.cmp-arrow--r { right: 1px; }
.cmp-arrow svg { width: 9px; height: 9px; display: block; }

@media (max-width: 1240px) {
  .cmp-body { grid-template-columns: 56px minmax(0,1fr) 276px; }
  .cmp-title { font-size: 20px; }
  .cmp-greet b { font-size: 19px; }
}
@media (max-width: 1080px) {
  .cmp-body { grid-template-columns: 54px minmax(0,1fr) 250px; }
  .cmp-inspector { padding: 14px; }
  .cmp-title { font-size: 19px; }
  .cmp-focus { padding: 16px 17px 17px; }
  .cmp-hint { display: none; }
}
/* Below the inspector's useful width the drawing keeps the canvas and drops
   the panel: the editing affordances are the part that explains the section. */
@media (max-width: 980px) {
  .cmp-body { grid-template-columns: 54px minmax(0,1fr); }
  .cmp-stage { padding: 10px 18px 12px; }
  .cmp-inspector, .cmp-arrow { display: none; }
  .cmp-title { font-size: 22px; }
  .cmp-greet b { font-size: 21px; }
}
@media (max-width: 760px) {
  .composer-frame { border-radius: 26px; padding: 7px; }
  .cmp { border-radius: 20px; }
  .cmp-body { grid-template-columns: minmax(0,1fr); }
  .cmp-rail { display: none; }
  .cmp-stage { padding: 9px 10px 10px; }
  .cmp-top { gap: 8px; padding: 0 9px; }
  .cmp-brand span { display: none; }
  .cmp-search { width: 112px; }
  .cmp-search kbd { display: none; }
  .cmp-gridbtn { display: none; }
  .cmp-title { font-size: 20px; }
  .cmp-focus-main { gap: 12px; }
  .cmp-meter { width: 80px; }
  .cmp-meter svg { width: 80px; height: 45px; }
}
@media (max-width: 560px) {
  .composer-frame { border-radius: 22px; padding: 5px; }
  .cmp { border-radius: 18px; }
  .cmp-top { height: 26px; }
  .cmp-brand img { width: 17px; height: 17px; }
  .cmp-brand b { font-size: 11.5px; }
  .cmp-tool--on { width: 21px; height: 21px; }
  .cmp-tool--folder, .cmp-tool--code { display: none; }
  .cmp-search { display: none; }
  .cmp-toolbar { gap: 8px; }
  .cmp-add { padding: 0 10px; }
  .cmp-title { font-size: 18px; }
  .cmp-kicker { display: none; }
  .cmp-focus { padding: 14px; }
  .cmp-focus-main { flex-direction: column; align-items: flex-start; }
  .cmp-actions { gap: 5px; }
  .cmp-btn { height: 26px; padding: 0 10px; font-size: 9px; }
  .cmp-meter {
    display: grid; grid-template-columns: 64px auto; column-gap: 10px; row-gap: 1px;
    align-items: center; width: auto; padding-top: 6px; text-align: left;
  }
  .cmp-meter svg { grid-row: 1 / 3; width: 64px; height: 37px; margin: 0; }
  .cmp-meter b { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 17px; }
  .cmp-meter span { display: block; grid-column: 2; grid-row: 2; margin-top: 0; font-size: 8px; }
  .cmp-block { padding: 10px; }
  .cmp-half { padding: 0 7px; font-size: 7.5px; }
  .cmp-greet b { font-size: 18px; }
  .cmp-greet span { font-size: 9px; }
  .cmp-queue-title h4 { font-size: 13px; }
  .cmp-task-actions { gap: 11px; font-size: 8px; }
  .cmp-next span:last-child { display: none; }
}
@media (max-width: 420px) {
  .cmp-mode b { font-size: 11.5px; }
  .cmp-add { font-size: 9px; }
  .cmp-done { padding: 0 10px; font-size: 9px; }
  .cmp-title { font-size: 17px; }
  .cmp-focus-head { gap: 7px; }
  .cmp-queue-head { gap: 7px; }
  .cmp-queue-add { padding: 0 7px; }
  .cmp-task-top b { font-size: 12.5px; }
  .cmp-min { font-size: 12.5px; }
}

/* --------------------------------------------------------------- floor */
.floor {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: var(--section); padding-top: var(--section);
  overflow: hidden;
}
.floor-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.floor-title { max-width: 16ch; }
.floor-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s3); margin-top: var(--s5); width: 100%;
}
.floor-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.floor-col h3 {
  font-size: 12px; font-weight: 620; letter-spacing: .07em; text-transform: uppercase;
  color: var(--on-dark-3); margin-bottom: 6px;
}
.floor-col a {
  font-size: 15px; color: var(--on-dark-2); text-decoration: none; position: relative;
  transition: color var(--interaction) var(--ease);
}
.floor-col a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--roll) var(--ease-out);
}
.floor-col a:hover { color: var(--on-dark); }
.floor-col a:hover::after { transform: scaleX(1); }
.wordmark {
  font-size: clamp(5rem, 23vw, 21rem);
  font-weight: 800; font-stretch: 118%; letter-spacing: -.05em; line-height: .74;
  text-align: center; color: var(--on-dark); opacity: .08;
  margin-top: var(--s4); margin-bottom: -.15em;
  user-select: none; pointer-events: none;
}

/* -------------------------------------------------------------- motion */
/* Three reveal weights, fired once, then perfectly still. */
[data-reveal] {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(6px);
  transition: opacity var(--reveal) var(--ease-out),
              filter var(--reveal) var(--ease-out),
              transform var(--reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
[data-reveal].is-in { opacity: 1; filter: blur(0); transform: none; }
[data-reveal-soft] {
  opacity: 0;
  transition: opacity var(--reveal-soft) ease-out;
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
[data-reveal-soft].is-in { opacity: 1; }

/* grouped children rise in sequence; --k is set per child in main.js */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay: calc(var(--k, 0) * 55ms);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

.meter-arc, .gate-track i { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-soft], [data-stagger] > * {
    opacity: 1 !important; filter: none !important; transform: none !important;
    transition: none !important;
  }
  .meter-arc, .gate-track i, .app-arc, .cmp-arc { transition: none !important; }
  /* no scroll-linked gather: the flood stays the field it rests in */
  .hero-card { --hero-t: 1 !important; }
  .is-drawn .meter-arc, .miniwin--desk.is-drawn .app-arc { stroke-dashoffset: 93; }
  .composer-fig .cmp-arc { stroke-dashoffset: 83; }
  .caret, .watcher i, .term-cursor { animation: none !important; }
  .caret, .term-cursor { opacity: 1; }
  .btn, .gh-ico, .gh-label, .roll-stack, .ico, .rpill, .nav-links a, .nav-inner,
  .skip, .mono-link, .floor-col a, .pipe, .node, .stage-pane.is-entering {
    transition: none !important; animation: none !important;
  }
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .switch { grid-template-columns: minmax(0,1fr); }
  .rail { flex-direction: row; gap: var(--s2); align-items: stretch; }
  .rail-record { flex: 0 0 260px; }
  .rail-pills { flex-direction: row; flex-wrap: wrap; flex: 1 1 auto; }
  .rpill { flex: 1 1 130px; }
}
/* the grid keeps its track count and re-places its children instead: each
   cell takes every track rather than being crushed into a fraction */
@media (max-width: 860px) {
  .b-methods, .b-files, .b-agent, .b-limits { grid-column: 1 / -1; grid-row: auto; }
  .illus { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 1080px) {
  .region-head { grid-template-columns: minmax(0,1fr); align-items: start; }
  .region-head .lead { max-width: 46ch; }
  .floor-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1000px) {
  .stage { min-height: 0; }
  .cmds li { grid-template-columns: auto minmax(0,1fr); }
  .cmds .cmd-title { grid-column: 2; }
  .cmds code { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .figures { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .floor-grid { grid-template-columns: minmax(0,1fr); }
  .rail { flex-direction: column; }
  .rail-record { flex: 0 0 auto; }
  /* four tabs stay one row; the sublabels ellipsis instead of pushing the
     last tab onto a line of its own */
  .rail-pills { flex-wrap: nowrap; gap: 6px; }
  .rpill { flex: 1 1 0; min-width: 0; padding: 11px 10px; }
  .rpill-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* The drawings inside the switch hold their own width: the app's nav becomes a
   strip of pills above the screen, and the file counts leave the editor tabs,
   so nothing inside a drawing is crushed to a column a few characters wide. */
@media (max-width: 860px) {
  .file b { display: none; }
  /* the palette's four bands are cut for the desktop measure; below it the
     same objects flow as one cloud instead of wrapping inside a band */
  .palette-cloud { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 9px; }
  .palette-row { display: contents; }
  .palette-cloud .chip { transform: none; }
}

/* Below here the remaining drawings get a compact treatment: code wraps rather
   than scrolling sideways, which is how a terminal behaves. The Today drawing is
   excluded: it keeps its own layout and is scaled as one fixed-size object. */
@media (max-width: 760px) {
  .stage-foot { margin-left: 0; text-align: left; }
  /* the terminal wraps and drops the two columns that no longer earn their
     width; the editor keeps its records whole and lets each one wrap instead */
  .term-line code { white-space: normal; overflow-wrap: anywhere; }
  .term-row { grid-template-columns: 18px minmax(0,1fr) 62px; gap: 8px; }
  .term-table .term-row > span:nth-child(3),
  .term-table .term-row > span:nth-child(4) { display: none; }
  .code.tree .t-c { display: none; }
  .stats { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 620px) {
  .region-head { margin-bottom: var(--s4); }
  .pipe { grid-template-columns: minmax(0,1fr); }
  .pipe-use { grid-column: 1; }
  .pipe--hero { padding: 18px; }
  .pipe--hero .pipe-name { font-size: 16px; }
  .pipe--hero .pipe-use { font-size: 11.5px; }
  /* the palette loses its generous edges before its objects start to crush */
  .palette { padding: 13px; }
  .palette-field { height: 52px; padding: 0 8px 0 14px; gap: 9px; font-size: .875rem; }
  .palette-run { padding: 8px 13px; font-size: 12px; }
  .palette-canvas { padding: 16px 2px 2px; }
  /* narrow, the objects centre as a cloud; a lone last chip sits under the
     field rather than hanging at the left edge */
  .palette-cloud { justify-content: center; gap: 10px 8px; }
  .palette-cloud .chip { flex: 0 0 auto; padding: 10px 12px; font-size: 12.5px; transform: none; }
  .chip--cmd { padding-block: 12px !important; }
  .terminal-path { display: none; }
}
@media (max-width: 520px) {
  /* the install line stacks instead of breaking the copy button onto its own row */
  .brew {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 6px 10px; width: 100%; border-radius: var(--r-md);
    padding: 14px 12px 14px 16px;
  }
  .brew-os { grid-column: 1 / -1; }
  .brew code { grid-column: 1; font-size: 11px; }
  .brew .btn--icon { grid-column: 2; align-self: center; }
  .rail-pills { flex-wrap: wrap; }
  .rpill { flex: 1 1 calc(50% - 3px); }
  /* one open file and the watcher are enough furniture at phone width */
  .editor-bar { padding-inline: 14px; }
  .editor-bar .dotrow, .filetabs .file:not(.is-on) { display: none; }
  .watcher { font-size: 9px; }
  /* the syllabus and the receipt stack, with the arrow turning down */
  .handoff { grid-template-columns: minmax(0,1fr); }
  .handoff-arrow { transform: rotate(90deg); padding: 2px 0; }
  .agent-prompt-row { flex-direction: column; align-items: stretch; }
  .agent-prompt-row .btn { align-self: flex-start; }
}
@media (max-width: 460px) {
  .figures { grid-template-columns: minmax(0,1fr); gap: var(--s2); }
  .hero-actions .btn { width: 100%; }
  .hero-actions .btn--gh { width: auto; }
  .hero-actions .btn--gh .gh-label { max-width: 96px; opacity: 1; margin-right: 10px; }
  .bento-cell { padding: 22px; }
}

/* The app drawing keeps its furniture until the pane is genuinely narrow,
   then sheds the search box, the week, and the less-load-bearing rows
   rather than letting any of it crush into a column of clipped words. */
@media (max-width: 620px) {
  .app-search { width: 124px; }
  .app-tool--wide { display: none; }
  .app-shell { grid-template-columns: 54px minmax(0,1fr); }
  .app-rail { border-radius: 15px; }
  .app-canvas { padding: 9px 12px 12px 10px; }
  .app-hero { grid-template-columns: minmax(0,1fr) 88px; padding: 12px 13px; }
  .app-hero-title { font-size: 16.5px; }
  .app-gauge { width: 82px; }
  .app-gauge svg { width: 80px; height: 45px; }
}
@media (max-width: 520px) {
  .app-week { display: none; }
  .app-search { width: 108px; }
  .app-search kbd { display: none; }
  .app-hero { grid-template-columns: minmax(0,1fr) 82px; gap: 6px; padding: 11px 12px; }
  .app-hero-title { font-size: 15.5px; }
  .app-btn { padding-inline: 9px; }
  .app-plan li:nth-child(3) { display: none; }
  .app-plan-label span:last-child { display: none; }
}
@media (max-width: 460px) {
  .app-shell { grid-template-columns: 48px minmax(0,1fr); }
  .app-rail { gap: 12px; border-radius: 14px; }
  .app-date { width: 27px; height: 27px; }
  .app-rail-ico { width: 13px; height: 13px; }
  .app-rail-ico svg { width: 12px; height: 12px; }
  .app-top { padding-inline: 10px; }
  .app-search { width: 96px; }
  .app-hero { grid-template-columns: minmax(0,1fr) 74px; padding: 10px; }
  .app-hero-title { font-size: 14.5px; }
  .app-not { display: none; }
  .app-hero-side { align-items: center; padding-top: 0; }
  .app-gauge { width: 72px; }
  .app-gauge svg { width: 70px; height: 39px; }
  .app-gauge b { margin-top: -3px; font-size: 13px; }
  .app-gauge span { font-size: 7px; }
  .app-btn { height: 21px; font-size: 9px; padding-inline: 8px; }
}
@media (max-width: 400px) {
  /* At a phone this narrow the screen is a thumbnail: keep the masthead,
     greeting, focus and queue, and drop the meter and ornament tools before
     any word has to be crushed into a column. */
  .app-tools .app-tool:nth-child(-n+3) { display: none; }
  .app-hero { grid-template-columns: minmax(0,1fr); }
  .app-hero-side { display: none; }
  .app-card-title p, .app-add { display: none; }
}


/* ---------------------------------------------------- system plates
   Drafting illustrations for the four system cards. The bento itself is
   unchanged; these are the card contents. */

    .comp-card { gap: 12px; }
    .comp-card .cell-title { font-size: clamp(1.35rem, 1.8vw, 1.5rem); }
    .comp-card .lead { max-width: 42ch; }
    .illus svg { display: block; width: 100%; height: auto; }

    .dr-console { fill: #FFFFFF; stroke: #17191C; stroke-width: 1.5; }
    .dr-strip { fill: #F3F4F6; stroke: rgba(23,25,28,.25); stroke-width: 1; }
    .dr-well { fill: #F3F4F6; stroke: rgba(23,25,28,.24); stroke-width: 1; }
    .dr-well-inner { fill: none; stroke: rgba(23,25,28,.12); stroke-width: 1; }
    .dr-pivot { fill: #9AA0A8; stroke: #17191C; stroke-width: .6; }
    .dr-arm { stroke: #6B7077; stroke-width: 1.4; }
    .dr-arm-on { stroke: #17191C; stroke-width: 1.8; }
    .dr-grip { fill: #17191C; }
    .dr-grip-on { fill: #F7CE7F; stroke: #5A3C06; stroke-width: .8; }
    .dr-grip-line { stroke: rgba(255,255,255,.38); stroke-width: .8; }
    .dr-grip-line-on { stroke: rgba(90,60,6,.45); stroke-width: .8; }
    .dr-label { font: 500 9px var(--mono); fill: #6B7077; letter-spacing: .05em; }
    .dr-label-strong { font: 600 9.5px var(--mono); fill: #17191C; letter-spacing: .05em; }
    .dr-tiny { font: 500 7.5px var(--mono); fill: #6B7077; letter-spacing: .04em; }
    .dr-etch { font: 600 8px var(--mono); fill: #6B7077; letter-spacing: .12em; }
    .dr-screw { fill: #9AA0A8; stroke: #17191C; stroke-width: .6; }
    .dr-gate { fill: #F7CE7F; stroke: #5A3C06; stroke-width: .8; }
    .dr-gate-text { font: 600 7.5px var(--mono); fill: #5A3C06; }
    .dr-tick { stroke: rgba(23,25,28,.28); stroke-width: 1; }
    .dr-hair { fill: none; stroke: rgba(23,25,28,.22); stroke-width: 1; }
    .dr-paper { fill: #FFFFFF; stroke: #17191C; stroke-width: 1.2; }
    .dr-sheet { fill: #FFFFFF; stroke: rgba(23,25,28,.26); stroke-width: 1; }
    .dr-tray { fill: #F3F4F6; stroke: #17191C; stroke-width: 1.2; }
    .dr-rule { stroke: rgba(23,25,28,.22); stroke-width: 1; }
    .dr-rule-sun { stroke: #F2B94E; stroke-width: 2; }
    .dr-tab { fill: #F3F4F6; stroke: #17191C; stroke-width: 1; }
    .dr-record { font: 500 7.2px var(--mono); fill: #41454C; letter-spacing: -.01em; }
    .dr-record-sun { fill: #F7CE7F; }
    .dr-on-dark { fill: #FFFFFF; stroke: rgba(255,255,255,.34); stroke-width: 1; }
    .dr-on-dark-rule { stroke: rgba(255,255,255,.22); stroke-width: 1; }
    .dr-block { fill: #17191C; stroke: rgba(255,255,255,.34); stroke-width: 1; }
    .dr-prompt { font: 700 14px var(--mono); fill: #F7CE7F; }
    .dr-block-text { font: 500 9px var(--mono); fill: #FFFFFF; letter-spacing: .04em; }
    .dr-block-line { stroke: rgba(255,255,255,.28); stroke-width: 1; }
    .dr-onlabel { font: 500 8.5px var(--mono); fill: rgba(255,255,255,.66); letter-spacing: .04em; }
    .dr-receipt { fill: #FFFFFF; stroke: #17191C; stroke-width: 1.2; }
    .dr-receipt-edge { stroke: #F7CE7F; stroke-width: 3; }
    .dr-receipt-head { font: 500 7px var(--mono); fill: #6B7077; letter-spacing: .10em; }
    .dr-num { font: 700 22px var(--sans); fill: #17191C; letter-spacing: -.03em; }
    .dr-receipt-label { font: 500 6.5px var(--mono); fill: #6B7077; letter-spacing: .07em; }
    .dr-undo { font: 600 9px var(--mono); fill: #5A3C06; }
    .dr-rail { stroke: rgba(255,255,255,.30); stroke-width: 1; }
    .dr-flow { stroke: rgba(247,206,127,.75); stroke-width: 1.2; stroke-dasharray: 3 3; }
    .dr-fence { fill: #FFFFFF; stroke: #17191C; stroke-width: 1.2; }
    .dr-fence-hair { fill: none; stroke: rgba(23,25,28,.28); stroke-width: 1; }
    .dr-tag { fill: #FFFFFF; stroke: #082A4C; stroke-width: 1.1; }
    .dr-tag-text { font: 600 8px var(--mono); fill: #082A4C; letter-spacing: .02em; }
    .dr-string { stroke: rgba(8,42,76,.55); stroke-width: 1; stroke-dasharray: 2 2; }
    .dr-sign { fill: #17191C; stroke: none; }
    .dr-sign-text { font: 700 7px var(--mono); fill: #FFFFFF; letter-spacing: .08em; }
    .dr-sky-label { font: 500 9px var(--mono); fill: #082A4C; letter-spacing: .04em; }
    .dr-ground { stroke: rgba(8,42,76,.40); stroke-width: 1; }
    .dr-detail { fill: none; stroke: rgba(23,25,28,.48); stroke-width: 1; stroke-dasharray: 3 3; }
    .dr-threshold { fill: url(#hatch); }
    @media (max-width: 620px) {
      .dr-tiny, .dr-etch, .dr-receipt-head, .dr-receipt-label { display: none; }
      .dr-label, .dr-label-strong { font-size: 12px; }
      .dr-onlabel, .dr-tag-text, .dr-sky-label { font-size: 11px; }
      .dr-sign-text { font-size: 10px; }
      .dr-num { font-size: 28px; }
    }
  
    .dr-folder { fill: #F3F4F6; stroke: #17191C; stroke-width: 1.2; }
    .dr-folder-tab { fill: #F3F4F6; stroke: #17191C; stroke-width: 1; }
    .dr-folder-lip { fill: #FFFFFF; stroke: #17191C; stroke-width: 1.2; }
    .dr-slot-track { fill: #F3F4F6; stroke: rgba(23,25,28,.26); stroke-width: 1; }
    .dr-knob { fill: #F7CE7F; stroke: #5A3C06; stroke-width: .9; }
    .dr-record { font-size: 8.2px; }

    .fit-card { display: flex; flex-direction: column; }
    .fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 2px; }
    .fit-col { border-top: 1px solid rgba(8,42,76,.20); padding-top: 10px; }
    .fit-k {
      padding-bottom: 7px; font-family: var(--mono); font-size: 9px;
      letter-spacing: .09em; text-transform: uppercase; color: var(--sky-deep);
    }
    .fit-col li { padding: 8px 0; border-bottom: 1px solid rgba(8,42,76,.12); }
    .fit-col li:last-child { border-bottom: 0; }
    .fit-col b { display: block; font-size: 12.5px; line-height: 1.3; font-weight: 650; color: var(--sky-deep); }
    .fit-col span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--sky-ink); }
    .fit-close {
      margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(8,42,76,.20);
      font-size: 19px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--sky-deep);
    }
    @media (max-width: 620px) {
      .fit-cols { grid-template-columns: minmax(0,1fr); gap: 14px; }
    }

    .dr-unit { fill: #FFFFFF; stroke: #17191C; stroke-width: 1.2; }
    .dr-unit-bar { fill: #F3F4F6; stroke: rgba(23,25,28,.22); stroke-width: 1; }
    .dr-screen { fill: #17191C; stroke: none; }
    .dr-screen-text { font: 500 9px var(--mono); fill: #FFFFFF; letter-spacing: .04em; }
    .dr-screen-line { stroke: rgba(255,255,255,.30); stroke-width: 1; }
    .dr-slot { fill: #17191C; }
    .dr-batch { fill: #F3F4F6; stroke: rgba(23,25,28,.28); stroke-width: 1; }
    .dr-tape { fill: #FFFFFF; stroke: #17191C; stroke-width: 1.2; }
    .dr-tape-edge { stroke: #F7CE7F; stroke-width: 3; }
    .dr-perf { stroke: rgba(23,25,28,.42); stroke-width: 1; stroke-dasharray: 2 3; }
    .dr-tape-head { font: 500 7px var(--mono); fill: #6B7077; letter-spacing: .10em; }