/* Pilot: Ledgerline closed beta. A changelog zine on cool paper: printed zine pages with a highlighter swash that
   sweeps in behind what's new, the roadmap drawn as a git-graph lane (a green main line, branches for Now, Next and
   Later), reports as diff-like cards with the four statuses as a branch line, and a beta pass for the account.
   Type: Geist (display and text) with Geist Mono (versions, dates, ids, counts). The kit (kit.css) keeps behaviour and
   layout; every look is set here. Colours: edit the tokens below (light, then dark). The highlighter is only ever a
   swash behind ink words (art/swash.svg, art/swash-pink.svg for fixed bugs), never a text colour. */
:root {
  --lg-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lg-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lg-ink: #101828;
  --lg-paper: #fafaf7;
  --lg-sheet: #ffffff;
  --lg-head: #f1f2ee;
  --lg-text: #101828;
  --lg-pencil: #5b6474;
  --lg-rule: rgba(16, 24, 40, .14);
  --lg-rule-strong: #101828;
  --lg-hl: #fff04d;
  --lg-poster-pencil: #3d4657;
  --lg-poster-sheet: #ffffff;
  /* Pink is the second marker, for fixed bugs only (swash-pink, Fixed tags, Bug squares). Ink on pink is 8.46:1. */
  --lg-pink: #ff8fc7;
  --lg-green: #0e7a4a;
  --lg-on-green: #ffffff;
  --lg-green-soft: #e4f2ea;
  --lg-shadow: #101828;
  --lg-final: #101828;
  --lg-final-ink: #fafaf7;
  --lg-final-muted: #c9ced8;
  --k-brand: var(--lg-green);
  --k-brand-ink: var(--lg-on-green);
  --k-brand-soft: var(--lg-green-soft);
  --k-hero: var(--lg-ink);
  --k-hero-ink: #fafaf7;
  --k-gold: var(--lg-hl);
  --k-bg: var(--lg-paper);
  --k-surface: var(--lg-sheet);
  --k-surface-2: var(--lg-head);
  --k-line: var(--lg-rule);
  --k-line-strong: rgba(16, 24, 40, .4);
  --k-text: var(--lg-text);
  --k-muted: var(--lg-pencil);
  --k-faint: var(--lg-pencil);
  --k-ok: var(--lg-green);
  --k-ok-soft: var(--lg-green-soft);
  --k-warn: #101828;
  --k-warn-soft: #fff7a8;
  --k-info: var(--lg-ink);
  --k-info-soft: #eceef2;
  --k-danger: #a3133f;
  --k-font: var(--lg-sans);
  --k-font-display: var(--lg-sans);
  --k-r-s: 4px; --k-r-m: 6px; --k-r-l: 6px; --k-r-xl: 8px; --k-r-pill: 6px;
  --k-shadow-1: none;
  --k-shadow-2: 6px 6px 0 var(--lg-shadow);
  --k-shadow-3: 0 10px 30px rgba(16, 24, 40, .22);
  --k-max: 1320px;
  --lg-dotfill: var(--lg-paper);
}
@media (prefers-color-scheme: dark) {
  :root {
    --lg-paper: #10141b;
    --lg-sheet: #181d27;
    --lg-head: #202634;
    --lg-text: #eceef2;
    --lg-pencil: #a3abba;
    --lg-rule: rgba(236, 238, 242, .14);
    --lg-rule-strong: #8a93a3;
    --lg-green: #5bd69a;
    --lg-on-green: #101828;
    --lg-green-soft: rgba(91, 214, 154, .13);
    --lg-shadow: #05070a;
    --lg-final: #1b2130;
    --lg-final-ink: #eceef2;
    --lg-final-muted: #a3abba;
    --k-hero: #242b3b;
    --k-hero-ink: #eceef2;
    --k-line-strong: rgba(236, 238, 242, .35);
    --k-warn: #101828;
    --k-warn-soft: #fff04d;
    --k-info: #eceef2;
    --k-info-soft: #262d3d;
    --k-danger: #ff8fb2;
    --k-shadow-3: 0 10px 30px rgba(0, 0, 0, .5);
  }
}

