/* Fermata · base and components
   Needs tokens.css first. Each component is fenced `── f-<name> ──` so it can
   be lifted into its own sidecar file. States live on native attributes;
   variants on data-variant. [data-force~="hover|focus"] pins a state for docs. */

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--f-paper);
  color: var(--f-graphite);
  font-family: var(--f-voice);
  font-size: var(--f-p);
  line-height: var(--f-p-lh);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--f-andante) var(--f-breath), color var(--f-andante) var(--f-breath);
}
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(h1, h2, h3, h4) { color: var(--f-ink); font-weight: 400; }
:where(input, textarea, select, button) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(input, textarea) { caret-color: var(--f-accent); }
::selection { background: var(--f-mark); color: var(--f-on-mark); }
:focus-visible, [data-force~="focus"] { outline: var(--f-stroke) solid var(--f-accent); outline-offset: 4px; }
mark { background: var(--f-mark); color: var(--f-on-mark); padding: 0 0.08em; }
hr { border: 0; height: var(--f-hairline); background: var(--f-rule); margin: 0; }
[hidden] { display: none !important; } /* components set display; hidden still wins */
img, svg { display: block; max-width: 100%; }
/* Scrollbars: a thin stroke on nothing. Pointing at a scroller darkens it from rule to pencil. */
:root { scrollbar-color: var(--f-rule-strong) transparent; }
:where(html, body *) { scrollbar-width: thin; }
:where(.f-scroll, textarea, [role="listbox"]):hover { scrollbar-color: var(--f-pencil) transparent; }
@supports not (scrollbar-color: auto) {
  /* Safari: the thumb is a hairline down the middle of its gutter, and thickens when pointed at. */
  ::-webkit-scrollbar { width: 11px; height: 11px; background: transparent; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(var(--f-rule-strong) 0 0) center / 2px 100% no-repeat; }
  ::-webkit-scrollbar-thumb:horizontal { background-size: 100% 2px; }
  ::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(var(--f-pencil) 0 0); background-size: 5px 100%; }
  ::-webkit-scrollbar-thumb:horizontal:hover { background-size: 100% 5px; }
  ::-webkit-scrollbar-corner { background: transparent; }
}

/* ── motion ── the shared articulations. Pointing sketches (pencil, a hairline,
   a ring); choosing inks (the accent, a fill), and inked things land with
   one small rebound. Strokes leave the way they were heading. */
@keyframes f-arrive { from { opacity: 0; translate: 0 0.3em; } }
@keyframes f-land   { from { scale: 0.4; } }
@keyframes f-draw-x { from { scale: 0 1; } }
@keyframes f-draw-y { from { scale: 1 0; } }

/* Type roles. Ours are roman (the voice); yours are italic (the expression). */
.f-pp   { font-size: var(--f-pp);   line-height: var(--f-pp-lh);   letter-spacing: var(--f-pp-tr); }
.f-p    { font-size: var(--f-p);    line-height: var(--f-p-lh);    letter-spacing: var(--f-p-tr); }
.f-mp   { font-size: var(--f-mp);   line-height: var(--f-mp-lh);   letter-spacing: var(--f-mp-tr); }
.f-mf   { font-size: var(--f-mf);   line-height: var(--f-mf-lh);   letter-spacing: var(--f-mf-tr); }
.f-f    { font-size: var(--f-f);    line-height: var(--f-f-lh);    letter-spacing: var(--f-f-tr); }
.f-ff   { font-size: var(--f-ff);   line-height: var(--f-ff-lh);   letter-spacing: var(--f-ff-tr); }
.f-fff  { font-size: var(--f-fff);  line-height: var(--f-fff-lh);  letter-spacing: var(--f-fff-tr); }
.f-ffff { font-size: var(--f-ffff); line-height: var(--f-ffff-lh); letter-spacing: var(--f-ffff-tr); }
/* .f-term: foreign words and musical terms, italic by old book convention. */
.f-yours, .f-term {
  font-family: var(--f-expression);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--f-expression-scale) * 1em);
  line-height: 1;
  letter-spacing: 0;
}
.f-label { font-size: var(--f-pp); line-height: var(--f-pp-lh); letter-spacing: var(--f-pp-tr); font-weight: 500; color: var(--f-graphite); }
.f-figures { font-variant-numeric: tabular-nums lining-nums; }
.f-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── f-link ── underline at rest, a highlighter stroke on hover */
.f-link, .f-prose a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--f-hairline);
  text-decoration-color: var(--f-rule-strong);
  text-underline-offset: 0.22em;
  background: linear-gradient(var(--f-mark), var(--f-mark)) no-repeat 100% 88% / 0% 72%;
  transition: background-size var(--f-moderato) var(--f-exhale), background-position 0s, color var(--f-allegro), text-decoration-color var(--f-allegro);
}
/* The stroke goes on from the left and comes off to the right: a pen passing through. */
:is(.f-link, .f-prose a):is(:hover, [data-force~="hover"]) {
  background-position: 0 88%; background-size: 100% 72%;
  color: var(--f-on-mark);
  text-decoration-color: transparent;
}

/* ── f-meta ── a frame row: words held apart by hairlines */
.f-meta { display: flex; align-items: center; gap: var(--f-space-4); font-size: var(--f-pp); line-height: var(--f-pp-lh); color: var(--f-graphite); }
.f-meta > hr { flex: 1; min-width: var(--f-space-5); }

/* ── f-kbd ── a key, drawn as a ring */
.f-kbd {
  display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong);
  font: 500 0.8em/1 var(--f-voice); color: var(--f-ink); vertical-align: 0.1em;
  transition: scale var(--f-moderato) var(--f-spiccato), box-shadow var(--f-allegro);
}
.f-kbd[data-pressed] { scale: 0.86; box-shadow: inset 0 0 0 var(--f-stroke) var(--f-ink); transition-duration: 60ms; }

/* ── f-corners ── four corner marks: a frame that doesn't close.
   Any element with position can wear them; the statement button and the dialog do. */
:is(.f-corners, .f-btn[data-variant="statement"], .f-dialog)::after {
  --l: var(--f-corner, 8px);
  --c: var(--f-corner-colour, var(--f-ink));
  content: ""; position: absolute; inset: var(--f-corner-inset, 0); pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--f-hairline),
    linear-gradient(var(--c), var(--c)) 0 0 / var(--f-hairline) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--f-hairline),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--f-hairline) var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--f-hairline),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--f-hairline) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--f-hairline),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--f-hairline) var(--l);
  background-repeat: no-repeat;
}
.f-corners { position: relative; }

/* ── f-btn ── statement (reversed block), bracket ( ), quiet (a line) */
.f-btn {
  appearance: none; border: 0; background: none; margin: 0; padding: 0;
  display: inline-flex; align-items: baseline; gap: 0.4em;
  font-family: var(--f-voice); font-size: var(--f-p); font-weight: 500; font-stretch: 100%;
  line-height: 1.2; letter-spacing: 0.005em; white-space: nowrap;
  color: var(--f-ink); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.f-btn[data-size="l"] { font-size: var(--f-mp); }
.f-btn:disabled, .f-btn[aria-disabled="true"] { color: var(--f-pencil); cursor: not-allowed; }
.f-btn[aria-busy="true"] { cursor: progress; }

.f-btn[data-variant="statement"] {
  position: relative; --f-corner-inset: -9px;
  background: var(--f-ink); color: var(--f-paper);
  padding: 0.8em 1.15em 0.82em;
  transition: font-stretch var(--f-moderato) var(--f-exhale), font-weight var(--f-moderato) var(--f-exhale), background-color var(--f-allegro), color var(--f-allegro), translate var(--f-allegro) var(--f-exhale);
}
.f-btn[data-variant="statement"]::after { opacity: 0; scale: 1.14 1.3; transition: opacity var(--f-allegro), scale var(--f-andante) var(--f-spiccato); }
.f-btn[data-variant="statement"]:is(:hover, [data-force~="hover"]):not(:disabled, [aria-busy="true"]) { font-stretch: 114%; }
.f-btn[data-variant="statement"]:is(:hover, [data-force~="hover"]):not(:disabled, [aria-busy="true"])::after { opacity: 1; scale: 1; }
.f-btn[data-variant="statement"]:active:not(:disabled, [aria-busy="true"]) { translate: 0 1px; font-weight: 680; font-stretch: 96%; transition-duration: var(--f-allegro); }
.f-btn[data-variant="statement"]:active:not(:disabled, [aria-busy="true"])::after { scale: 0.97 0.84; transition-duration: var(--f-allegro); }
.f-btn[data-variant="statement"]:disabled { background: var(--f-rule); color: var(--f-pencil); }

.f-btn[data-variant="bracket"]::before,
.f-btn[data-variant="bracket"]::after {
  font-weight: 200; font-size: 1.2em; line-height: 0;
  transition: translate var(--f-andante) var(--f-spiccato);
}
.f-btn[data-variant="bracket"]::before { content: "(" / ""; }
.f-btn[data-variant="bracket"]::after { content: ")" / ""; }
.f-btn[data-variant="bracket"]:is(:hover, [data-force~="hover"]):not(:disabled)::before { translate: -0.3em 0; }
.f-btn[data-variant="bracket"]:is(:hover, [data-force~="hover"]):not(:disabled)::after { translate: 0.3em 0; }
.f-btn[data-variant="bracket"]:active:not(:disabled)::before { translate: 0.12em 0; transition-duration: var(--f-allegro); }
.f-btn[data-variant="bracket"]:active:not(:disabled)::after { translate: -0.12em 0; transition-duration: var(--f-allegro); }

.f-btn[data-variant="quiet"] {
  padding-bottom: 0.18em;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% var(--f-hairline);
}
.f-btn[data-variant="quiet"]:is(:hover, [data-force~="hover"]):not(:disabled) {
  animation: f-redraw var(--f-andante) var(--f-breath) both;
}
@keyframes f-redraw {
  0%   { background-position: 100% 100%; background-size: 100% var(--f-hairline); }
  45%  { background-position: 100% 100%; background-size: 0% var(--f-hairline); }
  55%  { background-position: 0 100%;    background-size: 0% var(--f-stroke); }
  100% { background-position: 0 100%;    background-size: 100% var(--f-stroke); }
}

/* ── f-dots ── loading: three periods breathing in turn */
.f-dots { display: inline-flex; align-items: center; gap: 0.3em; height: 1em; vertical-align: -0.1em; }
.f-dots > i { width: 0.22em; height: 0.22em; border-radius: 50%; background: currentColor; animation: f-breathe 1280ms var(--f-breath) infinite; }
.f-dots > i:nth-child(2) { animation-delay: 160ms; }
.f-dots > i:nth-child(3) { animation-delay: 320ms; }
@keyframes f-breathe { 0%, 100% { opacity: 0.18; translate: 0 0; } 40% { opacity: 1; translate: 0 -0.16em; } }
@media (prefers-reduced-motion: reduce) { .f-dots > i { animation: none; opacity: 0.6; } }

/* ── f-check ── the words only; checking strikes them through */
.f-check { position: relative; display: inline-block; cursor: pointer; color: var(--f-graphite); -webkit-tap-highlight-color: transparent; }
.f-check > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.f-check > span {
  --y: 60%;
  padding-inline: 0.18em; margin-inline: -0.18em; /* the pen runs past the words, as a hand does */
  background:
    linear-gradient(var(--f-accent), var(--f-accent)) no-repeat 100% var(--y) / 0% var(--f-stroke),
    linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 100% var(--y) / 0% var(--f-hairline);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition:
    background-size var(--f-moderato) var(--f-breath),
    background-position 0s,
    color var(--f-moderato) var(--f-breath),
    font-weight var(--f-moderato) var(--f-breath);
}
.f-check:is(:hover, [data-force~="hover"]) > span { color: var(--f-ink); }
/* Pointing sketches the strike in pencil; checking inks it. */
.f-check:is(:hover, [data-force~="hover"]) > input:not(:checked, :disabled) + span { background-position: 100% var(--y), 0 var(--y); background-size: 0% var(--f-stroke), 100% var(--f-hairline); }
.f-check > input:checked + span { background-position: 0 var(--y), 100% var(--y); background-size: 100% var(--f-stroke), 0% var(--f-hairline); color: var(--f-pencil); font-weight: 300; }
.f-check:dir(rtl) > span { background-position: 0 var(--y), 0 var(--y); }
.f-check:dir(rtl):is(:hover, [data-force~="hover"]) > input:not(:checked, :disabled) + span { background-position: 0 var(--y), 100% var(--y); }
.f-check:dir(rtl) > input:checked + span { background-position: 100% var(--y), 0 var(--y); }
.f-check > input:focus-visible + span,
.f-check[data-force~="focus"] > span { outline: var(--f-stroke) solid var(--f-accent); outline-offset: 4px; }
.f-check[data-force~="focus"] { outline: 0; }
.f-check:has(input:disabled) { cursor: not-allowed; }
.f-check > input:disabled + span { color: var(--f-pencil); opacity: 0.55; }

.f-checklist { border: 0; margin: 0; padding: 0; display: grid; justify-items: start; gap: var(--f-space-3); font-size: var(--f-mp); line-height: var(--f-mp-lh); }
.f-checklist > legend { padding: 0; margin-bottom: var(--f-space-4); }

/* ── f-fraction ── a count set as a display fraction; the part that's yours is italic */
.f-fraction { display: inline-flex; align-items: flex-start; font-size: var(--f-f); line-height: 0.9; color: var(--f-ink); font-variant-numeric: lining-nums tabular-nums; }
.f-fraction > i { position: relative; align-self: stretch; width: var(--f-hairline); margin-inline: 0.2em 0.12em; background: var(--f-rule-strong); rotate: 22deg; }
.f-fraction > :last-child { margin-top: 0.42em; font-weight: 200; color: var(--f-graphite); }

/* ── f-choice ── radio: the chosen word turns italic; one dot marks it */
.f-choice {
  position: relative; border: 0; margin: 0; padding: 0 0 var(--f-space-4);
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--f-space-6); row-gap: var(--f-space-3);
  font-size: var(--f-mp); line-height: var(--f-mp-lh);
}
.f-choice > legend { padding: 0; margin-bottom: var(--f-space-3); }
.f-choice > label { position: relative; display: inline-grid; align-items: baseline; cursor: pointer; color: var(--f-graphite); -webkit-tap-highlight-color: transparent; }
.f-choice > label > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.f-choice > label > span,
.f-choice > label::after {
  grid-area: 1 / 1;
  transition: opacity var(--f-moderato) var(--f-breath), translate var(--f-moderato) var(--f-exhale), color var(--f-allegro);
}
.f-choice > label::after {
  content: attr(data-text) / "";
  font-family: var(--f-expression); font-style: italic; font-size: calc(var(--f-expression-scale) * 1em); line-height: 1;
  color: var(--f-ink); opacity: 0; translate: 0 0.12em;
}
.f-choice:has(input:checked) > label > span { color: var(--f-pencil); }
.f-choice > label:is(:hover, [data-force~="hover"]) > span { color: var(--f-ink); }
.f-choice > label:has(input:checked) > span { opacity: 0; translate: 0 -0.12em; }
.f-choice > label:has(input:checked)::after { opacity: 1; translate: 0 0; }
.f-choice > label::before {
  content: ""; position: absolute; left: 50%; top: calc(100% + var(--f-space-4) - var(--f-dot));
  width: var(--f-dot); height: var(--f-dot); margin-left: calc(var(--f-dot) / -2); border-radius: 50%;
  box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong); scale: 0; pointer-events: none;
  transition: scale var(--f-moderato) var(--f-spiccato);
}
.f-choice > label:is(:hover, [data-force~="hover"]):not(:has(input:checked, input:disabled))::before { scale: 1; }
.f-choice > label:has(input:focus-visible),
.f-choice > label[data-force~="focus"] { outline: var(--f-stroke) solid var(--f-accent); outline-offset: 6px; }
.f-choice > label:has(input:disabled) { color: var(--f-pencil); opacity: 0.55; cursor: not-allowed; }
.f-choice-dot {
  position: absolute; left: 0; bottom: 0;
  width: var(--f-dot); height: var(--f-dot); border-radius: 50%;
  background: var(--f-accent); pointer-events: none;
  translate: calc(var(--c, 0px) - 50%) var(--y, 0px); /* --y lifts it to a wrapped row */
  transition: translate var(--f-moderato) var(--f-breath), opacity var(--f-allegro);
}
.f-choice:not([data-ready]) .f-choice-dot { transition: none; }
.f-choice:not(:has(input:checked)) .f-choice-dot { opacity: 0; }

