/* Classical × terminal. Layout: a full-bleed ASCII statue stage opens the page; below it a museum-catalog
   column: serif for names and prose (the humanities), mono for UI, data and the ASCII (the machine).
   Light = Parian marble & graphite. Dark = obsidian & phosphor. Type families wear classical pigments. */
:root {
  --bg: #ecebe6;
  --surface: #f5f4ef;
  --raise: #fbfaf6;
  --ink: #2c2e33; /* dark grey, not black: easier on the eye at length */
  --muted: #494c53; /* 7.2:1 on --bg (was #5c5f66, 5.4:1) */
  --faint: #676a71; /* 4.5:1 on --bg (was #a2a4a8, 2.1:1) */
  --line: rgba(44, 46, 51, 0.14);
  --line-strong: rgba(44, 46, 51, 0.55);
  --accent: #0a6f5a; /* 5.1:1 on --bg (was #0b7a63, 4.4:1) */
  --accent-ink: #f5f4ef;
  --accent-soft: rgba(11, 122, 99, 0.09);
  --gold: #7d5e15; /* 5.1:1 on --bg (was #8c6a1b, 4.2:1) */
  --bad: #a83a2c;
  /* the three medals */
  --silver: #6f757d;
  --bronze: #9a5530;
  /* pigments for the four type families */
  --fam-AD: #0b7a63;   /* verdigris */
  --fam-AP: #8c6a1b;   /* ochre */
  --fam-ID: #a8452c;   /* terracotta */
  --fam-IP: #2c4fa0;   /* lapis */
  /* ASCII palette (read by the statue renderer) */
  --a-mode: light;
  --a-marble: #1f47b8; /* the bust: cobalt dust on marble paper */
  --a-steel: #4f565f;
  --a-glow: #0b7a63;
  --a-dark: #2a2c30;
  --a-gold: #8c6a1b;
  --a-term: #6d7077;
  --a-accent: #3d6fe0;
  --a-frame: #a9abaf;
  --a-dust: #c3c4c6;
  --serif: "Cormorant Garamond", "GFS Didot", Georgia, "Times New Roman", serif;
  --greek: "GFS Didot", "Cormorant Garamond", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* running text and interface: a sturdy sans with a large x-height (the serif is for headings and prose) */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* Type roles. Cormorant's x-height is 0.39em (Plex Sans 0.52em, Inter 0.55em), so at 14–18px it reads like a 11–13px
     sans: the serif carries headings, numerals, ledes and inscriptions; the sans carries reading and interface text. */
  --font-display: var(--serif);
  /* Brand chrome stays in the serif (the site's classical voice), one size up from before the readability pass to
     make up for its small x-height: */
  --font-nav: var(--serif);     /* top nav, mobile menu, section and step tabs */
  --font-button: var(--serif);  /* small capitals on buttons and button-like controls: .btn, Menu, Sign in, Feedback */
  --font-inscription: var(--serif); /* small-capital headings: eyebrows, room names, exhibit and note heads */
  /* Dense reading and data stay in the sans: */
  --font-ui: var(--sans);       /* lists, picker rows, specs, form text, the feedback form */
  --font-label: var(--sans);    /* small sans capitals in data and forms: column heads, form labels, tags, badges */
  --caps-track: .09em;          /* sans capitals need a little air */
  --button-track: .15em;        /* serif capitals need more: the inscriptional spacing of the buttons */
  /* sizes: nothing that is read drops below --fs-caption */
  --fs-caption: 14px;   /* was 12–13.5px */
  --fs-small: 15px;     /* was 14–14.5px */
  --fs-label: 14px;     /* sans capitals (cap height ≈ a 15px serif capital, with sturdier strokes) */
  --fs-inscription: 16px; /* serif capitals that stay serif: eyebrows, room names (was 15px) */
  --fs-text: 16px;      /* running sans text set smaller than the body (was 15–15.5px) */
  --fs-nav: 17.5px;     /* serif nav links, weight 500 (was 16px before the readability pass, 15.5px sans after it) */
  --fs-tab: 18.5px;     /* serif section tabs */
  --fs-button: 15.5px;  /* serif capitals on buttons (was 14px serif, then 14px sans) */
  --fs-ui: 16px;
  --fs-body: 17px;      /* was 16px */
  --serif-text-scale: 1.12; /* short serif text under 1.25rem (italic asides, names) is set 12% larger */
  --ink-soft: color-mix(in srgb, var(--ink) 86%, var(--bg)); /* ledes: was 74% (5.4:1), now ≈ 8:1 */
}
@media (max-width: 600px) { :root { --fs-body: 16.5px; } }
:root[data-theme="dark"] {
  --bg: #1c1d21; --surface: #232428; --raise: #2a2b30; --ink: #e4e2dc; --muted: #b0b3b9; --faint: #8f939a;
  --line: rgba(236, 234, 228, 0.13); --line-strong: rgba(236, 234, 228, 0.45);
  --accent: #4fe3b7; --accent-ink: #1c1d21; --accent-soft: rgba(79, 227, 183, 0.09); --gold: #e3bd67; --bad: #ff7a69; --silver: #b4bac2; --bronze: #d58c5e;
  --fam-AD: #4fe3b7; --fam-AP: #e3bd67; --fam-ID: #f08a6c; --fam-IP: #86a3ff;
  --a-mode: dark; --a-marble: #eeece6; --a-steel: #9aa4b0; --a-glow: #4fe3b7; --a-dark: #61656d; --a-gold: #e3bd67;
  --a-term: #7d828a; --a-accent: #4fe3b7; --a-frame: #3d4047; --a-dust: #303238;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(3rem, 8vw, 6.2rem); font-weight: 300; line-height: .92; letter-spacing: -0.025em; }
.h1-sm { font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: .95; }
h2 { font-size: 2rem; line-height: 1.05; margin-bottom: .8rem; }
h3 { font-size: 1.55rem; line-height: 1.1; }
p { margin: 0; }
p:not([class]), p.small, p.muted { max-width: 72ch; }
ul, ol { margin: .4rem 0; padding-left: 1.2rem; }
ul { list-style: "— "; }
li { margin: .25rem 0; }
code, .mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.greek { font-family: var(--greek); letter-spacing: .22em; }
.prose { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.5; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.big { font-size: 3.4rem; font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.big2 { font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; }
.huge { font-size: 5rem; color: var(--accent); line-height: 1; font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.strong { font-weight: 700; }
.center { text-align: center; justify-content: center; }
.r { text-align: right; }
.eyebrow { font-family: var(--font-inscription); font-size: var(--fs-inscription); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.lede { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.42; color: var(--ink-soft); max-width: 42ch; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.wrap { display: grid; gap: 3rem; padding-block: 1rem 4rem; }
main > section, main > div { min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 2rem; height: 58px; }
.mark { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: .34em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.mark span { color: var(--accent); }
/* nav: serif words like a museum's floor directory; the current room is underscored by a hairline */
.nav { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; padding: 5px; margin-inline: -5px; } /* the padding leaves room for the focus ring, which the scroller would clip */
.nav a { text-decoration: none; color: var(--muted); font-family: var(--font-nav); font-size: var(--fs-nav); font-weight: 500; letter-spacing: .01em; white-space: nowrap; padding: .3rem 0 .2rem; border-bottom: 1px solid transparent; transition: color .2s; }
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--ink); border-bottom-color: var(--ink); }
/* just above the fold into the Menu (861–1040px) the six serif rooms are set a little tighter so the row still fits */
@media (min-width: 861px) and (max-width: 1040px) {
  .top-in { gap: 1.25rem; }
  .nav { gap: .9rem; }
  .nav a { font-size: calc(var(--fs-nav) - 1px); }
  .mark { letter-spacing: .26em; }
}
/* the Menu button exists only on narrow screens */
.menu-btn { display: none; }
/* Narrow screens: the directory folds behind "Menu", set in the serif capitals of the buttons. Opened, it hangs from
   the header as a full-width panel: one room per line in the display serif, each numbered in Roman numerals like a
   gallery's rooms, divided by hairlines; the current room is in ink with a short rule beside it. */
@media (max-width: 860px) {
  .top-in { gap: .9rem; }
  .menu-btn { display: inline-flex; align-items: center; order: 3; margin-left: .2rem; font-family: var(--font-button); font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--button-track); text-transform: uppercase; line-height: 1; color: var(--ink); background: none; border: 0; border-block: 1px solid var(--line-strong); padding: .5rem .15rem .44rem; cursor: pointer; transition: border-color .2s; }
  .menu-btn:hover, .menu-open .menu-btn { border-color: var(--ink); }
  .menu-label { display: inline-block; min-width: 3.3em; text-align: center; }
  .nav { display: none; }
  .menu-open .nav {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    max-height: calc(100dvh - 58px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-bottom: 1px solid var(--line-strong); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .35);
    padding: .4rem max(16px, env(safe-area-inset-right, 0px)) 1.4rem max(16px, env(safe-area-inset-left, 0px));
    counter-reset: room; animation: menu-in .22s ease-out;
  }
  .menu-open .nav a { counter-increment: room; display: flex; align-items: baseline; gap: 1rem; font-size: 1.75rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; color: var(--muted); padding: .85rem 0 .8rem; border-bottom: 1px solid var(--line); white-space: normal; }
  .menu-open .nav a::before { content: counter(room, upper-roman); content: counter(room, upper-roman) / ""; flex: 0 0 2.4rem; font-family: var(--serif); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .18em; color: var(--faint); }
  .menu-open .nav a:last-child { border-bottom: 0; }
  .menu-open .nav a.on { color: var(--ink); border-bottom-color: var(--line); }
  .menu-open .nav a.on::after { content: ""; align-self: center; width: 1.6rem; height: 1px; background: var(--accent); margin-left: auto; }
  .menu-open .nav a:hover { color: var(--ink); }
  .theme-toggle + .account { margin-left: .1rem; }
  .menu-open .nav a:last-of-type { border-bottom: 1px solid var(--line); }
  .menu-open .nav .nav-fb { display: block; align-self: flex-start; margin-top: 1.1rem; font-family: var(--font-button); font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--button-track); text-transform: uppercase; color: var(--muted); background: none; border: 0; border-block: 3px double var(--line-strong); padding: .55rem .2rem .5rem; cursor: pointer; }
  .menu-open .nav .nav-fb:hover { color: var(--ink); border-color: var(--ink); }
  .fb-open { display: none; }
}
.nav-fb { display: none; }
@media (max-width: 420px) {
  .top-in { gap: .55rem; }
  .mark { font-size: 15px; letter-spacing: .24em; }
  .account { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-open .nav { animation: none; } }
.account-loading { animation: quiet-in .4s .3s both; }
@keyframes quiet-in { from { opacity: 0; } to { opacity: 1; } }
.demo-note { font-size: var(--fs-caption); color: var(--muted); padding-block: .7rem; letter-spacing: .02em; }
.foot { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; color: var(--muted); font-size: var(--fs-caption); border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; }
.foot .greek { font-size: 1.4rem; color: var(--muted); display: block; }
@media (max-width: 700px) { .foot { grid-template-columns: 1fr; } }

/* commands */
/* Buttons are set like inscriptions: serif capitals, no rounded pills or terminal carets.
   Secondary: a double-ruled band, like the moulding on a plinth. Primary: a dark plaque with a hairline frame
   set a few pixels off it. Hovering raises a drifting field of dots, the same dust the bust is made of. */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-button); font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--button-track); text-transform: uppercase; line-height: 1; padding: .8rem .35rem .72rem; border: 0; border-block: 3px double var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; transition: border-color .2s, color .2s, letter-spacing .25s; }
.btn::after { --dust: var(--ink); content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s;
  background-image: radial-gradient(circle, var(--dust) .7px, transparent 1.2px), radial-gradient(circle, var(--dust) .5px, transparent 1px);
  background-size: 7px 6px, 11px 9px; background-position: 0 0, 3px 4px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, transparent 30%, #000 95%); mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, transparent 30%, #000 95%); }
.btn:hover { border-color: var(--ink); letter-spacing: calc(var(--button-track) + .03em); }
.btn:hover::after { opacity: .3; animation: btn-dust 2.4s linear infinite; }
.btn.primary { background: var(--ink); color: var(--bg); border: 0; padding: .9rem 1.5rem .82rem; outline: 1px solid var(--ink); outline-offset: 3px; margin: 4px; }
.btn.primary::after { --dust: var(--bg); }
.btn.primary:hover { letter-spacing: calc(var(--button-track) + .03em); }
.btn.primary:hover::after { opacity: .45; }
.btn.sm { font-size: var(--fs-button); padding: .5rem .25rem .44rem; letter-spacing: var(--button-track); }
.btn.primary.sm { padding: .55rem 1rem .5rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { letter-spacing: var(--button-track); }
.btn:disabled:hover::after { opacity: 0; }
@keyframes btn-dust { from { background-position: 0 0, 3px 4px; } to { background-position: 14px -12px, -19px 13px; } }
@media (prefers-reduced-motion: reduce) { .btn, .btn::after { transition: none; } .btn:hover::after { animation: none; } .btn:hover, .btn.primary:hover { letter-spacing: var(--button-track); } }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.actions.tight { margin-top: 0; }
.link { color: var(--accent); text-decoration: none; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--caps-track); text-transform: uppercase; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

.card { background: var(--surface); border: 1px solid var(--line); padding: 1.5rem; min-width: 0; display: grid; gap: .8rem; align-content: start; text-decoration: none; }
a.card { transition: border-color .2s; }
a.card:hover { border-color: var(--line-strong); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 1.2rem; }
.two.tight { gap: 1rem; }
.cards4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 1rem; }
.cards4 > .card { border-top: 0; border-left: 0; background: transparent; }
.cards4 > a.card:hover { background: var(--surface); }
.cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.2rem; }
/* Notes: asides set the way a museum sets its wall texts, never as a tinted box with a coloured bar down one side.
   Three roles, one family; new UI picks one of these instead of inventing a box.
   .note           information. An inscription between a double rule above and a hairline below; its small-caps
                   label (.note-label, optional, first child) is cut into the double rule, led by a small lozenge.
   .note.caution   privacy and consent. A small marble tablet: a fillet inside its edge with a gilt boss at each
                   corner, the label centred between hairlines in gold, an optional .note-lead in the serif.
   .note.step      the next thing to do (setup, instructions, invitations). A margin note: a hairline above, and a
                   manicule (☞) hanging in the margin beside the label. On phones the text takes the full width. */
.note { --note-rule: var(--line-strong); display: block; min-width: 0; margin: 0; padding: .85rem 0 1rem; border-top: 3px double var(--note-rule); border-bottom: 1px solid var(--line); }
.note:has(> .note-label:first-child) { border-top: 0; padding-top: 0; }
.note > * + * { margin-top: .45rem; }
/* items hang from the label's first line, so a label that wraps keeps its rule level with that line */
.note-label { display: flex; align-items: flex-start; gap: .7rem; margin: 0; font-family: var(--font-inscription); font-size: var(--fs-inscription); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1.25; color: var(--muted); text-wrap: balance; }
.note-label::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 6px; background: var(--accent); transform: rotate(45deg); }
.note-label::after { content: ""; flex: 1 1 2.5rem; min-width: 2.5rem; height: 3px; margin-top: 7px; border-block: 1px solid var(--note-rule); }
.note-lead { font-family: var(--serif); font-size: calc(1.25rem * var(--serif-text-scale)); font-weight: 500; line-height: 1.3; color: var(--ink); }
.note p { max-width: 72ch; }
.note > .note-label { max-width: none; }
.note > .actions { margin-top: .75rem; }
/* a disclosure set as a note: the label is the summary, "+" / "−" in place of the lozenge */
details.note > summary.note-label { cursor: pointer; list-style: none; padding-block: .35rem; margin: 0; color: var(--ink); }
details.note > summary.note-label::-webkit-details-marker { display: none; }
details.note > summary.note-label::before { content: "+"; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 1px; background: none; transform: none; border: 1px solid currentColor; font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--accent); }
details.note[open] > summary.note-label::before { content: "\2212"; }
details.note > summary.note-label:hover { color: var(--accent); }

.note.caution { --note-rule: var(--line); position: relative; max-width: 46rem; padding: 1.2rem 1.6rem 1.35rem; background: var(--raise); border: 1px solid var(--line-strong); box-shadow: inset 0 0 0 5px var(--raise), inset 0 0 0 6px var(--line); }
.note.caution:has(> .note-label:first-child) { padding-top: 1.05rem; border-top: 1px solid var(--line-strong); }
.note.caution::before { --boss: radial-gradient(circle, var(--gold) 2px, transparent 2.6px); content: ""; position: absolute; inset: 2.5px; pointer-events: none;
  background: var(--boss) 0 0 / 6px 6px no-repeat, var(--boss) 100% 0 / 6px 6px no-repeat, var(--boss) 0 100% / 6px 6px no-repeat, var(--boss) 100% 100% / 6px 6px no-repeat; }