/* ---------- base ---------- */
body.k-app { font-family: var(--lg-sans); background: var(--lg-paper); color: var(--lg-text); -webkit-font-smoothing: antialiased; }
.k-app :focus-visible { outline: 2.5px solid var(--lg-green); outline-offset: 3px; }
.k-app ::selection { background: var(--lg-hl); color: var(--lg-ink); }
.k-app :is(h1, h2, h3) { font-family: var(--lg-sans); text-wrap: balance; }
.k-app input::placeholder, .k-app textarea::placeholder { color: var(--lg-pencil); opacity: 1; }
.k-app a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.k-app .k-btn { border-radius: 6px; font: 600 1rem/1 var(--lg-sans); letter-spacing: -.005em; min-height: 48px; padding: 0 20px; box-shadow: 3px 3px 0 var(--lg-shadow); border: 1.5px solid var(--lg-shadow); transition: transform .12s, box-shadow .12s; }
.k-app .k-btn:where(:not(.k-btn-2, .k-btn-line, .k-btn-ghost)) { background: var(--lg-green); color: var(--lg-on-green); }
.k-app .k-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--lg-shadow); }
.k-app .k-btn-line, .k-app .k-btn-2 { background: var(--lg-sheet); color: var(--lg-text); border-color: var(--lg-rule-strong); }
.k-app .k-btn-lg { min-height: 54px; font-size: 1.0625rem; padding: 0 24px; }
.k-app .k-btn-s { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.k-app .k-btn .k-i { width: 20px; height: 20px; }
@media (prefers-color-scheme: dark) { .k-app .k-btn { border-color: var(--lg-green); } .k-app .k-btn-line, .k-app .k-btn-2 { border-color: var(--lg-rule-strong); } }
.lg-eyebrow, .k-app .k-kicker { font: 500 .75rem/1.3 var(--lg-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lg-pencil); margin: 0 0 8px; }
.lg-num { font: 600 .75rem/1 var(--lg-mono); color: var(--lg-pencil); letter-spacing: .04em; }
.lg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the highlighter swash (signature) ---------- */
/* A mark is a background on the word itself, drawn behind its glyphs (z-index -1; the parent is isolated so the
   mark never paints over the line above). Light: the swash art only, so the paper shows at its edges. Dark and on the
   ink field: the same swash, stretched over the word's box with a little bleed, so ink always sits on yellow.
   h1 line-height is .95 or more so the bleed stays inside its own line. */
.lg-mark { position: relative; z-index: -1; color: var(--lg-ink); background: url(art/swash.svg) no-repeat 0 55% / 100% 88%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .3em 0 .13em; margin: 0 -.16em 0 -.08em; border-radius: 2px;
  animation: lg-sweep .75s cubic-bezier(.3, .7, .2, 1) .35s both; }
*:has(> .lg-mark), *:has(> .lg-mark-big), *:has(> .lg-mark-fix) { isolation: isolate; }
.lg-mark-fix { background-image: url(art/swash-pink.svg); }
.lg-d2 { animation-delay: .7s; } .lg-d3 { animation-delay: 1.05s; } .lg-d4 { animation-delay: 1.4s; }
@keyframes lg-sweep { from { background-size: 0% 88%; } }
.lg-mark-big { background-size: 100% 88%; background-position: 0 55%; padding: 0 .04em 0 .12em; margin: 0 0 0 -.08em; animation-name: lg-sweep-big; animation-duration: .9s; }
@keyframes lg-sweep-big { from { background-size: 0% 88%; } }
/* The swash starts .08em before the first letter (the box bleeds left; padding and margin keep the text where it was),
   so the first glyph never sits on the pinched edge of the swash or on bare page. The swash is the background of the
   word, so the glyphs always paint over it. */
/* Dark: the same swash, drawn to the word's full box, so ink always sits on yellow. Still, no sweep. */
@media (prefers-color-scheme: dark) {
  .lg-mark, .lg-mark-big, .lg-mark-fix { animation: none; background-size: 100% 100%; background-position: 0 50%; padding-block: .1em; margin-block: -.1em; }
}
/* The final section is an ink field: the same swash, full box, still. No ink word ever sits on bare ink. */
.lg-final .lg-mark, .lg-final .lg-mark-big { animation: none; background-size: 100% 100%; background-position: 0 50%; padding-block: .1em; margin-block: -.1em; }

/* ---------- tags, kinds, badges ---------- */
.lg-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 2px 6px; border: 1.5px solid var(--lg-text); border-radius: 3px; font: 600 .6875rem/1 var(--lg-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lg-text); align-self: start; }
.lg-tag[data-tag="New"] { background: var(--lg-text); color: var(--lg-paper); }
.lg-kind { display: inline-flex; align-items: center; gap: 6px; font: 600 .6875rem/1.2 var(--lg-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lg-text); }
.lg-kind::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--lg-pencil); flex: none; }
.lg-kind[data-kind="Bug"]::before { background: var(--lg-pink); box-shadow: 0 0 0 1.5px var(--lg-ink); }
.lg-kind[data-kind="Feature idea"]::before { background: var(--lg-hl); box-shadow: 0 0 0 1.5px var(--lg-ink); }
.lg-kind[data-kind="Question"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--lg-text); border-radius: 50%; }
.k-app .k-badge { min-height: 24px; padding: 3px 8px; border-radius: 3px; font: 600 .6875rem/1.15 var(--lg-mono); letter-spacing: .05em; text-transform: uppercase; background: transparent; color: var(--lg-text); box-shadow: inset 0 0 0 1.5px var(--lg-rule-strong); }
.k-app .k-badge-state::before { display: none; }
.k-app [data-k-state="done"] .k-badge-state { color: var(--lg-pencil); box-shadow: inset 0 0 0 1.5px var(--lg-rule); background: transparent; }
.k-app [data-k-state="new"] .k-badge-state { color: var(--lg-text); background: transparent; box-shadow: inset 0 0 0 1.5px var(--lg-text); }
.k-app [data-k-state="active"] .k-badge-state { color: var(--lg-ink); background: url(art/swash.svg) no-repeat center / 100% 100%; background-color: var(--lg-hl); box-shadow: none; }
.k-app [data-k-state="ok"] .k-badge-state, .k-app .k-badge-ok { color: var(--lg-on-green); background: var(--lg-green); box-shadow: none; }
.k-app [data-k-state="off"] .k-badge-state { color: var(--lg-pencil); background: transparent; box-shadow: inset 0 0 0 1.5px var(--lg-rule); text-decoration: line-through; }
.k-app .k-badge-brand { color: var(--lg-ink); background: var(--lg-hl); box-shadow: none; }

/* ---------- the zine page (the object) ---------- */
.lg-zine { position: relative; background: var(--lg-sheet); color: var(--lg-text); border: 1.5px solid var(--lg-rule-strong); box-shadow: 6px 6px 0 var(--lg-shadow); padding: 18px 20px 14px; min-width: 0; }
.lg-zine-mast { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 4px solid var(--lg-text); }
.lg-zine-name { font: 800 1.125rem/1 var(--lg-sans); letter-spacing: -.03em; }
.lg-zine-no { font: 500 .75rem/1 var(--lg-mono); color: var(--lg-pencil); letter-spacing: .02em; white-space: nowrap; }
.lg-zine-h { font: 800 clamp(1.875rem, 7.4vw, 2.75rem)/.98 var(--lg-sans); letter-spacing: -.045em; margin: 16px 0 10px; }
.lg-zine-items { list-style: none; margin: 0; padding: 0; }
.lg-zine-items li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--lg-rule); }
.lg-zine-items li > .lg-tag { grid-row: span 2; justify-self: start; }
.lg-zine-items p { margin: 0; font: 500 1.0625rem/1.45 var(--lg-sans); letter-spacing: -.01em; }
.lg-asked { grid-column: 2; font: 500 .6875rem/1.2 var(--lg-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--lg-green); }
.lg-asked::before { content: "↳ "; }
.lg-zine-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 8px; border-top: 1.5px solid var(--lg-text); font: 500 .6875rem/1.2 var(--lg-mono); letter-spacing: .04em; color: var(--lg-pencil); text-transform: uppercase; }
.lg-zine-foot a { color: var(--lg-text); display: inline-block; padding: 7px 0; margin: -7px 0; }
@media (min-width: 640px) { .lg-zine { padding: 24px 28px 16px; } .lg-zine-items li { grid-template-columns: 84px minmax(0, 1fr); } }
/* Phones under 480px: the tag sits on its own line above the text, not in a 70px column. */
@media (max-width: 479px) { .lg-zine-items li { grid-template-columns: minmax(0, 1fr); } .lg-zine-items li > .lg-tag { grid-row: auto; } .lg-asked { grid-column: 1; } }