/* ── f-dial ── a radio on an arc. The whole dial rolls to what you choose:
   --sel is animated, and size, colour and italic all follow its distance. */
@property --sel { syntax: "<number>"; inherits: true; initial-value: 0; }
.f-dial { --r: min(13rem, 36vw); border: 0; margin: 0; padding: 0; min-width: 0; }
.f-dial > legend { padding: 0; margin-bottom: var(--f-space-5); }
.f-dial-face {
  position: relative; width: calc(2 * var(--r) + 3em); height: calc(var(--r) + 3.5em);
  transition: --sel var(--f-andante) var(--f-spiccato);
}
.f-dial > .f-dial-face { font-size: var(--f-mp); }
.f-dial:has(label:nth-of-type(1) > input:checked) .f-dial-face { --sel: 0; }
.f-dial:has(label:nth-of-type(2) > input:checked) .f-dial-face { --sel: 1; }
.f-dial:has(label:nth-of-type(3) > input:checked) .f-dial-face { --sel: 2; }
.f-dial:has(label:nth-of-type(4) > input:checked) .f-dial-face { --sel: 3; }
.f-dial:has(label:nth-of-type(5) > input:checked) .f-dial-face { --sel: 4; }
.f-dial:has(label:nth-of-type(6) > input:checked) .f-dial-face { --sel: 5; }
.f-dial:has(label:nth-of-type(7) > input:checked) .f-dial-face { --sel: 6; }
.f-dial:has(label:nth-of-type(8) > input:checked) .f-dial-face { --sel: 7; }
.f-dial:has(label:nth-of-type(9) > input:checked) .f-dial-face { --sel: 8; }
.f-dial > .f-dial-face > label {
  --a: calc(170deg - 160deg * var(--i) / (var(--n) - 1));
  --d: max(var(--i) - var(--sel), var(--sel) - var(--i));
  --near: max(0, 1 - var(--d));
  position: absolute; left: calc(50% + cos(var(--a)) * var(--r)); top: calc(1.75em + var(--r) - sin(var(--a)) * var(--r));
  translate: -50% -50%; scale: calc(1 + 1.4 * var(--near));
  display: grid; place-items: center; cursor: pointer; font-variant-numeric: lining-nums;
  color: color-mix(in srgb, var(--f-ink) calc(100% - min(var(--d), 3) * 33%), var(--f-pencil));
  -webkit-tap-highlight-color: transparent;
}
.f-dial label > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.f-dial label > span, .f-dial label::after { grid-area: 1 / 1; }
.f-dial label > span { opacity: calc(1 - var(--near)); }
.f-dial label::after {
  content: attr(data-text) / ""; opacity: var(--near);
  font-family: var(--f-expression); font-style: italic; font-size: calc(var(--f-expression-scale) * 1em); line-height: 1;
}
.f-dial label:hover { color: var(--f-ink); }
.f-dial label:has(input:focus-visible) { outline: var(--f-stroke) solid var(--f-accent); outline-offset: 4px; border-radius: 50%; }
.f-dial-arc, .f-dial-dot { position: absolute; pointer-events: none; }
.f-dial-arc {
  --ri: calc(var(--r) - 2.1em);
  left: calc(50% - var(--ri)); top: calc(1.75em + var(--r) - var(--ri));
  width: calc(2 * var(--ri)); height: calc(2 * var(--ri)); border-radius: 50%;
  box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong); clip-path: inset(0 0 50% 0);
}
.f-dial-dot {
  --a: calc(170deg - 160deg * var(--sel) / (var(--n) - 1));
  --ri: calc(var(--r) - 2.1em);
  left: calc(50% + cos(var(--a)) * var(--ri)); top: calc(1.75em + var(--r) - sin(var(--a)) * var(--ri));
  width: var(--f-dot); height: var(--f-dot); translate: -50% -50%; border-radius: 50%; background: var(--f-accent);
}
.f-dial:not(:has(input:checked)) .f-dial-dot { opacity: 0; }
.f-dial-unit { position: absolute; left: 50%; bottom: 0.4em; translate: -50% 0; font-size: var(--f-pp); color: var(--f-pencil); }

/* ── f-picks ── a list of choices; a dot hangs beside the one you took */
.f-picks { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--f-space-5); }
.f-picks > legend { padding: 0; margin-bottom: var(--f-space-4); }
.f-picks > label { position: relative; display: block; padding-left: var(--f-space-5); cursor: pointer; color: var(--f-graphite); -webkit-tap-highlight-color: transparent; }
.f-picks > label > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.f-picks > label::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: var(--f-dot); height: var(--f-dot); border-radius: 50%;
  background: var(--f-accent); scale: 0;
  transition: scale var(--f-moderato) var(--f-spiccato), background-color var(--f-allegro), box-shadow var(--f-allegro);
}
.f-picks > label:hover:not(:has(input:checked))::before { scale: 1; background-color: transparent; box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong); }
.f-picks > label:has(input:checked)::before { scale: 1; }
.f-picks > label:is(:hover, :has(input:checked)) { color: var(--f-ink); }
.f-picks > label:has(input:focus-visible) { outline: var(--f-stroke) solid var(--f-accent); outline-offset: 6px; }

/* ── f-switch ── a sentence whose last word you can change */
.f-switch { position: relative; display: inline-block; cursor: pointer; color: var(--f-graphite); -webkit-tap-highlight-color: transparent; }
.f-switch > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.f-switch-state {
  display: inline-grid; vertical-align: baseline; overflow: clip;
  padding: 0.12em 0.14em 0.24em; margin: -0.12em -0.14em -0.24em;
  font-family: var(--f-expression); font-style: italic; font-size: calc(var(--f-expression-scale) * 1em); line-height: 1;
  color: var(--f-ink);
  background: linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 0.14em calc(100% - 0.1em) / calc(100% - 0.28em) var(--f-hairline);
  transition: color var(--f-moderato) var(--f-breath);
}
.f-switch-state > span { grid-area: 1 / 1; transition: translate var(--f-moderato) var(--f-breath), opacity var(--f-moderato) var(--f-breath); }
.f-switch > input:not(:checked) ~ .f-switch-state { color: var(--f-pencil); }
.f-switch > input:not(:checked) ~ .f-switch-state > :first-child { translate: 0 -110%; opacity: 0; }
.f-switch > input:checked ~ .f-switch-state > :last-child { translate: 0 110%; opacity: 0; }
.f-switch:is(:hover, [data-force~="hover"]) > .f-switch-state { background-image: linear-gradient(var(--f-ink), var(--f-ink)); }
.f-switch > input:focus-visible ~ .f-switch-state,
.f-switch[data-force~="focus"] > .f-switch-state { outline: var(--f-stroke) solid var(--f-accent); outline-offset: 2px; }
.f-switch[data-force~="focus"] { outline: 0; }
.f-switch:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
/* The sentence's full stop: a dot when on, a ring when off. */
.f-switch-stop {
  display: inline-block; width: max(0.22em, 5px); height: max(0.22em, 5px); margin-left: 0.1em; border-radius: 50%;
  box-shadow: inset 0 0 0 0.5em currentColor;
  transition: box-shadow var(--f-andante) var(--f-exhale);
}
.f-switch > input:not(:checked) ~ .f-switch-stop { box-shadow: inset 0 0 0 var(--f-hairline) currentColor; }

/* ── f-ruler ── slider: a ruler with a hand; the value is yours */
.f-ruler {
  --p: 0.5;
  --thumb: 20px;
  --f-ruler-bg:
    linear-gradient(var(--f-ink), var(--f-ink)) calc(var(--thumb) / 2) 100% / calc((100% - var(--thumb)) * var(--p)) var(--f-stroke) no-repeat,
    linear-gradient(var(--f-pencil), var(--f-pencil)) calc(100% - var(--thumb) / 2) 100% / 1px 16px no-repeat,
    repeating-linear-gradient(90deg, var(--f-pencil) 0 1px, transparent 1px 25%) calc(var(--thumb) / 2) 100% / calc(100% - var(--thumb)) 16px no-repeat,
    repeating-linear-gradient(90deg, var(--f-rule-strong) 0 1px, transparent 1px 5%) calc(var(--thumb) / 2) 100% / calc(100% - var(--thumb)) 8px no-repeat,
    linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) calc(var(--thumb) / 2) 100% / calc(100% - var(--thumb)) 1px no-repeat;
  position: relative; display: block;
}
/* The value is a dimension, as Paul Rand drew them: a measured line from zero
   to the hand, ticked at both ends, with your number in the gap. */
.f-ruler-value {
  display: flex; align-items: center; gap: 0.3em; position: relative;
  left: calc(var(--thumb) / 2); width: calc((100% - var(--thumb)) * var(--p)); min-width: max-content;
  margin-top: var(--f-space-3);
  font-family: var(--f-expression); font-style: italic; font-size: var(--f-f); line-height: 1.05;
  color: var(--f-ink); font-variant-numeric: lining-nums;
  background:
    linear-gradient(var(--f-ink), var(--f-ink)) 0 55% / var(--f-hairline) 12px no-repeat,
    linear-gradient(var(--f-ink), var(--f-ink)) 100% 55% / var(--f-hairline) 12px no-repeat;
  transition: translate var(--f-andante) var(--f-spiccato);
}
.f-ruler:has(input:active:not(:disabled)) .f-ruler-value { translate: 0 -5px; transition-duration: var(--f-moderato); }
.f-ruler-value::before, .f-ruler-value::after { content: ""; flex: 1; height: var(--f-hairline); margin-top: 0.1em; background: var(--f-ink); }
.f-ruler input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer;
}
.f-ruler input[type="range"]::-webkit-slider-runnable-track { height: 40px; background: var(--f-ruler-bg); }
.f-ruler input[type="range"]::-moz-range-track { height: 40px; background: var(--f-ruler-bg); }
.f-ruler input[type="range"]::-moz-range-progress { background: transparent; }
.f-ruler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: var(--thumb); height: 40px; border: 0; border-radius: 0;
  background:
    radial-gradient(circle at 50% 5px, var(--f-accent) 3.6px, transparent 4.2px),
    linear-gradient(var(--f-ink), var(--f-ink)) 50% 100% / var(--f-stroke) 30px no-repeat;
}
.f-ruler input[type="range"]::-moz-range-thumb {
  width: var(--thumb); height: 40px; border: 0; border-radius: 0;
  background:
    radial-gradient(circle at 50% 5px, var(--f-accent) 3.6px, transparent 4.2px),
    linear-gradient(var(--f-ink), var(--f-ink)) 50% 100% / var(--f-stroke) 30px no-repeat;
}
.f-ruler input[type="range"]:focus-visible { outline-offset: 8px; }
.f-ruler[data-force~="focus"] { outline: 0; }
.f-ruler[data-force~="focus"] input { outline: var(--f-stroke) solid var(--f-accent); outline-offset: 8px; }
.f-ruler-scale { position: relative; height: 1.6em; margin-top: var(--f-space-2); font-size: var(--f-pp); color: var(--f-pencil); font-variant-numeric: tabular-nums; }
.f-ruler-scale > span { position: absolute; top: 0; left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--n)); translate: -50% 0; }
.f-ruler:has(input:disabled) { opacity: 0.45; }
.f-ruler:has(input:disabled) input { cursor: not-allowed; }

