/* If a phone docs page is resized into the original laptop layout, its mobile
   disclosure buttons must not remain visible. */
@media (min-width: 901px) {
  .mp-docs-toggle { display: none; }
}
/* Kodela — site shell: nav, mega menus, mobile sheet, footer.
   Loaded on every page, the landing included, so every rule here is scoped to a
   .kd-* class and never touches the landing's own body classes. Tokens repeat the
   Board's values (board/DESIGN.md) so the shell renders the same on inner pages,
   where board/style.css is not loaded. */

@font-face { font-family: "Plex Cond"; src: url(/fonts/plex-cond-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Cond"; src: url(/fonts/plex-cond-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/fonts/plex-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/fonts/plex-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/fonts/plex-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
/* What body text shows until a Plex Sans file arrives: a system face scaled to Plex's own
   widths, so the swap does not re-wrap a paragraph and push the page down. (The same was
   tried for Plex Cond and measured worse on two pages, so headings keep "Arial Narrow".) */
@font-face { font-family: "Plex Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto"); font-weight: 400 500; size-adjust: 100%; }
@font-face { font-family: "Plex Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold"); font-weight: 600 700; size-adjust: 96.8%; }

.kd-nav, .kd-foot, .kd-sheet {
  --kd-ground: #f3f4f6; --kd-ground-2: #e9ebef; --kd-panel: #fff; --kd-elevated: #f1f2f5;
  --kd-line: #d9dce3; --kd-line-strong: #c3c8d1; --kd-ink: #14161a; --kd-ink-dim: #4f5560; --kd-ink-dimmer: #5d636e;
  --kd-amber: #b86a00; --kd-amber-text: #8f5200; --kd-amber-led: #f08a00; --kd-lcd: #1c1f24; --kd-lcd-ink: #f0a340;
  --kd-focus: #2458d6; --kd-bay: #e6e8ec;
  --kd-cond: "Plex Cond", "Arial Narrow", system-ui, sans-serif;
  --kd-sans: "Plex Sans", "Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kd-mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --kd-ease: cubic-bezier(.16, 1, .3, 1);
  --kd-gutter: clamp(16px, 4vw, 56px);
  --kd-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(20,22,26,.06), 0 22px 44px -22px rgba(20,22,26,.28);
  --kd-shadow-lift: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 14px rgba(20,22,26,.08), 0 34px 64px -26px rgba(20,22,26,.34);
}

.kd-g { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kd-soon { font: 500 .7rem/1 var(--kd-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--kd-ink-dimmer); border: 1px solid var(--kd-line-strong); border-radius: 4px; padding: 2px 5px; vertical-align: 1px; white-space: nowrap; }

/* ---------- brand ---------- */
.kd-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--kd-ink); text-decoration: none; }
.kd-brand__mark { width: 26px; height: 26px; fill: none; stroke: var(--kd-amber); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--kd-ease); }
.kd-brand:hover .kd-brand__mark { transform: rotate(-8deg) scale(1.06); }
.kd-brand__word { font: 700 1.28rem/1 var(--kd-cond); letter-spacing: .02em; text-transform: uppercase; }

/* ---------- nav ---------- */
header.kd-nav {
  position: sticky; top: 0; z-index: 60; height: 64px; display: block; padding: 0;
  background: rgba(243, 244, 246, .94); border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
  font-family: var(--kd-sans); color: var(--kd-ink);
  /* the landing's .nav rule adds a backdrop blur; a filtered ancestor would turn the
     fixed mobile sheet into a 64px box, so the shell switches it off */
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
header.kd-nav.is-stuck, header.kd-nav.is-open { background: var(--kd-ground); border-bottom-color: var(--kd-line); box-shadow: 0 10px 30px -24px rgba(20,22,26,.35); }
.kd-nav__bar { height: 64px; display: flex; align-items: center; gap: 20px; padding: 0 var(--kd-gutter); max-width: 1480px; margin: 0 auto; }
.kd-menu { margin-left: 18px; flex: 1; }
.kd-menu__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.kd-menu__trigger, .kd-menu__link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 8px;
  background: none; border: 0; cursor: pointer; text-decoration: none;
  font: 500 .92rem/1 var(--kd-sans); color: var(--kd-ink-dim); transition: color .2s, background .2s;
}
.kd-menu__trigger:hover, .kd-menu__link:hover, .kd-menu__trigger[aria-expanded="true"] { color: var(--kd-ink); background: var(--kd-elevated); }
.kd-menu__link[aria-current="page"], .kd-menu__trigger.is-current { color: var(--kd-ink); }
.kd-menu__trigger.is-current::after, .kd-menu__link[aria-current="page"]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--kd-amber-led); margin-left: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.kd-g--chev { width: 15px; height: 15px; transition: transform .3s var(--kd-ease); }
.kd-menu__trigger[aria-expanded="true"] .kd-g--chev { transform: rotate(180deg); }
.kd-nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.kd-nav__signin { font: 500 .92rem/1 var(--kd-sans); color: var(--kd-ink-dim); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 8px; }
.kd-nav__signin:hover { color: var(--kd-ink); }

