/* Horse's Mouth. Daylight and blacklight: white sections with black type, then near-black sections
   where the four labels glow like highlighter ink. Every answer on the page is marked up in them. */

:root {
  --night: #09090E;
  --night-2: #12121B;
  --day: #FBFBF8;
  --day-2: #F1F1EC;
  --ink: #101018;
  --uv: #7C5CFF;

  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --m: clamp(16px, 4vw, 48px);
  --out: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.3, 1.45, .5, 1);
}

/* the four inks. Each section sets its own set: glowing on dark, marker on light. */
.sec--dark, .nav, .foot {
  --bg: var(--night); --fg: #F4F4F8; --fg-2: rgba(244, 244, 248, .72); --fg-3: rgba(244, 244, 248, .5);
  --line: rgba(255, 255, 255, .11); --card: rgba(255, 255, 255, .045); --card-2: rgba(255, 255, 255, .08);
  --official: #5CFF9D; --calculated: #6CD0FF; --secondhand: #FFE95C; --unchecked: #FF7EC1;
  --shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 80px -30px rgba(0, 0, 0, .9);
  --accent: var(--official);
}
.sec--light {
  --bg: var(--day); --fg: var(--ink); --fg-2: #4A4A58; --fg-3: #7A7A88;
  --line: rgba(16, 16, 24, .12); --card: #FFFFFF; --card-2: var(--day-2);
  --official: #17B45B; --calculated: #1790D6; --secondhand: #D9A400; --unchecked: #E0409A;
  --shadow: 0 1px 2px rgba(16, 16, 24, .06), 0 14px 30px -12px rgba(16, 16, 24, .16), 0 50px 90px -50px rgba(16, 16, 24, .3);
  --accent: var(--official);
}
[data-accent="calculated"] :is(.sec, .nav, .foot) { --accent: var(--calculated); }
[data-accent="secondhand"] :is(.sec, .nav, .foot) { --accent: var(--secondhand); }
[data-accent="unchecked"] :is(.sec, .nav, .foot) { --accent: var(--unchecked); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--night); color: #F4F4F8; font-family: var(--text); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, pre, table, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
code { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--uv); outline-offset: 3px; border-radius: 6px; }
::selection { background: #5CFF9D; color: #06140B; }
.wrap { width: min(1180px, 100% - 2 * var(--m)); margin-inline: auto; position: relative; }

/* ---------------------------------------------------------------- nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(9, 9, 14, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 800 20px/1 var(--display); letter-spacing: -.02em; }
.brand svg { width: 30px; height: 30px; }
.nav-right { display: flex; align-items: center; gap: 6px; }
.nav-link { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 44px; text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--fg-2); }
.nav-link svg { width: 18px; height: 18px; }
.nav-dl { display: grid; place-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--accent); color: #06140B; transition: background .5s; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.nav-dl .sm { display: none; }

/* ---------------------------------------------------------------- sections */
.sec { position: relative; padding: clamp(78px, 9vw, 136px) 0; text-align: center; background: var(--bg); color: var(--fg); overflow: hidden; }
.sec--dark::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1500px, 160%); height: 640px; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 0%, rgba(124, 92, 255, .3), rgba(124, 92, 255, .07) 55%, transparent 78%); pointer-events: none; }
.sec--dark::after { content: ""; position: absolute; left: 50%; top: 0; width: min(760px, 70%); height: 3px; transform: translateX(-50%); border-radius: 0 0 4px 4px; background: linear-gradient(90deg, transparent, #B9A6FF 20%, #E9E2FF 50%, #B9A6FF 80%, transparent); box-shadow: 0 0 26px 4px rgba(124, 92, 255, .8); pointer-events: none; }
.sec--light::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 46% at 50% 0%, #fff, transparent 70%), repeating-linear-gradient(90deg, transparent 0 79px, rgba(16, 16, 24, .035) 79px 80px); pointer-events: none; }
.hero { padding-top: 132px; padding-bottom: clamp(60px, 7vw, 100px); }
.hero::after { display: none; }
.head { z-index: 1; }
.eyebrow { font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); transition: color .5s; }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(32px, 5.4vw, 76px); line-height: 1.02; margin-top: 16px; }
h2 { font-size: clamp(29px, 3.9vw, 52px); line-height: 1.06; }
h2 span, .sub span { display: inline-block; }
.sub { margin: 16px auto 0; max-width: 880px; font-size: clamp(17px, 1.5vw, 19.5px); color: var(--fg-2); text-wrap: balance; }
.sub code { padding: 2px 7px; border-radius: 6px; background: var(--card-2); color: var(--fg); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.sec > .wrap:not(.head) { margin-top: clamp(36px, 4.6vw, 60px); z-index: 1; }
.fine { font-size: 13.5px; color: var(--fg-3); margin-top: 22px; text-wrap: balance; }
.sec > .fine { margin-top: 26px; }

.btn { display: inline-grid; place-items: center; min-height: 50px; padding: 0 24px; border-radius: 99px; border: 1px solid transparent; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .18s var(--out), box-shadow .25s; }
.btn:active { transform: scale(.97); }
.btn--glow { background: var(--accent); color: #06140B; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 10px 44px -6px color-mix(in srgb, var(--accent) 60%, transparent); transition: transform .18s var(--out), box-shadow .25s, background .5s; }
.btn--glow:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), 0 12px 60px -4px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn--ghost { border-color: var(--line); color: var(--fg); background: var(--card); }
.btn--ink { background: var(--fg); color: var(--bg); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); }