/* ── f-field ── no box, only a baseline; your words arrive in italic */
.f-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: var(--f-space-1); }
.f-field > .f-label { grid-column: 1; }
.f-field-count { grid-column: 2; font-size: var(--f-pp); color: var(--f-pencil); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--f-allegro); }
.f-field:focus-within .f-field-count, .f-field[data-force~="focus"] .f-field-count { opacity: 1; }
.f-field > :is(input, textarea) {
  grid-column: 1 / -1;
  appearance: none; width: 100%; margin: 0; border: 0; border-radius: 0; outline: 0;
  padding: 0.3em 0 0.42em;
  background:
    linear-gradient(var(--f-accent), var(--f-accent)) no-repeat var(--o, 0%) 100% / 0% var(--f-stroke),
    linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 0 100% / 100% var(--f-hairline);
  color: var(--f-ink);
  font-family: var(--f-expression); font-style: italic; font-weight: 400;
  font-size: calc(var(--f-mp) * var(--f-expression-scale)); line-height: 1.3;
  transition: background-size var(--f-moderato) var(--f-exhale);
}
.f-field > :is(input, textarea)::placeholder { font-family: var(--f-voice); font-style: normal; font-size: var(--f-mp); color: var(--f-pencil); opacity: 1; transition: color var(--f-moderato); }
.f-field > :is(input, textarea):focus::placeholder { color: color-mix(in srgb, var(--f-pencil) 55%, transparent); } /* it steps back when you arrive */
.f-field > :is(input, textarea):focus,
.f-field[data-force~="focus"] > :is(input, textarea) { background-size: 100% var(--f-stroke), 100% var(--f-hairline); }
.f-field[data-force~="focus"] { outline: 0; }
.f-field > [aria-invalid="true"] { background-image: linear-gradient(var(--f-signal), var(--f-signal)), linear-gradient(var(--f-signal), var(--f-signal)); }
.f-field > :is(input, textarea):disabled {
  color: var(--f-pencil); cursor: not-allowed;
  background-image: none, repeating-linear-gradient(90deg, var(--f-rule-strong) 0 2px, transparent 2px 6px);
}
.f-field > textarea {
  --lh: 2.25rem;
  min-height: calc(var(--lh) * 4); padding: 0; resize: vertical;
  line-height: var(--lh);
  background:
    linear-gradient(var(--f-accent), var(--f-accent)) no-repeat var(--o, 0%) 100% / 0% var(--f-stroke),
    repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), var(--f-rule-strong) calc(var(--lh) - 1px) var(--lh)) 0 var(--f-rule-shift, -0.3rem) / 100% var(--lh);
  background-attachment: local;
}
.f-field > textarea[aria-invalid="true"] {
  background-image:
    linear-gradient(var(--f-signal), var(--f-signal)),
    repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), var(--f-signal) calc(var(--lh) - 1px) var(--lh));
}
.f-field-hint, .f-field-error { grid-column: 1 / -1; margin-top: var(--f-space-1); font-size: var(--f-pp); line-height: var(--f-pp-lh); }
.f-field-hint { color: var(--f-pencil); }
/* An error is a callout, as Weingart set them: a pill on a leader line,
   hung from the baseline it's about. */
.f-field-error {
  position: relative; justify-self: start; margin-top: var(--f-space-5);
  padding: 0.3em 0.9em 0.36em; border-radius: 1em;
  box-shadow: inset 0 0 0 var(--f-hairline) var(--f-signal); color: var(--f-signal);
  animation: f-callout var(--f-moderato) var(--f-exhale) 220ms backwards;
}
.f-field-error::before { content: ""; position: absolute; left: 1.1em; bottom: 100%; width: var(--f-hairline); height: var(--f-space-5); background: var(--f-signal); transform-origin: top; animation: f-draw-y var(--f-moderato) var(--f-breath) 60ms backwards; }
.f-field-error::after { content: ""; position: absolute; left: calc(1.1em - 2px); bottom: calc(100% + var(--f-space-5) - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--f-signal); animation: f-land var(--f-moderato) var(--f-spiccato) backwards; }
@keyframes f-callout { from { color: transparent; box-shadow: inset 0 0 0 var(--f-hairline) transparent; } }

/* ── f-select ── a choice inside a sentence */
.f-select { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4em; font-size: var(--f-mp); line-height: var(--f-mp-lh); color: var(--f-graphite); }
.f-select-box { position: relative; display: inline-flex; align-items: baseline; }
.f-select-box::after {
  content: "↓" / ""; position: absolute; right: 0; bottom: 0.3em;
  font-family: var(--f-voice); font-size: 0.72em; line-height: 1; color: var(--f-pencil); pointer-events: none;
  transition: translate var(--f-moderato) var(--f-exhale), color var(--f-allegro);
}
.f-select-box:hover::after { translate: 0 2px; color: var(--f-ink); }
.f-select select {
  -webkit-appearance: none; appearance: none; field-sizing: content;
  margin: 0; border: 0; border-radius: 0; padding: 0 1.05em 0.1em 0;
  background: linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 0 100% / calc(100% - 1.05em) var(--f-hairline);
  color: var(--f-ink); cursor: pointer;
  font-family: var(--f-expression); font-style: italic; font-weight: 400;
  font-size: calc(var(--f-expression-scale) * 1em); line-height: 1.2;
}
.f-select select:focus-visible { outline-offset: 4px; }
.f-select select:disabled { color: var(--f-pencil); cursor: not-allowed; }
@supports (appearance: base-select) {
  .f-select select, .f-select select::picker(select) { appearance: base-select; }
  .f-select select { display: inline-flex; min-block-size: 0; }
  .f-select select::picker-icon { display: none; }
  .f-select select::picker(select) {
    margin-top: var(--f-space-2); padding: var(--f-space-2) 0; border: 0;
    background: var(--f-paper); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule);
    color: var(--f-graphite);
  }
  .f-select option { padding: 0.3em 1.1em; }
  .f-select option::checkmark { display: none; }
  .f-select option { position: relative; padding-left: 1.6em; }
  .f-select option:checked { color: var(--f-ink); }
  .f-select option:checked::before { content: ""; position: absolute; left: 0.7em; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--f-accent); }
  .f-select option:is(:hover, :focus-visible) { background: var(--f-mark); color: var(--f-on-mark); outline: 0; }
  .f-select select::picker(select) { transition: opacity var(--f-moderato) var(--f-exhale), translate var(--f-moderato) var(--f-exhale), overlay var(--f-moderato) allow-discrete, display var(--f-moderato) allow-discrete; }
  @starting-style { .f-select select:open::picker(select) { opacity: 0; translate: 0 -6px; } }
  .f-select select:open option { animation: f-arrive var(--f-moderato) var(--f-exhale) backwards; animation-delay: calc((sibling-index() - 1) * var(--f-arpeggio)); }
}

/* ── f-tabs ── words; a line slides under the one in view */
.f-tabs {
  position: relative; display: flex; flex-wrap: wrap; column-gap: var(--f-space-6); row-gap: var(--f-space-2);
  padding-bottom: var(--f-space-3);
  background: linear-gradient(var(--f-rule), var(--f-rule)) no-repeat 0 100% / 100% var(--f-hairline);
}
.f-tabs > [role="tab"] {
  appearance: none; border: 0; background: none; margin: 0; padding: 0; cursor: pointer;
  font-size: var(--f-mp); line-height: var(--f-mp-lh); color: var(--f-pencil);
  transition: color var(--f-allegro);
}
.f-tabs > [role="tab"]:is(:hover, [data-force~="hover"]) { color: var(--f-graphite); }
.f-tabs > [role="tab"][aria-selected="true"] { color: var(--f-ink); }
.f-tabs sup { font-size: 0.5em; line-height: 0; vertical-align: 0.95em; margin-left: 0.2em; font-variant-numeric: tabular-nums; color: var(--f-pencil); }
.f-tabs-line {
  position: absolute; left: var(--x, 0px); right: var(--r, 100%); bottom: 0; height: var(--f-stroke);
  background: var(--f-ink); translate: 0 var(--y, 0px); pointer-events: none;
  transition: left var(--f-andante) var(--f-breath), right var(--f-andante) var(--f-breath), translate var(--f-moderato) var(--f-breath);
}
.f-tabs[data-dir="right"] .f-tabs-line { transition-delay: 110ms, 0s, 0s; }
.f-tabs[data-dir="left"] .f-tabs-line { transition-delay: 0s, 110ms, 0s; }
.f-tabs:not([data-ready]) .f-tabs-line { transition: none; }
/* The count of what's showing, set huge and cropped by the rule it sinks into. */
.f-tabs-count {
  position: absolute; right: 0; bottom: 0; height: 0.56em; overflow: clip; pointer-events: none;
  font-size: clamp(5rem, 10vw, 9rem); font-weight: 100; font-stretch: 112%; line-height: 0.78; letter-spacing: -0.04em;
  color: var(--f-ink); font-variant-numeric: tabular-nums lining-nums;
}
.f-tabs-count > span { display: block; }
@media (max-width: 700px) { .f-tabs-count { display: none; } }

/* ── f-pager ── numbers; a dot under each, the current one in accent */
.f-pager { display: flex; flex-wrap: wrap; gap: var(--f-space-5); font-variant-numeric: tabular-nums; }
.f-pager > :is(a, button) {
  position: relative; appearance: none; border: 0; background: none; margin: 0;
  padding: 0 0 var(--f-space-3); font: inherit; color: var(--f-pencil); text-decoration: none; cursor: pointer;
  transition: color var(--f-allegro);
}
.f-pager > :is(a, button)::after {
  content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: 3px; height: 3px; border-radius: 50%; background: var(--f-rule-strong);
  transition: width var(--f-moderato) var(--f-spiccato), height var(--f-moderato) var(--f-spiccato), background-color var(--f-moderato), box-shadow var(--f-allegro);
}
.f-pager > :is(a, button):hover { color: var(--f-graphite); }
.f-pager > :is(a, button):hover:not([aria-current="page"])::after { width: 6px; height: 6px; background-color: transparent; box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong); }
.f-pager > :is(a, button) { font-weight: 200; transition: color var(--f-allegro), font-weight var(--f-moderato) var(--f-breath); }
.f-pager > :is([aria-current="page"] + *, :has(+ [aria-current="page"])) { font-weight: 350; color: var(--f-graphite); }
.f-pager > [aria-current="page"] { color: var(--f-ink); font-weight: 600; }
.f-pager > [aria-current="page"]::after { width: 6px; height: 6px; background: var(--f-accent); }

/* ── f-crumbs ── */
.f-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 0.55em; }
.f-crumbs li + li::before { content: ""; display: inline-block; width: var(--f-hairline); height: 1.05em; margin-inline: 0.2em 0.75em; vertical-align: -0.18em; background: var(--f-rule-strong); rotate: 24deg; transition: rotate var(--f-andante) var(--f-spiccato), background-color var(--f-allegro); }
.f-crumbs li:has(> a:is(:hover, :focus-visible))::before { rotate: 14deg; background-color: var(--f-ink); }
.f-crumbs li:has(> a:is(:hover, :focus-visible)) + li::before { rotate: -14deg; background-color: var(--f-ink); }
.f-crumbs:dir(rtl) li + li::before { rotate: -24deg; }
.f-crumbs:dir(rtl) li:has(> a:is(:hover, :focus-visible))::before { rotate: -14deg; }
.f-crumbs:dir(rtl) li:has(> a:is(:hover, :focus-visible)) + li::before { rotate: 14deg; }
.f-crumbs a { color: var(--f-graphite); text-decoration: none; transition: color var(--f-allegro); }
.f-crumbs a:hover { color: var(--f-ink); }
.f-crumbs [aria-current="page"] { color: var(--f-ink); }

/* ── f-disclose ── a plus that turns into a cross */
.f-disclose { border-top: var(--f-hairline) solid var(--f-rule); }
.f-disclose:not(:has(+ .f-disclose)) { border-bottom: var(--f-hairline) solid var(--f-rule); }
.f-disclose > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--f-space-5);
  padding: var(--f-space-4) 0; cursor: pointer;
  font-size: var(--f-mp); line-height: var(--f-mp-lh); color: var(--f-ink);
  transition: font-stretch var(--f-andante) var(--f-exhale), font-weight var(--f-andante) var(--f-exhale);
}
.f-disclose[open] > summary { font-stretch: 112%; font-weight: 300; } /* the question breathes out as it opens */
.f-disclose > summary::-webkit-details-marker { display: none; }
.f-disclose > summary::after {
  content: "+" / ""; font-weight: 200; font-size: 1.5em; line-height: 0.6; color: var(--f-graphite);
  transition: rotate var(--f-andante) var(--f-spiccato);
}
.f-disclose[open] > summary::after { rotate: 45deg; }
.f-disclose[open] .f-disclose-body { animation: f-arrive var(--f-andante) var(--f-exhale) 90ms backwards; }
.f-disclose::details-content {
  block-size: 0; overflow: clip;
  transition: block-size var(--f-andante) var(--f-exhale), content-visibility var(--f-andante) allow-discrete;
}
.f-disclose[open]::details-content { block-size: auto; }
.f-disclose-body { max-width: var(--f-measure); padding-bottom: var(--f-space-5); color: var(--f-graphite); }

/* ── f-rows ── an index; the row you point at steps forward */
.f-rows { list-style: none; margin: 0; padding: 0; border-top: var(--f-hairline) solid var(--f-rule); }
.f-rows > li { border-bottom: var(--f-hairline) solid var(--f-rule); }
.f-rows a {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 4ch 1.2em; align-items: baseline; column-gap: var(--f-space-6);
  padding: var(--f-space-4) 0; color: inherit; text-decoration: none;
}
.f-rows-title { font-size: var(--f-mf); line-height: var(--f-mf-lh); letter-spacing: var(--f-mf-tr); font-weight: 300; color: var(--f-ink); transition: translate var(--f-moderato) var(--f-exhale); }
.f-rows-year { color: var(--f-pencil); font-variant-numeric: tabular-nums; text-align: right; }
.f-rows-go { justify-self: end; color: var(--f-ink); opacity: 0; translate: -8px 0; transition: opacity var(--f-allegro), translate var(--f-moderato) var(--f-exhale); }
/* The row you point at reverses: ink wipes in from the left, the heaviest emphasis there is. */
.f-rows a::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--f-space-3)); z-index: -1;
  background: var(--f-ink); scale: 1 0; transform-origin: 50% 0;
  transition: scale var(--f-moderato) var(--f-exhale);
}
.f-rows a[data-edge="bottom"]::before { transform-origin: 50% 100%; }
.f-rows a > * { transition: color var(--f-allegro), translate var(--f-moderato) var(--f-exhale), opacity var(--f-allegro); }
.f-rows a:is(:hover, :focus-visible, [data-force~="hover"])::before { scale: 1 1; }
.f-rows a:is(:hover, :focus-visible, [data-force~="hover"]) > * { color: var(--f-paper); }
.f-rows a:is(:hover, :focus-visible, [data-force~="hover"]) .f-rows-title { translate: 8px 0; }
.f-rows a:is(:hover, :focus-visible, [data-force~="hover"]) .f-rows-go { opacity: 1; translate: 0 0; }
.f-rows a:focus-visible { outline-offset: 4px; }

