/* Affinity Lab — v7.
   One typeface (Inter), one ink ground, light instead of boxes.
   Chapters change the colour of the light; scenes play once and rest.
   Meaning: violet-blue = the systems, mint = what you gain, coral = what it costs today, amber = a pause. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF, U+0400-04FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/jbm-latin.woff2') format('woff2'); }

@property --glow-a { syntax: '<color>'; inherits: true; initial-value: #7b68ff; }
@property --glow-b { syntax: '<color>'; inherits: true; initial-value: #2fb8e6; }

/* ───────── tokens: primitives ───────── */
:root {
  --ink-0: #05070c;
  --ink-1: #07090f;
  --ink-2: #0c101b;
  --ink-3: #121828;
  --white: #f2f4fa;
  --grey-1: #c9d0de;
  --grey-2: #98a2b6;
  --grey-3: #6f7a92;
  --violet: #a184ff;
  --violet-deep: #7b68ff;
  --blue: #5b8cff;
  --cyan: #38bdf8;
  --mint: #34d399;
  --mint-soft: #86f3c9;
  --green-deep: #1fb877;
  --coral: #ff8a7a;
  --coral-deep: #f2614f;
  --amber: #f5b54a;
  --red: #ff6b6b;

  /* semantic */
  --bg: var(--ink-1);
  --text: var(--white);
  --text-2: var(--grey-1);
  --text-3: var(--grey-2);
  --hair: rgba(255, 255, 255, .07);
  --hair-2: rgba(255, 255, 255, .12);
  --hair-3: rgba(255, 255, 255, .2);
  --gain: var(--mint);
  --loss: var(--coral);
  --gate: var(--amber);
  --grad-sys: linear-gradient(100deg, #b9a6ff 0%, #7f9cff 50%, #4cc6f5 100%);
  --grad-gain-text: linear-gradient(180deg, #c8fbe4 0%, #5ee6b0 55%, #2fcf95 100%);
  --grad-gain-bar: linear-gradient(90deg, #26c48a 0%, #38d4c8 60%, #4cc6f5 100%);
  --grad-loss-text: linear-gradient(100deg, #ffc0b6 0%, #ff8a7a 100%);
  --grad-gain-line: linear-gradient(100deg, #9cf7d0 0%, #4fd9c2 55%, #4cc6f5 100%);

  /* type and space */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1312px;
  --pad: clamp(20px, 4vw, 56px);
  --bar-h: 72px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.55 var(--font); font-feature-settings: 'cv11', 'ss03'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
b, strong { font-weight: 650; }
::selection { background: rgba(123, 104, 255, .45); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }
.skip { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--bg); font-weight: 600; }
.skip:focus { top: 12px; }
main { position: relative; z-index: 1; }

/* ───────── the light: ground, two glows, grid, grain ───────── */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); transition: --glow-a 1.8s var(--ease-io), --glow-b 1.8s var(--ease-io); }
.backdrop__glow { position: absolute; border-radius: 50%; }
.backdrop__glow--a { width: 1300px; height: 1000px; left: -420px; top: -520px; background: radial-gradient(closest-side, color-mix(in oklab, var(--glow-a) 30%, transparent), transparent 74%); }
.backdrop__glow--b { width: 1200px; height: 1000px; right: -460px; bottom: -560px; background: radial-gradient(closest-side, color-mix(in oklab, var(--glow-b) 22%, transparent), transparent 74%); }
.backdrop__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 15%, transparent 100%); mask-image: radial-gradient(80% 70% at 50% 40%, #000 15%, transparent 100%); }
.backdrop__grain { position: absolute; inset: 0; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--grad-sys); transform-origin: left; transform: scaleX(0); }

/* ───────── header: brand, the chapter you are in, three links ───────── */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--bar-h); border-bottom: 1px solid transparent; transition: background .4s, border-color .4s, backdrop-filter .4s; }
.bar.is-scrolled { background: rgba(7, 9, 15, .7); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--hair); }
.bar__in { height: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { width: 34px; height: 25px; }
.brand__mark circle { fill: none; stroke: rgba(201, 208, 222, .78); stroke-width: 1.6; }
.brand__name { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.bar__chapter { position: relative; padding-left: 18px; font-size: 15px; color: var(--text-3); white-space: nowrap; transition: opacity .35s; }
.bar__chapter::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: var(--hair-3); }
.bar__chapter:empty { opacity: 0; }
.bar__chapter.is-swap { opacity: 0; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--text-2); transition: color .2s; }
.nav a:hover, .nav a.is-active { color: var(--text); }
.bar__cv { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .04); font-size: 15px; font-weight: 600; transition: border-color .2s, background .2s; }
.bar__cv:hover { border-color: rgba(161, 132, 255, .6); background: rgba(161, 132, 255, .1); }

/* ───────── shared type ───────── */
.tint { background: var(--grad-sys); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: slice; box-decoration-break: slice; }
.tint--loss { background-image: var(--grad-loss-text); }
.tint--gain { background-image: var(--grad-gain-line); }
.marker { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--violet); }
.marker::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.marker--loss { color: var(--coral); }
.marker--gain { color: var(--mint); }
.h2 { margin-top: 18px; font-size: clamp(32px, 3.3vw, 48px); line-height: 1.06; font-weight: 760; letter-spacing: -.038em; text-wrap: balance; }
.h2 .tint { display: block; }

/* headline entrance: the words rise once, the tinted line arrives as light */
[data-rise] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
[data-rise] .w > span { display: inline-block; }
.js [data-rise] .w > span { transform: translateY(105%); }
.js [data-rise].is-in .w > span { transform: none; transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 38ms); }
.js [data-rise] .tint { opacity: 0; filter: blur(10px); }
.js [data-rise].is-in .tint { opacity: 1; filter: none; transition: opacity 1.1s var(--ease), filter 1.2s var(--ease); transition-delay: calc(120ms + var(--n, 6) * 38ms); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .3s, background .3s, border-color .3s; }
.btn--primary { color: #0b0d16; background: linear-gradient(100deg, #cfc3ff 0%, #9bb6ff 52%, #7fdcf8 100%); box-shadow: 0 14px 44px -16px rgba(127, 156, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 20px 54px -18px rgba(127, 156, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .7); }
.btn--quiet { color: var(--text); border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .03); }
.btn--quiet:hover { border-color: var(--hair-3); background: rgba(255, 255, 255, .06); }

