/* Two faces. One system sans for every word on the page, headings and body
   alike, so nothing reads as a different document, and a monospace with
   tabular numerals for everything that is a measurement. No web fonts, so no
   third party request and no flash of unstyled text. */

:root {
  color-scheme: light;
  --bg: #fafaf8;
  --panel: #ffffff;
  --ink: #1f1c17;
  --muted: #6b6459;
  --line: #e4e0d8;
  /* Beige is for buttons. Nothing else wears it. */
  --beige: #e8ddcb;
  --beige-deep: #dccbb0;
  --accent: #7a5c34;
  --high: #96402c;
  --med: #9a7526;
  --low: #5d7343;
  --draft: #a09788;
  --code: #f2f0ea;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* For surfaces you write on. No webfont: a draft should render the instant
     the page does, and every machine already has one of these. */
  --serif: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* --- chrome ------------------------------------------------------------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 18px 32px;
  max-width: 1240px;
  margin: 0 auto;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 17px/1 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark svg rect { fill: var(--ink); }
.bar nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.wordmark { flex: 0 0 auto; }
.bar nav a {
  font: 14px/1 var(--sans);
  color: var(--muted);
  text-decoration: none;
}
.bar nav a:hover { color: var(--ink); }
.pill {
  background: var(--beige);
  color: var(--ink) !important;
  padding: 9px 17px;
  border-radius: 999px;
  font-weight: 500;
}
.pill:hover { background: var(--beige-deep); }

/* The footer is where a visitor goes looking for the rest of the company, so
   it carries the navigation rather than three links to a repository. The
   developer links keep a column of their own: they are for the people who
   want them and in the way of everyone else. */
footer {
  padding: 56px 32px 32px;
  font: 13px/1 var(--sans);
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 72px;
}
.foot-cols {
  display: grid; gap: 36px 40px; max-width: 1040px; margin: 0 auto;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
.foot-brand { max-width: 30ch; }
.foot-mark {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
  font: 600 15px/1 var(--sans); letter-spacing: -.01em;
}
.foot-mark svg { fill: currentColor; }
.foot-brand p { margin: 12px 0 0; font: 13px/1.6 var(--sans); color: var(--muted); }
.foot-social { display: flex; gap: 10px; margin-top: 16px; }
.foot-social a {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--muted);
}
.foot-social a:hover { border-color: var(--accent-line); color: var(--ink); }
.foot-col { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.foot-col h2 {
  margin: 0 0 2px; font: 500 12.5px/1 var(--sans); color: var(--ink);
}
.foot-col a { color: var(--muted); text-decoration: none; font: 13px/1.3 var(--sans); }
.foot-col a:hover { color: var(--ink); }
.foot-bar {
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  max-width: 1040px; margin: 36px auto 0; padding-top: 20px;
  border-top: 1px solid var(--line); font-size: 12.5px;
}
.foot-bar nav { display: flex; gap: 18px; }
.foot-bar a { color: var(--muted); text-decoration: none; }
.foot-bar a:hover { color: var(--ink); }
.foot-v { margin-left: auto; font-family: var(--mono); font-size: 11.5px; }

/* --- landing ------------------------------------------------------------ */

.hero-copy {
  max-width: 780px;
  margin: 72px auto 0;
  padding: 0 32px;
  text-align: center;
}
.hero-copy h1 {
  font: 600 clamp(34px, 5.4vw, 56px)/1.08 var(--sans);
  letter-spacing: -0.028em;
  margin: 0 0 22px;
}
.hero-copy .sub {
  font: 17px/1.55 var(--sans);
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
}

.hero {
  position: relative;
  max-width: 1240px;
  margin: 56px auto 0;
  padding: 0 32px;
}
.hero-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* A blurred 24px copy of the photograph itself, inlined, so the frame is
     already the right colours before the real file lands. Under a kilobyte. */
  background: #a3a79f url("data:image/webp;base64,UklGRlAAAABXRUJQVlA4IEQAAACwAwCdASoYAA4APu1mq04ppaQiMAgBMB2JYwCdACGqXdzCWosTgAD+rrwXrZaAj6deFG6LIBP23mRQ2qupNtrXW8AAAA==") center / cover no-repeat;
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The card floats over the photograph as real markup, so its numbers come
   from a real run rather than from whatever was baked into an image. */
.float-card {
  position: absolute;
  width: min(360px, 36%);
  background: #fff;
  color: #1f1c17;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  font-family: var(--sans);
}
.float-card .label {
  font: 500 12px/1.3 var(--sans);
  color: var(--accent);
}
.float-card .quote {
  font: 15px/1.45 var(--sans);
  margin: 7px 0 14px;
}
.float-card .quote.before {
  color: #6b6459;
  text-decoration: line-through;
  text-decoration-color: #c9bfae;
  text-decoration-thickness: 1px;
}
.float-card .label + .quote.before { margin-bottom: 6px; }
.float-card .facts {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0 0 14px; padding: 0;
}
.float-card .facts li {
  font: 11px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: #6b6459;
  background: #efeadf;
  padding: 4px 7px;
  border-radius: 4px;
}
.float-card .facts.kept li { color: #5d7343; background: #e9eddc; }
.float-card .quote { margin-bottom: 6px; }
.float-card .pair { display: flex; gap: 22px; }
.float-card .metric { flex: 1; }
.float-card .metric b {
  display: block;
  font: 600 22px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.float-card .metric span {
  font: 11px/1.3 var(--sans);
  color: #6b6459;
}
/* Two cards, on opposite corners, so the figure between them stays visible. */
.card-before { top: 7%; left: 4%; }
.card-after  { bottom: 7%; right: 4%; }
.card-before .facts { margin-bottom: 0; }
.float-card .was { font-style: normal; color: #a09788; }

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
}
.prose h2 {
  font: 600 22px/1.3 var(--sans);
  letter-spacing: -0.015em;
  margin: 56px 0 12px;
}
.prose h3 { font: 600 17px/1.3 var(--sans); margin: 32px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
/* --- tables --------------------------------------------------------------
   A table here is data, not prose, so it sits on its own panel and is set in
   the sans face at reading size rather than in the mono the whole grid used to
   wear. Which columns hold numbers is decided by the renderer, in content.py,
   because CSS cannot read a cell; every rule below keys off the class it
   leaves behind. */

.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 24px 0 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  font: 14px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
}
.prose thead th {
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
  font: 500 12.5px/1.35 var(--sans);
  color: var(--muted);
  padding: 15px 12px 10px;
  border-bottom: 1px solid var(--line);
}
.prose td {
  text-align: left;
  vertical-align: baseline;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}
.prose tbody tr:last-child td { border-bottom: 0; }

/* A column of numbers is read downward, so the digits line up and the column
   is right aligned. Ragged decimals are why the old grid could not be scanned. */
.prose th.num, .prose td.num { text-align: right; }

/* The spread that qualifies a mean, on its own line and out of the way. The
   mean is what the column is scanned for; the sd and the range answer a
   question the reader asks once. */
.prose td small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
}
/* A verdict is not a measurement. It says whether the number beside it counts,
   so it carries the colour the rest of the site gives a pass and a failure. */
.prose td small.verdict { font-weight: 500; letter-spacing: .02em; }
.prose td small.pass { color: var(--low); }
.prose td small.fail { color: var(--high); }

/* An identifier inside a column of identifiers does not need the chip that
   marks one inside a sentence. */
.prose th > code, .prose td > code {
  background: none;
  padding: 0;
  font-size: 13px;
}

/* Where the writer bolded a cell, that cell is the point of its row. Tinting
   the run turns a scatter of bold numbers into a block the eye can follow. */
.prose tbody td:not(:first-child):has(strong) {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.prose tbody td strong { font-weight: 600; }
.prose tbody tr:first-child td:has(strong) {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.prose tbody tr:last-child td:has(strong) {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Narrow screens: a table that cannot fit scrolls inside its own panel rather
   than bleeding off the right edge of the page. */
@media (max-width: 759px) {
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.wide { overflow-x: auto; }

a { color: var(--accent); }
.muted { color: var(--muted); }

code, pre, kbd {
  font-family: var(--mono);
  font-size: 13px;
}
code { background: var(--code); padding: 1px 5px; border-radius: 4px; }
pre {
  background: var(--code);
  padding: 14px 16px;
  border-radius: 8px;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; padding: 0; }

/* --- demo --------------------------------------------------------------- */

.demo { max-width: 1040px; margin: 40px auto 0; padding: 0 32px; }
.demo h1 { font: 600 30px/1.15 var(--sans); letter-spacing: -0.02em; margin: 0 0 8px; }
.step { margin-top: 40px; }
.step h2 {
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.step .hint { font: 14px/1.5 var(--sans); color: var(--muted); margin: 0 0 12px; }

textarea {
  width: 100%;
  min-height: 150px;
  padding: 13px 15px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 15px/1.55 var(--sans);
  resize: vertical;
}
textarea:focus, button:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
button {
  font: 500 14px/1 var(--sans);
  padding: 11px 20px;
  border-radius: 999px;
  border: 0;
  background: var(--beige);
  color: var(--ink);
  cursor: pointer;
}
button:disabled { opacity: 0.45; cursor: default; }
button.ghost { background: none; color: var(--accent); border: 1px solid var(--line); }
label.check { font: 14px/1 var(--sans); color: var(--muted); display: inline-flex; gap: 7px; }
.status { font: 14px/1.5 var(--sans); color: var(--muted); margin: 14px 0 0; }
.status.error { color: var(--high); }

.results { display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 900px) { .results.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .results.three { grid-template-columns: 1fr 1fr 1fr; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  min-width: 0;
}
.panel h3 {
  font: 600 13px/1 var(--sans);
    color: var(--muted);
  margin: 0 0 14px;
}
.panel .body { font: 15px/1.6 var(--sans); white-space: pre-wrap; }

.scores { display: flex; gap: 26px; margin-bottom: 14px; }
.score b {
  display: block;
  font: 600 27px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.score span { font: 11px/1.35 var(--sans); color: var(--muted); }
.score .was { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.verdict-fail { color: var(--high); }
.verdict-pass { color: var(--low); }

.anchor-list { font: 13px/1.6 var(--mono); margin: 12px 0 0; padding: 0; list-style: none; }
.anchor-list li { padding: 2px 0; }
.anchor-list .intro { color: var(--high); }
.anchor-list .drop { color: var(--med); }
.anchor-list .none { color: var(--low); }

details { margin-top: 14px; }
summary { font: 13px/1 var(--sans); color: var(--muted); cursor: pointer; }
details pre { margin-top: 10px; font-size: 12px; }

/* --- rhythm strip ------------------------------------------------------- */
/* One bar per sentence: width is length, ink is embedding depth. Spread is
   part of a voice, and a column of means hides exactly that. */

.strip { display: block; width: 100%; height: 30px; margin: 0; }
.strip-label {
  display: block;
  font: 11px/1 var(--sans);
  color: var(--muted);
    margin-bottom: 8px;
}
#corpus-strip:not(:empty) { margin-top: 20px; }
.panel .strip-label { margin-top: 16px; }
.strip rect.you { fill: var(--accent); }
.strip rect.draft { fill: var(--draft); }
.strip rect.restyled { fill: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: fade 160ms ease-out; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* --- syntax tree figure -------------------------------------------------- */
/* Drawn rather than described: the claim is that two sentences of the same
   length can have entirely different structure, and that is a shape, not a
   sentence. Inline SVG so it inherits the theme and needs no library. */

.tree-figure { margin: 24px 0 28px; }
.tree { width: 100%; height: auto; display: block; }
.tree .t-node { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.tree .t-root { stroke: var(--accent); stroke-width: 1.5; }
.tree .t-edge { stroke: var(--line); stroke-width: 1.5; }
.tree .t-rule { stroke: var(--line); stroke-width: 1; }
.tree .t-label {
  fill: var(--ink);
  font: 12px var(--mono);
  text-anchor: middle;
  dominant-baseline: middle;
}
.tree .t-dep { fill: var(--accent); font: 10px var(--mono); dominant-baseline: middle; }
.tree .t-title { fill: var(--ink); font: 600 13px var(--sans); }
.tree .t-sub, .tree .t-note { fill: var(--muted); font: 11px var(--sans); }
.tree-figure figcaption {
  font: 13px/1.55 var(--sans);
  color: var(--muted);
  margin-top: 10px;
}

/* Formulae are set as display blocks; without MathJax they still read as the
   monospace expressions they are, which is legible enough for this page. */
.prose p > code, .prose li > code { white-space: nowrap; }

.formula {
  font: 14px/2 var(--mono);
  font-variant-numeric: tabular-nums;
  background: var(--code);
  border-left: 2px solid var(--accent);
  padding: 14px 18px;
  margin: 18px 0;
  border-radius: 0 6px 6px 0;
  overflow-x: auto;
}
.formula sub, .formula sup { font-size: 0.75em; }
.formula.rendered { font: 16px/1.5 var(--sans); padding: 10px 18px; }
.formula.rendered .katex-display { margin: 8px 0; }
.formula.rendered .katex { font-size: 1.15em; color: var(--ink); }
.tree .t-flat { stroke-dasharray: 4 3; }
.tree .t-flat-label { fill: var(--muted); }


/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 700px) {
  .bar { padding: 14px 20px; gap: 12px 16px; }
  .bar nav { gap: 14px; width: 100%; justify-content: flex-start; }
  .bar nav a { font-size: 13px; }
  /* Scoped to the bar: a bare .pill also catches the buttons on the pages. */
  .bar nav .pill { margin-left: auto; padding: 8px 14px; }
}

/* Five links and the pill do not share a row at phone width. Rather than let
   the pill wrap wherever it falls, it takes a full row of its own. */
@media (max-width: 460px) {
  .bar nav { gap: 10px 14px; }
  .bar nav .pill { flex: 1 0 100%; margin-left: 0; text-align: center; }

  .hero-copy { margin-top: 40px; padding: 0 20px; }
  .hero-copy h1 { font-size: clamp(30px, 9.5vw, 40px); }
  .hero-copy .sub { font-size: 16px; }

  .hero { padding: 0 20px; margin-top: 36px; }
  /* Portrait frame: the wide crop leaves no room for the card on a phone. */
  .hero-frame { aspect-ratio: 3 / 4; border-radius: 16px; }
  .card-before {
    top: 5%; left: 5%; right: 5%;
    width: auto;
    padding: 14px 16px;
  }
  /* Below the frame on a phone, as a normal block, so the figure stays clear. */
  .hero-frame { overflow: visible; }
  .hero-frame img { border-radius: 16px; }
  .card-after {
    position: static;
    width: auto;
    margin: 14px 0 0;
    padding: 14px 16px;
    box-shadow: none;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
  }
  .card-after .metric span, .card-after .facts li { color: var(--muted); }
  .float-card .quote { font-size: 14px; margin: 8px 0 12px; }
  .float-card .metric b { font-size: 20px; }

  .prose, .demo { padding: 0 20px; }
  .prose h2 { font-size: 20px; margin-top: 40px; }
  .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
  .foot-v { margin-left: 0; }
}

/* --- concept figures ------------------------------------------------------ */
/* Arc diagrams are generated from real parses (tools/concept_figures.py), so
   these classes are the contract between that script and the page. Arcs run
   head to dependent; dashed arcs are the ones that add no embedding depth. */

/* Each figure carries its own pixel width, drawn by tools/concept_figures.py,
   and is never scaled down: a 12px label stays legible on a phone, and a
   figure wider than the column scrolls inside it. On a wide screen the figures
   get a slightly wider gutter than the prose they explain. */
.concept-figure {
  margin: 22px 0 30px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.concept-figure figcaption { font: 13px/1.55 var(--sans); color: var(--muted); margin-top: 10px; }
.arcs, .dist { max-width: none; height: auto; display: block; margin-inline: auto; }

@media (min-width: 860px) {
  .prose .concept-figure {
    width: min(780px, calc(100vw - 64px));
    margin-left: calc((100% - min(780px, 100vw - 64px)) / 2);
  }
}
.arcs .arc { fill: none; stroke: var(--muted); stroke-width: 1.4; opacity: 0.75; }
.arcs .arrow { fill: var(--muted); stroke: none; opacity: 0.75; }
.arcs .arc.sub, .arcs .arrow.sub { stroke: var(--accent); }
.arcs .arrow.sub, .arcs .arrow.hl { fill: var(--accent); }
.arcs .arc.coord { stroke-dasharray: 4 3; }
.arcs .arc.hl { stroke: var(--accent); stroke-width: 2; }
.arcs .rootline { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 2 3; }
.arcs .dep {
  fill: var(--ink);
  opacity: 0.85;
  font: 11px var(--mono);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.arcs .dep.sub, .arcs .dep.hl, .arcs .dep.root { fill: var(--accent); font-weight: 600; }
.arcs .dep.coord { fill: var(--muted); }
.arcs .word {
  fill: var(--ink);
  font: 12px var(--mono);
  text-anchor: middle;
}
.arcs .word.rootword { font-weight: 700; }
.arcs .word.onpath { fill: var(--accent); }
.arcs .tag, .arcs .pos { fill: var(--muted); font: 11px var(--mono); text-anchor: middle; }
.arcs .tag.finite { fill: var(--accent); font-weight: 700; }
.arcs .title, .dist .title { fill: var(--ink); font: 600 13px var(--sans); }
.arcs .subtitle, .dist .subtitle { fill: var(--muted); font: 11px var(--sans); }

.strips .cell { fill: var(--panel); stroke: var(--line); }
.strips .cell.before { fill: var(--code); stroke: var(--accent); }
.strips .cell.rootcell { fill: var(--accent); stroke: var(--accent); }
.strips .cell.rootcell + .word { fill: var(--bg); font-weight: 700; }

.dist .axis { stroke: var(--line); stroke-width: 1; }
.dist .dot { fill: var(--accent); }
.dist .dot.draft { fill: var(--draft); }
.dist .pct { stroke: var(--ink); stroke-width: 1.5; }
.dist .pctlabel, .dist .axislabel, .dist .val, .dist .legend text {
  fill: var(--muted);
  font: 10px var(--mono);
  text-anchor: middle;
}
.dist .legend text, .dist .val { text-anchor: start; }
.dist .axislabel.end { text-anchor: end; }
.dist .rowlabel { fill: var(--ink); font: 11px var(--sans); text-anchor: end; }
.dist .sd { stroke: var(--accent); stroke-width: 2; }
.dist .meanmark { fill: var(--accent); }
.dist .bar.you { fill: var(--accent); }
.dist .bar.draft { fill: var(--draft); }
.dist .rbar.you { fill: var(--accent); }
.dist .rbar.draft { fill: var(--draft); }
.rhythm .rowlabel { text-anchor: end; }

/* --- landing: how it works and before/after ----------------------------- */
/* Three slides on a horizontal track. It is a scroll container first, so it
   works with no script and the arrows and dots only drive it. Every class here
   is scoped under .how: an earlier unscoped `.step` rule leaked a border onto
   the demo page's steps. The figures are template partials drawn by
   tools/concept_figures.py from the sample corpus, the demo draft and its saved
   rewrite, all on one scale. */

.how, .pairs-section { max-width: 1040px; margin: 80px auto 0; padding: 0 32px; }
/* How it works ends the page, so it keeps its own distance from the footer. */
.how { margin-bottom: 96px; }
.how h2, .pairs-section h2 {
  font: 600 26px/1.2 var(--sans);
  letter-spacing: -0.02em;
  margin: 0;
}
.how-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.how-nav { display: flex; gap: 8px; }
.how-nav .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.how-nav .arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.how-nav .arrow:disabled { opacity: 0.32; cursor: default; }

.slides {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slide {
  scroll-snap-align: start;
  min-width: 0;
  /* Every slide is as tall as the tallest, so the figure sits in the middle of
     what is left rather than leaving the gap under it. */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: 30px 32px 34px;
}
.slide-copy { max-width: 620px; margin-bottom: 26px; }
.slide h3 {
  font: 600 21px/1.25 var(--sans);
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.slide p { font: 15px/1.6 var(--sans); color: var(--muted); margin: 0; }
.slide-fig {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide-fig.scrolls { overflow-x: auto; display: block; }
.landing-arcs { width: 100%; height: auto; display: block; min-width: 560px; }

.dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.dots .dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.dots .dot.is-on { background: var(--accent); }

.how .strip-row {
  display: grid;
  grid-template-columns: 104px 1fr 52px;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
}
.how .strip-label {
  font: 13px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.lstrip { width: 100%; height: auto; display: block; }
.lstrip rect.you, .lstrip rect.restyled { fill: var(--accent); }
.lstrip rect.draft { fill: var(--draft); }
.how .score {
  font: 600 24px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--muted);
}
.how .score.up { color: var(--low); }
.strip-note { font: 12px/1.4 var(--sans); color: var(--muted); margin: 10px 0 0 118px; }

/* The legend for the rhythm slide: what the bars encode, shown rather than
   described, and one line per row saying what the row is. */
.strip-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 14px 118px; font: 12px/1 var(--sans); color: var(--muted); }
.strip-key span { display: inline-flex; align-items: center; gap: 7px; }
.strip-key i { display: inline-block; height: 12px; border-radius: 2px; background: var(--accent); }
.strip-key i.short { width: 8px; } .strip-key i.long { width: 26px; }
.strip-key i.light { width: 14px; opacity: .35; } .strip-key i.dark { width: 14px; }
.how .strip-row small { grid-column: 2; font: 11px/1.3 var(--mono); color: var(--muted); margin: -4px 0 6px; }
.arcs-wrap { overflow-x: auto; }

.pairs-section .lede { font: 16px/1.55 var(--sans); color: var(--muted); max-width: 640px; margin: 10px 0 22px; }
.pair-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 18px;
  background: var(--panel);
}
.pair-card .side { padding: 22px 24px; min-width: 0; }
.pair-card .side.before { background: var(--code); }
.pair-card .label {
  font: 500 13px/1.3 var(--sans);
  color: var(--accent);
  margin-bottom: 12px;
}
.pair-card .before .label { color: var(--muted); }
.pair-card p { font: 15px/1.6 var(--sans); margin: 0 0 16px; }
.pair-card mark {
  background: none;
  color: inherit;
  padding: 0 1px;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.pair-card .before mark { box-shadow: inset 0 -2px 0 var(--draft); }
.pair-card .pair { display: flex; gap: 26px; }
.pair-card .metric b {
  display: block;
  font: 600 22px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.pair-card .metric span { font: 11px/1.3 var(--sans); color: var(--muted); }
.pair-card .was { font-style: normal; color: var(--draft); }

@media (max-width: 700px) {
  .how, .pairs-section { padding: 0 20px; margin-top: 52px; }
  .how h2, .pairs-section h2 { font-size: 22px; }
  .slide { padding: 22px 20px 26px; border-radius: 14px; }
  .slide h3 { font-size: 19px; }
  .slide-copy { margin-bottom: 20px; }
  .how .strip-row { grid-template-columns: 70px 1fr 34px; gap: 10px; }
  .how .strip-label { font-size: 12px; }
  .strip-note { margin-left: 80px; }
  .pair-card { grid-template-columns: 1fr; }
  .pair-card .side { padding: 18px 18px; }
}

/* --- landing: the call to try it ---------------------------------------- */
/* The page ends on one action. A hairline above it, the button, and the three
   links as a quiet row underneath rather than a sentence of underlines. */

.demo-call {
  max-width: 1040px;
  margin: 34px auto 0;
  padding: 0 32px;
}
.demo-call-inner {
  border-top: 1px solid var(--line);
  padding-top: 44px;
  text-align: center;
}
.demo-call h2 {
  font: 600 26px/1.2 var(--sans);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.demo-call > .demo-call-inner > p {
  font: 15px/1.6 var(--sans);
  color: var(--muted);
  margin: 0 0 26px;
}
.demo-call .cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--beige);
  color: var(--ink);
  font: 500 15px/1 var(--sans);
  text-decoration: none;
}
.demo-call .cta svg { opacity: 0.75; transition: transform 140ms var(--ease, ease); }
.demo-call .cta:hover { opacity: 0.88; }
.demo-call .cta:hover svg { transform: translateX(2px); }

.demo-call-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
}
.demo-call-links a {
  font: 14px/1.4 var(--sans);
  color: var(--muted);
  text-decoration: none;
}
.demo-call-links a:hover { color: var(--ink); }
/* One separator between links, drawn rather than typed, so it never wraps
   onto a line of its own. */
.demo-call-links a + a { position: relative; }
.demo-call-links a + a::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: var(--line);
}

@media (max-width: 700px) {
  .demo-call { margin-top: 24px; padding: 0 20px; }
  .demo-call-inner { padding-top: 34px; }
  .demo-call h2 { font-size: 22px; }
  .demo-call-links { gap: 12px; flex-direction: column; }
  .demo-call-links a + a::before { display: none; }
}

/* --- captured prompts on the benchmark page ------------------------------ */
/* Long enough that an open block would bury the results, so each one scrolls
   inside its own frame. */

.prose details.prompt {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
  background: var(--panel);
}
.prose details.prompt summary {
  font: 500 14px/1.4 var(--sans);
  color: var(--ink);
}
.prose details.prompt[open] summary { margin-bottom: 10px; }
.prose .prompt-note { font: 13px/1.5 var(--sans); color: var(--muted); margin: 0 0 12px; }
.prose details.prompt pre {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  font-size: 12px;
  background: var(--code);
}

/* --- the measurement, laid out ------------------------------------------- */
/* Built by measure.js from the specification text. Every feature is a range,
   so every row is a track with the mean marked on it rather than one number. */

.measure-view { font: 14px/1.5 var(--sans); }
.m-empty { color: var(--muted); font-size: 14px; margin: 0; }
.m-meta {
  font: 12px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  margin: 0 0 10px;
}
.m-rhythm b { font-weight: 600; color: var(--ink); }
.m-rhythm {
  font: 13px/1.5 var(--sans);
  color: var(--ink-soft);
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 12px;
  margin: 0 0 20px;
}
.m-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font: 600 13px/1 var(--sans);
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.m-h em { font: 400 12px/1 var(--sans); color: var(--muted); font-style: normal; }

.m-row, .m-rate {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
}
.m-row { grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 2fr) 84px; }
.m-name { font: 13px/1.35 var(--sans); min-width: 0; }
.m-gloss { display: block; font-size: 11.5px; color: var(--muted); }
.m-value {
  font: 600 15px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.m-value span { font-weight: 400; font-size: 11px; color: var(--muted); margin-left: 4px; }

/* The track is the feature's own scale: the bar is the tenth to ninetieth
   percentile, the notch is the mean. Rows are not comparable to each other,
   which is why there is no shared axis to invite it. */
.m-track {
  position: relative;
  height: 26px;
  border-bottom: 1px solid var(--line);
}
.m-range {
  position: absolute;
  top: 8px;
  height: 5px;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.28;
}
.m-mean {
  position: absolute;
  top: 4px;
  width: 2px;
  height: 13px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--accent);
}
.m-tick {
  position: absolute;
  top: 16px;
  font: 10px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.m-tick.lo { transform: translateX(0); }
.m-tick.hi { transform: translateX(-100%); }

.m-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.m-rate { grid-template-columns: 1fr 60px; border-top: 1px solid var(--line); }
.m-rate.is-top { border-top: 0; }
.m-rate.is-off .m-value { color: var(--muted); text-decoration: line-through; }
.m-flag {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 10px/1.4 var(--sans);
  color: var(--warn);
  cursor: help;
  vertical-align: 1px;
}

.m-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
/* Filled downward, so each column keeps the order the specification lists.
   The row count arrives inline as --rows and is ignored below the breakpoint,
   where a single column needs no help. */
@media (min-width: 701px) {
  .m-rates, .m-bars {
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--rows, 4), auto);
  }
}
.m-bar { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 10px; }
.m-bar-label { font: 11px/1 var(--mono); color: var(--muted); }
.m-bar-track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.m-bar-track span { display: block; height: 100%; background: var(--accent); opacity: 0.55; }
.m-bar-value {
  font: 11px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}

.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 12px/1.2 var(--sans);
  background: var(--panel);
}
.m-chip b {
  font: 600 11px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.m-raw { margin-top: 22px; }
.m-raw summary { font-size: 12px; }
.m-raw pre { margin-top: 10px; max-height: 300px; overflow: auto; font-size: 11.5px; }

@media (max-width: 700px) {
  .m-row { grid-template-columns: 1fr 74px; gap: 8px 12px; }
  .m-row .m-track { grid-column: 1 / -1; }
  .m-rates, .m-bars { grid-template-columns: 1fr; }
  .m-rate.is-top { border-top: 1px solid var(--line); }
  .m-rate:first-child { border-top: 0; }
}
/* A feature name needs more room than a part-of-speech tag. */
.m-bars.wide-label .m-bar { grid-template-columns: minmax(120px, 1.2fr) 1fr 44px; }
.m-bars.wide-label .m-bar-label { font-size: 11.5px; color: var(--ink); }
.prose .measure-view, .panel .measure-view { font: 14px/1.5 var(--sans); }
.spec[open] > summary { margin-bottom: 16px; }

/* Language picker: shared by the demo, onboarding and the new-tone form. */
.lang-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0 .75rem; }
.lang-picker .lang-label { font-size: .8rem; color: var(--muted, #6b6b6b); margin-right: .25rem; }
.lang-chip { font: inherit; font-size: .85rem; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--line, #d9d4c7); background: transparent; color: var(--muted, #6b6b6b); cursor: pointer; }
.lang-chip:hover { color: var(--ink, #1a1a1a); border-color: var(--accent-line, #b8b0a0); }
.lang-chip[aria-checked=true] { color: var(--ink, #1a1a1a); border-color: var(--accent, #7a5c2e); background: var(--accent-soft, #f1ebdd); }
.lang-picker select { font: inherit; font-size: .9rem; padding: .3rem .5rem; border-radius: 6px;
  border: 1px solid var(--line, #d9d4c7); background: transparent; color: inherit; }

/* --- benchmark tables ---------------------------------------------------- */
/* The shared table design above does the work. Two things belong only to this
   page: the results are what the page is for, so a wide table is allowed out
   of the reading column, and the generator bolds the whole mean row, which
   earns a rule above it so a column can be read down to its average. */

@media (min-width: 760px) {
  /* Only a table with five or more columns earns width outside the reading
     column. Widening a three column one just spreads it thin. */
  .page-benchmark table:has(tr > *:nth-child(5)) {
    width: min(1060px, calc(100vw - 64px));
    margin-left: calc((100% - min(1060px, 100vw - 64px)) / 2);
  }
  .page-benchmark td,
  .page-benchmark th { padding-top: 13px; padding-bottom: 13px; }
}

.page-benchmark tbody tr:has(td:first-child strong) td {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.page-benchmark tbody tr:has(td:first-child strong) td:has(strong) {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

/* --- touch targets ------------------------------------------------------- */
/* A 14px link is 13px tall, which is a poor thing to aim a thumb at. The
   padding grows the hit area on touch screens without moving the text. */

@media (max-width: 760px) {
  .wordmark { padding: 8px 0; }
  .bar nav a { padding: 9px 0; }
  .bar nav a.pill { padding: 11px 18px; }
  .foot-col a { padding: 3px 0; }
  .demo-call-links a { padding: 6px 0; }
}

/* A page named in the footer that does not exist yet. It answers 404 so no
   crawler files it as real, and says so plainly rather than pretending. */
.soon { max-width: 640px; margin: 120px auto; padding: 0 32px; text-align: center; }
.soon h1 { font: 600 30px/1.15 var(--sans); letter-spacing: -.02em; margin: 0 0 10px; }
.soon p { font: 16px/1.6 var(--sans); color: var(--muted); margin: 0 0 26px; }