/* Shuka site — shared design system.
   Identity: field-manual officialdom. Paper + deep field green, laterite
   red reserved for danger, editorial serif (Newsreader) + technical mono
   (IBM Plex Mono). The rubber stamp is the house verdict mark. */

:root {
  --night: #1B2417;
  --night-soft: #242E1D;
  --night-ink: #F4F1E4;
  --paper: #F4F1E4;
  --paper-dim: #EAE5D2;
  --card: #FBF9F0;
  --ink: #22271C;
  --ink-soft: #5A5F4E;
  --leaf: #3E7A33;
  --leaf-deep: #2C5A24;
  --leaf-bright: #8FC47D;
  --laterite: #A63A20;
  --laterite-bright: #D8674C;
  --rule: #C8C0A4;
  --rule-night: #3A4433;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.65;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; }

.wrap { width: min(72rem, 100% - 3rem); margin-inline: auto; }
.wrap-narrow { width: min(50rem, 100% - 3rem); margin-inline: auto; }

.skip {
  position: absolute; left: -100vw; top: 0;
  background: var(--leaf); color: #fff;
  font-family: var(--mono); font-size: 0.8rem;
  padding: 0.7em 1.2em; z-index: 99;
}
.skip:focus { left: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- stamps ---------- */
.stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: 3px;
  padding: 0.28em 0.6em;
  transform: rotate(-4deg);
  white-space: nowrap;
}
.stamp.ok { color: var(--leaf-deep); }
.stamp.bad { color: var(--laterite); }
.night .stamp.ok { color: var(--leaf-bright); }
.night .stamp.bad { color: var(--laterite-bright); }

/* ---------- topbar ---------- */
.topbar {
  background: var(--night);
  color: var(--night-ink);
  border-bottom: 1px solid var(--rule-night);
  position: sticky; top: 0; z-index: 10;
}
.topbar .wrap { display: flex; align-items: center; gap: 1.3rem; padding-block: 0.85rem; }
.brand {
  font-family: var(--mono); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.34em; text-decoration: none; display: flex; align-items: center; gap: 0.7rem;
}
.brand svg { flex: none; }
.offline-chip {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--leaf-bright);
  border: 1px solid var(--leaf-bright); border-radius: 999px; padding: 0.25em 0.7em;
}
.topnav { margin-left: auto; display: flex; gap: 1.35rem; align-items: center; }
.topnav a {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--night-ink);
  opacity: 0.82; padding-block: 0.3rem; border-bottom: 2px solid transparent;
}
.topnav a:hover { opacity: 1; color: var(--leaf-bright); }
.topnav a[aria-current="page"] { opacity: 1; color: var(--leaf-bright); border-bottom-color: var(--leaf-bright); }
.topnav .gh {
  border: 1px solid var(--rule-night); border-radius: 3px; padding: 0.45em 0.9em;
}
.topnav .gh:hover { border-color: var(--leaf-bright); }

/* mobile nav */
.nav-toggle { display: none; }
@media (max-width: 62rem) {
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: 1px solid var(--rule-night);
    border-radius: 3px; color: var(--night-ink); font-family: var(--mono); font-size: 0.66rem;
    letter-spacing: 0.12em; text-transform: uppercase; padding: 0.5em 0.9em; cursor: pointer;
  }
  .topnav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--night); border-bottom: 1px solid var(--rule-night);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 0.5rem 1.5rem 1rem;
  }
  .topnav.open { display: flex; }
  .topnav a { padding-block: 0.65rem; }
  .offline-chip { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  padding: 0.95em 1.7em; border-radius: 3px; cursor: pointer;
}
.btn-solid { background: var(--leaf); color: #fff; border: 1px solid var(--leaf); }
.btn-solid:hover { background: var(--leaf-deep); border-color: var(--leaf-deep); }
.btn-ghost { border: 1px solid var(--rule); color: var(--ink); }
.btn-ghost:hover { border-color: var(--leaf-deep); color: var(--leaf-deep); }
.night .btn-ghost, .hero .btn-ghost, .page-hero .btn-ghost { border-color: var(--rule-night); color: var(--night-ink); }
.night .btn-ghost:hover, .hero .btn-ghost:hover, .page-hero .btn-ghost:hover { border-color: var(--leaf-bright); color: var(--leaf-bright); }

/* ---------- headings & sections ---------- */
section { padding: 5rem 0; scroll-margin-top: 4.5rem; }
.night { background: var(--night); color: var(--night-ink); }
.dim { background: var(--paper-dim); }

h1, h2, h3 { font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; }
h3 { font-size: 1.3rem; font-weight: 600; }

.sec-head { max-width: 44rem; margin-bottom: 2.8rem; }
.sec-head .eyebrow { color: var(--leaf-deep); margin-bottom: 1rem; }
.night .sec-head .eyebrow { color: var(--leaf-bright); }
.sec-head p { margin-top: 1.1rem; font-size: 1.12rem; color: var(--ink-soft); }
.night .sec-head p { color: var(--night-ink); opacity: 0.85; }
.sec-cta { margin-top: 2.4rem; }

/* subpage hero */
.page-hero { background: var(--night); color: var(--night-ink); padding: 4.5rem 0 3.5rem; }
.page-hero .eyebrow { color: var(--leaf-bright); margin-bottom: 1.1rem; }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.06; font-variation-settings: "opsz" 72; }
.page-hero h1 em { font-style: italic; color: var(--leaf-bright); }
.page-hero p.lede { margin-top: 1.3rem; font-size: 1.16rem; max-width: 40rem; opacity: 0.9; }