html.is-booted:not(.static) .sec > .wrap { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--out), transform .8s var(--out); }
html.is-booted:not(.static) .sec.is-shown > .wrap { opacity: 1; transform: none; }
html.is-booted:not(.static) .sec.is-shown > .wrap:not(.head) { transition-delay: .12s; }
.static *, .static *::before, .static *::after { animation: none !important; transition: none !important; }
html.static { scroll-behavior: auto; }

/* ---------------------------------------------------------------- the label inks */
.lb { background: none; color: inherit; font-weight: 700; padding: .04em .34em; margin: 0 -.06em; border-radius: .34em .16em .3em .14em; --c: var(--official); }
.lb-calculated { --c: var(--calculated); }
.lb-secondhand { --c: var(--secondhand); }
.lb-unchecked { --c: var(--unchecked); }
.sec--dark .lb { color: var(--c); background: linear-gradient(color-mix(in srgb, var(--c) 15%, transparent), color-mix(in srgb, var(--c) 15%, transparent)); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent), 0 0 18px -2px color-mix(in srgb, var(--c) 45%, transparent); }
.sec--light .lb { color: var(--ink); background: linear-gradient(100deg, transparent 1%, color-mix(in srgb, var(--c) 46%, #fff) 5%, color-mix(in srgb, var(--c) 38%, #fff) 94%, transparent 99%); }
@keyframes ink { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
.inked .lb { background-repeat: no-repeat; animation: ink .5s var(--out) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); flex: none; }

/* ---------------------------------------------------------------- the chat card: a real question and its real answer */
.chat { text-align: left; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.sec--dark .chat { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chat-q { display: flex; gap: 12px; align-items: flex-start; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.who { flex: none; margin-top: 2px; padding: 3px 9px; border-radius: 99px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--card-2); color: var(--fg-2); }
.chat-q p { font: 600 clamp(17px, 1.7vw, 21px)/1.3 var(--display); letter-spacing: -.01em; }
.chat-a { padding: 20px 22px 8px; font-size: 15.5px; line-height: 1.58; color: var(--fg); overflow-wrap: anywhere; }
.chat--fix .chat-a { height: 430px; overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent); padding-bottom: 34px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.chat-a > * + * { margin-top: 12px; }
.chat-a ul, .chat-a ol { display: grid; gap: 9px; }
.chat-a ol { counter-reset: n; }
.chat-a ol > li { counter-increment: n; padding-left: 26px; }
.chat-a ol > li::before { content: counter(n) "."; background: none; width: auto; height: auto; top: 0; left: 0; font: 500 13.5px/1.9 var(--mono); color: var(--fg-3); }
.chat-a li { position: relative; padding-left: 18px; }
.chat-a li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); }
.chat-a li ul { margin-top: 7px; gap: 5px; }
.chat-a a { color: inherit; text-decoration: underline; text-decoration-color: var(--fg-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.chat-a a:hover { text-decoration-color: var(--official); }
.chat-a code { padding: 1px 6px; border-radius: 5px; background: var(--card-2); }
.chat-a .f { transition: opacity .35s, background .35s; border-radius: 8px; }
.chat-a .srcs-h { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-top: 18px; }
.chat-a .srcs { font-size: 13.5px; color: var(--fg-2); gap: 5px; }
.tbl { overflow-x: auto; }
.tbl table { border-collapse: collapse; width: 100%; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.tbl th { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.chat-m { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 12px 22px 18px; margin-top: auto; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--line); font: 500 12px/1.5 var(--mono); color: var(--fg-2); }
.chip b { color: var(--fg); font-weight: 500; }
/* dim every fact that does not carry the picked label */
[data-pick="official"] .chat-a .f:not([data-l~="official"]), [data-pick="calculated"] .chat-a .f:not([data-l~="calculated"]),
[data-pick="secondhand"] .chat-a .f:not([data-l~="secondhand"]), [data-pick="unchecked"] .chat-a .f:not([data-l~="unchecked"]),
.is-spot .chat-a .f:not(.spot) { opacity: .26; }
.chat-a .f.spot { background: color-mix(in srgb, var(--official) 12%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--official) 12%, transparent); }

.hint { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); padding: 4px 11px; border-radius: 99px; background: var(--uv); color: #fff; font: 600 12px/1.4 var(--text); white-space: nowrap; pointer-events: none; z-index: 5; transition: opacity .3s; box-shadow: 0 6px 20px -4px rgba(124, 92, 255, .8); }
.hint::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--uv); }
.hint.is-gone { opacity: 0; }
.has-hint { position: relative; }

/* ---------------------------------------------------------------- the trail: what Claude did, in order */
.trail { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px 0; }
.tn { display: grid; align-content: center; gap: 2px; min-height: 62px; max-width: 250px; padding: 9px 15px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; transition: opacity .35s, transform .35s var(--out), border-color .35s, box-shadow .35s; }
.tn + .tn { margin-left: 30px; position: relative; }
.tn + .tn::before { content: ""; position: absolute; right: 100%; top: 50%; width: 30px; height: 2px; margin-right: 1px; background: linear-gradient(90deg, var(--line), var(--fg-3)); }
.tn + .tn::after { content: ""; position: absolute; right: calc(100% + 1px); top: 50%; width: 7px; height: 7px; margin-top: -3px; border-top: 2px solid var(--fg-3); border-right: 2px solid var(--fg-3); transform: rotate(45deg); }
.tn-k { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.tn-v { font: 600 14px/1.25 var(--text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tn-s { font: 400 11.5px var(--mono); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn--skill .tn-v { color: var(--official); }
.tn--read { border-color: color-mix(in srgb, var(--official) 55%, transparent); }
.tn--read .tn-k { color: var(--official); }
.tn--blocked .tn-k, .tn--unread .tn-k { color: var(--unchecked); }
.tn--blocked, .tn--unread { border-style: dashed; }
.trail.has-focus .tn:not(.is-focus) { opacity: .5; }
.tn--off { border-style: dashed; }
@media (min-width: 761px) { .tn.tn--row { margin-left: 0; } .tn.tn--row::before, .tn.tn--row::after { display: none; } }
.ctl.has-hint { margin-top: 22px; }
.tn--off .tn-v { color: var(--fg-3); }
.tn.is-focus { transform: translateY(-4px); border-color: var(--uv); box-shadow: 0 0 0 3px color-mix(in srgb, var(--uv) 24%, transparent), var(--shadow); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.play .tn, .play .chat-a > * { animation: rise .45s var(--out) both; animation-delay: calc(var(--i, 0) * 260ms); }

/* ---------------------------------------------------------------- 1. hero: each fact tied to its source */
.h-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(40px, 7vw, 96px); align-items: start; }
.h-srcs { padding-top: 96px; }
.hero::before { height: 900px; background: radial-gradient(50% 36% at 50% 0%, rgba(124, 92, 255, .34), rgba(124, 92, 255, .08) 55%, transparent 78%), radial-gradient(26% 22% at 8% 62%, rgba(92, 255, 157, .1), transparent 70%), radial-gradient(26% 22% at 94% 58%, rgba(255, 126, 193, .1), transparent 70%); }
.h-stage .chat-a .f[data-s]:not([data-s=""]) { cursor: pointer; padding: 6px 8px; margin-inline: -8px; }
.h-stage .chat-a li.f { padding: 6px 8px 6px 26px; margin-inline: -8px; }
.h-stage .chat-a li.f::before { left: 11px; }
.h-stage .chat-a .f.is-on { background: color-mix(in srgb, var(--c, var(--official)) 9%, transparent); }
.h-stage .f[data-l~="official"] { --c: var(--official); }
.h-stage .f[data-l~="secondhand"] { --c: var(--secondhand); }
.h-srcs { display: grid; gap: 16px; }
.h-cap { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); text-align: left; }
.src { display: grid; gap: 3px; padding: 15px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; text-decoration: none; transition: transform .4s var(--out), border-color .3s, box-shadow .3s, opacity .3s; }
.src-h { display: flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--fg-2); }
.src-t { font: 600 15.5px/1.3 var(--text); }
.src-s { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.src[data-s="read"] .src-s { color: var(--official); }
.h-srcs.has-on .src:not(.is-on) { opacity: .4; }
.src.is-on { border-color: var(--c, var(--official)); box-shadow: 0 0 0 1px var(--c, var(--official)), 0 0 44px -8px var(--c, var(--official)), var(--shadow); }
.tether { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.tether path { fill: none; stroke: var(--line); stroke-width: 1.5; transition: stroke .3s, stroke-width .3s, opacity .3s; }
.tether path.is-on { stroke: var(--c, var(--official)); stroke-width: 2.5; filter: drop-shadow(0 0 7px var(--c, var(--official))); stroke-dasharray: 6 7; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -26; } }

/* ---------------------------------------------------------------- 2. labels: four markers */
.lb-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 900px; margin-inline: auto; }
.pen { position: relative; display: grid; justify-items: center; gap: 10px; padding: 0 0 4px; min-height: 44px; --c: var(--official); }
.pen[data-k="calculated"] { --c: var(--calculated); }
.pen[data-k="secondhand"] { --c: var(--secondhand); }
.pen[data-k="unchecked"] { --c: var(--unchecked); }
.pen-body { width: 100%; height: 58px; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, #fff), var(--c)); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -10px 0 color-mix(in srgb, var(--c) 78%, #000) inset, 0 16px 26px -12px color-mix(in srgb, var(--c) 80%, #000); display: grid; place-items: center; font: 800 clamp(13px, 1.7vw, 19px)/1 var(--display); letter-spacing: -.01em; color: var(--ink); padding-bottom: 8px; transition: transform .35s var(--spring); }
.pen-tip { width: 30%; height: 18px; margin-top: -10px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, #000), var(--c)); clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 62%); transition: transform .35s var(--spring); }
.pen.is-on .pen-body { transform: translateY(10px); }
.pen:not(.is-on) .pen-body { filter: saturate(.55); opacity: .7; }
.lb-def { margin: 34px auto 0; font: 600 clamp(18px, 2vw, 24px)/1.3 var(--display); letter-spacing: -.015em; min-height: 2.6em; display: grid; place-items: center; text-wrap: balance; max-width: 700px; }
.lb-stage { max-width: 820px; margin: 10px auto 0; }

/* ---------------------------------------------------------------- 3. covers: twelve keys */
.cv { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 44px); align-items: start; }
.cv-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.key { position: relative; display: grid; align-content: space-between; gap: 10px; min-height: 96px; padding: 13px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: left; transition: transform .25s var(--out), border-color .25s, background .25s, box-shadow .25s; }
.key-n { font: 500 11px var(--mono); color: var(--fg-3); }
.key-t { font: 600 14px/1.25 var(--text); color: var(--fg-2); }
.key.is-on { border-color: var(--official); background: color-mix(in srgb, var(--official) 9%, transparent); box-shadow: 0 0 34px -8px var(--official); transform: translateY(-2px); }
.key.is-on .key-t { color: var(--fg); }
.key.is-on .key-n { color: var(--official); }
.cv-read { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 12px; margin-bottom: 16px; min-height: 34px; }
.cv-read span { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.cv-read b { font: 800 clamp(20px, 2.3vw, 28px)/1.15 var(--display); letter-spacing: -.02em; color: var(--official); text-shadow: 0 0 26px color-mix(in srgb, var(--official) 55%, transparent); }

/* ---------------------------------------------------------------- 4. steps */
.st-rail { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.st-rail::before { content: ""; position: absolute; left: 7.14%; right: 7.14%; top: 23px; height: 2px; background: var(--line); }
.st-rail i { position: absolute; left: 7.14%; top: 23px; height: 2px; width: 85.72%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--out); }
.st-b { position: relative; display: grid; justify-items: center; min-height: 48px; }
.st-b b { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 2px solid var(--line); font: 500 17px var(--mono); color: var(--fg-3); transition: all .3s var(--out); }
.st-b.is-done b { border-color: var(--ink); color: var(--ink); }
.st-b.is-on b { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.14); box-shadow: 0 10px 24px -8px rgba(16, 16, 24, .6); }
.st-title { margin: 34px auto 0; max-width: 820px; font: 800 clamp(22px, 2.7vw, 34px)/1.12 var(--display); letter-spacing: -.03em; min-height: 2.24em; display: grid; place-items: center; text-wrap: balance; }
.st-say { margin: 10px auto 26px; max-width: 720px; font-size: 17px; color: var(--fg-2); min-height: 3em; text-wrap: balance; }
.st-trail { min-height: 140px; display: grid; align-items: center; }
.st-q { margin: 26px auto 18px; font: 500 12px var(--mono); letter-spacing: .04em; color: var(--fg-3); }
.st-q b { color: var(--fg); font-weight: 500; }
.st-chat { max-width: 820px; margin: 34px auto 0; }
.st-nav { display: flex; justify-content: center; gap: 10px; margin-top: 26px; position: relative; }
.st-nav .btn { min-height: 46px; }

/* ---------------------------------------------------------------- 5. effort dial */
.ef { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: center; }
.ef-side { display: grid; gap: 26px; justify-items: center; }
.dial { position: relative; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #24243A, #0D0D16 70%); border: 1px solid var(--line); box-shadow: 0 0 0 10px rgba(255, 255, 255, .03), 0 30px 60px -20px #000, 0 0 90px -20px rgba(124, 92, 255, .7); touch-action: none; cursor: grab; }
.dial-knob { position: absolute; inset: 34px; border-radius: 50%; background: conic-gradient(from 210deg, #2B2B44, #15151F, #2B2B44); box-shadow: 0 2px 0 rgba(255, 255, 255, .12) inset, 0 16px 30px -10px #000; transition: transform .5s var(--spring); }
.dial-knob::after { content: ""; position: absolute; left: 50%; top: 12px; width: 6px; height: 34px; margin-left: -3px; border-radius: 3px; background: var(--official); box-shadow: 0 0 16px var(--official); }
.dial-t { position: absolute; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); min-width: 44px; min-height: 44px; display: grid; place-items: center; transition: color .3s; }
.dial-t.is-on { color: var(--official); text-shadow: 0 0 14px var(--official); }
.dial-t[data-k="low"] { left: -42px; bottom: 30px; }
.dial-t[data-k="medium"] { left: 50%; top: -40px; transform: translateX(-50%); }
.dial-t[data-k="high"] { right: -42px; bottom: 30px; }
.meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.meter div { display: grid; gap: 2px; padding: 12px 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); min-height: 86px; align-content: center; }
.meter b { font: 800 30px/1 var(--display); color: var(--fg); }
.meter span { font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); }

/* ---------------------------------------------------------------- 6. never published: flip cards */
.np { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.np-cards { display: grid; gap: 16px; position: relative; }
.flip { position: relative; height: 128px; perspective: 900px; text-align: left; width: 100%; }
.flip-in { position: absolute; inset: 0; transition: transform .6s var(--out); transform-style: preserve-3d; }
.flip.is-on .flip-in { transform: rotateX(180deg); }
.flip-f, .flip-b { position: absolute; inset: 0; display: grid; align-content: center; gap: 4px; padding: 16px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-b { transform: rotateX(180deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.flip-k { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.flip-b .flip-k { color: #FF7EC1; }
.flip-v { font: 600 16px/1.3 var(--text); overflow-wrap: anywhere; }
.flip-s { font: 400 12px var(--mono); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flip-b .flip-s { color: rgba(255, 255, 255, .6); white-space: normal; }

/* ---------------------------------------------------------------- 7. no single source, 9. skip, 10. purpose, 11. backup */
.one { max-width: 860px; margin-inline: auto; display: grid; gap: 22px; justify-items: center; }
.one > .chat { width: 100%; }
.hold { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; min-width: 260px; }
.hold i { position: absolute; inset: 0; background: color-mix(in srgb, var(--official) 30%, transparent); transform: scaleX(0); transform-origin: left; transition: transform .5s linear; }
.hold.is-down i { transform: scaleX(1); }
.hold span { position: relative; }
.ctl { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pill { min-height: 46px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); font: 600 15px var(--text); color: var(--fg-2); transition: all .25s var(--out); }
.pill.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.gauge { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gauge .chip { font-size: 13px; padding: 7px 14px; }
.gauge .chip b { color: var(--secondhand); }
.prompt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 22px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; position: relative; }
.prompt p { flex: 1; min-width: 0; font: 500 clamp(13.5px, 1.5vw, 16.5px)/1.4 var(--mono); }
.prompt .btn { min-height: 46px; flex: none; }
.caret::after { content: ""; display: inline-block; width: 8px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--fg); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bk-line { position: relative; width: 100%; padding: 26px 28px; border-radius: 20px; text-align: left; background: linear-gradient(140deg, rgba(92, 255, 157, .1), rgba(124, 92, 255, .14)); border: 1px solid color-mix(in srgb, var(--official) 40%, transparent); box-shadow: 0 0 70px -22px var(--official), var(--shadow); display: grid; gap: 16px; }
.bk-line p { font: 500 clamp(15px, 1.6vw, 18.5px)/1.55 var(--mono); }
.bk-line .btn { justify-self: start; min-height: 46px; }

/* ---------------------------------------------------------------- 8. checks */
.ck { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ck-list { display: grid; gap: 12px; position: relative; }
.ck-b { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; min-height: 104px; align-content: center; transition: border-color .3s, transform .3s var(--out); }
.ck-box { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--fg-3); display: grid; place-items: center; transition: all .3s var(--spring); }
.ck-box svg { width: 16px; height: 16px; opacity: 0; transform: scale(.3); transition: all .3s var(--spring); }
.ck-b.is-done .ck-box { background: var(--ink); border-color: var(--ink); }
.ck-b.is-done .ck-box svg { opacity: 1; transform: none; }
.ck-b.is-on { border-color: var(--ink); transform: translateX(6px); }
.ck-q { font: 600 15.5px/1.35 var(--text); }
.ck-r { grid-column: 2; font-size: 13.5px; color: var(--fg-2); min-height: 2.7em; }

.hl { border-radius: .3em; transition: background .4s, box-shadow .4s; }
.hl.is-on { background: color-mix(in srgb, var(--secondhand) 42%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondhand) 42%, #fff); }

/* ---------------------------------------------------------------- 12. the skill file */
.sk { max-width: 900px; margin-inline: auto; display: grid; gap: 22px; justify-items: center; }
.sk-file { width: 100%; border-radius: 18px; background: #14141F; border: 1px solid var(--line); color: #E9E9F2; box-shadow: var(--shadow), 0 0 90px -30px rgba(124, 92, 255, .8); overflow: hidden; text-align: left; }
.sk-bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; font: 500 12px var(--mono); color: rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sk-bar b { color: #5CFF9D; font-weight: 500; }
.sk-file pre { height: 440px; overflow: auto; padding: 18px 20px 30px; font: 400 12.5px/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.sk-file pre span { transition: opacity .45s, color .45s; }
.sk-file .sk-desc { color: #5CFF9D; }
[data-view="desc"] .sk-rest { opacity: .2; }
[data-view="full"] .sk-desc { color: inherit; }

/* ---------------------------------------------------------------- install, footer */
.tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); }
.tab { min-height: 44px; padding: 0 20px; border-radius: 99px; font: 600 15px var(--text); color: var(--fg-2); transition: all .25s; }
.tab.is-on { background: var(--fg); color: var(--bg); }
.panel { max-width: 860px; margin: 26px auto 0; padding: clamp(20px, 3vw, 36px); border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 22px; justify-items: center; }
.inst-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
.inst-steps li { display: grid; gap: 10px; justify-items: center; align-content: start; text-align: center; }
.inst-steps b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 500 17px var(--mono); }
.inst-steps h3 { font: 800 19px/1.2 var(--display); letter-spacing: -.02em; }
.inst-steps p, .inst-p { font-size: 15px; color: var(--fg-2); text-wrap: balance; }
.term { width: 100%; border-radius: 14px; background: #0B0B12; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.term-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 8px 6px 16px; font: 500 12px var(--mono); color: rgba(255, 255, 255, .6); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.copy { min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .2); font: 600 13px var(--text); color: #fff; }
.term pre { padding: 14px 16px; font: 400 13px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: #D8FFE7; }
.foot { background: #05050A; color: var(--fg-2); border-top: 1px solid var(--line); padding: 30px 0 40px; font-size: 14px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--fg); }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1060px) {
  .h-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: 44px; }
  .cv { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
  .key { min-height: 104px; padding: 11px 12px; }
  .ck, .np { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .ef { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-link span, .nav-dl .lg { display: none; }
  .nav-dl .sm { display: inline; }
  .hero { padding-top: 104px; }
  h1 { font-size: clamp(30px, 9.4vw, 44px); }
  .h-stage, .cv, .ef, .np, .ck { grid-template-columns: minmax(0, 1fr); }
  .h-srcs { padding-top: 0; }
  .tether, .hint { display: none; }
  .src.is-on { transform: none; }
  .chat-q { padding: 16px; }
  .chat-a { padding: 16px 16px 6px; font-size: 15px; }
  .chat--fix .chat-a { height: 400px; }
  .chat-m { padding: 10px 16px 16px; }
  .lb-row { gap: 6px; }
  .pen-body { height: 50px; font-size: 12px; border-radius: 9px 9px 5px 5px; }
  .cv-keys { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .key { min-height: 92px; padding: 9px; border-radius: 11px; }
  .key-t { font-size: 12px; }
  .trail { flex-direction: column; align-items: center; gap: 0; }
  .tn { width: 100%; max-width: 420px; min-height: 58px; }
  .tn + .tn { margin: 22px 0 0; }
  .tn + .tn::before { right: 50%; top: -22px; width: 2px; height: 20px; margin: 0 -1px 0 0; background: var(--fg-3); }
  .tn + .tn::after { right: 50%; top: -9px; margin: 0 -4px 0 0; transform: rotate(135deg); }
  .st-b b { width: 38px; height: 38px; font-size: 14px; }
  .st-rail::before, .st-rail i { top: 18px; }
  .dial { width: 200px; height: 200px; }
  .dial-t[data-k="low"] { left: -30px; }
  .dial-t[data-k="high"] { right: -30px; }
  .ef-side { padding-top: 34px; }
  .inst-steps { grid-template-columns: 1fr; }
  .prompt { border-radius: 22px; flex-direction: column; align-items: stretch; padding: 16px; }
  .ck-b.is-on { transform: none; }
  .sk-file pre { height: 380px; font-size: 11.5px; }
  .foot-in { justify-content: center; text-align: center; }
}
@media (max-width: 360px) {
  .pen-body { font-size: 10.5px; }
  .key-t { font-size: 11px; }
  .tab { padding: 0 13px; font-size: 14px; }
}

/* ================================================================ second pass: lighter top, more light on the page */

/* the key words of each headline are inked: a marker stroke in daylight, a glow under the blacklight */
.ink { --c: var(--official); position: relative; z-index: 0; padding: 0 .12em; margin: 0 -.12em; white-space: nowrap; }
[data-ink="1"] .ink { --c: var(--secondhand); }
[data-ink="2"] .ink { --c: var(--unchecked); }
[data-ink="3"] .ink { --c: var(--calculated); }
.hero .ink { --c: var(--accent); }
.ink::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; transform-origin: left; transform: scaleX(0); transition: transform .9s var(--out) .35s, background .5s; }
.sec--light .ink::before { top: 18%; bottom: 6%; border-radius: .22em .1em .2em .08em; background: linear-gradient(100deg, color-mix(in srgb, var(--c) 62%, #fff), color-mix(in srgb, var(--c) 44%, #fff)); }
.sec--dark .ink { color: var(--c); text-shadow: 0 0 34px color-mix(in srgb, var(--c) 60%, transparent); transition: color .5s, text-shadow .5s; }
.sec--dark .ink::before { bottom: -.02em; height: .09em; border-radius: 99px; background: var(--c); box-shadow: 0 0 22px 2px var(--c); }
.is-shown .ink::before, .static .ink::before, html:not(.is-booted) .ink::before { transform: none; }
@media (max-width: 760px) { .ink { white-space: normal; } .ink::before { display: none; } .sec--light .ink { background: linear-gradient(100deg, color-mix(in srgb, var(--c) 62%, #fff), color-mix(in srgb, var(--c) 44%, #fff)); border-radius: .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } }

/* hero: one real fact at a time, a beam down to the page it came from */
.fx { position: relative; max-width: 980px; margin-inline: auto; --c: var(--official); }
.fx[data-l="calculated"] { --c: var(--calculated); }
.fx[data-l="secondhand"] { --c: var(--secondhand); }
.fx[data-l="unchecked"] { --c: var(--unchecked); }
.aur { position: absolute; inset: -12% -6%; pointer-events: none; }
.aur i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.aur i:nth-child(1) { left: 0; top: 4%; background: var(--c); opacity: .3; animation: drift 17s ease-in-out infinite alternate; transition: background 1s; }
.aur i:nth-child(2) { right: 0; top: 0; background: #7C5CFF; animation: drift 21s ease-in-out infinite alternate-reverse; }
.aur i:nth-child(3) { left: 28%; bottom: -10%; width: 40%; background: #FF7EC1; opacity: .2; animation: drift 25s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(8%, 6%, 0) scale(1.14); } }
.fx-in { position: relative; display: grid; justify-items: center; padding: clamp(26px, 4vw, 52px) clamp(18px, 4vw, 56px) clamp(22px, 3vw, 36px); border-radius: 30px; background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 50px 120px -40px #000; }
.fx-in::before, .sec--dark .chat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(150deg, rgba(160, 140, 255, .8), rgba(255, 255, 255, .07) 34%, rgba(255, 255, 255, .05) 62%, color-mix(in srgb, var(--c, var(--accent)) 75%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.sec--dark .chat { position: relative; border-color: transparent; }
.fx-q { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 16px; border-radius: 99px; background: rgba(255, 255, 255, .08); font: 500 clamp(13px, 1.3vw, 15px)/1.4 var(--mono); color: var(--fg-2); }
.fx-a { display: grid; place-items: center; min-height: 4.3em; margin-top: 20px; font: 600 clamp(22px, 3.3vw, 44px)/1.16 var(--display); letter-spacing: -.028em; text-wrap: balance; max-width: 20em; }
.fx-a strong { font-weight: 800; }
.fx-a .lb { font-size: .62em; vertical-align: .2em; letter-spacing: 0; font-family: var(--mono); font-weight: 500; text-transform: uppercase; padding: .2em .6em; border-radius: 99px; white-space: nowrap; }
.fx-beam { width: 2px; height: clamp(34px, 5vw, 58px); margin-top: 14px; background: repeating-linear-gradient(180deg, var(--c) 0 6px, transparent 6px 13px); background-size: 2px 26px; filter: drop-shadow(0 0 6px var(--c)); animation: beam .9s linear infinite; }
@keyframes beam { to { background-position: 0 26px; } }
.fx-src > * { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 99px; border: 1px solid var(--c); box-shadow: 0 0 40px -8px var(--c), 0 0 0 5px color-mix(in srgb, var(--c) 10%, transparent); background: rgba(9, 9, 14, .6); text-decoration: none; font: 500 13px var(--mono); color: var(--fg-2); }
.fx-src b { font: 700 16px var(--text); color: var(--fg); }
.fx-src .dot { --c: inherit; }
.fx-none { border-style: dashed !important; }
.fx-dots { position: relative; display: flex; justify-content: center; margin-top: 10px; }
.fx-dot { width: 44px; height: 44px; display: grid; place-items: center; }
.fx-dot i { width: 8px; height: 8px; border-radius: 99px; background: var(--fg-3); transition: width .4s var(--out), background .4s; }
.fx-dot.is-on i { width: 30px; background: var(--c); box-shadow: 0 0 12px var(--c); }

/* the blacklight follows the pointer and shows the grid under the dark */
.torch { position: absolute; left: 0; top: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .6s; transform: translate3d(var(--x, 50vw), var(--y, 300px), 0);
  background: radial-gradient(circle, rgba(124, 92, 255, .2), transparent 64%), radial-gradient(rgba(196, 180, 255, .55) 1px, transparent 1.6px) calc(-1 * var(--x, 0px)) calc(-1 * var(--y, 0px)) / 24px 24px;
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 66%); mask-image: radial-gradient(circle, #000 12%, transparent 66%); }
.sec--dark:hover .torch { opacity: 1; }

/* daylight sections get soft pools of ink at the edges */
.sec--light::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(30% 34% at 2% 30%, color-mix(in srgb, var(--secondhand) 22%, transparent), transparent 70%), radial-gradient(28% 32% at 99% 64%, color-mix(in srgb, var(--calculated) 20%, transparent), transparent 70%), radial-gradient(22% 22% at 80% 4%, color-mix(in srgb, var(--unchecked) 14%, transparent), transparent 70%); }

/* answers start folded: the bottom line first, the rest on request */
.chat--fold .chat-a { max-height: 176px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }
.more { min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card-2); font: 600 13px var(--text); color: var(--fg); }
.chat-m { align-items: center; }
/* in the label demo a folded answer shows only the facts that carry the picked label */
.lb-stage .chat--fold .chat-a { max-height: none; -webkit-mask-image: none; mask-image: none; }
.lb-stage[data-pick] .chat--fold .chat-a .f { opacity: 1; }
.lb-stage[data-pick="official"] .chat--fold .f:not([data-l~="official"]), .lb-stage[data-pick="calculated"] .chat--fold .f:not([data-l~="calculated"]),
.lb-stage[data-pick="secondhand"] .chat--fold .f:not([data-l~="secondhand"]), .lb-stage[data-pick="unchecked"] .chat--fold .f:not([data-l~="unchecked"]),
.lb-stage .chat--fold :is(.srcs, .srcs-h, .tbl), .lb-stage .chat--fold li.f::before { display: none; }
.lb-stage .chat--fold li.f { padding-left: 0; }

/* pieces that changed sides */
.sec--dark .ck-b.is-done .ck-box { background: var(--fg); border-color: var(--fg); }
.sec--dark .flip-b { background: #1E1E2E; border-color: var(--unchecked); }
.sec--dark .hl.is-on { background: color-mix(in srgb, var(--secondhand) 26%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondhand) 26%, transparent); }
.sec--light .tether path.is-on { filter: none; }
.sec--light .src.is-on { box-shadow: 0 0 0 1px var(--c, var(--official)), 0 18px 40px -14px var(--c, var(--official)), var(--shadow); }
.sec--light .chat-a .f.is-on { background: color-mix(in srgb, var(--c, var(--official)) 16%, transparent); }
.sec--light .bk-line { background: #fff; }
.sec--light.install .panel { background: #fff; }
@media (max-width: 760px) { .fx-in { border-radius: 22px; } .fx-a { min-height: 6.2em; } .aur i { filter: blur(50px); } }

/* third pass */
.cv-stack { display: grid; gap: 26px; }
.cv-stack .trail { justify-content: flex-start; }
.pull { margin: 6px auto 4px; max-width: 24em; font: 600 clamp(20px, 2.5vw, 32px)/1.26 var(--display); letter-spacing: -.022em; text-wrap: balance; position: relative; padding-top: 34px; }
.pull::before { content: ""; position: absolute; left: 50%; top: 0; width: 64px; height: 4px; margin-left: -32px; border-radius: 99px; background: var(--unchecked); box-shadow: 0 0 22px var(--unchecked); }
.pull a { color: inherit; text-decoration-color: var(--fg-3); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.more { position: relative; }
@media (max-width: 760px) { .cv-stack .trail { align-items: stretch; } }
@media (max-width: 760px) { .more, .copy { min-height: 44px; } }

.ck-b.is-no .ck-box { background: var(--unchecked); border-color: var(--unchecked); }

.chat-m:empty { display: none; }
.chat-m:empty ~ * { margin: 0; }
.chat:has(.chat-m:empty) .chat-a { padding-bottom: 20px; }

/* fourth pass: text cut */
.st-title { min-height: 2.24em; margin-bottom: 26px; }
.inst-steps li .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* fifth pass: nothing jumps or flickers when a control is used */
@media (min-width: 761px) {
  /* the gap, not a margin, spaces the nodes: hiding a row's first arrow can no longer change the wrap */
  .trail { gap: 12px 30px; }
  .tn + .tn, .tn.tn--row { margin-left: 0; }
  .st-trail { display: grid; align-items: center; }
  .st-t { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s var(--out), visibility 0s .35s; }
  .st-t.is-on { visibility: visible; opacity: 1; transition: opacity .35s var(--out); }
}
@media (max-width: 760px) { .st-t:not(.is-on) { display: none; } .st-title { min-height: 4.6em; } }
.st-title { min-height: 3.4em; margin-bottom: 0; }
.st-nav { margin: 30px 0 34px; }
.st-chat { margin-top: 30px; }
.chat--fold .chat-a { height: 176px; max-height: none; }
.lb-stage .chat--fold .chat-a { height: auto; }
.lb-stage { min-height: 330px; }
.fx-a { min-height: 5.9em; }
@media (max-width: 760px) { .fx-a { min-height: 8.2em; } }

.fx-q { min-height: 58px; text-align: center; justify-content: center; border-radius: 18px; }
@media (max-width: 760px) { .fx-q { min-height: 72px; } .fx-a { min-height: 9.6em; } }
.flip-b .flip-s { font: 500 14.5px/1.4 var(--text); color: #fff; white-space: normal; }
.flip-b { gap: 8px; }

/* the backup-line section is gone; install is dark again */
.sec--dark .inst-steps b { background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }

/* sixth pass: text alignment. Content sits in the middle of its box; parts in a row share a line. */
.ck-b { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 14px; align-items: center; align-content: center; min-height: 118px; }
.ck-box { grid-row: 1 / span 2; align-self: center; }
.ck-q { grid-column: 2; }
.ck-r { grid-column: 2; min-height: 0; }
.ck-r:empty { display: none; }
.key { align-content: center; gap: 6px; }
.cv-stack .trail { justify-content: center; }
.inst-steps li > div { display: grid; grid-template-rows: 44px auto; gap: 8px; justify-items: center; align-items: center; }
.inst-steps li > div > p { align-self: start; }

.h-stage .chat-a li.f[data-s]:not([data-s=""]), .h-stage .chat-a li.f { padding-left: 28px; }
.h-stage .chat-a li.f::before { left: 12px; top: calc(6px + .68em); }
@media (max-width: 760px) {
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .tab { padding: 0 6px; font-size: 13.5px; }
}
@media (max-width: 760px) { .one > .trail { width: 100%; } }

/* the hero says what the product is and how it helps */
h1 { font-size: clamp(30px, 4.1vw, 54px); }
@media (min-width: 761px) { h1 { white-space: nowrap; } }
@media (max-width: 760px) { h1 { font-size: clamp(28px, 8.4vw, 40px); } }
.hero .sub { margin-top: 18px; }
.hero .cta { margin-top: 26px; }