/* ── f-month ── a month of dots: past filled, today in accent, the rest to come */
.f-month { display: grid; gap: var(--f-space-6); max-width: 30rem; }
.f-month-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; column-gap: var(--f-space-5); }
.f-month-date { overflow: clip; font-size: var(--f-ff); font-weight: 650; line-height: 0.8; letter-spacing: var(--f-ff-tr); color: var(--f-ink); font-variant-numeric: tabular-nums; }
.f-month-title { display: grid; line-height: 1.15; }
.f-month-name { font-size: var(--f-mp); color: var(--f-ink); }
.f-month-year { font-size: var(--f-mp); color: var(--f-pencil); font-variant-numeric: tabular-nums; }
.f-month-nav { display: flex; gap: var(--f-space-4); }
.f-month-nav > button { appearance: none; border: 0; background: none; padding: 0.2em; color: var(--f-ink); font-size: var(--f-mp); cursor: pointer; transition: translate var(--f-allegro) var(--f-exhale); }
.f-month-nav > button:first-child:hover { translate: -3px 0; }
.f-month-nav > button:last-child:hover { translate: 3px 0; }
.f-month-nav > button:disabled { color: var(--f-rule-strong); cursor: default; translate: 0 0; }
.f-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--f-space-3); }
.f-month-grid > abbr { text-align: center; text-decoration: none; font-size: var(--f-pp); color: var(--f-pencil); }
.f-month-day {
  appearance: none; border: 0; margin: 0; padding: 0; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--f-ink); color: transparent;
  font-size: var(--f-p); font-variant-numeric: tabular-nums;
  transition: background-color var(--f-allegro), box-shadow var(--f-allegro), color var(--f-allegro);
}
.f-month-day[data-when="past"] { cursor: default; }
.f-month-day[data-when="today"] { background: var(--f-accent); }
.f-month-day[data-when="future"] { background: transparent; box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong); }
.f-month-day:not(:disabled):is(:hover, :focus-visible) { color: var(--f-paper); }
.f-month-day[data-when="future"]:is(:hover, :focus-visible) { color: var(--f-ink); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-ink); }
/* The days you're waiting through, between today and the one you chose: half-moons. */
.f-month-day[data-between] {
  background: linear-gradient(var(--f-ink), var(--f-ink)) no-repeat 0 0 / 50% 100%;
  animation: f-wax var(--f-andante) var(--f-exhale) backwards; animation-delay: calc(var(--k, 0) * var(--f-arpeggio)); /* the moons wax in turn, toward the day you chose */
}
@keyframes f-wax { from { background-size: 0% 100%; } }
.f-month-grid[data-turn] > .f-month-day { animation: f-turn var(--f-moderato) var(--f-exhale) backwards; animation-delay: calc(var(--d, 0) * 10ms); }
@keyframes f-turn { from { opacity: 0; translate: calc(var(--from, 1) * 8px) 0; } }
.f-month-day[data-between]:is(:hover, :focus-visible) { background: transparent; }
.f-month-day[aria-pressed="true"] {
  background: transparent; color: var(--f-ink);
  box-shadow: inset 0 0 0 var(--f-stroke) var(--f-ink);
  font-family: var(--f-expression); font-style: italic; font-size: calc(var(--f-p) * var(--f-expression-scale));
}
.f-month-grid:not([data-turn]) > .f-month-day[aria-pressed="true"] { animation: f-land var(--f-andante) var(--f-spiccato); }

/* ── f-tag ── the one rounded shape */
.f-tag {
  display: inline-flex; align-items: baseline; gap: 0.45em;
  margin: 0; border: 0; padding: 0.22em 0.8em 0.26em; border-radius: 999px;
  background: none; box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong);
  font-family: var(--f-voice); font-size: var(--f-pp); line-height: 1.3; color: var(--f-graphite); white-space: nowrap;
}
.f-tag[data-variant="ink"] { background: var(--f-ink); color: var(--f-paper); box-shadow: none; }
.f-tag[data-variant="accent"] { color: var(--f-accent); box-shadow: inset 0 0 0 var(--f-hairline) currentColor; }
button.f-tag { cursor: pointer; transition: box-shadow var(--f-allegro), color var(--f-allegro); }
button.f-tag[data-removable]::after { content: "×" / ""; opacity: 0.5; transition: opacity var(--f-allegro); }
button.f-tag:hover { color: var(--f-ink); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-ink); }
button.f-tag:hover::after { opacity: 1; }
button.f-tag[data-removable] > span {
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 58% / 0% var(--f-hairline);
  transition: background-size var(--f-moderato) var(--f-breath), background-position 0s;
}
button.f-tag[data-removable]:is(:hover, :focus-visible) > span { background-position: 0 58%; background-size: 100% var(--f-hairline); }
.f-tag[data-arriving] { animation: f-arrive var(--f-moderato) var(--f-exhale) backwards; animation-delay: calc(var(--i, 0) * 2 * var(--f-arpeggio)); }

/* ── f-note ── marginalia: a leader line draws out to the note */
.f-note {
  position: relative; display: inline; appearance: none; border: 0; background: none; margin: 0; padding: 0;
  font: inherit; color: inherit; cursor: help;
  text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: var(--f-hairline);
  text-decoration-color: var(--f-pencil); text-underline-offset: 0.24em;
}
.f-note {
  background: linear-gradient(var(--f-mark), var(--f-mark)) no-repeat 100% 88% / 0% 72%;
  transition: background-size var(--f-moderato) var(--f-exhale) 180ms, background-position 0s, color var(--f-allegro) 180ms;
}
/* In: mark, anchor, line, note. Out: the same, backwards. */
.f-note::before {
  content: ""; position: absolute; left: calc(0.6em - 2px); top: calc(100% + 0.15em - 2px); z-index: 1;
  width: 5px; height: 5px; border-radius: 50%; background: var(--f-ink);
  scale: 0; transition: scale var(--f-moderato) var(--f-spiccato) 140ms;
}
.f-note:is(:hover, :focus-visible, [data-force~="hover"]) { background-position: 0 88%; background-size: 100% 72%; color: var(--f-on-mark); text-decoration-color: transparent; transition-delay: 0s; }
.f-note:is(:hover, :focus-visible, [data-force~="hover"])::before { scale: 1; transition-delay: 60ms; }
.f-note::after {
  content: ""; position: absolute; left: 0.6em; top: calc(100% + 0.15em);
  width: var(--f-hairline); height: 2em; background: var(--f-ink);
  scale: 1 0; transform-origin: top; transition: scale var(--f-moderato) var(--f-exhale) 60ms;
}
.f-note-text {
  position: absolute; z-index: 5; left: 0; top: calc(100% + 2.1em);
  width: max-content; max-width: 28ch; padding: 0.55em 0.95em 0.6em; border-radius: 1em;
  background: var(--f-ink); color: var(--f-paper);
  font-family: var(--f-voice); font-style: normal; font-weight: 450; font-size: var(--f-pp); line-height: var(--f-pp-lh); letter-spacing: var(--f-pp-tr);
  text-align: left; white-space: normal;
  clip-path: circle(0 at 0.6em 0); pointer-events: none;
  transition: clip-path var(--f-moderato) var(--f-breath);
}
.f-note:is(:hover, :focus-visible, [data-force~="hover"])::after { scale: 1 1; transition-delay: 120ms; }
.f-note:is(:hover, :focus-visible, [data-force~="hover"]) > .f-note-text { clip-path: circle(150% at 0.6em 0); pointer-events: auto; transition: clip-path var(--f-andante) var(--f-exhale) 300ms; }

/* ── f-progress ── a line that fills, a number that counts */
.f-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: var(--f-space-3); }
.f-progress-value { font-size: var(--f-f); font-weight: 200; line-height: 0.9; letter-spacing: var(--f-f-tr); color: var(--f-ink); font-variant-numeric: tabular-nums; }
.f-progress-value small { margin-left: 0.08em; font-size: 0.42em; font-weight: 400; letter-spacing: 0; color: var(--f-pencil); }
.f-progress > progress {
  grid-column: 1 / -1; -webkit-appearance: none; appearance: none;
  width: 100%; height: var(--f-stroke); border: 0; background: var(--f-rule); color: var(--f-ink);
}
.f-progress > progress::-webkit-progress-bar { background: var(--f-rule); }
.f-progress > progress::-webkit-progress-value { background: var(--f-ink); transition: inline-size var(--f-moderato) var(--f-breath); }
.f-progress > progress::-moz-progress-bar { background: var(--f-ink); }
/* One ring per thing being done; each fills as it lands, like days on the calendar. */
.f-progress-units { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.f-progress-units > i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong); transition: background-color var(--f-moderato) var(--f-breath), box-shadow var(--f-moderato); }
.f-progress-units > i[data-done] { background: var(--f-ink); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-ink); animation: f-land var(--f-moderato) var(--f-spiccato); }

/* ── f-toast ── one line rises; a hairline beneath counts down its stay */
.f-toaster { position: fixed; z-index: 50; left: var(--f-margin); bottom: var(--f-space-6); display: grid; gap: var(--f-space-2); pointer-events: none; }
.f-toast {
  position: relative; pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--f-space-5); row-gap: var(--f-space-2);
  max-width: min(34rem, calc(100vw - 2 * var(--f-margin)));
  padding: var(--f-space-4) var(--f-space-5) calc(var(--f-space-4) + 2px);
  background: var(--f-paper); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule);
  color: var(--f-ink);
  animation: f-rise var(--f-andante) var(--f-exhale);
}
/* The timer is a fermata: its arc empties while the toast stays. Point at the
   toast and the pause is held, which is what a fermata means. */
.f-toast-timer { flex: none; align-self: center; width: 22px; height: 14px; overflow: visible; }
.f-toast-timer path { fill: none; stroke: var(--f-ink); stroke-width: 1.5; stroke-linecap: round; animation: f-deplete var(--life, 5s) linear forwards; }
.f-toast-timer circle { fill: var(--f-accent); }
.f-toast:is(:hover, :focus-within) .f-toast-timer path { animation-play-state: paused; }
.f-toast[data-leaving] { animation: f-sink var(--f-andante) var(--f-breath) forwards; }
.f-toast > p { animation: f-write var(--f-andante) var(--f-exhale) 140ms backwards; }
.f-toast[data-leaving] { overflow: clip; }
@keyframes f-rise { from { opacity: 0; translate: 0 12px; } }
@keyframes f-write { from { clip-path: inset(0 100% 0 0); } }
@keyframes f-sink {
  45%  { opacity: 0; translate: 0 8px; }
  100% { opacity: 0; translate: 0 8px; height: 0; padding-block: 0; margin-top: calc(-1 * var(--f-space-2)); }
}
@keyframes f-deplete { to { stroke-dashoffset: -1; } }

/* ── f-dialog ── the question, set large */
.f-dialog {
  border: 0; margin: auto; padding: var(--f-space-8) var(--f-space-7) var(--f-space-7);
  width: min(44rem, calc(100vw - 2 * var(--f-margin))); max-width: none;
  background: var(--f-paper); color: var(--f-graphite);
  --f-corner: 14px;
  opacity: 0; translate: 0 12px;
  transition: opacity var(--f-andante) var(--f-exhale), translate var(--f-andante) var(--f-exhale), overlay var(--f-andante) allow-discrete, display var(--f-andante) allow-discrete;
}
.f-dialog[open] { opacity: 1; translate: 0 0; }
@starting-style { .f-dialog[open] { opacity: 0; translate: 0 12px; } }
:is(.f-dialog, .f-sheet, .f-drawer)::backdrop {
  background: color-mix(in srgb, var(--f-paper) 86%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--f-andante), overlay var(--f-andante) allow-discrete, display var(--f-andante) allow-discrete;
}
:is(.f-dialog, .f-sheet, .f-drawer)[open]::backdrop { opacity: 1; }
@starting-style { :is(.f-dialog, .f-sheet, .f-drawer)[open]::backdrop { opacity: 0; } }
.f-dialog-meta { margin-bottom: var(--f-space-7); }
.f-dialog[open]::after { animation: f-frame var(--f-andante) var(--f-exhale) 80ms backwards; }
.f-dialog[open] .f-dialog-meta > hr { transform-origin: 0 50%; animation: f-draw-x var(--f-andante) var(--f-exhale) 200ms backwards; }
.f-dialog[open] .f-dialog-title { animation: f-breathe-out var(--f-andante) var(--f-exhale) 120ms backwards; }
@keyframes f-frame { from { opacity: 0; scale: 0.95; } } /* opens out from inside, so the dialog never scrolls */
@keyframes f-breathe-out { from { opacity: 0; font-weight: 500; font-stretch: 88%; } }
.f-dialog-title .f-yours { margin-left: 0.06em; } /* Bodoni's italic leans into the word before it at this size */
.f-dialog-title { font-size: var(--f-f); line-height: var(--f-f-lh); letter-spacing: var(--f-f-tr); font-weight: 300; color: var(--f-ink); }
.f-dialog-body { margin-top: var(--f-space-4); max-width: 40ch; }
.f-dialog-actions { margin: var(--f-space-7) 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--f-space-6); }

/* ── f-empty ── an invitation, not an apology */
.f-empty { display: grid; justify-items: start; gap: var(--f-space-4); }
/* Nothing, as a number: a zero so large it's cropped to its top half, which is a fermata's arc. */
.f-empty-figure {
  height: 0.46em; margin-bottom: var(--f-space-2); overflow: clip;
  font-size: clamp(7rem, 16vw, 13rem); font-weight: 100; font-stretch: 125%; line-height: 0.76;
  color: var(--f-ink); user-select: none;
}
.f-empty-figure > span { display: block; transition: translate var(--f-andante) var(--f-exhale); }
.f-empty:has(.f-btn:is(:hover, :focus-visible)) .f-empty-figure > span { translate: 0 -0.07em; }
.f-empty-title { font-size: var(--f-f); line-height: var(--f-f-lh); letter-spacing: var(--f-f-tr); font-weight: 200; color: var(--f-ink); }
.f-empty > p:not(.f-empty-title) { max-width: 44ch; }

/* ── f-toggle ── a word you can hold down; held, it wears the fermata */
.f-toggle {
  --pad: 0px;
  position: relative; appearance: none; border: 0; background: none; margin: 0; padding: 0.8em 0 0;
  font: inherit; color: var(--f-graphite); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color var(--f-allegro), font-weight var(--f-andante) var(--f-exhale), font-stretch var(--f-andante) var(--f-exhale);
}
/* The sign for a note held longer than written: an arc over the word, a dot inside it. */
.f-toggle::before, .f-toggle::after { content: ""; position: absolute; left: calc(50% + var(--pad) / 2); pointer-events: none; }
.f-toggle::before {
  top: 0; width: 0.9em; height: 0.45em; margin-left: -0.45em;
  border: var(--f-hairline) solid var(--f-rule-strong); border-bottom: 0; border-radius: 0.45em 0.45em 0 0;
  opacity: 0; scale: 1 0; transform-origin: 50% 100%;
  transition: scale var(--f-moderato) var(--f-exhale), opacity var(--f-allegro), border-color var(--f-allegro);
}
.f-toggle::after {
  top: calc(0.45em - 5px); width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--f-ink); scale: 0; transition: scale var(--f-moderato) var(--f-spiccato);
}
.f-toggle:is(:hover, [data-force~="hover"]):not(:disabled) { color: var(--f-ink); }
.f-toggle:is(:hover, [data-force~="hover"]):not(:disabled)::before { opacity: 1; scale: 1; }
.f-toggle[aria-pressed="true"] { color: var(--f-ink); }
.f-toggle[aria-pressed="true"]::before { opacity: 1; scale: 1; border-color: var(--f-ink); border-width: var(--f-stroke); }
.f-toggle[aria-pressed="true"]::after { scale: 1; transition-delay: 140ms; } /* the arc rises, then the dot lands */
.f-toggle:disabled { color: var(--f-pencil); opacity: 0.55; cursor: not-allowed; }