/* prose */
.prose { max-width: 44rem; }
.prose p + p { margin-top: 1rem; }
.prose strong { font-weight: 600; }
.prose a { color: var(--leaf-deep); }
.night .prose a { color: var(--leaf-bright); }

/* ---------- home hero ---------- */
.hero { background: var(--night); color: var(--night-ink); padding: 5rem 0 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: center; }
.hero .eyebrow { color: var(--leaf-bright); margin-bottom: 1.4rem; }
.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.04;
  font-variation-settings: "opsz" 72;
}
.hero h1 em { font-style: italic; font-weight: 600; color: var(--leaf-bright); }
.hero-sub { margin-top: 1.5rem; font-size: 1.18rem; line-height: 1.55; max-width: 30rem; opacity: 0.92; }
.hero-ctas { display: flex; gap: 0.9rem; margin-top: 2.2rem; flex-wrap: wrap; }

.hero-shot { position: relative; margin-bottom: -1px; }
.hero-caption { position: absolute; right: 1rem; top: -1.1rem; z-index: 1; }
.frame {
  border: 1px solid var(--rule-night); border-bottom: none;
  border-radius: 8px 8px 0 0; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}
.frame-bar {
  display: flex; align-items: center; gap: 0.45rem;
  background: var(--night-soft); padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--rule-night);
}
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-night); }
.frame-bar span {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--night-ink); opacity: 0.6; margin-left: 0.6rem;
}
.frame.closed { border-bottom: 1px solid var(--rule-night); border-radius: 8px; }

.statstrip { background: var(--night); color: var(--night-ink); border-top: 1px solid var(--rule-night); }
.statstrip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 1.4rem; }
.stat { border-left: 1px solid var(--rule-night); padding-left: 1.4rem; }
.stat:first-child { border-left: none; padding-left: 0; }
.stat b { display: block; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; color: var(--leaf-bright); }
.stat span { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.stat.red b { color: var(--laterite-bright); }

/* ---------- ledger rows / index lists ---------- */
.ledger { border-top: 2px solid var(--ink); }
.night .ledger { border-top-color: var(--night-ink); }
.ledger-row {
  display: grid; gap: 1.5rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.night .ledger-row { border-bottom-color: var(--rule-night); }

/* liar table */
.liar-row { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; align-items: center; padding-block: 1.15rem; }
.liar-quote { font-size: 1.2rem; font-style: italic; }
.liar-quote::before { content: "\201C"; color: var(--laterite); }
.liar-quote::after { content: "\201D"; color: var(--laterite); }
.liar-why { font-size: 0.94rem; color: var(--ink-soft); }

/* corpus rows */
.corpus-row { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 2fr); }
.corpus-row .t { font-size: 1.05rem; font-weight: 500; }
.corpus-row .p, .corpus-row .l { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ink-soft); }
.corpus-row .l { text-align: right; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.step { border-right: 1px solid var(--rule); padding: 1.6rem 1.5rem 1.6rem 0; margin-right: 1.5rem; }
.step:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.step-n { font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; color: var(--leaf-deep); }
.step h3 { margin-top: 0.7rem; }
.step p { margin-top: 0.6rem; font-size: 0.95rem; color: var(--ink-soft); }
.step.refuse .step-n { color: var(--laterite); }

/* ---------- cards ---------- */
.cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card {
  background: var(--card); border: 1px solid var(--rule);
  border-top: 3px solid var(--leaf); padding: 1.5rem 1.6rem;
}
.card h3 { font-size: 1.15rem; }
.card p { margin-top: 0.6rem; font-size: 0.95rem; color: var(--ink-soft); }
.card .k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leaf-deep); }
.card h3 { margin-top: 0.6rem; }

