/* Stenvakt, colour chapters, yellow-led (round 6, scheme y-signal with the y-chapters intro). One face (Switzer) with the
   system mono for literal values, one grid, flat fields that change with what the server is doing.
   Yellow leads: the page itself, the instrument, and the server's timer running. Charcoal is second: the app's own window,
   and the way in proven (the timer cancelled, the change stays), always with yellow numerals or white words on it.
   Blue and red support, one job each: blue = read-only, nothing changed, back as before; red = cut off, something knocking.
   White is for type on the dark fields and for the answer you open. There is no green at page level. */

:root {
  --char: #191919;
  --surface: #242424;
  --paper: #ffffff;
  --muted: #9a9a9a;
  --red: #d71e1e;
  --blue: #1e4bd7;
  --yellow: #ffe927;
  --dark: #111111;
  /* the way in is proven, the timer is cancelled, the change stays: the app's charcoal lamp with yellow numerals */
  --kept: var(--char);
  --kept-ink: var(--yellow);
  /* secondary ink on the yellow field: #111 mixed into the yellow, 5.3:1 */
  --y-muted: #665e18;

  --sans: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-head: clamp(2.125rem, 1.2rem + 3.2vw, 4.5rem);
  --step-dl: clamp(3.2rem, 8vw, 8.25rem);
  --step-dxl: clamp(3.6rem, min(14vw, 25svh), 14.5rem);
  --step-fig: clamp(7rem, 19vw, 20rem);
  --step-mark: calc((100vw - 2 * var(--m)) / 3.8);

  --m: clamp(16px, 2.8vw, 40px);
  --gut: clamp(12px, 1.6vw, 24px);
  --top-h: 60px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --mask-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='1' viewBox='0 0 2 1' preserveAspectRatio='none'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--top-h); }
body {
  margin: 0;
  background: var(--char);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--step-body);
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; font-weight: 600; }
a { color: inherit; }
::selection { background: var(--blue); color: #ffffff; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 40; background: var(--dark); color: #fff; padding: 12px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

/* the mono layer: addresses, versions, ports and log times, as the app sets root@host */
code, samp {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-ligatures: none;
}

/* line masks for display type */
.ln { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.ln__in { display: block; }

/* chapter marks: each colour chapter names itself in its top-right corner */
.chap { display: block; width: fit-content; max-width: 100%; margin-left: auto; font-size: var(--step-body); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-align: right; }

/* ---------- controls ---------- */
.link {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
  text-decoration-color: transparent;
  transition: text-decoration-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
}
.link:focus-visible { text-decoration-color: currentColor; }

.btn {
  --b-bg: var(--dark); --b-ink: #ffffff; --b-bg2: #ffffff; --b-ink2: var(--dark);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  background: var(--b-bg);
  color: var(--b-ink);
  font-size: var(--step-body);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 120ms var(--ease-out);
}
.btn__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--b-bg2);
  -webkit-mask: var(--mask-half) 100% 0 / 200% 100% no-repeat;
  mask: var(--mask-half) 100% 0 / 200% 100% no-repeat;
  transition: -webkit-mask-position 480ms steps(16, end), mask-position 480ms steps(16, end);
}
.btn__label { position: relative; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__fill { -webkit-mask-position: 0 0; mask-position: 0 0; }
  .btn:hover .btn__label { color: var(--b-ink2); }
}
.btn:focus-visible .btn__fill { -webkit-mask-position: 0 0; mask-position: 0 0; }
.btn:focus-visible .btn__label { color: var(--b-ink2); }
.btn:active { transform: scale(0.97); }

