.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); }
.site-header > .container { height: 100%; display: flex; align-items: center; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.site-nav { display: none; align-self: stretch; gap: 4px; margin-left: 8px; }
.site-nav a { position: relative; display: flex; align-items: center; padding: 0 12px;
  font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[data-active="true"], .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[data-active="true"]::after, .site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px;
  background: var(--marker); border-radius: 3px 3px 0 0; }
.site-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.site-menu { position: relative; }
.site-menu summary { list-style: none; } .site-menu summary::-webkit-details-marker { display: none; }
.site-menu__panel { position: fixed; top: var(--header-h); left: 0; right: 0; display: grid;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.site-menu__panel a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--gutter);
  color: var(--ink); font-weight: 500; text-decoration: none; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .site-nav { display: flex; } .site-menu { display: none; } }

.ui-btn { --h: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-sm);
  font: 600 var(--fs-ui)/1 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s; }
.ui-btn--primary   { background: var(--accent); color: var(--accent-ink); }
.ui-btn--primary:hover { background: var(--accent-hover); }
.ui-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.ui-btn--secondary:hover { background: var(--surface-2); }
.ui-btn--ghost     { background: transparent; color: var(--ink-2); }
.ui-btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.ui-btn--marker    { background: var(--marker); color: var(--marker-ink); }   /* closing CTA only */
.ui-btn--marker:hover { filter: brightness(0.95); }
.ui-btn--sm   { --h: 32px; padding: 0 12px; font-size: var(--fs-sm); }
.ui-btn--lg   { --h: 48px; padding: 0 22px; font-size: 15px; border-radius: var(--r-md); }
.ui-btn--icon { width: var(--h); padding: 0; }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
@media (pointer: coarse) { .ui-btn { min-height: 44px; } .ui-btn--icon { min-width: 44px; } }

.ui-field { height: 36px; padding: 0 12px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: 400 var(--fs-ui)/1 var(--font-ui); }
.ui-field:hover { border-color: var(--ink-3); }
.ui-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ui-field::placeholder { color: var(--ink-3); }
.ui-field--code { font-family: var(--font-code); font-size: 13.5px; }
.ui-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }

.ui-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md); }
.ui-seg label { position: relative; display: inline-flex; align-items: center; height: 28px;
  padding: 0 12px; border-radius: 7px; font: 500 var(--fs-sm)/1 var(--font-ui);
  color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.ui-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ui-seg label:has(input:checked) { background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 0 0 1px var(--line-strong); }
.ui-seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.ui-toggle { position: relative; display: inline-grid; place-items: center; min-width: 28px; height: 28px;
  padding: 0 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: 500 13px/1 var(--font-code); color: var(--ink-2); background: var(--surface); cursor: pointer; }
.ui-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ui-toggle:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ui-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.ui-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); font: 600 var(--fs-sm)/1 var(--font-ui);
  background: var(--surface-2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ui-badge--ok   { background: var(--ok-soft);   color: var(--ok); }
.ui-badge--warn { background: var(--warn-soft); color: var(--warn); }
.ui-badge--err  { background: var(--err-soft);  color: var(--err); }

.ui-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.ui-panel:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ui-panel__head { flex: none; display: flex; align-items: center; gap: var(--s-2);
  height: 40px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); }
.ui-panel__title { margin-right: auto; font: 600 var(--fs-sm)/1 var(--font-ui); color: var(--ink-2); }
.ui-panel__body { flex: 1; min-height: 0; display: flex; position: relative; }
.ui-panel--out, .ui-panel--out .ui-panel__head { background: var(--surface-2); }  /* read-only output looks "sunken" */

.ui-panel__body textarea, .ui-panel__body pre, .ui-code {
  font: 400 13.5px/1.6 var(--font-code); tab-size: 2; }
.ui-panel__body textarea { flex: 1; width: 100%; height: 100%; padding: 12px 14px; border: 0; outline: 0;
  background: transparent; color: var(--ink); resize: none; caret-color: var(--accent); }