/* ── f-toggles ── toggle group: words held apart by standing hairlines */
.f-toggles { display: inline-flex; flex-wrap: wrap; align-items: last baseline; row-gap: var(--f-space-3); }
.f-toggles > .f-toggle + .f-toggle {
  --pad: var(--f-space-4);
  margin-inline-start: var(--f-space-4); padding-inline-start: var(--f-space-4);
  background: linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 0 calc(100% - 0.15em) / var(--f-hairline) 1.05em;
}

/* ── f-btn-group ── one pair of parentheses holds the set */
.f-btn-group { display: inline-flex; align-items: baseline; flex-wrap: wrap; color: var(--f-ink); }
.f-btn-group::before, .f-btn-group::after { font-weight: 200; font-size: 1.2em; line-height: 0; }
.f-btn-group::before { content: "(" / ""; margin-inline-end: 0.1em; }
.f-btn-group::after { content: ")" / ""; margin-inline-start: 0.1em; }
.f-btn-group > .f-btn {
  padding: 0 0.6em 0.16em;
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0% var(--f-hairline);
  background-origin: content-box; background-clip: content-box;
  transition: background-size var(--f-moderato) var(--f-exhale), background-position 0s;
}
.f-btn-group > .f-btn + .f-btn { border-inline-start: var(--f-hairline) solid var(--f-rule-strong); }
.f-btn-group > .f-btn:is(:hover, [data-force~="hover"]):not(:disabled) { background-position: 0 100%; background-size: 100% var(--f-hairline); }

/* ── f-input-group ── ours in roman, yours in italic, on one line; the accent is only under yours */
.f-input-group {
  grid-column: 1 / -1; position: relative; anchor-scope: --f-yours;
  display: flex; align-items: baseline; column-gap: 0.12em;
  font-size: var(--f-mp); line-height: 1.3;
  background: linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 0 100% / 100% var(--f-hairline);
}
.f-input-group-text { flex: none; padding-block: 0.3em 0.42em; color: var(--f-pencil); white-space: nowrap; }
.f-input-group > input {
  anchor-name: --f-yours;
  flex: 1; min-width: 0; appearance: none; margin: 0; border: 0; border-radius: 0; outline: 0; padding: 0.3em 0 0.42em; background: none;
  color: var(--f-ink); font-family: var(--f-expression); font-style: italic; font-weight: 400; font-size: calc(var(--f-expression-scale) * 1em); line-height: 1.3;
}
.f-input-group > input::placeholder { font-family: var(--f-voice); font-style: normal; font-size: calc(1em / var(--f-expression-scale)); color: var(--f-pencil); opacity: 1; }
.f-input-group::after {
  content: ""; position: absolute; bottom: 0; left: anchor(--f-yours left, 0px); right: anchor(--f-yours right, 0px); height: var(--f-stroke);
  background: var(--f-accent); scale: 0 1; transform-origin: var(--o, 0%) 50%; pointer-events: none;
  transition: scale var(--f-moderato) var(--f-exhale);
}
.f-input-group:focus-within::after, .f-input-group[data-force~="focus"]::after { scale: 1 1; }
.f-input-group:has(> input[aria-invalid="true"])::after { scale: 1 1; background: var(--f-signal); }
.f-input-group > .f-btn { margin-inline-start: var(--f-space-4); font-size: var(--f-p); }

/* ── f-code ── a one-time code: digits drop onto short baselines, three and three */
.f-code { position: relative; display: inline-flex; align-items: flex-end; gap: 0.18em; font-size: calc(var(--f-f) * var(--f-expression-scale)); }
.f-field > .f-code { grid-column: 1 / -1; justify-self: start; margin-top: var(--f-space-2); }
.f-code > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: text; }
.f-code-slot {
  --c: var(--f-accent);
  display: grid; place-items: end center; width: 0.78em; height: 1.2em; padding-bottom: 0.1em;
  font-family: var(--f-expression); font-style: italic; line-height: 1; color: var(--f-ink); font-variant-numeric: lining-nums;
  background:
    linear-gradient(var(--c), var(--c)) no-repeat 50% 100% / 0% var(--f-stroke),
    linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 0 100% / 100% var(--f-hairline);
  transition: background-size var(--f-moderato) var(--f-exhale);
}
.f-code-slot > span { animation: f-drop-in var(--f-moderato) var(--f-spiccato) backwards; }
@keyframes f-drop-in { from { opacity: 0; translate: 0 -0.3em; } }
.f-code-slot[data-here] { background-size: 100% var(--f-stroke), 100% var(--f-hairline); }
.f-code-sep { align-self: center; width: var(--f-hairline); height: 0.7em; margin-inline: 0.12em; background: var(--f-rule-strong); rotate: 22deg; }
/* Whole: the lines ink in turn. Wrong: they turn crimson together. */
.f-code[data-state] .f-code-slot { background-size: 100% var(--f-stroke), 100% var(--f-hairline); transition-delay: calc(var(--i, 0) * 2 * var(--f-arpeggio)); }
.f-code[data-state="done"] .f-code-slot { --c: var(--f-ink); }
.f-code[data-state="wrong"] .f-code-slot { --c: var(--f-signal); color: var(--f-signal); transition-delay: 0s; }

/* ── f-combo ── a field that suggests; in each match, the letters you typed are marked */
.f-combo { position: relative; }
.f-combo-list {
  position: absolute; z-index: 10; top: 100%; inset-inline: 0; max-height: 17rem; overflow: auto;
  margin: var(--f-space-2) 0 0; padding: var(--f-space-2) 0; list-style: none;
  background: var(--f-paper); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong);
}
.f-combo-list > li {
  position: relative; padding: 0.32em var(--f-space-5) 0.32em calc(var(--f-space-5) + 0.7em); cursor: pointer; color: var(--f-graphite);
  animation: f-arrive var(--f-moderato) var(--f-exhale) backwards; animation-delay: calc(min(var(--i, 0), 8) * var(--f-arpeggio));
}
.f-combo-list > li::before {
  content: ""; position: absolute; inset-inline-start: var(--f-space-5); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%;
  background: var(--f-ink); scale: 0; transition: scale var(--f-moderato) var(--f-spiccato);
}
.f-combo-list > li:is(:hover, [aria-selected="true"]) { color: var(--f-ink); }
.f-combo-list > li[aria-selected="true"]::before { scale: 1; }
.f-combo-list mark { padding: 0; }
.f-combo-list > .f-combo-empty { cursor: default; color: var(--f-pencil); }

/* ── f-pop ── popover: a panel hung from what opened it, on a leader line */
.f-pop {
  border: 0; padding: var(--f-space-4) var(--f-space-5); overflow: visible;
  max-width: min(26rem, calc(100vw - 2 * var(--f-margin)));
  background: var(--f-paper); color: var(--f-graphite); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong);
  opacity: 0; translate: 0 -4px;
  transition: opacity var(--f-moderato) var(--f-exhale), translate var(--f-moderato) var(--f-exhale), overlay var(--f-moderato) allow-discrete, display var(--f-moderato) allow-discrete;
}
.f-pop:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .f-pop:popover-open { opacity: 0; translate: 0 -4px; } }
@supports (position-area: block-end) {
  .f-pop { inset: auto; margin: var(--f-space-5) 0 0; position-area: block-end span-inline-end; }
  .f-pop::before, .f-pop::after { content: ""; position: absolute; pointer-events: none; }
  .f-pop::before { inset-inline-start: 1.1em; bottom: 100%; width: var(--f-hairline); height: var(--f-space-5); background: var(--f-ink); transform-origin: 50% 0; }
  .f-pop::after { inset-inline-start: calc(1.1em - 2px); bottom: calc(100% + var(--f-space-5) - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--f-ink); }
  .f-pop:popover-open::after { animation: f-land var(--f-moderato) var(--f-spiccato) backwards; }
  .f-pop:popover-open::before { animation: f-draw-y var(--f-moderato) var(--f-breath) 60ms backwards; }
}

/* ── f-menu ── a list of words; the one you point at is marked with the highlighter */
.f-pop.f-menu { padding: var(--f-space-2) 0; min-width: 14rem; }
.f-menu-item {
  position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--f-space-6);
  width: 100%; margin: 0; border: 0; padding: 0.34em var(--f-space-5); appearance: none; text-align: start; cursor: pointer;
  font: inherit; color: var(--f-graphite);
  background: linear-gradient(var(--f-mark), var(--f-mark)) no-repeat 100% 0 / 0% 100%;
  transition: background-size var(--f-allegro) var(--f-exhale), background-position 0s, color var(--f-allegro);
}
.f-menu-item:is(:hover, :focus-visible, [data-force~="hover"]) { background-position: 0 0; background-size: 100% 100%; color: var(--f-on-mark); outline: 0; }
.f-menu-item[data-variant="danger"] { color: var(--f-signal); }
.f-menu-item[aria-checked] { padding-inline-start: calc(var(--f-space-5) + 0.9em); }
.f-menu-item[aria-checked]::before {
  content: ""; position: absolute; inset-inline-start: var(--f-space-5); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; scale: 0; transition: scale var(--f-moderato) var(--f-spiccato);
}
.f-menu-item[aria-checked="true"]::before { scale: 1; }
.f-menu-keys { font-size: var(--f-pp); color: var(--f-pencil); font-variant-numeric: tabular-nums; }
.f-menu-item:is(:hover, :focus-visible) .f-menu-keys { color: inherit; }
.f-menu-label { padding: var(--f-space-2) var(--f-space-5) var(--f-space-1); font-size: var(--f-pp); color: var(--f-pencil); }
.f-menu > hr { margin-block: var(--f-space-2); }
.f-menu:popover-open > * { animation: f-arrive var(--f-moderato) var(--f-exhale) backwards; animation-delay: calc((sibling-index() - 1) * var(--f-arpeggio)); }
/* A context menu opens where you pressed, and spreads from that point like ink. */
.f-menu[data-at="point"] { position-area: none; margin: 0; }
.f-menu[data-at="point"]::before, .f-menu[data-at="point"]::after { display: none; }
.f-menu[data-at="point"]:popover-open { animation: f-spread var(--f-andante) var(--f-exhale); }
@keyframes f-spread { from { clip-path: circle(0 at 0 0); } to { clip-path: circle(150% at 0 0); } }

/* ── f-menubar ── a frame row of words along a hairline; each opens a menu */
.f-menubar { position: relative; display: flex; flex-wrap: wrap; column-gap: var(--f-space-5); padding-bottom: var(--f-space-2); box-shadow: inset 0 calc(-1 * var(--f-hairline)) 0 var(--f-rule); }
.f-menubar > button { appearance: none; border: 0; background: none; margin: 0; padding: 0; font: inherit; color: var(--f-graphite); cursor: pointer; transition: color var(--f-allegro); }
.f-menubar > button:is(:hover, [aria-expanded="true"]) { color: var(--f-ink); }
.f-menubar-line {
  position: absolute; bottom: 0; left: var(--x, 0px); width: var(--w, 0px); height: var(--f-stroke); background: var(--f-ink);
  opacity: 0; pointer-events: none;
  transition: left var(--f-moderato) var(--f-breath), width var(--f-moderato) var(--f-breath), opacity var(--f-allegro);
}
.f-menubar[data-open] .f-menubar-line { opacity: 1; }

/* ── f-navmenu ── small words open a panel of large names */
.f-navmenu { position: relative; }
.f-navmenu > ul { list-style: none; margin: 0; padding: 0 0 var(--f-space-3); display: flex; flex-wrap: wrap; column-gap: var(--f-space-6); }
.f-navmenu > ul > li > :is(a, button) { appearance: none; border: 0; background: none; margin: 0; padding: 0; font: inherit; color: var(--f-graphite); text-decoration: none; cursor: pointer; transition: color var(--f-allegro); }
.f-navmenu > ul > li > :is(a, button):hover, .f-navmenu > ul > li > [aria-expanded="true"] { color: var(--f-ink); }
.f-navmenu > ul > li > button::after { content: "↓" / ""; display: inline-block; margin-inline-start: 0.3em; font-size: 0.72em; color: var(--f-pencil); transition: rotate var(--f-moderato) var(--f-spiccato); }
.f-navmenu > ul > li > button[aria-expanded="true"]::after { rotate: 180deg; }
.f-navmenu-panel {
  position: absolute; z-index: 20; inset-inline: 0; top: 100%; padding: var(--f-space-6) 0 var(--f-space-7);
  background: var(--f-paper);
  visibility: hidden; opacity: 0; transition: opacity var(--f-moderato) var(--f-exhale), visibility 0s var(--f-moderato);
}
.f-navmenu-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--f-hairline); background: var(--f-ink); transform-origin: 0 50%; }
.f-navmenu li:has(> [aria-expanded="true"]) > .f-navmenu-panel { visibility: visible; opacity: 1; transition-delay: 0s; }
.f-navmenu li:has(> [aria-expanded="true"]) > .f-navmenu-panel::before { animation: f-draw-x var(--f-andante) var(--f-exhale) backwards; }
.f-navmenu-panel > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--f-space-4) var(--f-gutter); }
.f-navmenu li:has(> [aria-expanded="true"]) > .f-navmenu-panel li { animation: f-arrive var(--f-andante) var(--f-exhale) backwards; animation-delay: calc(sibling-index() * var(--f-arpeggio)); }
.f-navmenu-panel a {
  display: grid; font-size: var(--f-mf); line-height: var(--f-mf-lh); letter-spacing: var(--f-mf-tr); font-weight: 200; color: var(--f-ink); text-decoration: none;
  transition: font-weight var(--f-moderato) var(--f-exhale);
}
.f-navmenu-panel a:is(:hover, :focus-visible) { font-weight: 500; }
.f-navmenu-panel small { font-size: var(--f-pp); line-height: var(--f-pp-lh); letter-spacing: var(--f-pp-tr); font-weight: 400; color: var(--f-pencil); }