.note.caution > * { position: relative; }
.note.caution .note-label { justify-content: center; color: var(--gold); text-align: center; }
.note.caution .note-label::before, .note.caution .note-label::after { flex: 0 1 2.6rem; min-width: 1rem; width: auto; height: 0; background: none; transform: none; margin-top: 8px; border: 0; border-top: 1px solid currentColor; opacity: .7; }
.note.caution .note-lead { text-align: center; text-wrap: balance; }
.note.caution p { max-width: none; }

.note.step { --note-rule: var(--line-strong); position: relative; padding: .85rem 0 1rem 2.4rem; border-top: 1px solid var(--line-strong); }
.note.step:has(> .note-label:first-child) { border-top: 0; padding-top: 0; }
.note.step::before { content: "\261E\FE0E"; position: absolute; left: -.05rem; top: .55rem; font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", "Noto Sans Symbols 2", serif; font-variant-emoji: text; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--accent); }
.note.step:has(> .note-label:first-child)::before { top: -.2rem; }
.note.step .note-label { color: var(--accent); }
.note.step .note-label::before { display: none; }
.note.step .note-label::after { height: 0; margin-top: 8px; border-block: 0; border-top: 1px solid var(--note-rule); }
@media (max-width: 560px) {
  .note-label { letter-spacing: .12em; gap: .55rem; }
  .note-label::after { flex-basis: 1.5rem; min-width: 1.5rem; }
  .note.step { padding-left: 1.9rem; }
  .note.step::before { font-size: 1.3rem; }
  .note.step:has(> .note-label:first-child) { padding-left: 0; }
  .note.step:has(> .note-label:first-child) .note-label { padding-left: 1.9rem; }
  .note.caution { padding-inline: 1.15rem; }
}
.error { color: var(--bad); }
.empty { text-align: center; padding: 5rem 1rem; display: grid; gap: .8rem; justify-items: center; }

/* type letters: four carved tiles in the family's pigment */
.badge { display: inline-flex; gap: 4px; --c: var(--accent); }
.badge span { display: inline-grid; place-items: center; width: 1.85em; height: 2.15em; font-family: var(--mono); font-weight: 500; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); }
.badge.sm { font-size: 10px; gap: 2px; }
.badge.md { font-size: 13px; }
.badge.lg { font-size: 22px; gap: 6px; }
.fam-AD { --c: var(--fam-AD); } .fam-AP { --c: var(--fam-AP); } .fam-ID { --c: var(--fam-ID); } .fam-IP { --c: var(--fam-IP); }
.typelink { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; white-space: nowrap; }
.typelink:hover .tl-name { text-decoration: underline; }
.tl-name { font-family: var(--serif); font-size: calc(1.12rem * var(--serif-text-scale)); }
.typecard .fig { font-family: var(--sans); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--caps-track); color: var(--muted); text-transform: uppercase; }
.typecard h3 { margin-top: .2rem; }
.typecard p.muted { font-family: var(--serif); font-size: calc(1.1rem * var(--serif-text-scale)); font-style: italic; line-height: 1.35; }

/* the stage: full-bleed ASCII statue */
.stage { position: relative; height: clamp(420px, 64vh, 640px); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); border-bottom: 1px solid var(--line); }
.stage .statue { position: absolute; inset: 0; }
/* "Backed by Y Combinator": a small plaque at the top centre of the hero */
.yc-badge { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: .55rem; padding: .38rem .8rem .38rem .45rem; font-family: var(--font-button); font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--button-track); text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; background: color-mix(in srgb, var(--bg) 82%, transparent); border-block: 3px double var(--line-strong); backdrop-filter: blur(2px); }
.yc-badge:hover { border-color: var(--ink); }
/* drawn in the dust instead (DustStatue badge): the link stays, transparent, over the particles */
.yc-badge.is-dust { transform: none; padding: 0; gap: 0; background: none; border: 0; backdrop-filter: none; color: transparent; left: calc(50% - 160px); width: 320px; height: 28px; top: 14px; overflow: hidden; }
.yc-badge.is-dust > * { opacity: 0; }
.yc-badge.is-dust:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }
.yc-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; background: #f26522; color: #fff; font-family: var(--sans, system-ui), sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0; }
/* the scrolling list of organisations under the hero */
.marquee { margin-top: 2.6rem; padding-block: 1.1rem 1.2rem; border-block: 1px solid var(--line); }
.marquee-label { margin: 0 0 .9rem; text-align: center; font-family: var(--serif); font-size: calc(1.15rem * var(--serif-text-scale)); font-style: italic; color: var(--muted); }
.marquee-label-end { margin: .9rem 0 0; }
.marquee-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-inner { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-inner { animation-play-state: paused; }
.marquee-row { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
/* each logo is an inline SVG painted in currentColor; --logo-h is the base height, --s the logo's optical correction */
.marquee { --logo-h: 30px; }
.marquee-row li { display: flex; align-items: center; height: calc(var(--logo-h) * 1.35); padding-inline: 1.9rem; color: var(--ink); opacity: .74; transition: opacity .2s; }
.marquee-row li:hover { opacity: 1; }
.marquee-logo { display: block; height: calc(var(--logo-h) * var(--s, 1)); }
.marquee-logo svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .marquee { --logo-h: 22px; } .marquee-row li { padding-inline: 1.25rem; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-inner { animation: none; width: auto; }
  .marquee-row { flex-wrap: wrap; justify-content: center; row-gap: .4rem; }
  .marquee-row[aria-hidden="true"] { display: none; }
  .marquee-track { -webkit-mask-image: none; mask-image: none; }
}
.stage-caption { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); bottom: 12px; }
.statue { position: relative; overflow: hidden; }
.statue canvas { display: block; transition: opacity .8s ease; }
.statue[data-ready="0"] canvas { opacity: 0; }
/* the share card's still of the bust, shown until the live dust has formed over it (DustStatue's poster), or for good
   where the dust doesn't run; laid on the ground behind it, its own ground blended away so no frame shows */
.statue-poster { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.4s ease .9s; }
.statue-poster.is-fading { opacity: 0; }
.statue-poster img { position: absolute; max-width: none; user-select: none; }
.statue-poster img.is-light { filter: brightness(1.04); mix-blend-mode: darken; }
.statue-poster img.is-dark { mix-blend-mode: lighten; }
.statue-poster + canvas { position: relative; z-index: 1; }
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: end; padding-top: 1rem; }
.hero .greek { font-size: 15px; color: var(--muted); margin-bottom: 1.2rem; display: block; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; gap: 1.5rem; } }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 2rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.steps .numeral { font-family: var(--serif); font-size: 2.6rem; font-weight: 300; color: var(--accent); line-height: 1; display: block; margin-bottom: .4rem; }
.steps h3 { margin-bottom: .35rem; }

/* forms */
.narrow { max-width: 860px; display: grid; gap: 1.2rem; }
/* The Oracle (#analyze): consulting the oracle at Delphi, set as a small temple court rather than a stack of boxes.
   A centred head with the three steps cut into a double-ruled band; then the precept stele (the privacy note, under
   the Delphic maxim "nothing in excess") beside the offering tablet, a tabula ansata in fine line where the sessions
   are laid down (the loader that replaces it is the same tablet, in dust). Below, the help is a museum catalogue:
   rooms on double rules with numbered entries between hairline walls, as in Wrapped. Choosing: the register of
   conversations on the left, the stele and the reveal tablet on the right. */
.oracle { width: 100%; max-width: 1120px; margin-inline: auto; display: grid; gap: 3.4rem; }
.or-head { display: grid; justify-items: center; text-align: center; padding-top: 1.4rem; }
.or-head .h1-sm { margin-top: .55rem; }
.or-lede { font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-style: italic; line-height: 1.4; color: var(--muted); max-width: 34rem; margin-top: 1rem; text-wrap: balance; }
.or-steps { list-style: none; margin: 1.9rem 0 0; padding: .6rem .3rem .52rem; display: flex; justify-content: center; border-block: 3px double var(--line-strong); font-family: var(--font-nav); font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--button-track); text-transform: uppercase; line-height: 1.3; color: var(--muted); }
.or-steps li { margin: 0; padding: 0 1.2rem; display: flex; gap: .55em; align-items: baseline; }
.or-steps li + li { border-left: 1px solid var(--line-strong); }
.or-steps li.on { color: var(--ink); }
.or-step-no { font-size: 1.1em; letter-spacing: .04em; }
.or-step-s { display: none; }
.or-steps li.on .or-step-no { color: var(--accent); }
.or-pending { margin-top: 1.1rem; font-family: var(--serif); font-size: calc(1.25rem * var(--serif-text-scale)); font-style: italic; }
.or-pending b { font-style: normal; font-weight: 600; }
/* files of a selection that couldn't be read, with their reasons */
details.or-pending summary { cursor: pointer; }
details.or-pending ul { list-style: none; margin: .5rem auto 0; padding: 0; max-width: 46rem; max-height: 14rem; overflow-y: auto; font-family: var(--sans, inherit); font-size: .95rem; font-style: normal; text-align: left; overflow-wrap: anywhere; }
details.or-pending li { padding: .15rem 0; }
details.or-pending li::before, details.or-pending li::marker { content: none; }

/* the precept: a small Ionic aedicula of marble (src/demo/temple.tsx draws it). The aside is a grid: the roof (one
   SVG, 480 × 164 units: pediment, cornice, frieze, architrave) spans the top row, and the Greek maxim is laid over
   its frieze as real text; then the guidance runs down the middle column between two pilasters, over a wall that sits
   behind everything, and the steps close the bottom. All the parts scale with the aside's width (cqi, or % of it), so
   the front keeps its proportions from a phone to the desktop column. --st-* are the stone: Parian marble in light,
   a dark stone with bronze fittings in dark. The stone is shared with the tabula ansata below, so the two read as a set. */