/* ---------- the bar: fixed, slim, one steady object ---------- */
/* It never repaints per chapter: one near-black surface from the first screen to the last, a tone step darker than the
   charcoal chapters and a clear band over every coloured one, so it never melts into the field under it or reappears at
   a chapter edge. The chapter you are in shows only in the link state: its underline wears that chapter's colour. */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 var(--m);
  background: var(--dark);
  color: #ffffff;
  font-size: var(--step-small);
  /* one constant lighter edge, so the bar's bottom holds over the charcoal chapters and the dark app windows as well as
     over the yellow ones; it never changes, so the bar stays one steady object */
  border-bottom: 2px solid #262626;
}
/* without the script nothing marks the chapter, so the bar stays at the top of the page instead of following it */
html:not(.js) .top { position: absolute; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step-body); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; margin-right: auto; }
.wordmark__mark { width: 20px; height: 20px; }
.top__nav { display: flex; gap: 22px; font-size: var(--step-body); }
.top__nav .link { --mark: #ffffff; text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.top__nav [data-for="review"] { --mark: #5b7ff0; }
.top__nav [data-for="safe-mode"] { --mark: var(--yellow); }
.top__nav [data-for="watch"] { --mark: #ff5a4f; }
.top__nav [data-for="questions"] { --mark: var(--yellow); }
.top__nav .link[aria-current="true"] { text-decoration-color: var(--mark); }
@media (hover: hover) and (pointer: fine) {
  .top__nav .link:not([aria-current="true"]):hover { text-decoration-color: rgba(255, 255, 255, 0.6); }
}
.top .btn { --b-bg: var(--yellow); --b-ink: var(--dark); --b-bg2: #ffffff; --b-ink2: var(--dark); min-height: 44px; padding: 0 20px; }
/* the keyboard ring is white on the bar, so focus differs from the hover wipe */
.top .btn:focus-visible { outline-color: #ffffff; }

/* ---------- 1. hero ---------- */
/* the instrument: one yellow field and one ink. When the new login works, the readout's lamp lights: the app's charcoal
   comes in from the page's left edge behind the countdown, and the numbers turn yellow, the words white */
.hero {
  --bar-y: 66%;
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 600px;
  max-height: 1500px;
  overflow: hidden;
  background: var(--yellow);
  color: var(--dark);
}
.hero__h1 {
  position: absolute;
  left: var(--m);
  top: 14%;
  margin: 0 0 0 -0.04em;
  font-size: var(--step-dxl);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.run { position: absolute; left: var(--m); right: var(--m); top: var(--bar-y); height: 8px; font-size: var(--step-small); }
.run__bar { position: absolute; inset: 0; }
.run__fill { position: absolute; inset: 0; background: var(--dark); transform-origin: 0 50%; }
.run__end { position: absolute; bottom: 20px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.run__end code { font-size: 1em; }
.run__end--mac { left: 0; }
.run__end--srv { right: 0; }
.run__ok { width: 18px; height: 18px; --chk: var(--yellow); }

.clock { position: absolute; left: var(--m); top: calc(var(--bar-y) + 44px); display: flex; flex-direction: column; gap: 10px; isolation: isolate; }
/* the lamp: a charcoal panel behind the readout, in from the page's left edge */
.clock::before { content: ""; position: absolute; z-index: -1; top: -22px; bottom: -24px; left: calc(-1 * var(--m)); right: -36px; background: var(--kept); transform-origin: 0 50%; }
.clock .hodo { color: var(--kept-ink); }
.clock .clock__lines { color: #ffffff; }
.hodo { display: inline-flex; align-items: flex-start; font-size: var(--step-dl); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hodo__d { display: inline-block; height: 1em; overflow: hidden; }
.hodo__s { display: block; }
.hodo__s > span, .odo__s > span { display: block; height: 1em; line-height: 1; }
.hodo__s > span::before, .odo__s > span::before { content: attr(data-d); }
.hodo__u { margin-left: 0.12em; }
[data-u]::before { content: attr(data-u); }
/* the last frame: stopped at 296 s */
.hodo__s--h { transform: translateY(-2em); }
.hodo__s--t { transform: translateY(-2em); }
.hodo__s--o { transform: translateY(-5em); }
.clock__lines { position: relative; display: block; height: 1.5em; min-width: 15.4em; font-size: var(--step-lead); font-weight: 500; line-height: 1.5; }
.clock__line { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; visibility: hidden; }
.clock__line--4 { opacity: 1; visibility: visible; }

.hero__sub {
  position: absolute;
  right: var(--m);
  bottom: 40px;
  width: min(34ch, 40vw);
  font-size: var(--step-body);
  line-height: 1.45;
}

/* the run plays once per visit, in real seconds: armed at 0.3 s, ticks every second, the new login works at 1.55 s,
   the lamp comes in from the page's edge (1.6 to 2.2 s) and the app cancels the timer.
   While the lamp comes in, the readout dims for half a second and relights on it in its new inks, so no word is ever
   dark on the charcoal or yellow on the yellow. Reduced motion and return visits get the last frame. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.seen) .clock::before { transform: scaleX(0); animation: lamp 600ms var(--ease-io) 1.6s forwards; }
  .js:not(.seen) .hero .ln__in { transform: translateY(108%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 60ms); }
  .js:not(.seen) .hero__sub { opacity: 0; animation: rise 700ms var(--ease-out) 450ms forwards; }
  .js:not(.seen) .run__fill { transform: scaleX(0); animation: draw 600ms var(--ease-io) 0.9s forwards; }
  .js:not(.seen) .run__end { opacity: 0; animation: fade 400ms ease 0.8s forwards; }
  .js:not(.seen) .run__ok { transform: scale(0.4); opacity: 0; animation: pop 360ms var(--ease-out) 1.55s forwards; }
  .js:not(.seen) .clock .hodo { color: var(--dark); animation: relight 650ms linear 1.55s, ink-kept 1ms linear 2s forwards; }
  .js:not(.seen) .clock .clock__lines { color: var(--dark); animation: relight 650ms linear 1.55s, ink-white 1ms linear 2s forwards; }
  .js:not(.seen) .hodo__u { opacity: 0; animation: fade 250ms ease 0.3s forwards; }
  .js:not(.seen) .hodo__s--h { transform: none; animation: odo-h 4.6s var(--ease-out) forwards; }
  .js:not(.seen) .hodo__s--t { transform: none; animation: odo-t 4.6s var(--ease-out) forwards; }
  .js:not(.seen) .hodo__s--o { transform: none; animation: odo-o 4.6s var(--ease-out) forwards; }
  .js:not(.seen) .clock__line--1 { animation: show-1 4.6s linear forwards; }
  .js:not(.seen) .clock__line--2 { animation: show-2 4.6s linear forwards; }
  .js:not(.seen) .clock__line--3 { animation: show-3 4.6s linear forwards; }
  .js:not(.seen) .clock__line--4 { opacity: 0; visibility: hidden; animation: fade-vis 300ms ease 4.6s forwards; }
  .hero.is-paused *, .hero.is-paused *::before, .hero.is-paused, .tab-hidden .hero *, .tab-hidden .hero *::before { animation-play-state: paused !important; }
}
@keyframes lamp { to { transform: scaleX(1); } }
@keyframes line-up { to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes pop { to { transform: none; opacity: 1; } }
/* the readout goes dark for the lamp and relights on it; the inks swap while it is dark (constant keyframes, so the swap
   is instant and never passes through grey) */
@keyframes relight { 0% { opacity: 1; } 12%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ink-kept { from, to { color: var(--kept-ink); } }
@keyframes ink-white { from, to { color: #ffffff; } }
@keyframes fade-vis { to { opacity: 1; visibility: visible; } }
@keyframes show-1 { 0%, 7.6% { opacity: 0; visibility: hidden; } 9.1%, 18.5% { opacity: 1; visibility: visible; } 19.6%, 100% { opacity: 0; visibility: hidden; } }
@keyframes show-2 { 0%, 19.6% { opacity: 0; visibility: hidden; } 22%, 33.2% { opacity: 1; visibility: visible; } 34.8%, 100% { opacity: 0; visibility: hidden; } }
@keyframes show-3 { 0%, 34.8% { opacity: 0; visibility: hidden; } 37%, 97.8% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
/* armed at 300 (0.3 s), then one tick a second: 299, 298, 297, 296 */
@keyframes odo-h { 0%, 6.5% { transform: translateY(0); } 13.5%, 28.3% { transform: translateY(-1em); } 35.2%, 100% { transform: translateY(-2em); } }
@keyframes odo-t { 0%, 6.5% { transform: translateY(0); } 13.5%, 28.3% { transform: translateY(-1em); } 35.2%, 100% { transform: translateY(-2em); } }
@keyframes odo-o {
  0%, 6.5% { transform: translateY(0); }
  13.5%, 28.3% { transform: translateY(-1em); }
  35.2%, 50% { transform: translateY(-2em); }
  57%, 71.7% { transform: translateY(-3em); }
  78.7%, 93.5% { transform: translateY(-4em); }
  100% { transform: translateY(-5em); }
}

/* ---------- edge dots: cenner.hr's ProjectDots, ported; drawn by the script into canvases inside their chapter ---------- */
/* each host is its own stacking context, so the canvas lies on the field, under every word and fragment in it; the
   canvas paints the field's own colour as its ground, so a box never shows as a box */
.intro, .review, .window, .watch, .tools, .agents, .cta, .faq, .story__right, .st, .tile--a { position: relative; }
.intro, .review, .window, .watch, .tools, .agents, .cta, .faq, .story__right, .st, .tile--a, .foot { isolation: isolate; }
.dots { position: absolute; z-index: -1; display: block; pointer-events: none; }
.dots--r { right: 0; }
.dots--l { left: 0; }
.dots--t { top: 0; }
.dots--b { bottom: 0; }

/* ---------- section entrances (once) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js:not(.ready) [data-reveal] { animation: failsafe 1ms linear 3s forwards; }
  .js .shutter img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js .shutter.is-in img { transform: none; }
  .js .shutter { opacity: 1; transform: none; transition: none; position: relative; overflow: hidden; }
  .js .shutter::after { content: ""; position: absolute; inset: 0; background: var(--cover, var(--char)); transform-origin: 50% 0; transition: transform 1000ms var(--ease-io); transition-delay: calc(var(--i, 0) * 80ms + 120ms); pointer-events: none; }
  .js .shutter.is-in::after { transform: scaleY(0); }
  .js:not(.ready) .shutter::after { animation: failsafe-cover 1ms linear 3s forwards; }
  .js .board .ln__in { transform: translateY(108%); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
  .js .board.is-in .ln__in { transform: none; }
  .js:not(.ready) .board .ln__in { animation: failsafe 1ms linear 3s forwards; }
}
@keyframes failsafe { to { opacity: 1; transform: none; } }
@keyframes failsafe-cover { to { transform: scaleY(0); } }

/* ---------- 2. intro: statement tiles, then the one sentence set large ---------- */
/* the board lies on the yellow: the blue tile (Your Mac, your servers), the charcoal SSH tile in the yellow ink, and the
   K2 print in the tile's blue on the yellow paper */
.intro { background: var(--yellow); color: var(--dark); padding: 8px; }
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 38svh 38svh; gap: 8px; }
.tile { position: relative; overflow: hidden; }
.tile--a { grid-column: 1 / 9; grid-row: 1 / 3; background: var(--blue); color: #ffffff; display: flex; align-items: flex-end; padding: 20px 20px 34px; }
.tile--b { grid-column: 9 / 13; grid-row: 1; background: var(--char); color: var(--yellow); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12px; padding: 20px 20px 22px; }
.tile--c { grid-column: 9 / 13; grid-row: 2; background: var(--surface); }
.tile--c picture, .tile--c img { display: block; width: 100%; height: 100%; }
.tile--c img { object-fit: cover; object-position: 50% 16%; }
/* the K2 print's paper is the intro's own yellow, so the print sits in the section instead of on a tile;
   its cover folds away in the print's blue ink */
.tile--print { background: var(--yellow); --cover: var(--blue); }
.tile--print img { object-position: 60% 20%; }
.tile__cap { position: absolute; left: 12px; bottom: 12px; background: var(--char); color: #ffffff; font-size: var(--step-small); padding: 4px 8px; }
.tile__say { font-size: var(--step-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; max-width: 16ch; }
.slogan { font-size: var(--step-dl); line-height: 0.9; letter-spacing: -0.04em; font-weight: 600; margin-left: -0.04em; }
.slogan--word { white-space: nowrap; }
.intro__text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; padding: 88px 20px 150px; }
.intro__big { grid-column: 1 / 9; font-size: 36px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; max-width: 26em; }
.intro__p { grid-column: 9 / 13; font-size: var(--step-body); line-height: 1.5; padding-top: 0.3em; }

/* the one reading highlight: muted words ink in between top 75% and top 35% of the screen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .hl .w {
      color: var(--y-muted);
      animation: ink linear both;
      animation-timeline: --hl;
      animation-range: cover calc(35% + var(--i) * 1%) cover calc(40% + var(--i) * 1%);
    }
    .js .hl { view-timeline: --hl block; }
  }
}
@keyframes ink { to { color: var(--dark); } }
.js .hl.is-fallback .w { color: var(--y-muted); transition: color 260ms ease; transition-delay: calc(var(--i) * 28ms); }
.js .hl.is-fallback.is-inked .w { color: var(--dark); }

/* ---------- 3. review: index and live sheet on the yellow field; blue, read-only, marks the server you picked ---------- */
.review {
  background: var(--yellow);
  color: var(--dark);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  align-items: start;
  padding: 120px var(--m) 120px;
  min-height: 100svh;
}
.review__index { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 72px; padding-top: 56px; }
.review__names { display: flex; flex-direction: column; align-items: flex-start; }
.review__name {
  font-size: var(--step-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: rgba(17, 17, 17, 0.56);
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em;
  text-decoration-color: transparent;
  transition: color 180ms ease, text-decoration-color 180ms ease, transform 120ms var(--ease-out);
}
.review__name[aria-selected="true"] { color: var(--dark); text-decoration-color: var(--blue); }
@media (hover: hover) and (pointer: fine) {
  .review__name:hover { color: var(--dark); }
  .review__name:not([aria-selected="true"]):hover { text-decoration-color: currentColor; }
}
.review__name:active { transform: scale(0.97); }
.review__copy { display: flex; flex-direction: column; gap: 14px; max-width: 36ch; }
.lead { font-size: var(--step-lead); line-height: 1.38; }
.review__side { grid-column: 6 / 13; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* the four sheets share one cell, so the stage is as tall as the tallest one and nothing is cut */
.review__stage { display: grid; container-type: inline-size; }
.sheet { grid-area: 1 / 1; min-width: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; opacity: 0; visibility: hidden; }
.sheet.is-on { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; }
html:not(.js) .review__stage { display: flex; flex-direction: column; gap: 48px; }
html:not(.js) .sheet { opacity: 1; visibility: visible; }

/* ---------- 4. safe mode story ---------- */
/* the yellow face keeps the server's timer; each state's readout is its lamp: unlit (the yellow) while the timer counts,
   then the app's charcoal with yellow numerals once the login is proven, red when it fails, blue when the server is back */
.story { background: var(--char); color: #ffffff; }
.story__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--m); }
.story__head .chap { margin-left: auto; }
.story__ticks { display: none; }
.story__steps { display: none; }
.story__odo, .story__word, .story__right, .story__fields { display: none; }
.st { position: relative; padding: 96px var(--m) 72px; background: var(--yellow); color: var(--dark); }
.st + .st { border-top: 2px solid var(--dark); }
.st { --lamp: transparent; --lamp-ink: var(--dark); --lamp-word: var(--dark); }
.st[data-st="3"] { --lamp: var(--kept); --lamp-ink: var(--kept-ink); --lamp-word: #ffffff; }
.st[data-st="4"] { --lamp: var(--red); --lamp-ink: #ffffff; --lamp-word: #ffffff; }
.st[data-st="5"] { --lamp: var(--blue); --lamp-ink: #ffffff; --lamp-word: #ffffff; }
.st__h { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.035em; max-width: 13em; margin-left: -0.03em; }
.st__p { margin-top: 22px; font-size: var(--step-lead); line-height: 1.38; max-width: 32ch; }
.st__odo { margin: 40px calc(-1 * var(--m)) 0; padding: 22px var(--m) 0; background: var(--lamp); color: var(--lamp-ink); font-size: var(--step-dl); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.st__u { margin-left: 0.12em; }
.st__word { margin: 0 calc(-1 * var(--m)); padding: 10px var(--m) 22px; background: var(--lamp); color: var(--lamp-word); font-size: var(--step-body); font-weight: 500; }
.st__log { margin-top: 28px; }

/* the pin needs the script (it picks the state), so it waits for the class the script adds: if app.js fails, every state
   stays stacked and readable */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .ready .story__track { position: relative; height: 400vh; }
  /* the yellow face takes seven twelfths, the app's dark window five */
  .ready .story__stage { position: sticky; top: 0; height: 100svh; min-height: 640px; display: grid; grid-template-columns: 7fr 5fr; overflow: hidden; }
  .ready .story__steps { display: block; position: absolute; left: 0; width: 1px; top: 50vh; height: 300vh; pointer-events: none; }
  .ready .story__steps i { display: block; height: 20%; }
  /* the chapter mark and five ticks, one per state, in the state's own colour (the proven one white on the charcoal) */
  .ready .story__head { position: absolute; z-index: 3; left: calc(700% / 12); right: 0; top: calc(var(--top-h) + 22px); padding: 0 32px; }
  .ready .story__head .chap { margin-left: 0; text-align: left; }
  .ready .story__ticks { display: flex; gap: 6px; }
  .ready .story__ticks i { display: block; width: 34px; height: 6px; background: var(--yellow); opacity: 0.24; transform-origin: 50% 100%; transition: opacity 300ms ease, transform 300ms var(--ease-out); }
  .ready .story__ticks [data-tick="3"] { background: #ffffff; }
  .ready .story__ticks [data-tick="4"] { background: var(--red); }
  .ready .story__ticks [data-tick="5"] { background: var(--blue); }
  .ready .story__ticks i.is-on { opacity: 1; }
  .ready .story__ticks i.is-now { transform: scaleY(2); }
  /* the left half stays the yellow instrument in every state; the state colour is the lamp behind the readout */
  .ready .story__left { position: relative; overflow: hidden; color: var(--dark); }
  .ready .story__fields { display: block; position: absolute; inset: 0; }
  .ready .sf { position: absolute; left: 0; right: 0; bottom: 0; height: calc(112px + var(--step-dxl) + 52px); transform: translateY(101%); transition: transform 640ms var(--ease-io); }
  .ready .sf--1 { top: 0; height: auto; background: var(--yellow); transform: none; }
  /* the proven lamp stops short of the app's window, so the two charcoals never read as one block */
  .ready .sf--3 { right: 32px; background: var(--kept); }
  .ready .sf--4 { background: var(--red); }
  .ready .sf--5 { background: var(--blue); }
  .ready [data-state="3"] .sf--3, .ready [data-state="4"] .sf--4, .ready [data-state="5"] .sf--4, .ready [data-state="5"] .sf--5 { transform: none; }
  .ready .story__odo, .ready .story__word { transition: color 200ms ease 300ms; }
  .ready [data-state="3"] .story__odo { color: var(--kept-ink); }
  .ready [data-state="3"] .story__word, .ready [data-state="4"] .story__odo, .ready [data-state="5"] .story__odo, .ready [data-state="4"] .story__word, .ready [data-state="5"] .story__word { color: #ffffff; }
  .ready .story__states { position: absolute; inset: 0; }
  .ready .st { position: absolute; left: 0; right: 0; top: 0; padding: 15svh var(--m) 0; background: none; border-top: 0; color: inherit; opacity: 0; visibility: hidden; transform: translateY(28px); transition: opacity 360ms ease, transform 600ms var(--ease-out), visibility 0s linear 360ms; }
  .ready .st.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms ease 160ms, transform 700ms var(--ease-out) 120ms, visibility 0s; }
  .ready .st__odo, .ready .st__word, .ready .st__log { display: none; }
  .ready .st__h { font-size: var(--step-head); max-width: 11.5em; }
  .ready .story__odo { display: flex; position: absolute; left: var(--m); bottom: 112px; font-size: var(--step-dxl); font-weight: 600; line-height: 1; letter-spacing: -0.04em; margin-left: -0.04em; font-variant-numeric: tabular-nums; }
  .ready .story__u { margin-left: 0.1em; }
  .ready .story__word { display: block; position: absolute; left: var(--m); bottom: 64px; font-size: var(--step-lead); font-weight: 500; }
  .ready .story__right { display: flex; align-items: center; justify-content: center; padding: calc(var(--top-h) + 72px) 32px 48px; background: var(--char); }
}

/* ---------- 5. your window ---------- */
.window {
  background: var(--yellow);
  color: var(--dark);
  min-height: 100svh;
  padding: 150px var(--m) 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 72px;
}
.window__q { font-size: var(--step-head); line-height: 1; letter-spacing: -0.035em; margin-left: -0.03em; max-width: 16em; }
.window__ctl { margin-top: 28px; width: min(440px, 100%); }
.range { margin-top: 26px; }
.range input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 40px;
  background: none;
  margin: 0;
  cursor: pointer;
}
.range input:disabled { cursor: default; opacity: 0.4; }
.range input::-webkit-slider-runnable-track { height: 8px; background: var(--dark); }
.range input::-moz-range-track { height: 8px; background: var(--dark); }
/* the knob: an #111 block with a yellow rim, so it stands apart from the #111 track and still reads on the field */
.range input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 32px; height: 32px; margin-top: -12px; background: var(--dark); border: 3px solid var(--yellow); outline: 2px solid var(--dark); transition: transform 120ms var(--ease-out); }
.range input::-moz-range-thumb { box-sizing: border-box; width: 32px; height: 32px; background: var(--dark); border: 3px solid var(--yellow); border-radius: 0; outline: 2px solid var(--dark); }
.range input:active::-webkit-slider-thumb { transform: scale(0.92); }
.range input:focus-visible { outline: 3px solid var(--dark); outline-offset: 4px; }
.range__ends { display: flex; justify-content: space-between; font-size: var(--step-small); font-variant-numeric: tabular-nums; margin-top: 4px; }
.window__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.window__fig { display: flex; align-items: baseline; font-size: var(--step-fig); font-weight: 600; line-height: 0.8; letter-spacing: -0.045em; margin-left: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity 300ms ease; }
.window.is-off .window__fig { opacity: 0.28; }
/* at zero the server would put the saved config back: the figure takes the blue, back as before (5.6:1 on yellow) */
.window.is-zero .window__fig { color: var(--blue); }
.window__u { font-size: var(--step-head); letter-spacing: -0.02em; margin-left: 0.1em; }
.window__how { width: min(30ch, 40vw); font-size: var(--step-body); line-height: 1.45; display: flex; flex-direction: column; gap: 12px; }
.window__state { font-size: var(--step-small); font-weight: 500; }

/* odometer: one strip of digits per position, moved with transform, never a text swap */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo__d { display: inline-block; height: 1em; overflow: hidden; }
.odo__d.is-blank { display: none; }
.odo__s { display: block; transition: transform 520ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .odo__s { transition: none; } }

/* ---------- 6. watch: four whole cards from the Watch screen on the charcoal; the head is the red block ---------- */
.watch { background: var(--char); color: #ffffff; padding: 120px var(--m) 104px; }
.watch__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
/* something knocking: the head is a red block that comes in from the page's left edge */
.watch__head { grid-column: 1 / 6; grid-row: 1 / 3; align-self: end; display: flex; flex-direction: column; gap: 22px; margin-left: calc(-1 * var(--m)); padding: 40px 36px 40px var(--m); background: var(--red); color: #ffffff; }
.watch__h { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.035em; margin-left: -0.03em; max-width: 9em; }
.watch__lead { font-size: var(--step-body); max-width: 42ch; }
.watch__chap { grid-column: 6 / 13; grid-row: 1; margin-bottom: 20px; }
.wf { margin: 0; min-width: 0; }
.wf--geo { grid-column: 6 / 13; grid-row: 2; }
.wf--traffic { grid-column: 1 / 6; grid-row: 3; margin-top: 56px; }
.wf--att { grid-column: 6 / 10; grid-row: 3; margin-top: 56px; }
.wf--ports { grid-column: 10 / 13; grid-row: 3; margin-top: 56px; }
.wcap { margin-top: 14px; font-size: var(--step-small); line-height: 1.4; max-width: 46ch; }

/* ---------- 7. tools: each poster line reads as a sentence; the tool is the subject, what Stenvakt does with it is the second ink ---------- */
/* the tool is #111 on the yellow field; what Stenvakt does with it is the blue (5.6:1 on yellow) */
.tools { --say: var(--blue); background: var(--yellow); color: var(--dark); padding: 120px var(--m) 140px; }
.tools__chap { margin-bottom: 40px; }
.poster { --F: var(--step-dxl); }
.poster__li { display: flex; align-items: last baseline; column-gap: max(24px, var(--F) * 0.15); }
.poster__w { flex: none; display: block; overflow: clip; padding-bottom: 0.16em; margin-bottom: -0.16em; font-size: var(--F); font-weight: 600; line-height: 0.92; letter-spacing: -0.045em; margin-left: -0.04em; }
.poster__in { display: block; }
.poster__li--act .poster__w { color: var(--say); }
.poster__fact { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 0.8vw, 14px); }
/* the predicate hangs from the word's x-height line; the literal values and the condition stand on its baseline */
.poster__small { display: flex; flex-direction: column; gap: 2px; max-width: 40ch; font-size: var(--step-body); line-height: 1.3; }
.poster__small code { font-size: max(16px, 0.88em); font-weight: 500; }
/* a literal key stays whole and copies as typed */
.poster__small code.nw { white-space: nowrap; }
.poster__small b { font-weight: 600; }
.poster__say { display: block; overflow: clip; padding-bottom: 0.14em; margin-bottom: -0.14em; color: var(--say); font-size: calc(var(--F) * 0.322); font-weight: 600; line-height: 0.96; letter-spacing: -0.035em; text-wrap: balance; }
.poster__sayin { display: block; }
.tools__note { margin: 72px 0 0 auto; max-width: 44ch; font-size: var(--step-body); }
@media (prefers-reduced-motion: no-preference) {
  .js .poster__in { transform: translateY(115%); transition: transform 760ms var(--ease-out); transition-delay: calc(var(--i) * 240ms); }
  /* the predicate is written out from the word, left to right: a cover in the field's yellow folds away to the right.
     A transform, not a clip-path wipe, so the compositor runs it (a clip-path wipe repainted the text every frame
     and dropped frames at 2560) */
  .js .poster__say { position: relative; }
  .js .poster__say::after { content: ""; position: absolute; inset: 0; background: var(--yellow); transform-origin: 100% 50%; transition: transform 700ms var(--ease-out); transition-delay: calc(var(--i) * 240ms + 280ms); }
  .js .poster__sayin { transform: translateX(-0.4em); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--i) * 240ms + 280ms); }
  .js .poster__small { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 700ms var(--ease-out); transition-delay: calc(var(--i) * 240ms + 520ms); }
  .js .poster.is-in .poster__in { transform: none; }
  .js .poster.is-in .poster__say::after { transform: scaleX(0); }
  .js .poster.is-in .poster__sayin { transform: none; }
  .js .poster.is-in .poster__small { opacity: 1; transform: none; }
  .js:not(.ready) .poster__in, .js:not(.ready) .poster__small { animation: failsafe 1ms linear 3s forwards; }
  .js:not(.ready) .poster__sayin { animation: failsafe 1ms linear 3s forwards; }
  .js:not(.ready) .poster__say::after { animation: failsafe-cover 1ms linear 3s forwards; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .tools__chap { margin-bottom: 80px; }
  .poster__li + .poster__li { margin-top: 10px; }
}
@media (max-width: 699px) {
  .poster__say { font-size: var(--step-head); }
  .poster__li { flex-direction: column; align-items: flex-start; row-gap: 6px; margin-bottom: 34px; }
  .poster__fact { gap: 10px; }
}
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .js .poster__in { transition-duration: 500ms; transition-delay: 0s; }
  .js .poster__sayin, .js .poster__say::after { transition-duration: 560ms; transition-delay: 160ms; }
  .js .poster__small { transition-delay: 320ms; }
  .js .poster.is-in .poster__li:not(.is-in) .poster__in { transform: translateY(115%); }
  .js .poster.is-in .poster__li:not(.is-in) .poster__sayin { transform: translateX(-0.4em); }
  .js .poster.is-in .poster__li:not(.is-in) .poster__say::after { transform: none; }
  .js .poster.is-in .poster__li:not(.is-in) .poster__small { opacity: 0; transform: translateY(10px); }
}

/* ---------- 8. agents: one request, changing state in place ---------- */
.agents { background: var(--char); color: #ffffff; padding: 120px var(--m) 170px; }
.agents__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.agents__chap { grid-column: 9 / 13; grid-row: 1; margin-bottom: 40px; }
.agents__h { grid-column: 1 / 10; grid-row: 2; color: var(--yellow); font-size: var(--step-dl); line-height: 0.92; letter-spacing: -0.04em; margin-left: -0.04em; align-self: end; }
.agents__rules { grid-column: 10 / 13; grid-row: 2; align-self: end; display: flex; flex-direction: column; gap: 12px; font-size: var(--step-body); }
.agents__state { grid-column: 1 / 4; grid-row: 3; margin-top: 72px; padding-top: 0.9em; text-align: right; font-size: var(--step-lead); line-height: 1.25; color: var(--muted); }
.ask-wrap { grid-column: 4 / 10; grid-row: 3; margin-top: 72px; min-height: 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ask { width: 100%; max-width: 640px; }
.ask__again { font-size: var(--step-body); text-decoration-color: currentColor; color: #ffffff; }
.agents__real { grid-column: 10 / 13; grid-row: 3; margin-top: 72px; display: flex; flex-direction: column; gap: 14px; font-size: var(--step-body); }
.agents__real b { font-weight: 600; }
.agents__try { color: var(--muted); }
/* the state beside the request: yellow while safe mode runs (the server's timer), white once the change stays */
.agents:has(.ask[data-state="run"]) .agents__state { color: var(--yellow); }
.agents:has(.ask[data-state="done"]) .agents__state { color: #ffffff; }

/* ---------- 9. early access ---------- */
.cta {
  background: var(--yellow);
  color: var(--dark);
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding: 140px var(--m) 72px;
  align-items: center;
}
.cta__words { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 24px; }
.cta__h { font-size: var(--step-dl); line-height: 0.92; letter-spacing: -0.04em; margin-left: -0.04em; }
.cta__p { font-size: var(--step-body); max-width: 34ch; }
.ea { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(460px, 100%); margin-top: 16px; }
.ea__f { font-size: var(--step-small); font-weight: 500; }
.ea__in { height: 56px; padding: 0 16px; background: var(--dark); color: #ffffff; border: 0; border-radius: 0; font-size: var(--step-body); }
.ea__in:focus-visible { outline: 3px solid var(--dark); outline-offset: 2px; }
.ea__check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--step-body); cursor: pointer; }
.ea__check input { width: 22px; height: 22px; margin: 0; accent-color: var(--dark); flex: none; cursor: pointer; }
.ea__go { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 10px; }
.ea__note { font-size: var(--step-small); max-width: 30ch; }
.dlg { grid-column: 8 / 13; width: 100%; max-width: 500px; }
/* the one action on the yellow: the #111 button in the yellow ink; hover and focus wipe it to white, focus adds a dark ring */
.btn--go { --b-bg: var(--dark); --b-ink: var(--yellow); --b-bg2: #ffffff; --b-ink2: var(--dark); }
.btn--go:focus-visible { outline-color: var(--dark); }
@media (prefers-reduced-motion: no-preference) {
  .js .cta__h .ln__in { transform: translateY(108%); transition: transform 900ms var(--ease-out); }
  .js .cta__h .ln + .ln .ln__in { transition-delay: 110ms; }
  .js .cta.is-in .cta__h .ln__in { transform: none; }
  .js:not(.ready) .cta__h .ln__in { animation: failsafe 1ms linear 3s forwards; }
  .js .dlg { opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 600ms var(--ease-out) 250ms, transform 800ms var(--ease-out) 250ms; }
  .js .cta.is-in .dlg { opacity: 1; transform: none; }
  .js:not(.ready) .dlg { animation: failsafe 1ms linear 3s forwards; }
}

/* ---------- 10. questions ---------- */
.faq { background: var(--char); color: #ffffff; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding: 150px var(--m) 210px; }
.faq__side { grid-column: 1 / 5; position: sticky; top: calc(var(--top-h) + 40px); align-self: start; display: flex; flex-direction: column; gap: 40px; }
.faq__h { font-size: var(--step-head); line-height: 1; letter-spacing: -0.035em; margin-left: -0.03em; }
.faq__pic { margin: 0; width: min(100%, 420px); overflow: hidden; }
.faq__pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.faq__pic figcaption { padding-top: 10px; font-size: var(--step-small); color: var(--muted); }
.faq__list { grid-column: 5 / 13; display: flex; flex-direction: column; gap: 8px; }
.q { background: var(--yellow); color: var(--dark); transition: background-color 240ms ease; }
/* the questions are a column of yellow keys on the charcoal; the one you open turns into white reading paper */
.q[open] { background: #ffffff; color: var(--dark); }
.q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 16px 24px; font-size: var(--step-body); font-weight: 500; cursor: pointer; }
.q summary::-webkit-details-marker { display: none; }
.q summary:focus-visible { outline-offset: -6px; }
.q__pm { position: relative; flex: none; width: 16px; height: 16px; }
.q__pm::before, .q__pm::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; background: currentColor; transition: transform 240ms var(--ease-out); }
.q__pm::after { transform: rotate(90deg); }
.q[open] .q__pm::after { transform: rotate(0deg); }
@media (hover: hover) and (pointer: fine) {
  .q:not([open]) summary:hover > span:first-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
}
.q__a p { padding: 0 24px 28px; max-width: 52ch; font-size: var(--step-body); }
@media (prefers-reduced-motion: no-preference) {
  .q[open] .q__a { animation: q-open 360ms var(--ease-out); }
}
@keyframes q-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- 11. footer: the curtain under the page ---------- */
main { position: relative; z-index: 1; background: var(--char); }
.main-end { display: block; height: 1px; } /* a sentinel for the observer, never drawn. taste-skill-ignore */
.foot {
  position: sticky;
  bottom: 0;
  z-index: 0;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  padding: calc(var(--top-h) + 20px) var(--m) 22px;
  background: var(--yellow);
  color: var(--dark);
}
.js .foot.is-far { visibility: hidden; }
/* while the curtain is far under the page its dot boxes take no room at all (the script frees them too) */
.js .foot.is-far .dots { display: none; }
.foot__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; font-size: var(--step-small); }
.foot__notes { display: flex; flex-direction: column; max-width: 60ch; }
.foot__mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: auto; flex-wrap: wrap; }
.foot__act { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot__mail { font-size: var(--step-body); font-weight: 500; }
.foot__mark { margin: 28px 0 18px -0.045em; font-size: var(--step-mark); font-weight: 600; line-height: 0.8; letter-spacing: -0.045em; white-space: nowrap; display: flex; }
.fl { position: relative; display: inline-block; }
.fl__g { display: inline-block; }
.fl::before { content: ""; position: absolute; left: 0.03em; right: 0.03em; bottom: 0.02em; height: 0.72em; background: currentColor; transform: scaleY(0); transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .js .foot:not(.is-in) .fl__g { clip-path: inset(100% 0 0 0); }
  .js .foot.is-in .fl::before { animation: bar-rise 720ms var(--ease-io) forwards; animation-delay: calc(var(--i) * 70ms); }
  .js .foot.is-in .fl__g { clip-path: inset(100% 0 0 0); animation: glyph-up 400ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 70ms + 340ms); }
}
@keyframes bar-rise { 0% { transform: scaleY(0); transform-origin: 50% 100%; } 47% { transform: scaleY(1); transform-origin: 50% 100%; } 48% { transform: scaleY(1); transform-origin: 50% 0%; } 100% { transform: scaleY(0); transform-origin: 50% 0%; } }
@keyframes glyph-up { to { clip-path: inset(0 0 0 0); } }
.foot__meta { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: end; font-size: var(--step-small); }
.foot__links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot__credits { text-align: center; max-width: 70ch; justify-self: center; }
.foot__place { text-align: right; }

/* ============ interface fragments: the app's own look (dark tokens from Theme.swift) ============ */
/* The app's accent is now the site's yellow (Theme.accentFill / accentInk dark #FFE927, onAccent #111111); every accent
   inside the fragments derives from --ui-accent. --ui-faint is lifted from the app's 0x5C5C65 to #7f7f88 on purpose:
   0x5C5C65 on the window's #0a0a0b is about 2.9:1, too faint for the fragments' small text on a web page. */
[data-ui] {
  --ui-bg: #0a0a0b; --ui-surface: #111113; --ui-raised: #161618; --ui-field: #161618; --ui-hover: #1c1c1f; --ui-border: #222226;
  --ui-text: #ededef; --ui-muted: #8a8a93; --ui-faint: #7f7f88; --ui-accent: #ffe927; --ui-on-accent: #111111;
  --ui-danger: #ff6b5b; --ui-ok: #4cc36b; --ui-warn: #ff8f1f; --ui-inverse: #f4f4f5; --ui-on-inverse: #0a0a0b;
  /* Theme.accentWash (the yellow at 7% over the dark card) and accentLine, from the accent itself */
  --ui-wash: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface));
  --ui-line: color-mix(in srgb, var(--ui-accent) 53%, var(--ui-surface));
  --ui-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.38;
  letter-spacing: 0;
  color: var(--ui-text);
  text-align: left;
}
/* preview only: ?ui=teal shows the app's old teal accent and amber warning, for comparison */
:root[data-ui-accent="teal"] [data-ui] { --ui-accent: #2dd4bf; --ui-on-accent: #041f1c; --ui-warn: #f0a83a; }
[data-ui] p { margin: 0; }
[data-ui] b { font-weight: 600; }
[data-ui] code { font-size: 0.96em; }
[data-ui] .ui-muted { color: var(--ui-muted); }
[data-ui] .ui-faint { color: var(--ui-faint); }
[data-ui] .ui-ic { width: 1.15em; height: 1.15em; flex: none; }
[data-ui] .ui-ic--sm { width: 0.95em; height: 0.95em; }
[data-ui] .ui-label { font-size: 0.85em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); }
[data-ui] .ui-tag { display: inline-block; font-size: 0.82em; font-weight: 500; color: var(--ui-muted); background: var(--ui-raised); border: 1px solid var(--ui-border); border-radius: 0.3em; padding: 0.05em 0.45em; vertical-align: 0.1em; white-space: nowrap; }
[data-ui] .ui-btn { display: inline-flex; align-items: center; gap: 0.45em; font-size: 1em; font-weight: 500; color: var(--ui-text); background: var(--ui-raised); border: 1px solid var(--ui-border); border-radius: 0.69em; padding: 0.52em 1em; white-space: nowrap; line-height: 1.2; text-decoration: none; }
[data-ui] .ui-btn svg { width: 1.1em; height: 1.1em; }
[data-ui] .ui-btn--accent { background: var(--ui-accent); border-color: transparent; color: var(--ui-on-accent); }
[data-ui] .ui-link { color: var(--ui-muted); font-weight: 500; }
/* pictures of controls stay pictures: no pointer, no hover, nothing to press */
[data-ui] span.ui-btn, [data-ui] .ui-link, [data-ui] .ui-act > .ui-muted, [data-ui] .ui-seg, [data-ui] .ui-fld, [data-ui].dlg { cursor: default; -webkit-user-select: none; user-select: none; }
/* the few that do something real: Prepare fix on web-1 goes to that very change in safe mode */
[data-ui] a.ui-btn, [data-ui] button.ui-btn { cursor: pointer; transition: background-color 150ms ease, transform 120ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  [data-ui] a.ui-btn:not(.ui-btn--accent):hover, [data-ui] button.ui-btn:not(.ui-btn--accent):hover { background: #242428; }
  [data-ui] a.ui-btn--accent:hover, [data-ui] button.ui-btn--accent:hover { background: color-mix(in srgb, var(--ui-accent) 78%, #ffffff); }
}
[data-ui] a.ui-btn:active, [data-ui] button.ui-btn:active { transform: scale(0.97); }
[data-ui] a.ui-btn:focus-visible, [data-ui] button.ui-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
[data-ui] button.ui-btn[disabled] { opacity: 0.55; cursor: default; }
[data-ui] .ui-safe { font-size: 0.82em; font-weight: 600; color: var(--ui-ok); background: #12261a; border-radius: 0.3em; padding: 0.15em 0.5em; white-space: nowrap; }
[data-ui] .ui-safeline { display: flex; align-items: center; gap: 0.4em; color: var(--ui-ok); font-size: 0.9em; margin-top: 0.3em; }
[data-ui] .ui-seg { display: inline-flex; background: var(--ui-raised); border: 1px solid var(--ui-border); border-radius: 0.5em; padding: 0.12em; font-size: 0.92em; }
[data-ui] .ui-seg span { padding: 0.15em 0.7em; border-radius: 0.38em; color: var(--ui-muted); }
[data-ui] .ui-seg .is-on { background: #2a2a2f; color: var(--ui-text); }
[data-ui] .ui-fld { display: inline-flex; align-items: center; min-width: 9em; height: 2.3em; padding: 0 0.77em; background: var(--ui-field); border: 1px solid var(--ui-border); border-radius: 0.62em; }
[data-ui] .ui-switch { position: relative; width: 2.9em; height: 1.65em; border-radius: 1em; background: #3a3a40; flex: none; cursor: pointer; transition: background-color 160ms ease; }
[data-ui] .ui-switch i { position: absolute; top: 0.15em; left: 0.15em; width: 1.35em; height: 1.35em; border-radius: 50%; background: #e8e8ea; transition: transform 200ms var(--ease-out); }
[data-ui] .ui-switch.is-on { background: #5c5c63; }
[data-ui] .ui-switch.is-on i { transform: translateX(1.25em); }
[data-ui] .ui-switch:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { [data-ui] .ui-switch i { transition: none; } }

/* review sheet */
[data-ui].sheet { background: var(--ui-bg); padding: 1.6em 1.6em 2em; border-radius: 0; }
[data-ui] .ui-srv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.6em; margin-bottom: 0.9em; }
[data-ui] .ui-srv__name { white-space: nowrap; font-size: 1.75em; font-weight: 600; letter-spacing: -0.01em; }
[data-ui] .ui-note { display: flex; align-items: center; gap: 0.5em; color: var(--ui-muted); margin: -0.3em 0 0.9em; font-size: 0.92em; }
[data-ui] .ui-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0.85em; }
[data-ui] .ui-score { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 1.6em; padding: 1.2em 1.3em; }
[data-ui] .ui-rings { grid-column: 1; display: grid; grid-template-columns: auto auto auto auto; align-items: center; column-gap: 0.7em; }
[data-ui] .ui-ring { position: relative; width: 4.6em; height: 4.6em; }
[data-ui] .ui-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
[data-ui] .ui-ring circle { fill: none; stroke: #26262b; stroke-width: 4; }
[data-ui] .ui-ring .ui-ring__v { stroke: var(--c); stroke-linecap: round; stroke-dasharray: calc(var(--v) * 1.1938) 119.38; }
[data-ui] .ui-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.55em; font-weight: 600; }
[data-ui] .ui-ring__txt { display: flex; flex-direction: column; margin-right: 0.8em; font-weight: 600; font-size: 1.08em; white-space: nowrap; }
[data-ui] .ui-cap { font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); font-weight: 600; }
[data-ui] .ui-sum { grid-column: 1; margin-top: 0.9em; color: var(--ui-muted); }
[data-ui] .ui-score > .ui-btn { grid-column: 1; justify-self: start; margin-top: 0.8em; }
[data-ui] .ui-spec { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: auto auto 1fr; column-gap: 0.9em; row-gap: 0.32em; align-content: center; border-left: 1px solid var(--ui-border); padding-left: 1.3em; }
[data-ui] .ui-spec dt { color: var(--ui-muted); white-space: nowrap; }
[data-ui] .ui-spec dd { font-weight: 600; white-space: nowrap; }
[data-ui] .ui-spec dd.ui-faint { font-weight: 400; }
[data-ui] .ui-grp { display: block; }
[data-ui] .ui-group { font-size: 0.85em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); margin: 1.4em 0 0.55em 0.3em; }
[data-ui] .ui-recs li { display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.75em; padding: 0.85em 1.1em; }
[data-ui] .ui-recs li + li { border-top: 1px solid var(--ui-border); }
[data-ui] .ui-recs li > svg { margin-top: 0.12em; }
[data-ui] .ui-recs li p + p { margin-top: 0.2em; }
[data-ui] .ui-act { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4em; font-size: 0.95em; }
/* a narrow stage puts the spec list under the rings instead of squeezing it past the card */
@container (max-width: 730px) {
  [data-ui] .ui-score { grid-template-columns: minmax(0, 1fr); }
  [data-ui] .ui-spec { grid-column: 1; grid-row: auto; grid-template-columns: auto auto minmax(0, 1fr); border-left: 0; border-top: 1px solid var(--ui-border); padding: 0.9em 0 0; margin-top: 1em; }
  [data-ui] .ui-spec dd.ui-faint { white-space: normal; overflow-wrap: anywhere; }
}
/* a phone-width stage stacks the two rings, so neither grade is squeezed or wrapped */
@container (max-width: 480px) {
  [data-ui] .ui-score { padding: 1em; }
  [data-ui] .ui-rings { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.7em; }
}

/* story: the app window with its activity pane; the pane keeps one height for all five states */
[data-ui].win { width: min(540px, 100%); background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: 0.9em; overflow: hidden; }
[data-ui] .win__bar { display: flex; align-items: center; gap: 0.7em; padding: 0.8em 1em; border-bottom: 1px solid var(--ui-border); }
[data-ui] .win__dots { display: inline-flex; gap: 0.4em; margin-right: 0.4em; }
[data-ui] .win__dots i { width: 0.8em; height: 0.8em; border-radius: 50%; background: #2c2c31; }
[data-ui] .win__scope { display: flex; flex-direction: column; line-height: 1.2; }
[data-ui] .win__scope span { font-size: 0.88em; }
[data-ui] .win__status { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5em; color: var(--ui-muted); }
[data-ui] .win__spin { width: 0.95em; height: 0.95em; border-radius: 50%; border: 2px solid #3a3a40; border-top-color: var(--ui-text); }
@media (prefers-reduced-motion: no-preference) {
  .js .story.is-near .win__spin { animation: spin 900ms linear infinite; }
  .tab-hidden .win__spin { animation-play-state: paused; }
}
@keyframes spin { to { transform: rotate(360deg); } }
[data-ui].win.is-done .win__spin { display: none; }
[data-ui] .win__staged { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 1em; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); }
[data-ui] .win__staged > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
[data-ui] .win__pane { padding: 0.8em 1em 1.2em; height: 23.5em; overflow: hidden; }
[data-ui] .win__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9em; }
[data-ui] .win__sub { font-size: 0.92em; }
[data-ui] .win__srv { font-weight: 600; font-size: 1.08em; margin: 0.4em 0 0.6em; }
[data-ui] .win__log li { display: none; grid-template-columns: auto 1fr auto; column-gap: 0.6em; padding: 0.3em 0; }
[data-ui] .win__log li time, [data-ui] .ask__log time { color: var(--ui-faint); font-size: 0.92em; }
[data-ui] .win__log li > svg { margin-top: 0.1em; }
.win__log li { display: grid; }
.ready .story__right .win__log li { display: none; }
.ready [data-state="1"] .win__log li[data-on~="1"], .ready [data-state="2"] .win__log li[data-on~="2"], .ready [data-state="3"] .win__log li[data-on~="3"], .ready [data-state="4"] .win__log li[data-on~="4"], .ready [data-state="5"] .win__log li[data-on~="5"] { display: grid; }
@media (prefers-reduced-motion: no-preference) { .js .story__stage .win__log li { animation: ui-row 380ms var(--ease-out); } }
@keyframes ui-row { from { opacity: 0; transform: translateY(6px); } }
.st__log { background: var(--ui-bg); border-radius: 0.6em; padding: 0.7em 0.9em; width: fit-content; max-width: 100%; }
[data-ui].st__log p { display: flex; gap: 0.55em; align-items: flex-start; }

/* your window: the app's safe mode card */
[data-ui].safe { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0.9em; padding: 1.1em 1.2em 1.2em; }
[data-ui] .safe__row { display: flex; align-items: flex-start; gap: 0.8em; }
[data-ui] .safe__ic { width: 1.3em; height: 1.3em; margin-top: 0.1em; }
[data-ui] .safe__txt { display: flex; flex-direction: column; gap: 0.15em; margin-right: auto; }
[data-ui] .safe__txt b { font-size: 1.08em; }
[data-ui] .safe__field { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.7em; margin: 1em 0 0 2.1em; }
[data-ui] .safe__field input { width: 5.4em; height: 2.3em; padding: 0 0.6em; background: var(--ui-field); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 0.45em; font-size: 1.08em; font-variant-numeric: tabular-nums; }
[data-ui] .safe__field input:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
[data-ui] .safe__off { display: flex; align-items: center; gap: 0.5em; margin: 1em 0 0 2.1em; color: var(--ui-warn); }

/* watch: the Watch screen's cards, whole, at their true proportions */
[data-ui].dash { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0.92em; padding: 1.15em; display: flex; flex-direction: column; gap: 0.77em; }
[data-ui] .dash__hd { display: flex; align-items: baseline; gap: 0.62em; }
[data-ui] .dash__t { font-size: 1.077em; font-weight: 600; white-space: nowrap; }
[data-ui] .dash__n { color: var(--ui-faint); }
[data-ui] .dash__tr { margin-left: auto; font-size: 0.923em; color: var(--ui-faint); white-space: nowrap; }
[data-ui] .tl { padding: 0.54em 0; }
[data-ui] .tl + .tl { border-top: 1px solid var(--ui-border); }
[data-ui] .tl__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6em; }
[data-ui] .tl__row span { color: var(--ui-muted); font-size: 0.96em; }
[data-ui] .tl__row b { font-family: var(--ui-round); font-size: 1.46em; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-ui] .tl__row b.is-hot, [data-ui] .tl__note.is-hot { color: var(--ui-danger); }
[data-ui] .tl__note { font-size: 0.885em; color: var(--ui-muted); margin-top: 0.15em; }
[data-ui] .heat { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; height: 1.08em; margin-top: 0.42em; }
[data-ui] .heat i { border-radius: 3px; background: var(--ui-accent); opacity: calc(0.07 + 0.83 * var(--h)); }
[data-ui].dash--geo { container-type: inline-size; }
[data-ui] .geo { display: flex; gap: 4px; aspect-ratio: 10 / 3.3; min-height: 13em; }
[data-ui] .geo__map { flex: 1; display: flex; gap: 4px; min-width: 0; }
[data-ui] .geo__nl { flex: 3.26; }
[data-ui] .geo__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-ui] .geo__col--a { flex: 1.7; }
[data-ui] .geo__col--b { flex: 1; }
[data-ui] .geo__us { flex: 1.75; }
[data-ui] .geo__ru { flex: 1; }
[data-ui] .geo__de { flex: 1.08; }
[data-ui] .geo__ua { flex: 1; }
[data-ui] .geo__br { flex: 0 0 23%; }
[data-ui] .ct { position: relative; display: flex; flex-direction: column; gap: 0.23em; min-width: 0; padding: 0.77em; border-radius: 0.46em; border: 1px solid; overflow: hidden; }
/* like the app: on your list is the yellow wash with a solid line; not on your list is grey with a dashed orange line */
[data-ui] .ct--ok { border-color: var(--ui-line); background: var(--ui-wash); }
[data-ui] .ct--warn { border-style: dashed; border-color: color-mix(in srgb, var(--ui-warn) 80%, transparent); background: rgba(28, 28, 31, 0.7); }
[data-ui] .ct--bad { border-color: rgba(255, 107, 91, 0.85); background: rgba(255, 107, 91, 0.12); }
[data-ui] .ct--sm { padding: 0.46em; }
[data-ui] .ct__nm { display: flex; align-items: center; gap: 0.4em; font-weight: 500; line-height: 1.2; }
[data-ui] .ct--sm .ct__nm { font-size: 0.885em; }
[data-ui] .flag { width: 1.15em; height: 0.77em; flex: none; }
[data-ui] .ct__n { font-weight: 500; font-variant-numeric: tabular-nums; font-size: 0.96em; color: var(--ui-muted); }
[data-ui] .ct--warn .ct__n { color: var(--ui-warn); }
[data-ui] .ct--bad .ct__n { color: var(--ui-danger); }
[data-ui] .ct--sm .ct__n { font-size: 0.85em; }
[data-ui] .ct__bd { margin-top: auto; font-size: 0.885em; color: var(--ui-muted); }
[data-ui] .nm-s { display: none; }
[data-ui] .geo__keys { display: flex; flex-wrap: wrap; gap: 0.3em 1.1em; font-size: 0.885em; color: var(--ui-muted); }
[data-ui] .key { display: inline-flex; align-items: center; gap: 0.46em; }
[data-ui] .key::before { content: ""; width: 0.77em; height: 0.77em; border-radius: 2px; border: 1px solid; flex: none; }
[data-ui] .key--ok::before { border-color: var(--ui-line); background: var(--ui-wash); }
[data-ui] .key--warn::before { border-style: dashed; border-color: color-mix(in srgb, var(--ui-warn) 80%, transparent); background: rgba(28, 28, 31, 0.7); }
[data-ui] .key--bad::before { border-color: rgba(255, 107, 91, 0.85); background: rgba(255, 107, 91, 0.12); }
[data-ui] .geo__should { display: flex; align-items: center; gap: 0.62em; font-weight: 500; }
@container (max-width: 560px) {
  [data-ui] .geo { aspect-ratio: 4 / 3; }
  [data-ui] .geo__br { flex-basis: 22%; }
  [data-ui] .nm-l { display: none; }
  [data-ui] .nm-s { display: inline; }
  [data-ui] .geo__nl .ct__bd { display: none; }
  [data-ui] .ct { padding: 0.5em; }
  /* like the app: a tile too narrow for its code shows the flag and the count only */
  [data-ui] .ct--sm .nm-c { display: none; }
}
[data-ui] .att { display: grid; grid-template-columns: auto 1fr; column-gap: 0.92em; }
[data-ui] .att__ic { width: 1.15em; height: 1.15em; margin-top: 0.15em; }
[data-ui] .att__t { font-size: 1.04em; font-weight: 500; }
[data-ui] .att__d { font-size: 0.923em; margin-top: 0.3em; }
[data-ui] .att__act { margin-top: 0.62em; }
[data-ui] .shares { display: flex; flex-direction: column; gap: 0.5em; }
[data-ui] .shares li { position: relative; display: grid; grid-template-columns: 1fr auto 2.77em; align-items: baseline; column-gap: 0.77em; padding: 0.38em 0.77em; border-radius: 0.46em; background: rgba(22, 22, 24, 0.6); overflow: hidden; }
[data-ui] .shares li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--s) * 100%); background: rgba(138, 138, 147, 0.16); }
[data-ui] .shares li > * { position: relative; }
[data-ui] .shares code { font-size: 0.96em; white-space: nowrap; }
[data-ui] .shares b { font-weight: 500; font-size: 1.04em; font-variant-numeric: tabular-nums; text-align: right; }
[data-ui] .shares i { font-style: normal; font-size: 0.923em; color: var(--ui-faint); text-align: right; font-variant-numeric: tabular-nums; }

/* agents: the request in the app's main window; after Approve & run the same card turns into the run's activity */
[data-ui].ask { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0.8em; padding: 1.05em 1.2em; }
[data-ui] .ask__req { display: grid; grid-template-columns: auto 1fr; column-gap: 0.85em; row-gap: 0.9em; }
[data-ui] .ask__ic { width: 1.3em; height: 1.3em; margin-top: 0.08em; }
[data-ui] .ask__txt { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
[data-ui] .ask__btns { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 0.7em; }
[data-ui].ask:focus { outline: none; }
[data-ui].ask:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
[data-ui] .ask__act { display: none; }
.js [data-ui].ask:not([data-state="ask"]) .ask__req { display: none; }
.js [data-ui].ask:not([data-state="ask"]) .ask__act { display: block; }
html:not(.js) [data-ui] .ask__act { display: block; margin-top: 1.1em; padding-top: 1em; border-top: 1px solid var(--ui-border); }
[data-ui] .ask__head { display: flex; align-items: baseline; gap: 0.8em; margin-bottom: 0.7em; }
[data-ui] .ask__sub { font-size: 0.92em; }
[data-ui] .ask__log { display: flex; flex-direction: column; gap: 0.3em; }
[data-ui] .ask__log li { display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.55em; }
[data-ui] .ask__log li > svg { margin-top: 0.1em; }
@media (prefers-reduced-motion: no-preference) { [data-ui] .ask__log li.is-new { animation: ui-row 380ms var(--ease-out); } }
[data-ui] .ask__timer { display: flex; align-items: baseline; gap: 0.4em; margin-top: 0.8em; padding-left: 1.7em; font-size: 1.15em; font-weight: 600; font-variant-numeric: tabular-nums; }
.js [data-ui].ask[data-state="no"] .ask__timer { display: none; }

/* early access: a picture of the app's Add server sheet; the page's own form sits beside it */
[data-ui].dlg { background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: 0.95em; padding: 1.85em; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42); display: flex; flex-direction: column; gap: 1.23em; }
[data-ui] .dlg__title { font-family: var(--ui-round); font-size: 1.69em; font-weight: 600; line-height: 1.15; }
[data-ui] .dlg__row { display: flex; gap: 0.92em; }
[data-ui] .dlg__f { display: flex; flex-direction: column; gap: 0.38em; flex: 1; min-width: 0; }
[data-ui] .dlg__f--user { flex: 0 0 10.8em; }
[data-ui] .dlg__f--port { flex: 0 0 7.7em; }
[data-ui] .dlg__l { font-size: 0.885em; color: var(--ui-muted); }
[data-ui] .dlg__in { display: flex; align-items: center; height: 2.4em; padding: 0 0.77em; background: var(--ui-field); border: 1px solid var(--ui-border); border-radius: 0.62em; white-space: nowrap; overflow: hidden; }
[data-ui] .dlg__in.is-ph { color: var(--ui-faint); }
[data-ui] .dlg__check { display: flex; gap: 0.6em; align-items: flex-start; font-size: 0.96em; }
[data-ui] .dlg__box { position: relative; flex: none; width: 1.08em; height: 1.08em; margin-top: 0.12em; border-radius: 0.25em; border: 1px solid #4a4a50; background: var(--ui-field); }
[data-ui] .dlg__box.is-on { background: var(--ui-accent); border-color: var(--ui-accent); }
[data-ui] .dlg__box.is-on::after { content: ""; position: absolute; left: 0.33em; top: 0.1em; width: 0.28em; height: 0.56em; border: solid var(--ui-on-accent); border-width: 0 0.14em 0.14em 0; transform: rotate(45deg); }
[data-ui] .dlg__note { font-size: 0.885em; color: var(--ui-faint); }
[data-ui] .dlg__btns { display: flex; justify-content: flex-end; gap: 0.62em; }

/* footer beat */
[data-ui].beat { display: inline-flex; align-items: center; gap: 0.75em; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: 0.7em; padding: 0.8em 1.05em; font-size: 15px; }
[data-ui] .beat__srv { font-weight: 600; }
[data-ui] .beat__t { display: inline-flex; align-items: baseline; gap: 0.25em; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 0.6em; }

/* wide screens: the fragments grow a little (never below their true size) so they hold their fields */
@media (min-width: 1280px) {
  [data-ui].win { font-size: 15px; width: min(620px, 100%); }
  [data-ui].ask { font-size: 14px; }
  .ask { max-width: 690px; }
  [data-ui].dlg { font-size: 14px; }
  [data-ui].safe { font-size: 14px; }
  [data-ui].dash { font-size: 14px; }
  .window__ctl { width: min(470px, 100%); }
}
@media (min-width: 1600px) {
  [data-ui].sheet { font-size: 14px; }
  [data-ui].dash { font-size: 15px; }
}

/* ============ tablet ============ */
@media (max-width: 1099px) {
  .intro__big { grid-column: 1 / 13; font-size: 28px; }
  .intro__p { grid-column: 1 / 13; margin-top: 40px; max-width: 60ch; }
  .review__index { grid-column: 1 / 13; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; padding-top: 0; }
  .review__side { grid-column: 1 / 13; margin-top: 56px; }
  .watch__head { grid-column: 1 / 13; grid-row: 1; margin-bottom: 32px; }
  .watch__chap { grid-column: 1 / 13; grid-row: 2; }
  .wf--geo { grid-column: 1 / 13; grid-row: 3; }
  .wf--traffic { grid-column: 1 / 7; grid-row: 4; }
  .wf--att { grid-column: 7 / 13; grid-row: 4; }
  .wf--ports { grid-column: 7 / 13; grid-row: 5; }
  .agents__h { grid-column: 1 / 13; grid-row: 1; }
  .agents__chap { grid-column: 1 / 13; grid-row: 2; margin: 20px 0 28px auto; }
  .agents__rules { grid-column: 1 / 13; grid-row: 3; max-width: 60ch; }
  .agents__state { grid-column: 1 / 13; grid-row: 4; text-align: left; margin-top: 56px; padding-top: 0; }
  .ask-wrap { grid-column: 1 / 13; grid-row: 5; margin-top: 16px; min-height: 0; }
  .agents__real { grid-column: 1 / 13; grid-row: 6; margin-top: 40px; max-width: 60ch; }
  .cta__words { grid-column: 1 / 13; align-self: start; }
  .dlg { grid-column: 1 / 13; margin-top: 56px; }
  .faq__side { grid-column: 1 / 13; position: static; margin-bottom: 48px; flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .faq__pic { width: min(40%, 320px); }
  .faq__list { grid-column: 1 / 13; }
}
@media (max-width: 959px) {
  .top__nav { display: none; }
}

/* ============ phone: its own composition ============ */
@media (max-width: 699px) {
  :root { --top-h: 56px; }
  [data-ui] { font-size: 15.4px; }
  [data-ui].sheet { font-size: 14px; }
  [data-ui].dash { font-size: 13px; }
  .top { gap: 12px; }
  .top .btn { min-height: 44px; padding: 0 16px; font-size: var(--step-small); }
  .hero { --bar-y: 47%; height: 100svh; min-height: 620px; }
  .hero__h1 { top: 17%; font-size: clamp(3.6rem, 15.6vw, 4.2rem); }
  .run__end { bottom: 16px; }
  .clock { top: calc(var(--bar-y) + 36px); }
  .clock__lines { font-size: var(--step-body); }
  .hero__sub { left: var(--m); right: var(--m); width: auto; bottom: 24px; font-size: var(--step-body); }

  .intro { padding: 6px; }
  /* three rows: the blue tile, the SSH tile, then the print across the full width, its caption under it on the yellow */
  .board { grid-template-columns: 1fr 1fr; grid-template-rows: 46svh auto auto; gap: 6px; }
  .tile--a { grid-column: 1 / 3; grid-row: 1; }
  .tile--b { grid-column: 1 / 3; grid-row: 2; padding: 18px 14px 16px; gap: 8px; }
  .tile--c { grid-column: 1 / 3; grid-row: 3; }
  .tile--c picture { aspect-ratio: 760 / 524; height: auto; }
  .tile--c .tile__cap { position: static; background: none; color: var(--dark); padding: 8px 2px 2px; }
  .slogan--word { font-size: var(--step-dxl); }
  .tile__say { font-size: var(--step-body); }
  .intro__text { grid-template-columns: 1fr; padding: 48px 12px 96px; }
  .intro__big { grid-column: 1; font-size: var(--step-lead); line-height: 1.3; }
  .intro__p { grid-column: 1; margin-top: 32px; font-size: var(--step-body); line-height: 1.5; }

  .review { display: block; padding: 96px var(--m) 72px; }
  .review__index { flex-direction: column; align-items: stretch; gap: 32px; }
  .review__names { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  .review__name { min-height: 44px; }
  .review__side { margin-top: 40px; gap: 14px; }
  [data-ui].sheet { padding: 1.1em 1.1em 1.6em; }
  [data-ui] .ui-grp + .ui-grp { display: none; }
  [data-ui] .ui-ring { width: 4em; height: 4em; }
  [data-ui] .ui-ring__txt { margin-right: 0.3em; }
  [data-ui] .ui-recs li { grid-template-columns: auto 1fr; padding: 0.85em 0.9em; }
  [data-ui] .ui-act { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.9em; margin-top: 0.6em; }

  .story__head { padding: 18px var(--m); }
  .st { padding: 72px var(--m) 56px; }
  .st__p { font-size: var(--step-body); }

  .window { padding: 96px var(--m) 40px; min-height: 92svh; gap: 48px; }
  .window__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .window__u { font-size: var(--step-lead); }
  .window__how { width: auto; font-size: var(--step-body); }
  .range input::-webkit-slider-thumb { width: 44px; height: 44px; margin-top: -18px; }
  .range input::-moz-range-thumb { width: 44px; height: 44px; }
  .range input { height: 52px; }

  .watch { padding: 80px var(--m) 64px; }
  .watch__grid { display: flex; flex-direction: column; align-items: stretch; }
  .watch__head { margin-bottom: 24px; gap: 16px; }
  .watch__chap { margin-bottom: 12px; }
  .wf--traffic, .wf--att { margin-top: 28px; }
  .wf--ports { display: none; }
  .wcap { margin-top: 10px; }
  [data-ui] .geo { aspect-ratio: 16 / 11; min-height: 0; }
  [data-ui] .geo__should { display: none; }
  [data-ui] .att__d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

  .tools { padding: 72px var(--m) 88px; }
  .tools__chap { margin-bottom: 84px; }
}
@media (max-width: 699px) {
  .agents { padding: 88px var(--m) 112px; }
  .agents__chap { margin: 16px 0 20px auto; }
  .agents__state { font-size: var(--step-body); margin-top: 48px; }
  [data-ui] .ask__btns { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  [data-ui] .ask__timer { padding-left: 0; }

  .cta { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 96px var(--m) 40px; min-height: 92svh; }
  .cta__p { font-size: var(--step-body); }
  .ea { width: 100%; }
  .ea__go .btn { width: 100%; min-height: 52px; }
  [data-ui].dlg { margin-top: 48px; max-width: none; padding: 1.3em; font-size: 14px; }
  [data-ui] .dlg__f--user { flex-basis: 7em; }
  [data-ui] .dlg__f--port { flex-basis: 5.4em; }

  .faq { padding: 96px var(--m) 120px; }
  .faq__side { flex-direction: column; align-items: flex-start; gap: 24px; }
  .faq__pic { width: 100%; }
  .faq__pic img { aspect-ratio: 3 / 2; }
  .faq__list { gap: 6px; }
  .q summary { min-height: 64px; padding: 14px 20px; }
  .q__a p { padding: 0 20px 22px; font-size: var(--step-body); }

  .foot { padding: calc(var(--top-h) + 16px) var(--m) 18px; min-height: 560px; height: 100svh; }
  .foot__top { flex-direction: column; gap: 14px; }
  .foot__mid { flex-direction: column; align-items: flex-start; gap: 20px; }
  [data-ui].beat { font-size: 14px; flex-wrap: wrap; }
  .foot__mark { margin-top: 40px; }
  .foot__meta { grid-template-columns: 1fr; gap: 10px; }
  .foot__credits, .foot__place { text-align: left; justify-self: start; }
}


/* ---------- early access: a real sign-up (email field, status line, off-screen honeypot) ---------- */
.ea__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: off-screen honeypot, not a divider */
.ea__opt { font-weight: 400; color: var(--y-muted); }
.ea__in::placeholder { color: #9a9a9a; }
button.btn { border: 0; font-family: inherit; cursor: pointer; }
button.btn:disabled { opacity: 0.6; cursor: progress; }
.ea__fine { font-size: var(--step-small); max-width: 34ch; }
.ea__fine .link { font-weight: 500; }
.ea__note { font-size: var(--step-small); font-weight: 500; min-height: 1.5em; max-width: 44ch; margin-top: 4px; }
.ea.is-done .ea__f, .ea.is-done .ea__in, .ea.is-done .ea__check, .ea.is-done .ea__go { display: none; }
.ea.is-done .ea__note { font-size: var(--step-lead); font-weight: 600; max-width: 22ch; line-height: 1.2; }