/* ---------- the git graph (roadmap) ---------- */
.lg-graph { position: relative; --step: 16px; --pad: 92px; min-width: 0; }
.lg-graph::before { content: ""; position: absolute; left: 10px; top: 4px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--lg-green); }
.lg-graph ol { list-style: none; margin: 0; padding: 0; }
.lg-br { position: relative; padding-bottom: 26px; --lx: 0; --lc: var(--lg-green); }
.lg-br[data-lane="now"] { --lx: 1; --lc: var(--lg-text); }
.lg-br[data-lane="next"] { --lx: 2; --lc: var(--lg-pencil); }
.lg-br[data-lane="later"] { --lx: 3; --lc: var(--lg-pencil); }
.lg-br[data-lane="main"] { padding-bottom: 0; }
.lg-br:not([data-lane="main"])::before { content: ""; position: absolute; left: calc(10px + var(--lx) * var(--step)); top: 10px; bottom: 19px; border-left: 3px solid var(--lc); }
.lg-br[data-lane="later"]::before { border-left-style: dashed; }
.lg-br:not([data-lane="main"])::after { content: ""; position: absolute; box-sizing: border-box; left: 10px; bottom: 6px; width: calc(var(--lx) * var(--step) + 3px); height: 14px; border: 0 solid var(--lc); border-right-width: 3px; border-bottom-width: 3px; border-bottom-right-radius: 12px; }
.lg-br[data-lane="later"]::after { border-style: dashed; }
.lg-br-head { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 24px; margin: 0 0 4px; padding-left: var(--pad); font: 500 .8125rem/1.2 var(--lg-mono); color: var(--lg-pencil); letter-spacing: .02em; }
.lg-ref { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 7px; border: 1.5px solid var(--lc); border-radius: 4px; font: 600 .75rem/1 var(--lg-mono); color: var(--lg-text); background: var(--lg-sheet); }
.lg-ref::before { content: "⎇ "; color: var(--lc); margin-right: 3px; }
.lg-br[data-lane="main"] .lg-ref { background: var(--lg-green); color: var(--lg-on-green); border-color: var(--lg-green); }
.lg-br[data-lane="main"] .lg-ref::before { color: inherit; }
.lg-commit { position: relative; padding: 4px 0 8px var(--pad); min-height: 30px; font: 600 1rem/1.3 var(--lg-sans); letter-spacing: -.01em; }
.lg-commit::before { content: ""; position: absolute; box-sizing: border-box; top: 6px; left: calc(10px + var(--lx) * var(--step) - 5px); width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--lc); background: var(--lg-dotfill); }
.lg-br[data-lane="main"] .lg-commit::before { background: var(--lg-green); }
.lg-br[data-lane="now"] .lg-commit::before { background: var(--lg-hl); border-color: var(--lg-text); width: 15px; height: 15px; top: 5px; left: calc(10px + var(--lx) * var(--step) - 6px); }
.lg-sha { font: 500 .75rem/1 var(--lg-mono); color: var(--lg-pencil); margin-left: 6px; white-space: nowrap; }
.lg-commit-sub { display: block; margin-top: 3px; font: 400 .875rem/1.4 var(--lg-sans); color: var(--lg-pencil); letter-spacing: 0; }
.lg-graph-title { margin: 0 0 14px; padding-left: var(--pad); font: 800 1.125rem/1 var(--lg-sans); letter-spacing: -.03em; }
/* Commit cards (roadmap page, public band): the commit dot sits on the lane, the card beside it. */
.lg-cc { background: var(--lg-sheet); border: 1px solid var(--lg-rule-strong); border-radius: 0; padding: 14px 16px; display: grid; gap: 8px; }
.lg-br[data-lane="now"] .lg-cc { border-color: var(--lg-text); }
.lg-commit:has(.lg-cc)::before { top: 18px; }
.lg-br[data-lane="now"] .lg-commit:has(.lg-cc)::before { top: 17px; }
.lg-cc h3 { margin: 0; font: 700 1.125rem/1.2 var(--lg-sans); letter-spacing: -.02em; }
.lg-cc p { margin: 0; font-size: .9375rem; color: var(--lg-pencil); }
.lg-cc .lg-when { font: 500 .75rem/1.3 var(--lg-mono); color: var(--lg-text); letter-spacing: .02em; }
.lg-commit-card { font-weight: 400; }
.lg-commit-card b { display: block; font: 700 1.0625rem/1.25 var(--lg-sans); letter-spacing: -.02em; }
/* Your vote, as commit dots: Must have fills two, Nice to have one. */
.lg-pips { display: inline-flex; gap: 5px; vertical-align: middle; }
.lg-pips i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--lg-text); }
.lg-voted-must .lg-pips i, .lg-pips.lg-voted-must i, .lg-pips i.lg-on, [data-lg-voted="Must have"] .lg-pips i, [data-lg-voted="Nice to have"] .lg-pips i:first-child { background: var(--lg-hl); box-shadow: inset 0 0 0 2.5px var(--lg-ink); }
[data-lg-voted="Nice to have"] .lg-pips i + i { display: none; }
.lg-pips-label { font: 500 .75rem/1.2 var(--lg-mono); color: var(--lg-text); margin-left: 8px; letter-spacing: .02em; }
.lg-commit-card .lg-pips { margin-top: 10px; }

/* ---------- report as a diff card, status as a branch line ---------- */
.lg-diff { background: var(--lg-sheet); color: var(--lg-text); border: 1.5px solid var(--lg-rule-strong); border-radius: 6px; overflow: hidden; min-width: 0; overflow-wrap: anywhere; }
.lg-diff-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 9px 14px; background: var(--lg-head); border-bottom: 1px solid var(--lg-rule); font: 500 .75rem/1.3 var(--lg-mono); color: var(--lg-pencil); letter-spacing: .02em; }
.lg-diff-head .k-badge { margin-left: auto; }
.lg-diff-area::before { content: "~/"; opacity: 1; }
.lg-diff-body { padding: 14px 16px 16px; display: grid; gap: 12px; }
.lg-diff-title { margin: 0; font: 700 1.3125rem/1.18 var(--lg-sans); letter-spacing: -.025em; }
.k-steps.lg-branch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 2px 0 0; padding: 0; list-style: none; }
.lg-branch li { position: relative; padding: 24px 4px 0 0; font: 500 .625rem/1.2 var(--lg-mono); letter-spacing: .01em; white-space: normal; color: var(--lg-pencil); hyphens: none; overflow-wrap: normal; }
.k-steps.lg-branch li::before { content: ""; position: absolute; box-sizing: border-box; top: 2px; left: 0; right: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--lg-sheet); border: 2.5px solid var(--lg-rule-strong); animation: none; z-index: 1; }
.lg-branch li::after { content: ""; position: absolute; top: 8px; left: 12px; right: 0; height: 2.5px; background: var(--lg-rule); }
.lg-branch li:last-child::after { display: none; }
.lg-branch li.k-done, .lg-branch li.k-now { color: var(--lg-text); }
.k-steps.lg-branch li.k-done::before { background: var(--lg-green); border-color: var(--lg-green); }
.lg-branch li.k-done::after { background: var(--lg-green); }
.k-steps.lg-branch li.k-now::before { width: 18px; height: 18px; top: 0; background: var(--lg-hl); border: 3px solid var(--lg-text); }
.lg-branch li.k-now { font-weight: 600; }
[data-k-state="off"] .lg-branch li { opacity: 1; }
.lg-details { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--lg-rule); }
.lg-details p { margin: 0; color: var(--lg-pencil); font-size: .9375rem; line-height: 1.5; flex: 1; min-width: 0; }
.lg-shot { width: 112px; height: 70px; object-fit: cover; border: 1.5px solid var(--lg-rule); border-radius: 4px; flex: none; }
.lg-shot:not([src]), .lg-shot[src=""] { display: none; }
.lg-reply { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; padding: 10px 12px; background: var(--lg-green-soft); border-left: 3px solid var(--lg-green); border-radius: 0 4px 4px 0; font-size: .9375rem; line-height: 1.45; }
.lg-reply::before { content: "+"; grid-row: span 2; font: 700 1rem/1.4 var(--lg-mono); color: var(--lg-green); }
.lg-reply-by { font: 600 .6875rem/1.4 var(--lg-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--lg-green); }
.lg-reply q { quotes: none; }
.lg-reply:has(q:empty) { display: none; }
.lg-noreply { margin: 0; padding: 10px 12px; border-left: 3px dashed var(--lg-rule-strong); font-size: .9375rem; color: var(--lg-pencil); }
.lg-diff:has(.lg-reply q:not(:empty)) .lg-noreply { display: none; }
/* The excerpt binding stays in the markup (one per report, as before); the full reply below shows the text. */
.lg-excerpt { display: none; }