.or-precept, .tabula {
  --st-face: var(--raise);
  --st-hi: color-mix(in srgb, #fff 80%, var(--raise));
  --st-mid: color-mix(in srgb, var(--ink) 6%, var(--raise));
  --st-shade: color-mix(in srgb, var(--ink) 14%, var(--raise));
  --st-deep: color-mix(in srgb, var(--ink) 30%, var(--raise));
  --st-line: color-mix(in srgb, var(--ink) 50%, var(--raise));
  --st-groove: color-mix(in srgb, var(--ink) 20%, var(--raise));
  --st-orn: var(--st-face);
  --st-orn-hi: var(--st-hi);
  --st-orn-line: var(--st-deep);
  --st-vein: color-mix(in srgb, var(--ink) 4%, transparent);
  --st-grain-a: 1;
  --st-relief-sh: color-mix(in srgb, var(--ink) 42%, var(--raise));
  --st-emboss: 0 1px 0 var(--st-hi);
}
.or-precept {
  --tf-edge: 3.75%; --tf-pil: 5.833%; --tf-gut: clamp(.95rem, 4.2%, 1.6rem);
  position: relative; isolation: isolate; container-type: inline-size; display: grid; align-content: start;
  grid-template-columns: var(--tf-edge) var(--tf-pil) var(--tf-gut) minmax(0, 1fr) var(--tf-gut) var(--tf-pil) var(--tf-edge);
  font-size: var(--fs-text); line-height: 1.62;
}
:root[data-theme="dark"] :is(.or-precept, .tabula) {
  --st-face: color-mix(in srgb, var(--gold) 5%, var(--raise));
  --st-hi: color-mix(in srgb, var(--ink) 20%, var(--raise));
  --st-mid: color-mix(in srgb, #000 12%, var(--st-face));
  --st-shade: color-mix(in srgb, #000 26%, var(--st-face));
  --st-deep: color-mix(in srgb, #000 50%, var(--st-face));
  --st-line: color-mix(in srgb, var(--ink) 30%, var(--raise));
  --st-groove: color-mix(in srgb, #000 45%, var(--raise));
  --st-orn: color-mix(in srgb, var(--bronze) 55%, var(--raise));
  --st-orn-hi: color-mix(in srgb, var(--gold) 80%, var(--raise));
  --st-orn-line: color-mix(in srgb, #000 55%, var(--raise));
  --st-vein: color-mix(in srgb, var(--ink) 5%, transparent);
  --st-grain-a: .45;
  --st-relief-sh: var(--st-deep);
  --st-emboss: 0 1px 1px rgba(0, 0, 0, .55);
}
.or-precept > * { grid-column: 4; }
.tf-roof { grid-row: 1; grid-column: 1 / -1; display: block; width: 100%; height: auto; aspect-ratio: 480 / 164; overflow: visible; }
.tf-pil { grid-row: 2 / 30; display: flex; flex-direction: column; min-width: 0; }
.tf-pil-l { grid-column: 2; }
.tf-pil-r { grid-column: 6; }
.tf-steps { grid-row: 30; grid-column: 1 / -1; display: block; width: 100%; height: auto; aspect-ratio: 480 / 24; }
.or-precept > :last-child { margin-bottom: 1.6rem; }

/* the stone, in the SVG */
.tf-s-hi { stop-color: var(--st-hi); } .tf-s-face { stop-color: var(--st-face); } .tf-s-mid { stop-color: var(--st-mid); }
.tf-s-shade { stop-color: var(--st-shade); } .tf-s-deep { stop-color: var(--st-deep); }
.tf-s-orn { stop-color: var(--st-orn); } .tf-s-orn-hi { stop-color: var(--st-orn-hi); }
.tf-hi { fill: var(--st-hi); } .tf-face { fill: var(--st-face); } .tf-mid { fill: var(--st-mid); }
.tf-shade { fill: var(--st-shade); } .tf-deep { fill: var(--st-deep); }
.tf-cast { fill: var(--st-deep); opacity: .45; }
.tf-dart { stroke: var(--st-face); stroke-width: .7; fill: none; }
.tf-roof path[class^="tf-ln"], .tf-cap path[class^="tf-ln"], .tf-base path[class^="tf-ln"], .tf-steps path[class^="tf-ln"], .tf-joint { fill: none; vector-effect: non-scaling-stroke; }
.tf-ln, .tf-ln-path { stroke: var(--st-line); stroke-width: 1px; }
.tf-ln-fine { stroke: var(--st-deep); stroke-width: .75px; opacity: .7; }
.tf-ln-hi { stroke: var(--st-hi); stroke-width: 1px; }
.tf-joint { stroke: var(--st-deep); stroke-width: .75px; opacity: .22; }
.tf-roof [fill="url(#tf-grain)"], .tf-steps [fill="url(#tf-grain)"] { opacity: var(--st-grain-a); }
.tf-vein { fill: none; stroke: var(--st-vein); stroke-width: .7; }
.tf-relief { fill: url(#tf-g-orn); stroke: var(--st-orn-line); stroke-width: .35; }
.tf-relief-shadow { fill: var(--st-relief-sh); stroke: var(--st-relief-sh); stroke-width: .5; opacity: .8; }
.tf-relief .tf-tripod-leg, .tf-relief-shadow .tf-tripod-leg { fill: none; stroke-width: 1.7; stroke-linecap: round; }
.tf-relief .tf-tripod-leg { stroke: var(--st-orn); }
.tf-tripod-strut { fill: none; stroke-width: .8 !important; }
.tf-relief .tf-tripod-strut { stroke: var(--st-orn); }
.tf-tripod-ring { fill: none !important; stroke-width: 1.1 !important; }
.tf-relief .tf-tripod-ring { stroke: var(--st-orn); }
.tf-laurel-stem { fill: none !important; stroke-width: .9 !important; stroke-linecap: round; }
.tf-relief .tf-laurel-stem { stroke: var(--st-orn); }
.tf-acro-scroll { fill: none !important; stroke-width: .9 !important; stroke-linecap: round; }
.tf-relief .tf-acro-scroll { stroke: var(--st-orn); }
.tf-boss { fill: var(--st-orn-hi); stroke: var(--st-orn-line); stroke-width: .3; }
.tf-volute { fill: none; stroke: var(--st-deep); stroke-width: 1; }
.tf-volute-in { fill: none; stroke: var(--st-hi); stroke-width: .6; }

/* the pilasters: capital and base are SVG half as wide again as the shaft, the shaft is CSS: five flutes with
   fillets between them, each groove shadowed on its left wall and lit on its right, fading out at the ends */
.tf-cap, .tf-base { display: block; width: 150%; margin-inline: -25%; height: auto; flex: none; overflow: visible; }
.tf-cap { aspect-ratio: 60 / 24; }
.tf-base { aspect-ratio: 60 / 14; }
.tf-shaft { flex: 1; position: relative; min-height: 2rem; background: linear-gradient(90deg, var(--st-hi), var(--st-face) 30%, var(--st-face) 70%, var(--st-mid)); border-inline: 1px solid var(--st-line); }
.tf-shaft::before { content: ""; position: absolute; inset: 7px 12%; background: linear-gradient(90deg, var(--st-face) 0 16%, var(--st-deep) 18%, var(--st-shade) 40%, var(--st-face) 72%, var(--st-hi) 90%, var(--st-face) 100%) 0 0 / 20% 100%;
  -webkit-mask: linear-gradient(transparent, #000 5px, #000 calc(100% - 5px), transparent); mask: linear-gradient(transparent, #000 5px, #000 calc(100% - 5px), transparent); }
.tf-shaft::after { content: ""; position: absolute; inset: 0; background: var(--st-grain) 0 0 / 96px 96px; opacity: var(--st-grain-a); }

/* the wall, from under the architrave to the top step, and the panel recessed in it between the pilasters */
.or-precept, .tabula { --st-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'96'%20height%3D'96'%3E%3Cfilter%20id%3D'n'%20x%3D'0'%20y%3D'0'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'3'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%20.5%200%200%200%200%20.5%200%200%200%200%20.5%200%200%200%20.55%20-.24'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'96'%20height%3D'96'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E"); }
.tf-wall { grid-area: auto; position: absolute; z-index: -1; left: 2.5%; right: 2.5%; top: calc(100cqi * 164 / 480); bottom: calc(100cqi * 24 / 480);
  --tf-in: calc((var(--tf-edge) + var(--tf-pil) - 2.5%) * 100 / 95 + var(--tf-gut) * .36);
  background: linear-gradient(170deg, var(--st-hi), var(--st-face) 22%, var(--st-face) 70%, var(--st-mid));
  box-shadow: inset 0 9px 9px -8px var(--st-deep), inset 1px 0 0 var(--st-line), inset -1px 0 0 var(--st-line); }
.tf-wall::after { content: ""; position: absolute; inset: 0; background: var(--st-grain) 0 0 / 96px 96px; opacity: var(--st-grain-a); }
.tf-wall::before { content: ""; position: absolute; left: var(--tf-in); right: var(--tf-in); top: .6rem; bottom: .6rem;
  border: 1px solid; border-color: var(--st-groove) var(--st-hi) var(--st-hi) var(--st-groove);
  box-shadow: inset 1px 1px 0 var(--st-hi), inset -1px -1px 0 color-mix(in srgb, var(--st-groove) 50%, transparent);
  outline: 1px solid color-mix(in srgb, var(--st-groove) 60%, transparent); outline-offset: -6px; }

/* the maxim, cut into the frieze in gilt letters; the translation and the guidance on the panel below */
.or-greek { display: contents; }
.or-greek > span:first-child { grid-row: 1; grid-column: 1 / -1; align-self: end; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  height: calc(100cqi * 36 / 480); margin: 0 2.5% calc(100cqi * 20 / 480); padding: calc(100cqi * 3 / 480) 0 0 .32em;
  font-family: var(--greek); font-size: clamp(1.02rem, 4.3cqi, 1.75rem); letter-spacing: .32em; line-height: 1; color: var(--gold);
  text-shadow: 0 -1px 0 color-mix(in srgb, var(--st-deep) 70%, transparent), 0 1px 0 var(--st-hi); }
.or-greek-tr { grid-column: 4; margin-top: 1.25rem; text-align: center; font-family: var(--serif); font-size: calc(1.05rem * var(--serif-text-scale)); font-style: italic; letter-spacing: .02em; line-height: 1.2; color: var(--muted); }
.or-precept-h { margin-top: .7rem; font-size: clamp(1.4rem, 2.4vw, 1.7rem); font-weight: 500; line-height: 1.15; text-align: center; padding-bottom: .95rem;
  border-bottom: 1px solid var(--st-groove); box-shadow: 0 1px 0 var(--st-hi); text-shadow: var(--st-emboss); }
.or-precept p { max-width: none; }
.or-precept > p:not([class]) { margin-top: 1rem; }
.or-precept-foot { margin-top: 1rem; font-family: var(--serif); font-size: calc(1.12rem * var(--serif-text-scale)); font-style: italic; line-height: 1.4; color: var(--muted); padding-top: .9rem;
  border-top: 1px solid var(--st-groove); box-shadow: inset 0 1px 0 var(--st-hi); }
@media (max-width: 520px) {
  .or-precept { --tf-edge: 2.6%; --tf-pil: 4.2%; --tf-gut: 1.1rem; }
  .tf-wall::before { top: .4rem; bottom: .4rem; outline-offset: -4px; }
}

/* the tabula ansata (src/demo/tabula.tsx): a slab of the temple's marble, lit from the top left. Its edge is moulded
   in three steps drawn by .tabula-mould: an ovolo (the mitred border, bright on the lit sides, with a ridge of light
   along its crown), a dark fillet, and a cavetto hollowed the other way. A fine bead then frames the sunken field,
   which casts its own shadow under the top left of the moulding and carries the grain and a vein or two. A dovetail
   handle, moulded alike, stands on each side with its neck tucked under the slab's edge. */
.tabula { --ansa-w: 64px; --tab-ov: 7px; --tab-cv: 6px; position: relative; isolation: isolate; display: flex; align-items: center; min-width: 0; }
.tabula-sm { --ansa-w: 46px; }
.tabula-face { flex: 1; min-width: 0; position: relative; z-index: 1; padding: calc(var(--tab-ov) + var(--tab-cv) + 1px); color: var(--ink);
  background: linear-gradient(135deg, var(--st-hi), var(--st-face) 28%, var(--st-face) 70%, var(--st-mid));
  border: 1px solid var(--st-line);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--st-deep) 40%, transparent), 0 16px 26px -20px rgba(0, 0, 0, .55);
  transition: box-shadow .2s, border-color .2s; }
.tabula-face::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--st-grain) 0 0 / 96px 96px; opacity: var(--st-grain-a); }
.tabula-mould { position: absolute; inset: 0; pointer-events: none; border: var(--tab-ov) solid;
  border-color: var(--st-hi) var(--st-mid) var(--st-shade) color-mix(in srgb, var(--st-hi) 55%, var(--st-face));
  outline: 1px solid color-mix(in srgb, var(--st-hi) 75%, transparent); outline-offset: calc(var(--tab-ov) * -.62);
  transition: border-color .2s; }
/* the fillet and the cavetto: dark where it turns from the light, pale at its foot */
.tabula-mould::before { content: ""; position: absolute; inset: 0; border: var(--tab-cv) solid;
  border-color: var(--st-shade) color-mix(in srgb, var(--st-hi) 60%, var(--st-face)) var(--st-hi) var(--st-mid);
  box-shadow: 0 0 0 1px var(--st-deep); }
/* the field: sunk below the bead, the top left in the moulding's shadow */
.tabula-field { position: relative; z-index: 1; min-width: 0; padding: 2rem 2rem 1.8rem;
  background: linear-gradient(160deg, var(--st-mid), var(--st-face) 22%, var(--st-face) 78%, color-mix(in srgb, var(--st-hi) 45%, var(--st-face)));
  border: 1.5px solid; border-color: var(--st-hi) var(--st-mid) var(--st-shade) var(--st-hi);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-deep) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--st-groove) 70%, transparent),
    inset 3px 4px 9px -4px color-mix(in srgb, var(--st-deep) 80%, transparent);
  transition: background-color .2s; }
.tabula-field::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--st-grain-a);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M-2%2071C18%2063%2031%2077%2052%2068S83%2049%20103%2056M-2%2018C10%2022%2024%2015%2038%2019'%20fill%3D'none'%20stroke%3D'%23777'%20stroke-opacity%3D'.09'%20stroke-width%3D'.5'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100%,
    var(--st-grain) 0 0 / 96px 96px; }

.ansa { flex: none; position: relative; z-index: 0; width: var(--ansa-w); height: calc(var(--ansa-w) * 104 / 60); overflow: visible; transition: opacity .3s;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .14)); }
.ansa-l { margin-right: -3px; transform: scaleX(-1); }
.ansa-r { margin-left: -3px; }
.ansa path, .ansa circle { vector-effect: non-scaling-stroke; }
.ansa-grain { opacity: var(--st-grain-a); }
.ansa-edge { fill: none; stroke: var(--st-line); stroke-width: 1px; stroke-linejoin: miter; }
.ansa-arris { fill: none; stroke: var(--st-deep); stroke-width: 1px; }
.ansa-bead { fill: none; stroke: var(--st-hi); stroke-width: 1.5px; }
.ansa-socket { fill: var(--st-shade); stroke: var(--st-deep); stroke-width: .75px; }
.ansa-boss-sh { fill: var(--st-relief-sh); opacity: .7; }
.ansa-boss { stroke: var(--st-orn-line); stroke-width: .75px; }
.ansa-glint { fill: var(--st-hi); opacity: .85; }
/* in dark the bosses are bronze, like the temple's fittings */
:root[data-theme="dark"] .ansa-glint { fill: color-mix(in srgb, var(--gold) 60%, #fff); opacity: .7; }

/* what is cut into the field: rules incised (a groove with a lit lower lip), the heading and numerals as inscriptions */
.tabula :is(.drop-or)::before, .tabula :is(.drop-or)::after { height: 2px; background: none; border-top: 1px solid var(--st-groove); border-bottom: 1px solid var(--st-hi); }
.tabula .drop-tip, .tabula .or-ai { border-top: 1px solid var(--st-groove); box-shadow: inset 0 1px 0 var(--st-hi); }
.tabula .drop-title, .or-reveal-h { text-shadow: var(--st-emboss); }
.tabula .drop-icon { filter: drop-shadow(0 1px 0 var(--st-hi)); }
.tabula .drop-tip kbd { background: var(--st-mid); border-color: var(--st-groove); box-shadow: inset 0 -1px 0 var(--st-shade), 0 1px 0 var(--st-hi); }

/* the buttons on the tablet: the primary is a bronze plaque set in a sunk mount, raised and bevelled, that lifts on
   hover and presses in when held; the secondary is a quiet panel cut into the field */
.tabula .btn::after { display: none; }
.tabula .btn.primary { --pl: color-mix(in srgb, var(--bronze) 72%, #1d1712); --pl-hi: color-mix(in srgb, var(--bronze) 82%, #fff3dd); --pl-lo: color-mix(in srgb, var(--bronze) 40%, #120d09); --pl-top: color-mix(in srgb, var(--pl-hi) 55%, var(--pl)); --pl-lift: 1.08;
  color: #fbf3e4; letter-spacing: .15em; padding-inline: 1.15rem; border: 1px solid var(--pl-lo); outline: 0; margin: 6px; border-radius: 1px;
  background: linear-gradient(180deg, var(--pl-top), var(--pl) 46%, color-mix(in srgb, var(--pl) 80%, var(--pl-lo)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pl-hi) 85%, #fff), inset 1px 0 0 color-mix(in srgb, var(--pl-hi) 45%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--pl-lo) 70%, transparent),
    inset 0 0 0 4px color-mix(in srgb, var(--pl) 85%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--pl-lo) 55%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--pl-hi) 30%, transparent),
    0 0 0 4px var(--st-face), 0 0 0 5px var(--st-groove), 0 6px 0 -1px var(--st-hi), 0 3px 5px -1px rgba(0, 0, 0, .3);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55), 0 1px 0 color-mix(in srgb, var(--pl-hi) 35%, transparent);
  transition: transform .15s, box-shadow .15s, filter .15s, letter-spacing .25s; }
.tabula .btn.primary:hover { letter-spacing: .17em; filter: brightness(var(--pl-lift)) saturate(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pl-hi) 85%, #fff), inset 1px 0 0 color-mix(in srgb, var(--pl-hi) 45%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--pl-lo) 70%, transparent),
    inset 0 0 0 4px color-mix(in srgb, var(--pl) 85%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--pl-lo) 55%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--pl-hi) 30%, transparent),
    0 0 0 4px var(--st-face), 0 0 0 5px var(--st-groove), 0 6px 0 -1px var(--st-hi), 0 7px 10px -3px rgba(0, 0, 0, .35); }
.tabula .btn.primary:active { transform: translateY(1px); filter: brightness(.94);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), inset 0 0 0 5px color-mix(in srgb, var(--pl-lo) 55%, transparent),
    0 0 0 4px var(--st-face), 0 0 0 5px var(--st-groove), 0 1px 1px -1px rgba(0, 0, 0, .3); }