/* ── f-command ── what you type is set as large as a headline */
.f-command { display: grid; gap: var(--f-space-4); }
.f-command-input {
  appearance: none; width: 100%; margin: 0; border: 0; border-radius: 0; outline: 0; padding: 0 0 0.12em;
  background: linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 0 100% / 100% var(--f-hairline);
  color: var(--f-ink); font-family: var(--f-expression); font-style: italic; font-weight: 400;
  font-size: calc(var(--f-f) * var(--f-expression-scale)); line-height: 1.15;
}
.f-command-input::placeholder { font-family: var(--f-voice); font-style: normal; font-weight: 200; font-size: var(--f-f); color: var(--f-pencil); opacity: 1; }
.f-command-input:focus-visible { background-image: linear-gradient(var(--f-accent), var(--f-accent)); background-size: 100% var(--f-stroke); }
.f-command-list { max-height: 22rem; overflow: auto; }
.f-command-group { margin: var(--f-space-4) 0 var(--f-space-1); font-size: var(--f-pp); color: var(--f-pencil); }
.f-command-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 1.2em; align-items: baseline; column-gap: var(--f-space-4);
  padding-block: 0.4em; border-bottom: var(--f-hairline) solid var(--f-rule); cursor: pointer; color: var(--f-graphite);
  animation: f-arrive var(--f-moderato) var(--f-exhale) backwards; animation-delay: calc(min(var(--i, 0), 8) * var(--f-arpeggio));
}
.f-command-option > * { transition: translate var(--f-moderato) var(--f-exhale), opacity var(--f-allegro), color var(--f-allegro); }
.f-command-name { font-size: var(--f-mp); line-height: var(--f-mp-lh); }
.f-command-hint { font-size: var(--f-pp); color: var(--f-pencil); }
.f-command-go { justify-self: end; color: var(--f-ink); opacity: 0; translate: -6px 0; }
.f-command-option:hover { color: var(--f-ink); }
.f-command-option[aria-selected="true"] { color: var(--f-ink); }
.f-command-option[aria-selected="true"] .f-command-name { translate: 8px 0; }
.f-command-option[aria-selected="true"] .f-command-go { opacity: 1; translate: 0 0; }
.f-command-option mark { padding: 0; }
.f-command-empty { padding-block: var(--f-space-4); font-size: var(--f-mp); color: var(--f-graphite); }

/* ── f-sidebar ── a column of words; folded, each keeps only its initial */
.f-sidebar {
  display: grid; align-content: start; justify-items: start; gap: var(--f-space-1);
  padding-inline-end: var(--f-space-6); border-inline-end: var(--f-hairline) solid var(--f-rule);
  font-size: var(--f-mp); line-height: var(--f-mp-lh);
}
.f-sidebar-head { margin-bottom: var(--f-space-4); font-weight: 600; color: var(--f-ink); white-space: nowrap; }
.f-sidebar-label {
  margin-top: var(--f-space-4); font-size: var(--f-pp); line-height: var(--f-pp-lh); color: var(--f-pencil); white-space: nowrap;
  overflow: clip; height: auto; transition: height var(--f-andante) var(--f-exhale), margin var(--f-andante) var(--f-exhale), opacity var(--f-allegro);
}
.f-sidebar a { position: relative; display: flex; align-items: baseline; padding-inline-start: 1em; color: var(--f-graphite); text-decoration: none; white-space: nowrap; transition: color var(--f-allegro); }
.f-sidebar a:hover, .f-sidebar a[aria-current="page"] { color: var(--f-ink); }
.f-sidebar a::before {
  content: ""; position: absolute; inset-inline-start: 0; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%;
  background: var(--f-accent); scale: 0; transition: scale var(--f-moderato) var(--f-spiccato), background-color var(--f-allegro), box-shadow var(--f-allegro);
}
.f-sidebar a:hover:not([aria-current="page"])::before { scale: 1; background-color: transparent; box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong); }
.f-sidebar a[aria-current="page"]::before { scale: 1; }
.f-sidebar-i { font-weight: inherit; transition: font-size var(--f-andante) var(--f-exhale), font-weight var(--f-andante) var(--f-exhale); transition-delay: calc(var(--i, 0) * var(--f-arpeggio)); }
.f-sidebar-rest { display: inline-block; overflow: clip; width: auto; transition: width var(--f-andante) var(--f-exhale), opacity var(--f-moderato); transition-delay: calc(var(--i, 0) * var(--f-arpeggio)); }
.f-sidebar[data-folded] .f-sidebar-rest { width: 0; opacity: 0; }
.f-sidebar[data-folded] .f-sidebar-i { font-size: 1.45em; font-weight: 200; }
.f-sidebar[data-folded] .f-sidebar-label { height: 0; margin-top: var(--f-space-2); opacity: 0; }

/* ── f-card ── a column under a rule, not a box */
.f-card {
  position: relative; display: grid; align-content: start; gap: var(--f-space-3); padding-top: var(--f-space-4);
  background:
    linear-gradient(var(--f-ink), var(--f-ink)) no-repeat 100% 0 / 0% var(--f-stroke),
    linear-gradient(var(--f-ink), var(--f-ink)) no-repeat 0 0 / 100% var(--f-hairline);
  transition: background-size var(--f-andante) var(--f-exhale), background-position 0s;
}
.f-card:is(:has(.f-card-link:is(:hover, :focus-visible)), [data-force~="hover"]) { background-position: 0 0, 0 0; background-size: 100% var(--f-stroke), 100% var(--f-hairline); }
.f-card-figure { height: 0.56em; margin-bottom: var(--f-space-2); overflow: clip; font-size: clamp(6rem, 11vw, 9rem); font-weight: 100; font-stretch: 125%; line-height: 0.76; color: var(--f-ink); user-select: none; }
.f-card-title { font-size: var(--f-mf); line-height: var(--f-mf-lh); letter-spacing: var(--f-mf-tr); font-weight: 300; color: var(--f-ink); }
.f-card-link { color: inherit; text-decoration: none; outline: 0; }
.f-card-link::after { content: ""; position: absolute; inset: 0; }
.f-card:has(.f-card-link:focus-visible) { outline: var(--f-stroke) solid var(--f-accent); outline-offset: 8px; }
.f-card-body { max-width: 34ch; }
.f-card-foot { margin-top: var(--f-space-3); }

/* ── f-peek ── hover card: the name, set large and cropped by the card's edge */
.f-peek { position: relative; }
.f-peek-card {
  position: absolute; z-index: 6; top: calc(100% + var(--f-space-3)); inset-inline-start: 0;
  display: grid; gap: var(--f-space-2); width: min(21rem, 80vw); padding: var(--f-space-5) var(--f-space-5) var(--f-space-4); overflow: clip;
  background: var(--f-paper); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong);
  font-size: var(--f-pp); line-height: var(--f-pp-lh); letter-spacing: var(--f-pp-tr); color: var(--f-graphite);
  visibility: hidden; opacity: 0; transition: opacity var(--f-moderato) var(--f-exhale), visibility 0s var(--f-moderato);
}
/* Where anchors exist, the card flips or centres rather than leave the screen. */
@supports (anchor-scope: all) {
  .f-peek { anchor-scope: --f-peek; }
  .f-peek > :first-child { anchor-name: --f-peek; }
  .f-peek-card {
    position: fixed; position-anchor: --f-peek; inset: auto; margin-top: var(--f-space-3);
    position-area: block-end span-inline-end; position-try-fallbacks: flip-inline, block-end;
  }
}
.f-peek-name {
  margin-inline-end: -30%; white-space: nowrap;
  font-size: var(--f-ff); line-height: 0.85; letter-spacing: var(--f-ff-tr); font-weight: 200; color: var(--f-ink);
  translate: 0.5em 0; transition: translate var(--f-andante) var(--f-exhale);
}
.f-peek-meta { color: var(--f-pencil); }
/* It waits a moment for the pointer; the keyboard gets it at once. */
.f-peek:is(:hover, :focus-within, [data-force~="hover"]) > .f-peek-card { visibility: visible; opacity: 1; transition-delay: 450ms, 450ms; }
.f-peek:is(:hover, :focus-within, [data-force~="hover"]) .f-peek-name { translate: 0 0; transition-delay: 450ms; }
.f-peek:focus-within > .f-peek-card, .f-peek:focus-within .f-peek-name { transition-delay: 0s; }

/* ── f-tip ── tooltip: a whisper in parentheses above the thing it names */
.f-tip { position: relative; display: inline-flex; }
.f-tip-text {
  position: absolute; z-index: 5; bottom: calc(100% + var(--f-space-2)); left: 50%; translate: -50% 0.3em;
  width: max-content; max-width: 24ch; padding: 0.1em 0.35em; background: var(--f-paper);
  font-family: var(--f-voice); font-size: var(--f-pp); line-height: var(--f-pp-lh); color: var(--f-graphite); text-align: center; white-space: normal;
  opacity: 0; pointer-events: none; transition: opacity var(--f-allegro), translate var(--f-moderato) var(--f-exhale);
}
.f-tip-text::before { content: "(" / ""; }
.f-tip-text::after { content: ")" / ""; }
.f-tip:is(:hover, [data-force~="hover"]) > .f-tip-text { opacity: 1; translate: -50% 0; transition-delay: 400ms; }
.f-tip:has(:focus-visible) > .f-tip-text { opacity: 1; translate: -50% 0; }
.f-tip[data-hush] > .f-tip-text { opacity: 0; transition-delay: 0s; } /* Escape puts it away */

/* ── f-sheet ── a page slid in from the edge; its title runs up the spine */
.f-sheet {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(32rem, calc(100vw - var(--f-space-6))); height: 100dvh; max-width: none; max-height: none;
  padding: var(--f-space-7) var(--f-space-6) var(--f-space-6) var(--f-space-8); overflow: auto;
  border: 0; border-inline-start: var(--f-hairline) solid var(--f-ink); background: var(--f-paper); color: var(--f-graphite);
  translate: 100% 0;
  transition: translate var(--f-andante) var(--f-exhale), overlay var(--f-andante) allow-discrete, display var(--f-andante) allow-discrete;
}
.f-sheet[open] { translate: 0 0; }
@starting-style { .f-sheet[open] { translate: 100% 0; } }
.f-sheet-spine {
  position: absolute; inset-inline-start: var(--f-space-4); bottom: var(--f-space-6);
  writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap;
  font-size: var(--f-f); line-height: 1; letter-spacing: var(--f-f-tr); font-weight: 200; color: var(--f-ink);
}
.f-sheet[open] .f-sheet-spine { animation: f-spine var(--f-andante) var(--f-exhale) 240ms backwards; }
@keyframes f-spine { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* ── f-drawer ── a sheet from below, lifted by the fermata's arc */
.f-drawer {
  position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: none; max-height: 85dvh;
  padding: 0 var(--f-margin) var(--f-space-7); overflow: auto;
  border: 0; border-top: var(--f-hairline) solid var(--f-ink); background: var(--f-paper); color: var(--f-graphite);
  box-shadow: 0 12rem 0 var(--f-paper); /* paper under the rebound, not a shadow */
  translate: 0 100%;
  transition: translate var(--f-andante) var(--f-spiccato), overlay var(--f-andante) allow-discrete, display var(--f-andante) allow-discrete;
}
.f-drawer[open] { translate: 0 var(--pull, 0px); }
@starting-style { .f-drawer[open] { translate: 0 100%; } }
.f-drawer[data-pulling] { transition: none; }
.f-drawer-handle { display: block; margin: 0 auto var(--f-space-4); padding: var(--f-space-4) var(--f-space-6) var(--f-space-2); border: 0; background: none; color: var(--f-ink); cursor: grab; touch-action: none; }
.f-drawer-handle:active { cursor: grabbing; }
.f-drawer-handle svg { width: 40px; height: 22px; overflow: visible; }
.f-drawer-handle path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.f-drawer-handle circle { fill: var(--f-accent); }

/* ── f-collapse ── a list that ends in the rest of itself */
.f-collapse-list { list-style: none; margin: 0; padding: 0; }
.f-collapse-list > li { padding-block: 0.45em; border-bottom: var(--f-hairline) solid var(--f-rule); }
.f-collapse > details > summary { list-style: none; margin-top: var(--f-space-4); }
.f-collapse > details > summary::-webkit-details-marker { display: none; }
.f-collapse > details > summary > :last-child, .f-collapse > details[open] > summary > :first-child { display: none; }
.f-collapse > details[open] > summary > :last-child { display: inline; }
.f-collapse > details::details-content { block-size: 0; overflow: clip; transition: block-size var(--f-andante) var(--f-exhale), content-visibility var(--f-andante) allow-discrete; }
.f-collapse > details[open]::details-content { block-size: auto; }
.f-collapse > details[open] .f-collapse-list > li { animation: f-arrive var(--f-moderato) var(--f-exhale) backwards; animation-delay: calc(sibling-index() * 2 * var(--f-arpeggio)); }

/* ── f-resize ── two panes and the rule between them; moved, they're measured */
.f-resize { --split: 50%; display: grid; grid-template-columns: minmax(0, var(--split)) auto minmax(0, 1fr); min-height: 17rem; box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule); }
.f-resize-pane { position: relative; min-width: 0; overflow: clip; padding: var(--f-space-5) var(--f-space-5) var(--f-space-7); }
.f-resize-handle {
  position: relative; z-index: 1; width: var(--f-space-4); margin-inline: calc(var(--f-space-4) / -2); cursor: col-resize; touch-action: none; outline: 0;
  background: linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 50% 0 / var(--f-hairline) 100%;
}
.f-resize-handle:is(:hover, :focus-visible, [data-dragging]) { background-image: linear-gradient(var(--f-ink), var(--f-ink)); background-size: var(--f-stroke) 100%; }
.f-resize-handle:focus-visible { background-image: linear-gradient(var(--f-accent), var(--f-accent)); }
.f-resize:has(> [data-dragging]) { cursor: col-resize; user-select: none; }
/* The share of each pane, drawn as a dimension from edge to edge. */
.f-resize-dim {
  position: absolute; inset-inline: var(--f-space-5); bottom: var(--f-space-4); display: flex; align-items: center; gap: 0.4em;
  font-size: var(--f-pp); color: var(--f-ink); font-variant-numeric: tabular-nums;
  background: linear-gradient(var(--f-ink), var(--f-ink)) 0 50% / var(--f-hairline) 9px no-repeat, linear-gradient(var(--f-ink), var(--f-ink)) 100% 50% / var(--f-hairline) 9px no-repeat;
  opacity: 0; transition: opacity var(--f-moderato);
}
.f-resize-dim::before, .f-resize-dim::after { content: ""; flex: 1; height: var(--f-hairline); background: var(--f-ink); }
.f-resize:has(.f-resize-handle:is(:hover, :focus-visible, [data-dragging])) .f-resize-dim { opacity: 1; }