/* ---------- sheets, forms ---------- */
.lg-sheet { background: var(--lg-sheet); color: var(--lg-text); border: 1.5px solid var(--lg-rule-strong); box-shadow: 6px 6px 0 var(--lg-shadow); padding: 18px 18px 22px; min-width: 0; }
.lg-sheet-mast { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 8px; border-bottom: 4px solid var(--lg-text); font: 600 .75rem/1 var(--lg-mono); letter-spacing: .06em; text-transform: uppercase; }
.lg-sheet-mast span:last-child { color: var(--lg-pencil); font-weight: 500; }
@media (min-width: 640px) { .lg-sheet { padding: 24px 28px 28px; } }
.lg-sheet .k-field { margin: 0 0 22px; min-width: 0; }
.lg-sheet .k-field label { font: 500 .75rem/1.3 var(--lg-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--lg-pencil); }
.lg-sheet .k-field :is(input:not([type="file"]), select, textarea) { border: 0; border-bottom: 2px solid var(--lg-text); border-radius: 0; box-shadow: none; padding: 10px 2px 8px; min-height: 48px; color: var(--lg-text); font: 500 1.125rem/1.35 var(--lg-sans); letter-spacing: -.01em;
  background: transparent linear-gradient(var(--lg-hl), var(--lg-hl)) no-repeat 0 100% / 0% 9px; transition: background-size .45s cubic-bezier(.3, .7, .2, 1); }
.lg-sheet .k-field textarea { min-height: 140px; background-image: repeating-linear-gradient(transparent 0 29px, var(--lg-rule) 29px 30px), linear-gradient(var(--lg-hl), var(--lg-hl)); background-size: 100% 30px, 0% 9px; background-position: 0 6px, 0 100%; background-repeat: repeat, no-repeat; line-height: 30px; }
.lg-sheet .k-field select { background-image: linear-gradient(var(--lg-hl), var(--lg-hl)); }
.lg-sheet .k-field :is(input:not([type="file"]), select):focus { outline: none; background-size: 100% 9px; }
.lg-sheet .k-field textarea:focus { outline: none; background-size: 100% 30px, 100% 9px; }
.lg-sheet .k-field :is(input, select, textarea):focus-visible { outline: none; }
.lg-sheet .k-help { color: var(--lg-pencil); font-size: .8125rem; }
.lg-sheet input[type="file"] { font: 500 .9375rem var(--lg-sans); color: var(--lg-text); }

/* ---------- public page ---------- */
.lg-pub .lg-mast { position: sticky; top: 0; z-index: 20; background: var(--lg-paper); border-bottom: 1.5px solid var(--lg-text); backdrop-filter: none; -webkit-backdrop-filter: none; }
.lg-brand { display: flex; align-items: center; gap: 10px; font: 800 1.1875rem/1 var(--lg-sans); letter-spacing: -.035em; color: var(--lg-text); text-decoration: none; }
.lg-brand img { border-radius: 6px; flex: none; }
.lg-pub .k-top-links a { font: 500 .8125rem/1 var(--lg-mono); letter-spacing: .02em; color: var(--lg-text); }
.lg-pub .k-top-links a:hover { background: none; text-decoration: underline; }
.lg-pub .k-top a.k-signin, .lg-app .k-top a.k-signin { border-radius: 6px; background: var(--lg-text); color: var(--lg-paper); font: 600 .9375rem/1 var(--lg-sans); min-height: 44px; }
@media (max-width: 899px) { .lg-pub .k-top-links { display: none; } }
.lg-pmain { display: block; overflow-x: clip; }
.lg-wrap { max-width: var(--k-max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 1024px) { .lg-wrap { padding: 0 40px; } }
/* Poster: the headline is the layout; the zine page and the graph sit beside each other below it. */
.lg-poster { max-width: var(--k-max); margin: 0 auto; padding: 22px 16px 48px; }
.lg-stamp { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; font: 500 .75rem/1.3 var(--lg-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--lg-pencil); }
.lg-ver { color: var(--lg-text); font-weight: 600; padding: 3px 8px; border: 1.5px solid var(--lg-text); border-radius: 4px; transform: rotate(-2deg); }
.lg-hero { margin: 0; font: 800 clamp(2.875rem, 9.4vw, 9.5rem)/.95 var(--lg-sans); letter-spacing: -.055em; max-width: 13ch; }
.lg-poster-grid { display: grid; gap: 36px; margin-top: 26px; }
.lg-lead { margin: 0; font: 400 1.125rem/1.5 var(--lg-sans); color: var(--lg-text); max-width: 42ch; letter-spacing: -.01em; }
.lg-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.lg-small { margin: 16px 0 0; font-size: .875rem; color: var(--lg-pencil); max-width: 44ch; }
.lg-small a { color: var(--lg-text); }
.lg-zine-poster { transform: rotate(-.6deg); --lg-sheet: var(--lg-poster-sheet); --lg-head: var(--lg-poster-sheet); --lg-text: var(--lg-ink); --lg-pencil: var(--lg-poster-pencil); --lg-rule-strong: var(--lg-ink); }
@media (max-width: 1023px) { .lg-zine-poster { margin-bottom: 32px; } }
@media (max-width: 599px) { .lg-zine-poster { transform: none; } }
@media (min-width: 1024px) {
  .lg-poster { padding: 40px 40px 80px; }
  .lg-hero { max-width: none; }
  .lg-poster-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8.6fr); gap: 48px; align-items: start; margin-top: 40px; }
  .lg-poster-copy { padding-top: 6px; position: relative; z-index: 1; }