/* in dark the theme's bronze is brighter, so the plaque takes less of it to keep its cream letters at 4.5:1 or more */
:root[data-theme="dark"] .tabula .btn.primary { --pl: color-mix(in srgb, var(--bronze) 52%, #1d1712); --pl-top: color-mix(in srgb, var(--pl-hi) 30%, var(--pl)); --pl-lift: 1.04; }
.tabula .btn.primary:focus-visible, .tabula .drop-choice:has(input:focus-visible) .btn.primary { outline: 2px solid var(--accent); outline-offset: 7px; }
.tabula .btn.primary:disabled { filter: grayscale(.85) brightness(1.05); opacity: .6; transform: none; }
.tabula .btn:not(.primary) { border: 1px solid; border-color: var(--st-groove) var(--st-hi) var(--st-hi) var(--st-groove); padding-inline: 1.4rem; text-shadow: var(--st-emboss);
  background: color-mix(in srgb, var(--st-mid) 60%, transparent); box-shadow: inset 1px 1px 2px color-mix(in srgb, var(--st-deep) 45%, transparent), 0 1px 0 var(--st-hi);
  transition: background-color .2s, box-shadow .15s, letter-spacing .25s, color .2s; }
.tabula .btn:not(.primary):hover { background: var(--st-face); border-color: var(--st-shade) var(--st-hi) var(--st-hi) var(--st-shade); }
.tabula .btn:not(.primary):active { background: var(--st-mid); box-shadow: inset 1px 2px 4px color-mix(in srgb, var(--st-deep) 75%, transparent); }
.tabula .btn:not(.primary):focus-visible, .tabula .drop-choice:has(input:focus-visible) .btn:not(.primary) { outline: 2px solid var(--accent); outline-offset: 4px; }

/* the offering: the drop zone is the tablet; dragging over it wets the stone with the accent */
.or-altar { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: 2.6rem; align-items: center; }
.or-offer { display: grid; gap: 1.7rem; min-width: 0; }
.drop .tabula-field { text-align: center; }
/* dragging over it wets the field with the accent and lines the slab's edge with it */
.tabula.drag .tabula-face { border-color: var(--accent); }
.tabula.drag .tabula-field { background-color: color-mix(in srgb, var(--accent) 9%, var(--st-face)); background-image: none; box-shadow: 0 0 0 1px var(--accent), inset 3px 4px 9px -4px color-mix(in srgb, var(--accent) 45%, transparent); }
.drop-icon { width: 44px; height: 44px; color: var(--ink); opacity: .8; margin-bottom: .5rem; transition: transform .2s; }
.drop.drag .drop-icon { color: var(--accent); opacity: 1; transform: translateY(4px); }
.drop-title { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; margin: 0 auto .6rem; max-width: 19ch; text-wrap: balance; }
.drop-sub { max-width: 34rem; margin: 0 auto 1.4rem; color: var(--muted); font-size: var(--fs-text); line-height: 1.55; }
.drop-or { display: flex; align-items: center; gap: .9rem; max-width: 24rem; margin: 0 auto 1.2rem; font-family: var(--serif); font-style: italic; font-size: calc(1.05rem * var(--serif-text-scale)); color: var(--muted); }
.drop-or::before, .drop-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.drop-choices { display: flex; justify-content: center; gap: 1.2rem 1.8rem; flex-wrap: wrap; }
.drop-choice { display: flex; flex-direction: column; align-items: center; gap: .55rem; max-width: 13.5rem; }
/* the file inputs are hidden; their labels are the buttons, so the labels show the focus */
.drop-choice:has(input:focus-visible) .btn { outline: 1px solid var(--accent); outline-offset: 3px; }
.drop-choice:has(input:focus-visible) .btn.primary { outline-offset: 5px; }
.drop-hint { font-size: var(--fs-caption); color: var(--muted); line-height: 1.45; }
.drop-hint code, .drop-sub code, .drop-tip code { font-size: .92em; }
.drop-tip { margin: 1.5rem auto 0; padding-top: 1.1rem; border-top: 1px solid var(--line); max-width: 30rem; font-size: var(--fs-caption); color: var(--muted); }
.drop-tip kbd { font-family: var(--mono); font-size: 12.5px; padding: .05rem .35rem; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--bg); color: var(--ink); }
/* while the sessions are read the line tablet gives way to the same tablet in dust */
.drop.busy .ansa { opacity: 0; }
.drop.busy .tabula-face, .drop.busy .tabula-field { background: transparent; border-color: transparent; box-shadow: none; }
.drop.busy .tabula-face::before, .drop.busy .tabula-field::before, .drop.busy .tabula-mould { display: none; }
.drop.busy .tabula-field { padding-block: 1rem 1.4rem; }
@media (prefers-reduced-motion: reduce) { .tabula-face, .tabula-field, .tabula-mould, .ansa, .drop-icon, .tabula .btn { transition: none; } .drop.drag .drop-icon { transform: none; }
  .tabula .btn.primary:hover, .tabula .btn.primary:active { transform: none; } }
.or-error { text-align: center; }
.or-samples { display: grid; justify-items: center; gap: .9rem; text-align: center; padding-inline: 64px; }
.or-samples p { font-family: var(--serif); font-size: calc(1.15rem * var(--serif-text-scale)); font-style: italic; line-height: 1.4; color: var(--muted); max-width: 44ch; text-wrap: balance; }
.or-samples-h { font-family: var(--font-inscription); display: block; font-style: normal; font-size: var(--fs-inscription); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-bottom: .2rem; }
.or-samples .actions { justify-content: center; gap: .7rem 1.4rem; }
.tally { display: grid; justify-items: center; gap: .35rem; width: 100%; max-width: 560px; margin: 0 auto; text-align: center; }
.tally-canvas { display: block; width: 100%; aspect-ratio: 600 / 270; }
.tally-caption { font-family: var(--serif); font-size: clamp(1.3rem, 2.8vw, 1.75rem); line-height: 1.2; margin-top: .1rem; }
.tally-detail { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.boards .tally { margin-block: 1.2rem .4rem; }

/* the catalogue: rooms on a double rule; numbered entries share hairline walls */
.or-room { display: grid; min-width: 0; }
.or-room-name { font-family: var(--font-inscription); font-size: var(--fs-inscription); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; line-height: 1.3; color: var(--muted); padding-bottom: .5rem; }
.or-cat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 3px double var(--line-strong); border-bottom: 1px solid var(--line); overflow: hidden; }
.or-cat li { margin: -1px 0 0 -1px; padding: 1.4rem 1.9rem 1.6rem; border-left: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: .5rem; row-gap: .5rem; align-content: start; }
.or-no { grid-row: span 2; font-family: var(--serif); font-size: 2.2rem; font-weight: 300; line-height: .9; color: var(--accent); }
.or-cat h3 { font-size: 1.5rem; line-height: 1.1; }
.or-cat p { font-size: var(--fs-text); line-height: 1.62; max-width: 60ch; }
.or-cat code, .or-precept code { font-size: var(--fs-caption); color: var(--accent); white-space: nowrap; }
.or-where { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 3px double var(--line-strong); border-bottom: 1px solid var(--line); overflow: hidden; }
.or-ex { margin-left: -1px; padding: 1.3rem 1.9rem 1.6rem; border-left: 1px solid var(--line); display: grid; gap: .9rem; align-content: start; min-width: 0; }
.or-ex.plugin-alt { margin-top: 0; }
.or-ex .plugin-setup { margin-bottom: 0; }
.or-paths th { text-align: left; font-weight: 400; color: var(--muted); white-space: nowrap; padding: .5rem 1rem .5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.or-paths td { padding-block: .5rem; }
.kv { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.kv td { padding: .4rem .5rem .4rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv td.mono { word-break: break-all; color: var(--accent); }

/* choosing: the register of conversations beside the stele and the reveal tablet */
.or-consult { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "pick precept" "pick reveal"; gap: 2.6rem 3.2rem; align-items: start; }
.or-consult > .or-precept { grid-area: precept; }
.or-pick { grid-area: pick; display: grid; min-width: 0; }
.or-reveal { grid-area: reveal; }
.or-room-head { display: flex; justify-content: space-between; align-items: end; gap: .6rem 1rem; flex-wrap: wrap; padding-bottom: .5rem; border-bottom: 3px double var(--line-strong); }
.or-room-head .or-room-name { padding-bottom: 0; }
.or-pick-body { display: grid; gap: 1rem; padding-block: 1.1rem .9rem; }
.pick-proj, .pick-item { text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; transition: background-color .15s; }
.pick-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.pick-tools > label { flex: 1 1 260px; }
.or-count { font-size: var(--fs-caption); color: var(--muted); }
.picker { max-height: min(520px, 70vh); overflow-y: auto; display: grid; align-content: start; border-block: 1px solid var(--line); overscroll-behavior: contain; }
.pick-group + .pick-group { border-top: 1px solid var(--line); }
.pick-proj { display: flex; gap: .6rem; align-items: center; padding: .8rem .4rem .5rem; font-size: var(--fs-text); font-weight: 500; }
.pick-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .5rem .4rem .5rem 1.9rem; font-size: var(--fs-text); font-weight: 400; border-top: 1px dotted var(--line); }
.pick-item > .mono { font-size: var(--fs-caption); min-width: 13ch; }
.pick-proj:hover, .pick-item:hover { background: var(--accent-soft); }
.pick-item:has(input:not(:checked)) .ellipsis { color: var(--muted); }
/* a conversation's facts (prompts, tools, active time), and the project of one in "Other conversations" */
.pick-item > .pick-meta { min-width: 0; font-size: var(--fs-caption); color: var(--muted); text-align: right; white-space: nowrap; }
.pick-tag { font-size: var(--fs-caption); color: var(--muted); margin-right: .6em; }
.pick-tag::after { content: " ·"; }
.pick-note { min-width: 0; font-size: var(--fs-caption); font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* one prompt and no tool calls: "hi", "test" */
.pick-item.short .ellipsis { color: var(--muted); font-style: italic; }
.pick-item.short { padding-block: .3rem; }
/* a lone conversation: a row without a project header above it */
.pick-item.flat { padding-left: .4rem; border-top: 0; }
.pick-more { margin: .3rem 0 .6rem 1.9rem; justify-self: start; }
.pick-count { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.pick-tools > label.check { flex: 0 0 auto; padding-bottom: .7rem; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-caption); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-reveal .tabula-field { display: grid; gap: 1.3rem; padding: 1.8rem 1.6rem 1.6rem; }
.or-reveal-h { font-size: clamp(1.55rem, 2.6vw, 1.85rem); font-weight: 500; line-height: 1.1; text-align: center; }
/* under the heading, a hedera (the ivy leaf Roman cutters set between words) on an incised rule, in gilt */
.or-reveal-h::after { content: ""; display: block; width: min(10rem, 66%); height: 16px; margin: .7rem auto 0; background: linear-gradient(var(--gold), color-mix(in srgb, var(--gold) 70%, var(--st-deep)));
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%2016%27%3E%3Cpath%20d%3D%27M2%208h39M79%208h39%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%271.7%27%20cy%3D%278%27%20r%3D%271.7%27%2F%3E%3Ccircle%20cx%3D%27118.3%27%20cy%3D%278%27%20r%3D%271.7%27%2F%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M55%208C51.6%203.4%2054.2-.1%2058.2%201.1%2061.6%202.1%2066%205%2071.5%208%2066%2011%2061.6%2013.9%2058.2%2014.9%2054.2%2016.1%2051.6%2012.6%2055%208ZM56.6%207.5H66.4L66.4%208.5H56.6Z%27%2F%3E%3Cpath%20d%3D%27M55%208C51%208.4%2047.4%206.6%2048%204.1%2048.4%202.6%2050.2%202.3%2050.9%203.6%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%2016%27%3E%3Cpath%20d%3D%27M2%208h39M79%208h39%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%271.7%27%20cy%3D%278%27%20r%3D%271.7%27%2F%3E%3Ccircle%20cx%3D%27118.3%27%20cy%3D%278%27%20r%3D%271.7%27%2F%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M55%208C51.6%203.4%2054.2-.1%2058.2%201.1%2061.6%202.1%2066%205%2071.5%208%2066%2011%2061.6%2013.9%2058.2%2014.9%2054.2%2016.1%2051.6%2012.6%2055%208ZM56.6%207.5H66.4L66.4%208.5H56.6Z%27%2F%3E%3Cpath%20d%3D%27M55%208C51%208.4%2047.4%206.6%2048%204.1%2048.4%202.6%2050.2%202.3%2050.9%203.6%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
/* the tally: three coffers sunk in a carved band, a small column between each, the numbers cut and gilded */
.or-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; margin: 0; padding: 6px; border: 1px solid; border-color: var(--st-groove) var(--st-hi) var(--st-hi) var(--st-groove);
  background: color-mix(in srgb, var(--st-mid) 70%, transparent); box-shadow: inset 1px 2px 5px -2px color-mix(in srgb, var(--st-deep) 80%, transparent), 0 1px 0 var(--st-hi); }
.or-tally > div { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: .25rem; padding: .8rem .15rem .7rem; min-width: 0;
  background: linear-gradient(170deg, var(--st-mid), var(--st-face) 45%, color-mix(in srgb, var(--st-hi) 40%, var(--st-face)));
  box-shadow: inset 2px 2px 4px -2px color-mix(in srgb, var(--st-deep) 85%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--st-groove) 60%, transparent), inset -1px -1px 0 var(--st-hi); }
.or-tally > div + div::before { content: ""; position: absolute; left: -11px; top: -3px; bottom: -3px; width: 8px; pointer-events: none;
  background: linear-gradient(var(--st-hi), var(--st-shade)) top / 100% 3px no-repeat, linear-gradient(var(--st-hi), var(--st-shade)) bottom / 100% 3px no-repeat,
    linear-gradient(90deg, var(--st-shade), var(--st-hi) 30%, var(--st-face) 55%, var(--st-deep)) center / 5px calc(100% - 8px) no-repeat;
  box-shadow: 1px 1px 1px -1px color-mix(in srgb, var(--st-deep) 70%, transparent); }
.or-tally > div + div::after { content: ""; position: absolute; left: -9.5px; top: 4px; bottom: 4px; width: 1px; pointer-events: none; background: color-mix(in srgb, var(--st-deep) 55%, transparent); }
.or-tally dd { margin: 0; font-family: var(--serif); font-size: 2.3rem; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--gold);
  text-shadow: 0 1px 0 var(--st-hi), 0 -1px 0 color-mix(in srgb, var(--st-deep) 60%, transparent); }
.or-tally dt { font-family: var(--serif); font-size: calc(.94rem * var(--serif-text-scale)); font-style: italic; line-height: 1.2; color: var(--muted); text-align: center; text-shadow: var(--st-emboss); }
.or-handle { display: grid; gap: .35rem; }
/* the handle: a slot cut into the field, its floor in the shadow of the upper lip */
.or-handle label { text-shadow: var(--st-emboss); }
.tabula .or-handle input { padding: .55rem .75rem; background: color-mix(in srgb, var(--st-mid) 80%, var(--st-face)); border: 1px solid; border-color: var(--st-deep) var(--st-hi) var(--st-hi) var(--st-groove);
  box-shadow: inset 1px 2px 4px -1px color-mix(in srgb, var(--st-deep) 75%, transparent), 0 1px 0 var(--st-hi); transition: border-color .2s, box-shadow .2s; }
.tabula .or-handle input:focus { border-color: var(--accent); box-shadow: inset 1px 2px 4px -1px color-mix(in srgb, var(--st-deep) 75%, transparent), 0 0 0 1px var(--accent); }
.tabula .or-handle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.or-handle .small { margin-top: .25rem; }
.or-tz-away { display: grid; gap: .5rem; }
.or-tz-away summary { cursor: pointer; }
.or-tz-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; align-items: end; }
.or-tz-row label { display: grid; gap: .2rem; font-size: var(--fs-caption); min-width: 0; }
.or-tz-row input { min-width: 0; width: 100%; }
.or-ai { color: var(--ink-soft); line-height: 1.55; padding-top: 1rem; border-top: 1px solid var(--line); }
/* privacy mode on the reveal card (src/demo/privacy-mode.tsx) */
.or-leaves { display: block; margin-top: .45em; }
.privacy-choice { border: 0; margin: 0; padding: 1rem 0 0; min-width: 0; display: grid; gap: .55rem; border-top: 1px solid var(--line); }
.privacy-choice legend { padding: 0; margin-bottom: .55rem; font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.privacy-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); transition: background-color .15s, border-color .15s; }
.privacy-opt input { margin-top: .25rem; accent-color: var(--accent); }
.privacy-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.privacy-opt:hover { border-color: var(--line-strong); }
.privacy-opt > span { display: grid; gap: .3rem; min-width: 0; }
.privacy-opt-l { font-size: 15px; font-weight: 500; }
.privacy-opt-b { font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
.privacy-opt-b.muted { color: var(--muted); }
.private-vt { display: grid; gap: .6rem; padding: .9rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; background: var(--accent-soft); }
.private-vt-h { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; margin: 0; }
.private-vt-ask { display: grid; gap: .6rem; }
.private-vt-list { margin: .5rem 0 0; padding-left: 1.4rem; display: grid; gap: .3rem; max-height: 260px; overflow-y: auto; overflow-wrap: anywhere; }
.or-reveal-actions { display: grid; justify-items: center; gap: .9rem; }
.or-reveal-actions .btn.primary { width: calc(100% - 12px); }

@media (max-width: 980px) {
  .or-altar, .or-consult { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 680px; margin-inline: auto; }
  .or-consult { grid-template-areas: "precept" "pick" "reveal"; }
  .or-where { grid-template-columns: minmax(0, 1fr); }
  .or-where .or-ex { margin-left: 0; border-left: 0; }
  .or-where .or-ex + .or-ex { border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .oracle { gap: 2.6rem; }
  .or-head { padding-top: .6rem; }
  .or-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; padding-inline: 0; font-size: var(--fs-button); letter-spacing: var(--button-track); }
  .or-steps li { flex-direction: column; align-items: center; gap: .15rem; padding: 0 .4rem; text-align: center; }
  .or-step-no { font-size: 1.35em; }
  .or-step-l { display: none; }
  .or-step-s { display: inline; }
  .tabula { --ansa-w: 24px; --tab-ov: 4px; --tab-cv: 3px; }
  .tabula-field { padding: 1.7rem 1rem 1.4rem; }
  .tabula .btn.primary { letter-spacing: .12em; padding-inline: .8rem; }
  .tabula .btn.primary:hover { letter-spacing: .13em; }
  .or-tally { column-gap: 12px; padding: 4px; }
  .or-tally > div + div::before { left: -10px; }
  .or-tally > div + div::after { left: -8.5px; }
  .or-tally dd { font-size: 2rem; }
  .or-tally dt { font-size: .84rem; }
  /* the "how to choose" and "where your logs live" rooms stack to one column on phones */
  .or-samples { padding-inline: 0; }
  .or-cat { grid-template-columns: minmax(0, 1fr); }
  .or-cat li { margin-left: 0; border-left: 0; padding: 1.2rem 0 1.4rem; grid-template-columns: 2.4rem minmax(0, 1fr); }
  .or-no { font-size: 1.8rem; }
  .or-cat h3 { font-size: 1.35rem; }
  .or-ex { padding: 1.2rem 0 1.4rem; }
  /* picker rows: date and counts on the first line, the first prompt below, up to two lines */
  .pick-item { grid-template-columns: auto auto minmax(0, 1fr); padding-left: 1.1rem; row-gap: .1rem; column-gap: .5rem; }
  .pick-item.flat { padding-left: .4rem; }
  .pick-item > .mono { grid-row: 1; grid-column: 2; min-width: 0; font-size: var(--fs-caption); }
  .pick-item > .pick-meta { grid-row: 1; grid-column: 3; font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; }
  .pick-item .ellipsis { grid-row: 2; grid-column: 2 / -1; }
  .pick-item input { grid-row: span 2; align-self: start; margin-top: .3rem; }
  .pick-more { margin-left: 1.1rem; }
  .pick-note { display: none; }
  .pick-item .ellipsis { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
/* the narrowest phones: slimmer handles and a tighter field so the tally's longest word keeps to its coffer */
@media (max-width: 359px) {
  .tabula { --ansa-w: 18px; }
  .tabula-field, .or-reveal .tabula-field { padding-inline: .7rem; }
  .or-tally { column-gap: 9px; padding: 3px; }
  .or-tally > div + div::before { left: -8px; width: 7px; }
  .or-tally > div + div::after { left: -6.5px; }
  .or-tally dt { font-size: .72rem; letter-spacing: -.01em; }
  .or-reveal .tabula-field { padding: 1.5rem 1rem 1.3rem; }
  .or-tally dd { font-size: 1.9rem; }
}
.form3, .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1.2rem; }
label { display: grid; gap: .35rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--muted); }
label.check { display: flex; align-items: center; gap: .5rem; align-self: end; padding-bottom: .5rem; }
input:not([type=checkbox]), select { font-family: var(--sans); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: .5rem 0; width: 100%; }
input:not([type=checkbox]):focus, select:focus { outline: none; border-bottom-color: var(--accent); }
input::placeholder { color: var(--faint); }
select option { background: var(--surface); color: var(--ink); }
input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }

/* result: statue + museum wall label */
.exhibit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border: 1px solid var(--line); background: var(--surface); }
.exhibit .statue { min-height: 460px; border-right: 1px solid var(--line); }
/* wide screens: the bust stands low in its column, head and shoulders above the fold and gazing up at its title,
   the plinth just below to draw the eye down; a fixed-size frame (not the label's height) keeps it the same on
   every profile, and its loose dust fades out top and bottom instead of stopping at an edge */