/* the slot key: the Board's primary control */
.kd-key {
  --kd-key-bg: var(--kd-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px;
  border-radius: 9px; background: var(--kd-key-bg); color: #fff; text-decoration: none; border: 1px solid #000;
  font: 600 .9rem/1 var(--kd-sans); letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 3px 0 #000, 0 8px 18px -8px rgba(20,22,26,.6);
  transition: transform .12s var(--kd-ease), box-shadow .12s var(--kd-ease), background .2s;
}
.kd-key:hover { background: #262a31; }
.kd-key:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 0 0 #000, 0 2px 6px -4px rgba(20,22,26,.6); }
.kd-key__led { width: 7px; height: 7px; border-radius: 50%; background: var(--kd-amber-led); box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.kd-key--ghost { --kd-key-bg: var(--kd-panel); color: var(--kd-ink); border-color: var(--kd-line-strong); box-shadow: 0 1px 0 #fff inset, 0 3px 0 var(--kd-line-strong); }
.kd-key--ghost:hover { background: var(--kd-elevated); }
.kd-key--ghost:active { box-shadow: 0 1px 0 #fff inset, 0 0 0 var(--kd-line-strong); }


/* ---------- mega menus ---------- */
.kd-mega {
  position: absolute; left: 0; right: 0; top: 64px; z-index: 59;
  padding: 10px var(--kd-gutter) 26px;
  pointer-events: none;
}
.kd-mega:not([hidden]) { pointer-events: auto; }
.kd-mega__inner {
  max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr minmax(240px, .9fr); gap: 8px;
  background: var(--kd-panel); border: 1px solid var(--kd-line); border-radius: 18px; padding: 14px;
  box-shadow: var(--kd-shadow-lift);
  transform-origin: 50% 0; animation: kd-drop .38s var(--kd-ease) both;
  position: relative;
}
.kd-mega__inner::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--kd-amber-led) 30%, var(--kd-amber-led) 70%, transparent); opacity: .7; animation: kd-trace 1.2s var(--kd-ease) both; transform-origin: 0 50%; }
.kd-mega__inner--wide { grid-template-columns: 1fr; max-width: 980px; }
.kd-mega__inner--narrow { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: max(0px, calc(50% - 300px)); }
@keyframes kd-drop { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes kd-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kd-mega__group { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.kd-mega__group--cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 2px 8px; }
.kd-mega__group--cols .kd-mega__label { grid-column: 1 / -1; }
.kd-mega__label { margin: 4px 10px 8px; font: 600 .74rem/1 var(--kd-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--kd-ink-dimmer); }
.kd-mega__link {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 10px; border-radius: 11px; text-decoration: none; color: var(--kd-ink);
  transition: background .2s, transform .25s var(--kd-ease);
  opacity: 0; animation: kd-in .45s var(--kd-ease) forwards;
}
.kd-mega__link:nth-of-type(2) { animation-delay: .03s; } .kd-mega__link:nth-of-type(3) { animation-delay: .06s; } .kd-mega__link:nth-of-type(4) { animation-delay: .09s; } .kd-mega__link:nth-of-type(5) { animation-delay: .12s; }
@keyframes kd-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.kd-mega__link .kd-g { margin-top: 1px; padding: 7px; width: 34px; height: 34px; border-radius: 9px; background: var(--kd-bay); color: var(--kd-ink-dim); box-shadow: inset 0 1px 2px rgba(20,22,26,.14); transition: color .2s, background .2s; }
.kd-mega__link span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kd-mega__link b { font: 600 .95rem/1.2 var(--kd-sans); }
.kd-mega__link small { font: 400 .84rem/1.35 var(--kd-sans); color: var(--kd-ink-dim); }
.kd-mega__link:hover, .kd-mega__link:focus-visible { background: var(--kd-elevated); }
.kd-mega__link:hover .kd-g, .kd-mega__link:focus-visible .kd-g { color: var(--kd-amber); background: #fff; }
.kd-mega__link[aria-current="page"] b::after { content: " ●"; color: var(--kd-amber-led); font-size: .6em; vertical-align: 2px; }
.kd-mega__feature {
  display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 13px; text-decoration: none; color: var(--kd-ink);
  background: var(--kd-ground); border: 1px solid var(--kd-line); transition: border-color .2s, transform .3s var(--kd-ease);
}
.kd-mega__feature:hover { border-color: var(--kd-amber); transform: translateY(-2px); }
.kd-mega__feature b { font: 700 1.12rem/1.1 var(--kd-cond); text-transform: uppercase; letter-spacing: .01em; margin-top: 6px; }
.kd-mega__feature small { font: 400 .84rem/1.4 var(--kd-sans); color: var(--kd-ink-dim); }
.kd-mega__jump { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font: 600 .84rem/1 var(--kd-sans); color: var(--kd-amber-text); }
.kd-mega__jump .kd-g { width: 16px; height: 16px; transition: transform .3s var(--kd-ease); }
.kd-mega__feature:hover .kd-mega__jump .kd-g { transform: translateX(4px); }
.kd-mega__art { position: relative; height: 112px; border-radius: 10px; overflow: hidden; background: #fff url(/assets/art/board-lines.svg) center / cover no-repeat; border: 1px solid var(--kd-line); }
.kd-mega__trace { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--kd-line-strong); }
.kd-mega__trace::after { content: ""; position: absolute; top: -3px; left: -10%; width: 8px; height: 8px; border-radius: 50%; background: var(--kd-amber-led); box-shadow: 0 1px 3px rgba(0,0,0,.35); animation: kd-packet 2.4s var(--kd-ease) infinite; }
@keyframes kd-packet { from { left: -6%; } to { left: 104%; } }
.kd-mega__art--term { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px 14px; background: var(--kd-lcd); border-color: #000; }
.kd-nav .kd-mega__art--term code { background: #1c1f24; border: 0; padding: 0; font: 500 .8rem/1.4 var(--kd-mono); color: var(--kd-lcd-ink); white-space: pre; }
.kd-nav .kd-mega__art--term code + code { color: #a3a7b1; background: #1c1f24; }
.kd-mega__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 4px 6px 2px; padding: 12px 4px 2px; border-top: 1px dashed var(--kd-line-strong); }
.kd-mega__foot-label { font: 600 .72rem/1 var(--kd-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--kd-ink-dimmer); margin-right: 8px; }
.kd-mega__foot a { font: 500 .84rem/1 var(--kd-sans); color: var(--kd-ink-dim); text-decoration: none; padding: 9px 11px; border-radius: 99px; border: 1px solid var(--kd-line); background: var(--kd-panel); min-height: 36px; display: inline-flex; align-items: center; }
.kd-mega__foot a:hover { color: var(--kd-ink); border-color: var(--kd-amber); }
.kd-scrim { position: fixed; inset: 64px 0 0; z-index: 58; background: rgba(20,22,26,.18); opacity: 0; pointer-events: none; transition: opacity .3s; }
.kd-scrim.is-on { opacity: 1; }

/* ---------- the menu key (900px and below) ----------
   A ghost key with its label. Pressed, it stays down while the menu is open, and its two
   bars fold into a cross: the same control opens and closes, so nothing jumps. */
.kd-burger {
  display: none; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 14px; flex: none;
  border-radius: 9px; background: var(--kd-panel); border: 1px solid var(--kd-line-strong); color: var(--kd-ink); cursor: pointer;
  box-shadow: 0 1px 0 #fff inset, 0 3px 0 var(--kd-line-strong);
  transition: transform .12s var(--kd-ease), box-shadow .12s var(--kd-ease), background .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.kd-burger:active, .kd-burger[aria-expanded="true"] { transform: translateY(3px); box-shadow: 0 1px 0 #fff inset, 0 0 0 var(--kd-line-strong); }
.kd-burger[aria-expanded="true"] { background: var(--kd-elevated); }
.kd-burger__label { font: 600 .76rem/1 var(--kd-cond); letter-spacing: .12em; text-transform: uppercase; }
.kd-burger__bars { position: relative; width: 18px; height: 12px; flex: none; }
.kd-burger__bars i { position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .34s var(--kd-ease); }
.kd-burger__bars i:first-child { transform: translateY(-3.5px); }
.kd-burger__bars i:last-child { transform: translateY(3.5px); }
.kd-burger[aria-expanded="true"] .kd-burger__bars i:first-child { transform: rotate(45deg); }
.kd-burger[aria-expanded="true"] .kd-burger__bars i:last-child { transform: rotate(-45deg); }

/* ---------- the mobile menu: a panel that drops from the bar ----------
   The bar stays where it is; the page dims; a white panel unrolls from the bar's lower
   edge with the amber trace the desktop menus draw. It is as tall as its contents, so a
   short menu leaves the page visible instead of half a screen of blank ground.
   site.js moves .kd-sheet to <body> (the bar can slide away, and a transformed ancestor
   would capture a fixed child) and sets --kd-sheet-top to the bar's height. */
.kd-sheet { position: fixed; inset: var(--kd-sheet-top, 64px) 0 0; z-index: 59; background: rgba(20, 22, 26, .34); overscroll-behavior: contain; animation: kd-sheet-dim .26s ease both; font-family: var(--kd-sans); color: var(--kd-ink); }
.kd-sheet[hidden] { display: none; }
.kd-sheet__panel {
  position: relative; display: flex; flex-direction: column; max-height: 100%;
  background: var(--kd-panel); border-radius: 0 0 22px 22px; overflow: hidden;
  box-shadow: 0 1px 0 var(--kd-line), 0 34px 60px -34px rgba(20, 22, 26, .55);
  animation: kd-sheet-drop .44s var(--kd-ease) both;
}
.kd-sheet__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: var(--kd-amber); transform-origin: left center; animation: kd-sheet-trace .7s var(--kd-ease) .06s both; }
.kd-sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px calc(var(--kd-gutter) - 10px) 6px; scrollbar-width: thin; scrollbar-color: var(--kd-line-strong) transparent; }
.kd-sheet__body > * { animation: kd-sheet-row .46s var(--kd-ease) both; }
.kd-sheet__body > :nth-child(1) { animation-delay: .05s; } .kd-sheet__body > :nth-child(2) { animation-delay: .08s; }
.kd-sheet__body > :nth-child(3) { animation-delay: .11s; } .kd-sheet__body > :nth-child(4) { animation-delay: .14s; }
.kd-sheet__body > :nth-child(5) { animation-delay: .17s; } .kd-sheet__body > :nth-child(6) { animation-delay: .2s; }
.kd-sheet__body > :nth-child(n+7) { animation-delay: .23s; }
.kd-sheet__foot { animation: kd-sheet-row .46s var(--kd-ease) .24s both; }
@keyframes kd-sheet-dim { from { opacity: 0; } }
@keyframes kd-sheet-drop { from { clip-path: inset(0 0 100% 0 round 0 0 22px 22px); transform: translateY(-8px); } to { clip-path: inset(0 0 0 0 round 0 0 22px 22px); transform: none; } }
@keyframes kd-sheet-trace { from { transform: scaleX(0); } }
@keyframes kd-sheet-row { from { opacity: 0; transform: translateY(10px); } }
/* closing is quicker than opening */
.kd-sheet.is-closing { animation: kd-sheet-out .2s ease both; pointer-events: none; }
.kd-sheet.is-closing .kd-sheet__panel { animation: kd-sheet-lift .2s cubic-bezier(.4, 0, 1, 1) both; }
.kd-sheet.is-closing .kd-sheet__panel::before, .kd-sheet.is-closing .kd-sheet__body > *, .kd-sheet.is-closing .kd-sheet__foot { animation: none; }
@keyframes kd-sheet-out { to { opacity: 0; } }
@keyframes kd-sheet-lift { to { clip-path: inset(0 0 100% 0 round 0 0 22px 22px); transform: translateY(-6px); } }

.kd-acc { border-bottom: 1px solid var(--kd-line); }
.kd-acc summary, .kd-sheet__link {
  list-style: none; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 10px; border-radius: 10px; cursor: pointer; text-decoration: none;
  font: 700 1.08rem/1 var(--kd-cond); letter-spacing: .04em; text-transform: uppercase; color: var(--kd-ink);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.kd-acc summary::-webkit-details-marker { display: none; }
.kd-acc summary .kd-g--chev { margin-left: auto; width: 18px; height: 18px; color: var(--kd-ink-dimmer); }
.kd-acc[open] summary .kd-g--chev { transform: rotate(180deg); }
/* the group that holds this page carries the lamp, as the desktop trigger does */
.kd-acc.is-current summary span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 9px; vertical-align: middle; border-radius: 50%; background: var(--kd-amber-led); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.kd-acc__list { display: grid; gap: 2px; padding: 0 0 12px; }
.kd-acc__list a { display: grid; gap: 3px; align-content: center; min-height: 48px; padding: 8px 10px; border-radius: 10px; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .16s; }
.kd-acc__list a b { font: 600 .98rem/1.25 var(--kd-sans); color: var(--kd-ink); }
.kd-acc__list a small { font: 400 .86rem/1.35 var(--kd-sans); color: var(--kd-ink-dim); }
.kd-acc__list a:active, .kd-sheet__link:active, .kd-acc summary:active { background: var(--kd-elevated); }
.kd-acc__list a[aria-current="page"] { background: var(--kd-elevated); }
.kd-acc__list a[aria-current="page"] b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: middle; border-radius: 50%; background: var(--kd-amber-led); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.kd-sheet__link { border-bottom: 1px solid var(--kd-line); }
.kd-sheet__link:last-child { border-bottom: 0; }
.kd-sheet__link[aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kd-amber-led); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* a group opens by growing, where the browser can animate to an automatic height */
@supports (interpolate-size: allow-keywords) {
  .kd-sheet { interpolate-size: allow-keywords; }
  .kd-acc::details-content { height: 0; overflow: clip; transition: height .36s var(--kd-ease), content-visibility .36s allow-discrete; }
  .kd-acc[open]::details-content { height: auto; }
}
.kd-sheet__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px var(--kd-gutter) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kd-line); background: var(--kd-ground); }
.kd-sheet__foot .kd-key { min-height: 48px; white-space: nowrap; }
@media (max-width: 370px) { .kd-sheet__foot { grid-template-columns: minmax(0, 1fr); } }
/* a real close control for a screen reader or a keyboard; sighted touch users have the key and the dimmed page */
.kd-sheet__close { position: absolute; right: 10px; bottom: 10px; z-index: 3; min-height: 44px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--kd-line-strong); background: var(--kd-panel); font: 600 .86rem/1 var(--kd-sans); color: var(--kd-ink); cursor: pointer; }
.kd-sheet__close:not(:focus-visible) { width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }

/* ---------- footer ---------- */
.kd-foot { padding: clamp(40px, 6vw, 80px) var(--kd-gutter) 0; font-family: var(--kd-sans); color: var(--kd-ink); background: var(--kd-ground); border-top: 1px solid var(--kd-line); }
.kd-foot__board {
  position: relative; max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(240px, 1fr) 3fr; gap: clamp(28px, 4vw, 64px);
  padding: clamp(26px, 3.4vw, 44px); border-radius: 22px; background: var(--kd-panel) ; border: 1px solid var(--kd-line); box-shadow: var(--kd-shadow);
  overflow: hidden;
}
.kd-foot__board::before { content: ""; position: absolute; inset: 0; background: url(/assets/art/board-lines.svg) right bottom / 900px auto no-repeat; opacity: .28; pointer-events: none; }
.kd-screw { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--kd-elevated); border: 1px solid var(--kd-line-strong); box-shadow: inset 0 1px 1px rgba(20,22,26,.12); }
.kd-screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4.5px; height: 1px; background: var(--kd-line-strong); transform: rotate(35deg); }
.kd-screw--tl { left: 14px; top: 14px; } .kd-screw--tr { right: 14px; top: 14px; } .kd-screw--bl { left: 14px; bottom: 14px; } .kd-screw--br { right: 14px; bottom: 14px; }
.kd-foot__brand { position: relative; display: flex; flex-direction: column; gap: 14px; }
.kd-foot__brand p { font: 400 .92rem/1.55 var(--kd-sans); color: var(--kd-ink-dim); max-width: 34ch; }
.kd-lcdchip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 12px; border-radius: 8px; background: #1c1f24; color: #f0a340 !important; font: 500 .74rem/1 var(--kd-mono) !important; letter-spacing: .08em; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.kd-lcdchip__led { width: 7px; height: 7px; border-radius: 50%; background: var(--kd-amber-led); animation: kd-blink 2.4s steps(1) infinite; }
@keyframes kd-blink { 0%, 86% { opacity: 1; } 87%, 100% { opacity: .25; } }
.kd-foot__cols { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.kd-foot__col summary { list-style: none; font: 600 .76rem/1 var(--kd-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--kd-ink-dimmer); margin-bottom: 14px; pointer-events: none; }
.kd-foot__col summary::-webkit-details-marker { display: none; }
.kd-foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.kd-foot__col a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 32px; font: 400 .9rem/1.3 var(--kd-sans); color: var(--kd-ink-dim); text-decoration: none; transition: color .2s, transform .25s var(--kd-ease); }
.kd-foot__col a:hover { color: var(--kd-ink); transform: translateX(2px); }
.kd-foot__strip { max-width: 1360px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 22px 4px calc(26px + env(safe-area-inset-bottom)); font: 400 .82rem/1.5 var(--kd-sans); color: var(--kd-ink-dimmer); }
.kd-foot__strip p { margin: 0; }
.kd-foot__legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.kd-foot__strip .kd-lcdchip { align-self: auto; white-space: nowrap; }

/* focus, shared */
.kd-nav :focus-visible, .kd-foot :focus-visible, .kd-sheet :focus-visible { outline: 2px solid var(--kd-focus); outline-offset: 2px; border-radius: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .kd-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 1080px) {
  .kd-menu__trigger, .kd-menu__link { padding: 0 9px; font-size: .88rem; }
  .kd-nav__signin { display: none; }
  .kd-mega__inner { grid-template-columns: 1fr 1fr; }
  .kd-mega__feature { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .kd-mega__feature .kd-mega__art { display: none; }
}
@media (max-width: 900px) {
  .kd-menu { display: none; }
  .kd-burger { display: inline-flex; }
  .kd-nav__actions { gap: 8px; }
  .kd-foot__board { grid-template-columns: 1fr; }
  .kd-foot__cols { grid-template-columns: 1fr; gap: 0; }
  .kd-foot__col { border-top: 1px solid var(--kd-line); }
  .kd-foot__col summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0; font-size: .86rem; color: var(--kd-ink); }
  .kd-foot__col summary::after { content: "+"; font: 400 1.3rem/1 var(--kd-mono); color: var(--kd-ink-dimmer); }
  .kd-foot__col[open] summary::after { content: "–"; }
  .kd-foot__col ul { padding-bottom: 12px; }
  .kd-foot__col a { min-height: 44px; }
}
@media (max-width: 420px) {
  .kd-key--nav { padding: 0 13px; font-size: .84rem; }
  .kd-key--nav .kd-key__led { display: none; }
  .kd-brand__word { font-size: 1.12rem; }
}
/* the bar must fit at 320: the key never wraps and gives up width before the page does */
.kd-key--nav { white-space: nowrap; flex-shrink: 1; min-width: 0; }
.kd-nav__bar { min-width: 0; }
@media (max-width: 359px) {
  .kd-nav__bar { gap: 8px; padding: 0 12px; }
  .kd-key--nav { padding: 0 10px; font-size: .8rem; }
  .kd-brand__mark { width: 22px; height: 22px; }
  .kd-brand__word { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kd-mega__inner, .kd-mega__inner::before, .kd-mega__link, .kd-mega__trace::after, .kd-lcdchip__led { animation: none !important; opacity: 1; }
  .kd-brand__mark, .kd-key, .kd-mega__feature, .kd-foot__col a { transition: none; }
}
.kd-nav .kd-key, .kd-sheet .kd-key { min-height: 44px; }

.kd-foot__na { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 400 .9rem/1.3 var(--kd-sans); color: var(--kd-ink-dimmer); }
@media (max-width: 900px) { .kd-foot__na { min-height: 44px; } }

/* the primary key carries the full label where the bar has room, a short one where it does not */
.kd-key__short { display: none; }
@media (max-width: 1240px) { .kd-key--nav .kd-key__long { display: none; } .kd-key--nav .kd-key__short { display: inline; } }
@media (max-width: 1160px) { .kd-menu__trigger, .kd-menu__link { padding: 0 8px; font-size: .88rem; } }
/* unbuilt entries in the menu and the sheet: visible, never a link */
.kd-mega__link--na { cursor: default; opacity: .72; }
.kd-mega__link--na:hover { background: none; }
.kd-mega__link--na small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kd-sheet__na { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 10px; font: 500 .98rem/1.2 var(--kd-sans); color: var(--kd-ink-dimmer); }
.kd-mega__label--sub { margin-top: 10px; }
/* the demo key sits beside the primary key: same height, ghost face */
.kd-key--demo { margin-right: 2px; }
@media (max-width: 1240px) { .kd-nav .kd-key--demo .kd-key__long { display: none; } .kd-key--demo .kd-key__short { display: inline; } }
@media (max-width: 420px) { .kd-nav .kd-nav__actions .kd-key--demo { display: none; } }
.kd-nav .kd-sr, .kd-sheet .kd-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* ---------- the bar on a phone ---------- */
@media (max-width: 900px) {
  /* the primary key keeps its travel edge but drops the soft shadow, which smeared across the bar's hairline */
  .kd-nav .kd-key--nav { box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 3px 0 #000; }
  .kd-nav .kd-key--nav:active { box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 0 0 #000; }
  /* reading down, the bar slides away; any scroll back up returns it (site.js sets .is-away) */
  header.kd-nav { transition: transform .34s var(--kd-ease), border-color .3s, box-shadow .3s, background .3s; }
  header.kd-nav.is-away { transform: translateY(-101%); box-shadow: none; }
}
@media (max-width: 359px) { .kd-burger { padding: 0 12px; } .kd-burger__label { display: none; } }

/* ---------- where you are in the page: an amber trace along the bar's lower edge ---------- */
@supports (animation-timeline: scroll()) {
  header.kd-nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: var(--kd-amber); transform-origin: left center; transform: scaleX(0);
    animation: kd-progress linear both; animation-timeline: scroll(root block);
  }
  @keyframes kd-progress { to { transform: scaleX(1); } }
}

/* ---------- page to page ----------
   Where the browser supports cross-document view transitions, a link fades the old page
   out and the new one up. The bar is named so it holds still through the change. */
@view-transition { navigation: auto; }
header.kd-nav { view-transition-name: kd-bar; }
::view-transition-old(root) { animation: kd-page-out .16s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: kd-page-in .34s cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-group(kd-bar) { animation-duration: .2s; }
@keyframes kd-page-out { to { opacity: 0; } }
@keyframes kd-page-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  /* a menu still needs to arrive and leave; it does so with a short fade and no travel */
  .kd-sheet, .kd-sheet.is-closing { animation-duration: .12s; }
  .kd-sheet__panel, .kd-sheet.is-closing .kd-sheet__panel, .kd-sheet__panel::before, .kd-sheet__body > *, .kd-sheet__foot { animation: none; }
  .kd-burger, .kd-burger__bars i, header.kd-nav { transition: none; }
  header.kd-nav.is-away { transform: none; }
  .kd-acc::details-content { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none; }
}

/* ---------- arrivals (site.js marks only what starts below the first screen) ----------
   One curve, four kinds. Each returns to an ordinary element 1.4s after it lands. */
.kd-rv { transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1), clip-path .8s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--kd-rv-d, 0ms); }
.kd-rv--seat:not(.is-in) { opacity: 0; transform: translateY(22px) scale(.985); }                 /* a part seats into the board */
/* (a fully clipped box never reports as on screen, so the clipped kinds keep a sliver and hide it with opacity) */
.kd-rv--line:not(.is-in) { opacity: 0; clip-path: inset(0 0 96% 0); transform: translateY(.4em); } /* a heading rises out from behind its baseline */
.kd-rv--line.is-in { clip-path: inset(-.2em -.1em -.25em -.1em); }
.kd-rv--line, .kd-rv--scan { transition-duration: .18s, .8s, .8s; }
.kd-rv--rise:not(.is-in) { opacity: 0; transform: translateY(14px); }
.kd-rv--rise { transition-delay: .08s; }
.kd-rv--scan:not(.is-in) { opacity: 0; clip-path: inset(0 0 96% 0 round 14px); }                  /* an LCD scans in from its top edge */
.kd-rv--scan.is-in { clip-path: inset(0 0 0 0 round 14px); }
.kd-rv--list:not(.is-in) { opacity: 0; transform: translateX(-12px); }                            /* rows follow one another */
@media print { .kd-rv { opacity: 1 !important; transform: none !important; clip-path: none !important; } }

.kd-foot__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kd-foot__legal a:hover { color: var(--kd-ink); }