.lg-poster-band { position: relative; isolation: isolate; display: grid; gap: 36px; min-width: 0; }
.lg-poster-band::before { content: ""; position: absolute; z-index: -1; top: -14px; bottom: -28px; left: 0; right: min(calc(620px - 50vw), -40px); background: var(--lg-hl); border-block: 1.5px solid var(--lg-ink); }
.lg-poster-band { color: var(--lg-ink); --lg-sheet: var(--lg-poster-sheet); --lg-head: var(--lg-poster-sheet); --lg-text: var(--lg-ink); --lg-pencil: var(--lg-poster-pencil); --lg-rule: rgba(16, 24, 40, .14); --lg-rule-strong: var(--lg-ink); --lg-green: var(--lg-ink); --lg-on-green: var(--lg-poster-sheet); --lg-shadow: var(--lg-ink); --lg-dotfill: var(--lg-poster-sheet); }
.lg-graph-poster { --lg-text: var(--lg-ink); --lg-pencil: var(--lg-poster-pencil); --lg-dotfill: var(--lg-poster-sheet); }
.lg-graph-poster .lg-ref { background: var(--lg-poster-sheet); color: var(--lg-ink); }
.lg-graph-poster .lg-graph-title { color: var(--lg-ink); }
  .lg-graph-poster { padding-top: 4px; }
  .lg-poster-band { grid-template-columns: minmax(0, 5fr) minmax(0, 3.6fr); gap: 48px; align-items: start; padding-top: 4px; }
  .lg-poster-band::before { top: 0; bottom: -40px; }
}
/* Band: the app at real size. */
.lg-band { background: var(--lg-hl); color: var(--lg-ink); border-block: 1.5px solid var(--lg-ink); padding: 48px 0 56px; }
.lg-band .lg-eyebrow, .lg-band .lg-num { color: var(--lg-ink); }
.lg-band .lg-diff { box-shadow: 4px 4px 0 var(--lg-ink); }
.lg-band .lg-diff-head, .lg-band .lg-kind, .lg-band .k-badge { font-size: .8125rem; }
.lg-band .lg-diff-title { font-size: 1.625rem; }
.lg-band .k-steps.lg-branch li { font-size: .6875rem; }
.lg-h2 { margin: 0 0 28px; font: 800 clamp(2rem, 6.4vw, 3.75rem)/.98 var(--lg-sans); letter-spacing: -.045em; max-width: 18ch; }
.lg-screens { display: grid; gap: 32px; }
.lg-screen { margin: 0; min-width: 0; }
.lg-screen figcaption { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font: 700 1rem/1 var(--lg-sans); letter-spacing: -.02em; }
.lg-road-mini { --lg-dotfill: var(--lg-sheet); }
.lg-road-mini .lg-graph { --pad: 72px; }
.lg-sheet-mini { box-shadow: 4px 4px 0 var(--lg-shadow); }
.lg-mini-kinds { display: flex; gap: 6px; margin: 0 0 18px; }
.lg-mini-kinds span { padding: 7px 12px; border: 1.5px solid var(--lg-rule); border-radius: 4px; font: 600 .875rem/1 var(--lg-sans); color: var(--lg-pencil); }
.lg-mini-kinds .lg-on { border-color: var(--lg-text); color: var(--lg-ink); background: url(art/swash.svg) no-repeat center / 100% 100%; background-color: var(--lg-hl); }
.lg-mini-field { display: grid; gap: 6px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--lg-text); }
.lg-mini-field span { font: 500 .6875rem/1 var(--lg-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--lg-pencil); }
.lg-mini-field b { font: 500 1rem/1.35 var(--lg-sans); }
.lg-mini-focus { border-bottom: 0; padding-bottom: 10px; background: linear-gradient(var(--lg-hl), var(--lg-hl)) no-repeat 0 100% / 100% 9px; box-shadow: inset 0 -2px 0 var(--lg-text); }
.lg-mini-btn { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 0; padding: 0 18px; border-radius: 6px; background: var(--lg-green); color: var(--lg-on-green); font: 600 .9375rem/1 var(--lg-sans); border: 1.5px solid var(--lg-shadow); box-shadow: 3px 3px 0 var(--lg-shadow); }
@media (min-width: 1024px) { .lg-band { padding: 80px 0 88px; } .lg-screens { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 40px; align-items: start; } .lg-screen:first-child { grid-row: 1 / span 2; } }
/* Join, price. */
.lg-join { padding: 56px 0; }
.lg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 4px solid var(--lg-text); }
.lg-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0; border-bottom: 1px solid var(--lg-rule); }
.lg-steps .lg-num { grid-row: span 2; font-size: 1rem; padding-top: 6px; color: var(--lg-green); }
.lg-steps h3 { margin: 0; font: 800 1.625rem/1.05 var(--lg-sans); letter-spacing: -.035em; }
.lg-steps p { margin: 0; color: var(--lg-pencil); max-width: 40ch; }
.lg-price { display: grid; gap: 24px; margin-top: 40px; padding: 24px 20px; background: var(--lg-sheet); border: 1.5px solid var(--lg-rule-strong); box-shadow: 6px 6px 0 var(--lg-shadow); }
.lg-price-big { margin: 0; font: 800 clamp(3rem, 12vw, 5.5rem)/.9 var(--lg-sans); letter-spacing: -.055em; }
.lg-price-big span { display: block; margin-top: 8px; font: 500 .875rem/1.2 var(--lg-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--lg-pencil); }
.lg-price-off { margin: 0 0 10px; font: 800 clamp(1.75rem, 6vw, 2.5rem)/1 var(--lg-sans); letter-spacing: -.04em; }
.lg-price-deal p:not(.lg-price-off) { margin: 0 0 14px; color: var(--lg-pencil); max-width: 46ch; }
.lg-pips-3 i:nth-child(-n+3) { background: var(--lg-hl); box-shadow: inset 0 0 0 2.5px var(--lg-ink); }
@media (min-width: 1024px) {
  .lg-join { padding: 96px 0; }
  .lg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; border-top: 0; }
  .lg-steps li { grid-template-columns: 1fr; border-top: 4px solid var(--lg-text); border-bottom: 0; padding-top: 16px; }
  .lg-steps .lg-num { grid-row: auto; padding: 0; }
  .lg-price { grid-template-columns: 1fr 1.4fr; gap: 48px; padding: 36px 40px; align-items: end; }
}
/* Final: an ink field. */
.lg-final { background: var(--lg-final); color: var(--lg-final-ink); padding: 56px 0 60px; }
.lg-final h2 { margin: 0; font: 800 clamp(2.5rem, 8.4vw, 6.5rem)/.95 var(--lg-sans); letter-spacing: -.055em; max-width: 14ch; }
.lg-final p { margin: 18px 0 0; color: var(--lg-final-muted); font-size: 1.0625rem; }
.lg-final .k-btn { border-color: var(--lg-final-ink); box-shadow: 3px 3px 0 var(--lg-hl); }
.lg-final .k-btn-line { background: transparent; color: var(--lg-final-ink); }
@media (prefers-color-scheme: dark) { .lg-final .k-btn:where(:not(.k-btn-line)) { border-color: var(--lg-green); } }
@media (min-width: 1024px) { .lg-final { padding: 96px 0 100px; } }
.lg-foot, .k-app .k-foot { font: 500 .75rem/1.5 var(--lg-mono); letter-spacing: .02em; color: var(--lg-pencil); border-top: 1.5px solid var(--lg-text); }
.lg-pub .lg-foot { max-width: var(--k-max); margin: 0 auto; padding: 22px 16px 40px; border-top: 0; }
@media (min-width: 1024px) { .lg-pub .lg-foot { padding: 28px 40px 48px; } }
.k-app .k-foot a { color: var(--lg-text); }

/* ---------- privacy ---------- */
.lg-prose { max-width: 720px; margin: 0 auto; padding: 32px 16px 24px; }
.lg-prose h1 { margin: 10px 0 18px; font: 800 clamp(2.75rem, 10vw, 5rem)/.95 var(--lg-sans); letter-spacing: -.055em; }
.lg-prose h2 { margin: 34px 0 8px; padding-top: 10px; border-top: 1.5px solid var(--lg-text); font: 700 1.375rem/1.2 var(--lg-sans); letter-spacing: -.025em; }
.lg-prose p, .lg-prose li { font-size: 1.0625rem; line-height: 1.6; }
.lg-prose ul { padding-left: 20px; }
.lg-prose .tip { padding: 12px 14px; border: 1.5px dashed var(--lg-rule-strong); font: 500 .875rem/1.5 var(--lg-mono); color: var(--lg-pencil); }
.lg-prose .blank { color: var(--lg-ink); background: url(art/swash.svg) no-repeat 0 55% / 100% 90%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .2em; background-color: var(--lg-hl); }
.lg-prose a { color: var(--lg-green); }