.fieldnote {
  border: 1px solid var(--rule); border-left: 4px solid var(--leaf);
  background: var(--card); padding: 1.4rem 1.6rem; align-self: start;
}
.fieldnote .eyebrow { color: var(--leaf-deep); }
.fieldnote p.big { margin-top: 0.8rem; font-size: 1.35rem; font-style: italic; line-height: 1.45; }
.fieldnote small { display: block; margin-top: 0.9rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink-soft); }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; min-width: 26rem; border-collapse: collapse; font-family: var(--mono); font-size: 0.82rem; }
.data caption {
  caption-side: top; text-align: left; font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.7; padding-bottom: 0.8rem;
}
.data th, .data td { padding: 0.72rem 0.6rem; text-align: right; border-bottom: 1px solid var(--rule); }
.night .data th, .night .data td { border-bottom-color: var(--rule-night); }
.data th:first-child, .data td:first-child { text-align: left; padding-left: 0; }
.data thead th { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; font-weight: 500; }
.data .big { font-size: 1.25rem; font-weight: 600; }
.data .good { color: var(--leaf-deep); }
.night .data .good { color: var(--leaf-bright); }
.data .bad-n { color: var(--laterite); }
.night .data .bad-n { color: var(--laterite-bright); }

/* ---------- compare (raw vs grounded) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.compare-col { background: var(--card); border: 1px solid var(--rule); padding: 1.4rem 1.5rem; position: relative; }
.compare-col.bad { border-top: 3px solid var(--laterite); }
.compare-col.good { border-top: 3px solid var(--leaf); }
.compare-col .who { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.compare-col blockquote { margin-top: 0.8rem; font-size: 1.02rem; line-height: 1.6; }
.compare-col .stamp { position: absolute; top: 1rem; right: 1.1rem; }
.compare-q { font-size: 1.25rem; font-style: italic; margin-bottom: 1.1rem; }
.compare-q::before { content: "Q. "; font-family: var(--mono); font-style: normal; font-size: 0.75em; color: var(--leaf-deep); font-weight: 600; }
.compare-set + .compare-set { margin-top: 3rem; }
.compare-note { margin-top: 0.8rem; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); }

/* ---------- terminal & code ---------- */
.terminal {
  background: var(--night); color: var(--night-ink); border-radius: 6px;
  padding: 1.4rem 1.6rem; font-family: var(--mono); font-size: 0.85rem;
  line-height: 2; overflow-x: auto;
}
.terminal .c { color: var(--leaf-bright); opacity: 0.75; }
code.inline { font-family: var(--mono); font-size: 0.88em; background: var(--paper-dim); padding: 0.1em 0.4em; border-radius: 3px; }
.night code.inline { background: var(--night-soft); }

/* ---------- headline number ---------- */
.headline-number { border-left: 4px solid var(--leaf-bright); padding-left: 1.6rem; }
.headline-number b { display: block; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 600; line-height: 1.05; }
.headline-number b em { font-style: normal; color: var(--laterite-bright); }
.headline-number b strong { color: var(--leaf-bright); font-weight: 600; }
.headline-number p { margin-top: 0.9rem; opacity: 0.85; }

.panel { border: 1px solid var(--rule-night); padding: 1.3rem 1.5rem; }
.panel .eyebrow { color: var(--leaf-bright); }
.panel ul { list-style: none; padding: 0; margin-top: 0.9rem; font-family: var(--mono); font-size: 0.82rem; line-height: 2; }
.panel b { color: var(--leaf-bright); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 2px solid var(--ink); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 0;
  font-size: 1.12rem; font-weight: 500; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--leaf-deep); font-weight: 600; }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 0 1.2rem; color: var(--ink-soft); max-width: 42rem; }
.faq .a a { color: var(--leaf-deep); }

