/* Dorris kit pages only: lessons, manual, library, prompts, glossary, setup, unlock. Loaded after /site.css. */


.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: block; padding: var(--s-2) var(--s-3); background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-weight: 700; text-decoration: none; }

.footer { margin-top: var(--s-6); background: var(--band); color: var(--band-soft); }

.footer :focus-visible { outline-color: var(--accent); }

.chip--lock { background: var(--card); color: var(--ink); border-style: dashed; }

.chip--shelf { background: var(--accent); }
.chips--links .chip:hover { background: var(--accent); }

.band .chip--shelf { background: var(--accent); color: var(--on-accent); border-color: var(--on-accent); }

.clickcard { position: relative; }
.cardlink { color: var(--ink); text-decoration: none; }
.cardlink:hover { text-decoration: underline; }

.cardlink::after { content: ""; position: absolute; inset: 0; z-index: 1; }

@supports selector(:has(*)) {
  .cardlink:focus-visible { outline: none; }
  .clickcard:has(.cardlink:focus-visible) { outline: 3px solid var(--link); outline-offset: 3px; }
}

.cardfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); }
.cardfoot .chips { margin: 0; }
.go { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; min-height: 2.25rem; padding: .4rem .85rem; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: var(--t--1); letter-spacing: -.01em; color: var(--accent-ink); background: var(--accent); border: var(--keyline) solid var(--line); border-radius: var(--r-btn); box-shadow: var(--drop-sm); }
.go .icon { width: 1em; height: 1em; }

.go--lock { background: var(--card); color: var(--ink); border-style: dashed; box-shadow: none; }
.clickcard:hover .go { filter: brightness(1.05); }

.band__eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--s-2); font-family: var(--display); font-weight: 600; font-size: var(--t--1); letter-spacing: .16em; text-transform: uppercase; color: var(--band-soft); }

.index__head .crumbs { color: var(--ink-soft); }

.waymark { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: var(--keyline) solid var(--ink-900); font-size: var(--t-0); letter-spacing: 0; }

.index { --doc: var(--page); max-width: var(--doc); margin: 0 auto; padding: var(--s-5) var(--gutter) 0; }
.index { --doc: var(--frame); }
.doc--narrow { --doc: 32rem; }

.index__head { max-width: var(--page); margin: 0 0 var(--s-5); }
.index__title { font-size: var(--t-4); line-height: 1.05; margin: 0 0 var(--s-2); }
.index__lead { margin: 0; font-size: var(--t-1); color: var(--ink-soft); max-width: 50ch; }
.index__lead p { margin: 0 0 var(--s-2); }
.index__lead p:last-child { margin-bottom: 0; }

.prompt-card__does { margin: 0; padding: var(--s-3) var(--s-3) 0; color: var(--ink-soft); font-size: var(--t--1); line-height: 1.5; max-width: var(--measure); }

.prompt-card__text *::selection { background: var(--accent); color: var(--accent-ink); }

.prompt-card__fold { display: none; }

@supports selector(:has(*)) {
  .prompt-card--long { --fold-lines: 6; }
  .prompt-card__fold { display: block; background: var(--card); border-top: var(--keyline) dashed var(--line-soft); border-radius: 0 0 calc(var(--r-card) - var(--keyline)) calc(var(--r-card) - var(--keyline)); }
  
  .prompt-card--long > .prompt-card__text { border-radius: 0; }

  .prompt-card__toggle { display: flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: var(--s-2) var(--s-3); cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: var(--t--1); color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
  .prompt-card__toggle::-webkit-details-marker { display: none; }
  .prompt-card__toggle::after { content: "▾"; text-decoration: none; }
  .prompt-card__fold[open] .prompt-card__toggle::after { content: "▴"; }
  .prompt-card__fold[open] .prompt-card__more { display: none; }
}

.checkpoint { position: relative; margin: var(--s-4) 0; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); background: var(--card); border: var(--keyline) solid var(--line); border-radius: var(--r-card); box-shadow: var(--drop-sm); }
.checkpoint__label { display: flex; align-items: flex-start; gap: var(--s-2); cursor: pointer; min-height: 2.75rem; }
.checkpoint__box { flex: none; width: 1.75rem; height: 1.75rem; margin: .1rem 0 0; accent-color: var(--spruce-700); }
.checkpoint__text { font-weight: 600; }

.stamp, .checkpoint__stamp, .waypoint__stamp { position: absolute; display: none; place-items: center; width: 4.6rem; height: 4.6rem; aspect-ratio: 1; border-radius: 50%; font-family: var(--display); font-weight: 800; font-size: var(--t--2); letter-spacing: .12em; text-transform: uppercase; text-align: center; line-height: 1.15; color: var(--alert-deep); border: 2.5px solid var(--alert-deep); background: color-mix(in srgb, var(--alert) 12%, transparent); transform: rotate(-11deg); }
.checkpoint__stamp { right: var(--s-2); top: var(--s-2); }

.checkpoint:has(.checkpoint__box:checked) { border-color: var(--spruce-700); background: var(--card-2); }
.checkpoint:has(.checkpoint__box:checked) .checkpoint__text { color: var(--ink-soft); }
.checkpoint:has(.checkpoint__box:checked) .checkpoint__stamp { display: grid; }
.checkpoint { padding-right: 6rem; }

.callout--warning { border-left-color: var(--alert); }
.callout--warning .callout__label { color: var(--alert-deep); }