/* ---------- member app shell ---------- */
.lg-app .k-top { background: var(--lg-paper); border-bottom: 1.5px solid var(--lg-text); backdrop-filter: none; -webkit-backdrop-filter: none; min-height: 56px; }
.lg-app .k-top .k-brand { display: flex; align-items: center; gap: 10px; font: 800 1.125rem/1 var(--lg-sans); letter-spacing: -.035em; color: var(--lg-text); }
.lg-app .k-top .k-brand img { border-radius: 6px; }
.lg-app .k-top .lg-beta { font: 600 .6875rem/1 var(--lg-mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 6px; border: 1.5px solid var(--lg-text); border-radius: 4px; }
.lg-app .k-avatar { width: 44px; height: 44px; border-radius: 6px; background: var(--lg-text); color: var(--lg-paper); font: 600 .875rem/1 var(--lg-mono); }
.lg-app .lg-pass-link { display: none; }
/* Tabs: zine section markers, numbered. Phones: a bottom strip. Desktop: a strip under the masthead. */
.lg-app .k-tabs { background: var(--lg-sheet); border-top: 1.5px solid var(--lg-text); backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 4px; }
.lg-app .k-tabs a { color: var(--lg-text); gap: 3px; min-height: 52px; border-radius: 0; font: 600 .75rem/1.1 var(--lg-sans); justify-content: center; }
.lg-tn { font: 500 .6875rem/1 var(--lg-mono); color: var(--lg-pencil); letter-spacing: .04em; }
.lg-app .k-tabs a > span { padding: 2px 5px; }
.lg-app .k-tabs a[aria-current="page"] { color: var(--lg-ink); }
.lg-app .k-tabs a[aria-current="page"] > span { background: url(art/swash.svg) no-repeat center / 100% 100%; background-color: var(--lg-hl); color: var(--lg-ink); }
.lg-app .k-tabs a[aria-current="page"] .lg-tn { color: var(--lg-text); }
@media (min-width: 1024px) {
  .k-app.lg-app[data-k-nav="top"] .k-top { min-height: 72px; border-bottom: 0; }
  .k-app.lg-app[data-k-nav="top"] .k-top .k-brand { font-size: 1.375rem; }
  .lg-app .lg-pass-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font: 500 .8125rem/1 var(--lg-mono); letter-spacing: .02em; color: var(--lg-text); }
  .k-app.lg-app[data-k-nav="top"] .k-tabs { background: var(--lg-paper); border-top: 4px solid var(--lg-text); border-bottom: 1.5px solid var(--lg-text); gap: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 0; }
  .k-app.lg-app[data-k-nav="top"] .k-tabs a { flex-direction: row; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 0; margin-right: 22px; border-right: 1px solid var(--lg-rule); font: 700 1rem/1 var(--lg-sans); letter-spacing: -.015em; color: var(--lg-text); box-shadow: none; }
  .k-app.lg-app[data-k-nav="top"] .k-tabs a:hover > span:not(.lg-tn) { text-decoration: underline; text-decoration-thickness: 2px; }
  .k-app.lg-app[data-k-nav="top"] .k-tabs a[aria-current="page"] { background: none; box-shadow: none; }
  .lg-app .k-tabs a > span { padding: 4px 8px; }
}
.lg-app .k-main { padding-top: 8px; }
/* Page heads: the member's situation, set big. */
.lg-app .k-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 18px 0 24px; }
.lg-app .k-pagehead h1 { margin: 12px 0 0; font: 800 clamp(2.5rem, 10.6vw, 5rem)/.95 var(--lg-sans); letter-spacing: -.055em; max-width: 16ch; }
.lg-app .k-pagehead .k-kicker { margin-bottom: 12px; }
.lg-app .k-pagehead p:not(.k-kicker) { margin: 12px 0 0; color: var(--lg-pencil); }
.lg-app .k-pagehead-actions { display: flex; gap: 10px; }
.lg-app .k-pagehead > div { min-width: 0; max-width: 100%; }
.lg-app .k-pagehead h1 { overflow-wrap: anywhere; }
@media (min-width: 1024px) { .lg-app .k-pagehead { margin: 40px 0 36px; } }
.lg-app .k-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1.5px solid var(--lg-text); }
.lg-app .k-section-head h2 { margin: 0; font: 800 1.375rem/1.1 var(--lg-sans); letter-spacing: -.03em; }
.lg-app .k-section-head a { padding: 6px 0; margin: -6px 0; font: 500 .8125rem/1.2 var(--lg-mono); color: var(--lg-green); letter-spacing: .02em; }
.lg-app .k-board { gap: 32px; }
@media (min-width: 1024px) { .lg-app .k-board { gap: 40px 48px; } }
.lg-col { display: grid; gap: 28px; align-content: start; min-width: 0; }
.lg-col > * { margin: 0; }
.lg-stack { display: grid; gap: 14px; }
/* Founding tester: three commit dots. */
.lg-perk { display: grid; gap: 10px; padding: 16px 18px; background: var(--lg-sheet); border: 1.5px solid var(--lg-rule-strong); border-radius: 6px; }
.lg-perk b { font: 700 1.0625rem/1.25 var(--lg-sans); letter-spacing: -.02em; }
.lg-perk .lg-sub { display: block; font: 500 .75rem/1.4 var(--lg-mono); color: var(--lg-pencil); letter-spacing: .01em; margin-top: 4px; }
.lg-perk-row { display: flex; align-items: center; gap: 14px; }
.lg-perk .lg-pips { gap: 0; position: relative; }
.lg-perk .lg-pips i { width: 18px; height: 18px; margin-right: 18px; position: relative; }
.lg-perk .lg-pips i + i::before { content: ""; position: absolute; right: 100%; top: 7.5px; width: 18px; height: 3px; background: var(--lg-rule-strong); }
.lg-perk .lg-pips i.lg-on + i.lg-on::before { background: var(--lg-green); }
.lg-perk .lg-pips i.lg-on { background: var(--lg-green); box-shadow: none; }
.lg-perk .lg-pips i:last-child { margin-right: 0; }
/* Cards, rows, panels from the kit, in the zine's look. */
.lg-app .k-card { background: var(--lg-sheet); border: 1px solid var(--lg-rule-strong); border-radius: 0; box-shadow: none; }
.lg-app .k-card h2 { font: 800 1.25rem/1.15 var(--lg-sans); letter-spacing: -.03em; margin: 0 0 8px; }
.lg-app .k-card p { color: var(--lg-pencil); }
.lg-note { margin: 0; font-size: .875rem; color: var(--lg-pencil); }
.lg-note a { color: var(--lg-text); }
.lg-tips { margin: 8px 0 0; padding-left: 0; list-style: none; counter-reset: lg; display: grid; gap: 8px; }
.lg-tips li { counter-increment: lg; display: grid; grid-template-columns: 28px 1fr; font-size: .9375rem; }
.lg-tips li::before { content: counter(lg, decimal-leading-zero); font: 500 .75rem/1.6 var(--lg-mono); color: var(--lg-green); }
/* Empty states: a blank page with a swash where the words go. */
.lg-app .k-empty { background: var(--lg-sheet); border: 1.5px dashed var(--lg-rule-strong); border-radius: 6px; padding: 32px 20px; }
.lg-app .k-empty .k-empty-art { width: 104px; height: 44px; border-radius: 0; background: url(art/swash.svg) no-repeat center / 100% 100%; color: var(--lg-ink); }
.lg-app .k-empty .k-empty-art .k-i { width: 24px; height: 24px; }
.lg-app .k-empty h3 { font: 800 1.375rem/1.1 var(--lg-sans); letter-spacing: -.03em; }
/* Toasts and add-form status. */
.k-app .k-toast, .k-app [data-pl-status]:not(:empty) { background: var(--lg-text); color: var(--lg-paper); border-radius: 6px; font: 500 .9375rem/1.4 var(--lg-sans); }
.k-app [data-pl-status][data-state="error"]:not(:empty)::after { color: var(--lg-text); white-space: normal; }
/* Signed-out inner pages: a blank zine page, testers only. */
.lg-gate { max-width: 560px; margin: 24px auto 0; text-align: left; }
.lg-gate h1 { margin: 0 0 12px; font: 800 clamp(2.5rem, 10vw, 3.75rem)/.95 var(--lg-sans); letter-spacing: -.05em; }
.lg-gate p { margin: 0 0 20px; color: var(--lg-pencil); font-size: 1.0625rem; }
/* Signed-out welcome. */
.lg-app .k-welcome { padding-top: 12px; }
.lg-app .k-welcome-art { aspect-ratio: auto; overflow: visible; border-radius: 0; box-shadow: none; background: none; margin: 0; }
.lg-app .k-welcome-art::after { display: none; }
.lg-app .k-welcome-art figcaption { position: static; margin-top: 18px; color: var(--lg-pencil); font: 500 .75rem/1.3 var(--lg-mono); letter-spacing: .04em; text-transform: uppercase; }
.lg-app .k-welcome h1 { font: 800 clamp(2.75rem, 11vw, 5.5rem)/.95 var(--lg-sans); letter-spacing: -.055em; }
.lg-app .k-welcome .k-lead { color: var(--lg-text); font-size: 1.125rem; }
.lg-app .k-welcome .k-perks li { font-size: 1rem; }
.lg-app .k-welcome .k-perks .k-tile { background: none; color: var(--lg-green); font: 600 .8125rem/1 var(--lg-mono); }
.lg-app .k-welcome > div { display: grid; gap: 16px; align-content: center; }
.lg-app .k-welcome > div > * { margin: 0; }
@media (max-width: 1023px) { .lg-app .k-welcome .k-welcome-art { aspect-ratio: auto; } }