/* ---------- demo player ---------- */
.player { background: var(--card); border: 1px solid var(--rule); }
.player-head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding: 0.9rem 1.3rem;
}
.player-q { font-style: italic; font-size: 1.05rem; }
.player-body { padding: 1.4rem 1.5rem; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.8rem; }
.player-answer { font-size: 1rem; line-height: 1.65; white-space: pre-wrap; min-height: 8rem; }
.player-answer .cite {
  font-family: var(--mono); font-size: 0.7em; font-weight: 700; vertical-align: super;
  color: #fff; background: var(--leaf); border-radius: 2px; padding: 0.14em 0.4em; margin: 0 0.1em;
}
.player-answer .caret { display: inline-block; width: 0.5em; height: 1em; background: var(--leaf); vertical-align: text-bottom; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .player-answer .caret { animation: none; } }
.player-sources h4 { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); }
.psrc { border: 1px solid var(--rule); border-left: 3px solid var(--leaf); background: var(--paper); padding: 0.55rem 0.75rem; margin-top: 0.6rem; opacity: 0; transition: opacity 0.4s; }
.psrc.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .psrc { opacity: 1; transition: none; } }
.psrc .d { font-size: 0.88rem; font-weight: 600; }
.psrc .m { font-family: var(--mono); font-size: 0.64rem; color: var(--ink-soft); margin-top: 0.2rem; }
.player-foot { border-top: 1px solid var(--rule); padding: 0.8rem 1.3rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.player-foot .metrics { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-soft); }
.player-controls { display: flex; gap: 0.6rem; margin: 1.6rem 0; flex-wrap: wrap; }
.chip-btn {
  font-family: var(--serif); font-style: italic; font-size: 0.95rem;
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--leaf);
  padding: 0.55rem 0.9rem; cursor: pointer; text-align: left; color: var(--ink);
}
.chip-btn:hover { background: var(--paper-dim); }
.chip-btn[aria-pressed="true"] { border-color: var(--leaf-deep); background: var(--paper-dim); }
.demo-honesty { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); max-width: 44rem; }

/* ---------- footer ---------- */
footer.site { background: var(--night); color: var(--night-ink); padding: 3.5rem 0 2.5rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 2.5rem; }
.foot-brand { font-family: var(--mono); letter-spacing: 0.34em; font-weight: 600; }
.foot-meaning { font-style: italic; opacity: 0.8; margin-top: 0.5rem; }
.foot-col h4 { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; opacity: 0.6; }
.foot-col ul { list-style: none; padding: 0; margin-top: 0.8rem; }
.foot-col li { margin-top: 0.45rem; }
.foot-col a { font-size: 0.92rem; text-decoration: none; opacity: 0.85; }
.foot-col a:hover { opacity: 1; color: var(--leaf-bright); }
.foot-legal { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--rule-night); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em; opacity: 0.6; line-height: 1.9; }

/* ---------- two-col layouts ---------- */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.cols-2-wide { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem; align-items: start; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  section { padding: 3.8rem 0; }
  .hero { padding-top: 3.2rem; }
  .hero-grid, .cols-2, .cols-2-wide, .compare, .player-body { grid-template-columns: 1fr; }
  .statstrip .wrap { grid-template-columns: 1fr 1fr; gap: 1.2rem 0; }
  .stat:nth-child(3) { border-left: none; padding-left: 0; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--rule); margin-right: 0; padding: 1.3rem 0; }
  .cardgrid { grid-template-columns: 1fr; }
  .liar-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .liar-row .stamp { justify-self: start; }
  .corpus-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .corpus-row .l { text-align: left; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ================= themes =================
   Light is the default (tokens on :root above). Dark redefines the same
   semantic tokens, so components adapt without per-component overrides.
   The night sections, topbar and footer keep their fixed deep-green look
   in both themes — they are the brand anchor. System preference decides
   unless the visitor chose via the toggle (data-theme, persisted). */

:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #12170D;
    --paper-dim: #181F10;
    --card: #1F2817;
    --ink: #E9E5D4;
    --ink-soft: #A9AE9A;
    --rule: #39412F;
    --leaf-deep: #8FC47D;
    --laterite: #D8674C;
  }
  :root:not([data-theme="light"]) .ledger { border-top-color: var(--ink); }
  :root:not([data-theme="light"]) .i-moon { display: none; }
  :root:not([data-theme="light"]) .i-sun { display: block; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #12170D;
  --paper-dim: #181F10;
  --card: #1F2817;
  --ink: #E9E5D4;
  --ink-soft: #A9AE9A;
  --rule: #39412F;
  --leaf-deep: #8FC47D;
  --laterite: #D8674C;
}
:root[data-theme="dark"] .ledger { border-top-color: var(--ink); }
:root[data-theme="dark"] .i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }

/* theme toggle */
.theme-btn {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--rule-night); border-radius: 3px;
  color: var(--night-ink); cursor: pointer;
}
.theme-btn:hover { border-color: var(--leaf-bright); color: var(--leaf-bright); }
.theme-btn svg { width: 1rem; height: 1rem; }
.i-sun { display: none; }
.i-moon { display: block; }

/* refinements that serve both themes */
.terminal { border: 1px solid var(--rule-night); }
.hero .stamp.ok { color: var(--leaf-bright); }