@media (min-width: 861px) {
  .exhibit .statue {
    --bust-h: clamp(560px, 80vh, 780px);
    align-self: start; min-height: 0; height: var(--bust-h); border-right: 0;
    /* stays in view beside a long label (traits, the share box), resting at the foot of the window */
    position: sticky; top: max(58px, calc(100vh - var(--bust-h)));
    margin-top: max(3rem, calc(100vh - 10.5rem - .7 * var(--bust-h)));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 84%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 84%, transparent);
  }
  .exhibit .label-card { border-left: 1px solid var(--line); }
}
.label-card { padding: 2rem; display: grid; gap: 1.2rem; align-content: start; }
.label-card h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.label-card .tag-line { font-family: var(--serif); font-style: italic; font-size: 1.4rem; line-height: 1.35; color: var(--muted); }
.label-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
@media (max-width: 860px) { .exhibit { grid-template-columns: 1fr; } .exhibit .statue { min-height: 380px; border-right: 0; border-bottom: 1px solid var(--line); } }
.score-row { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.score { display: grid; gap: .4rem; }
.ranks { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.axes, .skills { display: grid; gap: 1.1rem; }
.axis-labels { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--muted); }
.axis-labels .strong { color: var(--ink); font-weight: 700; }
.track { position: relative; height: 1px; background: var(--line-strong); margin: .7rem 0 .55rem; }
.track .mid { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1px; background: var(--line-strong); }
.track .dot { position: absolute; top: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.bar { height: 3px; background: var(--line); margin: .45rem 0 .3rem; }
.bar div { height: 100%; background: var(--ink); }
.bar div.low { background: var(--bad); }
.insights { list-style: none; padding: 0; display: grid; gap: .9rem; font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.45; }
/* Tags read as a gloss in the margin: a short rule, then a few italic words set slightly above the line. */
.tag { display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1em; line-height: 1; letter-spacing: .01em; text-transform: none; margin-left: .5em; vertical-align: .3em; white-space: nowrap; }
.tag::before { content: ""; display: inline-block; width: .9em; height: 1px; background: currentColor; opacity: .6; vertical-align: .28em; margin-right: .3em; }
/* at the start of a coaching line it's a label instead: small capitals and a rule leading into the text */
.insights .tag { font-family: var(--font-label); font-style: normal; text-transform: uppercase; letter-spacing: var(--caps-track); font-size: var(--fs-label); font-weight: 600; vertical-align: baseline; margin: 0 .55em 0 0; }
.insights .tag::before { display: none; }
.insights .tag::after { content: ""; display: inline-block; width: 1.4em; height: 1px; background: currentColor; opacity: .6; vertical-align: .3em; margin-left: .45em; }
.tag.strength { color: var(--accent); } .tag.blindspot { color: var(--bad); } .tag.tip { color: var(--gold); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem; display: grid; gap: .25rem; }
.vs { justify-items: center; text-align: center; }
.vs h2 { margin: 0; }
.axes-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: 1.4rem; font-size: var(--fs-text); }
.fam-block { margin-top: 3rem; }
.fam-block h2 { color: var(--c); }
.letters { list-style: none; padding: 0; font-size: var(--fs-text); }

/* tables & tabs */
/* Tabs are words in a running line of serif, parted by interpuncts; the chosen one is inked and underscored. */
.tabs { display: flex; gap: .1rem 1.6rem; flex-wrap: wrap; margin: .6rem 0 1.2rem; border-bottom: 1px solid var(--line); }
.tabs button { position: relative; font-family: var(--font-nav); font-size: var(--fs-tab); font-weight: 500; line-height: 1.2; padding: .45rem 0 .4rem; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); cursor: pointer; transition: color .2s; }
.tabs button + button::before { content: ""; position: absolute; left: calc(-.8rem - 1.5px); top: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 50%; background: var(--faint); pointer-events: none; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.scroll { overflow-x: auto; }
table.lb { width: 100%; border-collapse: collapse; font-size: var(--fs-text); }
table.lb th { text-align: left; font-family: var(--font-label); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--muted); padding: .7rem .8rem; border-bottom: 1px solid var(--line-strong); }
table.lb td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.lb tbody tr:hover { background: var(--accent-soft); }
table.lb th.r, table.lb td.r { text-align: right; }
table.lb td.num { white-space: nowrap; }
.person { font-family: var(--serif); font-size: calc(1.15rem * var(--serif-text-scale)); }
td.win { color: var(--accent); font-weight: 700; }
@media (max-width: 640px) { .hide-sm { display: none; } }
/* the first three places: a Roman numeral inside a laurel wreath of gold, silver or bronze */
.medal { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; margin: -9px 0 -9px -9px; vertical-align: middle; }
.medal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.medal-n { position: relative; font-family: var(--serif); font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1; color: var(--ink); margin-top: -1px; }
.medal.g1 { color: var(--gold); } .medal.g2 { color: var(--silver); } .medal.g3 { color: var(--bronze); }
/* Challenge cards read like an entry in an exhibition catalogue: a catalogue numeral and the domain in
   small serif capitals over a hairline, the title with any gloss, then the terms of the event: the grade as a
   small temple front whose three columns fill up with the grade and the time target beside an hourglass. */
.event { gap: .75rem; }
.catalogue { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); font-family: var(--serif); color: var(--muted); }
.cat-no { font-size: 1.05rem; font-weight: 600; letter-spacing: .08em; color: var(--ink); }
.cat-domain { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--caps-track); text-transform: uppercase; }
.terms { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.8rem; font-family: var(--font-ui); font-size: var(--fs-ui); color: var(--muted); }
.grade { display: inline-flex; align-items: center; gap: .6rem; }
.temple { color: var(--ink); flex: none; }
.grade-word { text-transform: capitalize; color: var(--ink); }
.event h3 .tag { font-size: .66em; color: var(--muted); vertical-align: .2em; }
.hourglass { display: inline-flex; align-items: baseline; gap: .3rem; }
.hourglass, .grade { min-height: 1.6rem; }
.hourglass svg { align-self: center; color: var(--ink); margin-right: .2rem; }
.hg-label { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--caps-track); text-transform: uppercase; }
.hg-n { font-size: 1.55rem; font-weight: 600; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.split > div { display: grid; gap: 1.2rem; min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.spec { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.55; grid-template-columns: minmax(0, 1fr); overflow-wrap: break-word; }
.spec h1 { font-size: 2.6rem; margin-bottom: .6rem; }
.spec h2 { font-size: 1.6rem; margin: 1.4rem 0 .3rem; }
.spec pre, pre.code { background: var(--bg); border: 1px solid var(--line); padding: .8rem 1rem; overflow-x: auto; font-family: var(--mono); font-size: var(--fs-small); line-height: 1.6; margin: .6rem 0; }
pre.code::before { content: "$ "; color: var(--accent); }
.spec table { border-collapse: collapse; font-family: var(--mono); font-size: var(--fs-small); display: block; overflow-x: auto; }
.spec th, .spec td { border-bottom: 1px solid var(--line); padding: .35rem .7rem; text-align: left; }
.spec code { font-family: var(--mono); font-size: .72em; background: var(--bg); border: 1px solid var(--line); padding: .05rem .3rem; }
.spec pre code { background: none; border: 0; padding: 0; font-size: 1em; }
.blink::after { content: "█"; margin-left: .12em; color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .blink::after { animation: none; } }

/* ---------- vibe check, sharing and groups ---------- */
/* member identity colours (categorical, validated for both surfaces); fixed order, never cycled */
:root { --m1: #2a78d6; --m2: #eb6834; --m3: #1baf7a; --m4: #eda100; --m5: #e87ba4; --m6: #008300; --m7: #6250d6; --m8: #e34948; }
:root[data-theme="dark"] { --m1: #3987e5; --m2: #d95926; --m3: #199e70; --m4: #c98500; --m5: #d55181; --m6: #008300; --m7: #9085e9; --m8: #e66767; }

.sig-h { font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
.sig { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; counter-reset: s; }
.sig li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .2rem; align-items: baseline; margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.sig-n { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; color: var(--accent); }
.sig-text { font-family: var(--serif); font-size: 1.55rem; line-height: 1.22; text-wrap: pretty; }
.sig-cmp { font-family: var(--sans); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--accent); margin-top: .45rem; display: flex; align-items: center; gap: .7rem; }
.bell { flex: none; overflow: visible; }
.bell-area { fill: var(--accent); opacity: .22; }
.bell-curve { fill: none; stroke: var(--muted); stroke-width: 1; opacity: .75; }
.bell-base { fill: none; stroke: var(--line); stroke-width: 1; }
.bell-dot { fill: var(--accent); filter: drop-shadow(0 0 3px var(--accent)); }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.2rem; }
.sigcard .sig-text { font-size: 1.45rem; }

.invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.invite p { flex: 1 1 22rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; max-width: 60ch; }
.invite.step::before { top: 1.05rem; }
.invite .btn { flex: none; }
.invite > * + * { margin-top: 0; }
/* The share box lays itself out by its own width (it sits in a narrow column on wide screens and fills a phone):
   buttons never wrap their words; narrow, they stack full width; wider, they pair up in even columns. */
.sharebox { container-type: inline-size; display: grid; gap: .6rem; padding: 1rem; border: 1px solid var(--line-strong); background: var(--raise); }
.sharebox .btn { white-space: nowrap; min-width: 0; }
.share-card { margin: 0 0 .4rem; display: grid; gap: .55rem; }
.share-card img, .share-card-wait { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border: 1px solid var(--line); background: var(--bg); }
.share-card-wait { animation: card-wait 1.4s ease-in-out infinite alternate; }
@keyframes card-wait { from { opacity: .55; } to { opacity: 1; } }
/* the two images: the post card and the upright story card (shown at a phone-like width, not the box's) */
.share-card-tabs { margin: 0 0 .1rem; }
.share-card.is-story img, .share-card.is-story .share-card-wait { aspect-ratio: 1080 / 1920; width: min(100%, 300px); }
.share-card figcaption { display: grid; gap: .55rem; }
.share-card-btns, .share-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.btn.disabled { pointer-events: none; opacity: .45; }
.share-row input { min-width: 0; font-size: var(--fs-small) !important; color: var(--muted) !important; }
@container (min-width: 360px) {
  .share-card-btns, .share-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share-row input { grid-column: 1 / -1; }
  /* a lone button (no Copy image, no share sheet) takes the whole row */
  .share-card-btns > .btn:only-child, .share-row > .btn:last-child:nth-child(2) { grid-column: 1 / -1; }
  /* Share to story (phones that share files) heads the buttons, on a row of its own */
  .share-card-btns > .btn.primary { grid-column: 1 / -1; }
}
@container (min-width: 620px) {
  .share-card figcaption { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .share-card-btns { grid-template-columns: none; grid-auto-flow: column; }
  .share-card-btns > .btn:only-child, .share-card-btns > .btn.primary { grid-column: auto; }
  .share-row { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .share-row input, .share-row > .btn:last-child:nth-child(2) { grid-column: auto; }
}

.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--surface); }
.who { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--sans); font-weight: 500; font-size: var(--fs-text); text-decoration: none; white-space: nowrap; color: var(--ink); }
a.who:hover { text-decoration: underline; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }

/* percentile tracks */
table.habits td { padding-block: .55rem; }
table.habits td:first-child { white-space: nowrap; }
.track-h { min-width: 240px; width: 46%; }
.track-h, .track-c { padding-inline: 1.2rem !important; }
.track-h { display: table-cell; }
.track-h span { display: inline-block; width: 33.33%; font-size: var(--fs-caption); letter-spacing: .04em; }
.track-h span:nth-child(2) { text-align: center; } .track-h span:nth-child(3) { text-align: right; }
.ptrack { position: relative; height: 18px; }
.ptrack::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
.ptrack-mid { position: absolute; left: 50%; top: 3px; bottom: 3px; width: 1px; background: var(--line-strong); }
.ptrack-span { position: absolute; top: calc(50% - 1px); height: 2px; background: var(--ink); opacity: .35; }
.pdot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); cursor: default; }
.pdot::after { content: ""; position: absolute; inset: -8px; } /* hit target larger than the mark */
.fun { margin-left: .5rem; font-size: var(--fs-caption); }

/* head to head */
.h2h, .group { display: grid; gap: 1.4rem; }
.h2h > h2, .group > h2 { margin: 1.2rem 0 0; }
.vscard { border-top: 3px solid; }
.alike { grid-template-columns: auto minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (max-width: 640px) { .alike { grid-template-columns: 1fr; gap: 1rem; } }
.diff-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.diff-vals > div { display: grid; gap: .3rem; }

/* groups */
.supers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.super { padding: 1.1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: .45rem; align-content: start; }
.super .eyebrow { font-family: var(--serif); font-size: 1.35rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pair-who { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
table.matrix th, table.matrix td { text-align: center; }
table.matrix tbody th { text-align: left; border-bottom: 1px solid var(--line); padding: .6rem .8rem; }
table.matrix td a { display: inline-block; min-width: 3.4em; padding: .2rem .3rem; text-decoration: none; background: color-mix(in srgb, var(--accent) calc(var(--a) * 30%), transparent); }
.faint { color: var(--faint); }
.rename { display: grid; grid-template-columns: minmax(0, 320px) auto; gap: 1rem; align-items: end; justify-content: start; }
.grouplist { display: grid; gap: .8rem; }
.grow { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: center; }
@media (max-width: 760px) { .grow { grid-template-columns: 1fr; } }
.gname { font-family: var(--serif); font-size: 1.5rem; text-decoration: none; }
.stats.inset { border-color: var(--line); }
@media (max-width: 640px) {
  table.habits thead { display: none; }
  table.habits tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 1rem; border-bottom: 1px solid var(--line); padding: .55rem 0; }
  table.habits td { border: 0; padding: 0 .2rem; }
  table.habits td.track-c { grid-column: 1 / -1; padding: .35rem .4rem 0 !important; }
}
.coach-cmp { display: block; font-family: var(--sans); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--accent); margin-top: .3rem; }
.basis { margin-top: .8rem; max-width: 80ch; }
.h1-sm + .lede, .h1-sm + p { margin-top: 1.1rem; }
section > .lede { margin-bottom: 1.8rem; }
.eyebrow + .h1-sm { margin-top: .5rem; }

/* Wrapped: three rooms of a small museum (the Hours, Manners, the Treasury). Each room stands on a double-ruled
   plinth like the buttons; its exhibits share hairline walls rather than sitting in boxes. An exhibit has a
   catalogue line (a Roman numeral and the title in serif capitals), an artefact drawn in fine line from the
   person's own numbers, and its label in large serif with the measurement in mono beneath. Ink draws the
   artefacts; the accent marks the one part that is the person's data (the hand of the dial, the water, the lozenge). */
.wr { display: grid; }
.wr-room { margin-top: 1.5rem; }
.wr-room-name { font-family: var(--font-inscription); font-size: var(--fs-inscription); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); padding-bottom: .45rem; }
.wr-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; border-top: 3px double var(--line-strong); border-bottom: 1px solid var(--line); overflow: hidden; }
.ex { grid-column: span 4; display: grid; grid-template-rows: auto 1fr auto; gap: 1.1rem; align-content: start; min-width: 0; padding: 1.15rem 1.6rem 1.7rem; margin: -1px 0 0 -1px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.ex-cat { display: flex; align-items: baseline; gap: .75rem; font-family: var(--font-inscription); font-size: var(--fs-inscription); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1.3; color: var(--muted); text-wrap: balance; }
.ex-no { flex: none; min-width: 2.4rem; font-size: 1.05rem; letter-spacing: .08em; color: var(--ink); }
.ex-fig { margin: 0; display: grid; align-content: end; justify-items: start; gap: .5rem; min-width: 0; }
/* the figures (src/demo/wrapped-figs.tsx) draw themselves: their colours, strokes and type are set inline, and the
   small ones carry their natural size (all at one scale, the foot on the bottom edge), so that they stand at one
   scale on one line across a row. The page only bounds them and sizes the large ones. */
.ex-fig svg { display: block; max-width: 100%; height: auto; overflow: visible; color: var(--ink); }
.ex-fig figcaption { font-family: var(--serif); font-style: italic; font-size: calc(1.02rem * var(--serif-text-scale)); line-height: 1.25; color: var(--muted); }
.ex-label { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; line-height: 1; letter-spacing: -.01em; font-variant-numeric: lining-nums; text-wrap: balance; }
.ex-unit { font-style: italic; font-size: .6em; letter-spacing: 0; color: var(--muted); }
.ex-stat { font-family: var(--mono); font-size: var(--fs-small); font-weight: 500; line-height: 1.5; margin-top: .6rem; }
.ex-note { font-size: var(--fs-text); line-height: 1.55; color: var(--muted); margin-top: .35rem; max-width: 48ch; }
/* the rooms' plans: one large exhibit and the rest around it */
.wr-hours .ex-hour { grid-column: 1 / span 6; grid-row: span 2; }
.wr-hours .ex-week { grid-column: span 6; }
.wr-hours .ex-length, .wr-hours .ex-time { grid-column: span 3; }
.wr-manners .ex-write { grid-column: span 5; }
.wr-manners .ex-multi { grid-column: span 7; }
.wr-manners .ex-spell, .wr-manners .ex-verbose { grid-column: span 6; }
.wr-manners .ex-temper { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; column-gap: 3rem; }
.wr-manners .ex-temper .ex-cat { grid-column: 1 / -1; }
.wr-manners .ex-temper .ex-fig { grid-column: 2; grid-row: 2; align-content: center; justify-items: stretch; }
.wr-manners .ex-temper .ex-text { grid-column: 1; grid-row: 2; }
.wr-treasury .ex-cost { grid-column: 1 / span 4; grid-row: span 2; }
.wr-treasury .ex-tokens { grid-column: span 8; }
.wr-treasury .ex-lines, .wr-treasury .ex-day { grid-column: span 4; }
.ex-hour .ex-fig { justify-items: center; align-content: center; }
/* the price is struck on the coin already; on wide screens its label is kept for screen readers only */
@media (min-width: 701px) { .ex-struck { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ex-struck + .ex-stat { margin-top: 0; } }
.ex-hour .ex-fig svg { width: auto; height: 330px; }
.ex-hour .ex-label, .ex-cost .ex-label { font-size: 3.3rem; }
.ex-week .ex-fig svg { width: auto; height: 150px; }
.ex-cost .ex-fig { justify-items: center; align-content: center; }
.ex-cost .ex-fig svg { width: auto; height: 280px; }
.ex-temper .ex-fig svg { width: 100%; max-width: 520px; }
/* the exhibits in a row share their tracks (title, figure, caption, text), so the figures stand on one line and the
   labels start level, whatever the titles and captions above and below them */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 701px) {
    .wr-grid > .ex { grid-row: span 4; grid-template-rows: subgrid; }
    .wr-grid > .ex > .ex-cat { grid-row: 1; }
    .wr-grid > .ex > .ex-fig { grid-row: 2 / span 2; grid-template-rows: subgrid; row-gap: .5rem; }
    .wr-grid > .ex > .ex-fig > svg { align-self: end; }
    .wr-grid > .ex > .ex-fig > figcaption { grid-row: 2; align-self: start; }
    .wr-grid > .ex > .ex-text { grid-row: 4; }
    .wr-grid > .ex.ex-temper { grid-row: span 1; grid-template-rows: auto auto; }
    .wr-grid > .ex.ex-temper > .ex-fig, .wr-grid > .ex.ex-temper > .ex-text { grid-row: 2; }
    .wr-grid > .ex.ex-temper > .ex-fig { grid-template-rows: none; }
  }
  @media (min-width: 1001px) {
    .wr-grid > .ex.ex-hour, .wr-grid > .ex.ex-cost { grid-row: span 8; }
    .wr-grid > .ex.ex-hour > .ex-fig, .wr-grid > .ex.ex-cost > .ex-fig { grid-row: 2 / 8; grid-template-rows: none; }
    .wr-grid > .ex.ex-hour > .ex-fig > svg, .wr-grid > .ex.ex-cost > .ex-fig > svg { align-self: auto; }
    .wr-grid > .ex.ex-hour > .ex-text, .wr-grid > .ex.ex-cost > .ex-text { grid-row: 8; }
  }
}