.evidence { margin: var(--s-4) 0; padding: var(--s-4); background: var(--card-2); color: var(--ink); border: var(--keyline) solid var(--line); border-radius: 4px; box-shadow: var(--drop-sm); }
.evidence__quote { margin: 0; font-style: italic; font-size: var(--t-1); }
.evidence__quote p { margin: 0; }
.evidence__source { font-family: var(--mono); font-size: var(--t--2); color: var(--ink-soft); margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px dashed var(--line-soft); }

.zone--do { border: 3px solid var(--accent); background: var(--card-2); box-shadow: 6px 6px 0 var(--line); padding: var(--s-5) var(--s-4); }
.zone--do .zone__title { font-size: var(--t-3); }
.zone--do .zone__title .icon { color: var(--accent); }
.zone--do .prompt-card { box-shadow: var(--drop); }
.zone--do .prompt-card__copy { font-size: var(--t-1); padding: .8rem 1.5rem; }

.zone--picture { padding: var(--s-4); }
.zone--picture .zone__body { max-width: 30rem; }
.zone--picture .zone__body p { max-width: none; margin: 0; }

.zone--picture img { display: block; width: 100%; border: var(--keyline) solid var(--line); border-radius: 0 0 8px 8px; border-top: 0; box-shadow: none; }
.zone--picture .zone__body p:has(img) { position: relative; padding-top: 2rem; border: var(--keyline) solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--card-2); box-shadow: var(--drop); }
.zone--picture .zone__body p:has(img)::before { content: ""; position: absolute; top: .72rem; left: .8rem; width: 3rem; height: .55rem; border-radius: 999px; background: radial-gradient(circle at .28rem 50%, var(--alert) .26rem, transparent .27rem), radial-gradient(circle at 1.5rem 50%, var(--accent) .26rem, transparent .27rem), radial-gradient(circle at 2.72rem 50%, var(--info) .26rem, transparent .27rem); }
.zone--picture .zone__body p:has(img[src$="-phone.png"]) { max-width: 19rem; margin: 0 auto; padding-top: 1.6rem; border-radius: 26px 26px 0 0; border-width: 3px; }
.zone--picture img[src$="-phone.png"] { border-radius: 0 0 26px 26px; border-width: 3px; }

.zone--check { border-left: 10px solid var(--spruce-700); }
.zone--check .zone__title .icon { color: var(--spruce-700); }

.zone--why { padding: 0; background: var(--card); }
.zone__summary { display: block; padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; border-radius: calc(var(--r-card) - 2px); }
.zone__summary::-webkit-details-marker { display: none; }
.zone__kicker { display: block; font-family: var(--display); font-weight: 700; font-size: var(--t--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s-1); }
.zone__teaser { display: block; color: var(--ink); max-width: var(--measure); }

.zone__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--s-2); font-family: var(--display); font-weight: 700; font-size: var(--t--1); color: var(--link); text-decoration: none; }
.zone__more::after { content: "▾"; }
.zone__more-open { display: none; }
details[open] > summary .zone__more-shut { display: none; }
details[open] > summary .zone__more-open { display: inline; }
.zone__summary:hover .zone__more { text-decoration: underline; text-underline-offset: .2em; }
.zone--why[open] .zone__more::after { content: "▴"; }
.zone--why[open] .zone__summary { border-bottom: var(--keyline) dashed var(--line-soft); }
.zone--why .zone__body { padding: var(--s-4); }

.zone__fold { margin-top: var(--s-3); }
.zone__summary--tail { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; cursor: pointer; list-style: none; }
.zone__summary--tail::-webkit-details-marker { display: none; }
.zone__fold .zone__more { margin-top: 0; }
.zone__fold[open] .zone__more::after { content: "▴"; }
.zone__fold[open] .zone__summary--tail { margin-bottom: var(--s-2); }

.hoist { margin: var(--s-5) 0 var(--s-4); }
.hoist .prompt-card { margin-top: 0; box-shadow: 6px 6px 0 var(--line); }
.hoist .prompt-card__copy { font-size: var(--t-1); padding: .8rem 1.5rem; }

.group { margin: 0 0 var(--s-5); }

.lock { max-width: 34rem; margin: var(--s-5) auto; padding: var(--s-5) var(--s-4); background: var(--card); border: var(--keyline) dashed var(--line); border-radius: var(--r-card); box-shadow: var(--drop); text-align: center; }

.lock__mark { margin: 0 auto var(--s-3); width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: var(--keyline) solid var(--ink-900); box-shadow: var(--drop-sm); }
.lock__mark .icon { width: 1.9rem; height: 1.9rem; }
.lock__title { font-size: var(--t-2); margin: 0 0 var(--s-2); }
.lock__body { margin: 0 auto var(--s-4); max-width: 42ch; color: var(--ink-soft); }

.lock--card { margin-top: var(--s-6); }

.lock__small { margin: var(--s-4) 0 0; color: var(--ink-soft); font-size: var(--t--1); }
.lock--card .keyform { text-align: left; }

