/* FROM TEXT TO TRUTH (theology/theology.js): the window, in the shared frame (nav/ui.css); explored from the top down on the
   shared explorer (nav/depths.css: the stem, the hero, the branches, the path, the whole map); here, its own words in it:
   a kind's question, a verse's three layers, where it's taught, how it connects, and the deep dives */
.th { position: fixed; inset: 0; z-index: 2147483000; background: var(--bg); color: var(--ink); overflow: hidden; opacity: 0; transition: opacity 0.18s ease; }
.th[hidden] { display: none; }
.th.open { opacity: 1; }
.th-box { position: absolute; inset: 0; display: flex; flex-direction: column; max-width: 860px; margin: 0 auto; }
.th .ui-head { padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left)); }
/* (the title folds away as the page is read down, every app's way: nav/tuck.js, nav/ui.css) */
.th-top { flex: none; display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); background: var(--bg); }
/* (a run of steps' bar, held at the top as it's read: back, each step, on) */
.th-sbar { position: sticky; top: -8px; z-index: 2; display: flex; align-items: center; gap: 6px; margin: -8px -16px 10px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--rule); }
.th-sbar-a { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); cursor: pointer; }
.th-sbar-a svg { width: 17px; height: 17px; }
.th-sbar-a:disabled { opacity: 0.35; cursor: default; }
.th-sbar-d { flex: 1; min-width: 0; display: flex; gap: 3px; }
.th-sbar-d button { flex: 1; min-width: 0; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.th-sbar-d button::before { content: ''; display: block; height: 6px; border-radius: 999px; background: var(--rule); transition: background 0.2s ease; }
.th-sbar-d button.is-seen::before { background: color-mix(in srgb, var(--gold) 50%, var(--rule)); }
.th-sbar-d button.is-on::before { background: var(--gold); }
.th-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 10px calc(16px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.th-explore[hidden], .th-divew[hidden] { display: none; }
.th .ui-label { margin: 18px 0 8px; }
.th-ref { padding: 0; border: 0; background: none; color: var(--gold); font: 700 13px var(--sans); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.th-themes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.th-said { font: italic 500 15px/1.4 var(--serif); color: var(--ink); }

/* (in the hero: a kind's question, what it is; at the top, how to go about it) */
.th-hero-q { margin: 10px 0 0; font: italic 500 17.5px/1.4 var(--serif); color: var(--ink); }
.th-hero-is { margin: 8px 0 0; font: 400 15px/1.6 var(--sans); color: var(--ink); }
.th-hero-hint { margin: 8px 0 0; font: 500 13.5px/1.45 var(--sans); color: var(--muted); }
/* (a step held on the path: what it takes, what it hands on) */
.th-peek-h { display: flex; align-items: center; gap: 8px; font: italic 600 18px var(--serif); }
.th-peek p { margin: 6px 0 0; font: 400 14px/1.5 var(--sans); }
.th-peek p span { display: inline-block; min-width: 64px; font: 800 10px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

/* (under its parts: what's said of it, the one thing open, the rest folded) */
.th-sec { padding: 14px 16px 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); }
.th-sec-h { margin: 0 0 10px; font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.th-sec-sub { margin: -4px 0 12px; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.th-sec-sub.is-after { margin: 10px 0 0; }
.th-fold-in { padding: 4px 14px 16px; }
.th-fold-in > :first-child { margin-top: 0; }
.th-fold-p, .th-live-p { margin: 0; font: 400 15px/1.6 var(--sans); }
.th-live-p { font: italic 500 16px/1.5 var(--serif); }
.th-refs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.th-refs + .th-fold-p { margin-top: 8px; }
/* (where it's taught, at the bottom: the verses themselves, in the version you're reading) */
.th-vcards { display: grid; gap: 10px; }
.th-vcard { padding: 10px 12px 12px; border-left: 3px solid color-mix(in srgb, var(--gold) 60%, var(--rule)); border-radius: 4px 14px 14px 4px; background: var(--bg); }
.th-vcard p { margin: 4px 0 0; font: 400 16px/1.55 var(--serif); color: var(--ink); }
.th-live { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); background: color-mix(in srgb, var(--gold) 9%, var(--bg-raised)); }
.th-live p { margin: 0; font: italic 500 16.5px/1.5 var(--serif); }
.th-on { margin-top: 4px; }
.dp-after > .th-on:first-child { display: none; } /* (right under the card, with nothing to read between: the card's own foot says Next, the same, just above) */
.th-next { width: 100%; justify-content: center; }
.th-card-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px; }
.th-prev { padding: 4px 0; border: 0; background: none; color: var(--muted); font: 700 13px var(--sans); cursor: pointer; }
.th-how { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.th-how li { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); }
.th-how-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--rule); font: 800 13px var(--sans); color: var(--muted); }
.th-how b { font: 700 15px var(--sans); }
.th-how p { margin: 3px 0 0; font: 400 14.5px/1.55 var(--sans); }
.th-go { display: flex; flex-wrap: wrap; gap: 8px; }

/* (what words do: the verse, and its three layers, each asked for in turn) */
.th-verse { padding: 14px 16px; border-radius: 18px; border: 1px solid var(--rule); background: var(--bg-raised); }
.th-vtext { margin: 6px 0 0; font: 400 19px/1.55 var(--serif); color: var(--ink); }
.th-wait { color: var(--muted); }
.th-layers { display: grid; gap: 10px; }
.th-layer { padding: 10px 14px; border-left: 3px solid var(--rule); border-radius: 4px 12px 12px 4px; background: var(--bg-raised); }
.th-layer span { font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.th-layer p { margin: 4px 0 0; font: 400 15px/1.5 var(--sans); }
.th-layer.is-says { border-left-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.th-layer.is-does { border-left-color: color-mix(in srgb, var(--gold) 70%, var(--rule)); }
.th-layer.is-aims { border-left-color: var(--gold); }
.th-layer.is-hid { border-style: dashed; border-left-style: solid; background: none; opacity: 0.6; }
.th-so { margin: 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); font: 400 15px/1.55 var(--sans); }
.th-layer.is-in, .th-so.is-in { animation: th-in 0.35s ease; }
@keyframes th-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .th-layer.is-in, .th-so.is-in { animation: none; } }
/* (a book to read more in: a link out, with a line on what it is) */
.th-more-b { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); }
.th-more-b + .th-more-b { margin-top: 8px; }
.th-more-b > a { font: italic 600 16.5px/1.3 var(--serif); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.th-more-b p { margin: 6px 0 0; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.th-more-x { color: var(--gold); font-weight: 700; text-decoration: none; }
/* (how it connects: what it starts with, from which steps; the step; what it hands on, to which) */
.th-flow { display: grid; justify-items: stretch; }
.th-flow-g { display: grid; gap: 8px; }
.th-flow-l { font: 700 13px var(--sans); color: var(--ink); }
.th-pass { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.th-pass b { font: 600 14.5px/1.4 var(--sans); }
.th-pass small { font: 600 12.5px var(--sans); color: var(--muted); }
.th-pass small u { text-decoration: none; color: var(--gold); }
.th-pass.is-end { cursor: default; padding: 2px 0 2px 12px; border: 0; border-left: 3px solid var(--rule); border-radius: 0; background: none; } /* (Scripture, Life: where the path begins and ends, nothing to tap: a line of words, not a box) */
.th-flow-ar { justify-self: center; width: 2px; height: 22px; margin: 6px 0; background: var(--rule); position: relative; }
.th-flow-ar::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 8px; height: 8px; border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule); transform: translateX(-50%) rotate(45deg); }
/* (the step itself, in the middle: where you are, marked, not a button. From the owner: "This looks like a button, but it doesn't do anything") */
.th-flow-me { display: flex; align-items: center; gap: 8px; justify-self: center; padding: 2px 0; cursor: default; }
.th-flow-me .th-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.th-flow-me .th-ic svg { width: 15px; height: 15px; }
.th-flow-me span { display: flex; align-items: baseline; gap: 8px; }
.th-flow-me b { font: italic 600 19px var(--serif); color: var(--ink); }
.th-flow-me small { font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---- a deep dive (theology/dives.js): station by station. Where you are, the idea, the one thing to do, what to take from it */
.tdv-enter { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--rule)); border-radius: 14px; background: color-mix(in srgb, var(--gold) 9%, var(--bg-raised)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tdv-enter span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tdv-enter b { font: 700 15px var(--sans); }
.tdv-enter small { font: 400 13px/1.4 var(--sans); color: var(--muted); }
.tdv-enter em { font: 400 24px var(--sans); color: var(--gold); font-style: normal; }
.tdv { max-width: 680px; margin: 0 auto; } /* (a comfortable line to read, on a wide screen) */
.tdv-n { display: block; font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.tdv-t { margin: 12px 0 0; font: italic 600 26px/1.2 var(--serif); color: var(--ink); }
.tdv-idea { margin: 10px 0 0; font: 400 16px/1.6 var(--sans); }
.tdv-do { margin: 16px 0 0; padding: 14px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); animation: th-in 0.3s ease; }
.tdv-of { font: 800 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tdv-verse { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--rule); }
.tdv-verse p { margin: 4px 0 0; font: 400 17px/1.55 var(--serif); color: var(--ink); }
.tdv-verse mark { background: color-mix(in srgb, var(--gold) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.tdv-ask { margin: 14px 0 10px; font: 700 15.5px/1.4 var(--sans); }
.tdv-opts { display: grid; gap: 8px; }
.tdv-opt { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.tdv-opt b { font: 600 15px var(--sans); }
.tdv-opt small { font: 400 14px/1.5 var(--sans); color: var(--ink); animation: th-in 0.3s ease; }
.tdv-opt.is-yes { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--bg)); }
.tdv-opt.is-yes b::before { content: '✓ '; color: var(--gold); }
.tdv-opt.is-no { border-style: dashed; }
.tdv-opt.is-no b { color: var(--muted); }
.tdv-opt:disabled { cursor: default; }
.tdv-more { margin-top: 12px; }
.tdv-hint { margin: 10px 0 0; font: 600 13px var(--sans); color: var(--muted); text-align: center; }
/* (context: from the verse at the top, each ring wider than the one before, as the circle widens) */
.tdv-rings { display: flex; flex-direction: column; gap: 6px; }
.tdv-ring { padding: 10px 14px 12px; border: 1.5px solid var(--rule); border-radius: 16px; opacity: 0.4; transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
.tdv-ring span { font: 800 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tdv-ring p { margin: 4px 0 0; font: 400 14.5px/1.5 var(--sans); animation: th-in 0.35s ease; }
.tdv-ring.is-on { opacity: 1; }
.tdv-ring.is-now { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.tdv-rings > :nth-child(1) { margin: 0 40px; } .tdv-rings > :nth-child(2) { margin: 0 30px; } .tdv-rings > :nth-child(3) { margin: 0 20px; } .tdv-rings > :nth-child(4) { margin: 0 10px; }
/* (their world: the words to tap in the passage) */
.tdv-spot { padding: 0 3px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--gold) 26%, transparent); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent); animation: tdv-glow 2s ease-in-out infinite; }
.tdv-spot.is-seen { animation: none; box-shadow: none; background: color-mix(in srgb, var(--gold) 14%, transparent); }
@keyframes tdv-glow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); } }
.tdv-notes { display: grid; gap: 8px; margin-top: 10px; }
.tdv-note { padding: 10px 12px; border-left: 3px solid var(--gold); border-radius: 4px 12px 12px 4px; background: var(--bg); }
.tdv-note.is-in { animation: th-in 0.3s ease; }
.tdv-note b { font: 700 14px var(--sans); }
.tdv-note p { margin: 3px 0 0; font: 400 14px/1.5 var(--sans); }
/* (pictures of Christ: join each to its match) */
.tdv-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tdv-col { display: grid; gap: 8px; align-content: start; }
.tdv-col > span { font: 800 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tdv-pair { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-height: 58px; }
.tdv-pair b { font: 600 14px/1.3 var(--sans); }
.tdv-pair small { font: 400 12px var(--sans); color: var(--muted); }
.tdv-pair.is-sel { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
.tdv-pair.is-done { opacity: 0.55; border-style: dashed; cursor: default; }
.tdv-pair.is-done b::before { content: '✓ '; color: var(--gold); }
.tdv-pair.is-no { animation: tdv-shake 0.35s ease; }
@keyframes tdv-shake { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
/* (the close: the stations' lessons gathered) */
.tdv-recap { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.tdv-recap button { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tdv-recap b { font: 700 14.5px var(--sans); }
.tdv-recap small { font: 400 13.5px/1.45 var(--sans); color: var(--muted); }
/* (after: what to take, the Reformers' line, Scripture, where to try it) */
.tdv-after { display: grid; gap: 12px; margin-top: 16px; }
.tdv-take { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--rule)); animation: th-in 0.35s ease; }
.tdv-take span, .tdv-read > span { font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tdv-take p { margin: 4px 0 0; font: italic 500 16px/1.5 var(--serif); }
.tdv-q { margin: 0; padding: 12px 14px; border-left: 3px solid var(--rule); }
.tdv-q blockquote { margin: 0; font: italic 400 15.5px/1.55 var(--serif); }
.tdv-q figcaption { margin-top: 6px; font: 600 12.5px var(--sans); color: var(--muted); }
.tdv-q figcaption a { color: inherit; }
.tdv-read > span { display: block; margin-bottom: 2px; }
.tdv-read p { margin: 4px 0 0; font: 400 15.5px/1.55 var(--serif); }
.tdv-go { margin: 0; }
.tdv-nav { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .tdv-spot { animation: none; } .tdv-do, .tdv-take, .tdv-note.is-in, .tdv-ring p, .tdv-opt small { animation: none; } }

/* (a kind, a step, or a truth in the window over the apps (nav/sheet.js), opened from wherever it's linked: data-nv="ft:<path>") */
.thp { padding: 2px 2px 22px; }
.thp-up { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-bottom: 10px; font: 600 12.5px var(--sans); color: var(--muted); }
.thp-up button { padding: 2px 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent); text-underline-offset: 3px; cursor: pointer; }
.thp-up i { font-style: normal; opacity: 0.6; }
.thp-k { font: 800 10.5px var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--door, var(--door-study)); }
.thp-n { display: flex; align-items: center; gap: 12px; margin: 6px 0 8px; font: italic 600 26px/1.15 var(--serif); color: var(--ink); }
.thp-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--gold); color: var(--on-gold, #221E19); }
.thp-ic svg { width: 21px; height: 21px; }
.thp-s { margin: 0 0 10px; font: 600 16px/1.45 var(--sans); color: var(--ink); }
.thp-q { margin: 0 0 10px; font: italic 600 17px/1.4 var(--serif); color: var(--ink); }
.thp-p { margin: 0 0 12px; font: 15px/1.6 var(--sans); color: var(--ink); }
.thp-on { margin: 0 0 6px; font: italic 14px/1.5 var(--sans); color: var(--muted); }
.thp-g { margin-top: 18px; }
.thp-g > .ui-label { display: block; margin-bottom: 8px; }
.thp-g > div { display: flex; flex-wrap: wrap; gap: 6px; }
.thp-g .thp-p { margin: 0; }
.thp-note { margin: 18px 0 0; font: 13.5px/1.5 var(--sans); color: var(--muted); }

/* (Handed down: none of this is new. At the top, a line and the way to its history; on a kind's page, where its name comes
   from; in the window over the apps, two thousand years, one of the seven followed through them. theology/history.js) */
.th-handed { margin: 10px 0 0; font: 500 14.5px/1.5 var(--sans); color: var(--ink); }
.th-handed-go { padding: 2px 0; border: 0; background: none; color: var(--gold); font: 700 14px var(--sans); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent); text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.th-handed-all { margin-top: 12px; }
.thh-w { margin: 4px 0 2px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--rule)); border-radius: 14px; background: color-mix(in srgb, var(--gold) 6%, var(--bg)); }
.thh-w .ui-label { display: block; margin-bottom: 6px; }
.thh-wd { margin: 0 0 4px; font: 15px/1.4 var(--sans); color: var(--ink); }
.thh-wd b { font: italic 700 19px var(--serif); margin-right: 6px; }
.thh-wd i { color: var(--muted); }
.thh-ws { margin: 0 0 10px; font: 14.5px/1.55 var(--sans); color: var(--ink); }
.thh-mini { margin: 12px 0 0; padding: 0; list-style: none; }
.thh-mini li { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rule); font: 14px/1.4 var(--sans); }
.thh-mini li span { flex: none; width: 92px; font: 700 12px/1.6 var(--sans); color: var(--muted); }
.thh { padding: 2px 2px 22px; }
.thh-f { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.thh-f .ui-filter { display: inline-flex; align-items: center; gap: 6px; }
.thh-f .ui-filter i { display: inline-grid; width: 16px; height: 16px; }
.thh-f .ui-filter i svg { width: 16px; height: 16px; }
.thh-wbox:empty { display: none; }
.thh-wbox { margin-bottom: 12px; }
.thh-l { position: relative; margin: 6px 0 0; padding: 0 0 0 18px; list-style: none; }
.thh-l::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: color-mix(in srgb, var(--gold) 40%, var(--rule)); } /* (the thread the centuries hang on) */
.thh-s { position: relative; padding: 0 0 18px; transition: opacity 0.25s ease; }
.thh-s::before { content: ''; position: absolute; left: -18px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg); background: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
.thh-s.is-dim { opacity: 0.32; }
.thh-y { display: block; font: 800 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--door, var(--door-study)); }
.thh-c b { display: block; margin: 2px 0 4px; font: italic 600 18px/1.25 var(--serif); color: var(--ink); }
.thh-c p { margin: 0 0 8px; font: 14.5px/1.55 var(--sans); color: var(--ink); }
.thh-ks { display: inline-flex; gap: 6px; margin-right: 6px; vertical-align: middle; }
.thh-ks i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
.thh-ks i svg { width: 14px; height: 14px; }
.thh-go { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .thh-s { transition: none; } }