/* the ignite divider: a hairline at the top of a chapter lights up from the centre once */
.ignite { position: relative; }
.ignite::before, .ignite::after { content: ''; position: absolute; left: 50%; top: 0; width: min(1200px, calc(100% - 2 * var(--pad))); transform: translateX(-50%); pointer-events: none; }
.ignite::before { height: 1px; background: linear-gradient(90deg, transparent, var(--hair-2) 20%, var(--hair-2) 80%, transparent); }
.ignite::after { top: -1px; height: 3px; background: radial-gradient(closest-side, var(--spark, #b9a6ff), transparent); opacity: 0; transform: translateX(-50%) scaleX(0); }
.ignite.is-lit::after { animation: ignite 1.8s var(--ease) forwards; }
@keyframes ignite { 0% { opacity: 1; transform: translateX(-50%) scaleX(.02); } 55% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scaleX(1); } }

/* ───────── 1. the promise ───────── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--bar-h) + 36px) 0 40px; display: flex; flex-direction: column; justify-content: center; }
.hero__top { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 24px; align-items: center; }
.hero__who { font-size: 16px; font-weight: 500; color: var(--text-2); }
.hero__title { margin-top: 18px; font-size: clamp(38px, 3.9vw, 56px); line-height: 1.03; font-weight: 770; letter-spacing: -.043em; text-wrap: balance; }
.hero__lead { margin-top: 24px; max-width: 30em; font-size: 19px; line-height: 1.55; color: var(--text-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.lens { position: relative; width: 100%; aspect-ratio: 760 / 600; }
.lens canvas, .lens svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lens__cap { position: absolute; right: 1%; bottom: 0; display: flex; align-items: center; gap: 14px; max-width: 28em; text-align: right; font-size: 15px; line-height: 1.45; color: var(--text-3); }
.lens__cap b { font-weight: 600; color: var(--text-2); }
.lens__replay { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair-2); color: var(--text-3); transition: color .2s, border-color .2s; }
.lens__replay:hover { color: var(--text); border-color: var(--hair-3); }
.lens__replay[hidden] { display: none; }
.lens__replay svg { position: static; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* lens art (built in JS) */
.la-ring { fill: none; stroke-width: 1.4; }
.la-disc { opacity: .9; }
.la-caustic { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; stroke-linecap: round; }
.la-thread { fill: none; stroke: url(#laThread); stroke-width: 1.2; stroke-linecap: round; }
.la-doc rect.sheet { fill: url(#laDocFill); stroke: url(#laDocStroke); stroke-width: 1; }
.la-doc .t { fill: var(--text); font: 650 15px var(--font); letter-spacing: -.01em; }
.la-doc .s { fill: var(--grey-2); font: 500 14px var(--font); }
.la-doc .ln { fill: rgba(255, 255, 255, .12); }
.la-doc .ok { fill: rgba(52, 211, 153, .16); stroke: var(--mint); stroke-width: 1.2; }
.la-doc .tick { fill: none; stroke: var(--mint-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the decision-maker strip: four numbers, no boxes */
.gains { width: 100%; max-width: var(--wrap); margin: 44px auto 0; padding: 0 var(--pad); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.gains__item { display: flex; flex-direction: column; gap: 8px; padding: 18px 28px 2px; border-left: 1px solid var(--hair); }
.gains__item:first-child { padding-left: 0; border-left: 0; }
.gains dd { display: contents; }
.gains__num { order: 1; display: flex; align-items: baseline; gap: 7px; font-weight: 800; letter-spacing: -.045em; white-space: nowrap; }
.gains__num b { font-size: 50px; line-height: 1; font-weight: 800; background: var(--grad-gain-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.gains__num small { font-size: 21px; font-weight: 650; letter-spacing: -.01em; color: var(--mint-soft); }
.gains__item--lead .gains__num b { font-size: 60px; }
.gains__item--lead .gains__num small:first-child { font-size: 34px; margin-right: -2px; }
.gains dt { order: 2; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.gains .was { order: 3; font-size: 15px; color: var(--text-3); }
.gains .was s { color: var(--text-2); text-decoration-color: rgba(255, 138, 122, .95); text-decoration-thickness: 1.5px; }

/* ───────── 2. the problem: one pinned scene, five beats ───────── */
.pain { position: relative; height: 560vh; overflow-x: clip; }
.pain__pin { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: var(--wrap); margin: 0 auto; padding: calc(var(--bar-h) + 24px) var(--pad) 32px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto repeat(5, auto); align-content: center; column-gap: 64px; }
.pain__head { grid-column: 1; grid-row: 1; margin-bottom: 30px; }
.pain__steps, .pstep { display: contents; }
.pain__rail { grid-column: 1; grid-row: 2 / 7; position: relative; width: 2px; margin: 10px 0; border-radius: 2px; background: var(--hair-2); }
.pain__rail i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--coral), rgba(255, 138, 122, .35)); transform-origin: top; transform: scaleY(var(--pp, 0)); }
.pstep__text { grid-column: 1; padding: 9px 0 9px 30px; }
.pstep:nth-child(1) .pstep__text { grid-row: 2; } .pstep:nth-child(2) .pstep__text { grid-row: 3; } .pstep:nth-child(3) .pstep__text { grid-row: 4; } .pstep:nth-child(4) .pstep__text { grid-row: 5; } .pstep:nth-child(5) .pstep__text { grid-row: 6; }
.pstep__t { font-size: 21px; line-height: 1.3; font-weight: 650; letter-spacing: -.02em; color: var(--text); opacity: .34; transition: opacity .5s var(--ease); }
.pstep.is-active .pstep__t { opacity: 1; }
.pstep__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.pstep__more > div { overflow: hidden; }
.pstep.is-active .pstep__more { grid-template-rows: 1fr; }
.pstep__d { padding-top: 10px; max-width: 30em; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.pstep__cost { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-bottom: 6px; font-size: 16px; font-weight: 600; color: var(--coral); }
.pstep__cost::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px rgba(255, 138, 122, .9); }

.pstep__viz { position: absolute; top: calc(50% + var(--bar-h) / 2); left: calc(var(--pad) + (100% - 2 * var(--pad) - 64px) * 5 / 12 + 64px); width: calc((100% - 2 * var(--pad) - 64px) * 7 / 12); height: min(580px, 66vh); opacity: 0; transform: translateY(calc(-50% + 18px)) scale(.985); filter: blur(8px); transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease); pointer-events: none; }
.pstep.is-active .pstep__viz { opacity: 1; transform: translateY(-50%); filter: none; }

/* beat 1: the archive wall, many sources, many languages; a loupe that finds nothing */
.pv-archive__view { position: absolute; inset: 0 0 12% 0; perspective: 1300px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%), linear-gradient(90deg, #000 78%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%), linear-gradient(90deg, #000 78%, transparent 100%); mask-composite: intersect; }
.pv-archive__wall { position: absolute; left: 6%; right: -4%; top: -6%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; transform: rotateY(-17deg) rotateX(9deg); transform-origin: 20% 40%; }
.pv-archive__col { display: grid; gap: 14px; align-content: start; transform: translateY(calc(var(--lp, 0) * var(--sp, 300) * -1px)); }
.pv-archive__col:nth-child(1) { --sp: 300; }
.pv-archive__col:nth-child(2) { --sp: 430; margin-top: 46px; }
.pv-archive__col:nth-child(3) { --sp: 220; margin-top: 18px; }
.doc { display: grid; gap: 5px; padding: 13px 15px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); border: 1px solid rgba(255, 255, 255, .075); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9); }
.doc em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.doc em::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: #7f9cff; }
.doc b { font: 600 14px var(--mono); color: var(--text-2); }
.doc i { font-style: normal; font-size: 15px; line-height: 1.35; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-archive__col .doc:nth-child(4n + 2) em::before { background: #c4b5fd; border-radius: 50%; }
.pv-archive__col .doc:nth-child(4n + 3) em::before { background: #86f3c9; }
.pv-archive__col .doc:nth-child(4n) em::before { background: #f5b54a; border-radius: 50%; }
.pv-archive__loupe { position: absolute; left: 0; top: 0; width: 128px; height: 128px; border-radius: 50%; border: 1.5px solid rgba(255, 138, 122, .8); background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .16), rgba(255, 138, 122, .07) 58%, rgba(255, 138, 122, .02) 72%); box-shadow: 0 0 40px -6px rgba(255, 138, 122, .45), inset 0 0 24px rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(1.5px) brightness(1.25); backdrop-filter: blur(1.5px) brightness(1.25); offset-path: path('M 130 150 C 330 60, 520 210, 380 300 S 150 400, 470 430'); offset-distance: calc(var(--lp, 0) * 100%); offset-rotate: 0deg; }
.pv-archive__loupe i { position: absolute; right: -26px; bottom: -14px; width: 40px; height: 4px; border-radius: 3px; background: rgba(255, 138, 122, .8); transform: rotate(40deg); }
.pv-archive__loupe::after { content: 'no answer here'; position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: rgba(255, 138, 122, .12); font-size: 14px; font-weight: 600; color: var(--coral); }
.pv-archive__count { position: absolute; left: 4%; bottom: 1%; font-size: 16px; color: var(--text-3); }
.pv-archive__count b { color: var(--text); font-weight: 700; }

/* beat 2: four authors, four formats */
.pv-authors__std { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); padding: 8px 16px; border: 1.5px dashed rgba(134, 243, 201, .5); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--mint-soft); white-space: nowrap; }
.pv-authors__deck { position: absolute; left: 0; right: 0; top: 25%; height: 56%; }
.sheet { position: absolute; left: 50%; top: 0; width: 204px; display: grid; gap: 9px; padding: 16px 16px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, #131a2b, #0d121f); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .95); --spread: calc(1 + var(--lp, 0) * .22); transform: translateX(calc(-50% + var(--x) * var(--spread) * 1px)) translateY(calc(var(--y, 0) * 1px + var(--lp, 0) * var(--dy, 0) * 1px)) rotate(calc(var(--r) * (1 + var(--lp, 0) * .6) * 1deg)); }
.sheet.s1 { --x: -228; --r: -8; --y: 26; --dy: 16; }
.sheet.s2 { --x: -76; --r: -3; --y: 0; --dy: -8; }
.sheet.s3 { --x: 76; --r: 3; --y: 12; --dy: 10; }
.sheet.s4 { --x: 228; --r: 8; --y: 34; --dy: 18; }
.sheet em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--text-3); }
.sheet b { font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--text); }
.sheet .ln { display: block; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.sheet .w35 { width: 35%; } .sheet .w40 { width: 40%; } .sheet .w50 { width: 50%; } .sheet .w60 { width: 60%; } .sheet .w65 { width: 65%; } .sheet .w70 { width: 70%; } .sheet .w75 { width: 75%; } .sheet .w80 { width: 80%; } .sheet .w85 { width: 85%; } .sheet .w90 { width: 90%; }
.sheet .miss, .sheet .ok { font-style: normal; margin-top: 4px; font-size: 14px; font-weight: 600; }
.sheet .miss { color: var(--coral); }
.sheet .ok { color: var(--mint-soft); }
.pv-authors__cap { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-size: 15px; color: var(--text-3); }

/* beat 3: one redesign turns a suite red; the first test still waits */
.pv-suite__grid { position: absolute; left: 6%; right: 6%; top: 10%; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 6px; }
.pv-suite__grid i { aspect-ratio: 1; border-radius: 4px; background: rgba(52, 211, 153, .42); --on: clamp(0, calc((var(--lp, 0) * 1.22 - var(--x, 0)) * 16), 1); --fresh: clamp(0, calc(1 - ((var(--lp, 0) * 1.22 - var(--x, 0)) * 6)), 1); background: color-mix(in oklab, rgba(255, 128, 112, .9) calc(var(--on) * 100%), rgba(52, 211, 153, .5)); box-shadow: 0 0 calc(var(--on) * var(--fresh) * 14px) rgba(255, 138, 122, .7); }
.pv-suite__wave { position: absolute; top: 5%; height: 58%; left: calc(6% + min(1, var(--lp, 0) * 1.22) * 88%); width: 2px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--coral) 18%, var(--coral) 82%, transparent); box-shadow: 0 0 22px rgba(255, 138, 122, .9); opacity: clamp(0, calc(var(--lp, 0) * 8), 1); }
.pv-suite__wave em { position: absolute; left: 12px; top: -6px; white-space: nowrap; font-style: normal; font-size: 14px; font-weight: 600; color: var(--coral); --side: clamp(0, calc((var(--lp, 0) - .45) * 100), 1); transform: translateX(calc(var(--side) * (-100% - 24px))); }
.pv-suite__queue { position: absolute; left: 6%; right: 6%; bottom: 8%; }
.pv-suite__queue p { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--text-3); }
.pv-suite__queue p b { color: var(--text); font-weight: 600; }
.pv-suite__bar { display: block; height: 6px; margin: 12px 0 8px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pv-suite__bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--amber), var(--coral)); transform-origin: left; transform: scaleX(calc(.03 + var(--lp, 0) * .2)); }
.pv-suite__eta span { font-size: 14px; }

/* beat 4: three versions of one requirement drift apart */
.pv-drift__links { position: absolute; left: 0; top: 0; width: 100%; height: 72%; }
.pv-drift__links path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; opacity: clamp(0, calc(1 - var(--lp, 0) * 1.6), 1); }
.who { position: absolute; top: 36%; display: grid; gap: 4px; width: 172px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, #131a2b, #0d121f); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .95); transform: translate(-50%, -50%); }
.who i { position: absolute; top: -14px; left: 14px; padding: 2px 9px; border-radius: 999px; background: #1d2540; border: 1px solid var(--hair-2); font: 600 14px var(--font); font-style: normal; color: var(--text-2); }
.who b { margin-top: 6px; font: 600 14px var(--mono); color: var(--text-2); }
.who .v { position: absolute; top: 14px; right: 14px; padding: 1px 8px; border-radius: 7px; font: 700 14px var(--mono); font-style: normal; }
.who > span { font-size: 15px; color: var(--text); }
.who.w1 { left: 18%; transform: translate(calc(-50% - var(--lp, 0) * 18px), calc(-50% - var(--lp, 0) * 84px)) rotate(calc(var(--lp, 0) * -5deg)); }
.who.w2 { left: 50%; transform: translate(-50%, calc(-50% + var(--lp, 0) * 18px)); }
.who.w3 { left: 82%; transform: translate(calc(-50% + var(--lp, 0) * 18px), calc(-50% + var(--lp, 0) * 96px)) rotate(calc(var(--lp, 0) * 6deg)); }
.who.w1 .v { color: #0b1a14; background: var(--mint-soft); }
.who.w2 .v { color: #241a05; background: var(--amber); }
.who.w3 .v { color: #2a0f0b; background: var(--coral); }
.pv-drift__tests { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); display: flex; gap: 10px; }
.pv-drift__tests i { width: 46px; height: 10px; border-radius: 5px; background: var(--green-deep); --on: clamp(0, calc((var(--lp, 0) - var(--t, .5)) * 18), 1); background: color-mix(in oklab, #ff6b6b calc(var(--on) * 100%), #1fb877); box-shadow: 0 0 calc(var(--on) * 12px) rgba(255, 107, 107, .5); }
.pv-drift__tests i:nth-child(1) { --t: .28; } .pv-drift__tests i:nth-child(2) { --t: .4; } .pv-drift__tests i:nth-child(3) { --t: .34; } .pv-drift__tests i:nth-child(4) { --t: .52; } .pv-drift__tests i:nth-child(5) { --t: .46; } .pv-drift__tests i:nth-child(6) { --t: .6; }
.pv-drift__q { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%) scale(calc(.9 + var(--lp, 0) * .1)); font-size: 34px; font-weight: 760; letter-spacing: -.03em; color: var(--amber); white-space: nowrap; opacity: clamp(0, calc((var(--lp, 0) - .3) * 3.4), 1); text-shadow: 0 0 34px rgba(245, 181, 74, .4); }

/* beat 5: the silent line in the logs, the release flag drifting right */
.pv-logs__win { position: absolute; left: 3%; right: 3%; top: 2%; height: 64%; overflow: hidden; border-left: 1px solid var(--hair-2); -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
.pv-logs__stream { padding: 30px 0 0 22px; display: grid; gap: 12px; transform: translateY(calc(var(--lp, 0) * -170px)); }
.pv-logs__stream p { font: 500 14px var(--mono); color: var(--text-3); white-space: nowrap; }
.pv-logs__stream time { color: var(--grey-3); margin-right: 14px; }
.pv-logs__stream .quiet { color: var(--text-2); }
.pv-logs__stream .lost { color: var(--coral); text-shadow: 0 0 18px rgba(255, 138, 122, .5); }
.pv-logs__scan { position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: linear-gradient(90deg, rgba(255, 138, 122, .7), transparent 70%); }
.pv-logs__cal { position: absolute; left: 3%; right: 3%; bottom: 6%; height: 92px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; border-top: 1px solid var(--hair-2); }
.pv-logs__cal .d { text-align: center; font-size: 14px; color: var(--text-3); padding-bottom: 2px; }
.pv-logs__planned { position: absolute; left: calc(100% / 7 * 2.5); top: -1px; height: 58px; border-left: 1.5px dashed rgba(134, 243, 201, .6); padding-left: 8px; font-size: 14px; color: var(--mint-soft); white-space: nowrap; }
.pv-logs__flag { position: absolute; top: 18px; left: calc(100% / 7 * (2.5 + var(--lp, 0) * 3.6)); transform: translateX(-50%); padding: 6px 12px; border-radius: 9px; font-size: 14px; font-weight: 700; color: #08110d; background: #34d399; background: color-mix(in oklab, #ff8a7a calc(var(--lp, 0) * 100%), #34d399); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .9); white-space: nowrap; }

/* ───────── 3. the hours ───────── */
.hours { position: relative; padding: 130px 0 110px; }
.hours__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.hours__big { display: flex; align-items: baseline; gap: 10px; margin-top: 34px; }
.hours__big small { font-size: 54px; font-weight: 700; color: var(--mint-soft); }
.hours__big b { font-size: clamp(86px, 9vw, 136px); line-height: .92; font-weight: 800; letter-spacing: -.055em; background: var(--grad-gain-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.hours__unit { margin-top: 14px; max-width: 24em; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.team { display: grid; gap: 16px; margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--hair); }
.team__row { display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-areas: 'ppl bar' 'ppl lbl'; column-gap: 18px; row-gap: 6px; align-items: center; }
.team__ppl { grid-area: ppl; display: flex; gap: 4px; }
.team__ppl i { width: 22px; height: 26px; background: rgba(152, 162, 182, .42); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Ccircle cx='11' cy='7' r='5.2'/%3E%3Cpath d='M1.5 26c0-6.2 4.3-10.2 9.5-10.2s9.5 4 9.5 10.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Ccircle cx='11' cy='7' r='5.2'/%3E%3Cpath d='M1.5 26c0-6.2 4.3-10.2 9.5-10.2s9.5 4 9.5 10.2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.team__row--now .team__ppl i { background: linear-gradient(180deg, #c8fbe4, #2fcf95); }
.team__bar { grid-area: bar; display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.team__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 5px; background: rgba(152, 162, 182, .55); transform-origin: left; transform: scaleX(0); transition: transform 1.3s var(--ease); }
.team__row--now .team__bar i { background: var(--grad-gain-bar); box-shadow: 0 0 16px rgba(52, 211, 153, .45); transition-delay: .35s; }
.team__lbl { grid-area: lbl; font-size: 15px; color: var(--text-3); }
.team__lbl b { color: var(--text); font-weight: 650; }
.hbars li { display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: 'txt val' 'bar bar'; row-gap: 10px; column-gap: 20px; padding: 14px 0; border-top: 1px solid var(--hair); }
.hbars li:first-child { border-top: 0; padding-top: 0; }
.hbars p { grid-area: txt; }
.hbars p b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.hbars p span { display: block; margin-top: 2px; font-size: 15px; color: var(--text-3); }
.hbars i { grid-area: bar; display: block; height: 12px; width: calc(var(--v) * 100%); min-width: 10px; border-radius: 6px; background: var(--grad-gain-bar); box-shadow: 0 0 18px rgba(52, 211, 153, .32); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.hbars em { grid-area: val; align-self: end; font-style: normal; font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.035em; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.hbars li:nth-child(2) i { transition-delay: .12s; } .hbars li:nth-child(3) i { transition-delay: .24s; } .hbars li:nth-child(4) i { transition-delay: .36s; } .hbars li:nth-child(5) i { transition-delay: .48s; } .hbars li:nth-child(6) i { transition-delay: .6s; }
.is-played .hbars i, .is-played .team__bar i { transform: scaleX(1); }
.hours__note { margin-top: 28px; max-width: 46em; font-size: 15px; line-height: 1.55; color: var(--text-3); }

/* ───────── shared: wraps, section heads, replay ───────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.sec-head { max-width: 860px; }
.sec-lead { margin-top: 22px; max-width: 38em; font-size: 19px; line-height: 1.55; color: var(--text-2); }
.sec-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 64px; align-items: end; }
.sec-head--split .sec-lead { margin-top: 0; padding-bottom: 6px; font-size: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.replay { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair-2); color: var(--text-3); transition: color .2s, border-color .2s; }
.replay:hover { color: var(--text); border-color: var(--hair-3); }
.replay[hidden] { display: none; }
.replay svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── 4. the systems: one task passes through the loop once ───────── */
.systems { position: relative; padding: 150px 0 100px; }
.loop { position: relative; margin-top: 54px; }
.loop__stage { position: relative; width: 100%; aspect-ratio: 1200 / 560; }
.loop__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop__band { opacity: 0; transition: opacity 1.2s var(--ease); }
.loop.is-on .loop__band { opacity: 1; }
.loop__edge { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 1.4; stroke-dasharray: 1.5 7; stroke-linecap: round; opacity: 0; transition: opacity 1s var(--ease) .3s; }
.loop.is-on .loop__edge { opacity: 1; }
.loop__lit { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.loop__lit--glow { stroke-width: 7; }
.loop__packet { fill: #fff; }
.loop__packet.is-bad { fill: #ffd8d0; }
.loop__halo.is-bad { fill: url(#lpPacketBad); }
.loop.is-whole .loop__lit--glow { animation: loopbreath 2.4s var(--ease-io) 1; }
@keyframes loopbreath { 0%, 100% { opacity: .75; } 45% { opacity: 1; stroke-width: 10; } }
.loop__layer { position: absolute; inset: 0; }
.loop__lane { position: absolute; left: 22px; display: grid; gap: 2px; opacity: 0; transition: opacity .9s var(--ease) .2s; }
.loop.is-on .loop__lane { opacity: 1; }
.loop__lane b { font-size: 15px; font-weight: 650; color: var(--c); }
.loop__lane span { font-size: 14px; color: var(--text-3); }
.loop__sys { position: absolute; right: 18px; width: 150px; transform: translateY(-50%); display: grid; gap: 4px; padding-right: 16px; border-right: 1.5px solid rgba(255, 255, 255, .14); opacity: 0; transition: opacity .9s var(--ease) .4s; }
.loop.is-on .loop__sys { opacity: 1; }
.loop__sys b { font-size: 17px; font-weight: 720; letter-spacing: -.015em; background: var(--grad-sys); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loop__sys span { font-size: 14px; line-height: 1.4; color: var(--text-3); }
.loop__node { position: absolute; width: 14.667%; min-width: 150px; display: grid; gap: 3px; padding: 12px 14px 13px; border-radius: 14px; background: linear-gradient(180deg, #131a2b, #0d1220); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .95); opacity: 0; transform: translate(-50%, -50%) translateY(12px); transition: opacity .7s var(--ease), transform .8s var(--ease), border-color .6s, box-shadow .6s; }
.loop.is-on .loop__node { opacity: 1; transform: translate(-50%, -50%); }
.loop__node b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.loop__node b::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); opacity: .45; transition: opacity .4s, box-shadow .4s; }
.loop__node span { font-size: 14px; line-height: 1.35; color: var(--text-3); }
.loop__node.is-lit { border-color: color-mix(in oklab, var(--c) 52%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 16%, transparent), 0 20px 54px -24px color-mix(in oklab, var(--c) 75%, transparent); }
.loop__node.is-lit b::before { opacity: 1; box-shadow: 0 0 10px var(--c); }
.loop__node.is-hit { transform: translate(-50%, -50%) scale(1.045); }
.loop__gate { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; opacity: 0; transition: opacity .7s var(--ease) .6s; }
.loop.is-on .loop__gate { opacity: 1; }
.loop__gate i { display: block; width: 16px; height: 16px; border-radius: 3px; transform: rotate(45deg); border: 1.6px solid rgba(245, 181, 74, .75); background: #0b0f1a; transition: background .4s, border-color .4s, box-shadow .4s; }
.loop__gate span { position: absolute; top: calc(100% + 11px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 600; color: rgba(245, 181, 74, .9); transition: color .4s; }
.loop__gate--side span { top: 50%; left: calc(100% + 12px); transform: translateY(-50%); }
.loop__gate.is-hold i { background: var(--amber); box-shadow: 0 0 0 7px rgba(245, 181, 74, .14), 0 0 26px rgba(245, 181, 74, .85); }
.loop__gate.is-pass i { border-color: var(--mint); background: rgba(52, 211, 153, .22); box-shadow: 0 0 14px rgba(52, 211, 153, .5); }
.loop__gate.is-pass span { color: var(--mint-soft); }
.loop__badge { position: absolute; z-index: 2; padding: 5px 11px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 650; color: #0a0d16; opacity: 0; transform: translate(-50%, calc(-100% - 34px)) scale(.92); transition: opacity .35s var(--ease), transform .5s var(--ease); pointer-events: none; }
.loop__badge.is-gate { transform: translate(-50%, calc(-100% - 16px)) scale(.92); }
.loop__badge.is-in { opacity: 1; transform: translate(-50%, calc(-100% - 40px)); }
.loop__badge.is-gate.is-in { transform: translate(-50%, calc(-100% - 20px)); }
.loop__badge.is-out { opacity: 0; transition-duration: .5s; }
.loop__badge--amber { background: var(--amber); box-shadow: 0 8px 24px -8px rgba(245, 181, 74, .8); }
.loop__badge--mint { background: var(--mint-soft); box-shadow: 0 8px 24px -8px rgba(52, 211, 153, .8); }
.loop__badge--cyan { background: #9ee3fb; box-shadow: 0 8px 24px -8px rgba(76, 198, 245, .8); }
.loop__badge--violet { background: #d3c7ff; box-shadow: 0 8px 24px -8px rgba(161, 132, 255, .8); }
.loop__badge--coral { background: #ffb3a8; box-shadow: 0 8px 24px -8px rgba(255, 138, 122, .8); }
.loop__cap { display: flex; align-items: center; gap: 18px; min-height: 40px; margin-top: 18px; padding-left: 22px; }
.loop__beats { display: flex; gap: 5px; flex: none; }
.loop__beats i { width: 18px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); transition: background .5s; }
.loop__beats i.is-on { background: linear-gradient(90deg, #b9a6ff, #4cc6f5); }
.loop__line { font-size: 18px; font-weight: 550; color: var(--text); transition: opacity .18s; }
.loop__line.is-swap { opacity: 0; }

/* the phone version of the loop: the same pass, read as a list */
.loop--list .loop__stage { aspect-ratio: auto; }
.loop__list { position: relative; display: grid; gap: 10px; padding-left: 30px; }
.loop__list::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #b39bff, #7f9cff 60%, #4cc6f5); opacity: .35; }
.loop__row { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, #131a2b, #0d1220); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .6s, box-shadow .6s; }
.loop__row i { position: absolute; left: -27px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #0b0f1a; border: 2px solid var(--c, var(--amber)); transition: background .4s, box-shadow .4s; }
.loop__row b { font-size: 16px; font-weight: 650; color: var(--text); }
.loop__row span { font-size: 14px; color: var(--text-3); }
.loop__row.is-lit { border-color: color-mix(in oklab, var(--c, #b39bff) 50%, transparent); }
.loop__row.is-lit i { background: var(--c, var(--amber)); box-shadow: 0 0 12px var(--c, var(--amber)); }
.loop__row--gate { padding: 2px 14px; background: none; border: 0; }
.loop__row--gate i { width: 11px; height: 11px; margin-top: -5.5px; border-radius: 2px; transform: rotate(45deg); }
.loop__row--gate span { font-size: 14px; font-weight: 600; color: rgba(245, 181, 74, .9); }
.loop__row--gate.is-pass i { border-color: var(--mint); background: var(--mint); box-shadow: 0 0 10px rgba(52, 211, 153, .7); }
.loop__row--gate.is-pass span { color: var(--mint-soft); }
.loop__say { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.5; color: var(--text-2); }
.loop--list .loop__cap { display: none; }

/* ───────── chapters and scenes: text on the ground, one picture beside it ───────── */
.chapter { position: relative; padding: 150px 0 30px; }
.scene { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: center; padding-top: 150px; }
.scene--opener { padding-top: 0; }
.scene--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.scene--flip > .scene__text { order: 2; }
.scene--wide { grid-template-columns: minmax(0, 1fr); }
.scene--wide > .scene__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: end; margin-bottom: 46px; }
.scene__t { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; font-weight: 750; letter-spacing: -.034em; text-wrap: balance; }
.scene__t .tint { display: block; }
.scene__d { margin-top: 20px; max-width: 32em; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.scene--wide .scene__d { margin-top: 0; }
.scene--opener .scene__d { margin-top: 24px; font-size: 18px; }
.scene__up { display: flex; gap: 12px; align-items: baseline; margin-top: 24px; max-width: 30em; font-size: 18px; line-height: 1.45; font-weight: 650; color: var(--text); }
.scene__up::before { content: ''; flex: none; width: 10px; height: 10px; transform: translateY(-1px) rotate(45deg); border-left: 2px solid var(--mint); border-top: 2px solid var(--mint); }
.metric { display: grid; justify-items: start; gap: 4px; margin-top: 32px; }
.metric__num { display: flex; align-items: baseline; gap: 6px; font-weight: 800; letter-spacing: -.045em; white-space: nowrap; }
.metric__num b { font-size: 48px; line-height: 1; font-weight: 800; background: var(--grad-gain-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.metric__num small { font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: var(--mint-soft); }
.metric__lbl { font-size: 15px; color: var(--text-2); }
.metric .was { font-size: 15px; color: var(--text-3); }
.metric .was s { color: var(--text-2); text-decoration-color: rgba(255, 138, 122, .95); text-decoration-thickness: 1.5px; }

/* the product window: the only kind of box on the page */
.win { position: relative; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #131a2b, #0c111c); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 70px 120px -60px rgba(0, 0, 0, 1), 0 34px 80px -50px rgba(110, 120, 255, .35); }
.win::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); pointer-events: none; }
.win__bar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 14px; color: var(--text-3); }
.win__bar b { font-size: 15px; font-weight: 650; color: var(--text); }
.win__glyph { flex: none; width: 26px; height: 19px; fill: none; stroke: rgba(201, 208, 222, .75); stroke-width: 1.7; }
.win__path::before { content: '/'; margin-right: 10px; color: var(--grey-3); }
.win__status { margin-left: auto; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.win__status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); transition: background .3s, box-shadow .3s; }
.win__timer { min-width: 42px; text-align: right; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 5a. the standard: four messy cases snap into one shape */
.std { position: relative; padding-left: 110px; }
.std__legend { position: absolute; left: 0; top: 0; width: 100px; height: 100%; }
.std__legend span { position: absolute; left: 0; top: calc(var(--y) * 1px); transform: translateY(-50%); font-size: 14px; font-weight: 600; color: var(--mint-soft); opacity: 0; transition: opacity .6s var(--ease); white-space: nowrap; }
.std__legend span:nth-child(1) { --y: 107; } .std__legend span:nth-child(2) { --y: 135; } .std__legend span:nth-child(3) { --y: 163; } .std__legend span:nth-child(4) { --y: 191; } .std__legend span:nth-child(5) { --y: 219; }
.std.is-on .std__legend span { opacity: 1; transition-delay: 1.5s; }
.std__row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.std__row::before { content: ''; position: absolute; left: -12px; right: -6px; top: 106px; height: 114px; background: repeating-linear-gradient(180deg, rgba(134, 243, 201, .26) 0 1px, transparent 1px 28px); opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.std.is-on .std__row::before { opacity: 1; transition-delay: 1.7s; }
.std__sheet { position: relative; display: block; padding: 16px 14px 46px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, #141b2d, #0d1220); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .95); transform: translate(calc(var(--sx) * 1px), calc(var(--sy) * 1px)) rotate(calc(var(--sr) * 1deg)); transition: transform 1.1s var(--ease), border-color .6s; transition-delay: calc(.25s + var(--i) * 90ms); }
.std__sheet:nth-child(1) { --sx: 120; --sy: 26; --sr: -9; z-index: 1; }
.std__sheet:nth-child(2) { --sx: 44; --sy: -14; --sr: -3; z-index: 3; }
.std__sheet:nth-child(3) { --sx: -44; --sy: 18; --sr: 4; z-index: 2; }
.std__sheet:nth-child(4) { --sx: -120; --sy: 38; --sr: 9; z-index: 1; }
.std.is-on .std__sheet { transform: none; border-color: rgba(134, 243, 201, .32); }
.std__sheet em { display: block; height: 20px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--text-3); }
.std__sheet b { display: block; height: 40px; margin: 6px 0 10px; overflow: hidden; font-size: 15px; line-height: 1.3; font-weight: 650; color: var(--text); }
.std__sheet i { display: block; height: 28px; position: relative; }
.std__sheet i::before { content: ''; position: absolute; left: 0; top: 12px; height: 4px; border-radius: 3px; width: calc(var(--w0) * 100%); opacity: var(--o0); background: rgba(255, 255, 255, .16); transition: width .7s var(--ease), opacity .5s, background .6s; transition-delay: calc(.8s + var(--i) * 60ms); }
.std.is-on .std__sheet i::before { opacity: 1; background: rgba(255, 255, 255, .24); }
.std.is-on .std__sheet i:nth-of-type(1)::before { width: 84%; } .std.is-on .std__sheet i:nth-of-type(2)::before { width: 66%; } .std.is-on .std__sheet i:nth-of-type(3)::before { width: 52%; } .std.is-on .std__sheet i:nth-of-type(4)::before { width: 92%; } .std.is-on .std__sheet i:nth-of-type(5)::before { width: 74%; }
.std__sheet u { position: absolute; left: 14px; right: 10px; bottom: 15px; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .5s; }
.std__sheet .miss { color: var(--coral); }
.std__sheet .ok { display: flex; align-items: center; gap: 7px; color: var(--mint-soft); opacity: 0; }
.std__sheet .ok::before { content: ''; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.std.is-on .std__sheet .miss { opacity: 0; transition-delay: 1.2s; }
.std.is-on .std__sheet .ok { opacity: 1; transition-delay: 1.4s; }
.std__cap { position: relative; height: 24px; margin-top: 26px; font-size: 15px; }
.std__cap span { position: absolute; left: 0; top: 0; transition: opacity .6s var(--ease); }
.std__was { color: var(--coral); }
.std__now { color: var(--text-2); opacity: 0; }
.std.is-on .std__was { opacity: 0; transition-delay: 1.3s; }
.std.is-on .std__now { opacity: 1; transition-delay: 1.5s; }

/* 5b. the real recording, in a product window */
.demo__body { position: relative; aspect-ratio: 1320 / 622; background: #0d1013; }
.demo__body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(12, 17, 28, .92)); pointer-events: none; }
.demo__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo__tag { position: absolute; z-index: 1; padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--text); background: rgba(12, 16, 27, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.demo__tag--in { left: 3%; bottom: 9%; border: 1px solid rgba(161, 132, 255, .55); }
.demo__tag--out { right: 3.5%; top: 15.5%; border: 1px solid rgba(52, 211, 153, .6); }
.demo[data-phase="type"] .demo__tag--in, .demo[data-phase="done"] .demo__tag--in, .demo[data-phase="done"] .demo__tag--out { opacity: 1; transform: none; }
.demo[data-phase="write"] .win__status::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.demo[data-phase="done"] .win__status { color: var(--mint-soft); }
.demo[data-phase="done"] .win__status::before { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.demo__cap { display: flex; align-items: center; gap: 14px; min-height: 38px; margin-top: 16px; font-size: 15px; color: var(--text-3); }

/* 5c. a drawn recording of a real shop flow; the AI marks what it recognises and writes each step */
.rec2 { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 64px; align-items: stretch; }
.rec2__player { display: flex; flex-direction: column; }
.rec2__pages { order: 3; margin-top: auto; padding: 12px 18px 16px; border-top: 1px solid rgba(255, 255, 255, .07); }
.rec2__pages p { font-size: 14px; color: var(--text-3); }
.rec2__pages ol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rec2__pages li { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 14px; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--hair-2); transition: color .3s, background .3s, box-shadow .3s; }
.rec2__pages li.is-seen { color: var(--text); background: rgba(123, 104, 255, .14); box-shadow: inset 0 0 0 1px rgba(123, 104, 255, .5); }
.rec2__pages li.is-seen::before { content: ''; width: 8px; height: 4.5px; margin-top: -3px; border-left: 2px solid #b3a4ff; border-bottom: 2px solid #b3a4ff; transform: rotate(-45deg); }
.rec2__sev { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; vertical-align: 2px; font-size: 14px; font-weight: 700; color: #2a0f0b; background: var(--coral); }
.rec2__wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.rw-line { fill: none; stroke: #b3a4ff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .42s var(--ease), opacity .6s .75s; }
.rw-glow { stroke-width: 6; filter: url(#rwBlur); opacity: .6; }
.rw-line.is-drawn { stroke-dashoffset: 0; opacity: 0; }
.rw-end { fill: #b3a4ff; opacity: 0; transition: opacity .2s .3s, r .3s .3s; }
.rw-end.is-drawn { opacity: 0; animation: rwend 1.2s var(--ease) 1; }
@keyframes rwend { 0%, 25% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
.rec2__player, .rec2__case { position: relative; z-index: 1; }
.rec2__player .win__bar { gap: 10px; }
.rec2__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 8px rgba(255, 107, 107, .8); }
.rec2__ai { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #d9d2ff; background: rgba(123, 104, 255, .14); box-shadow: inset 0 0 0 1px rgba(123, 104, 255, .4); white-space: nowrap; transition: color .3s, background .3s, box-shadow .3s; }
.rec2__ai::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a184ff; box-shadow: 0 0 8px #a184ff; }
.rec2[data-state="done"] .rec2__ai { color: var(--mint-soft); background: rgba(52, 211, 153, .12); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .4); }
.rec2[data-state="done"] .rec2__ai::before { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.rec2__screen { position: relative; aspect-ratio: 720 / 450; overflow: hidden; background: #f6f7fb; }
.rec2__stage { position: absolute; left: 0; top: 0; width: 720px; height: 450px; transform-origin: 0 0; transform: scale(var(--k, 1)); }
.rec2__scrub { padding: 14px 18px 14px; border-top: 1px solid rgba(255, 255, 255, .07); }
.rec2__track { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.rec2__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: 3px; background: linear-gradient(90deg, #b9a6ff, #7f9cff, #4cc6f5); }
.rec2__head { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(161, 132, 255, .25), 0 0 14px rgba(161, 132, 255, .8); }
.rec2__pins i { position: absolute; top: -7px; left: calc(var(--t) * 100%); width: 2px; height: 20px; margin-left: -1px; border-radius: 1px; background: rgba(201, 208, 222, .5); animation: rpin .35s var(--ease) 1; }
.rec2__pins i.is-main { top: -10px; width: 10px; height: 10px; margin-left: -5px; border-radius: 2px; transform: rotate(45deg); background: #b3a4ff; box-shadow: 0 0 10px rgba(161, 132, 255, .9); }
@keyframes rpin { from { opacity: 0; } }
.rec2__time { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rec2__case .win__bar > b { flex: none; font-family: var(--mono); font-size: 14px; color: var(--text-2); }
.rec2__case .win__path { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rec2[data-state="watch"] .rec2__case .win__status::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.rec2[data-state="done"] .rec2__case .win__status { color: var(--mint-soft); }
.rec2[data-state="done"] .rec2__case .win__status::before { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.rec2__doc { padding: 16px 18px 4px; }
.rec2__title { font-size: 17px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.rec2__tags { display: flex; gap: 6px; margin-top: 8px; }
.rec2__tags span { padding: 1px 9px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--hair-2); }
.rec2__tags span:first-child { color: #2a0f0b; background: var(--coral); box-shadow: none; }
.rec2__meta { display: grid; gap: 6px; margin-top: 12px; }
.rec2__meta div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.4; }
.rec2__meta dt { font-weight: 650; color: var(--text-2); }
.rec2__meta dd { color: var(--text-3); }
.rec2__h { margin-top: 14px; font-size: 14px; font-weight: 650; color: #b3a4ff; }
.rec2__steps { counter-reset: st; display: grid; gap: 2px; margin-top: 6px; }
.rec2__steps li { counter-increment: st; position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); padding: 4px 6px; margin: 0 -6px; border-radius: 8px; font-size: 14px; line-height: 1.42; color: var(--text); opacity: 0; transform: translateX(-6px); transition: opacity .35s var(--ease), transform .45s var(--ease), background .9s; }
.rec2__steps li::before { content: counter(st); font-weight: 650; color: var(--grey-3); font-variant-numeric: tabular-nums; }
.rec2__steps li em { font-style: normal; color: var(--text-3); }
.rec2__steps li.is-on { opacity: 1; transform: none; }
.rec2__steps li.is-new { background: rgba(161, 132, 255, .14); transition: opacity .35s var(--ease), transform .45s var(--ease), background .2s; }
.rec2__more, .rec2__exp { font-size: 14px; line-height: 1.45; opacity: 0; transition: opacity .5s; }
.rec2__more { margin-top: 4px; padding-left: 22px; color: var(--text-3); }
.rec2__exp { margin-top: 4px; color: var(--text); }
.rec2__more.is-on, .rec2__exp.is-on { opacity: 1; }
.rec2__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 18px 14px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rec2__foot b { color: var(--mint-soft); font-weight: 750; }
.rec2__cap { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 40px; margin-top: 20px; font-size: 15px; color: var(--text-3); }

/* the drawn shop, laid out at 720 x 450 and scaled to the window */
.sh { position: absolute; inset: 0; overflow: hidden; background: #f6f7fb; color: #1d2433; font-family: var(--font); font-size: 15px; line-height: 1.35; -webkit-font-smoothing: antialiased; }
.sh-defs { position: absolute; }
.sh svg { display: block; }
.sh-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 52px; display: flex; align-items: center; gap: 20px; padding: 0 20px; background: #fff; border-bottom: 1px solid #e7e9f0; }
.sh-logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.035em; }
.sh-logo i { width: 18px; height: 18px; border-radius: 4px 50% 4px 50%; background: linear-gradient(135deg, #16b39c, #0b7c6b); }
.sh-nav { display: flex; gap: 16px; font-size: 14px; color: #5a6275; }
.sh-search { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 186px; height: 34px; padding: 0 12px; border-radius: 17px; background: #f1f3f8; font-size: 14px; color: #8a91a3; transition: box-shadow .2s, background .2s; }
.sh-search svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #8a91a3; stroke-width: 2; stroke-linecap: round; }
.sh-search em { font-style: normal; }
.sh-search.has-text em { display: none; }
.sh-search.is-focus { background: #fff; box-shadow: 0 0 0 2px #16b39c; }
.sh-type { color: #1d2433; white-space: pre; }
.sh-type.is-typing::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -3px; background: #1d2433; }
.sh-sign { position: relative; min-width: 72px; font-size: 14px; font-weight: 650; }
.sh-sign span { transition: opacity .25s; }
.sh-sign .b { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; color: #0b7c6b; }
.sh.is-in .sh-sign .a { opacity: 0; }
.sh.is-in .sh-sign .b { opacity: 1; }
.sh-cart { position: relative; width: 26px; height: 26px; }
.sh-cart svg { width: 26px; height: 26px; fill: none; stroke: #1d2433; stroke-width: 1.8; stroke-linejoin: round; }
.sh-cart b { position: absolute; right: -9px; top: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; line-height: 1; font-weight: 750; color: #fff; background: #9aa2b4; transition: background .3s, transform .3s; }
.sh-cart.is-full b { background: #16b39c; }
.sh-cart.is-bump b { transform: scale(1.3); }
.sh-pg { position: absolute; left: 0; right: 0; top: 52px; bottom: 0; opacity: 0; transition: opacity .28s; }
.sh[data-page="home"] .sh-home, .sh[data-page="results"] .sh-results, .sh[data-page="product"] .sh-product, .sh[data-page="checkout"] .sh-checkout, .sh[data-page="done"] .sh-done { opacity: 1; }
.sh h4 { margin: 0; font-size: 27px; line-height: 1.1; font-weight: 800; letter-spacing: -.035em; }
.sh h5 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.sh p { margin: 0; }
.sh-btn { display: inline-grid; place-items: center; height: 40px; padding: 0 20px; border-radius: 20px; font-size: 15px; font-weight: 700; color: #fff; background: #1d2433; transition: transform .15s; }
.sh-btn--wide { display: grid; width: 100%; }
.sh-btn--teal { background: #12a58f; }
.sh-btn--ghost { color: #1d2433; background: none; box-shadow: inset 0 0 0 1.5px #c9cfdb; }
.is-press { transform: scale(.95); }
.sh-hero { position: absolute; left: 20px; right: 20px; top: 18px; height: 204px; border-radius: 18px; overflow: hidden; background: linear-gradient(115deg, #ece9ff 0%, #f3f0ff 40%, #ffeee4 100%); }
.sh-hero__t { position: absolute; left: 34px; top: 42px; }
.sh-hero__t p { margin: 10px 0 20px; font-size: 15px; color: #5a6275; }
.sh-hero__lamp { position: absolute; right: 44px; bottom: -6px; width: 200px; height: 200px; }
.sh-cats { position: absolute; left: 20px; right: 20px; top: 236px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sh-cats div { height: 132px; display: grid; justify-items: center; align-content: center; gap: 8px; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 #e7e9f0, 0 10px 24px -18px rgba(29, 36, 51, .5); }
.sh-cats svg { width: 82px; height: 82px; }
.sh-cats b { font-size: 15px; font-weight: 700; }
.sh-h { position: absolute; left: 20px; top: 16px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.sh-grid { position: absolute; left: 20px; right: 20px; top: 54px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sh-card { height: 160px; padding: 8px 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 #e7e9f0, 0 10px 24px -18px rgba(29, 36, 51, .5); transition: box-shadow .25s, transform .2s; }
.sh-card.is-hover { box-shadow: 0 0 0 2px #16b39c, 0 14px 30px -18px rgba(18, 165, 143, .6); }
.sh-card__img { display: grid; place-items: center; height: 96px; border-radius: 10px; background: var(--t); }
.sh-card__img svg { width: 84px; height: 84px; }
.sh-card b { display: block; margin: 8px 4px 0; font-size: 15px; font-weight: 700; }
.sh-stars { display: block; margin: 2px 4px 0; font-size: 14px; letter-spacing: 1px; color: #f2a93b; }
.sh-pimg { position: absolute; left: 20px; top: 16px; width: 320px; height: 364px; display: grid; place-items: center; border-radius: 18px; background: #e4f5f1; }
.sh-pimg svg { width: 260px; height: 260px; }
.sh-pinfo { position: absolute; left: 366px; top: 22px; right: 24px; }
.sh-rate { display: flex; align-items: center; gap: 8px; margin-top: 10px !important; font-size: 14px; color: #5a6275; }
.sh-rate .sh-stars { display: inline; margin: 0; }
.sh-stock { margin-top: 10px !important; font-size: 14px; font-weight: 700; color: #0b7c6b; }
.sh-lbl { margin-top: 16px !important; font-size: 14px; font-weight: 700; color: #5a6275; }
.sh-lbl i { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 14px; font-weight: 700; color: #0b7c6b; background: #ddf4ef; }
.sh-sw { display: flex; gap: 10px; margin-top: 8px !important; }
.sh-sw i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); }
.sh-sw i.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.sh-qty { display: inline-grid; grid-template-columns: 40px 46px 40px; align-items: center; height: 40px; margin-top: 8px !important; border-radius: 20px; text-align: center; font-size: 18px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1.5px #dfe3ec; }
.sh-qty span { color: #5a6275; transition: transform .15s; }
.sh-qty b { font-size: 16px; }
.sh-pinfo .sh-btn--wide { width: 244px; height: 44px; margin-top: 18px; border-radius: 22px; }
.sh-note { margin-top: 12px !important; font-size: 14px; color: #8a91a3; }
.sh-box { position: absolute; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 #e7e9f0, 0 10px 24px -18px rgba(29, 36, 51, .5); }
.sh-box .sh-lbl { margin-top: 0 !important; }
.sh-addr { left: 20px; top: 54px; width: 402px; height: 124px; transition: box-shadow .25s; }
.sh-txt { margin-top: 8px !important; font-size: 15px; line-height: 1.45; }
.sh-del { left: 20px; top: 190px; width: 402px; height: 112px; }
.sh-radio { display: flex; width: fit-content; align-items: center; gap: 10px; margin-top: 10px !important; padding-right: 6px; font-size: 15px; }
.sh-radio i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px #c9cfdb; transition: box-shadow .2s; }
.sh-radio.is-sel i { box-shadow: inset 0 0 0 2px #12a58f, inset 0 0 0 6px #fff, inset 0 0 0 10px #12a58f; }
.sh-sum { left: 440px; top: 54px; width: 260px; height: 248px; }
.sh-line { display: flex; align-items: center; gap: 12px; margin-top: 12px !important; font-size: 14px; line-height: 1.4; color: #5a6275; }
.sh-line b { font-size: 15px; color: #1d2433; }
.sh-thumb { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 12px; background: #e4f5f1; }
.sh-thumb svg { width: 50px; height: 50px; }
.sh-line2 { display: flex; justify-content: space-between; margin-top: 16px !important; padding-top: 12px; border-top: 1px solid #eef0f5; font-size: 14px; color: #5a6275; }
.sh-line2 b { color: #1d2433; }
.sh-place { position: absolute; left: 440px; top: 316px; width: 260px; height: 46px; border-radius: 23px; }
.sh-done { display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; }
.sh-ok { position: relative; width: 66px; height: 66px; border-radius: 50%; background: #12a58f; box-shadow: 0 14px 30px -12px rgba(18, 165, 143, .7); }
.sh-ok::after { content: ''; position: absolute; left: 22px; top: 17px; width: 14px; height: 26px; border-right: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(40deg); }
.sh-ordno { font-size: 18px; font-weight: 700; }
.sh-mail { font-size: 15px; color: #5a6275; }
.sh-done .sh-btn--ghost { margin-top: 8px; }
.sh-dim { position: absolute; inset: 0; z-index: 3; background: rgba(17, 22, 36, .46); opacity: 0; transition: opacity .25s; }
.sh-modal { position: absolute; z-index: 4; left: 220px; top: 70px; width: 280px; padding: 22px 22px 24px; border-radius: 18px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .25s, transform .3s var(--ease); }
.sh.is-modal .sh-dim { opacity: 1; }
.sh.is-modal .sh-modal { opacity: 1; transform: none; }
.sh-modal .sh-lbl { margin-top: 14px !important; }
.sh-field { display: flex; align-items: center; height: 40px; margin-top: 6px; padding: 0 12px; border-radius: 10px; font-size: 15px; background: #fff; box-shadow: inset 0 0 0 1.5px #dfe3ec; transition: box-shadow .2s; }
.sh-field.is-focus { box-shadow: inset 0 0 0 2px #16b39c; }
.sh-modal .sh-btn { margin-top: 18px; height: 42px; }
.sh-drawer { position: absolute; z-index: 4; top: 52px; right: 0; bottom: 0; width: 290px; padding: 20px; background: #fff; box-shadow: none; transform: translateX(105%); transition: transform .35s var(--ease), box-shadow .35s; }
.sh.is-drawer .sh-drawer { box-shadow: -24px 0 50px -24px rgba(0, 0, 0, .4); }
.sh.is-drawer .sh-drawer { transform: none; }
.sh.is-drawer .sh-dim { opacity: .55; }
.sh-drawer .sh-btn { position: absolute; left: 20px; right: 20px; bottom: 20px; width: auto; height: 44px; }
.sh-toast { position: absolute; z-index: 5; right: 16px; top: 64px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; color: #fff; background: #1d2433; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--ease); }
.sh-toast::before { content: ''; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid #5ee6b0; border-bottom: 2px solid #5ee6b0; transform: rotate(-45deg); }
.sh-toast.is-on { opacity: 1; transform: none; }
.sh-det { position: absolute; z-index: 6; left: 0; top: 0; width: var(--w, 0); height: var(--h, 0); border-radius: 7px; pointer-events: none; opacity: 0; transform: translate(var(--x, 0), var(--y, 0)); --g: #7b68ff;
  background: linear-gradient(var(--g), var(--g)) left top / 12px 2.5px no-repeat, linear-gradient(var(--g), var(--g)) left top / 2.5px 12px no-repeat, linear-gradient(var(--g), var(--g)) right top / 12px 2.5px no-repeat, linear-gradient(var(--g), var(--g)) right top / 2.5px 12px no-repeat, linear-gradient(var(--g), var(--g)) left bottom / 12px 2.5px no-repeat, linear-gradient(var(--g), var(--g)) left bottom / 2.5px 12px no-repeat, linear-gradient(var(--g), var(--g)) right bottom / 12px 2.5px no-repeat, linear-gradient(var(--g), var(--g)) right bottom / 2.5px 12px no-repeat, rgba(123, 104, 255, .08);
  box-shadow: 0 0 0 1px rgba(123, 104, 255, .4); transition: opacity .2s, transform .35s var(--ease), width .35s var(--ease), height .35s var(--ease); }
.sh-det.is-on { opacity: 1; }
.sh-det em { position: absolute; left: -1px; bottom: calc(100% + 6px); padding: 3px 8px; border-radius: 6px; font: 600 14px/1.25 var(--mono); font-style: normal; white-space: nowrap; color: #fff; background: #6c58f0; box-shadow: 0 6px 16px -6px rgba(108, 88, 240, .8); }
.sh-det.is-below em { top: calc(100% + 6px); bottom: auto; }
.sh-det.is-right em { left: auto; right: -1px; }
.sh-ripple { position: absolute; z-index: 6; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2.5px solid rgba(123, 104, 255, .95); opacity: 0; pointer-events: none; transform: translate(var(--rx, 0), var(--ry, 0)) scale(.3); }
.sh-ripple.is-on { animation: shrip .55s var(--ease) 1; }
@keyframes shrip { 0% { opacity: 1; transform: translate(var(--rx, 0), var(--ry, 0)) scale(.3); } 100% { opacity: 0; transform: translate(var(--rx, 0), var(--ry, 0)) scale(1.6); } }
.sh-cursor { position: absolute; z-index: 7; left: 0; top: 0; width: 22px; height: 26px; transform: translate(calc(var(--cx, 360px) - 2px), calc(var(--cy, 330px) - 1.5px)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); pointer-events: none; }
.sh-cursor svg { width: 22px; height: 26px; }
.sh-cursor path { fill: #111827; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }

/* 5d. quality by author: the old spread, then everyone at the standard */
.lvl__t { margin-bottom: 22px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.lvl__rows { position: relative; display: grid; gap: 20px; padding-top: 34px; }
.lvl__rows li:not(.lvl__axis) { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; align-items: center; gap: 16px; }
.lvl__rows span { font-size: 15px; color: var(--text-2); }
.lvl__rows i { position: relative; display: block; height: 22px; }
.lvl__rows i::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .05); }
.lvl__rows s { position: absolute; left: 0; top: 0; height: 6px; width: calc(var(--b) * 100%); border-radius: 3px; background: repeating-linear-gradient(135deg, rgba(255, 138, 122, .6) 0 4px, rgba(255, 138, 122, .2) 4px 8px); }
.lvl__rows b { position: absolute; left: 0; top: 11px; height: 10px; width: 92%; border-radius: 5px; background: var(--grad-gain-bar); box-shadow: 0 0 16px rgba(52, 211, 153, .35); transform-origin: left; transform: scaleX(calc(var(--b) / .92)); opacity: 0; transition: transform 1.1s var(--ease), opacity .4s; transition-delay: calc(.3s + var(--k) * 120ms); }
.lvl.is-on .lvl__rows b { transform: none; opacity: 1; }
.lvl__rows em { justify-self: start; width: 22px; height: 22px; margin-top: 10px; border-radius: 50%; background: rgba(52, 211, 153, .16); box-shadow: inset 0 0 0 1.5px rgba(52, 211, 153, .7); opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s var(--ease); transition-delay: calc(1.1s + var(--k) * 120ms); position: relative; }
.lvl__rows em::after { content: ''; position: absolute; left: 7px; top: 6px; width: 8px; height: 4.5px; border-left: 2px solid var(--mint-soft); border-bottom: 2px solid var(--mint-soft); transform: rotate(-45deg); }
.lvl.is-on .lvl__rows em { transform: none; }
.lvl.is-on .lvl__rows em { opacity: 1; }
.lvl__axis { position: absolute; top: 0; bottom: -10px; left: calc(136px + (100% - 136px - 56px) * .92); width: 0; border-left: 1.5px dashed rgba(134, 243, 201, .7); }
.lvl__lbl { position: absolute; top: 0; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 14px !important; font-weight: 600; color: var(--mint-soft) !important; }
.lvl__key { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 30px; font-size: 14px; color: var(--text-3); }
.lvl__key span { display: flex; align-items: center; gap: 9px; }
.lvl__key span::before { content: ''; width: 22px; height: 8px; border-radius: 4px; }
.k-was::before { background: repeating-linear-gradient(135deg, rgba(255, 138, 122, .6) 0 3px, rgba(255, 138, 122, .18) 3px 6px); }
.k-now::before { background: var(--grad-gain-bar); }

/* ───────── 6. knowledge: the archive becomes a map, the map answers ───────── */
.marker--know { color: #6fd3f7; }
.tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); }
.tally > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 4px 28px 0; border-left: 1px solid var(--hair); }
.tally > div:first-child { padding-left: 0; border-left: 0; }
.tally dd { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.045em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tally dt { font-size: 15px; color: var(--text-3); }
.tally__lead dd { font-size: 52px; background: linear-gradient(180deg, #d4f3ff 0%, #6fd3f7 50%, #3fe0b0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tally__lead dt { color: var(--text-2); }
.cosmos { position: relative; height: 470px; margin-top: 40px; }
.cosmos__cvs { position: absolute; inset: 0; width: 100%; height: 100%; }
.cosmos__labels span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: 14px; font-weight: 650; color: var(--c); text-shadow: 0 2px 14px rgba(7, 9, 15, .95), 0 0 2px rgba(7, 9, 15, .9); opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
.cosmos.is-done .cosmos__labels span { opacity: 1; }
.cosmos__archive { position: absolute; left: 0; top: 0; font-size: 15px; font-weight: 650; color: var(--text-2); }
.cosmos__archive span { display: block; font-size: 14px; font-weight: 500; color: var(--text-3); }
.cosmos__cap { position: absolute; left: 0; bottom: 0; max-width: 34em; font-size: 15px; line-height: 1.5; color: var(--text-3); }
.cosmos__cap b { font-weight: 650; color: var(--text-2); }
.fact { position: absolute; right: 0; bottom: 6px; width: 350px; display: grid; gap: 8px; padding: 18px 20px 17px; border-radius: 16px; background: linear-gradient(180deg, rgba(20, 28, 44, .96), rgba(12, 17, 28, .98)); border: 1px solid rgba(111, 211, 247, .28); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95), 0 0 40px -18px rgba(111, 211, 247, .45); opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.cosmos.is-done .fact { opacity: 1; transform: none; transition-delay: .35s; }
.fact__k { font-size: 14px; font-weight: 650; color: #6fd3f7; }
.fact__t { font-size: 17px; line-height: 1.35; font-weight: 650; color: var(--text); }
.fact__q { font-size: 15px; line-height: 1.45; font-style: italic; color: var(--text-3); }
.fact__s { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 2px; font-size: 14px; color: var(--text-3); }
.fact__s span:first-child { font-family: var(--mono); color: var(--text-2); }
.fact__ok { display: inline-flex; align-items: center; gap: 7px; color: var(--mint-soft); }
.fact__ok::before { content: ''; width: 8px; height: 4.5px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.cosmos__note { margin-top: 28px; max-width: 56em; font-size: 16px; line-height: 1.6; color: var(--text-3); }
.cosmos__note b { font-weight: 650; color: var(--text-2); }
.scene--wide .tally { margin-top: 2px; }

/* the Oracle window */
.oracle .win__bar { min-height: 48px; }
.oracle__ask { display: flex; align-items: center; gap: 12px; margin: 18px 18px 0; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); font-size: 17px; font-weight: 550; color: var(--text); transition: border-color .4s; }
.oracle__ask::before { content: ''; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--grey-2); box-shadow: 5px 5px 0 -3.5px var(--grey-2); }
.oracle.is-typing .oracle__ask { border-color: rgba(111, 211, 247, .55); }
.oracle__q { min-height: 1.4em; }
.oracle.is-typing .oracle__q::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: #6fd3f7; }
.oracle__work { display: flex; align-items: center; gap: 12px; height: 20px; margin: 14px 18px 0; font-size: 14px; color: var(--text-3); opacity: 0; transition: opacity .3s; }
.oracle.is-working .oracle__work, .oracle.is-answered .oracle__work { opacity: 1; }
.oracle__bar { flex: none; width: 120px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.oracle__bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #6fd3f7, #a184ff); transform-origin: left; transform: scaleX(var(--w, 0)); }
.oracle__ans { padding: 16px 18px 4px; }
.oracle__lead { font-size: 16px; color: var(--text-2); opacity: 0; transition: opacity .4s; }
.oracle__list { display: grid; gap: 10px; margin-top: 10px; }
.oracle__list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; color: var(--text-2); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.oracle__list li::before { content: ''; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: #6fd3f7; }
.oracle__list b { font-weight: 650; color: var(--text); }
.cite { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 6px; font: 500 14px/1.6 var(--mono); color: #a9e6fb; background: rgba(76, 198, 245, .12); box-shadow: inset 0 0 0 1px rgba(76, 198, 245, .3); }
.oracle__src { margin-top: 12px; font-size: 14px; color: var(--text-3); opacity: 0; transition: opacity .4s; }
.oracle.is-answered .oracle__lead, .oracle.is-answered .oracle__src { opacity: 1; }
.oracle.is-answered .oracle__list li { opacity: 1; transform: none; }
.oracle.is-answered .oracle__list li:nth-child(2) { transition-delay: .35s; }
.oracle.is-answered .oracle__list li:nth-child(3) { transition-delay: .7s; }
.oracle.is-answered .oracle__src { transition-delay: 1s; }
.oracle__learn { display: flex; align-items: center; gap: 12px; margin: 14px 18px 18px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.45; color: var(--text-3); opacity: 0; transition: opacity .5s; }
.oracle.is-learned .oracle__learn { opacity: 1; }
.oracle__ok { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-weight: 650; color: #08140f; background: var(--mint-soft); box-shadow: 0 8px 22px -8px rgba(52, 211, 153, .8); }
.oracle__ok::before { content: ''; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.oracle[data-state="done"] .win__status { color: var(--mint-soft); }
.oracle[data-state="done"] .win__status::before { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.oracle[data-state="work"] .win__status::before { background: #6fd3f7; box-shadow: 0 0 10px #6fd3f7; }

/* two small scenes side by side, no boxes */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; padding-top: 150px; }
.pair .scene__d { max-width: 31em; }
/* the search: four lanes, one ranked stream, two judges, a scout, a cited answer */
.srch { position: relative; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 300px); align-items: center; }
.srch__q, .srch__a { position: relative; z-index: 1; }
.srch__ask { display: flex; align-items: center; gap: 10px; margin: 16px 16px 0; padding: 12px 14px; min-height: 48px; border-radius: 12px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(111, 211, 247, .45); font-size: 16px; font-weight: 550; color: var(--text); }
.srch__ask svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--grey-2); stroke-width: 2; stroke-linecap: round; }
.srch__qtext.is-typing::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: #6fd3f7; }
.srch__lang { margin: 12px 16px 16px; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.srch__flow { position: relative; height: 440px; }
.srch__cvs { position: absolute; inset: 0; width: 100%; height: 100%; }
.srch__labels span { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text-3); transform: translate(var(--x), var(--y)) translate(-50%, -50%); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.srch__labels span.al { transform: translate(var(--x), var(--y)) translate(0, -50%); }
.srch__labels span.ar { transform: translate(var(--x), var(--y)) translate(-100%, -50%); }
.srch__labels span.is-on { opacity: 1; }
.srch__labels .is-lane { color: var(--c); }
.srch__labels .is-loss { color: var(--coral); }
.srch__labels .is-gain { color: var(--mint-soft); }
.srch__labels .is-gate { color: #f5c76e; }
.srch__body { padding: 16px 18px 18px; }
.srch__ans { min-height: 66px; font-size: 16px; line-height: 1.5; font-weight: 550; color: var(--text); }
.srch__ans .is-typing::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--mint); }
.srch__cites { display: grid; gap: 7px; margin-top: 12px; }
.srch__cites li { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: baseline; gap: 8px; font-size: 14px; opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.srch__cites li.is-on { opacity: 1; transform: none; }
.srch__cites b { justify-self: start; padding: 0 7px; border-radius: 6px; font: 500 14px/1.6 var(--mono); color: #a9e6fb; background: rgba(76, 198, 245, .12); box-shadow: inset 0 0 0 1px rgba(76, 198, 245, .3); }
.srch__cites span { color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.srch__more { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--text-3); opacity: 0; transition: opacity .4s; }
.srch__more.is-on { opacity: 1; }
.srch__more b { color: var(--mint-soft); font-variant-numeric: tabular-nums; }
.srch[data-state="read"] .srch__a .win__status::before { background: #6fd3f7; box-shadow: 0 0 10px #6fd3f7; }
.srch[data-state="done"] .srch__a .win__status { color: var(--mint-soft); }
.srch[data-state="done"] .srch__a .win__status::before { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.srch__cap { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 40px; margin-top: 22px; font-size: 15px; color: var(--text-3); }

/* it learns from us: the life of one fact, fed by four sources, never deleted */
.learn { position: relative; display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); column-gap: 130px; align-items: center; }
.learn [data-s="jira"], .learn [data-c="jira"] { --c: #4cc6f5; } .learn [data-s="spec"], .learn [data-c="spec"] { --c: #a184ff; }
.learn [data-s="test"], .learn [data-c="test"] { --c: #5ee6b0; } .learn [data-s="people"], .learn [data-c="people"] { --c: #f5c76e; }
.learn__wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ln-base { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; }
.ln-lit { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .75s var(--ease-io), opacity .6s; opacity: .85; }
.ln-lit.is-drawn { stroke-dashoffset: 0; }
.ln-lit.is-rest { opacity: .32; }
.ln-glow { stroke-width: 6; filter: url(#lnBlur); opacity: .55; }
.ln-pulse { opacity: 0; }
.learn__src { position: relative; z-index: 1; display: grid; }
.learn__src li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.learn__src li:first-child { border-top: 0; }
.learn.is-on .learn__src li { opacity: 1; transform: none; }
.learn.is-on .learn__src li:nth-child(2) { transition-delay: .08s; } .learn.is-on .learn__src li:nth-child(3) { transition-delay: .16s; } .learn.is-on .learn__src li:nth-child(4) { transition-delay: .24s; }
.learn__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c) 45%, transparent); transition: box-shadow .5s, background .5s; }
.learn__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.learn__src li::after { content: ''; position: absolute; right: -18px; top: 37px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #0b0f1a; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c) 55%, transparent); transition: background .4s, box-shadow .4s; }
.learn__src li.is-fire::after { background: var(--c); box-shadow: 0 0 10px var(--c); }
.learn__src li.is-fire .learn__ic { background: color-mix(in oklab, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--c), 0 0 24px -4px var(--c); }
.learn__src b { display: block; font-size: 16px; font-weight: 650; color: var(--text); }
.learn__src p > span { display: block; margin-top: 2px; font-size: 14px; color: var(--text-3); }
.learn__src em { display: block; max-height: 0; margin-top: 0; overflow: hidden; font-style: normal; font-size: 14px; font-weight: 600; color: var(--c); opacity: 0; transition: max-height .5s var(--ease), margin .5s var(--ease), opacity .4s; }
.learn__src li.is-fire em { max-height: 40px; margin-top: 6px; opacity: 1; }
.learn__col { position: relative; z-index: 1; }
.learn__k { font-size: 15px; font-weight: 600; color: var(--text-2); }
.learn__tl { position: relative; display: grid; gap: 18px; margin-top: 16px; padding-left: 92px; }
.learn__tl::before { content: ''; position: absolute; left: 70px; top: 14px; bottom: 30px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(94, 230, 176, .5)); }
.fv { position: relative; }
.fv::before { content: ''; position: absolute; left: -29px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #0b0f1a; box-shadow: inset 0 0 0 2px #b3a4ff, 0 0 12px rgba(179, 164, 255, .6); transition: box-shadow .5s; }
.fv__when { position: absolute; left: -92px; top: 15px; width: 52px; text-align: right; font-size: 14px; font-weight: 650; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fv__card { padding: 15px 18px 16px; border-radius: 16px; background: linear-gradient(180deg, #141b2d, #0c111c); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95); transition: opacity .6s var(--ease), border-color .6s, box-shadow .6s, transform .6s var(--ease); }
.fv__t { font-size: 17px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.fv__t { text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 1.5px; transition: text-decoration-color .5s, color .5s; }
.fv__src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; font-size: 14px; color: var(--text-3); }
.fv__src b { font: 500 14px var(--mono); color: var(--text-2); }
.fv__who { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 3px; border-radius: 999px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--hair-2); transition: opacity .6s, box-shadow .6s; }
.fv__who i { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(180deg, #c9d0de, #6f7a92); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11'/%3E%3C/svg%3E") center / contain no-repeat; transition: opacity .6s, filter .6s; }
.fv__left { max-width: 0; overflow: hidden; white-space: nowrap; color: var(--coral); opacity: 0; transition: max-width .8s var(--ease), opacity .5s; }
.fv__stay, .fv__tag { max-height: 0; overflow: hidden; font-size: 14px; font-weight: 600; opacity: 0; transition: max-height .6s var(--ease), margin .6s var(--ease), opacity .5s; }
.fv__stay { color: var(--mint-soft); }
.fv__tag { color: #f5c76e; }
.fv--old.is-left .fv__who { box-shadow: inset 0 0 0 1px rgba(255, 138, 122, .45); }
.fv--old.is-left .fv__who i { opacity: .35; filter: grayscale(1); }
.fv--old.is-left .fv__left { max-width: 260px; opacity: 1; }
.fv--old.is-left .fv__stay { max-height: 30px; margin-top: 8px; opacity: 1; }
.fv--old.is-left .fv__card { border-color: rgba(94, 230, 176, .4); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95), 0 0 30px -14px rgba(94, 230, 176, .7); }
.fv--old.is-old .fv__card { opacity: .62; border-color: rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95); }
.fv--old.is-old .fv__t { color: var(--text-2); text-decoration-color: rgba(255, 138, 122, .9); }
.fv--old.is-old .fv__stay { max-height: 0; margin-top: 0; opacity: 0; }
.fv--old.is-old .fv__tag { max-height: 30px; margin-top: 8px; opacity: 1; }
.fv--old.is-old::before { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
.fv--now .fv__card { opacity: 0; transform: translateY(10px) scale(.98); }
.fv--now::before { opacity: 0; transition: opacity .4s; }
.fv--now .fv__when { opacity: 0; transition: opacity .4s; }
.fv--now.is-in .fv__card { opacity: 1; transform: none; border-color: rgba(94, 230, 176, .45); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95), 0 0 36px -14px rgba(94, 230, 176, .75); }
.fv--now.is-in::before { opacity: 1; box-shadow: inset 0 0 0 2px var(--mint), 0 0 14px rgba(94, 230, 176, .8); background: rgba(94, 230, 176, .25); }
.fv--now.is-in .fv__when { opacity: 1; color: var(--mint-soft); }
.fv__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 62px; align-content: flex-start; }
.fv__chips li { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text); background: color-mix(in oklab, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 50%, transparent); opacity: 0; transform: scale(.85); transition: opacity .35s, transform .45s var(--ease); }
.fv__chips li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.fv__chips li.is-on { opacity: 1; transform: none; }
.learn__base { margin-top: 18px; padding-left: 92px; font-size: 14px; color: var(--text-3); transition: color .6s; }
.learn__base b { color: var(--text-2); }
.learn.is-done .learn__base { color: var(--text-2); }
.learn.is-done .learn__base b { color: var(--mint-soft); }
.learn__cap { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 40px; margin-top: 26px; font-size: 15px; color: var(--text-3); }


/* ───────── 7. requirements: born finished, stopped before a guess ───────── */
.marker--req { color: #f5c76e; }
/* 7a. a requirement, born finished: the PO's own words and the whole history fly into the sections of the standard */
.born { position: relative; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 480px); column-gap: 44px; align-items: center; }
.born__draft, .born__spec, .born__mid { position: relative; z-index: 1; }
.born__draft .win__bar > b, .born__spec .win__bar > b { flex: none; white-space: nowrap; }
.born__spec .win__bar > b { font-family: var(--mono); font-size: 14px; color: var(--text-2); }
.born__spec .win__path { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); font-weight: 600; }
.born__spec .win__status, .born__draft .win__status { flex: none; }
.born[data-state="read"] .born__spec .win__status::before { background: #6fd3f7; box-shadow: 0 0 10px #6fd3f7; }
.born[data-state="done"] .born__spec .win__status { color: var(--mint-soft); }
.born[data-state="done"] .born__spec .win__status::before { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.born.is-sent .born__draft .win__status::before { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.born__text { min-height: 150px; padding: 16px 18px 4px; font-size: 17px; line-height: 1.65; color: var(--text); }
.born__text.is-typing::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: #f5c76e; }
.ph { margin: 0 -2px; padding: 1px 2px; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background .45s, box-shadow .45s; }
.ph.is-lit { background: color-mix(in oklab, var(--c) 12%, transparent); box-shadow: inset 0 -2px 0 var(--c); }
.born__lang { padding: 8px 18px 16px; font-size: 14px; color: var(--text-3); }
.born__k { font-size: 14px; font-weight: 600; color: var(--text-3); }
.born__hist { margin-top: 8px; }
.born__hist li { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); opacity: .45; transition: opacity .5s var(--ease); }
.born__hist li:first-child { border-top: 0; }
.born__hist li.is-fire { opacity: 1; }
.born__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c) 45%, transparent); transition: box-shadow .5s, background .5s; }
.born__ic svg { width: 21px; height: 21px; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.born__hist li.is-fire .born__ic { background: color-mix(in oklab, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--c), 0 0 22px -4px var(--c); }
.born__hist b { display: block; font-size: 15px; font-weight: 650; color: var(--text); }
.born__hist p > span { display: block; margin-top: 1px; font-size: 14px; color: var(--text-3); }
.born__hist em { display: block; max-height: 0; overflow: hidden; font-style: normal; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--c); opacity: 0; transition: max-height .5s var(--ease), margin .5s var(--ease), opacity .4s; }
.born__hist li.is-fire em { max-height: 44px; margin-top: 5px; opacity: 1; }
.born__secs { padding: 4px 8px 2px; }
.born__secs > li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; padding: 10px 10px 11px; border-radius: 10px; }
.born__secs > li + li { box-shadow: 0 -1px 0 var(--hair); }
.born__secs > li::before { content: ''; grid-row: 1; width: 8px; height: 4.5px; margin-top: 6px; border-left: 2px solid var(--grey-3); border-bottom: 2px solid var(--grey-3); transform: rotate(-45deg); opacity: .5; transition: border-color .4s, opacity .4s; }
.born__secs > li.is-gate::before { width: 8px; height: 8px; margin-top: 5px; border: 1.6px solid var(--grey-3); border-radius: 2px; transform: rotate(45deg); }
.born__secs > li > b { font-size: 15px; font-weight: 650; color: var(--text-3); transition: color .4s; }
.born__secs > li > p { grid-column: 2; margin-top: 4px; font-size: 14px; line-height: 1.45; color: transparent; background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)) 0 .55em / 82% 6px no-repeat, linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)) 0 2em / 56% 6px no-repeat; transition: color .5s .1s, background-size .4s; }
.born__secs > li.is-in::before { border-color: var(--mint); opacity: 1; }
.born__secs > li.is-gate.is-in::before { border-color: var(--amber); background: rgba(245, 181, 74, .25); box-shadow: 0 0 10px rgba(245, 181, 74, .7); }
.born__secs > li.is-in > b { color: var(--text); }
.born__secs > li.is-in > p { color: var(--text-2); background-size: 0 6px, 0 6px; }
.born__secs > li.is-gate.is-in > p { color: #f5c76e; }
.born__secs > li.is-flash { animation: bornflash 1s var(--ease) 1; }
@keyframes bornflash { 0% { background: color-mix(in oklab, var(--c) 24%, transparent); } 100% { background: transparent; } }
.born__finds { grid-column: 2; display: grid; gap: 5px; margin-top: 6px; }
.born__finds li { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.4; opacity: .22; transition: opacity .4s; }
.born__finds li b { justify-self: start; padding: 0 7px; border-radius: 6px; font: 500 14px/1.6 var(--mono); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--hair-2); transition: color .4s, background .4s, box-shadow .4s; }
.born__finds li span { color: var(--text-2); }
.born__finds li.is-in { opacity: 1; }
.born__finds li.is-in b { color: var(--text); background: color-mix(in oklab, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent); }
.born__finds li.is-flash { animation: bornflash 1s var(--ease) 1; border-radius: 6px; }
.born__foot { margin-top: 6px; padding: 12px 18px 15px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.45; color: var(--text-3); opacity: 0; transition: opacity .5s, color .5s; }
.born__foot.is-on { opacity: 1; color: var(--mint-soft); }
.born__chip { position: absolute; left: 0; top: 0; z-index: 5; padding: 5px 12px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 650; color: var(--text); background: color-mix(in oklab, var(--c) 26%, #0b0f1a); box-shadow: inset 0 0 0 1px var(--c), 0 0 24px -4px var(--c); pointer-events: none; will-change: transform, opacity; }
.born__cap { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 40px; margin-top: 24px; font-size: 15px; color: var(--text-3); }

.flag .win__bar > b { flex: none; white-space: nowrap; font-family: var(--mono); font-size: 14px; color: var(--text-2); }

.sweep { position: relative; aspect-ratio: 640 / 460; }
.sweep__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sweep__ray { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1.2; stroke-dasharray: 2 6; }
.sweep__lit { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.sweep__pulse { fill: #fff; }
.sweep__labels span { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text-3); transition: color .4s; }
.sweep__labels span.is-hit { color: var(--text); }
.sweep__end { fill: #0b0f1a; stroke: rgba(245, 199, 110, .7); stroke-width: 1.5; transition: fill .4s; }
.sweep__end.is-hit { fill: var(--amber); }
.sweep__core { position: absolute; left: 40.6%; top: 50%; width: 124px; height: 124px; transform: translate(-50%, -50%); display: grid; place-content: center; gap: 2px; text-align: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(245, 199, 110, .2), rgba(161, 132, 255, .08) 60%, rgba(161, 132, 255, 0) 72%); box-shadow: inset 0 0 0 1px rgba(245, 199, 110, .4), 0 0 50px -10px rgba(245, 181, 74, .45); }
.sweep__core b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.sweep__core span { font-size: 14px; color: var(--text-3); }
.sweep__finds { position: absolute; right: 0; bottom: 0; width: min(290px, 46%); display: grid; gap: 10px; }
.sweep__finds li { position: relative; padding: 10px 14px 11px 34px; border-radius: 12px; font-size: 14px; line-height: 1.4; color: var(--text-2); background: rgba(12, 16, 27, .9); border: 1px solid rgba(245, 199, 110, .35); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .9); opacity: 0; transform: translateX(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.sweep__finds li::before { content: ''; position: absolute; left: 14px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.sweep__finds li b { font-weight: 650; color: var(--text); }
.sweep__finds li.is-on { opacity: 1; transform: none; }

.boehm__t { font-size: 15px; font-weight: 600; color: var(--text-2); }
.boehm__bars { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; height: 300px; margin: 34px 0 96px; border-bottom: 1px solid var(--hair-2); }
.boehm__col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.boehm__col > i { display: block; width: 62%; height: calc(var(--h) * 84%); min-height: 5px; border-radius: 9px 9px 2px 2px; background: linear-gradient(180deg, #f8cf7a, #d9962c); box-shadow: 0 0 30px -8px rgba(245, 181, 74, .6); transform-origin: bottom; transform: scaleY(0); transition: transform 1.1s var(--ease); }
.boehm__col.is-now > i { background: linear-gradient(180deg, #9cf7d0, #26c48a); box-shadow: 0 0 24px rgba(52, 211, 153, .7); }
.boehm__col.is-bad > i { background: linear-gradient(180deg, #ffb3a8, #f2614f); box-shadow: 0 0 40px -8px rgba(255, 107, 107, .6); }
.boehm.is-on .boehm__col > i { transform: none; }
.boehm.is-on .boehm__col:nth-child(2) > i { transition-delay: .25s; }
.boehm.is-on .boehm__col:nth-child(3) > i { transition-delay: .5s; }
.boehm__col em { margin-bottom: 10px; font-style: normal; font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--text); opacity: 0; transition: opacity .5s; }
.boehm.is-on .boehm__col em { opacity: 1; transition-delay: 1s; }
.boehm__col.is-now em { color: var(--mint-soft); }
.boehm__col.is-bad em { color: var(--coral); }
.boehm__col > b, .boehm__col > span { position: absolute; left: 0; right: 0; text-align: center; }
.boehm__col > b { top: calc(100% + 14px); font-size: 15px; font-weight: 650; color: var(--text); }
.boehm__col > span { top: calc(100% + 38px); font-size: 14px; line-height: 1.4; color: var(--text-3); }
.boehm__col.is-now > span { color: var(--mint-soft); }
.boehm__col > .boehm__gate, .boehm__col.is-now > .boehm__gate { position: static; display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: #f5c76e; opacity: 0; transition: opacity .6s var(--ease) 1.4s; }
.boehm__gate i { width: 12px; height: 12px; border-radius: 2px; transform: rotate(45deg); background: var(--amber); box-shadow: 0 0 14px rgba(245, 181, 74, .9); }
.boehm.is-on .boehm__gate { opacity: 1; }
.boehm__src { font-size: 14px; color: var(--text-3); }

.twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #131a2b, #0c111c); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 1); }
.twin__col { padding: 18px 20px 22px; }
.twin__col--alt { border-left: 1px solid var(--hair); background: rgba(245, 199, 110, .035); }
.twin__col em { display: block; font-style: normal; font-size: 14px; font-weight: 650; color: var(--text-3); }
.twin__col--alt em { color: #f5c76e; }
.twin__col p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--text); transition: opacity .3s var(--ease); }
.twin__col .is-swap { opacity: 0; }
.twin__col em span { transition: opacity .3s var(--ease); }

.fit ul { display: grid; gap: 16px; margin-top: 34px; }
.fit li { display: flex; align-items: center; gap: 16px; }
.fit__ring { position: relative; flex: none; width: 56px; height: 56px; }
.fit__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fit__ring circle { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 4; }
.fit__ring circle.v { stroke: var(--mint); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease); transition-delay: calc(.2s + var(--k) * 200ms); }
.fit.is-on .fit__ring circle.v { stroke-dashoffset: calc(1 - var(--f)); }
.fit li:nth-child(2) circle.v { stroke: #6fd3f7; }
.fit li.is-busy circle.v { stroke: var(--amber); }
.fit__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.fit li p b { display: block; font-size: 15px; font-weight: 650; color: var(--text); }
.fit li p span { font-size: 14px; color: var(--text-3); }
.fit li.is-busy p span { color: #f5c76e; }
.fit__foot { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--text-3); }

/* who takes the ticket: six cards, a beam, a podium */
.match__stage { position: relative; height: 470px; }
.match__ticket { position: absolute; left: 50%; top: 0; transform: translate(-50%, -8px); display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 14px; white-space: nowrap; background: linear-gradient(180deg, #161d31, #0e1322); border: 1px solid rgba(245, 199, 110, .4); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .9), 0 0 30px -12px rgba(245, 181, 74, .5); opacity: 0; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.match.is-on .match__ticket { opacity: 1; transform: translate(-50%, 0); }
.match__ticket b { font: 600 14px var(--mono); color: #f5c76e; }
.match__ticket span { font-size: 15px; font-weight: 650; color: var(--text); }
.match__ticket em { font-style: normal; font-size: 14px; color: var(--text-3); }
.match__ticket::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 30px; background: linear-gradient(180deg, rgba(245, 199, 110, .7), transparent); }
.match__beam { position: absolute; top: 84px; bottom: 0; left: 0; width: 2px; margin-left: -1px; border-radius: 2px; transform: translateX(var(--b, 0)); background: linear-gradient(180deg, transparent, #f5c76e 12%, #a184ff 88%, transparent); box-shadow: 0 0 24px rgba(245, 181, 74, .9), 0 0 60px rgba(161, 132, 255, .5); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 3; }
.dev { position: absolute; left: 0; top: 0; width: var(--w, 200px); height: var(--h, 166px); display: grid; align-content: start; gap: 10px; padding: 14px 14px 13px; border-radius: 16px; background: linear-gradient(180deg, #141b2d, #0d1220); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95); transform: translate(var(--x, 0), calc(var(--y, 0) + 14px)) scale(var(--s, 1)); transform-origin: 50% 0; opacity: 0; transition: transform .9s var(--ease), width .9s var(--ease), opacity .5s var(--ease), border-color .6s, box-shadow .6s, filter .6s; }
.dev.is-in { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)); }
.dev.is-out { opacity: 0; transform: translate(var(--x, 0), calc(var(--y, 0) + 34px)) scale(.94); filter: blur(3px); pointer-events: none; }
.dev.is-top { border-color: color-mix(in oklab, var(--hue) 45%, transparent); box-shadow: 0 30px 70px -30px color-mix(in oklab, var(--hue) 55%, transparent), 0 0 0 1px color-mix(in oklab, var(--hue) 18%, transparent); }
.dev--first.is-top { z-index: 2; }
.dev__head { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; }
.dev__av { position: relative; width: 46px; height: 46px; }
.dev__av svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dev__av .t { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 2.5; }
.dev__av .v { fill: none; stroke: var(--hue); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) .2s; }
.dev.is-top .dev__av .v { stroke-dashoffset: calc(1 - var(--fit)); }
.dev__av i { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in oklab, var(--hue) 55%, #0b0f1a), #0b0f1a 75%); transition: opacity .4s; }
.dev.is-scan .dev__av i { opacity: .22; }
.dev__av i::after { content: ''; position: absolute; inset: 5px 6px 0; background: color-mix(in oklab, var(--hue) 70%, #ffffff); opacity: .85; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Ccircle cx='11' cy='7' r='5.2'/%3E%3Cpath d='M1.5 26c0-6.2 4.3-10.2 9.5-10.2s9.5 4 9.5 10.2z'/%3E%3C/svg%3E") center bottom / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Ccircle cx='11' cy='7' r='5.2'/%3E%3Cpath d='M1.5 26c0-6.2 4.3-10.2 9.5-10.2s9.5 4 9.5 10.2z'/%3E%3C/svg%3E") center bottom / contain no-repeat; }
.dev__head p { min-width: 0; }
.dev__head b { display: block; font-size: 15px; line-height: 1.25; font-weight: 650; color: var(--text); }
.dev__head p span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--text-3); }
.dev__fit { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--text-2); opacity: 0; transition: opacity .4s, color .5s; font-variant-numeric: tabular-nums; }
.dev.is-scan .dev__fit { opacity: 1; }
.dev.is-top .dev__fit { color: var(--text); }
.dev--first.is-top .dev__fit { color: var(--mint-soft); }
.dev--busy.is-top .dev__fit { color: #f5c76e; }
.dev__m span { display: block; font-size: 14px; line-height: 1.2; color: var(--text-3); }
.dev__m i { position: relative; display: block; height: 6px; margin-top: 5px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.dev__m b { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: 3px; background: var(--grad-gain-bar); transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease); }
.dev__m--load b { background: linear-gradient(90deg, #f5c76e, #f2614f); }
.dev.is-scan .dev__m b { transform: none; }
.dev.is-scan .dev__m--load b { transition-delay: .12s; }
.dev__tag { position: absolute; left: 50%; top: calc(100% + 12px); padding: 5px 12px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 650; color: #241a05; background: var(--amber); box-shadow: 0 10px 24px -10px rgba(245, 181, 74, .8); opacity: 0; transform: translate(-50%, 6px); transition: opacity .4s, transform .5s var(--ease); }
.match.is-ranked .dev--busy .dev__tag { opacity: 1; transform: translate(-50%, 0); transition-delay: .9s; }
.dev__go { position: absolute; left: 50%; top: calc(100% + 12px); width: 164px; height: 32px; border-radius: 999px; overflow: hidden; opacity: 0; transform: translate(-50%, 6px); transition: opacity .4s, transform .5s var(--ease); }
.dev__go i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 700; transition: opacity .35s, transform .45s var(--ease); }
.dev__go i:first-child { color: #0b0d16; background: linear-gradient(100deg, #cfc3ff 0%, #9bb6ff 52%, #7fdcf8 100%); }
.dev__go i:last-child { color: #08140f; background: var(--mint-soft); opacity: 0; transform: translateY(100%); }
.match.is-ranked .dev--first .dev__go { opacity: 1; transform: translate(-50%, 0); transition-delay: 1.1s; }
.dev.is-assigned .dev__go i:first-child { opacity: 0; transform: translateY(-100%); }
.dev.is-assigned .dev__go i:last-child { opacity: 1; transform: none; }
.dev__rank { position: absolute; right: 12px; top: -12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; font-weight: 750; color: #0b0d16; background: var(--hue); box-shadow: 0 6px 16px -6px var(--hue); opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s var(--ease); }
.dev.is-top .dev__rank { opacity: 1; transform: none; transition-delay: .6s; }
.match__jira { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text-2); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.match__jira i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(52, 211, 153, .18); box-shadow: inset 0 0 0 1.5px var(--mint); position: relative; }
.match__jira i::after { content: ''; position: absolute; left: 7px; top: 6px; width: 8px; height: 4.5px; border-left: 2px solid var(--mint-soft); border-bottom: 2px solid var(--mint-soft); transform: rotate(-45deg); }
.match__jira b { white-space: nowrap; font: 600 14px var(--mono); color: #f5c76e; }
.match.is-done .match__jira { opacity: 1; transform: none; }
.match__cap { display: flex; align-items: center; gap: 14px; min-height: 40px; margin-top: 30px; font-size: 15px; color: var(--text-2); }
.match__cap span { transition: opacity .2s; }
.match__cap span.is-swap { opacity: 0; }

.flag { position: relative; }
.flag__v { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; }
.flag__v s { color: var(--text-2); text-decoration-color: transparent; transition: text-decoration-color .4s, color .4s; }
.flag__v b { padding: 1px 8px; border-radius: 7px; color: #241a05; background: var(--amber); opacity: 0; transform: scale(.8); transition: opacity .35s, transform .45s var(--ease); }
.flag.is-moved .flag__v s { color: var(--text-3); text-decoration-color: rgba(255, 138, 122, .9); }
.flag.is-moved .flag__v b { opacity: 1; transform: none; }
.flag__diff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 18px 6px; font-size: 16px; }
.flag__diff s { color: var(--text-2); text-decoration-color: transparent; text-decoration-thickness: 1.5px; transition: text-decoration-color .4s, color .4s; }
.flag__diff b { font-weight: 650; color: var(--mint-soft); opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .5s var(--ease); }
.flag.is-moved .flag__diff s { color: var(--text-3); text-decoration-color: rgba(255, 138, 122, .9); }
.flag.is-moved .flag__diff b { opacity: 1; transform: none; transition-delay: .15s; }
.flag__sub { padding: 14px 18px 4px; font-size: 14px; font-weight: 600; color: var(--text-3); }
.flag__cases { padding: 0 18px 12px; }
.flag__cases li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 118px; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); }
.flag__cases li b { font: 600 14px var(--mono); color: var(--text-2); }
.flag__cases li span { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flag__cases em { position: relative; height: 26px; font-style: normal; }
.flag__cases em i { position: absolute; right: 0; top: 0; padding: 3px 10px; border-radius: 999px; font-style: normal; font-size: 14px; font-weight: 650; white-space: nowrap; transition: opacity .3s, transform .4s var(--ease); }
.flag__cases .a { color: var(--mint-soft); background: rgba(52, 211, 153, .1); }
.flag__cases .b { color: #241a05; background: var(--amber); opacity: 0; transform: scale(.85); }
.flag__cases .c { color: #08140f; background: var(--mint-soft); opacity: 0; transform: scale(.85); }
.flag__cases li.is-flag .a { opacity: 0; }
.flag__cases li.is-flag .b { opacity: 1; transform: none; }
.flag__cases li.is-ok .b { opacity: 0; }
.flag__cases li.is-ok .c { opacity: 1; transform: none; }
.flag__q { margin-top: 22px; font-size: 22px; font-weight: 740; letter-spacing: -.02em; color: var(--amber); opacity: 0; transition: opacity .5s, color .6s; }
.flag__q span { text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 2px; transition: text-decoration-color .5s; }
.flag.is-moved .flag__q { opacity: 1; }
.flag.is-calm .flag__q { color: var(--text-3); }
.flag.is-calm .flag__q span { text-decoration-color: rgba(52, 211, 153, .9); }

/* ───────── 8. Affinity Zero: weeks instead of months, bugs that arrive explained ───────── */
.marker--zero { color: var(--mint-soft); }
.race { display: grid; gap: 30px; }
.race__t { margin-bottom: 12px; font-size: 16px; font-weight: 650; color: var(--text); }
.race__bar { display: flex; align-items: center; gap: 14px; height: 26px; }
.race__bar i { flex: none; display: block; height: 12px; min-width: 8px; border-radius: 6px; transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease); }
.race__bar--was i { width: calc(var(--b) * 70%); background: repeating-linear-gradient(135deg, rgba(255, 138, 122, .7) 0 4px, rgba(255, 138, 122, .25) 4px 8px); }
.race__bar--now i { width: calc(var(--n) * 70%); background: var(--grad-gain-bar); box-shadow: 0 0 16px rgba(52, 211, 153, .5); transition-delay: .7s; }
.race__bar em { font-style: normal; font-size: 14px; white-space: nowrap; opacity: 0; transition: opacity .5s; }
.race__bar--was em { color: var(--text-3); transition-delay: .6s; }
.race__bar--now em { font-weight: 650; color: var(--mint-soft); transition-delay: 1.3s; }
.race.is-on .race__bar i { transform: none; }
.race.is-on .race__bar em, .race.is-on .race__ppl em { opacity: 1; }
.race__ppl { display: flex; align-items: center; gap: 5px; height: 32px; }
.pp { flex: none; width: 20px; height: 24px; background: rgba(152, 162, 182, .4); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Ccircle cx='11' cy='7' r='5.2'/%3E%3Cpath d='M1.5 26c0-6.2 4.3-10.2 9.5-10.2s9.5 4 9.5 10.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Ccircle cx='11' cy='7' r='5.2'/%3E%3Cpath d='M1.5 26c0-6.2 4.3-10.2 9.5-10.2s9.5 4 9.5 10.2z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.race__ppl--was .pp { background: rgba(255, 138, 122, .55); }
.race__ppl--now .pp { background: linear-gradient(180deg, #c8fbe4, #2fcf95); }
.race__ppl--now .pp--part { background: linear-gradient(0deg, #2fcf95 0 22%, rgba(152, 162, 182, .3) 22%); }
.race.is-on .pp { opacity: 1; transform: none; }
.race.is-on .race__ppl--was .pp:nth-child(2) { transition-delay: .08s; } .race.is-on .race__ppl--was .pp:nth-child(3) { transition-delay: .16s; } .race.is-on .race__ppl--was .pp:nth-child(4) { transition-delay: .24s; }
.race.is-on .race__ppl--now .pp { transition-delay: .8s; } .race.is-on .race__ppl--now .pp:nth-child(2) { transition-delay: .9s; }
.race__ppl em { margin-left: 10px; font-style: normal; font-size: 14px; color: var(--text-3); opacity: 0; transition: opacity .5s .6s; }
.race__ppl--now em { font-weight: 650; color: var(--mint-soft); transition-delay: 1.2s; }
.race__ppl--now { margin-top: 6px; }
.race__key { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; color: var(--text-3); }
.race__key span { display: flex; align-items: center; gap: 9px; }
.race__key span::before { content: ''; width: 22px; height: 8px; border-radius: 4px; }

.heal { position: relative; overflow-x: clip; overflow-y: visible; }
.heal__grid { position: relative; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 5px; }
.heal__grid i { display: block; aspect-ratio: 1; border-radius: 5px; --on1: clamp(0, calc((var(--lp, 0) * 2.4 - var(--x, 0)) * 14), 1); --on2: clamp(0, calc(((var(--lp, 0) - .5) * 2.4 - var(--x, 0)) * 14), 1); background: color-mix(in oklab, #f5b54a calc(var(--on1) * (1 - var(--on2)) * 100%), rgba(52, 211, 153, .4)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 calc(var(--on1) * (1 - var(--on2)) * 12px) rgba(245, 181, 74, .55); }
.heal__wave { position: absolute; top: -12px; height: calc(100% - 92px); width: 2px; border-radius: 2px; pointer-events: none; }
.heal__wave--bad { left: calc(min(1, var(--lp, 0) * 2.4) * 100%); background: linear-gradient(180deg, transparent, var(--amber) 15%, var(--amber) 85%, transparent); box-shadow: 0 0 20px rgba(245, 181, 74, .9); opacity: clamp(0, calc(min(var(--lp, 0) * 20, (1 - var(--lp, 0) * 2.4) * 20)), 1); }
.heal__wave--bad em { position: absolute; top: -26px; left: 10px; white-space: nowrap; font-style: normal; font-size: 14px; font-weight: 650; color: #f5c76e; --side: clamp(0, calc((var(--lp, 0) * 2.4 - .5) * 100), 1); transform: translateX(calc(var(--side) * (-100% - 20px))); }
.heal__wave--good { left: calc(clamp(0, (var(--lp, 0) - .5) * 2.4, 1) * 100%); background: linear-gradient(180deg, transparent, var(--mint) 15%, var(--mint) 85%, transparent); box-shadow: 0 0 20px rgba(52, 211, 153, .9); opacity: clamp(0, calc(min((var(--lp, 0) - .5) * 20, (1 - (var(--lp, 0) - .5) * 2.4) * 20)), 1); }
.heal__base { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hair); }
.heal__base i { flex: none; width: 34px; height: 38px; border-radius: 50% / 22%; background: linear-gradient(180deg, rgba(52, 211, 153, .3), rgba(52, 211, 153, .08)); box-shadow: inset 0 0 0 1.5px rgba(52, 211, 153, .6); }
.heal__base p b { display: block; font-size: 15px; font-weight: 650; color: var(--text); }
.heal__base p span { font-size: 14px; color: var(--text-3); }
.heal__base em { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-style: normal; font-size: 14px; font-weight: 650; color: #08140f; background: var(--mint-soft); opacity: clamp(0, calc((var(--lp, 0) - .45) * 12), 1); transform: scale(calc(.9 + clamp(0, (var(--lp, 0) - .45) * 12, 1) * .1)); }

/* AI bug reporting: one night run, fifteen failures, four causes, four finished tickets */
.metrics { display: flex; flex-wrap: wrap; gap: 8px 56px; }
.triage { position: relative; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr) minmax(0, 420px); align-items: center; }
.triage__wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tr-in, .tr-out { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tr-in { stroke: rgba(201, 208, 222, .42); stroke-width: 1.3; transition: stroke-dashoffset .8s var(--ease), stroke .7s var(--ease), stroke-width .7s; }
.tr-in.is-drawn { stroke-dashoffset: 0; }
.triage.is-grouped .tr-in { stroke: var(--c); stroke-width: 1.6; }
.tr-out { transition: stroke-dashoffset .75s var(--ease-io); }
.tr-out.is-drawn { stroke-dashoffset: 0; }
.tr-glow { filter: url(#trGlow); opacity: .7; }
.triage__wires.is-static * { transition: none !important; }
.tr-spark { fill: #fff; }
.triage__run { z-index: 1; }
.triage__run .win__bar { gap: 10px; }
.triage__run .win__path { white-space: nowrap; }
.triage__sum { margin-left: auto; white-space: nowrap; font-weight: 650; color: var(--coral); }
.triage__sum em { font-style: normal; font-variant-numeric: tabular-nums; }
.triage__fails { padding: 8px 0 6px; }
.triage__fails li { position: relative; display: grid; grid-template-columns: 8px 64px minmax(0, 1fr); align-items: center; gap: 11px; height: 29px; padding: 0 16px 0 18px; font-size: 14px; color: var(--text-2); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .45s var(--ease); }
.triage__fails li.is-in { opacity: 1; transform: none; }
.triage__fails li::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); opacity: 0; transition: opacity .6s var(--ease); }
.triage__fails li i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 8px rgba(255, 138, 122, .85); transition: background .6s, box-shadow .6s; }
.triage__fails li b { font: 500 14px var(--mono); color: var(--text-3); }
.triage__fails li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.triage.is-grouped .triage__fails li::before { opacity: 1; }
.triage.is-grouped .triage__fails li i { background: var(--c); box-shadow: 0 0 8px var(--c); }
.triage__pass { padding: 11px 18px 14px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--text-3); }
.triage__pass b { color: var(--mint-soft); }
.triage__core { position: relative; z-index: 2; height: 520px; display: grid; place-content: center; justify-items: center; gap: 6px; pointer-events: none; }
.triage__lens { width: 180px; height: 120px; }
.triage__lens svg { width: 100%; height: 100%; overflow: visible; }
.triage__body { opacity: .55; transition: opacity .6s; }
.triage__bloom { opacity: .35; transition: opacity .6s; }
.triage.is-reading .triage__body { opacity: .9; }
.triage.is-reading .triage__bloom { opacity: .9; }
.triage__clock { display: flex; align-items: baseline; gap: 5px; margin-top: 10px; }
.triage__clock b { font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.triage__clock small { font-size: 16px; font-weight: 650; color: var(--text-2); }
.triage__state { min-height: 22px; font-size: 15px; color: var(--text-3); transition: opacity .25s; }
.triage__state.is-swap { opacity: 0; }
.triage__ev { position: absolute; inset: 0; }
.triage__ev li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(.85); padding: 5px 11px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 550; color: var(--text-2); background: rgba(12, 16, 27, .88); box-shadow: inset 0 0 0 1px rgba(161, 132, 255, .32); opacity: 0; transition: opacity .35s, transform .5s var(--ease), box-shadow .5s; }
.triage__ev li.is-in { opacity: 1; transform: translate(-50%, -50%); }
.triage__ev li.is-hot { box-shadow: inset 0 0 0 1px rgba(161, 132, 255, .8), 0 0 18px -4px rgba(161, 132, 255, .9); color: var(--text); }
.triage__tickets { position: relative; z-index: 1; display: grid; gap: 12px; }
.tk { position: relative; padding: 12px 14px 13px 18px; border-radius: 14px; background: linear-gradient(180deg, #141b2d, #0c111c); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 26px 54px -32px rgba(0, 0, 0, .95); opacity: 0; transform: translateX(16px); transition: opacity .5s var(--ease), transform .6s var(--ease), border-color .6s, box-shadow .6s; }
.tk::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.tk.is-in { opacity: 1; transform: none; border-color: color-mix(in oklab, var(--c) 38%, transparent); box-shadow: 0 26px 54px -32px rgba(0, 0, 0, .95), 0 0 34px -18px var(--c); }
.tk__top { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.tk__top b { font: 600 14px var(--mono); color: var(--text-2); }
.tk__sev { padding: 1px 9px; border-radius: 999px; font-weight: 700; color: #0b0d16; background: var(--c); }
.tk__top em { margin-left: auto; font-style: normal; white-space: nowrap; color: var(--text-3); }
.tk__t { margin-top: 6px; font-size: 15px; line-height: 1.35; font-weight: 650; color: var(--text); }
.tk__secs { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 8px; }
.tk__secs li { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--text-3); opacity: .35; transition: opacity .3s, color .3s; }
.tk__secs li::before { content: ''; width: 8px; height: 4.5px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.tk.is-done .tk__secs li { opacity: 1; color: var(--mint-soft); }
.tk.is-done .tk__secs li:nth-child(2) { transition-delay: .08s; } .tk.is-done .tk__secs li:nth-child(3) { transition-delay: .16s; } .tk.is-done .tk__secs li:nth-child(4) { transition-delay: .24s; } .tk.is-done .tk__secs li:nth-child(5) { transition-delay: .32s; }
.triage__cap { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 40px; margin-top: 22px; font-size: 15px; color: var(--text-3); }
.triage [data-g="0"] { --c: #ff8a7a; } .triage [data-g="1"] { --c: #f5b54a; } .triage [data-g="2"] { --c: #a184ff; } .triage [data-g="3"] { --c: #4cc6f5; }

/* the real case: two hundred orders, one pattern */
.bug .win__bar > b { flex: none; font-family: var(--mono); font-size: 14px; color: var(--text-2); }
.bug .win__path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bug__sev { flex: none; margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #2a0f0b; background: var(--coral); }
.bug__body { display: grid; gap: 16px; padding: 18px 20px 20px; }
.bug__title { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: var(--text); }
.sort { position: relative; padding: 14px 16px 16px; border-radius: 12px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--hair-2); }
.sort__lbl { font-size: 14px; color: var(--text-3); }
.sort__field { position: relative; margin-top: 12px; height: 150px; }
.sort__field i { position: absolute; left: 0; top: 0; width: var(--d, 8px); height: var(--d, 8px); border-radius: 50%; background: #343b50; transform: translate(var(--mx), var(--my)) scale(.2); opacity: 0; transition: transform .9s var(--ease), background .35s, box-shadow .35s, opacity .3s; }
.sort.is-on .sort__field i { opacity: 1; transform: translate(var(--mx), var(--my)); }
.sort__field i.is-seen { background: #2fcf95; }
.sort__field i.is-reg.is-seen { background: #ff8a7a; box-shadow: 0 0 7px rgba(255, 138, 122, .75); }
.sort.is-sorted .sort__field i { transform: translate(var(--sx), var(--sy)); transition-delay: calc(var(--q) * 2.2ms); }
.sort__scan { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, transparent, #b9a6ff 20%, #4cc6f5 80%, transparent); box-shadow: 0 0 16px rgba(161, 132, 255, .9); opacity: 0; transform: translateX(var(--scan, 0)); pointer-events: none; }
.sort__keys { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: 14px; }
.sort__key { text-align: center; font-size: 14px; line-height: 1.4; color: var(--text-2); opacity: 0; transform: translateY(4px); transition: opacity .5s, transform .5s var(--ease); }
.sort__key b { font-weight: 750; }
.sort__key--a b { color: var(--mint-soft); }
.sort__key--b b { color: var(--coral); }
.sort.is-keyed .sort__key { opacity: 1; transform: none; }
.sort.is-keyed .sort__key--b { transition-delay: .15s; }
.bug__res { font-size: 15px; line-height: 1.5; color: var(--text-2); opacity: 0; transition: opacity .5s; }
.bug__res b { color: var(--text); }
.bug.is-res .bug__res { opacity: 1; }
.bug__secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.bug__secs div { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.bug.is-done .bug__secs div { opacity: 1; transform: none; }
.bug.is-done .bug__secs div:nth-child(2) { transition-delay: .15s; } .bug.is-done .bug__secs div:nth-child(3) { transition-delay: .3s; } .bug.is-done .bug__secs div:nth-child(4) { transition-delay: .45s; }
.bug__secs dt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--text); }
.bug__secs dt::before { content: ''; width: 8px; height: 4.5px; margin-top: -3px; border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint); transform: rotate(-45deg); }
.bug__secs dd { margin-top: 2px; padding-left: 16px; font-size: 14px; line-height: 1.4; color: var(--text-3); }

/* AI log tracing: two orders, the same path, one stops */
.trace2 { position: relative; margin-top: 34px; display: grid; gap: 16px; }
.trace2__hd, .trace2__row { display: grid; grid-template-columns: 136px minmax(0, 1fr) 112px; column-gap: 18px; align-items: center; }
.trace2__hd { position: relative; height: 20px; }
.trace2__hd span { position: absolute; left: calc(136px + 18px + (100% - 136px - 112px - 36px) * var(--n) / 3); transform: translateX(-50%); font-size: 14px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.trace2__row p b { display: block; font: 600 15px var(--mono); color: var(--text); }
.trace2__row p span { font-size: 14px; color: var(--text-3); }
.trace2__track { position: relative; height: 20px; }
.trace2__track::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.trace2__track i { position: absolute; top: 2px; left: calc(var(--n) / 3 * 100%); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #0b0f1a; border: 2px solid rgba(255, 255, 255, .25); transition: border-color .35s, background .35s, box-shadow .35s; transition-delay: calc(.25s + var(--k) * .5s + var(--n) * .42s); }
.trace2.is-on .trace2__track i { border-color: var(--mint); background: rgba(52, 211, 153, .3); box-shadow: 0 0 10px rgba(52, 211, 153, .55); }
.trace2.is-on .trace2__row.is-lost .trace2__track i:nth-of-type(4) { border-color: var(--coral); background: rgba(255, 138, 122, .18); box-shadow: 0 0 0 6px rgba(255, 138, 122, .12), 0 0 18px rgba(255, 138, 122, .7); }
.trace2__dot { position: absolute; top: 5px; left: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff, 0 0 22px rgba(143, 166, 255, .8); opacity: 0; transition: left 1.3s cubic-bezier(.45, 0, .55, 1), opacity .3s, background .3s, box-shadow .3s; transition-delay: calc(.2s + var(--k) * .5s); }
.trace2.is-on .trace2__dot { left: 100%; opacity: 1; }
.trace2.is-on .trace2__row.is-lost .trace2__dot { left: 83%; background: var(--coral); box-shadow: 0 0 14px var(--coral); }
.trace2__row em { font-style: normal; font-size: 14px; font-weight: 650; opacity: 0; transition: opacity .5s; transition-delay: calc(1.5s + var(--k) * .5s); }
.trace2__row:not(.is-lost) em { color: var(--mint-soft); }
.trace2__row.is-lost em { color: var(--coral); }
.trace2.is-on .trace2__row em { opacity: 1; }
.trace2__note { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-3); opacity: 0; transition: opacity .6s 2.6s; }
.trace2.is-on .trace2__note { opacity: 1; }

.jira ul { display: grid; gap: 12px; margin-top: 34px; }
.jira li { display: flex; align-items: center; gap: 14px; opacity: 0; transform: translateX(-8px); transition: opacity .45s var(--ease), transform .55s var(--ease); transition-delay: calc(.2s + var(--k) * .35s); }
.jira.is-on li { opacity: 1; transform: none; }
.jira__in { flex: 1 1 0; min-width: 0; font-size: 15px; color: var(--text-2); }
.jira__arrow { flex: none; position: relative; width: 40px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(161, 132, 255, .8)); }
.jira__arrow::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid rgba(161, 132, 255, .9); border-right: 2px solid rgba(161, 132, 255, .9); transform: rotate(45deg); }
.jira__out { flex: 1 1 0; min-width: 0; padding: 5px 12px; border-radius: 999px; text-align: center; font-size: 14px; font-weight: 650; color: #ece8ff; background: rgba(161, 132, 255, .16); box-shadow: inset 0 0 0 1px rgba(161, 132, 255, .4); white-space: nowrap; }
.jira__out--ok { color: #08140f; background: var(--mint-soft); box-shadow: none; }
.jira__state { margin-top: 22px; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.jira__state b { font-weight: 650; color: var(--text); }

/* ───────── 9. among the 15% ───────── */
.src { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.field { display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: center; gap: 40px; }
.field__dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; }
.field__dots i { display: block; aspect-ratio: 1; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .4s, transform .5s var(--ease), background .5s, box-shadow .5s; transition-delay: calc(var(--n) * 9ms); }
.field__dots i.d-top { background: rgba(161, 132, 255, .32); }
.field__dots i.d-mid { background: rgba(161, 132, 255, .32); }
.field__dots i.d-off { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.field.is-on .field__dots i { opacity: 1; transform: none; }
.field.is-on .field__dots i.d-top { background: radial-gradient(circle at 40% 35%, #c8fbe4, #26c48a); box-shadow: 0 0 18px rgba(52, 211, 153, .6); transition-delay: calc(1.2s + var(--n) * 40ms); }
.field__key { display: grid; gap: 22px; }
.field__key li { display: grid; gap: 2px; padding-left: 18px; position: relative; }
.field__key li::before { content: ''; position: absolute; left: 0; top: 12px; width: 9px; height: 9px; border-radius: 50%; }
.field__key b { font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -.04em; color: var(--text); }
.field__key span { font-size: 14px; line-height: 1.4; color: var(--text-3); }
.field__key .k-top::before { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.field__key .k-top b { background: var(--grad-gain-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.field__key .k-top span { color: var(--text-2); }
.field__key .k-mid::before { background: rgba(161, 132, 255, .6); }
.field__key .k-off::before { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.barriers { padding-top: 130px; }
.barriers__t { font-size: 15px; font-weight: 600; color: var(--text-2); }
.barriers__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; margin-top: 26px; }
.barriers__row > div { display: grid; align-content: start; gap: 8px; padding-top: 20px; border-top: 1px solid var(--hair-2); opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--k) * 150ms); }
.barriers.is-on .barriers__row > div { opacity: 1; transform: none; }
.barriers__row b { font-size: 54px; line-height: 1; font-weight: 800; letter-spacing: -.05em; background: var(--grad-loss-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.barriers__row p { font-size: 17px; font-weight: 600; color: var(--text); }
.barriers__row span { position: relative; margin-top: 8px; padding-left: 22px; font-size: 16px; line-height: 1.5; color: var(--mint-soft); }
.barriers__row span::before { content: ''; position: absolute; left: 2px; top: 7px; width: 10px; height: 5.5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.speed { padding-top: 120px; }
.speed__t { font-size: 15px; font-weight: 600; color: var(--text-2); }
.speed__axis { position: relative; height: 170px; margin: 20px 8px 0; }
.speed__axis::before { content: ''; position: absolute; left: 0; right: 0; top: 84px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.speed__tick { position: absolute; top: 96px; left: calc(var(--v) * 100%); transform: translateX(-50%); font-size: 14px; color: var(--text-3); }
.speed__tick::before { content: ''; position: absolute; left: 50%; top: -16px; width: 1px; height: 10px; background: rgba(255, 255, 255, .3); }
.speed__band { position: absolute; top: 80px; height: 10px; left: 29%; right: 0; border-radius: 5px; background: var(--grad-gain-bar); box-shadow: 0 0 22px rgba(52, 211, 153, .5); transform-origin: left; transform: scaleX(0); transition: transform 1.3s var(--ease) .3s; }
.speed.is-on .speed__band { transform: none; }
.speed__pt { position: absolute; top: 85px; left: calc(var(--v) * 100%); }
.speed__pt i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #0b0f1a; border: 2.5px solid var(--mint-soft); opacity: 0; transition: opacity .4s; transition-delay: 1.1s; }
.speed__pt em { position: absolute; left: 0; top: 30px; transform: translateX(-50%); display: grid; justify-items: center; white-space: nowrap; font-style: normal; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--mint-soft); opacity: 0; transition: opacity .5s; transition-delay: 1.3s; }
.speed__pt em small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.speed__pt.is-up em { top: auto; bottom: 22px; }
.speed__pt--mkt i { border-color: var(--grey-2); }
.speed__pt--mkt em { color: var(--text-2); }
.speed.is-on .speed__pt i, .speed.is-on .speed__pt em { opacity: 1; }
.speed__pt.is-end em { transform: translateX(-80%); }

/* ───────── 10. around the clock ───────── */
.marker--night { color: #9fb4ff; }
.cadence { display: grid; margin-top: 30px; }
.cadence li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.45; }
.cadence b { font-weight: 650; color: #b9c6ff; }
.cadence span { color: var(--text-2); }
.clock { position: relative; aspect-ratio: 1; max-width: 560px; justify-self: center; width: 100%; }
.clock__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.clock__mid { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; text-align: center; }
.clock__mid b { font-size: 54px; line-height: 1; font-weight: 800; letter-spacing: -.05em; background: var(--grad-sys); -webkit-background-clip: text; background-clip: text; color: transparent; }
.clock__mid span { font-size: 15px; color: var(--text-3); }
.clk-ring { fill: none; }
.clk-lbl { fill: var(--grey-2); font: 500 14px var(--font); }
.clk-lbl--b { fill: #c9d3ff; font-weight: 600; }

/* ───────── 11. working together ───────── */
.together .sec-head { margin-bottom: 70px; }
.path { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; counter-reset: pth; }
.path::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.path::after { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #b9a6ff, #7f9cff, #4cc6f5); box-shadow: 0 0 12px rgba(127, 156, 255, .55); transform-origin: left; transform: scaleX(var(--p, 0)); }
.path li { position: relative; display: grid; align-content: start; gap: 6px; padding-top: 36px; counter-increment: pth; }
/* each circle fills with the colour of the line at its own point, at the moment the line reaches it */
.path i { position: absolute; left: 0; top: 0; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #0b0f1a; border: 2px solid rgba(255, 255, 255, .25); transition: background .3s, border-color .3s, box-shadow .5s; }
.path li.is-hit i { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 5px color-mix(in oklab, var(--c) 20%, transparent), 0 0 18px color-mix(in oklab, var(--c) 85%, transparent); animation: pathpop .55s var(--ease) 1; }
@keyframes pathpop { 0% { transform: scale(.6); } 55% { transform: scale(1.28); } 100% { transform: scale(1); } }
.js .path li > :not(i) { opacity: .42; transition: opacity .6s var(--ease); }
.js .path li.is-hit > :not(i) { opacity: 1; }
.path b { display: flex; align-items: baseline; gap: 10px; font-size: 22px; font-weight: 740; letter-spacing: -.02em; color: var(--text); }
.path b::before { content: counter(pth); font-size: 15px; font-weight: 650; color: var(--text-3); font-variant-numeric: tabular-nums; }
.path em { font-style: normal; font-size: 14px; font-weight: 650; color: var(--mint-soft); }
.path span { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.offers { padding-top: 110px; }
.offers__t { font-size: 15px; font-weight: 600; color: var(--text-2); }
.offers ul { margin-top: 16px; }
.offers li { display: grid; grid-template-columns: minmax(0, 4.4fr) 120px minmax(0, 6fr); align-items: baseline; gap: 28px; padding: 20px 0; border-top: 1px solid var(--hair); }
.offers li:last-child { border-bottom: 1px solid var(--hair); }
.offers b { font-size: 18px; font-weight: 650; letter-spacing: -.012em; color: var(--text); }
.offers em { font-style: normal; font-size: 14px; font-weight: 650; color: var(--mint-soft); }
.offers span { font-size: 16px; line-height: 1.55; color: var(--text-2); }

/* ───────── 12. the assistant ───────── */
.chat { display: flex; flex-direction: column; min-height: 560px; }
.chat__modes { display: flex; gap: 6px; padding: 14px 18px 0; }
.chat__modes button { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: color .2s, background .2s, box-shadow .2s; }
.chat__modes button:hover { color: var(--text); }
.chat__modes button[aria-selected="true"] { color: #0b0d16; background: linear-gradient(100deg, #cfc3ff 0%, #9bb6ff 52%, #7fdcf8 100%); box-shadow: none; }
.chat__log { flex: 1; display: grid; align-content: start; gap: 14px; max-height: 420px; min-height: 260px; overflow-y: auto; padding: 18px; scrollbar-width: thin; }
.msg { max-width: 92%; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.msg--me { justify-self: end; padding: 10px 14px; border-radius: 14px 14px 4px 14px; color: var(--text); background: rgba(161, 132, 255, .16); box-shadow: inset 0 0 0 1px rgba(161, 132, 255, .3); white-space: pre-wrap; }
.msg--ai { padding-left: 14px; border-left: 2px solid rgba(76, 198, 245, .5); }
.msg--ai p + p, .msg--ai ul, .msg--ai ol, .msg--ai h3, .msg--ai h4 { margin-top: 8px; }
.msg--ai h3, .msg--ai h4 { font-size: 15px; font-weight: 700; color: var(--text); }
.msg--ai ul, .msg--ai ol { padding-left: 20px; }
.msg--ai ul { list-style: disc; }
.msg--ai ol { list-style: decimal; }
.msg--ai strong { color: var(--text); }
.msg--ai code { font: 500 14px var(--mono); }
.msg--ai a { color: #9ee3fb; text-decoration: underline; }
.msg--note { font-size: 14px; color: var(--text-3); }
.msg--err { color: var(--coral); }
.msg.is-typing::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #6fd3f7; vertical-align: 1px; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.chat__chips button { padding: 7px 12px; border-radius: 12px; text-align: left; font-size: 14px; line-height: 1.4; color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: color .2s, box-shadow .2s; }
.chat__chips button:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(161, 132, 255, .55); }
.chat__form { display: flex; align-items: flex-end; gap: 10px; margin: 0 18px 18px; padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.chat__form:focus-within { box-shadow: inset 0 0 0 1px rgba(161, 132, 255, .7); }
.chat__form textarea { flex: 1; min-height: 40px; max-height: 140px; padding: 9px 0; border: 0; resize: none; outline: none; background: none; font: 400 16px/1.45 var(--font); color: var(--text); }
.chat__form textarea::placeholder { color: var(--grey-3); }
.chat__send { flex: none; height: 40px; padding: 0 18px; border-radius: 10px; font-size: 15px; font-weight: 650; color: #0b0d16; background: linear-gradient(100deg, #cfc3ff 0%, #9bb6ff 52%, #7fdcf8 100%); transition: opacity .2s; }
.chat__send:disabled { opacity: .45; cursor: default; }
.chat[data-state="busy"] .win__status::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.chat[data-state="ok"] .win__status::before { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.chat[data-state="off"] .win__status::before { background: var(--grey-3); box-shadow: none; }

/* ───────── 13. about ───────── */
.about__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; align-items: start; }
.about__photo { position: relative; width: 176px; height: 176px; margin-bottom: 34px; border-radius: 50%; overflow: hidden; background: #0b0d18; box-shadow: 0 0 0 2px rgba(185, 166, 255, .5), 0 0 0 8px rgba(76, 198, 245, .08), 0 30px 60px -20px rgba(123, 104, 255, .6); }
.about__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about__me .h2 .tint { font-size: .62em; line-height: 1.25; margin-top: 8px; }
.about__d { margin-top: 24px; font-size: 17px; line-height: 1.65; color: var(--text-2); }
.about__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
.about__facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding-left: 20px; border-left: 1px solid var(--hair); }
.about__facts > div:first-child { padding-left: 0; border-left: 0; }
.about__facts dd { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.045em; background: var(--grad-sys); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about__facts dt { font-size: 14px; line-height: 1.4; color: var(--text-3); }
.about__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 36px; }
.about__cta span { font-size: 14px; color: var(--text-3); }
.about__t { font-size: 15px; font-weight: 600; color: var(--text-2); }
.career__rows { position: relative; display: grid; gap: 18px; margin-top: 22px; }
.career__rows li { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); align-items: center; column-gap: 24px; }
.career__rows p b { display: block; font-size: 15px; font-weight: 650; color: var(--text); }
.career__rows p span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--text-3); }
.career__rows i { position: relative; display: block; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .04); }
.career__rows i::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--a) / 13 * 100%); width: calc((var(--z) - var(--a)) / 13 * 100%); border-radius: 6px; background: var(--c); box-shadow: 0 0 14px color-mix(in oklab, var(--c) 60%, transparent); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); }
.career.is-on .career__rows i::after { transform: none; }
.career.is-on .career__rows li:nth-child(2) i::after { transition-delay: .1s; } .career.is-on .career__rows li:nth-child(3) i::after { transition-delay: .2s; } .career.is-on .career__rows li:nth-child(4) i::after { transition-delay: .3s; } .career.is-on .career__rows li:nth-child(5) i::after { transition-delay: .4s; } .career.is-on .career__rows li:nth-child(6) i::after { transition-delay: .5s; }
.career__axis { position: relative; height: 20px; margin: 12px 0 0 calc(250px + 24px); }
.career__axis span { position: absolute; left: calc(var(--p) / 13 * 100%); transform: translateX(-50%); font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.skills { margin-top: 56px; }
.skills dl { display: grid; margin-top: 14px; }
.skills dl > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 12px 0; border-top: 1px solid var(--hair); }
.skills dt { font-size: 15px; font-weight: 650; color: var(--text); }
.skills dd { font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* ───────── 4. contact ───────── */
.contact { position: relative; padding: 170px var(--pad) 70px; text-align: center; }
.contact__t { font-size: clamp(36px, 4vw, 58px); line-height: 1.05; font-weight: 770; letter-spacing: -.042em; }
.contact__d { margin: 20px auto 0; max-width: 32em; font-size: 18px; line-height: 1.55; color: var(--text-2); }
.contact__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin-top: 38px; }
.contact__list a { padding-bottom: 5px; border-bottom: 1px solid var(--hair-3); font-size: 18px; font-weight: 600; transition: border-color .2s, color .2s; }
.contact__list a:hover { border-color: var(--violet); }
.contact__foot { margin-top: 110px; font-size: 14px; color: var(--text-3); }

/* the CV toast (used by every download link) */
.cvtoast { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: min(360px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 16px; border: 1px solid var(--hair-2); background: rgba(12, 16, 27, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); animation: toastin .45s var(--ease); }
@keyframes toastin { from { opacity: 0; transform: translateY(14px); } }
.cvtoast p { font-size: 16px; font-weight: 650; }
.cvtoast ul { display: grid; gap: 6px; margin: 12px 0; }
.cvtoast li { position: relative; padding-left: 24px; font-size: 15px; color: var(--text-3); transition: color .3s; }
.cvtoast li::before { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--hair-3); transition: background .3s, border-color .3s; }
.cvtoast li.is-done { color: var(--text); }
.cvtoast li.is-done::before { border-color: var(--mint); background: var(--mint); box-shadow: 0 0 10px rgba(52, 211, 153, .6); }
.cvtoast .bar-fill { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cvtoast .bar-fill i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--grad-gain-bar); }
.cvtoast__x { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--text-3); }
.cvtoast__x:hover { color: var(--text); }
.cvtoast__pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cvtoast__pick button { display: grid; justify-items: start; gap: 2px; padding: 12px 14px 13px; border-radius: 12px; text-align: left; box-shadow: inset 0 0 0 1px var(--hair-2); transition: box-shadow .2s, background .2s; }
.cvtoast__pick button:hover, .cvtoast__pick button:focus-visible { background: rgba(161, 132, 255, .1); box-shadow: inset 0 0 0 1px rgba(161, 132, 255, .6); }
.cvtoast__pick b { margin-top: 8px; font-size: 16px; font-weight: 650; color: var(--text); }
.cvtoast__pick span { font-size: 14px; color: var(--text-3); }
.cvbtn { gap: 12px; }
.cvbtn__page { flex: none; position: relative; display: block; width: 16px; height: 21px; border-radius: 3px; }
.cvbtn__page::before, .cvbtn__page::after { content: ''; position: absolute; left: 3px; right: 3px; height: 2px; border-radius: 1px; }
.cvbtn__page::before { top: 6px; } .cvbtn__page::after { top: 11px; right: 6px; }
.cvbtn__page--light { background: #f5f6fa; box-shadow: 0 0 0 1px rgba(14, 18, 32, .25); }
.cvbtn__page--light::before, .cvbtn__page--light::after { background: #9aa3b6; }
.cvbtn__page--dark { background: #0b0e18; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.cvbtn__page--dark::before, .cvbtn__page--dark::after { background: #a184ff; }
.about__cta span { flex-basis: 100%; }

/* ───────── responsive ───────── */
@media (max-width: 1320px) {
  .sheet { width: 190px; }
  .sheet.s1 { --x: -200; } .sheet.s2 { --x: -66; } .sheet.s3 { --x: 66; } .sheet.s4 { --x: 200; }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .bar__cv { margin-left: auto; }
  .hero__top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lens { max-width: 720px; justify-self: center; }
  .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .gains__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .hours__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pstep__viz { overflow-x: clip; }
  .sheet { width: 160px; }
  .sheet.s1 { --x: -140; } .sheet.s2 { --x: -46; } .sheet.s3 { --x: 46; } .sheet.s4 { --x: 140; }
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .pain { height: auto; padding: 110px 0 40px; }
  .pain__pin { position: static; height: auto; display: block; padding: 0 var(--pad); }
  .pain__head { margin-bottom: 26px; }
  .pain__rail { display: none; }
  .pain__steps { display: grid; gap: 54px; }
  .pstep { display: block; }
  .pstep__text { padding: 0; }
  .pstep__t { opacity: 1; font-size: 22px; }
  .pstep__more { grid-template-rows: 1fr; }
  .pstep__viz { position: relative; top: auto; left: auto; width: auto; height: 340px; margin-top: 22px; opacity: 1; transform: none; filter: none; overflow: hidden; }
  .pstep.is-active .pstep__viz { transform: none; }
}
@media (max-width: 720px) {
  :root { --bar-h: 62px; }
  .bar__chapter { display: none; }
  .hero { padding-top: calc(var(--bar-h) + 28px); }
  .hero__title { font-size: 38px; }
  .hero__lead { font-size: 17px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .lens { margin-bottom: 64px; }
  .lens__cap { position: absolute; top: calc(100% + 10px); left: 0; right: 0; bottom: auto; max-width: none; text-align: left; }
  .lens__replay { display: none; }
  .gains__num b { font-size: 40px; }
  .gains__item--lead .gains__num b { font-size: 46px; }
  .gains__item { padding: 14px 16px 0; }
  .gains__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pstep__viz { height: 300px; }
  .pv-archive__wall { left: 0; right: -30%; }
  .sheet { width: 132px; padding: 11px; gap: 7px; }
  .sheet b { font-size: 14px; }
  .sheet.s1 { --x: -104; } .sheet.s2 { --x: -36; } .sheet.s3 { --x: 36; } .sheet.s4 { --x: 104; }
  .pv-archive__loupe { width: 96px; height: 96px; offset-path: path('M 60 80 C 170 30, 270 120, 210 170 S 70 230, 240 240'); }
  .who { width: 124px; padding: 12px; }
  .who > span { font-size: 14px; }
  .pv-drift__q { font-size: 24px; }
  .pv-logs__stream p { font-size: 14px; }
  .pv-logs__stream time { display: none; }
  .hours { padding: 110px 0 90px; }
  .hbars li { grid-template-columns: minmax(0, 1fr) 72px; }
  .hbars em { font-size: 22px; }
  .team__row { grid-template-columns: 112px minmax(0, 1fr); }
  .team__ppl i { width: 18px; height: 22px; }
  .contact { padding-top: 120px; }
  .contact__list { flex-direction: column; align-items: center; }
}
/* ───────── the new chapters: tablet and phone ───────── */
@media (max-width: 1100px) {
  .rec2 { grid-template-columns: minmax(0, 1fr); row-gap: 22px; max-width: 760px; }
  .srch { grid-template-columns: minmax(0, 1fr); row-gap: 16px; max-width: 760px; --sr-dir: v; }
  .srch__flow { height: 600px; }
  .learn { grid-template-columns: minmax(0, 1fr); row-gap: 30px; max-width: 760px; }
  .born { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; row-gap: 30px; align-items: start; }
  .born__spec { grid-column: 1 / -1; }
  .learn__wires { display: none; }
  .learn__src { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .learn__src li:nth-child(2) { border-top: 0; }
  .learn__src li::after { display: none; }
  .rec2__wires { display: none; }
  /* no room for the wires: the AI band goes on top, the run and the tickets sit side by side, colours tie them together */
  .triage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 28px; align-items: start; }
  .triage__wires { display: none; }
  .triage__core { grid-column: 1 / -1; grid-row: 1; height: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 30px; }
  .triage__lens { width: 150px; height: 100px; }
  .triage__clock { margin-top: 0; }
  .triage__core > .triage__clock, .triage__core > .triage__state { flex: none; }
  .triage__ev { position: static; order: 4; flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; }
  .triage__ev li { position: static; transform: scale(.85); }
  .triage__ev li.is-in { transform: none; }
  .tk__top { flex-wrap: wrap; row-gap: 2px; }
}
@media (max-width: 900px) {
  .triage { grid-template-columns: minmax(0, 1fr); }
  .triage__core { grid-column: auto; grid-row: auto; display: grid; justify-items: center; gap: 6px; padding: 4px 0; }
  .triage__ev { max-width: 520px; margin-top: 10px; }
}
.sweep__src, .speed__legend { display: none; }
@media (max-width: 1100px) {
  .scene, .scene--flip { grid-template-columns: minmax(0, 1fr); row-gap: 44px; padding-top: 120px; }
  .scene--opener { padding-top: 0; }
  .scene--flip > .scene__text { order: 0; }
  .scene--wide > .scene__text, .sec-head--split { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .sec-head--split .sec-lead { padding-bottom: 0; }
  .pair { grid-template-columns: minmax(0, 1fr); row-gap: 120px; padding-top: 120px; }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .tally > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .about__in { grid-template-columns: minmax(0, 1fr); row-gap: 70px; }
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .path::before, .path::after { display: none; }
  .clock { max-width: 520px; }
  .chapter { padding-top: 120px; }
}
@media (max-width: 760px) {
  .cosmos { height: auto; }
  .cosmos__cvs { position: relative; inset: auto; height: 430px; }
  .cosmos__labels { position: absolute; left: 0; top: 0; }
  .cosmos__cap { position: static; margin-top: 16px; }
  .fact { position: relative; right: auto; bottom: auto; width: auto; margin-top: 20px; }
}
@media (max-width: 720px) {
  .systems, .chapter { padding-top: 100px; }
  .scene, .scene--flip { padding-top: 100px; row-gap: 34px; }
  .scene--opener { padding-top: 0; }
  .pair { padding-top: 100px; row-gap: 100px; }
  .scene__t { font-size: 28px; }
  .metric__num b { font-size: 42px; }
  .win__bar { gap: 8px; padding: 0 14px; }
  .win__path { display: none; }
  .std { padding-left: 0; }
  .std__legend, .std__row::before { display: none; }
  .std__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .std__sheet:nth-child(1) { --sx: 30; --sy: 20; --sr: -7; }
  .std__sheet:nth-child(2) { --sx: -26; --sy: 8; --sr: 5; }
  .std__sheet:nth-child(3) { --sx: 28; --sy: -12; --sr: 6; }
  .std__sheet:nth-child(4) { --sx: -30; --sy: -20; --sr: -8; }
  .std__cap { height: auto; min-height: 46px; }
  .demo__tag { display: none; }
  .win__status { font-size: 14px; }
  .lvl__rows li:not(.lvl__axis) { grid-template-columns: 96px minmax(0, 1fr) 26px; gap: 12px; }
  .lvl__rows span { font-size: 14px; }
  .lvl__axis { left: calc(108px + (100% - 108px - 38px) * .92); }
  .lvl__rows em { width: 20px; height: 20px; }
  .lvl__rows em::after { left: 6px; top: 5.5px; }
  .tally dd { font-size: 36px; }
  .tally__lead { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
  .tally__lead dd { font-size: 44px; }
  .lvl__lbl { transform: translateX(calc(-100% + 8px)); }
  .tally > div { padding: 4px 16px 0; }
  .tally > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .oracle__ask { font-size: 16px; margin: 14px 14px 0; }
  .oracle__work, .oracle__learn { margin-left: 14px; margin-right: 14px; }
  .oracle__ans { padding: 14px 14px 4px; }
  .oracle__list li { font-size: 15px; }
  .born { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .born__text { min-height: 0; }
  .learn__src { grid-template-columns: minmax(0, 1fr); }
  .learn__src li:nth-child(2) { border-top: 1px solid var(--hair); }
  .learn__src em { white-space: normal; }
  .learn__src li.is-fire em { max-height: 64px; }
  .fv--old.is-left .fv__stay, .fv--old.is-old .fv__tag { max-height: 64px; }
  .learn__tl { padding-left: 26px; }
  .learn__tl::before { left: 6px; }
  .fv::before { left: -26px; top: 2px; }
  .fv__when { position: static; display: block; width: auto; margin-bottom: 6px; text-align: left; }
  .learn__base { padding-left: 26px; }
  .sweep { aspect-ratio: auto; display: grid; justify-items: center; gap: 20px; }
  .sweep__svg, .sweep__labels { display: none; }
  .sweep__core { position: relative; left: auto; top: auto; transform: none; }
  .sweep__src { display: block; text-align: center; font-size: 15px; line-height: 1.5; color: var(--text-3); }
  .sweep__finds { position: static; width: 100%; }
  .boehm__bars { height: 230px; gap: 12px; margin-bottom: 150px; }
  .boehm__col > span { top: calc(100% + 56px); }
  .boehm__col > b { font-size: 14px; }
  .boehm__col em { font-size: 22px; }
  .boehm__col > .boehm__gate { font-size: 14px; text-align: center; }
  .twin { grid-template-columns: minmax(0, 1fr); }
  .twin__col--alt { border-left: 0; border-top: 1px solid var(--hair); }
  .flag__cases li { grid-template-columns: 68px minmax(0, 1fr) 112px; gap: 8px; }
  .match__ticket { left: 0; right: 0; transform: translateY(-8px); flex-wrap: wrap; gap: 4px 10px; white-space: normal; }
  .match.is-on .match__ticket { transform: none; }
  .match__ticket::after { left: 50%; }
  .flag__diff { font-size: 15px; }
  .race__bar { height: auto; min-height: 26px; flex-wrap: wrap; row-gap: 4px; }
  .race__bar em { white-space: normal; }
  .race__ppl { flex-wrap: wrap; height: auto; row-gap: 6px; }
  .heal__grid { gap: 3px; }
  .heal__grid i { border-radius: 3px; }
  .bug__body { padding: 16px; }
  .bug__secs { grid-template-columns: minmax(0, 1fr); }
  .triage__fails li { grid-template-columns: 8px 60px minmax(0, 1fr); gap: 9px; padding: 0 12px 0 16px; }
  .tk { padding: 12px 14px 13px 18px; }
  .sort { padding: 12px 12px 14px; }
  .trace2__hd, .trace2__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .trace2__hd span { left: calc(var(--n) / 3 * 100%); }
  .trace2__hd span:first-child { transform: none; }
  .trace2__hd span:last-child { transform: translateX(-100%); }
  .trace2__hd { margin: 0 2px; }
  .trace2__row p { grid-column: 1; }
  .trace2__row em { grid-column: 2; grid-row: 1; align-self: start; }
  .trace2__track { grid-column: 1 / -1; margin: 0 8px; }
  .jira__arrow { width: 22px; }
  .jira__in { font-size: 14px; }
  .field { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .field__dots { gap: 8px; }
  .field__key { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .field__key b { font-size: 28px; }
  .barriers { padding-top: 100px; }
  .barriers__row { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .barriers__row b { font-size: 46px; }
  .speed { padding-top: 100px; }
  .speed__pt em { font-size: 17px; }
  .speed__pt em small { display: none; }
  .speed__pt--mkt em { transform: translateX(-20%); }
  .speed__pt.is-up em { bottom: 16px; }
  .speed__pt em { top: 22px; }
  .speed__axis { height: 120px; }
  .speed__axis::before { top: 58px; }
  .speed__band { top: 54px; }
  .speed__pt { top: 59px; }
  .speed__tick { top: 68px; }
  .speed__legend { display: block; margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--text-3); }
  .cadence li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .clock__mid b { font-size: 40px; }
  .path { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-left: 34px; }
  .path::before, .path::after { display: block; left: 8px; right: auto; top: 14px; bottom: 0; width: 2px; height: auto; }
  .path::after { transform-origin: top; transform: scaleY(var(--p, 0)); background: linear-gradient(180deg, #b9a6ff, #7f9cff, #4cc6f5); }
  .path li { padding-top: 0; }
  .path i { left: -34px; top: 5px; }
  .path b { font-size: 20px; }
  .offers { padding-top: 90px; }
  .offers li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  .chat { min-height: 0; }
  .chat__log { max-height: 380px; min-height: 200px; padding: 16px 14px; }
  .chat__modes { flex-wrap: wrap; padding: 12px 14px 0; }
  .chat__chips { padding: 0 14px 12px; }
  .chat__form { margin: 0 14px 14px; }
  .about__photo { width: 140px; height: 140px; }
  .about__facts dd { font-size: 32px; }
  .about__facts > div { padding-left: 14px; }
  .career__rows li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .career__axis { margin-left: 0; }
  .skills dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-rise] .w > span, .js [data-rise] .tint { transform: none !important; opacity: 1 !important; filter: none !important; }
  .hbars i, .team__bar i { transform: none !important; }
  .pstep { --lp: 1 !important; }
}