.keyform { display: grid; gap: var(--s-2); max-width: 24rem; margin: var(--s-4) auto; }
.keyform__label { font-family: var(--display); font-size: var(--t--2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.keyform__input { width: 100%; font-family: var(--mono); font-size: var(--t-0); padding: .7rem .8rem; color: var(--ink); background: var(--card-2); border: var(--keyline) solid var(--line); border-radius: var(--r-btn); }
.formerror { border: var(--keyline) solid var(--alert-deep); background: var(--card); border-radius: var(--r-btn); padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }

.survey { max-width: 34rem; margin: var(--s-5) auto; padding: var(--s-5) var(--s-4); background: var(--card); border: var(--keyline) solid var(--line); border-radius: var(--r-card); box-shadow: var(--drop); }

@media (prefers-reduced-motion: no-preference) {
  .survey__card--in { animation: survey-in .35s ease-out both; z-index: 1; }
  .survey__card--out { animation: survey-out .35s ease-in both; }
}

.trail { position: relative; margin-top: var(--s-5); margin-bottom: var(--s-5); }
.trail__spine { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.trail__path { stroke: var(--accent); }
.trail__list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--s-4); }

.waypoint { position: relative; padding-left: 3.6rem; }
.waypoint::before { content: ""; position: absolute; left: 1.35rem; top: 0; bottom: calc(-1 * var(--s-4)); width: 3px; background: var(--accent); }
.waypoint:last-child::before { bottom: 50%; }
.waypoint__mark { position: absolute; left: 0; top: 1.1rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); text-decoration: none; border: var(--keyline) solid var(--ink-900); font-family: var(--display); font-weight: 800; font-size: var(--t-0); box-shadow: var(--drop-sm); }
.waypoint__card { position: relative; background: var(--card); padding: var(--s-4); border: var(--keyline) solid var(--line); border-radius: var(--r-card); box-shadow: var(--drop); }
.waypoint__title { font-size: var(--t-2); line-height: 1.15; margin: 0 0 var(--s-2); }
.waypoint__num { display: none; }
.waypoint__summary { margin: 0; color: var(--ink-soft); max-width: 46ch; }
.waypoint__stamp { top: var(--s-2); right: var(--s-2); }

.stamp__word, .stamp__num { display: block; }
.stamp__num { font-size: var(--t-0); letter-spacing: .02em; }
.waypoint[data-stamped] .waypoint__stamp { display: grid; }

.waypoint--first .waypoint__card { border-width: 3px; border-color: var(--accent); }
.waypoint[data-stamped] .waypoint__card { border-color: var(--alert-deep); }

.waypoint[data-stamped] .waypoint__title, .waypoint[data-stamped] .waypoint__summary { padding-right: 4rem; }

.mark { position: relative; z-index: 2; margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.mark--lesson { max-width: var(--page); margin: var(--s-4) auto 0; padding: 0 var(--gutter); }
.mark__button { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .35rem .85rem; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: var(--t--1); letter-spacing: -.01em; color: var(--ink); background: var(--card-2); border: var(--keyline) solid var(--line); border-radius: var(--r-btn); }
.mark__button:hover { filter: brightness(1.05); }
.mark__button:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.mark__button[data-state="done"] { background: var(--spruce-700); color: var(--paper); border-color: var(--ink-900); }
.mark__status { margin: 0; font-size: var(--t--1); color: var(--ink-soft); }

.waynav { display: grid; gap: var(--s-3); grid-template-columns: 1fr; max-width: var(--page); margin: var(--s-5) auto; padding: 0 var(--gutter) var(--s-4); }
.waynav__card { display: block; padding: var(--s-3) var(--s-4); background: var(--card); color: var(--ink); text-decoration: none; border: var(--keyline) solid var(--line); border-radius: var(--r-card); box-shadow: var(--drop-sm); }
.waynav__card:hover { background: var(--card-2); }
.waynav__card--next { text-align: right; }
.waynav__label { display: flex; align-items: center; gap: .35rem; font-family: var(--display); font-weight: 700; font-size: var(--t--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.waynav__card--next .waynav__label { justify-content: flex-end; }
.waynav__title { display: flex; align-items: baseline; gap: .5rem; margin-top: var(--s-1); font-family: var(--display); font-weight: 700; font-size: var(--t-1); }
.waynav__card--next .waynav__title { justify-content: flex-end; }
.waynav__num { color: var(--ink); -webkit-text-stroke: 1px var(--line); }

.shelves { display: grid; gap: var(--s-4); align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); }
.shelf { margin: 0; }
.shelf__label { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); padding: .2rem var(--s-3); font-size: var(--t-0); border: var(--keyline) solid var(--line); border-radius: var(--r-chip); background: var(--card); color: var(--ink); box-shadow: var(--drop-sm); }
.shelf--unstuck .shelf__label { background: var(--ember); color: var(--paper); }
.shelf--setup .shelf__label { background: var(--glacier); color: var(--ink-900); }
.shelf--build .shelf__label { background: var(--marigold); color: var(--on-accent); }
.shelf--safety .shelf__label { background: var(--spruce-900); color: var(--paper); }
.shelf__cards { list-style: none; margin: 0; padding: 0; overflow: hidden; background: var(--card); border: var(--keyline) solid var(--line); border-top-width: var(--keyline-accent); border-radius: var(--r-card); box-shadow: var(--drop); }
.shelf--unstuck .shelf__cards { border-top-color: var(--ember); }
.shelf--setup .shelf__cards { border-top-color: var(--glacier); }
.shelf--build .shelf__cards { border-top-color: var(--marigold); }
.shelf--safety .shelf__cards { border-top-color: var(--spruce-700); }

.pcard { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-3); }