/* ---------- Home ---------- */
/* Home head: paper, no band. Desktop: the send button sits under the headline, 24px down. */
.lg-app .lg-home-head { justify-content: flex-start; align-items: center; }
@media (min-width: 1024px) { .lg-app .lg-home-head { flex-direction: column; align-items: flex-start; } .lg-app .lg-home-head .k-pagehead-actions { margin: 24px 0 0; } }
.lg-app .lg-home-head > div:first-child { flex: 0 1 auto; }
.lg-app .lg-home-head .k-pagehead-actions { margin-left: 0; }
@media (max-width: 1023px) { .lg-home-perk, .lg-home-note { order: 3; } }
.lg-home-zine .lg-zine-h { font-size: clamp(2.125rem, 9vw, 3.75rem); }
.lg-home-zine .lg-zine-items p { font-size: 1.125rem; }
@media (min-width: 1024px) { .lg-home-zine { padding: 28px 36px 18px; } .lg-home-zine .lg-zine-items li { grid-template-columns: 92px minmax(0, 1fr); padding: 16px 0; } }
@media (max-width: 1023px) { .lg-home-left { display: contents; } .lg-home-now { order: 2; } }
.lg-mini-graph { padding: 16px 16px 6px; background: var(--lg-sheet); border: 1px solid var(--lg-rule-strong); border-radius: 0; --lg-dotfill: var(--lg-sheet); }
.lg-mini-graph .lg-graph { --pad: 60px; }
.lg-mini-graph .lg-commit a { text-decoration: none; display: inline-block; padding: 3px 0; }
.lg-mini-graph .lg-commit a:hover { text-decoration: underline; }

/* ---------- Reports ---------- */
.lg-reports { display: grid; gap: 18px; }
.lg-legend { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.lg-legend li { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--lg-rule); font-size: .875rem; color: var(--lg-pencil); }
.lg-legend .k-badge { justify-self: start; }
.lg-count { font: 500 .8125rem/1.3 var(--lg-mono); color: var(--lg-pencil); }

/* ---------- Send ---------- */
.lg-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.lg-kinds .k-item { display: grid; gap: 6px; align-content: start; justify-items: start; min-height: 64px; padding: 12px; border: 1.5px solid var(--lg-rule); border-radius: 6px; background: transparent; color: var(--lg-text); text-align: left; box-shadow: none; cursor: pointer; }
.lg-kinds .k-item-name { font: 700 1rem/1.1 var(--lg-sans); letter-spacing: -.02em; padding: 2px 4px; margin-left: -4px; }
.lg-kinds .k-item-desc { display: none; font-size: .8125rem; color: var(--lg-pencil); line-height: 1.4; }
.lg-kinds .k-item[aria-pressed="true"], .lg-kinds .k-item.k-on, .lg-kinds .k-item[aria-checked="true"] { border-color: var(--lg-text); box-shadow: 3px 3px 0 var(--lg-shadow); }
.lg-kinds .k-item:is([aria-pressed="true"], .k-on, [aria-checked="true"]) .k-item-name { background: url(art/swash.svg) no-repeat center / 100% 100%; background-color: var(--lg-hl); color: var(--lg-ink); }
@media (min-width: 640px) { .lg-kinds .k-item-desc { display: block; } }
@media (max-width: 374px) { .lg-kinds { grid-template-columns: 1fr; } }
.lg-picked { display: grid; gap: 2px; margin: 0 0 22px; padding: 10px 12px; border-left: 3px solid var(--lg-green); background: var(--lg-green-soft); font-size: .875rem; }
.lg-picked b { font: 600 .6875rem/1.4 var(--lg-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lg-green); }
.lg-send-foot { display: grid; gap: 14px 28px; align-items: start; }
.lg-next { display: grid; gap: 10px; min-width: 0; }
.lg-next h2 { margin: 0; font: 800 1.125rem/1.15 var(--lg-sans); letter-spacing: -.03em; }
.lg-next p { margin: 0; color: var(--lg-pencil); font-size: .9375rem; }
@media (min-width: 1024px) { .lg-send-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }

/* ---------- Roadmap ---------- */
.lg-road .lg-graph { --pad: 84px; }
@media (max-width: 639px) { .lg-road .lg-graph { --step: 12px; --pad: 58px; } .lg-road .lg-cc { padding: 12px 14px; } }
.lg-road .lg-br { padding-bottom: 34px; }
.lg-road .k-chips { margin-bottom: 24px; }
.lg-road .k-chip:is(:hover, :focus-visible) { background: var(--lg-hl); color: var(--lg-ink); box-shadow: inset 0 0 0 1.5px var(--lg-ink); }
.lg-road .lg-br-head { margin-bottom: 12px; font: 800 1.375rem/1.1 var(--lg-sans); letter-spacing: -.03em; color: var(--lg-text); }
.lg-road .lg-ref { font-size: .8125rem; min-height: 26px; }
.lg-road .lg-commit { padding-bottom: 14px; }
.lg-vote { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-top: 4px; }
.lg-vote .k-field { margin: 0; flex: 1 1 150px; }
.lg-vote select { min-height: 44px; border: 1.5px solid var(--lg-rule-strong); border-radius: 6px; background-color: var(--lg-sheet); color: var(--lg-text); font: 500 .9375rem var(--lg-sans); padding: 0 10px; width: 100%; }
.lg-vote details { flex-basis: 100%; }
.lg-vote summary { font: 500 .8125rem/1 var(--lg-mono); color: var(--lg-pencil); cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.lg-vote textarea { width: 100%; min-height: 80px; margin-top: 6px; border: 1.5px solid var(--lg-rule-strong); border-radius: 6px; background: var(--lg-sheet); color: var(--lg-text); padding: 10px; font: 400 .9375rem/1.4 var(--lg-sans); }
.lg-voted { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; font: 500 .8125rem/1.2 var(--lg-mono); color: var(--lg-text) !important; }
.lg-voted[hidden] { display: none; }
.lg-shipped-list .lg-commit { font-weight: 600; }
.lg-shipped-list .lg-commit a { text-decoration: none; }
.lg-shipped-list .lg-commit a:hover { text-decoration: underline; }
.lg-votes-list { display: grid; gap: 0; }
.lg-vote-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--lg-rule); }
.lg-vote-row b { font: 600 .9375rem/1.3 var(--lg-sans); }
.lg-vote-row .lg-why { grid-column: 1; font-size: .8125rem; color: var(--lg-pencil); }
.lg-vote-row .lg-why:empty { display: none; }
@media (min-width: 1024px) { .lg-sticky { position: sticky; top: 96px; align-self: start; } }

/* ---------- Changelog ---------- */
.lg-issues { display: grid; gap: 36px; }
.lg-issue-old { box-shadow: 4px 4px 0 var(--lg-shadow); }
.lg-issue-old .lg-zine-h { font-size: clamp(1.5rem, 5.6vw, 2rem); }
.lg-next-issue { border: 1.5px dashed var(--lg-rule-strong); padding: 18px 20px; display: grid; gap: 8px; border-radius: 2px; }
.lg-next-issue h2 { margin: 0; font: 800 1.75rem/1 var(--lg-sans); letter-spacing: -.04em; }
.lg-next-issue p { margin: 0; color: var(--lg-pencil); }
@media (min-width: 1024px) { .lg-issues-old { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; } }
.lg-issues-old { display: grid; gap: 28px; }

/* ---------- Account: the beta pass ---------- */
.lg-pass { position: relative; display: grid; gap: 14px; padding: 22px 22px 20px; background: var(--lg-sheet); color: var(--lg-text); border: 1.5px solid var(--lg-rule-strong); border-radius: 10px; box-shadow: 6px 6px 0 var(--lg-shadow); overflow-wrap: anywhere; }
.lg-pass::before { content: ""; position: absolute; left: 0; right: 0; top: 64px; border-top: 2px dashed var(--lg-rule-strong); }
.lg-pass-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 32px; font: 600 .75rem/1 var(--lg-mono); letter-spacing: .08em; text-transform: uppercase; }
.lg-pass-top span:last-child { padding: 4px 8px; border: 1.5px solid var(--lg-text); border-radius: 4px; transform: rotate(3deg); }
.lg-pass-name { margin: 18px 0 0; font: 800 clamp(2.25rem, 9vw, 3.5rem)/.92 var(--lg-sans); letter-spacing: -.05em; }
.lg-pass-co { margin: 0; font: 500 .9375rem/1.3 var(--lg-mono); color: var(--lg-pencil); }
.lg-pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--lg-rule); }
.lg-pass-grid dt { font: 500 .6875rem/1.2 var(--lg-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--lg-pencil); }
.lg-pass-grid dd { margin: 4px 0 0; font: 700 1rem/1.2 var(--lg-sans); }
.lg-app .k-account > p:first-child, .lg-app .k-account ul, .lg-app .k-account form:has(input[type="checkbox"]) { background: var(--lg-sheet); border: 1.5px solid var(--lg-text); border-radius: 0; box-shadow: none; }
.lg-app .k-account :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea) { width: 100%; min-height: 48px; border: 0; border-bottom: 2px solid var(--lg-text); border-radius: 0; box-shadow: none; background: transparent; color: var(--lg-text); font: 500 1.0625rem/1.35 var(--lg-sans); padding: 10px 2px 8px; }
.lg-app .k-account form:not(:has(input:not([type="hidden"]), select, textarea)) > button { background: transparent; color: var(--lg-text); border: 1.5px solid var(--lg-text); border-radius: 6px; box-shadow: none; min-height: 44px; padding: 0 18px; font: 600 1rem/1 var(--lg-sans); width: auto; justify-self: start; }
.lg-app .k-account > form:has(input:not([type="hidden"]), select, textarea) { background: var(--lg-sheet); border: 1.5px solid var(--lg-text); border-radius: 0; box-shadow: none; padding: 18px 20px; }
.lg-app .k-account li + li { border-top: 1.5px solid var(--lg-text); }
.lg-app .k-account h3 { font: 500 .75rem/1.3 var(--lg-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lg-pencil); }
.lg-app .k-account button { border-radius: 0; }
/* Account: mono caps labels, Save profile with the offset shadow of Send, Leave in a pencil outline. */
.lg-app .k-account form:has(input[type="text"], select, textarea) label { font: 500 .75rem/1.3 var(--lg-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--lg-pencil); }
.lg-app .k-account form:has(input[type="text"], select, textarea) > button { min-height: 48px; border: 1.5px solid var(--lg-shadow); border-radius: 6px; box-shadow: 3px 3px 0 var(--lg-shadow); font: 600 1rem/1 var(--lg-sans); }
@media (prefers-color-scheme: dark) { .lg-app .k-account form:has(input[type="text"], select, textarea) > button { border-color: var(--lg-green); } }
.lg-app .k-account form:has(input[type="checkbox"]) button { background: transparent; color: var(--lg-text); border: 1.5px solid var(--lg-pencil); box-shadow: none; }

/* Long names, emails and replies wrap on a phone. */
.lg-zine, .lg-diff, .lg-cc, .lg-pass, .k-account, .lg-perk { min-width: 0; overflow-wrap: anywhere; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .k-app *, .k-app *::before, .k-app *::after { animation: none !important; transition: none !important; }
}