/* the water clock: drops fall from the nozzle to the water, and when the cup runs over the spill trickles down its
   walls. With reduced motion the drops hang still below the nozzle. */
.fx-drip { transform: translateY(var(--rest, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .fx-drip { animation: fx-drip 2.4s cubic-bezier(.55, 0, .9, .6) infinite; }
  .fx-drip-2 { animation-delay: -1.2s; }
  .fx-flow { animation: fx-flow 1.4s linear infinite; }
}
@keyframes fx-drip { 0% { transform: translateY(0); opacity: 0; } 10%, 88% { opacity: 1; } 100% { transform: translateY(var(--fall)); opacity: 0; } }
@keyframes fx-flow { to { stroke-dashoffset: -8.5; } }
/* the entrances (useEntrance in wrapped-figs.tsx): the figure is marked data-fx="armed" on mount, only when motion is
   welcome, and "play" once it is in view; unmarked, it stands in its final pose. The balance is let go from --from
   and swings to rest at --tilt, damped, and the pans' names fade in under them; the wax tablet's slips are smoothed
   out and rewritten one by one (--i). */
[data-fx="armed"] .fx-swing { transform: rotate(var(--from)); }
[data-fx="play"] .fx-swing { animation: fx-swing 2.8s both; }
@keyframes fx-swing {
  0% { transform: rotate(var(--from)); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  24% { transform: rotate(calc(var(--tilt) + (var(--from) - var(--tilt)) * -.42)); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  46% { transform: rotate(calc(var(--tilt) + (var(--from) - var(--tilt)) * .18)); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  66% { transform: rotate(calc(var(--tilt) + (var(--from) - var(--tilt)) * -.07)); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  84% { transform: rotate(calc(var(--tilt) + (var(--from) - var(--tilt)) * .025)); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: rotate(var(--tilt)); }
}
[data-fx="armed"] .fx-late { opacity: 0; }
[data-fx="play"] .fx-late { animation: fx-smooth .5s 2.2s ease-out both; }
[data-fx="armed"] .fx-smooth { opacity: 0; }
[data-fx="armed"] .fx-ghost { fill-opacity: .8; }
[data-fx="armed"] .fx-write { clip-path: inset(0 100% 0 0); }
[data-fx="play"] .fx-smooth { animation: fx-smooth .45s calc(.5s + var(--i, 0) * .32s) ease-out both; }
[data-fx="play"] .fx-ghost { animation: fx-ghost .45s calc(.5s + var(--i, 0) * .32s) ease-out both; }
[data-fx="play"] .fx-write { animation: fx-write .55s calc(.8s + var(--i, 0) * .32s) cubic-bezier(.3, 0, .2, 1) both; }
@keyframes fx-smooth { from { opacity: 0; } }
@keyframes fx-ghost { from { fill-opacity: .8; } }
@keyframes fx-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* The heading: the title, the "just for fun" line under it, and on your own Wrapped "Share your vibes wrapped" to the right
   (under them on phones). Each exhibit's quiet "Share" sits at the end of its catalogue line, in the buttons' serif capitals,
   and the title leaves it room. Both open the share sheet (src/demo/wrapped-share.tsx). */
.wr-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; row-gap: .35rem; align-items: end; min-width: 0; }
.wr-head h2 { margin: 0; min-width: 0; }
.wr-fun { grid-column: 1; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wr-share-all { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-bottom: .1rem; white-space: nowrap; }
@media (max-width: 560px) {
  .wr-head { grid-template-columns: minmax(0, 1fr); }
  .wr-share-all { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .6rem; }
}
.ex.has-share { position: relative; }
.ex.has-share > .ex-cat { padding-right: 4.2rem; }
.ex-share { position: absolute; top: .72rem; right: 1.15rem; font-family: var(--font-button); font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--button-track); text-transform: uppercase; line-height: 1.3; color: var(--muted); background: none; border: 0; padding: .45rem .45rem .4rem; cursor: pointer; transition: color .15s; }
.ex-share::after { content: ""; position: absolute; left: .45rem; right: .45rem; bottom: .3rem; border-bottom: 1px solid currentColor; opacity: .35; transition: opacity .15s; }
.ex-share:hover, .ex-share:focus-visible { color: var(--ink); }
.ex-share:hover::after, .ex-share:focus-visible::after { opacity: 1; }
@media (max-width: 700px) { .ex-share { top: .65rem; right: -.45rem; } .ex.has-share > .ex-cat { padding-right: 3.8rem; } }
@media (pointer: coarse) { .ex-share { padding-block: .8rem .75rem; top: .3rem; } .ex-share::after { bottom: .65rem; } }
@media (prefers-reduced-motion: reduce) { .ex-share, .ex-share::after { transition: none; } }

/* The share sheet (src/demo/wrapped-share.tsx): a catalogue card over the page like the feedback dialog, holding the
   share panel without its box. On phones it is a sheet from the bottom, clear of the home indicator. With the story
   image on a wide sheet, the image stands on the left and its buttons beside it. */
.wsh { width: min(700px, calc(100vw - 32px)); max-height: min(92dvh, 960px); margin: auto; padding: 0; color: var(--ink); background: var(--raise); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -30px rgba(20, 22, 26, .55); overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 3.5rem; }
.wsh[open] { animation: fb-in .2s ease-out; }
.wsh::backdrop { background: color-mix(in srgb, var(--bg) 55%, rgba(20, 22, 26, .45)); backdrop-filter: blur(2px); }
html.wsh-lock { overflow: hidden; }
.wsh-body { display: grid; gap: 1rem; padding: 0 1.4rem 1.4rem; min-width: 0; }
.wsh-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -1.4rem -.4rem; padding: .8rem 1rem .5rem 1.4rem; min-height: 34px; background: var(--raise); }
.wsh-head .eyebrow { font-size: var(--fs-label); color: var(--accent); }
.wsh-title { display: flex; align-items: baseline; gap: .7rem; font-size: 2rem; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wsh-no { flex: none; font-family: var(--font-label); font-size: 1.15rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.wsh-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; min-width: 0; }
.wsh-seg label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sharebox.is-sheet { padding: 0; border: 0; background: none; gap: .8rem; }
.sharebox.is-sheet .share-card { margin: 0; }
@container (min-width: 560px) {
  .sharebox.is-sheet .share-card.is-story { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); column-gap: 1.5rem; align-items: end; }
  .sharebox.is-sheet .share-card.is-story .share-card-tabs { grid-column: 1 / -1; }
  .sharebox.is-sheet .share-card.is-story figcaption { grid-template-columns: minmax(0, 1fr); align-items: start; align-self: center; }
  .sharebox.is-sheet .share-card.is-story .share-card-btns { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
}
@media (max-width: 560px) {
  .wsh { width: 100vw; max-width: 100vw; max-height: 94dvh; margin: auto 0 0; border-inline: 0; border-bottom: 0; }
  .wsh[open] { animation-name: fb-up; }
  .wsh-body { padding: 0 max(16px, env(safe-area-inset-right, 0px)) max(1.2rem, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .wsh-head { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)) .6rem; }
  .wsh-title { font-size: 1.75rem; }
  .wsh-seg label { font-size: 1rem; padding-inline: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .wsh[open] { animation: none; } }

@media (max-width: 1000px) {
  .wr-hours .ex-hour, .wr-treasury .ex-cost { grid-column: span 6; grid-row: auto; }
  .wr-hours .ex-week, .wr-treasury .ex-tokens { grid-column: span 6; }
  .wr-hours .ex-length, .wr-hours .ex-time, .wr-treasury .ex-lines, .wr-treasury .ex-day { grid-column: span 6; }
  .ex-hour .ex-fig svg { height: 250px; }
  .ex-cost .ex-fig svg { height: 220px; }
}
/* phones: one exhibit per row, the figure above its label at the same scale as on wide screens */
@media (max-width: 700px) {
  .wr-grid { grid-template-columns: minmax(0, 1fr); }
  .wr-grid > .ex { grid-column: 1 / -1; grid-row: auto; gap: .95rem; padding: 1.1rem 0 1.4rem; margin-left: 0; border-left: 0; }
  .wr-grid > .ex-temper { grid-template-columns: minmax(0, 1fr); }
  .wr-grid > .ex-temper .ex-fig, .wr-grid > .ex-temper .ex-text { grid-column: 1; grid-row: auto; }
  .ex-hour .ex-fig svg { width: 100%; max-width: 270px; height: auto; }
  .ex-week .ex-fig svg { width: 100%; max-width: 100%; height: auto; }
  .ex-cost .ex-fig { justify-items: start; }
  .ex-cost .ex-fig svg { width: 100%; max-width: 210px; height: auto; }
  .ex-hour .ex-label, .ex-cost .ex-label { font-size: 2.6rem; }
  .ex-label { font-size: 2.1rem; }
  .ex-fig figcaption { font-size: calc(.98rem * var(--serif-text-scale)); }
}

/* sharing, credits and extras */
/* the five platforms as an even grid on six tracks: narrow, two to a row and the odd one out across the bottom; wider,
   three over two; wide, all five in a row */
.platforms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.platforms .btn { grid-column: span 3; gap: .35rem; }
.platforms .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
@container (min-width: 420px) {
  .platforms .btn, .platforms .btn:last-child:nth-child(odd) { grid-column: span 2; }
  .platforms .btn:nth-child(3n + 1):nth-last-child(2), .platforms .btn:nth-child(3n + 2):last-child { grid-column: span 3; }
}
@container (min-width: 640px) {
  .platforms { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .platforms .btn, .platforms .btn:last-child:nth-child(odd), .platforms .btn:nth-child(3n + 1):nth-last-child(2), .platforms .btn:nth-child(3n + 2):last-child { grid-column: auto; }
}
.plus { font-size: var(--fs-caption); letter-spacing: .06em; color: var(--accent); border: 1px solid currentColor; padding: 0 .3rem; }
.btn:hover .plus { color: inherit; }
.credits { font-family: var(--sans); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--caps-track); text-transform: uppercase; padding: .3rem .7rem; border: 1px solid var(--gold); color: var(--gold); }
.extras-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.extra { display: grid; gap: .5rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.extra h3 { font-size: 1.3rem; }
.bw { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .7rem; }
.bw li { display: grid; gap: .15rem; min-width: 0; }
/* your habits over time (src/demo/history.tsx): one habit across the buckets of a period; hollow = too few prompts */
.overtime { display: grid; gap: .9rem; min-width: 0; }
.overtime .tabs { margin: 0; }
.ot-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1.6rem; }
.ot-controls label { flex: 1 1 240px; max-width: 360px; }
.ot-mode { display: inline-flex; border-block: 3px double var(--line-strong); }
.ot-mode button { font-family: var(--font-button); font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--button-track); text-transform: uppercase; padding: .5rem .8rem .44rem; border: 0; background: none; color: var(--muted); cursor: pointer; }
.ot-mode button.on { background: var(--ink); color: var(--bg); }
.ot-chart { position: relative; margin: 0; min-width: 0; }
.ot-chart svg { display: block; overflow: visible; touch-action: pan-y; }
.ot-chart svg:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.ot-grid line { stroke: var(--line); stroke-width: 1; }
.ot-grid line.mid { stroke: var(--line-strong); stroke-dasharray: 2 3; }
.ot-grid text, .ot-x, .ot-strip-l { font-family: var(--mono); font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.ot-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ot-pt { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.ot-pt.low { fill: var(--surface); stroke: var(--faint); stroke-width: 1.5; }
.ot-n { fill: var(--muted); opacity: .45; }
.ot-n.low { opacity: .2; }
.ot-cross { stroke: var(--line-strong); stroke-width: 1; }
.ot-hit { fill: transparent; cursor: crosshair; }
.ot-tip { position: absolute; top: 0; width: 190px; padding: .55rem .7rem; background: var(--raise); border: 1px solid var(--line-strong); pointer-events: none; display: grid; gap: .1rem; z-index: 2; }
.ot-tip-h { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.ot-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .4rem; }
.ot-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ot-table summary { cursor: pointer; color: var(--muted); margin-top: .4rem; }
.ot-table tr.low td { color: var(--faint); }
.ot-hint { border-left: 2px solid var(--line-strong); padding-left: .7rem; }
.ot-sub { font-size: 1.2rem; margin: .4rem 0 .5rem; }
.ot-hl { font-size: 1.05rem; }
.ot-hl .tag { color: var(--muted); }
.ot-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.ot-list li { padding: .6rem 0; margin: 0; border-bottom: 1px solid var(--line); }
.ot-row { display: flex; justify-content: space-between; align-items: center; gap: .4rem 1rem; flex-wrap: wrap; }
.ot-vt { display: grid; gap: .3rem; margin-top: .6rem; max-width: 72ch; }
.ot-vt-h { font-size: 1.45rem; line-height: 1.1; }
.ot-vt-traits { margin: .2rem 0 0; }
.ot-list li.on { box-shadow: inset 2px 0 0 var(--accent); padding-left: .7rem; }
.ot-acts { display: inline-flex; align-items: center; gap: 1rem; }
.ot-acts label.check { padding: 0; }
.ot-compare { margin-top: .9rem; display: grid; gap: .4rem; }
/* without the unlock: the free list, and what the credit adds */
.ot-locked { display: grid; gap: .6rem; justify-items: start; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--accent-soft); }
@media (max-width: 640px) {
  .overtime .tabs { gap: .1rem 1.1rem; }
  .ot-compare table.lb, .ot-table table.lb { font-size: 14px; }
  .ot-compare table.lb th, .ot-compare table.lb td, .ot-table table.lb th, .ot-table table.lb td { padding: .55rem .35rem; }
  .ot-compare table.lb th, .ot-table table.lb th { letter-spacing: .06em; font-size: 12.5px; }
}

/* pantheon */
.pantheon { display: grid; gap: 1.2rem; }
/* The two halves of the Pantheon are a pair of plaques side by side, each with its emblem, name and a line on what
   it ranks. The open one is lifted onto a lighter ground in an inked frame, with its seal filled; the other waits. */
.halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.half { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "emblem name mark" "emblem desc mark" "emblem meta mark"; align-items: center; column-gap: 1.35rem; text-align: left; padding: 1.35rem 1.5rem 1.4rem 1.35rem; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; font: inherit; transition: border-color .2s, background-color .2s, box-shadow .2s; }
/* the emblem sits in a medallion, struck like a coin */
.half-emblem { grid-area: emblem; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--line-strong); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px var(--line); color: var(--muted); transition: color .2s, border-color .2s, background-color .2s; }
.half-emblem svg { display: block; width: 54px; height: 54px; }
.half-name { grid-area: name; font-family: var(--serif); font-size: 2.15rem; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.half-desc { grid-area: desc; font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.3; color: var(--muted); margin-top: .4rem; }
.half-meta { grid-area: meta; font-family: var(--mono); font-size: var(--fs-small); color: var(--muted); margin-top: .45rem; }
.half-mark { grid-area: mark; align-self: start; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; transition: border-color .2s; }
.half-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .2s; }
.half:hover { border-color: var(--ink); background: var(--surface); }
.half:hover .half-emblem { color: var(--ink); border-color: var(--ink); }
.half.on { border-color: var(--ink); background: var(--raise); box-shadow: inset 0 0 0 1px var(--ink); cursor: default; }
.half.on .half-emblem { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 4px var(--raise), inset 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent); }
.half.on .half-mark { border-color: var(--ink); }
.half.on .half-mark::after { transform: scale(1); }
.half:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
@media (max-width: 640px) {
  .halves { gap: .6rem; }
  .half { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "emblem mark" "name name" "desc desc" "meta meta"; align-items: start; padding: 1rem .95rem 1.05rem; }
  .half-emblem { width: 56px; height: 56px; margin-bottom: .8rem; }
  .half-emblem svg { width: 36px; height: 36px; }
  .half-name { font-size: 1.6rem; }
  .half-desc { font-size: 1.02rem; line-height: 1.25; }
}

/* The habit boards: a directory down the left, like the floor plan by a museum's door. Groups are headed in
   ink with their count; the boards beneath are set in serif on a hairline; the open one is inked and marked by
   a short bar in the accent. On phones the directory folds into one line that names the open board. */
.board-room { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: 3.25rem; align-items: start; margin-top: .9rem; }
.board-main { display: grid; gap: 1.2rem; min-width: 0; }
.board-nav { padding: 0 .5rem 1rem 0; }
/* on screens tall enough to hold the whole directory it stays in view while the table scrolls */
@media (min-height: 1080px) and (min-width: 861px) { .board-nav { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } }
.board-picker { display: none; }
.board-index-title { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1; padding: .2rem 0 .75rem; border-bottom: 1px solid var(--ink); }
.board-index-title .num, .board-group-h .num { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.board-group { padding: 1rem 0 .35rem; }
.board-group + .board-group { border-top: 1px solid var(--line); }
.board-group-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--serif); font-size: calc(1.06rem * var(--serif-text-scale)); font-weight: 600; line-height: 1.2; color: var(--ink); margin-bottom: .45rem; }
.board-index [role="tablist"] { display: grid; border-left: 1px solid var(--line); }
.board-index [role="tab"] { position: relative; display: block; width: 100%; text-align: left; font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 500; line-height: 1.22; padding: .3rem .4rem .34rem 1rem; border: 0; background: none; color: var(--ink-soft); cursor: pointer; transition: color .15s, background-color .15s; }
.board-index [role="tab"]::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background-color .15s, width .15s; }
.board-index [role="tab"]:hover { color: var(--ink); }
.board-index [role="tab"]:hover::before { background: var(--line-strong); }
.board-index [role="tab"].on { color: var(--ink); font-weight: 600; background: linear-gradient(90deg, var(--accent-soft), transparent 85%); }
.board-index [role="tab"].on::before { width: 3px; left: -2px; background: var(--accent); }
.board-index [role="tab"]:focus-visible { outline-offset: -1px; }
/* the open board's heading: its group, its name, what it is ranked by */
.board-head { display: grid; gap: .35rem; }
.board-kicker { font-family: var(--serif); font-style: italic; font-size: calc(1.15rem * var(--serif-text-scale)); color: var(--muted); }
.board-head h2 { font-size: clamp(2.2rem, 4vw, 2.9rem); margin: 0; }
.board-measure { font-family: var(--font-ui); font-size: var(--fs-ui); color: var(--muted); }
.board-measure em { color: var(--ink); font-style: italic; }
.board-head .tabs { margin: .9rem 0 0; }
.olympiad-head { margin-top: 1.4rem; }
.olympiad-head .board-measure { max-width: 60ch; }
@media (max-width: 860px) {
  .board-room { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .board-nav { padding: 0; }
  .board-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "group more" "title more"; align-items: center; column-gap: 1rem; width: 100%; text-align: left; padding: .8rem 1rem .9rem; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .2s; }
  .board-picker:hover, .board-picker[aria-expanded="true"] { border-color: var(--ink); }
  .board-picker-group { grid-area: group; font-family: var(--serif); font-style: italic; font-size: calc(1.05rem * var(--serif-text-scale)); color: var(--muted); }
  .board-picker-title { grid-area: title; font-family: var(--serif); font-size: 1.55rem; font-weight: 500; line-height: 1.12; }
  .board-picker-more { grid-area: more; display: flex; align-items: center; gap: .6rem; font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 600; color: var(--ink); white-space: nowrap; }
  .board-picker-chev { width: .5em; height: .5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .2s; }
  .board-picker[aria-expanded="true"] .board-picker-chev { transform: translateY(.1em) rotate(225deg); }
  .board-index:not(.open) { display: none; }
  .board-index { border: 1px solid var(--ink); border-top: 0; background: var(--surface); padding: .1rem 1rem .9rem; }
  .board-index-title { display: none; }
  .board-index [role="tab"] { font-size: 1.18rem; padding-block: .42rem .46rem; }
  /* the picker already names the open board, so its heading is left to screen readers */
  .board-room .board-kicker { display: none; }
  .board-room .board-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ai-alone { color: var(--gold); }
tr.ai-row td { border-top: 1px dashed var(--gold); border-bottom: 1px dashed var(--gold); color: var(--gold); font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .04em; }

/* accounts */
.account { margin-left: auto; font-family: var(--font-button); font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--button-track); text-transform: uppercase; line-height: 1; color: var(--ink); background: none; border: 0; border-block: 3px double var(--line-strong); padding: .5rem .2rem .44rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color .2s; }
.account:hover { border-color: var(--ink); }
.theme-toggle { margin-left: auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 50%; transition: color .2s, background .2s; }
.theme-toggle:hover { color: var(--ink); background: var(--accent-soft); }
.theme-toggle + .account { margin-left: .4rem; }
.locked { filter: blur(7px); opacity: .55; pointer-events: none; user-select: none; max-height: 900px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.gate { border-color: var(--accent); }
.signin { display: grid; gap: .9rem; max-width: 560px; }
.signin-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 520px) { .signin-buttons { grid-template-columns: 1fr; } }
.signin .or { margin-top: .2rem; }
.signin-email { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: end; }
@media (max-width: 520px) { .signin-email { grid-template-columns: 1fr; } }
.signin .kv td:first-child { color: var(--muted); width: 9rem; }
.signin a.btn { text-align: center; }

/* add to the boards */
.boards { border-color: var(--gold); }
.boards h3 { font-size: 1.15rem; }
.sends { display: grid; gap: .35rem; padding-left: 1.2rem; margin: 0; line-height: 1.55; }
.boards .note ul { margin: .3rem 0 0; padding-left: 1.2rem; }

/* what a person confirms before uploading conversations (wording: src/lib/consent.ts) */
.consent { border: 0; border-top: 1px solid var(--line); margin: .4rem 0 0; padding: 1.1rem 0 0; min-width: 0; display: grid; gap: .75rem; }
.consent legend { float: left; width: 100%; padding: 0; margin: 0 0 .15rem; font-family: var(--serif); font-size: calc(1.15rem * var(--serif-text-scale)); }
label.consent-item { clear: left; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
label.consent-item input[type=checkbox] { width: 17px; height: 17px; margin: .2em 0 0; cursor: pointer; }
label.consent-item input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.consent .req { font-family: var(--sans); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.consent-note { margin: -.45rem 0 0; padding-left: calc(17px + .75rem); }
.consent:disabled label.consent-item { cursor: default; opacity: .7; }
.consent-status { display: grid; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.consent-status h3 { font-size: 1.15rem; }
.consent-status p { margin: 0; }

/* the one-time outcome question after a vibe check: quiet, a double rule above and below like a museum label */
.outcome-q { display: grid; gap: .65rem; padding-block: 1.2rem; border-block: 3px double var(--line-strong); margin-block: 1.5rem; }
.outcome-q .eyebrow { margin: 0; }
.outcome-h { font-size: 1.7rem; line-height: 1.1; margin: 0; }
.outcome-opts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.outcome-opts .link { margin-left: .4rem; color: var(--muted); }
.outcome-q p { margin: 0; }
.foot-legal a { color: var(--muted); }
p:not([class]), p.small, p.muted { max-width: 72ch; }

/* account deletion */
.danger-zone { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.danger-zone h3 { font-size: 1.3rem; }
.danger-zone ul { margin: 0; display: grid; gap: .2rem; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.btn.danger:hover { border-color: var(--bad); }
.btn.danger.solid { background: var(--bad); color: var(--bg); border: 0; padding-inline: 1rem; }
.btn.danger.solid:disabled { background: transparent; color: var(--bad); border-block: 3px double color-mix(in srgb, var(--bad) 55%, transparent); }
.deleted-note { margin-top: 1rem; }

/* the narrative vibe check: an epithet, a sketch set like an inscription's dedication, and what it rests on */
.story-title { font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.story { font-family: var(--serif); font-size: clamp(1.35rem, 2.1vw, 1.7rem); font-weight: 500; line-height: 1.38; color: var(--ink); text-wrap: pretty; max-width: 34ch; }
.story-writing { color: var(--muted); font-style: italic; }
.story-why { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; font-size: var(--fs-small); color: var(--muted); }
.story-why li { margin: 0; padding-left: 1.1rem; position: relative; }
.story-why li::before { content: ""; position: absolute; left: 0; top: .72em; width: .55rem; height: 1px; background: var(--accent); }
.story-numbers { margin-top: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
/* its traits: the parts the vibe type is made of, set as a numbered catalogue between a double rule and hairlines */
.traits { margin-top: .3rem; border-top: 3px double var(--line-strong); padding-top: 1rem; }
.traits-h { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.25; letter-spacing: 0; text-wrap: balance; }
.traits-kicker { font-family: var(--font-inscription); display: block; font-size: var(--fs-inscription); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.traits-name { font-style: italic; }
.traits-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.trait { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .1rem .4rem; align-items: baseline; margin: 0; padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--line); }
.trait:last-child { border-bottom: 0; padding-bottom: .2rem; }
.trait-no { font-family: var(--serif); font-size: calc(1.05rem * var(--serif-text-scale)); font-weight: 600; letter-spacing: .08em; color: var(--accent); }
.trait-body { display: grid; gap: .4rem; min-width: 0; }
.trait-name { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.005em; }
.trait-meaning { margin: 0; font-family: var(--sans); font-size: var(--fs-text); line-height: 1.5; color: var(--ink); max-width: 46ch; text-wrap: pretty; }
.trait-strength { margin: .1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; font-family: var(--sans); font-size: var(--fs-caption); line-height: 1.35; color: var(--muted); }
/* an engraved gauge: a hairline frame with hatched fill, like the scale on an instrument */
.trait-bar { flex: none; position: relative; display: inline-block; width: 4.6rem; height: 7px; border: 1px solid var(--line-strong); }
.trait-bar span { position: absolute; inset: 1px auto 1px 1px; max-width: calc(100% - 2px); background: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 3.5px); }
.trait-label { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--ink); }
.trait-strength.is-strong .trait-label { color: var(--accent); }
.trait-strength.is-strong .trait-bar span { background: repeating-linear-gradient(90deg, var(--accent) 0 1.5px, transparent 1.5px 3.5px); }
.trait-strength.is-hint .trait-label { color: var(--muted); }
.trait-lead { flex: 1 1 14rem; min-width: 0; }
.trait-evidence { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; font-family: var(--serif); font-style: italic; font-size: calc(1.08rem * var(--serif-text-scale)); line-height: 1.35; color: var(--muted); }
.trait-evidence li { margin: 0; padding-left: 1.1rem; position: relative; }
.trait-evidence li::before { content: ""; position: absolute; left: 0; top: .7em; width: .55rem; height: 1px; background: var(--accent); }
@media (max-width: 520px) { .trait { grid-template-columns: 1.9rem minmax(0, 1fr); } .trait-name { font-size: 1.45rem; } }
.link { background: none; border: 0; padding: 0; cursor: pointer; }

/* Claude Code commands and the plugin install steps */
.cmd { display: flex; align-items: center; gap: .6rem; margin: .45rem 0; padding: .55rem .6rem .55rem .9rem; border: 1px solid var(--line-strong); background: var(--bg); }
.cmd code { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--fs-small); overflow-wrap: anywhere; }
.cmd-copy { flex: none; font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--line); padding: .3rem .6rem; cursor: pointer; }
.cmd-copy:hover { color: var(--ink); border-color: var(--ink); }
.plugin-setup { margin: .9rem 0 1rem; }
.plugin-setup > * + * { margin-top: .3rem; }
.step-h { margin-top: .6rem; }
.challenge-start .eyebrow { color: var(--accent); }
/* a prompt to paste into Claude Code or Codex (./agent-prompt.tsx): the button, its status, the prompt itself */
.prompt-copy { display: grid; gap: .55rem; min-width: 0; }
.prompt-copy > .btn { width: calc(100% - 8px); white-space: normal; }
.prompt-copy details { margin-top: .25rem; min-width: 0; }
.prompt-copy summary { cursor: pointer; color: var(--muted); font-size: var(--fs-caption); }
.prompt-copy summary:hover { color: var(--ink); }
.prompt-copy textarea { display: block; width: 100%; min-width: 0; margin-top: .7rem; padding: .8rem; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: 13px/1.6 var(--mono); resize: vertical; overflow-wrap: anywhere; field-sizing: content; max-height: 30rem; }
.prompt-copy textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
/* step I: three ways to bring sessions, as tabs over one panel each (the upload panel is the tablet) */
.bring-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 3px double var(--line-strong); border-bottom: 1px solid var(--line); }
.bring-way { position: relative; display: grid; align-content: start; gap: .3rem; min-width: 0; padding: .9rem 1rem 1rem; border: 0; border-left: 1px solid var(--line); background: none; color: var(--muted); text-align: left; cursor: pointer; transition: color .2s, background .2s; }
.bring-way:first-child { border-left: 0; }
.bring-way::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.bring-way:hover { color: var(--ink); }
.bring-way.on { color: var(--ink); background: var(--raise); }
.bring-way.on::after { background: var(--ink); }
.bring-way-t { font-family: var(--font-nav); font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.bring-way-s { font-size: var(--fs-caption); line-height: 1.4; color: var(--muted); }
.bring-rec { justify-self: start; font-family: var(--font-inscription); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.bring-panel { display: grid; gap: .8rem; min-width: 0; }
.bring-panel[hidden], .tabula[hidden] { display: none; }
.bring-panel .eyebrow { color: var(--accent); }
.bring-h { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 500; line-height: 1.2; }
.bring-panel .plugin-setup { margin: 0; }
@media (max-width: 560px) {
  .bring-ways { grid-template-columns: minmax(0, 1fr); }
  .bring-way { grid-template-columns: minmax(0, 1fr) auto; padding: .7rem .2rem .75rem; border-left: 0; border-top: 1px solid var(--line); }
  .bring-way:first-child { border-top: 0; }
  .bring-way.on { padding-inline: .7rem; }
  .bring-way-s { grid-column: 1 / -1; }
  .bring-rec { align-self: center; }
  .bring-way::after { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; }
}
.plugin-alt { margin-top: .6rem; }
.split > * { min-width: 0; }
.plugin-setup { grid-template-columns: minmax(0, 1fr); }
.cmd { min-width: 0; }

/* the account page's profile (src/demo/profile.tsx) and its typeahead fields (src/demo/typeahead.tsx) */
.profile-edit { display: grid; gap: .7rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.profile-edit h3 { font-size: 1.55rem; }
.profile-edit p b { font-weight: 600; }
.pf { display: grid; gap: 1.4rem; margin-top: .3rem; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.5rem; }
.pf-wide { grid-column: 1 / -1; }
@media (max-width: 520px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.field-hint { font-size: var(--fs-caption); line-height: 1.4; color: var(--muted); }
.field-hint.error { color: var(--bad); }
input[aria-invalid="true"] { border-bottom-color: var(--bad); }
.ta-box { position: relative; }
.ta-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 3px); margin: 0; padding: .3rem 0; list-style: none; background: var(--raise); border: 1px solid var(--line-strong); box-shadow: 0 18px 36px -20px rgba(20, 22, 26, .5); max-height: min(19rem, 52vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ta-list[hidden] { display: none; }
.ta-list li { margin: 0; padding: .48rem .85rem .5rem; display: grid; gap: .05rem; cursor: pointer; }
.ta-list li.on { background: var(--accent-soft); box-shadow: inset 0 1px var(--line), inset 0 -1px var(--line); }
.ta-value { font-size: var(--fs-text); line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.ta-value mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ta-detail { font-size: var(--fs-caption); line-height: 1.35; color: var(--muted); }
.ta-tag { font-family: var(--serif); font-size: var(--fs-small); font-style: italic; color: var(--accent); }
.pf-prefix { display: flex; align-items: baseline; border-bottom: 1px solid var(--line-strong); }
.pf-prefix > span { flex: none; font-size: var(--fs-text); color: var(--faint); }
.pf-prefix input:not([type=checkbox]) { border-bottom: 0; padding-left: .05rem; }
.pf-prefix:focus-within { border-bottom-color: var(--accent); }
.pf-prefix.bad { border-bottom-color: var(--bad); }
.pf-work { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .95rem; align-items: start; padding: 1rem 1.1rem; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, background .2s; }
.pf-work.on { border-color: var(--accent); background: var(--accent-soft); }
.pf-work-title { font-family: var(--serif); font-size: calc(1.2rem * var(--serif-text-scale)); font-weight: 500; line-height: 1.25; margin-bottom: .3rem; }
.switch { position: relative; flex: none; width: 44px; height: 24px; margin-top: .1rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); cursor: pointer; transition: background .2s, border-color .2s; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); background: var(--accent-ink); }
.pf-actions { align-items: center; }
.pf-status { color: var(--muted); }
.pf-status.error { color: var(--bad); }
.pf-credits { font-size: var(--fs-caption); }
.pf-credits a { color: inherit; }

/* Feedback (src/demo/feedback.tsx): a small label pinned to the bottom-right corner, set in the serif capitals of the
   inscription buttons, and a dialog that reads like a catalogue card. On phones the dialog is a sheet from the
   bottom; the footer gets room so the label never sits on its last line. */
.fb-open { position: fixed; z-index: 4; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); font-family: var(--font-button); font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--button-track); text-transform: uppercase; line-height: 1; color: var(--muted); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px); border: 0; border-block: 3px double var(--line-strong); padding: .5rem .55rem .44rem; cursor: pointer; transition: color .2s, border-color .2s; }
.fb-open:hover, .fb-open[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
.foot { padding-bottom: calc(2.5rem + 40px); }
dialog.fb { width: min(560px, calc(100vw - 32px)); max-height: min(92dvh, 860px); margin: auto; padding: 0; color: var(--ink); background: var(--raise); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -30px rgba(20, 22, 26, .55); overflow-y: auto; overscroll-behavior: contain; }
dialog.fb[open] { animation: fb-in .2s ease-out; }
dialog.fb::backdrop { background: color-mix(in srgb, var(--bg) 55%, rgba(20, 22, 26, .45)); backdrop-filter: blur(2px); }
@keyframes fb-in { from { opacity: 0; transform: translateY(8px); } }
.fb-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem .5rem 1.4rem; background: var(--raise); }
.fb-head .eyebrow { font-size: var(--fs-label); color: var(--accent); }
.fb-x { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.fb-x:hover { color: var(--ink); background: var(--accent-soft); }
.fb-form, .fb-done { display: grid; gap: 1.1rem; padding: 0 1.4rem 1.4rem; }
.fb h2 { font-size: 2rem; margin: 0; }
.fb-lede { font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 500; line-height: 1.4; color: var(--muted); margin-top: -.5rem; }
.fb-done .fb-lede { color: var(--ink); margin-top: -.3rem; }
.fb-kinds { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .45rem; }
.fb-kinds legend { padding: 0; margin-bottom: .45rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--muted); }
.fb-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-strong); }
.fb-seg label { position: relative; display: block; text-align: center; font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); padding: .5rem .4rem .45rem; cursor: pointer; transition: color .2s, background .2s; }
.fb-seg label + label { border-left: 1px solid var(--line-strong); }
.fb-seg label:hover { color: var(--ink); }
.fb-seg label.on { color: var(--accent-ink); background: var(--ink); }
.fb-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fb-seg label:has(input:focus-visible) { outline: 1px solid var(--accent); outline-offset: 2px; z-index: 1; }
.fb-field { display: grid; gap: .35rem; min-width: 0; }
.fb-field > label { display: block; }
.fb-opt { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--faint); margin-left: .3rem; }
.fb textarea { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 0; padding: .65rem .75rem; width: 100%; min-height: 7.5rem; resize: vertical; }
.fb textarea:focus { outline: none; border-color: var(--accent); }
.fb textarea::placeholder { color: var(--faint); }
.fb textarea[aria-invalid="true"] { border-color: var(--bad); }
.fb-count { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-caption); line-height: 1.4; }
.fb-count .num { flex: none; }
.fb-guide:not([open]) { padding-bottom: .1rem; }
.fb-guide-body { display: grid; gap: .6rem; padding: .35rem 0 .2rem; font-size: var(--fs-small); }
/* what the context contains: a plain disclosure hung under the checkbox's text */
.fb-ctx-detail { margin: .3rem 0 0; padding-left: calc(16px + .65rem); }
.fb-ctx-detail summary { display: inline-flex; align-items: baseline; gap: .45rem; cursor: pointer; list-style: none; font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 500; color: var(--muted); }
.fb-ctx-detail summary::-webkit-details-marker { display: none; }
.fb-ctx-detail summary::before { content: "+"; display: grid; place-items: center; align-self: center; width: 13px; height: 13px; border: 1px solid currentColor; font-family: var(--sans); font-size: 12px; line-height: 1; color: var(--accent); }
.fb-ctx-detail[open] summary::before { content: "\2212"; }
.fb-ctx-detail summary:hover { color: var(--ink); }
.fb-ex { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem .9rem; margin: 0; }
.fb-ex dt { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--caps-track); text-transform: uppercase; padding-top: .2em; }
.fb-ex dt.weak { color: var(--bad); }
.fb-ex dt.good { color: var(--accent); }
.fb-ex dd { margin: 0; font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.38; }
.fb-ex dd i { color: var(--muted); font-size: .92em; }
label.fb-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: start; font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
label.fb-check input { width: 16px; height: 16px; margin: .25em 0 0; }
label.fb-check b { font-weight: 600; overflow-wrap: anywhere; }
.fb-ctx ul { list-style: none; padding: 0; margin: .4rem 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.fb-ctx li { margin: 0; }
.fb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb-actions { align-items: center; }
@media (max-width: 560px) {
  .fb-open { font-size: var(--fs-button); padding: .42rem .45rem .38rem; }
  dialog.fb { width: 100vw; max-width: 100vw; max-height: 94dvh; margin: auto 0 0; border-inline: 0; border-bottom: 0; }
  dialog.fb[open] { animation-name: fb-up; }
  .fb-form, .fb-done { padding-inline: max(16px, env(safe-area-inset-left, 0px)); padding-bottom: max(1.2rem, env(safe-area-inset-bottom, 0px)); }
  .fb-head { padding-inline: max(16px, env(safe-area-inset-left, 0px)) .6rem; }
  .fb h2 { font-size: 1.75rem; }
  .fb-seg label { font-size: 1rem; padding-inline: .2rem; }
  .fb-ex { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .fb-ex dd + dt { margin-top: .5rem; }
}
@keyframes fb-up { from { transform: translateY(24px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { dialog.fb[open] { animation: none; } }

/* the challenge page's leaderboard lives in a narrow side column: one metric column, tighter cells */
table.lb-side th { font-size: var(--fs-label); letter-spacing: var(--caps-track); padding: .6rem .5rem; white-space: nowrap; }
table.lb-side td { padding: .6rem .5rem; }
table.lb-side tr.ai-row td:nth-child(2) { white-space: nowrap; }
@media (max-width: 520px) { .rename { grid-template-columns: 1fr; justify-content: stretch; } .rename .btn { justify-self: start; } }

/* Patrons: employer access for visitors without a code (src/demo/main.tsx EmployerAccess) */
.employer-access { max-width: 40rem; display: grid; gap: .8rem; margin-top: 1.2rem; }
.employer-access h2 { margin: 0; }
.employer-access p { margin: 0; }
/* a signed-in group's members, with or without a vibe check */
.members { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.members li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; min-width: 0; }
.members li .btn { margin-left: auto; }
/* the invite landing (#join-<invite>): what happens next, then sign in or join */
.invite-landing .invite-steps { margin: .4rem 0 1.4rem; padding-left: 1.4rem; display: grid; gap: .35rem; }
.invite-landing .invite-steps li { padding-left: .2rem; }
.invite-landing .invite-steps li::marker { font-family: var(--serif); color: var(--accent); }
.invite-landing .signin { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.invite-landing .signin h2 { font-size: 1.35rem; }
.invite-landing .actions { align-items: center; }

/* Distinctive styles as prizes (src/demo/group-prizes.tsx): a shelf of classical prizes, each an SVG that draws
   in the ink (currentColor) with the green accent and gilt from the theme; the caption beneath is HTML, in the
   page's type sizes. Columns follow the count so rows fill evenly (shelfColumns). */
.prizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.prizes.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prizes.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; }
.prizes.cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 23rem; }
.prize { margin: 0; padding: 1.6rem 1.1rem 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); display: grid; align-content: start; justify-items: center; text-align: center; }
.prize-emblem { max-width: 196px; margin: 0 auto; }
.prize-cap { display: grid; justify-items: center; margin-top: .55rem; min-width: 0; max-width: 100%; }
.prize-cap > * { margin: 0; max-width: 100%; }
.prize-title { font-family: var(--serif); font-size: 1.5rem; font-style: italic; font-weight: 600; line-height: 1.15; letter-spacing: .005em; text-wrap: balance; }
.prize-shared { display: flex; align-items: center; gap: .55rem; margin-top: .55rem; font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; color: var(--gold); }
.prize-shared::before, .prize-shared::after { content: ""; flex: none; width: 1.1rem; height: 3px; border-block: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); }
.prize-who { margin-top: .35rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .42em; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; line-height: 1.35; color: var(--accent); overflow-wrap: anywhere; }
.prize-h { min-width: 0; max-width: 100%; }
.prize-sep { color: var(--faint); font-weight: 400; }
.prize-more { white-space: nowrap; }
.prize-who a { color: inherit; text-decoration: none; }
.prize-who a:hover, .prize-who a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.prize-more { color: var(--muted); font-weight: 500; }
.prize-value { margin-top: .3rem; font-family: var(--serif); font-size: 2.1rem; font-weight: 600; line-height: 1.05; font-variant-numeric: lining-nums; }
.prize-unit, .prize-median { font-size: var(--fs-caption); line-height: 1.35; color: var(--muted); text-wrap: balance; }
.prize-unit { margin-top: .2rem; }
.prize-link { display: grid; justify-items: center; width: 100%; color: inherit; text-decoration: none; border-radius: 2px; }
.prize-link .prize-emblem { transition: transform .2s ease-out; }
.prize-link:hover .prize-emblem, .prize-link:focus-visible .prize-emblem { transform: translateY(-2px); }
.prize-link:hover .prize-h { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .prizes, .prizes.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .prize { padding: 1.1rem .55rem 1rem; }
  .prize-title { font-size: 1.3rem; }
  .prize-value { font-size: 1.8rem; }
  .prize-shared { letter-spacing: .07em; white-space: nowrap; }
  .prize-shared::before, .prize-shared::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .prize-link .prize-emblem { transition: none; } }

/* the group's vibe type at the top of its page (src/demo/group-vibe.tsx), set like a person's vibe type */
.gvibe { margin: 1rem 0 1.6rem; padding: 1.4rem 0 .4rem; border-top: 3px double var(--line-strong); border-bottom: 1px solid var(--line); display: grid; gap: .55rem; }
.gvibe-kicker { margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.gvibe-updating { letter-spacing: .04em; text-transform: none; font-weight: 400; }
.gvibe-title { margin: 0; font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.1rem); font-style: italic; font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.gvibe-summary { margin: 0; font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 500; line-height: 1.38; max-width: 40ch; text-wrap: pretty; }
.gvibe-writing { color: var(--muted); font-style: italic; }
.gvibe-traits { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: 2rem; }
.gvibe-traits.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .gvibe-traits.n-4 { grid-template-columns: minmax(0, 1fr); } }
.gvibe-trait { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .1rem .4rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--line); }
.gvibe-kind { margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gvibe-trait.is-strength .gvibe-kind { color: var(--accent); }
.gvibe-trait.is-blind_spot .gvibe-kind { color: var(--bronze); }
.gvibe-split { padding-top: .6rem; border-top: 1px solid var(--line); }
.gvibe-split-h { margin: 0 0 .4rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.gvibe-split ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.gvibe-split-text { margin: 0 0 .3rem; font-family: var(--serif); font-size: 1.2rem; font-style: italic; line-height: 1.35; }
.gvibe-split-bar { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: var(--fs-caption); color: var(--muted); }
.gvibe-split-name { color: var(--ink); font-weight: 600; }
.gvibe-split-track { display: inline-flex; width: 9rem; height: 10px; border: 1px solid var(--line-strong); padding: 1px; gap: 2px; }
.gvibe-split-track .lo { background: repeating-linear-gradient(90deg, var(--muted) 0 1.5px, transparent 1.5px 3.5px); }
.gvibe-split-track .hi { background: var(--accent); }
.gvibe-note { margin: .4rem 0 .6rem; max-width: 70ch; }
.gvibe-wait { margin: .4rem 0 1rem; }
@media (max-width: 520px) { .gvibe-trait { grid-template-columns: 1.9rem minmax(0, 1fr); } }

/* How <group> compares (src/demo/group-benchmark.tsx): the group's place among other groups, blinded */
.gbench { --gb-label: min(40%, 15rem); margin-top: 2.4rem; padding-top: 1.2rem; border-top: 3px double var(--line-strong); display: grid; gap: .8rem; }
.gbench-h { margin: 0; }
.gbench-lede { margin: 0; max-width: 62ch; }
.gbench-optin { max-width: 46rem; margin-top: .4rem; }
.gbench-optin p { margin: 0; }
.gbench-optin .note-label { margin-bottom: .2rem; }
.gbench-highlights { list-style: none; margin: .2rem 0 .4rem; padding: 0; display: grid; gap: .4rem; }
.gbench-highlights li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; gap: 0 .5rem; }
.gbench-tag { display: inline-block; font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.gbench-tag.style { color: var(--gold); }
/* the legend sits over the tracks' column, its three words at the ends and the middle of the scale */
.gbench-legend { display: grid; grid-template-columns: var(--gb-label) minmax(0, 1fr); column-gap: 1rem; max-width: 46rem; font-size: var(--fs-caption); color: var(--muted); }
.gbench-legend-ax { grid-column: 2; display: grid; grid-template-columns: 1fr auto 1fr; }
.gbench-legend-ax > :nth-child(2) { text-align: center; }
.gbench-legend-ax > :last-child { text-align: right; }
.gbench-rows { list-style: none; margin: 0; padding: 0; display: grid; max-width: 46rem; border-top: 1px solid var(--line); }
.gbench-row { display: grid; grid-template-columns: var(--gb-label) minmax(0, 1fr); grid-template-areas: "h track" ". cmp"; gap: .2rem 1rem; align-items: start; padding: .7rem 0 .65rem; border-bottom: 1px solid var(--line); }
.gbench-row-h { grid-area: h; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; min-width: 0; line-height: 1.35; }
.gbench-name { font-size: var(--fs-small); }
.gbench-val { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
/* centred on the name's first line */
.gbench-track { grid-area: track; position: relative; display: grid; grid-template-columns: 25% 50% 25%; height: 12px; margin-top: calc(var(--fs-small) * .675 - 6px); border: 1px solid var(--line-strong); background: var(--raise); }
.gbench-band.q2 { background: var(--accent-soft); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.gbench-track::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--line-strong); }
.gbench-mark { position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%) rotate(45deg); background: var(--accent); border: 2px solid var(--raise); outline: 1px solid var(--accent); z-index: 1; }
.gbench-cmp { grid-area: cmp; margin: 0; font-size: var(--fs-caption); color: var(--muted); }
.gbench-leave { margin: 0; }
.gbench-stop { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.gbench-stop:hover, .gbench-stop:focus-visible { text-decoration-color: currentColor; }
/* before there's a comparison: the empty scale, faded out downwards */
.gbench-preview { display: grid; gap: .5rem; margin-top: .3rem; opacity: .7; -webkit-mask-image: linear-gradient(#000 35%, transparent 98%); mask-image: linear-gradient(#000 35%, transparent 98%); pointer-events: none; user-select: none; }
.gbench-preview .gbench-row { grid-template-areas: "h track"; }
/* too few members: one lozenge per member needed, gilt for each who has a vibe check */
.gbench-count { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: 0; font-size: var(--fs-small); }
.gbench-pips { display: inline-flex; gap: 9px; padding: 0 3px; }
.gbench-pips > span { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid var(--line-strong); background: var(--raise); }
.gbench-pips > span.on { border-color: color-mix(in srgb, var(--gold) 80%, var(--ink)); background: color-mix(in srgb, var(--gold) 55%, var(--raise)); }
@media (max-width: 520px) {
  .gbench-row, .gbench-preview .gbench-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "track" "cmp"; }
  .gbench-track { margin-top: .3rem; }
  .gbench-legend { grid-template-columns: minmax(0, 1fr); }
  .gbench-legend-ax { grid-column: 1; }
  .gbench-highlights li { grid-template-columns: minmax(0, 1fr); }
}
.gopt { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1.4rem; max-width: 62ch; font-family: var(--sans); font-size: var(--fs-caption); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); line-height: 1.45; }
.gopt input { margin-top: .2rem; accent-color: var(--accent); }
.gbench-more { max-width: 46rem; }
.gbench-more summary { cursor: pointer; padding: .6rem 0; font-size: var(--fs-caption); color: var(--accent); }