.pcard:hover { background: var(--card-2); }
.pcard.clickcard:has(.cardlink:focus-visible) { outline-offset: -3px; }
.pcard__text { flex: 1 1 14rem; min-width: 0; }
.pcard__title { font-size: var(--t-0); line-height: 1.3; margin: 0; }
.pcard--locked .pcard__title .cardlink { color: var(--ink-soft); }
.pcard__when { margin: .1rem 0 0; font-size: var(--t--1); line-height: 1.45; color: var(--ink-soft); }
.pcard__foot { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }

.pcard__copy { position: relative; z-index: 2; min-height: 2.25rem; padding: .3rem .85rem; font-size: var(--t--1); box-shadow: var(--drop-sm); }
.pcard .go { min-height: 2.25rem; padding: 0; background: none; border: 0; box-shadow: none; color: var(--link); }
.pcard .go--lock { color: var(--ink-soft); }

.filter { margin: 0 0 var(--s-4); }
.filter__label { display: block; font-family: var(--display); font-weight: 700; font-size: var(--t--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s-1); }
.filter__input { width: 100%; max-width: 26rem; font-family: var(--body); font-size: var(--t-0); padding: .7rem .8rem; color: var(--ink); background: var(--card-2); border: var(--keyline) solid var(--line); border-radius: var(--r-btn); }
.filter__empty { margin: var(--s-3) 0 0; color: var(--ink-soft); }
.alpha { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.alpha__chip { min-width: 2.75rem; min-height: 2.75rem; padding: .25rem .6rem; font-family: var(--display); font-weight: 700; font-size: var(--t--1); background: var(--card); color: var(--ink); cursor: pointer; border: var(--keyline) solid var(--line); border-radius: var(--r-chip); }
.alpha__chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: var(--drop-sm); }

.terms { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.term { background: var(--card); border: var(--keyline) solid var(--line); border-radius: var(--r-card); box-shadow: var(--drop-sm); }
.term__link { display: block; padding: var(--s-3) var(--s-4); text-decoration: none; color: var(--ink); height: 100%; }
.term__link:hover { background: var(--card-2); }
.term__name { display: block; font-family: var(--display); font-weight: 800; font-size: var(--t-1); margin-bottom: var(--s-1); color: var(--link); }
.term__short { display: block; color: var(--ink-soft); }

.doc--term { --doc: 38rem; }
.band__outcome--term { font-size: var(--t-2); max-width: 38ch; color: var(--band-ink); }
.band__aka { margin: var(--s-3) 0 0; color: var(--band-soft); font-family: var(--mono); font-size: var(--t--2); }
.term__back { margin: var(--s-3) 0 var(--s-5); font-family: var(--display); font-weight: 700; }
.term__back a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; }
.related { margin: 0; }
.related__label { font-size: var(--t--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--s-2); }

body:has(dialog[open]) .stuck { display: none; }
.stuck { position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: 5; display: inline-flex; align-items: center; gap: .45rem; min-height: 3rem; padding: .6rem 1.1rem; background: var(--signal); color: var(--on-signal); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: var(--t-0); border: var(--keyline) solid var(--ink); border-radius: var(--r-chip); }
.stuck:active { transform: translateY(1px); }
.stuck:focus-visible { outline-color: var(--ink); outline-offset: 4px; }

.sheet { width: min(42rem, calc(100vw - 2 * var(--s-3))); max-height: min(84vh, 46rem); padding: 0; border: var(--keyline) solid var(--line); border-radius: var(--r-card); background: var(--card); color: var(--ink); box-shadow: var(--drop); overflow: auto; }
.sheet::backdrop { background: var(--shade); }
.sheet__inner { padding: var(--s-3) var(--s-4) var(--s-4); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sheet__kicker { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--t--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.sheet__close { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; cursor: pointer; background: var(--card); color: var(--ink); border: var(--keyline) solid var(--line); border-radius: var(--r-chip); }
.prompt-card--sheet { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .stuck { transition: transform .07s ease-out, box-shadow .07s ease-out, filter .12s ease-out; }
  .waypoint__card, .term { transition: transform .12s ease-out, box-shadow .12s ease-out; }
  .waypoint__card:hover, .term:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line); }

  .trail__spine { animation: reveal 1.6s ease-out .15s both; }

  .checkpoint:has(.checkpoint__box:checked) .checkpoint__stamp, .waypoint[data-stamped] .waypoint__stamp { animation: thunk .28s cubic-bezier(.2, 1.4, .5, 1); }

  .zone--why[open] .zone__body { animation: unfold .22s ease-out; }

  .prompt-card--long:has(> .prompt-card__fold[open]) > .prompt-card__text { animation: unfold .22s ease-out; }

  .trail__list > .waypoint { animation: rise .4s ease-out both; }
  .trail__list > .waypoint:nth-child(2) { animation-delay: .05s; }
  .trail__list > .waypoint:nth-child(3) { animation-delay: .1s; }
  .trail__list > .waypoint:nth-child(4) { animation-delay: .15s; }
  .trail__list > .waypoint:nth-child(n+5) { animation-delay: .2s; }
  
}

@media (min-width: 48rem) {
  
  .waynav { grid-template-columns: 1fr 1fr; }
  .waynav__card--prev:only-child { grid-column: 1; }
  .waynav__card--next:only-child { grid-column: 2; }
  .stuck { right: var(--s-4); bottom: var(--s-4); }
}