/* ── f-scroll ── a rule appears at an edge only while there's more beyond it */
.f-scroll {
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--f-rule-strong) transparent;
  /* The paper covering each rule scrolls with the content; the rules stay put. */
  background:
    linear-gradient(var(--f-paper), var(--f-paper)) 0 0 / 100% 2px no-repeat local,
    linear-gradient(var(--f-paper), var(--f-paper)) 0 100% / 100% 2px no-repeat local,
    linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) 0 0 / 100% var(--f-hairline) no-repeat scroll,
    linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) 0 100% / 100% var(--f-hairline) no-repeat scroll;
}

/* ── f-scrollbar ── a scrollbar as a ruler: a hairline and a thumb as long as the
   view. Inside a scroller it is pinned to the edge by the scroller's own timeline;
   data-variant="page" fixes it to the window and adds a mark at each section.
   Pointing sketches; holding inks it in the accent. Script sets --view, --max,
   data-idle (nothing to scroll) and data-ready. */
.f-scrollbar {
  --view: 0.2; --max: 0px; --w: var(--f-stroke); --line: 0.375rem; /* the hairline sits this far in from the edge */
  position: absolute; z-index: 3; inset-block: 0; inset-inline-end: 0; width: 0.875rem;
  display: none; touch-action: none; user-select: none;
  /* The rail lives inside what scrolls, so it travels down as far as the content does, and stays put. */
  animation: f-scrollbar-pin linear both; animation-timeline: scroll(nearest);
}
@keyframes f-scrollbar-pin { to { translate: 0 var(--max); } }
.f-scrollbar[data-variant="page"] { --line: 0.5rem; position: fixed; z-index: 40; width: 1.5rem; animation: none; }
@supports (animation-timeline: scroll()) {
  @media (pointer: fine) {
    .f-scrollbar[data-ready]:not([data-idle]) { display: block; }
    :has(> .f-scrollbar[data-ready]), :root:has(.f-scrollbar[data-variant="page"][data-ready]) { scrollbar-width: none; }
    :has(> .f-scrollbar[data-ready])::-webkit-scrollbar { display: none; }
  }
}
.f-scrollbar::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: var(--line); width: var(--f-hairline);
  background: var(--f-rule); transition: background-color var(--f-allegro) var(--f-exhale);
}
.f-scrollbar-thumb {
  position: absolute; top: 0; inset-inline-end: var(--line); height: calc(var(--view) * 100%);
  width: var(--w); margin-inline-end: calc((var(--f-hairline) - var(--w)) / 2); /* centred on the hairline */
  background: var(--f-ink);
  /* translate is a share of its own height: the rest of the rail is (1 / view − 1) thumbs long */
  animation: f-scrollbar-go linear both; animation-timeline: scroll(nearest);
  transition: width var(--f-allegro) var(--f-spiccato), margin var(--f-allegro) var(--f-spiccato), background-color var(--f-allegro) var(--f-exhale);
}
.f-scrollbar[data-variant="page"] .f-scrollbar-thumb { animation-timeline: scroll(root); }
@keyframes f-scrollbar-go { to { translate: 0 calc((1 / var(--view) - 1) * 100%); } }
.f-scrollbar-mark {
  position: absolute; top: calc(var(--at) * 100%); inset-inline: 0; height: 1rem; margin-top: -0.5rem; cursor: pointer;
}
.f-scrollbar-mark::before {
  content: ""; position: absolute; top: 50%; inset-inline-end: var(--line); width: 0.5rem; height: var(--f-hairline);
  background: var(--f-rule-strong); transition: background-color var(--f-allegro) var(--f-exhale);
}
.f-scrollbar-mark[data-now]::before { background: var(--f-ink); }
.f-scrollbar-mark::after {
  content: attr(data-num); position: absolute; top: 50%; inset-inline-end: calc(100% + var(--f-space-1));
  translate: 0 -50%; padding-inline: 0.4em; white-space: nowrap; background: var(--f-paper);
  font-size: var(--f-pp); line-height: 1; font-variant-numeric: tabular-nums; color: var(--f-pencil);
  opacity: 0; visibility: hidden;
  transition: opacity var(--f-allegro) var(--f-exhale), visibility 0s var(--f-allegro);
}
/* Pointing sketches: pointing at what scrolls darkens the rail; pointing at the rail thickens the thumb
   and brings the page's numbers down the rail in turn. */
:hover > .f-scrollbar::before, .f-scrollbar:is(:hover, [data-dragging], [data-force~="hover"])::before { background: var(--f-rule-strong); }
.f-scrollbar:is(:hover, [data-dragging], [data-force~="hover"]) { --w: 4px; }
.f-scrollbar:is(:hover, [data-force~="hover"]) .f-scrollbar-mark::after {
  opacity: 1; visibility: visible; transition-delay: calc(var(--i, 0) * var(--f-arpeggio)), 0s;
}
.f-scrollbar-mark:hover::after { content: attr(data-num) "\2002" attr(data-name); color: var(--f-ink); }
.f-scrollbar-mark:hover::before { background: var(--f-ink); }
/* Holding inks it: the thumb is where you are, so it takes the one accent. */
.f-scrollbar[data-dragging] .f-scrollbar-thumb { background: var(--f-accent); }
.f-scrollbar[data-dragging] { cursor: grabbing; } /* pointer capture keeps it while the hand is down */

/* ── f-ratio ── a frame kept to a ratio, marked the way a printer marks a crop */
@property --ratio { syntax: "<number>"; inherits: false; initial-value: 1.7778; }
.f-ratio {
  position: relative; display: grid; place-items: center; aspect-ratio: var(--ratio);
  box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule);
  transition: --ratio var(--f-andante) var(--f-breath);
}
.f-ratio::before {
  --m: 12px; --g: 6px; --e: calc(var(--m) + var(--g));
  content: ""; position: absolute; inset: calc(-1 * var(--e)); pointer-events: none;
  background:
    linear-gradient(var(--f-ink), var(--f-ink)) 0 var(--e) / var(--m) var(--f-hairline),
    linear-gradient(var(--f-ink), var(--f-ink)) 100% var(--e) / var(--m) var(--f-hairline),
    linear-gradient(var(--f-ink), var(--f-ink)) 0 calc(100% - var(--e)) / var(--m) var(--f-hairline),
    linear-gradient(var(--f-ink), var(--f-ink)) 100% calc(100% - var(--e)) / var(--m) var(--f-hairline),
    linear-gradient(var(--f-ink), var(--f-ink)) var(--e) 0 / var(--f-hairline) var(--m),
    linear-gradient(var(--f-ink), var(--f-ink)) calc(100% - var(--e)) 0 / var(--f-hairline) var(--m),
    linear-gradient(var(--f-ink), var(--f-ink)) var(--e) 100% / var(--f-hairline) var(--m),
    linear-gradient(var(--f-ink), var(--f-ink)) calc(100% - var(--e)) 100% / var(--f-hairline) var(--m);
  background-repeat: no-repeat;
}
.f-ratio > .f-fraction > * { display: inline-block; }

/* ── f-carousel ── one poster at a time; the count rolls the way you travel */
.f-carousel { display: grid; gap: var(--f-space-5); min-width: 0; }
.f-carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: 6px;
}
.f-carousel-track::-webkit-scrollbar { display: none; }
.f-carousel-slide { scroll-snap-align: start; display: grid; align-content: end; gap: var(--f-space-4); min-height: 19rem; overflow: clip; }
.f-carousel-title { margin-inline-start: -0.05em; white-space: nowrap; font-size: var(--f-fff); line-height: var(--f-fff-lh); letter-spacing: var(--f-fff-tr); font-weight: 200; color: var(--f-ink); }
.f-carousel-nav { display: flex; align-items: baseline; gap: var(--f-space-5); font-size: var(--f-mp); }
.f-carousel-nav > button { appearance: none; border: 0; background: none; padding: 0.1em; font: inherit; color: var(--f-ink); cursor: pointer; transition: translate var(--f-allegro) var(--f-exhale); }
.f-carousel-nav > button:first-child:hover:not(:disabled) { translate: -3px 0; }
.f-carousel-nav > button:last-child:hover:not(:disabled) { translate: 3px 0; }
.f-carousel-nav > button:disabled { color: var(--f-rule-strong); cursor: default; }
.f-carousel-count { color: var(--f-pencil); font-variant-numeric: tabular-nums; }
.f-carousel-now { display: inline-block; color: var(--f-ink); }

/* ── f-table ── hairline rows; the column you sort by is set in ink */
.f-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.f-table :is(th, td) { padding: var(--f-space-3) var(--f-space-4) var(--f-space-3) 0; text-align: start; vertical-align: baseline; border-bottom: var(--f-hairline) solid var(--f-rule); }
.f-table thead th { padding-top: 0; font-size: var(--f-pp); font-weight: 400; color: var(--f-pencil); border-bottom-color: var(--f-ink); white-space: nowrap; }
.f-table td { color: var(--f-graphite); transition: color var(--f-moderato); }
.f-table :is(th, td)[data-num] { text-align: end; }
.f-table :is(th, td):first-child:has(.f-table-pick) { width: 1.6em; }
.f-table th button { appearance: none; border: 0; background: none; margin: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.35em; }
.f-table th button::after { content: "↓" / ""; display: inline-block; opacity: 0; transition: rotate var(--f-moderato) var(--f-spiccato), opacity var(--f-allegro); }
.f-table th button:hover::after { opacity: 0.5; }
.f-table th[aria-sort] { color: var(--f-ink); }
.f-table th[aria-sort] button::after { opacity: 1; }
.f-table th[aria-sort="ascending"] button::after { rotate: 180deg; }
.f-table td[data-sorted] { color: var(--f-ink); }
.f-table tr[data-picked] .f-table-name { font-family: var(--f-expression); font-style: italic; font-size: calc(var(--f-expression-scale) * 1em); line-height: 1; color: var(--f-ink); }
/* Choosing is a ring that fills; some chosen is half a moon. */
.f-table-pick {
  appearance: none; margin: 0; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0.05em; cursor: pointer;
  box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong);
  transition: background-color var(--f-allegro), box-shadow var(--f-allegro);
}
.f-table-pick:hover { box-shadow: inset 0 0 0 var(--f-hairline) var(--f-ink); }
.f-table-pick:checked { background: var(--f-ink); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-ink); animation: f-land var(--f-moderato) var(--f-spiccato); }
.f-table-pick:indeterminate { background: linear-gradient(90deg, var(--f-ink) 50%, transparent 50%); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-ink); }

/* ── f-chart ── hairlines and dots, against one very large number */
.f-chart { margin: 0; display: grid; gap: var(--f-space-5); }
.f-chart-read { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--f-space-4); color: var(--f-graphite); }
.f-chart-value { display: inline-block; font-size: var(--f-ff); line-height: 0.95; letter-spacing: var(--f-ff-tr); font-weight: 200; color: var(--f-ink); font-variant-numeric: tabular-nums lining-nums; }
.f-chart-plot {
  display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); height: 13rem;
  background: repeating-linear-gradient(to top, var(--f-rule) 0 1px, transparent 1px 25%);
  box-shadow: inset 0 calc(-1 * var(--f-hairline)) 0 var(--f-ink);
}
.f-chart-bar { position: relative; appearance: none; border: 0; margin: 0; padding: 0; background: none; cursor: crosshair; }
.f-chart-bar::before, .f-chart-bar::after { content: ""; position: absolute; left: 50%; pointer-events: none; }
.f-chart-bar::before { bottom: 0; width: var(--f-hairline); height: calc(var(--v) * 100%); translate: -50% 0; background: var(--f-pencil); transition: width var(--f-allegro), background-color var(--f-allegro); }
.f-chart-bar::after {
  bottom: calc(var(--v) * 100%); width: 7px; height: 7px; border-radius: 50%; translate: -50% 50%;
  background: var(--f-paper); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-pencil);
  transition: scale var(--f-moderato) var(--f-spiccato), background-color var(--f-allegro), box-shadow var(--f-allegro);
}
.f-chart-bar:is(:hover, :focus-visible, [data-force~="hover"])::before { width: var(--f-stroke); background: var(--f-ink); }
.f-chart-bar:is(:hover, :focus-visible, [data-force~="hover"])::after { scale: 1.5; background: var(--f-ink); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-ink); }
.f-chart-bar[data-now]::after { background: var(--f-accent); box-shadow: none; }
.f-chart-bar:focus-visible { outline-offset: 2px; }
.f-chart-axis { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); margin-top: calc(-1 * var(--f-space-3)); font-size: var(--f-pp); color: var(--f-pencil); text-align: center; }

/* ── f-avatar ── a person: a ring and their initial, in italic */
.f-avatar {
  --s: 2.75rem; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--f-paper); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong);
  font-family: var(--f-expression); font-style: italic; font-weight: 400; font-size: calc(var(--s) * 0.46); line-height: 1; color: var(--f-ink);
}
.f-avatar[data-size="s"] { --s: 1.75rem; }
.f-avatar[data-size="l"] { --s: 5rem; }
.f-avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.f-avatar[data-here]::after { content: ""; position: absolute; right: 4%; bottom: 4%; width: max(7px, calc(var(--s) * 0.14)); aspect-ratio: 1; border-radius: 50%; background: var(--f-accent); box-shadow: 0 0 0 2px var(--f-paper); }
.f-avatar[data-count] { font-family: var(--f-voice); font-style: normal; font-size: calc(var(--s) * 0.3); color: var(--f-graphite); }
.f-avatars { display: inline-flex; }
.f-avatars > .f-avatar + .f-avatar { margin-inline-start: calc(var(--s) * -0.28); transition: margin var(--f-moderato) var(--f-spiccato); }
.f-avatars:is(:hover, [data-force~="hover"]) > .f-avatar + .f-avatar { margin-inline-start: var(--f-space-1); }

