/* Paperworkspace landing — one system (taste-skill guidance): one wrap, one radius scale, one button pair,
   one card recipe, sections one screen each. Palette from the pws website mock (deep teal #0D3D3B,
   turquoise #1FD6CD, paper ivory #FFF9F3, acid citron #D9FF43). Fonts: Geist, Instrument Serif for display,
   JetBrains Mono for citekeys (all OFL, vendored). */
@font-face { font-family: "Geist"; src: url('fonts/geist-400.woff2') format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url('fonts/geist-500.woff2') format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url('fonts/instrument-serif.woff2') format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url('fonts/instrument-serif-italic.woff2') format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url('fonts/jetbrains-mono-400.woff2') format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #FFF9F3; --alt: #F5EEE4; --surface: #FFFDF9; --surface-2: #FAF4EB;
  --ink: #10211F; --ink-2: #2E403D; --muted: #5A6A66; --line: rgba(16, 33, 31, .13); --line-2: rgba(16, 33, 31, .22);
  --teal: #0D3D3B; --turq: #1FD6CD; --citron: #D9FF43; --hl: #BFF3EE;
  --action: #0D3D3B; --on-action: #FFF9F3; --action-hover: #165552;
  --side: #0D3D3B; --side-ink: #E7F3F1; --side-muted: #9CC3BE; --side-on: rgba(255, 249, 243, .12);
  --ok-bg: #DDF4E7; --ok: #1E6B45; --miss-bg: #FBE3DE; --miss: #A33A26; --unused-bg: #E3EEF7; --unused: #2D5C85;
  --ins: #CFF5E2; --del: #FADAD3;
  --shadow: 0 1px 2px rgba(16, 33, 31, .06), 0 24px 48px -24px rgba(16, 33, 31, .22);
  --nav: 72px; --gut: 80px; --padt: 120px; --padb: 72px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px;
  --f-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --f-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1918; --alt: #0F2120; --surface: #122826; --surface-2: #163130;
    --ink: #F3EEE6; --ink-2: #D9D4CB; --muted: #A1B4B0; --line: rgba(243, 238, 230, .13); --line-2: rgba(243, 238, 230, .24);
    --hl: rgba(31, 214, 205, .32);
    --action: #1FD6CD; --on-action: #06201F; --action-hover: #5BE3DC;
    --side: #071312; --side-ink: #E7F3F1; --side-muted: #8FB1AC; --side-on: rgba(31, 214, 205, .14);
    --ok-bg: rgba(84, 196, 140, .18); --ok: #8EE0B6; --miss-bg: rgba(232, 112, 88, .2); --miss: #FFB4A3; --unused-bg: rgba(120, 170, 220, .2); --unused: #B5D3F2;
    --ins: rgba(84, 196, 140, .28); --del: rgba(232, 112, 88, .28);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 48px -24px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1918; --alt: #0F2120; --surface: #122826; --surface-2: #163130;
  --ink: #F3EEE6; --ink-2: #D9D4CB; --muted: #A1B4B0; --line: rgba(243, 238, 230, .13); --line-2: rgba(243, 238, 230, .24);
  --hl: rgba(31, 214, 205, .32);
  --action: #1FD6CD; --on-action: #06201F; --action-hover: #5BE3DC;
  --side: #071312; --side-ink: #E7F3F1; --side-muted: #8FB1AC; --side-on: rgba(31, 214, 205, .14);
  --ok-bg: rgba(84, 196, 140, .18); --ok: #8EE0B6; --miss-bg: rgba(232, 112, 88, .2); --miss: #FFB4A3; --unused-bg: rgba(120, 170, 220, .2); --unused: #B5D3F2;
  --ins: rgba(84, 196, 140, .28); --del: rgba(232, 112, 88, .28);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 48px -24px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
@media (max-width: 1023px) { :root { --gut: 48px; } }
@media (max-width: 639px) { :root { --nav: 56px; --gut: 24px; --padt: 96px; --padb: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: 0; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; transition: background-color .2s var(--ease), color .2s var(--ease); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.wrap { width: min(100% - 2 * var(--gut), 1280px); margin-inline: auto; }
.mono { font-family: var(--f-mono); }
.skip { position: absolute; left: 8px; top: 8px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); z-index: 20; }
.skip:focus { width: auto; height: auto; clip-path: none; padding: 8px 12px; background: var(--surface); border-radius: var(--r-sm); }
:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; }

/* ---------- logo: the 02 Editorial Stack, one swappable file each, drawn in the theme ink */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.logo__mark, .logo__word, .stack__line, .close__mark { display: block; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.logo__mark { width: 40px; height: 34px; -webkit-mask-image: url('logo/mark-02.svg'); mask-image: url('logo/mark-02.svg'); -webkit-mask-size: contain; mask-size: contain; }
.logo__word { width: 156px; height: 23px; -webkit-mask-image: url('logo/wordmark-02.svg'); mask-image: url('logo/wordmark-02.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: left center; mask-position: left center; }

/* ---------- nav: one fixed opaque bar */
.nav { position: fixed; inset: 0 0 auto; height: var(--nav); z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); transition: background-color .2s var(--ease); }
.nav__bar { height: 100%; display: flex; align-items: center; gap: 32px; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a, .nav__signin, .foot__links a, .foot__legal a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink-2); background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .14s var(--ease), color .14s var(--ease); white-space: nowrap; }
.nav__links a:hover, .nav__signin:hover, .foot__links a:hover, .foot__legal a:hover { color: var(--ink); background-size: 100% 1px; }
.nav__actions { display: flex; align-items: center; gap: 16px; }
.theme { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .14s var(--ease), border-color .14s var(--ease); }
.theme:hover { background: var(--surface-2); border-color: var(--ink-2); }
.theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme__moon { display: none; } .theme__moon path { fill: currentColor; stroke: none; }
:root[data-theme="dark"] .theme__sun { display: none; } :root[data-theme="dark"] .theme__moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme__sun { display: none; } :root:not([data-theme]) .theme__moon { display: block; } }

/* ---------- buttons: one pair */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 24px; border-radius: 999px; font: 500 16px/1 var(--f-sans); text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: transform .14s var(--ease), background-color .14s var(--ease), border-color .14s var(--ease); }
.btn--primary { background: var(--action); color: var(--on-action); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn .arrow { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .14s var(--ease); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--primary:hover { background: var(--action-hover); }
  .btn--secondary:hover { border-color: var(--ink-2); background: var(--surface-2); }
  .btn:hover .arrow { transform: translateX(3px); }
}
.btn:active { transform: translateY(1px) scale(.985); transition-duration: .09s; }
.btn--xl { height: 56px; padding: 0 32px; font-size: 18px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- sections: one screen each */
.hero, .section, .closing { min-height: calc(var(--h, 1) * 100svh); padding: var(--padt) 0 var(--padb); position: relative; }
.section--alt { background: var(--alt); }
.head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 12px; margin-bottom: 40px; }
.head h2 { grid-column: 1 / span 7; }
.head p { grid-column: 1 / span 6; color: var(--muted); font-size: 18px; line-height: 1.55; }
h2 { font: 400 clamp(36px, 1.9vw + 22px, 56px)/1.04 var(--f-serif); letter-spacing: -.012em; }
h3 { font: 500 20px/1.3 var(--f-sans); letter-spacing: -.005em; }

/* ---------- hero */
.hero { padding-top: calc(var(--nav) + 64px); padding-bottom: 64px; display: flex; align-items: stretch; }
.hero > .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.hero__copy { grid-column: 1 / span 7; position: relative; z-index: 1; }
.eyebrow { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 20px; }
.hero h1 { font: 400 clamp(52px, 5.6vw + 20px, 116px)/.92 var(--f-serif); letter-spacing: -.025em; }
.hl { color: inherit; background: linear-gradient(var(--hl), var(--hl)) 0 88% / 100% 72% no-repeat; padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { margin-top: 28px; font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.hero .btn-row { margin-top: 32px; }
.note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.verbs { margin-top: 36px; display: flex; gap: 14px; font-size: 13px; font-weight: 500; color: var(--muted); }
.verbs span + span::before { content: "|"; margin-right: 14px; color: var(--line-2); }
.hero__art { grid-column: 8 / span 5; position: relative; align-self: center; aspect-ratio: 1 / 1.02; }
.stack { position: absolute; inset: 10% 24% 10% 4%; color: var(--teal); }
:root[data-theme="dark"] .stack { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stack { color: var(--ink); } }
.stack__line { position: absolute; inset: 0; -webkit-mask-image: url('logo/mark-02.svg'); mask-image: url('logo/mark-02.svg'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  clip-path: inset(calc(var(--i) * 33.4%) 0 calc((2 - var(--i)) * 33.3%) 0); }
.stack__line[style*="--i:2"] { clip-path: inset(66.8% 0 -2% 0); }
.rule { position: absolute; background: var(--line-2); }
.rule--v { width: 1px; top: -6%; bottom: -6%; } .rule--l { left: -5%; } .rule--r { right: -5%; }
.rule--h { height: 1px; left: -9%; right: -9%; } .rule--t { top: -3%; } .rule--b { bottom: -3%; }
.margin { position: absolute; width: 8.5em; font: italic 400 17px/1.25 var(--f-serif); color: var(--muted); }
.margin b { display: block; font-style: normal; font-weight: 400; margin-bottom: 4px; color: var(--ink-2); }
.margin--1 { left: -22%; top: 2%; } .margin--2 { right: 0; top: 38%; width: 6.5em; } .margin--3 { left: -22%; bottom: 6%; }

/* hero load-once motion (JS adds .is-in; without JS or under reduced motion everything is at rest) */
.js .hero:not(.is-in) .stack__line { transform: translateY(18px); opacity: 0; }
.js .hero:not(.is-in) .rule--v { transform: scaleY(0); } .js .hero:not(.is-in) .rule--h { transform: scaleX(0); }
.js .hero:not(.is-in) .margin { opacity: 0; transform: translateY(6px); }
.js .hero:not(.is-in) .hl { background-size: 0% 72%; }
.stack__line { transition: transform .7s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 140ms + 80ms), opacity .5s var(--ease) calc(var(--i) * 140ms + 80ms); }
.rule { transition: transform .9s cubic-bezier(.65, 0, .35, 1) .1s; transform-origin: top left; }
.margin { transition: opacity .5s var(--ease) .7s, transform .5s var(--ease) .7s; }
.margin--2 { transition-delay: .82s; } .margin--3 { transition-delay: .94s; }
.hl { transition: background-size .7s cubic-bezier(.65, 0, .35, 1) .35s; }

/* ---------- the app window */
.app { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; height: clamp(440px, calc(100svh - var(--padt) - var(--padb) - 170px), 560px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; line-height: 1.5; grid-template-rows: minmax(0, 1fr); }
.app > * { min-height: 0; }
.app__side { background: var(--side); color: var(--side-ink); padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.app__ws { display: flex; gap: 10px; align-items: center; padding: 6px 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 8px; }
.app__ws b { display: block; font-weight: 500; font-size: 14px; } .app__ws small { color: var(--side-muted); font-size: 13px; }
.app__tile { width: 32px; height: 32px; border-radius: 8px; background: var(--turq); color: #06201F; display: grid; place-items: center; font: 500 13px var(--f-mono); }
.app__nav, .app__papers { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app__nav li, .app__papers li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: var(--side-ink); }
.app__nav li.is-on, .app__papers li.is-on { background: var(--side-on); }
.app__nav em { margin-left: auto; font-style: normal; font-size: 13px; padding: 0 7px; border-radius: 99px; background: rgba(255, 180, 163, .22); color: #FFC9BD; }
.app__label { margin: 14px 8px 4px; font-size: 13px; color: var(--side-muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ico { width: 15px; height: 15px; flex: none; border: 1.5px solid currentColor; border-radius: 4px; opacity: .8; }
.ico--home { border-radius: 3px 3px 4px 4px; } .ico--research { border-radius: 50%; } .ico--quote { border-radius: 50% 50% 2px 50%; }
.ico--send { transform: rotate(45deg) scale(.8); } .ico--wrench { width: 12px; height: 12px; border-radius: 50%; }
.app__main { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.app__top { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.crumb { color: var(--muted); } .crumb i { font-style: normal; margin: 0 4px; opacity: .6; } .crumb b { color: var(--ink); font-weight: 500; }
.pill { padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 13px; }
.pill--mono { font-family: var(--f-mono); }
.sp { flex: 1; }
.search { display: flex; gap: 18px; align-items: center; padding: 4px 8px 4px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.search kbd { font: 13px var(--f-mono); padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; }
.faces { display: flex; } .faces i, .talk__msg i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #10211F; display: grid; place-items: center; font: normal 500 13px/1 var(--f-sans); border: 2px solid var(--surface); }
.faces i + i { margin-left: -7px; }
.reader { padding: 28px 40px; overflow: hidden; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.reader__title { font: 400 34px/1.05 var(--f-serif); color: var(--ink); letter-spacing: -.01em; }
.reader__by { color: var(--muted); margin-top: 8px; font-size: 14px; }
.reader__h { font: 400 22px/1.2 var(--f-serif); color: var(--ink); margin: 20px 0 6px; }
.ck { font: 13px var(--f-mono); padding: 1px 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--unused) 40%, transparent); background: var(--unused-bg); color: var(--unused); white-space: nowrap; }
.ck--miss { border-color: color-mix(in srgb, var(--miss) 45%, transparent); background: var(--miss-bg); color: var(--miss); }
.mk { background: var(--hl); border-radius: 3px; padding: 0 2px; color: var(--ink); }
.app__ask { display: flex; flex-direction: column; background: var(--surface-2); min-width: 0; }
.ask__head { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ask__head b { display: block; font-weight: 500; font-size: 14px; color: var(--ink); } .ask__head small { color: var(--muted); font-size: 13px; }
.ask__spark { width: 18px; height: 18px; margin-top: 2px; flex: none; background: var(--turq); -webkit-mask: radial-gradient(circle at 50% 50%, #000 26%, transparent 27%), conic-gradient(from 45deg, #000 0 8%, transparent 8% 25%, #000 25% 33%, transparent 33% 50%, #000 50% 58%, transparent 58% 75%, #000 75% 83%, transparent 83%); mask: radial-gradient(circle at 50% 50%, #000 26%, transparent 27%), conic-gradient(from 45deg, #000 0 8%, transparent 8% 25%, #000 25% 33%, transparent 33% 50%, #000 50% 58%, transparent 58% 75%, #000 75% 83%, transparent 83%); }
.ask__body { flex: 1; min-height: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.bubble { align-self: flex-end; background: var(--teal); color: #FFF9F3; padding: 7px 12px; border-radius: 14px 14px 4px 14px; font-size: 13px; }
:root[data-theme="dark"] .bubble { background: #1E5552; }
.tool { align-self: flex-start; display: flex; gap: 6px; align-items: center; padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 99px; color: var(--muted); font-size: 13px; }
.ok { color: var(--ok); }
.proposal { border: 1px solid color-mix(in srgb, var(--turq) 55%, var(--line-2)); border-radius: 12px; background: var(--surface); padding: 10px 14px; display: grid; gap: 3px; }
.proposal__kind { font-size: 13px; font-weight: 500; color: var(--teal); } :root[data-theme="dark"] .proposal__kind { color: var(--turq); }
.proposal__title { font-weight: 500; color: var(--ink); font-size: 14px; }
.proposal__branch { color: var(--muted); font-size: 13px; }
.proposal__delta { display: flex; gap: 10px; font-size: 13px; } .plus { color: var(--ok); } .minus { color: var(--miss); }
.proposal__diff { border-left: 2px solid var(--turq); padding: 4px 0 4px 10px; color: var(--ink-2); font-size: 13px; }
ins { background: var(--ins); text-decoration: none; border-radius: 3px; padding: 0 2px; } del { background: var(--del); border-radius: 3px; padding: 0 2px; }
.proposal__note { color: var(--muted); font-size: 13px; }
.proposal__btn { justify-self: end; margin-top: 4px; padding: 5px 14px; border-radius: 99px; background: var(--action); color: var(--on-action); font-weight: 500; font-size: 13px; }
.ask__input { margin: 0 56px 12px 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--muted); background: var(--surface); }

/* steps loop (the page's one timed loop): JS toggles .is-run and data-n; at rest everything shows */
[data-loop="steps"].is-run [data-step] { opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
[data-loop="steps"].is-run [data-step].is-shown { opacity: 1; transform: none; }

.loop-pause { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; cursor: pointer; z-index: 3; opacity: .9; }
.loop-pause::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.loop-pause svg { width: 12px; height: 12px; fill: currentColor; }
.loop-pause .i-play { display: none; } .loop-pause[aria-pressed="true"] .i-play { display: block; } .loop-pause[aria-pressed="true"] .i-pause { display: none; }

/* ---------- feature cards: one recipe */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; gap: 10px; }
.card p { color: var(--ink-2); max-width: 30em; }
.panel { position: relative; height: 330px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; margin-bottom: 14px; display: grid; place-items: center; padding: 20px;
  background-image: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--turq) 14%, transparent), transparent 60%); }
.frag { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 14px; font-size: 13px; box-shadow: var(--shadow); }
.refs__counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.refs__counts span, .ol__stats span { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 500 18px/1.1 var(--f-sans); }
.refs__counts small, .ol__stats small { display: block; font: 400 13px/1.3 var(--f-sans); color: var(--muted); }
.is-miss { background: var(--miss-bg); color: var(--miss); border-color: transparent !important; } .is-miss small { color: inherit !important; opacity: .85; }
.is-unused { background: var(--unused-bg); color: var(--unused); border-color: transparent !important; } .is-unused small { color: inherit !important; opacity: .85; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 6px; border-bottom: 1px solid var(--line); }
td { padding: 6px 6px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
tr:last-child td { border-bottom: 0; }
.refs__table td.mono { color: var(--unused); }
.chip { display: inline-block; padding: 0 8px; border-radius: 99px; font-size: 13px; background: var(--surface-2); border: 1px solid var(--line); }
.chip--ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .chip--miss { background: var(--miss-bg); color: var(--miss); border-color: transparent; } .chip--unused { background: var(--unused-bg); color: var(--unused); border-color: transparent; }
.frag--cite { position: relative; padding: 18px; min-height: 280px; }
.cite__text { font: 400 19px/1.65 var(--f-serif); color: var(--ink); }
.pop { position: absolute; left: 18px; right: 18px; bottom: 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); }
.pop__t { display: flex; gap: 8px; align-items: center; color: var(--miss); font-weight: 500; font-size: 14px; }
.warn { width: 14px; height: 13px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pop__b { color: var(--muted); margin-top: 4px; }
/* the card loop: the popover opens over the cited key, holds, and closes; 3.2 s, finished frame = open */
@keyframes pop { 0%, 12% { opacity: 0; transform: translateY(6px); } 24%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes keyflash { 0%, 12% { box-shadow: none; } 20%, 92% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--miss) 30%, transparent); } 100% { box-shadow: none; } }
[data-loop="css"] .pop { animation: pop 3.2s linear -1.2s infinite; }
[data-loop="css"] .ck--miss { animation: keyflash 3.2s linear -1.2s infinite; }
.is-paused [data-loop="css"] .pop, .is-paused [data-loop="css"] .ck--miss { animation-play-state: paused; }
.talk__head { display: flex; justify-content: space-between; align-items: center; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.badge { font-weight: 500; font-size: 13px; padding: 1px 9px; border-radius: 99px; background: var(--citron); color: #10211F; }
.talk__row { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; color: var(--ink); }
.talk__row small { display: block; color: var(--muted); font-size: 13px; }
.talk__msg { display: flex; gap: 10px; padding: 6px 0; } .talk__msg i { flex: none; border: 0; }
.talk__msg p { color: var(--ink-2); } .talk__msg b { font-weight: 500; color: var(--ink); margin-right: 4px; }

/* ---------- method split */
.split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.split__text { grid-column: 1 / span 5; }
.split__lead { margin-top: 20px; font-size: 18px; color: var(--muted); }
.steps { list-style: none; counter-reset: s; margin: 36px 0 0; padding: 0; display: grid; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; row-gap: 2px; padding: 16px 0; border-top: 1px solid var(--line); }
.steps li::before { content: "0" counter(s); grid-row: span 2; font: 13px/1.9 var(--f-mono); color: var(--muted); }
.steps b { font-weight: 500; font-size: 18px; } .steps span { color: var(--ink-2); }
.split__art { grid-column: 7 / span 6; border-radius: var(--r-lg); background: var(--alt); padding: 32px; border: 1px solid var(--line);
  background-image: radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--citron) 22%, transparent), transparent 60%); }
.ol__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.ol__table td small { display: block; color: var(--muted); font-size: 13px; }
.ol__table td b { font-weight: 500; color: var(--ink); }
.ol__table td:nth-child(n+4), .ol__table th:nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- questions */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.faq > div { padding: 24px 48px 24px 0; border-top: 1px solid var(--line); }
.faq p { margin-top: 8px; color: var(--ink-2); max-width: 34em; }

/* ---------- closing: the close and the footer, one screen */
.closing { display: flex; flex-direction: column; background: var(--teal); color: #FFF9F3; --ink: #FFF9F3; --ink-2: #E2EEEC; --muted: #A9C7C3; --line: rgba(255, 249, 243, .16); --line-2: rgba(255, 249, 243, .3); --action: #D9FF43; --on-action: #10211F; --action-hover: #E6FF7F; }
:root[data-theme="dark"] .closing { background: #071312; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .closing { background: #071312; } }
.closing > .wrap { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.close { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.close__mark { grid-column: 1 / span 5; aspect-ratio: 760 / 650; color: #FFF9F3; -webkit-mask-image: url('logo/mark-02.svg'); mask-image: url('logo/mark-02.svg'); -webkit-mask-size: contain; mask-size: contain; max-width: 440px; width: 100%; }
.close__text { grid-column: 7 / span 6; display: grid; gap: 16px; justify-items: start; }
.close__text p { color: var(--muted); font-size: 18px; }
.close__text .btn { margin-top: 12px; }
.foot { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 24px; padding-top: 32px; border-top: 1px solid var(--line); align-items: start; }
.foot__brand { grid-column: 1 / span 5; display: grid; gap: 12px; } .foot__brand p { color: var(--muted); font-size: 14px; }
.foot__links { grid-column: 7 / span 6; display: flex; gap: 28px; flex-wrap: wrap; }
.foot__legal { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; }

/* ---------- 1024 and down */
@media (max-width: 1199px) { .nav__links { display: none; } .nav__actions { margin-left: auto; } }
@media (max-width: 1279px) {
  .reader { padding: 22px 28px; font-size: 14px; } .reader__more, .talk__more, .proposal__branch { display: none; }
  .ol__table th:nth-child(3), .ol__table td:nth-child(3) { display: none; }
  .tool--extra, .margin, .proposal__delta { display: none; }
  .panel { padding: 14px; } .frag { padding: 10px; }
  .refs__table th:nth-child(2), .refs__table td:nth-child(2), .refs__counts span:last-child { display: none; } .refs__counts { grid-template-columns: repeat(3, 1fr); }
  .cite__text { font-size: 17px; } .frag--cite .pop { position: static; margin-top: 12px; } .frag--cite { min-height: 0; }
  .app { grid-template-columns: 200px minmax(0, 1fr) 300px; }
  .margin--1, .margin--3 { left: -18%; } .margin--2 { right: -6%; }
}
@media (max-width: 1023px) {
  .nav__links { display: none; } .nav__actions { margin-left: auto; }
  .hero > .wrap { grid-template-columns: 1fr; row-gap: 32px; align-content: start; }
  .hero__copy, .hero__art { grid-column: 1; }
  .hero__art { width: min(380px, 70%); justify-self: start; }
  .margin { display: none; }
  .app { grid-template-columns: minmax(0, 1fr) 300px; } .app__side { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards .card:last-child { display: none; }
  .panel { height: 420px; }
  .ol__stats { display: none; } .split__art { padding: 20px; }
  .split__text, .split__art { grid-column: 1 / -1; } .split__art { margin-top: 32px; }
  .head h2, .head p { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .nav__signin, .nav__cta { display: none; }
  .logo__word { width: 128px; height: 19px; } .logo__mark { width: 34px; height: 29px; }
  .hero { padding-top: calc(var(--nav) + 40px); padding-bottom: 24px; }
  .hero h1 { font-size: 52px; }
  .lead { font-size: 18px; margin-top: 20px; }
  .hero .btn-row { flex-direction: column; } .hero .btn { width: 100%; }
  .verbs { margin-top: 20px; }
  .hero__art { width: 46%; justify-self: start; order: -1; margin-bottom: -8px; }
  .hero__art .rule { display: none; }
  .app { grid-template-columns: 1fr; height: 470px; } .app__main { display: none; }
  .cards { grid-template-columns: 1fr; } .cards .card:nth-child(n+2) { display: none; }
  .panel { height: 300px; padding: 16px; }
  .split__art { padding: 16px; }
  .section { min-height: calc(var(--h, 1) * 100lvh); }
  #method, #questions { --h: 2; } .ol__table th:nth-child(5), .ol__table td:nth-child(5), .ol__table th:nth-child(3), .ol__table td:nth-child(3) { display: none; }
  .ol__stats { grid-template-columns: repeat(2, 1fr); }
  .faq { grid-template-columns: 1fr; } .faq > div { padding: 16px 0; }
  .close { row-gap: 32px; } .close__mark, .close__text { grid-column: 1 / -1; } .close__mark { max-width: 200px; }
  .close__text .btn { width: 100%; }
  .foot__brand, .foot__links { grid-column: 1 / -1; }
  .foot__legal { flex-direction: column; gap: 8px; }
}

/* ---------- reduced motion: everything at rest, finished frames */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .js .hero:not(.is-in) .stack__line, .js .hero:not(.is-in) .margin { opacity: 1; transform: none; }
  .js .hero:not(.is-in) .rule { transform: none; } .js .hero:not(.is-in) .hl { background-size: 100% 72%; }
  [data-loop="steps"].is-run [data-step] { opacity: 1; transform: none; }
  .loop-pause { display: none; }
}
@media (max-width: 639px) {
  [data-loop="css"] .pop, [data-loop="css"] .ck--miss { animation: none; }
  .panel .loop-pause { display: none; }
}
/* short screens (laptops at 768–860px tall): the window keeps its story whole by dropping secondary lines */
@media (min-width: 640px) and (max-height: 860px) {
  .reader__more, .tool--extra, .proposal__branch, .proposal__delta, .proposal__note { display: none; }
}