@media (min-width: 60rem) {
  
  .trail__spine { display: block; }
  .trail__list { gap: 0; }
  .waypoint { padding-left: 0; height: 12.5rem; display: flex; align-items: center; }
  
  .waypoint { pointer-events: none; }
  .waypoint__card, .waypoint__mark { pointer-events: auto; }
  .waypoint::before { display: none; }
  
  .waypoint__mark { top: 50%; margin-top: -1.625rem; width: 3.25rem; height: 3.25rem; font-size: var(--t-1); }
  .waypoint--left .waypoint__mark { left: 43%; margin-left: -1.625rem; }
  .waypoint--right .waypoint__mark { left: 57%; margin-left: -1.625rem; }
  .waypoint--left .waypoint__card { margin-right: 61%; width: 39%; }
  .waypoint--right .waypoint__card { margin-left: 61%; width: 39%; }
}

.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.chapter { position: relative; background: var(--card); padding: var(--s-4); border: var(--keyline) solid var(--line); border-radius: var(--r-card); box-shadow: var(--drop); display: flex; flex-direction: column; gap: var(--s-2); }
.chapter__num { font-family: var(--display); font-weight: 800; font-size: var(--t-3); line-height: 1; color: var(--ink); -webkit-text-stroke: 1px var(--line); }
.chapter__title { font-size: var(--t-1); margin: 0; line-height: 1.2; }
.chapter__rule { margin: 0; flex: 1; font-family: var(--display); font-weight: 600; font-size: var(--t-0); line-height: 1.35; color: var(--ink); border-left: 4px solid var(--accent); padding-left: var(--s-3); }

.band--chapter { padding-bottom: var(--s-5); }
.pullquote { margin: var(--s-4) 0 0; padding: 0 0 0 var(--s-4); border-left: 6px solid var(--accent); }
.pullquote__text { margin: 0; max-width: 28ch; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: var(--t-3); line-height: 1.12; color: var(--band-ink); }

.zone--short { background: var(--accent); color: var(--on-accent); border-color: var(--on-accent); }
.zone--short .zone__title { color: var(--on-accent); }
.zone--short .zone__body, .zone--short .prose li { color: var(--on-accent); }

.zone--short .prose ul > li::before { background: var(--card-2); border-color: var(--ink-900); }

.evidence { position: relative; background: var(--card-2); border-radius: 0; border-style: dashed; padding-top: var(--s-5); }
.evidence { padding-bottom: var(--s-5); }
.evidence::before, .evidence::after { content: ""; position: absolute; left: 0; right: 0; height: .75rem; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 10px); }
.evidence::before { top: 0; }
.evidence::after { bottom: 0; }
.evidence__quote { font-family: var(--mono); font-style: normal; font-size: var(--t--1); line-height: 1.7; background: transparent; border-left: 0; padding: 0; color: var(--ink); }

.evidence[data-written-by] .evidence__quote::before { content: attr(data-written-by); position: absolute; top: var(--s-3); right: var(--s-3); padding: .1rem .5rem; font-family: var(--display); font-weight: 700; font-size: var(--t--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); border: 2px solid var(--line-soft); border-radius: 4px; transform: rotate(-4deg); }

.tools, .guides { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.tool, .guide { position: relative; background: var(--card); padding: var(--s-4); border: var(--keyline) solid var(--line); border-radius: var(--r-card); box-shadow: var(--drop); display: flex; flex-direction: column; gap: var(--s-2); }
.tool__num, .guide__num { font-family: var(--display); font-weight: 800; font-size: var(--t-3); line-height: 1; color: var(--ink); -webkit-text-stroke: 1px var(--line); }
.tool__title, .guide__title { font-size: var(--t-1); margin: 0; line-height: 1.2; }
.tool__summary, .guide__summary { margin: 0; flex: 1; color: var(--ink-soft); }

.tools { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.tool { gap: var(--s-1); padding: var(--s-3) var(--s-3) var(--s-3) 3.25rem; box-shadow: var(--drop-sm); }
.tool__num { position: absolute; left: var(--s-3); top: var(--s-3); font-size: var(--t-1); }
.tool__title { font-size: var(--t-0); line-height: 1.3; }
.tool__summary { font-size: var(--t--1); line-height: 1.45; }
.tool .cardfoot { padding-top: var(--s-2); }
.tool .go { min-height: 2rem; padding: .25rem .7rem; }

.added { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: var(--t--1); color: var(--ink-soft); }
.added__box { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--spruce-700); cursor: pointer; }
.tool[data-added] { background: var(--ground); border-color: var(--line-soft); box-shadow: none; }
.tool[data-added] .tool__num { color: var(--line-soft); }
.tool__stamp { top: var(--s-2); right: var(--s-2); width: 2.9rem; height: 2.9rem; font-size: .5625rem; pointer-events: none; }
.tool[data-added] .tool__stamp { display: grid; }

.tool[data-added] .tool__title { padding-right: 3rem; min-height: 2.3rem; }

.added-page { margin-top: var(--s-2); }
.band .added { padding: 0 .85rem 0 .6rem; color: var(--band-ink); border: var(--keyline) solid var(--band-soft); border-radius: var(--r-chip); }
.band .added:has(:checked) { border-color: var(--accent); }

.builder { display: grid; gap: var(--s-3); }
.builder__field { display: grid; gap: var(--s-1); }
.builder__label { font-family: var(--display); font-weight: 700; font-size: var(--t-0); }
.builder__hint { margin: 0; color: var(--ink-soft); font-size: var(--t--1); }
.builder__input { width: 100%; font: inherit; line-height: 1.5; resize: vertical; padding: .7rem .8rem; color: var(--ink); background: var(--card-2); border: var(--keyline) solid var(--line); border-radius: var(--r-btn); }
.builder__go { margin: 0; }
.builder__read { margin: 0 0 var(--s-3); font-weight: 700; }

.builder-wait { display: grid; gap: var(--s-3); padding: var(--s-5) 0; }
.builder-wait__title { margin: 0; font-family: var(--display); font-weight: 800; font-size: var(--t-2); }
.builder-wait__bar { position: relative; height: .75rem; overflow: hidden; background: var(--card-2); border: var(--keyline) solid var(--line); border-radius: 999px; }
.builder-wait__run { position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--accent); border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .builder-wait__run { animation: builder-run 1.6s ease-in-out infinite; }
  
}