.ui-panel__body textarea::placeholder { color: var(--ink-3); }
.ui-panel__body pre { flex: 1; margin: 0; padding: 12px 14px; overflow: auto; white-space: pre; color: var(--ink); }
.is-wrap { white-space: pre-wrap !important; overflow-wrap: anywhere; }

.ui-status { display: flex; align-items: center; gap: var(--s-3); min-height: 32px; padding: 0 4px;
  font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ui-status [data-state="ok"]    { color: var(--ok); }
.ui-status [data-state="error"] { color: var(--err); }
.ui-status__right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

.ui-callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.55; }
.ui-callout .icon { margin-top: 2px; color: var(--accent); }
.ui-callout--warn { background: var(--warn-soft); color: var(--ink); }
.ui-callout--warn .icon { color: var(--warn); }
.ui-callout a { color: var(--accent); }

.ui-acc details { border-bottom: 1px solid var(--line); }
.ui-acc details:first-child { border-top: 1px solid var(--line); }
.ui-acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 52px; padding: 12px 0; font: 600 15px/1.4 var(--font-ui); color: var(--ink); cursor: pointer; }
.ui-acc summary::-webkit-details-marker { display: none; }
.ui-acc details > :not(summary) { padding-bottom: var(--s-4); color: var(--ink-2); max-width: 68ch; }
.ui-acc { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

.ui-tool { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 2px; align-content: start;
  padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: inherit; text-decoration: none; transition: border-color .12s; }
.ui-tool:hover { border-color: var(--accent); }
.ui-tool__icon { grid-row: 1 / span 3; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
.ui-tool__name { font: 600 16px/1.3 var(--font-ui); color: var(--ink); }
.ui-tool__desc { font-size: var(--fs-ui); line-height: 1.45; color: var(--ink-2); }
.ui-tool__cat  { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-3); }

.ui-row { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center;
  padding: 12px 8px; border-bottom: 1px solid var(--line); border-radius: var(--r-sm);
  color: inherit; text-decoration: none; }
.ui-row:hover { background: var(--surface-2); }
.ui-row__tile { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2); font: 600 12px/1 var(--font-code); }
.ui-row__title { font: 600 15px/1.3 var(--font-ui); color: var(--ink); }
.ui-row__desc  { grid-column: 2; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }

.ui-crumb ol { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-sm); color: var(--ink-3); }
.ui-crumb li + li::before { content: "/"; margin: 0 8px; color: var(--line-strong); }
.ui-crumb a { color: var(--ink-2); text-decoration: none; } .ui-crumb a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 639.98px) {   /* mobile: show only "← parent" */
  .ui-crumb li { display: none; }
  .ui-crumb li:nth-last-child(2) { display: block; }
  .ui-crumb li:nth-last-child(2)::before { content: "←"; margin: 0 6px 0 0; }
  .ui-crumb li:nth-last-child(2)::after { content: none; }
}

.prose { color: var(--ink); font-size: var(--fs-body); line-height: 1.65; }
.prose > * + * { margin-top: var(--s-4); }
.prose :is(p, ul, ol, dl, details) { max-width: 72ch; }
.prose h2 { margin-top: var(--s-7); font-size: var(--fs-2xl); }
.prose h3 { margin-top: var(--s-6); }
.prose h2 + *, .prose h3 + * { margin-top: var(--s-3); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--ink-3); font-weight: 600; }
.prose code { padding: 1px 6px; border-radius: 4px; background: var(--surface-2); font-size: .9em; }
.prose pre, .ui-codeblock { padding: 14px 16px; overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface-2); font: 400 13px/1.65 var(--font-code); tab-size: 2; }
.prose pre code { padding: 0; background: none; font-size: inherit; }

/* Visible, keyboard-native appearance choices for the three public themes. */
.site-theme-control { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font: 600 var(--fs-xs)/1.3 var(--font-ui); }
.site-theme-control select { min-height: 36px; max-width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); padding: 6px 24px 6px 8px; font: inherit; cursor: pointer; }
.site-theme-control select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-mobile-theme { display: flex; justify-content: space-between; }
[data-theme-control][hidden] { display: none !important; }