/* «Колечки» UI kit — components shared by the landing (/), the studio (/studio) and the legal pages.
   STUDIO_SPEC §8.9. Tokens only from src/ui/theme.css. Everything sits in @layer kolechki.kit, so any unlayered
   page CSS (landing.css, studio.css) overrides it without !important.
   Classes: .k-btn (--primary garnet · --ghost · --quiet · --icon · --sm · --lg · --block) · .k-chip · .k-seg · .k-field ·
   .k-check · .k-tag · .k-toast(s) · .k-odometer · .k-arch · .k-casket · .hs (hotspots) · .k-sheet-handle ·
   .k-icon · .k-wordmark · .k-chain-divider · .k-seal · .k-theme-toggle · .k-theme-hint */

@layer kolechki.kit {

  /* ================================================================ icon */
  .k-icon { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }

  /* ================================================================ buttons */
  .k-btn {
    --btn-h: 40px;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: var(--btn-h); padding: 0 var(--s-5);
    border: 0; border-radius: var(--r-pill);
    background: var(--velvet-2); color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--hairline);
    font: var(--fw-ui) var(--fs-ui-lg)/1 var(--font-ui); letter-spacing: var(--ls-ui);
    text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out),
                box-shadow var(--t-ui) var(--ease-out), transform var(--t-micro) var(--ease-out), opacity var(--t-micro);
  }
  .k-btn:hover { background: var(--velvet-3); }
  .k-btn:active { background: var(--velvet-4); transform: translateY(1px); }
  .k-btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-pill); }
  .k-btn[disabled], .k-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; }
  .k-btn[disabled]:hover, .k-btn[aria-disabled="true"]:hover { background: var(--velvet-2); }
  .k-btn .k-icon { margin-inline: -2px; }

  /* the ONE garnet button of a screen: «Собрать своё», «Заявка мастеру», «Оформить заявку», «Отправить заявку» */
  .k-btn--primary {
    background: var(--garnet); color: var(--on-garnet);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(0, 0, 0, .25);
  }
  .k-btn--primary:hover { background: var(--garnet-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--glow-garnet); }
  .k-btn--primary:active { background: var(--garnet-press); }
  .k-btn--primary:focus-visible { box-shadow: var(--focus-ring), var(--glow-garnet); }
  .k-btn--primary[disabled]:hover, .k-btn--primary[aria-disabled="true"]:hover { background: var(--garnet); box-shadow: none; }

  .k-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
  .k-btn--ghost:hover { background: var(--candle-faint); box-shadow: inset 0 0 0 1px var(--candle-dim); }
  .k-btn--ghost:active { background: var(--candle-dim); }

  .k-btn--quiet { background: transparent; box-shadow: none; color: var(--ink-2); }
  .k-btn--quiet:hover { background: var(--velvet-3); color: var(--ink); }
  .k-btn--quiet[aria-pressed="true"], .k-btn--quiet.is-active { color: var(--candle); background: var(--candle-faint); }

  .k-btn--icon { --btn-h: 40px; width: var(--btn-h); padding: 0; flex: none; }
  .k-btn--sm { --btn-h: 32px; padding-inline: var(--s-3); font-size: var(--fs-ui); }
  .k-btn--sm.k-btn--icon { padding: 0; }
  .k-btn--lg { --btn-h: 52px; padding-inline: var(--s-8); font-size: var(--fs-body); letter-spacing: .02em; }
  .k-btn--block { display: flex; width: 100%; }
  @media (pointer: coarse) { .k-btn { min-height: max(var(--btn-h), var(--touch)); } .k-btn--icon { width: max(var(--btn-h), var(--touch)); } }

  /* text link in candle (inside tags, toasts, cards) */
  .k-link {
    color: var(--candle); text-decoration: none; font-weight: 600; cursor: pointer;
    background: none; border: 0; padding: 0; font-size: inherit;
  }
  .k-link:hover { text-decoration: underline; text-decoration-color: var(--candle-dim); text-underline-offset: .25em; }

  /* ================================================================ chips */
  .k-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 30px; padding: 0 var(--s-3);
    border: 0; border-radius: var(--r-pill);
    background: var(--velvet-2); color: var(--ink-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    font: 500 var(--fs-ui)/1.2 var(--font-ui); letter-spacing: var(--ls-ui);
    white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background-color var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out), box-shadow var(--t-micro);
  }
  .k-chip:hover { background: var(--velvet-3); color: var(--ink); }
  .k-chip:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-pill); }
  .k-chip[aria-pressed="true"], .k-chip.is-active { background: var(--candle-faint); color: var(--candle); box-shadow: inset 0 0 0 1px var(--candle-dim); }
  .k-chip .k-icon { width: 16px; height: 16px; }
  .k-chip__x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -6px; border-radius: 50%; color: var(--ink-3); }
  .k-chip__x:hover { color: var(--ink); background: var(--velvet-4); }
  /* the apprentice's chips — the only place where moonlight is allowed */
  .k-chip--moon { color: var(--moon); box-shadow: inset 0 0 0 1px var(--moon-dim); }
  .k-chip--moon:hover { background: var(--moon-dim); color: var(--moon); }
  @media (pointer: coarse) { .k-chip { min-height: 36px; } }

  /* ================================================================ segmented control */
  .k-seg {
    display: inline-flex; padding: 3px; gap: 2px;
    border-radius: var(--r-pill); background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--hairline);
  }
  .k-seg > button, .k-seg > label {
    position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 30px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill);
    background: transparent; color: var(--ink-2); cursor: pointer; white-space: nowrap;
    font: 600 var(--fs-ui)/1 var(--font-ui); letter-spacing: var(--ls-ui);
    transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
  }
  .k-seg > label > input { position: absolute; opacity: 0; pointer-events: none; }
  .k-seg > button:hover, .k-seg > label:hover { color: var(--ink); }
  .k-seg > [aria-pressed="true"], .k-seg > [aria-selected="true"], .k-seg > [aria-checked="true"], .k-seg > .is-active, .k-seg > label:has(input:checked) {
    background: var(--velvet-4); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline);
  }
  .k-seg > button:focus-visible, .k-seg > label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .k-seg--block { display: flex; }
  @media (pointer: coarse) { .k-seg > button, .k-seg > label { min-height: 38px; } }

  /* ================================================================ fields */
  .k-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
  .k-field__label { font: 600 var(--fs-ui)/var(--lh-ui) var(--font-ui); letter-spacing: var(--ls-ui); color: var(--ink-2); }
  .k-field__label small, .k-field__opt { font-weight: 500; color: var(--ink-3); }
  .k-field input:not([type="checkbox"]):not([type="radio"]), .k-field textarea, .k-field select, .k-input {
    width: 100%; min-height: 44px; padding: 10px 12px;
    border: 0; border-radius: var(--r-1);
    background: var(--velvet-2); color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--hairline-strong);
    font: 400 var(--fs-body)/1.4 var(--font-ui);
    transition: box-shadow var(--t-micro) var(--ease-out), background-color var(--t-micro);
  }
  .k-field textarea { min-height: 88px; resize: vertical; }
  .k-field input::placeholder, .k-field textarea::placeholder, .k-input::placeholder { color: var(--ink-3); opacity: 1; }
  .k-field input:hover, .k-field textarea:hover, .k-field select:hover, .k-input:hover { background: var(--velvet-3); }
  .k-field input:focus-visible, .k-field textarea:focus-visible, .k-field select:focus-visible, .k-input:focus-visible,
  .k-field input:focus, .k-field textarea:focus, .k-input:focus {
    outline: none; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--candle), 0 0 0 3px var(--candle-dim);
  }
  .k-field__hint { font: 500 var(--fs-micro)/var(--lh-micro) var(--font-ui); color: var(--ink-3); }
  .k-field--error input, .k-field--error textarea, .k-field [aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--bad); }
  .k-field--error .k-field__hint, .k-field__error { color: var(--bad); font: 500 var(--fs-micro)/var(--lh-micro) var(--font-ui); }

  /* ================================================================ checkbox (consent: never pre-checked) */
  .k-check {
    display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start;
    font: 400 var(--fs-ui-lg)/1.45 var(--font-ui); color: var(--ink-2); cursor: pointer;
  }
  .k-check input {
    appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 20px; height: 20px;
    border-radius: 4px; background: var(--velvet-2); box-shadow: inset 0 0 0 1.25px var(--ink-3);
    display: grid; place-items: center; cursor: pointer;
    transition: background-color var(--t-micro) var(--ease-out), box-shadow var(--t-micro) var(--ease-out);
  }
  .k-check input::after {
    content: ''; width: 10px; height: 6px; margin-top: -2px;
    border-left: 1.75px solid var(--ink-inverse); border-bottom: 1.75px solid var(--ink-inverse);
    transform: rotate(-45deg) scale(0); transition: transform var(--t-micro) var(--ease-out);
  }
  .k-check input:hover { box-shadow: inset 0 0 0 1.25px var(--ink-2); }
  .k-check input:checked { background: var(--candle); box-shadow: inset 0 0 0 1.25px var(--candle); }
  .k-check input:checked::after { transform: rotate(-45deg) scale(1); }
  .k-check input:focus-visible { box-shadow: inset 0 0 0 1.25px var(--candle), var(--focus-ring); }
  .k-check a { color: var(--candle); }
  .k-check:has(input:checked) { color: var(--ink); }

  /* ================================================================ casket line & glass panels */
  .k-casket { box-shadow: var(--casket); border-radius: var(--r-2); }
  .k-panel { border-radius: var(--r-2); background: var(--velvet-1); box-shadow: var(--casket); }

  /* ================================================================ arch */
  .k-arch { overflow: hidden; }
  .k-arch__stroke { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .k-arch__stroke path { fill: none; stroke: var(--hairline-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }

  /* ================================================================ odometer */
  .k-odometer { display: inline-block; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
  .k-odometer__vis { display: inline-flex; align-items: flex-end; }
  .k-odometer__d {
    --odo-h: 1.15em;
    display: inline-block; height: var(--odo-h); overflow: hidden; vertical-align: bottom;
    line-height: var(--odo-h);
  }
  .k-odometer__reel {
    display: block; white-space: pre; text-align: center;
    transition: transform var(--t-odometer) var(--ease-out);
    will-change: transform;
  }
  .k-odometer__reel::before { content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9'; }
  .k-odometer__d.is-new { opacity: 0; }
  .k-odometer__d { transition: opacity var(--t-odometer) var(--ease-out); }
  .k-odometer__s { display: inline-block; white-space: pre; line-height: 1.15em; height: 1.15em; vertical-align: bottom; }
  .k-odometer__s::before { content: attr(data-ch); }

  /* ================================================================ tag on a thread (§2.10) */
  .k-tag {
    --tag-w: 300px;
    --hole: 10px;
    position: relative; display: inline-block; width: min(var(--tag-w), 100%);
    transform-origin: 26px 20px;          /* the thread hole */
    color: var(--ink); text-align: left;
  }
  .k-tag__thread {
    position: absolute; left: 25.5px; bottom: calc(100% - 20px); width: 1px; height: 56px;
    background: linear-gradient(to top, var(--ink-3), transparent);
    transform-origin: bottom center; transform: rotate(14deg);
    pointer-events: none;
  }
  .k-tag__card {
    position: relative; display: grid; gap: 4px;
    padding: 14px 20px 18px 20px;
    background: var(--glass-bg-solid);
    border-radius: var(--r-2);
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
    box-shadow: var(--casket);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .k-tag__card { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
    .tier-low .k-tag__card { background: var(--glass-bg-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  .k-tag__card::before {   /* chamfer edge line */
    content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 1px; background: var(--hairline);
    transform-origin: 0 0; transform: translate(0, 14px) rotate(-45deg);
  }
  .k-tag__over { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-height: var(--hole); }
  .k-tag__hole {
    flex: none; width: var(--hole); height: var(--hole); border-radius: 50%;
    background: var(--velvet-0); box-shadow: inset 0 0 0 1px var(--ink-3), inset 0 1px 2px rgba(0, 0, 0, .5);
  }
  .k-tag__overline {
    font: var(--fw-cap) var(--fs-cap)/var(--lh-cap) var(--font-ui); letter-spacing: var(--ls-cap);
    text-transform: uppercase; color: var(--ink-3);
  }
  .k-tag__title { font: var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-display); color: var(--ink); text-wrap: balance; }
  .k-tag__materials { font: 500 var(--fs-ui)/var(--lh-ui) var(--font-ui); letter-spacing: var(--ls-ui); color: var(--ink-2); }
  .k-tag__specs {
    font: 400 var(--fs-mono)/var(--lh-mono) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2);
  }
  .k-tag__price {
    margin-top: 6px; font: 600 var(--fs-ui-lg)/1.3 var(--font-ui); letter-spacing: var(--ls-ui); color: var(--candle);
    font-variant-numeric: lining-nums tabular-nums;
  }
  .k-tag__note { font: 500 var(--fs-micro)/var(--lh-micro) var(--font-ui); color: var(--ink-3); }
  .k-tag__cta { margin-top: 8px; }
  .k-tag__link {
    color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
    font: 600 var(--fs-ui)/1.3 var(--font-ui); letter-spacing: var(--ls-ui);
    text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: .3em;
    transition: color var(--t-micro), text-decoration-color var(--t-micro);
  }
  .k-tag__link:hover { color: var(--candle); text-decoration-color: var(--candle); }
  .k-tag--compact { --tag-w: 100%; }
  .k-tag--compact .k-tag__card { padding: 12px 16px 14px; }
  .k-tag--compact .k-tag__thread { display: none; }
  .k-tag.is-lit .k-tag__card { box-shadow: var(--casket), var(--glow-candle); }

  /* ================================================================ toasts */
  .k-toasts {
    --toast-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
    position: fixed; left: 50%; bottom: var(--toast-bottom); z-index: var(--z-toast);
    display: flex; flex-direction: column-reverse; align-items: center; gap: var(--s-2);
    width: max-content; max-width: calc(100vw - 2 * var(--gutter));
    transform: translateX(-50%); pointer-events: none;
  }
  .k-toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: var(--s-4);
    max-width: 560px; min-height: 44px; padding: 10px 10px 10px 18px;
    border-radius: var(--r-pill);
    background: var(--glass-bg-solid); color: var(--ink);
    box-shadow: var(--shadow-pop);
    font: 500 var(--fs-ui-lg)/1.35 var(--font-ui);
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
  }
  .k-toast:not(:has(.k-toast__action)) { padding-right: 18px; }
  .k-toast.is-in { opacity: 1; transform: none; }
  .k-toast.is-out { opacity: 0; transform: translateY(4px); }
  .k-toast--warn { box-shadow: var(--shadow-pop), inset 3px 0 0 var(--warn); }
  .k-toast__text { min-width: 0; }
  .k-toast__action {
    flex: none; min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
    background: var(--candle-faint); color: var(--candle); cursor: pointer;
    font: 600 var(--fs-ui)/1 var(--font-ui); letter-spacing: var(--ls-ui);
    transition: background-color var(--t-micro);
  }
  .k-toast__action:hover { background: var(--candle-dim); }
  .k-toast__action:focus-visible { box-shadow: var(--focus-ring); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .k-toast { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%); backdrop-filter: blur(var(--glass-blur)) saturate(115%); }
    .tier-low .k-toast { background: var(--glass-bg-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  /* ================================================================ hotspots (positioned by src/ui/interact/hotspots.js)
     The button IS the 44 px hit area (::before is the round hit disk), centred on its (left, top) by negative margins, so
     the positioning code may set style.transform = translate3d(x, y, 0) freely. The visible 14 px eyelet is ::after
     (scaled on hover / magnet). States: hs--free · used · compatible · blocked · magnet · issue · cluster. */
  .hs {
    position: absolute; left: 0; top: 0; z-index: var(--z-scene-ui);
    width: var(--hotspot-hit); height: var(--hotspot-hit);
    margin: calc(var(--hotspot-hit) / -2) 0 0 calc(var(--hotspot-hit) / -2);
    display: grid; place-items: center; isolation: isolate;
    padding: 0; border: 0; border-radius: 50%; background: transparent;
    color: var(--candle); cursor: pointer; pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .hs::before { content: ''; position: absolute; inset: 0; border-radius: 50%; }   /* the 44 px hit disk */
  .hs::after {
    content: ''; position: absolute; left: 50%; top: 50%; z-index: -1;
    width: var(--hotspot); height: var(--hotspot); margin: calc(var(--hotspot) / -2) 0 0 calc(var(--hotspot) / -2);
    border-radius: 50%;
    background: rgba(7, 6, 10, .35);
    box-shadow: inset 0 0 0 1.5px var(--candle), 0 0 10px rgba(242, 184, 114, .35);
    transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), background-color var(--t-ui), opacity var(--t-ui);
  }
  .hs:hover::after, .hs:focus-visible::after { transform: scale(1.3); box-shadow: inset 0 0 0 1.5px var(--candle-hi), var(--glow-candle); }
  .hs:focus-visible { outline: none; box-shadow: none; }
  .hs--used::after { background: var(--candle); box-shadow: 0 0 0 2px rgba(7, 6, 10, .55); transform: scale(.72); }
  .hs--compatible::after { animation: k-hs-pulse 1.6s var(--ease-in-out) infinite; }
  .hs--blocked { cursor: not-allowed; }
  .hs--blocked::after { background: transparent; box-shadow: inset 0 0 0 1.25px var(--ink-3); opacity: .6; }
  .hs--blocked:hover::after { transform: none; box-shadow: inset 0 0 0 1.25px var(--ink-2); }
  .hs--magnet::after { transform: scale(1.45); background: var(--candle-dim); box-shadow: inset 0 0 0 1.5px var(--candle-hi), var(--glow-candle); }
  .hs--issue { color: var(--warn); }
  .hs--issue::after { box-shadow: inset 0 0 0 1.5px var(--warn), 0 0 12px rgba(224, 174, 98, .45); }
  .hs--cluster { font: 500 11px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
  .hs--cluster::after { width: 30px; height: 20px; margin: -10px 0 0 -15px; border-radius: var(--r-pill); }
  [data-theme="day"] .hs::after { background: rgba(255, 255, 255, .6); }
  [data-theme="day"] .hs--used::after { background: var(--candle); }
  @keyframes k-hs-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1.5px var(--candle), 0 0 0 0 rgba(242, 184, 114, .45); }
    50% { box-shadow: inset 0 0 0 1.5px var(--candle-hi), 0 0 0 7px rgba(242, 184, 114, 0); }
  }
  @media (pointer: coarse) { .hs { --hotspot: 18px; } }
  @media (prefers-reduced-motion: reduce) { .hs--compatible::after { animation: none; box-shadow: inset 0 0 0 2px var(--candle-hi), var(--glow-candle); } }

  /* ================================================================ bottom sheet handle */
  .k-sheet-handle {
    position: relative; display: block; width: 100%; height: 22px; padding: 0; border: 0; background: transparent;
    cursor: grab; touch-action: none;
  }
  .k-sheet-handle::before {
    content: ''; position: absolute; left: 50%; top: 9px; width: 36px; height: 4px; translate: -50% 0;
    border-radius: var(--r-pill); background: var(--hairline-strong);
  }
  .k-sheet-handle::after { content: ''; position: absolute; left: 0; right: 0; top: -11px; height: var(--touch); }
  .k-sheet-handle:focus-visible { box-shadow: none; }
  .k-sheet-handle:focus-visible::before { background: var(--candle); }

  /* ================================================================ wordmark */
  .k-wordmark {
    --wm-size: 24px;
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
    color: var(--ink); text-decoration: none; line-height: 1;
  }
  .k-wordmark__word {
    display: inline-flex; align-items: baseline;
    font: 500 var(--wm-size)/1 var(--font-display); letter-spacing: .32em; margin-right: -.32em;
    white-space: nowrap; font-variant-numeric: lining-nums;
  }
  .k-wordmark__o {
    position: relative; display: inline-block; width: .74em; height: .74em; margin-right: .32em;
    translate: 0 .045em; flex: none;
  }
  .k-wordmark__o > svg, .k-wordmark__o > img { position: absolute; inset: -.04em; width: calc(100% + .08em); height: calc(100% + .08em); }
  .k-wordmark__sub {
    font: 600 var(--fs-cap)/1 var(--font-ui); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--ink-3);
    padding-left: .1em;
  }
  .k-wordmark--sm { --wm-size: 20px; }
  .k-wordmark--md { --wm-size: 24px; }
  .k-wordmark--lg { --wm-size: 36px; }
  .k-wordmark--xl { --wm-size: clamp(44px, 7vw, 96px); }
  .k-wordmark--xl .k-wordmark__sub { font-size: clamp(11px, .9vw, 14px); }
  a.k-wordmark:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-1); }
  a.k-wordmark:hover .k-wordmark__o { filter: drop-shadow(0 0 6px rgba(242, 184, 114, .35)); }

  /* ================================================================ chain divider */
  .k-chain-divider { display: flex; justify-content: center; padding-block: var(--s-8); color: var(--ink-3); }
  .k-chain-divider svg { width: auto; height: 28px; overflow: visible; }
  .k-chain-divider path {
    stroke-dasharray: 1 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 520ms var(--ease-out) calc(var(--i, 0) * 60ms);
  }
  .k-chain-divider.is-in path { stroke-dashoffset: 0; }
  @media (prefers-reduced-motion: reduce) { .k-chain-divider path { stroke-dashoffset: 0; transition: none; } }

  /* ================================================================ wax seal */
  .k-seal {
    position: absolute; width: var(--seal-size, 76px); height: var(--seal-size, 76px); pointer-events: none;
    transform: rotate(-6deg); filter: drop-shadow(0 6px 10px rgba(30, 0, 6, .55));
  }
  .k-seal > svg { width: 100%; height: 100%; }
  .k-seal--bottom-right { right: -14px; bottom: -18px; }
  .k-seal--top-right { right: -14px; top: -18px; }
  .k-seal--center { left: 50%; top: 50%; margin: calc(var(--seal-size, 76px) / -2) 0 0 calc(var(--seal-size, 76px) / -2); }

  /* ================================================================ theme toggle */
  .k-theme-toggle--label { width: auto; padding: 0 var(--s-3) 0 var(--s-2); gap: 6px; }
  .k-theme-toggle__name { font: 600 var(--fs-ui)/1 var(--font-ui); }
  .k-theme-toggle[data-theme="candle"] .k-icon { color: var(--candle); }
  .k-theme-switching::view-transition-old(root), .k-theme-switching::view-transition-new(root) { animation-duration: 420ms; }
  /* first-visit hint next to the toggle (theme.js themeHint) */
  .k-theme-hint {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-popover);
    width: max-content; max-width: min(300px, calc(100vw - 32px)); padding: 10px 14px;
    border-radius: var(--r-2); background: var(--glass-bg-solid); box-shadow: var(--casket), var(--shadow-pop);
    font: 500 var(--fs-ui)/var(--lh-ui) var(--font-ui); letter-spacing: var(--ls-ui); color: var(--ink-2); text-wrap: pretty;
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
  }
  .k-theme-hint--above { top: auto; bottom: calc(100% + 10px); transform: translateY(4px); }
  .k-theme-hint::before {
    content: ''; position: absolute; right: 14px; top: -5px; width: 10px; height: 10px; rotate: 45deg;
    background: inherit; box-shadow: -1px -1px 0 var(--hairline);
  }
  .k-theme-hint--above::before { top: auto; bottom: -5px; box-shadow: 1px 1px 0 var(--hairline); }
  .k-theme-hint.is-in { opacity: 1; transform: none; }

  /* ================================================================ small print (AI drafts, legal) */
  .k-fineprint { font: 500 var(--fs-micro)/var(--lh-micro) var(--font-ui); color: var(--ink-3); }
  .k-fineprint--moon { color: var(--moon); }
}