.saved { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.saved__item { background: var(--card-2); border: var(--keyline) solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.saved__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: var(--s-3); }
.saved__title { margin: 0; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.saved__date { display: block; font-weight: 400; color: var(--ink-soft); font-size: var(--t--1); }
.saved__acts { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.saved__acts .prompt-card__copy { font-size: var(--t--1); }
.saved__act { font: inherit; font-size: var(--t--1); font-weight: 700; min-height: 2.75rem; padding: 0 var(--s-3); color: var(--ink); background: var(--card); cursor: pointer; border: var(--keyline) solid var(--line); border-radius: var(--r-btn); }
.saved__act:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.saved__text { border-top: var(--keyline) solid var(--line); border-radius: 0; }

@media (prefers-reduced-motion: no-preference) {
  .chapter, .tool, .guide { transition: transform .12s ease-out, box-shadow .12s ease-out; }
  .chapter:hover, .tool:hover, .guide:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line); }

}

.quizcard { position: fixed; left: var(--s-3); bottom: var(--s-3); z-index: 5; display: flex; align-items: stretch; max-width: calc(100vw - 2 * var(--s-3) - 3rem - var(--s-2)); background: var(--card); color: var(--ink); border: var(--keyline) solid var(--line); border-radius: var(--r-chip); box-shadow: var(--drop); }

body:has(dialog[open]) .quizcard { visibility: hidden; }

.quizcard__link { display: flex; align-items: center; gap: var(--s-2); min-width: 0; min-height: 2.75rem; padding: .3rem var(--s-3) .3rem .3rem; color: var(--ink); text-decoration: none; border-radius: var(--r-chip); }
.quizcard__link:hover .quizcard__title { text-decoration: underline; text-underline-offset: .15em; }
.quizcard__sign { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: var(--keyline) solid var(--ink-900); font-family: var(--display); font-weight: 800; font-size: var(--t-0); line-height: 1; }
.quizcard__words { display: grid; min-width: 0; }
.quizcard__title { font-family: var(--display); font-weight: 800; font-size: .9375rem; line-height: 1.2; letter-spacing: -.01em; }

.quizcard__line { display: none; }
.quizcard__hide { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; margin: 0; padding: 0; cursor: pointer; background: transparent; color: var(--ink-soft); border: 0; border-left: 1px solid var(--line-soft); border-radius: 0 var(--r-chip) var(--r-chip) 0; }
.quizcard__hide:hover { color: var(--ink); background: var(--card-2); }
.quizcard__hide .icon { width: 1rem; height: 1rem; }

.quizcard :focus-visible { outline-offset: -5px; }

@media (max-width: 47.99rem) {
  
  .stuck, .quizcard { position: static; z-index: auto; max-width: 26rem; width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
  .stuck { order: 1; margin-top: var(--s-5); justify-content: center; }
  .quizcard { order: 2; margin-top: var(--s-3); gap: var(--s-4); }
  .footer { order: 3; }

  .quizcard__link { flex: 1; }
  .quizcard__hide { border-left: 0; }
  
  body:has(dialog[open]) .stuck { display: inline-flex; visibility: hidden; }
}

@media (min-width: 48rem) {
  .quizcard { left: var(--s-4); bottom: var(--s-4); max-width: 21rem; border-radius: var(--r-card); }
  .quizcard__link { gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2); border-radius: var(--r-card); }
  .quizcard__sign { width: 2.5rem; height: 2.5rem; font-size: var(--t-1); }
  .quizcard__title { font-size: var(--t-0); }
  .quizcard__line { display: block; font-size: var(--t--1); line-height: 1.35; color: var(--ink-soft); }
  .quizcard__hide { border-radius: 0 var(--r-card) var(--r-card) 0; }
}

.quizbox { width: min(34rem, calc(100vw - 2 * var(--s-3))); }
@media (max-width: 47.99rem) { .quizbox .sheet__inner { padding: var(--s-3); } }
.quizbox .sheet__head { margin-bottom: var(--s-3); }

.quiz__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.quiz__next { margin-left: auto; padding-inline: .9rem; white-space: nowrap; }
.quiz__back { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: .6rem .9rem; cursor: pointer; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: var(--t-0); background: var(--card); color: var(--ink); border: var(--keyline) solid var(--line); border-radius: var(--r-btn); }
.quiz__back:hover { background: var(--card-2); }
.quiz__back .icon, .quiz__next .icon { width: 1.1em; height: 1.1em; }

.quizresult { --verdict: var(--spruce-700); --verdict-ink: var(--paper); }
.quizresult--caution { --verdict: var(--accent); --verdict-ink: var(--on-accent); }
.quizresult--stop { --verdict: var(--alert); --verdict-ink: var(--paper); }

.quizresult__sign { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: 0 0 var(--s-2); border-radius: 50%; background: var(--verdict); color: var(--verdict-ink); border: var(--keyline) solid var(--ink-900); box-shadow: var(--drop-sm); }
.quizresult__sign .icon { width: 1.6rem; height: 1.6rem; stroke-width: 3; }
.quizresult__title { font-size: var(--t-3); line-height: 1.1; margin: 0 0 var(--s-3); }

.quizresult__title:focus { outline: none; }
.quizresult__words { margin: 0 0 var(--s-3); }
.quizresult__words p { margin: 0 0 var(--s-3); }
.quizresult__reasons { display: grid; gap: var(--s-2); list-style: none; margin: 0 0 var(--s-3); padding: 0; }

.quizresult__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 0; }
.quizresult__link { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--display); font-weight: 700; }
.quizresult__again { margin: var(--s-4) 0 0; font-family: var(--display); font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  
  .quizcard { animation: quizcard-in .35s ease-out; }
  
  .quizbox[open] { animation: rise .25s ease-out; }
  .quiz--steps .quiz__q, .quizbox .quizresult { animation: unfold .2s ease-out; }
  .quiz__back { transition: border-color .12s ease-out, background-color .12s ease-out; }
}