/* ── f-item ── a ledger line: what it is, a dotted leader, what you can do */
.f-items { list-style: none; margin: 0; padding: 0; border-top: var(--f-hairline) solid var(--f-rule); }
.f-item { display: flex; align-items: center; gap: var(--f-space-4); padding-block: var(--f-space-4); border-bottom: var(--f-hairline) solid var(--f-rule); }
.f-item-body { display: grid; min-width: 0; }
.f-item-title { color: var(--f-ink); }
.f-item-desc { font-size: var(--f-pp); line-height: var(--f-pp-lh); color: var(--f-pencil); }
.f-item-end { font-variant-numeric: tabular-nums; color: var(--f-ink); }
.f-item-leader { position: relative; flex: 1; min-width: var(--f-space-5); height: 2px; }
.f-item-leader::before, .f-item-leader::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, currentColor 0.8px, transparent 1.1px) 0 50% / 6px 2px repeat-x; }
.f-item-leader::before { color: var(--f-rule-strong); }
.f-item-leader::after {
  color: var(--f-ink);
  mask: linear-gradient(#000, #000) no-repeat 100% 0 / 0% 100%;
  transition: mask-size var(--f-andante) var(--f-exhale), mask-position 0s;
}
.f-item:is(:hover, :focus-within, [data-force~="hover"]) .f-item-leader::after { mask-position: 0 0; mask-size: 100% 100%; }

/* ── f-prose ── long text; punctuation hangs in the margin so the edge stays true */
.f-prose { max-width: var(--f-measure); color: var(--f-graphite); hanging-punctuation: first last; }
.f-prose > * + * { margin-top: 1em; }
.f-prose > * + :is(h2, h3, h4) { margin-top: 1.8em; }
.f-prose :is(h1, h2, h3, h4) { font-weight: 300; color: var(--f-ink); }
.f-prose h1 { font-size: var(--f-ff); line-height: var(--f-ff-lh); letter-spacing: var(--f-ff-tr); }
.f-prose h2 { font-size: var(--f-f); line-height: var(--f-f-lh); letter-spacing: var(--f-f-tr); }
.f-prose h3 { font-size: var(--f-mf); line-height: var(--f-mf-lh); letter-spacing: var(--f-mf-tr); }
.f-prose h4 { font-size: var(--f-mp); line-height: var(--f-mp-lh); font-weight: 500; }
.f-prose-lead { font-size: var(--f-mp); line-height: var(--f-mp-lh); color: var(--f-ink); }
.f-prose blockquote { margin: 0; quotes: "“" "”"; font-family: var(--f-expression); font-style: italic; font-size: calc(var(--f-mp) * var(--f-expression-scale)); line-height: 1.35; color: var(--f-ink); }
.f-prose blockquote > p { text-indent: -0.4em; } /* the opening mark hangs */
.f-prose blockquote > p::before { content: open-quote; }
.f-prose blockquote > p::after { content: close-quote; }
.f-prose blockquote footer { margin-top: 0.6em; font-family: var(--f-voice); font-style: normal; font-size: var(--f-pp); color: var(--f-pencil); }
.f-prose ul { list-style: none; padding: 0; }
.f-prose ul > li { position: relative; }
.f-prose ul > li::before { content: "–" / ""; position: absolute; inset-inline-start: -1.1em; color: var(--f-pencil); }
.f-prose ol { padding: 0; }
.f-prose ol > li::marker { color: var(--f-pencil); font-variant-numeric: tabular-nums; }
.f-prose li + li { margin-top: 0.35em; }
.f-prose code { font-family: var(--f-voice); font-stretch: 78%; font-weight: 500; letter-spacing: 0.01em; color: var(--f-ink); }
.f-prose small { font-size: var(--f-pp); color: var(--f-pencil); }

/* ── f-msg ── a message: what they wrote is roman, what you wrote is italic */
.f-msg {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "face head" "face body" ". foot";
  column-gap: var(--f-space-4); row-gap: var(--f-space-1); max-width: 34rem;
}
.f-msg > .f-avatar { --s: 2.25rem; grid-area: face; align-self: start; }
.f-msg-head { grid-area: head; display: flex; align-items: baseline; gap: var(--f-space-3); font-size: var(--f-pp); line-height: var(--f-pp-lh); color: var(--f-pencil); }
.f-msg-head > b { font-weight: 500; color: var(--f-ink); }
.f-msg-body { grid-area: body; color: var(--f-ink); }
.f-msg-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: var(--f-space-2); margin-top: var(--f-space-2); font-size: var(--f-pp); color: var(--f-pencil); }
.f-msg[data-from="you"] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head face" "body face" "foot ."; margin-inline-start: auto; text-align: end; }
.f-msg[data-from="you"] :is(.f-msg-head, .f-msg-foot) { justify-content: flex-end; }
.f-msg[data-from="you"] .f-msg-body { font-family: var(--f-expression); font-style: italic; font-size: calc(var(--f-expression-scale) * 1em); line-height: 1.4; }
.f-msg[data-arriving] .f-msg-body { animation: f-write var(--f-andante) var(--f-exhale) backwards; }
/* Sent is a ring; read, it fills to a dot, like the switch's full stop. */
.f-msg-status { display: inline-block; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 var(--f-hairline) currentColor; transition: box-shadow var(--f-andante) var(--f-exhale); }
.f-msg-status[data-read] { box-shadow: inset 0 0 0 4px currentColor; }

/* ── f-bubble ── the speech balloon is gone; only its tail is left */
.f-bubble { position: relative; padding-inline-start: 0.9em; }
.f-bubble::before { content: ""; position: absolute; inset-inline-start: 0.1em; top: 0.4em; width: var(--f-hairline); height: 0.85em; background: var(--f-ink); rotate: 38deg; transform-origin: 50% 0; }
.f-bubble[data-align="end"] { padding-inline: 0 0.9em; }
.f-bubble[data-align="end"]::before { inset-inline: auto 0.1em; rotate: -38deg; }
.f-bubble[data-variant="ink"] { padding: 0.55em 0.95em 0.6em; background: var(--f-ink); color: var(--f-paper); }
.f-bubble[data-variant="ink"]::before { inset-inline-start: 0.9em; top: 100%; height: 0.7em; }
.f-bubble[data-variant="mark"] > p { display: inline; padding: 0 0.1em; background: var(--f-mark); color: var(--f-on-mark); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.f-reactions { display: flex; flex-wrap: wrap; gap: var(--f-space-2); }
.f-reactions > .f-tag[aria-pressed="true"] { color: var(--f-ink); box-shadow: inset 0 0 0 var(--f-hairline) var(--f-ink); }
.f-reactions > .f-tag[aria-pressed="true"] > :first-child { font-family: var(--f-expression); font-style: italic; font-size: calc(var(--f-expression-scale) * 1em); line-height: 1; }
.f-reaction-count { display: inline-block; color: var(--f-pencil); font-variant-numeric: tabular-nums; }

/* ── f-marker ── a quiet line in a conversation: a status, or a day */
.f-marker { display: flex; align-items: center; gap: var(--f-space-3); font-size: var(--f-pp); line-height: var(--f-pp-lh); color: var(--f-pencil); }
.f-marker-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.f-marker[data-variant="divider"] { gap: var(--f-space-4); color: var(--f-graphite); }
.f-marker[data-variant="divider"]::before, .f-marker[data-variant="divider"]::after { content: ""; flex: 1; height: var(--f-hairline); background: var(--f-rule-strong); }
.f-marker[data-variant="divider"]::before { transform-origin: 100% 50%; }
.f-marker[data-variant="divider"]::after { transform-origin: 0 50%; }
.f-marker[data-arriving]::before, .f-marker[data-arriving]::after { animation: f-draw-x var(--f-andante) var(--f-exhale) backwards; }
.f-marker[data-arriving] { animation: f-arrive var(--f-moderato) var(--f-exhale) backwards; }

/* ── f-attach ── a file: its extension is its picture; a ring counts it in */
.f-attachments { list-style: none; margin: 0; padding: 0; border-top: var(--f-hairline) solid var(--f-rule); }
.f-attach { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--f-space-4); padding-block: var(--f-space-3); border-bottom: var(--f-hairline) solid var(--f-rule); }
.f-attach-ext { font-size: var(--f-mf); line-height: 1; font-weight: 200; font-stretch: 125%; color: var(--f-ink); text-transform: lowercase; }
.f-attach-body { display: grid; min-width: 0; }
.f-attach-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--f-expression); font-style: italic; font-size: calc(var(--f-expression-scale) * 1em); line-height: 1.3; color: var(--f-ink); }
.f-attach-meta { font-size: var(--f-pp); line-height: var(--f-pp-lh); color: var(--f-pencil); font-variant-numeric: tabular-nums; }
.f-attach-ring { width: 22px; height: 22px; overflow: visible; rotate: -90deg; }
.f-attach-ring circle { fill: none; stroke-width: 1.5; }
.f-attach-track { stroke: var(--f-rule); }
.f-attach-arc { stroke: var(--f-ink); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transition: stroke-dashoffset var(--f-moderato) var(--f-breath), stroke var(--f-allegro); }
.f-attach-ring .f-attach-fill { fill: var(--f-ink); stroke: none; r: 0; transition: r var(--f-moderato) var(--f-spiccato); }
.f-attach[data-state="processing"] .f-attach-arc { --p: 1; stroke: var(--f-pencil); }
.f-attach[data-state="done"] .f-attach-arc { --p: 1; }
.f-attach[data-state="done"] .f-attach-fill { r: 5.5px; }
.f-attach[data-state="error"] .f-attach-arc { stroke: var(--f-signal); }
.f-attach[data-state="error"] .f-attach-meta { color: var(--f-signal); }
.f-attach > .f-btn { font-size: var(--f-pp); }

/* ── f-thread ── message scroller: it keeps to the latest; scrolled back, it counts what's new */
.f-thread { position: relative; display: grid; }
.f-thread-scroll { display: grid; align-content: safe end; gap: var(--f-space-6); height: 26rem; padding-block: var(--f-space-5); padding-inline-end: var(--f-space-3); }
.f-thread-scroll > .f-msg[data-from="you"] { margin-inline-start: auto; }
.f-thread-latest {
  position: absolute; bottom: var(--f-space-4); left: 50%; translate: -50% 0;
  display: inline-flex; align-items: baseline; gap: 0.35em; appearance: none; border: 0; margin: 0; padding: 0.3em 0.95em 0.36em; border-radius: 1em;
  background: var(--f-ink); color: var(--f-paper); font: 500 var(--f-pp) / var(--f-pp-lh) var(--f-voice); cursor: pointer;
  animation: f-land var(--f-moderato) var(--f-spiccato);
}
.f-thread-new { display: inline-block; font-variant-numeric: tabular-nums; }

/* ── f-quest ── questions one at a time; your answers are written into one sentence */
.f-quest { display: grid; gap: var(--f-space-6); }
.f-quest-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--f-space-5); }
.f-quest-head .f-fraction { font-size: var(--f-mf); }
.f-quest-head .f-fraction > .f-yours { display: inline-block; }
.f-quest-head progress { -webkit-appearance: none; appearance: none; width: 100%; height: var(--f-stroke); border: 0; background: var(--f-rule); color: var(--f-ink); }
.f-quest-head progress::-webkit-progress-bar { background: var(--f-rule); }
.f-quest-head progress::-webkit-progress-value { background: var(--f-ink); transition: inline-size var(--f-andante) var(--f-breath); }
.f-quest-head progress::-moz-progress-bar { background: var(--f-ink); }
.f-quest-step { display: grid; gap: var(--f-space-5); min-width: 0; }
.f-quest-step[data-arriving] { animation: f-turn var(--f-andante) var(--f-exhale) backwards; }
.f-quest-q { font-size: var(--f-f); line-height: var(--f-f-lh); letter-spacing: var(--f-f-tr); font-weight: 300; color: var(--f-ink); text-wrap: balance; }
.f-quest-sentence { font-size: var(--f-mf); line-height: 1.35; letter-spacing: var(--f-mf-tr); font-weight: 300; color: var(--f-ink); text-wrap: pretty; }
.f-quest-sentence > .f-yours { display: inline-block; animation: f-arrive var(--f-andante) var(--f-exhale) backwards; animation-delay: calc(200ms + var(--i, 0) * 4 * var(--f-arpeggio)); }
.f-quest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--f-space-5) var(--f-space-6); }
.f-quest-actions > [data-variant="statement"] { margin-inline-start: auto; }

/* ── f-alert ── a double bar: in a score, the sign that something changes here */
.f-alert { --c: var(--f-ink); position: relative; display: grid; justify-items: start; gap: var(--f-space-2); padding-inline-start: calc(var(--f-space-5) + 5px); color: var(--f-graphite); }
.f-alert::before {
  content: ""; position: absolute; inset-block: 0.3em 0.2em; inset-inline-start: 0; width: 5px; transform-origin: 50% 0;
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--f-hairline) 100% no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / var(--f-stroke) 100% no-repeat;
}
.f-alert-title { font-size: var(--f-mp); line-height: var(--f-mp-lh); color: var(--f-ink); }
.f-alert[data-variant="danger"] { --c: var(--f-signal); }
.f-alert[data-variant="danger"] .f-alert-title { color: var(--f-signal); }
.f-alert-actions { display: flex; flex-wrap: wrap; gap: var(--f-space-5); margin-top: var(--f-space-2); }
.f-alert[data-arriving]::before { animation: f-draw-y var(--f-andante) var(--f-exhale) backwards; }
.f-alert[data-arriving] > * { animation: f-arrive var(--f-moderato) var(--f-exhale) backwards; animation-delay: calc(160ms + (sibling-index() - 1) * 2 * var(--f-arpeggio)); }

/* ── f-skeleton ── baselines where the words will be */
.f-skeleton { display: grid; }
.f-skeleton > i { position: relative; display: block; width: var(--w, 100%); height: var(--lh, 1.7em); overflow: clip; background: linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 0 100% / 100% var(--f-hairline); }
.f-skeleton > i::after { content: ""; position: absolute; inset: auto 0 0; height: var(--f-stroke); background: linear-gradient(90deg, transparent, var(--f-pencil) 50%, transparent) no-repeat -60% 0 / 30% 100%; }
/* While it loads, a pencil stroke reads along each line in turn. */
[aria-busy="true"] .f-skeleton > i::after { animation: f-read 1600ms var(--f-breath) infinite; animation-delay: calc(var(--i, 0) * 140ms); }
@keyframes f-read { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.f-skeleton-ring { width: var(--s, 2.75rem); height: var(--s, 2.75rem); border-radius: 50%; box-shadow: inset 0 0 0 var(--f-hairline) var(--f-rule-strong); }
@media (prefers-reduced-motion: reduce) { [aria-busy="true"] .f-skeleton > i::after { animation: none; } }

/* ── f-date ── date picker: a date inside a sentence; the month hangs from it */
.f-date {
  appearance: none; border: 0; margin: 0; padding: 0 0 0.1em; cursor: pointer;
  background: linear-gradient(var(--f-rule-strong), var(--f-rule-strong)) no-repeat 0 100% / 100% var(--f-hairline);
  color: var(--f-pencil); font: inherit; line-height: 1.2;
  transition: background-color var(--f-allegro);
}
.f-date:hover { background-image: linear-gradient(var(--f-ink), var(--f-ink)); }
.f-date[data-set] { color: var(--f-ink); font-family: var(--f-expression); font-style: italic; font-size: calc(var(--f-expression-scale) * 1em); }
.f-pop > .f-month { width: min(21rem, 78vw); gap: var(--f-space-5); }
.f-pop > .f-month .f-month-date { font-size: var(--f-f); }
.f-pop > .f-month .f-month-grid { gap: var(--f-space-2); }
.f-pop > .f-month .f-month-day { font-size: var(--f-pp); }