.flow { --doc: 40rem; }
.flow__screen { min-width: 0; margin: var(--s-5) 0 0; padding: var(--s-5) var(--s-4); background: var(--card-2); border: 3px solid var(--accent); border-radius: var(--r-card); box-shadow: 6px 6px 0 var(--line); }
.flow__screen[hidden] { display: none; }
@media (min-width: 48rem) { .flow__screen { padding: var(--s-6) var(--s-5); } }
.flow__eyebrow { margin: 0 0 var(--s-1); font-family: var(--display); font-weight: 700; font-size: var(--t--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.flow__title { margin: 0; font-size: var(--t-4); line-height: 1.05; }

.flow__title:focus { outline: none; }
.flow__words { margin: var(--s-3) 0 0; }

.flow__words p, .flow__words li { font-size: var(--t-1); }
.flow__words ol { padding-left: 1.4em; }
.flow__words li + li { margin-top: var(--s-2); }
.flow__file { display: flex; gap: .5rem; align-items: baseline; margin: var(--s-3) 0 0; font-size: var(--t--1); color: var(--ink-soft); }
.flow__file .icon { flex: none; width: 1em; height: 1em; transform: translateY(.12em); }
.flow__go { margin: var(--s-5) 0 0; }
@media (max-width: 47.99rem) { .flow__go .button { width: 100%; justify-content: center; } }
.flow__skip { margin: var(--s-2) 0 0; font-size: var(--t--1); }
.flow__skip a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-soft); }
.flow .downloads { margin-top: var(--s-5); }
@media (max-width: 47.99rem) { .flow .downloads__main, .flow .downloads__main .button { width: 100%; justify-content: center; } }

.osswitch { margin: var(--s-2) 0 0; font-size: var(--t--1); color: var(--ink-soft); }
.osswitch a { display: inline-block; padding: .3rem 0; }
.band .osswitch { color: var(--band-soft); }
.band .osswitch a { color: var(--band-ink); }
.flow .osswitch { margin-top: var(--s-3); }

.downloads { display: grid; gap: var(--s-2); justify-items: start; margin: var(--s-4) 0 0; }
.downloads__main { margin: 0; }
.downloads__file { margin: 0; font-family: var(--mono); font-size: var(--t--2); color: var(--ink-soft); overflow-wrap: anywhere; }
.downloads__others, .downloads__none { margin: 0; font-size: var(--t--1); color: var(--ink-soft); }
.downloads__others a { display: inline-block; padding: .4rem 0; }

.variant + :is(p, ul, ol) { margin-top: var(--s-4); }

.phonenote { display: none; margin: var(--s-5) 0 0; padding: var(--s-4); background: var(--card-2); border: var(--keyline) solid var(--line); border-left: 8px solid var(--alert); border-radius: var(--r-card); box-shadow: var(--drop-sm); }
.phonenote--show { display: block; }
@media (hover: none) and (pointer: coarse) { .phonenote { display: block; } }
.phonenote__address { margin: var(--s-3) 0 0; padding: .6rem .8rem; overflow-wrap: anywhere; user-select: all; font-family: var(--mono); font-size: var(--t-0); font-weight: 700; background: var(--card); border: var(--keyline) dashed var(--line); border-radius: var(--r-btn); }

@media (max-width: 47.99rem) { .phonenote__address { font-size: var(--t--1); } }

.here { max-width: var(--page); margin: 0 0 var(--s-6); padding: var(--s-4); background: var(--band); background-image: var(--contours); color: var(--band-ink); border: var(--keyline) solid var(--line); border-radius: var(--r-card); box-shadow: 8px 8px 0 var(--accent), 8px 8px 0 2px var(--ink-900); }
.here__kicker { display: flex; align-items: center; gap: .45rem; margin: 0 0 var(--s-2); font-family: var(--display); font-weight: 700; font-size: var(--t--2); letter-spacing: .16em; text-transform: uppercase; color: var(--band-soft); }
.here__kicker .icon { color: var(--accent); }
.here__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; }
.here__label { font-family: var(--display); font-weight: 800; font-size: var(--t-2); letter-spacing: -.02em; }
.here__num { font-variant-numeric: tabular-nums; }
.here :focus-visible { outline-color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  
  .flow__screen { animation: unfold .22s ease-out; }
}

.zone--notes .zone__title .icon, .zone--picture .zone__title .icon { color: var(--link); }

@media (max-width: 47.99rem) {

  .zone--do { padding: var(--s-4) var(--s-3); }
}

.callout.callout--warning { border-left-color: var(--alert); }

.checkpoint:has(+ .checkpoint) { margin-bottom: 0; border-bottom-width: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.checkpoint + .checkpoint { margin-top: 0; border-top: 1px solid var(--line-soft); border-top-left-radius: 0; border-top-right-radius: 0; }

@media (max-width: 47.99rem) {
  
  .tools, .guides, .chapters, .terms { display: block; padding: 0; background: var(--card); border: var(--keyline) solid var(--line); border-radius: var(--r-card); box-shadow: var(--drop); }
  .tools > .tool, .guides > .guide, .chapters > .chapter { background: none; border: 0; border-radius: 0; box-shadow: none; padding: var(--s-3); }
  .tools > .tool, .guides > .guide, .chapters > .chapter { gap: .3rem; padding-left: 3.25rem; }
  .guides > .guide + .guide, .chapters > .chapter + .chapter, .minicards > .minicard + .minicard { border-top: 1px solid var(--line-soft); }

  .tool__num, .guide__num, .chapter__num { position: absolute; left: var(--s-3); top: var(--s-3); font-size: var(--t-1); }
  .tools > .tool:hover, .guides > .guide:hover, .chapters > .chapter:hover { transform: none; box-shadow: none; }
  :is(.tools, .guides, .chapters) .clickcard:has(.cardlink:focus-visible) { outline-offset: -3px; }
  :is(.tools, .guides, .chapters) .cardfoot { padding-top: var(--s-1); }
  :is(.tools, .guides, .chapters) .go { min-height: 2.25rem; padding: 0; background: none; border: 0; box-shadow: none; color: var(--link); }
  :is(.tools, .guides, .chapters) .go--lock { color: var(--ink-soft); }
  
  .tools > .tool[data-added] { background: none; }

  .terms > .term { background: none; border: 0; border-radius: 0; box-shadow: none; }
  .terms > .term:hover { transform: none; box-shadow: none; }

  .terms .term__link { padding: var(--s-3); border-radius: calc(var(--r-card) - var(--keyline)); }
  .terms .term__link:focus-visible { outline-offset: -3px; }
  
  .alpha { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s-1); }
  .alpha::-webkit-scrollbar { display: none; }
  .alpha > li { flex: none; }

  .waypoint:not(.waypoint--first) .waypoint__card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: .85rem 0 0; }
  .waypoint:not(.waypoint--first) .waypoint__card:hover { transform: none; box-shadow: none; }

}

.library__side { display: none; }
.library__top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); }
.library__build { flex: none; }
.search { flex: 1 1 18rem; max-width: 32rem; margin: 0; }
.search__row { display: flex; gap: var(--s-2); }
.search__input { flex: 1; max-width: none; min-width: 0; }
.search__go { flex: none; min-height: 2.75rem; padding: .35rem .95rem; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: var(--t--1); color: var(--ink); background: var(--card-2); border: var(--keyline) solid var(--line); border-radius: var(--r-btn); }
.search__status { margin: .2rem 0 0; min-height: 1.3em; font-size: var(--t--1); color: var(--ink-soft); }
.library__headrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-3); }
.library__headrow .library__heading { margin: 0; }
.library__jump { display: inline-flex; align-items: center; gap: .25rem; min-height: 2.75rem; font-family: var(--display); font-weight: 700; text-decoration: none; }
.library__empty { margin: 0 0 var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); color: var(--ink-soft); }
.library__part { margin: 0 0 var(--s-5); scroll-margin-top: var(--s-4); }
.library__heading { font-size: var(--t-3); line-height: 1.1; margin: 0 0 var(--s-3); }
.library__lead { margin: calc(-1 * var(--s-2)) 0 var(--s-3); max-width: 50ch; color: var(--ink-soft); }
.library__lead p { margin: 0; }

@media (min-width: 64rem) {
  .library__body { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  .library__side { display: flex; flex-direction: column; gap: var(--s-1); position: sticky; top: var(--s-4); }
  .library__side a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 2.5rem; padding: 0 var(--s-2); border-left: 3px solid var(--line-soft); font-family: var(--display); font-weight: 700; color: var(--ink); text-decoration: none; }
  .library__side a:hover { border-left-color: var(--accent); }
  .library__n { font-weight: 600; font-size: var(--t--1); color: var(--ink-soft); }
  .library__jump { display: none; }
}

.d *::before, .d *::after { box-sizing: border-box; }

.d h4 { font-family: var(--font); margin: 0; color: var(--ink); text-wrap: balance; }

@media (prefers-reduced-motion: reduce) { .d *::before, .d *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.d-kitnav { font-family: var(--font); color: var(--ink); }
.d-kitnav a { color: inherit; }

.d-kitnav { background: var(--paper); border-bottom: 1px solid var(--rule); }
.d-kitnav__bar { display: flex; gap: var(--sp-5); align-items: center; overflow-x: auto; scrollbar-width: none; min-height: 48px; font-size: .9375rem; white-space: nowrap; }
.d-kitnav__bar::-webkit-scrollbar { display: none; }
.d-kitnav a { text-decoration: none; font-weight: 500; padding: var(--sp-2) 0; }
.d-kitnav a:hover, .d-kitnav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.d-kitnav a.d-kitnav__key { margin-left: auto; font-weight: 700; }