@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: auto; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  button, input, select, textarea { font: inherit; }
  fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  img, svg, canvas { display: block; max-width: 100%; }
  button, a { -webkit-tap-highlight-color: transparent; }
}

@layer base {
  :root {
    color-scheme: dark;
    --ink: #080a0b;
    --ink-soft: #0d1012;
    --ink-raised: #14181a;
    --paper: #f1efe7;
    --paper-soft: #d4d2ca;
    --muted: #8b9294;
    --line: rgba(241, 239, 231, 0.14);
    --line-strong: rgba(241, 239, 231, 0.28);
    --signal: #c7ff5e;
    --signal-ink: #172000;
    --danger: #ff8d78;
    --header-height: 74px;
    --max: 1240px;
    --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  html { background: var(--ink); }
  html.matrix-remold-pending::before {
    content: "";
    position: fixed;
    z-index: 2147483646;
    inset: 0;
    background: var(--ink);
    pointer-events: none;
  }
  body {
    min-width: 320px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--signal); color: var(--signal-ink); }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  code, pre, kbd { font-family: var(--mono); }
  :focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

  .matrix-remold-active { cursor: progress; }
  .matrix-remold-active .matrix-remold-target {
    inline-size: var(--matrix-remold-width) !important;
    min-inline-size: var(--matrix-remold-width) !important;
    max-inline-size: var(--matrix-remold-width) !important;
    block-size: var(--matrix-remold-height) !important;
    min-block-size: var(--matrix-remold-height) !important;
    max-block-size: var(--matrix-remold-height) !important;
    overflow: hidden !important;
    contain: paint;
    text-shadow: 0 0 9px rgba(199, 255, 94, 0.28);
  }
  .matrix-remold-active a,
  .matrix-remold-active button,
  .matrix-remold-active input,
  .matrix-remold-active textarea,
  .matrix-remold-active select { pointer-events: none; }
  .matrix-remold-layer {
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    width: 100vw;
    height: 100svh;
    max-width: none;
    pointer-events: none;
  }
  .matrix-region-remold {
    position: relative;
    isolation: isolate;
    contain: paint;
  }
  .matrix-region-remold::after {
    content: "01 A7 E3 5C  VOIDED  7F 00 9A";
    position: absolute;
    z-index: 20;
    inset: -24px -32px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
      repeating-linear-gradient(0deg, transparent 0 17px, rgba(199,255,94,.07) 18px),
      radial-gradient(ellipse at 48% 50%, rgba(199,255,94,.13), rgba(8,10,11,.1) 42%, transparent 78%);
    color: rgba(199,255,94,.55);
    font: 600 clamp(.58rem,1.1vw,.78rem) var(--mono);
    letter-spacing: clamp(.35rem,2vw,1.4rem);
    text-shadow: 0 0 12px rgba(199,255,94,.42);
    opacity: .74;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 15%, rgba(0,0,0,.9) 44%, transparent 86%);
    animation: region-remold-scan 165ms steps(4,end) both;
  }
  .matrix-region-remold--incoming::after { animation-direction: reverse; }
  @keyframes region-remold-scan {
    from { opacity: .12; transform: translateY(-3px); filter: blur(1px); }
    55% { opacity: .78; transform: translateY(2px); filter: none; }
    to { opacity: .18; transform: translateY(0); filter: blur(.4px); }
  }

  @media (prefers-reduced-motion: reduce) {
    html.matrix-remold-pending::before { display: none; }
  }

  h1, h2, h3 {
    font-weight: 560;
    letter-spacing: -0.045em;
    line-height: 1.02;
    text-wrap: balance;
  }

  h1 { font-size: clamp(4.2rem, 11.5vw, 10.7rem); }
  h2 { font-size: clamp(2.8rem, 6vw, 6.4rem); }
  h3 { font-size: clamp(1.55rem, 2.5vw, 2.6rem); }

  p { color: var(--paper-soft); text-wrap: pretty; }
}

@layer components {
  .skip-link {
    position: fixed;
    z-index: 200;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    background: var(--signal);
    color: var(--signal-ink);
    transform: translateY(-160%);
  }
  .skip-link:focus { transform: translateY(0); }

  .site-header {
    position: relative;
    z-index: 50;
    height: var(--header-height);
    border-bottom: 1px solid var(--line);
    background: rgba(8, 10, 11, 0.88);
    backdrop-filter: blur(18px);
  }
  .site-header.is-overlay {
    position: absolute;
    inset: 0 0 auto;
    background: transparent;
  }
  .site-header__inner {
    width: min(100% - 40px, var(--max));
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 32px;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 760;
    letter-spacing: 0.12em;
  }
  .brand__mark {
    width: 21px;
    height: 25px;
    clip-path: polygon(0 0, 30% 0, 50% 68%, 70% 0, 100% 0, 66% 100%, 34% 100%);
    background: var(--signal);
  }
  .site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
    color: var(--paper-soft);
    font-size: 0.91rem;
  }
  .site-nav a { transition: color 160ms ease; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--paper); }
  .site-nav a[aria-current="page"]::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 5px;
    background: var(--signal);
  }
  .header-search, .menu-toggle {
    border: 0;
    background: none;
    cursor: pointer;
  }
  .header-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
  }
  .header-search kbd { color: var(--paper-soft); }
  .menu-toggle { display: none; margin-left: auto; padding: 8px; }

  .button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border: 1px solid var(--line-strong);
    color: var(--paper);
    font-size: 0.91rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }
  .button:hover { border-color: var(--paper); transform: translateY(-2px); }
  .button--signal { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
  .button--signal:hover { background: #ddff9d; border-color: #ddff9d; }
  .button--quiet { border-color: transparent; padding-inline: 4px; }
  .button--quiet:hover { border-color: transparent; color: var(--signal); }
  .arrow { transition: transform 180ms ease; }
  .button:hover .arrow, .text-link:hover .arrow { transform: translateX(4px); }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--signal); }
  .signal-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 18px rgba(199, 255, 94, 0.85);
  }

  .hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: radial-gradient(circle at 72% 45%, rgba(199, 255, 94, 0.075), transparent 30%), var(--ink);
  }
  .hero__inner {
    width: min(100% - 40px, var(--max));
    min-height: 100svh;
    margin-inline: auto;
    padding-top: calc(var(--header-height) + clamp(44px, 7vh, 82px));
    padding-bottom: 38px;
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(470px, 1.04fr);
    align-items: center;
    gap: clamp(40px, 7vw, 110px);
  }
  .hero__copy { position: relative; z-index: 2; max-width: 680px; }
  .hero__brand {
    margin-bottom: 20px;
    color: var(--signal);
    font-family: var(--mono);
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    letter-spacing: 0.28em;
  }
  .hero h1 { max-width: 780px; }
  .hero h1 span { display: block; color: var(--muted); }
  .hero__lede { max-width: 560px; margin-top: 22px; font-size: clamp(1.02rem, 1.3vw, 1.2rem); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .hero__status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 30px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.73rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .function-lab { min-width: 0; border: 1px solid var(--line-strong); background: rgba(8,10,11,.84); box-shadow: 0 28px 80px rgba(0,0,0,.24); }
  .function-lab__header, .function-lab__key, .function-lab__actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .function-lab__header { padding: 17px 20px; border-bottom: 1px solid var(--line); }
  .function-lab__header h2 { margin-top: 5px; font-size: clamp(1.7rem, 2.7vw, 2.5rem); letter-spacing: -.035em; }
  .lab-kicker, .lab-state, .function-lab__key span, .lab-field > span, .lab-operation legend, .lab-select span, .lab-note { color: var(--muted); font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
  .lab-state { color: var(--signal); white-space: nowrap; }
  .function-lab__key { padding: 12px 20px; border-bottom: 1px solid var(--line); }
  .function-lab__key div { min-width: 0; }
  .function-lab__key span, .function-lab__key strong { display: block; }
  .function-lab__key strong { margin-top: 3px; color: var(--paper); font-family: var(--mono); font-size: .76rem; }
  .lab-button { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--paper); font-family: var(--mono); font-size: .7rem; cursor: pointer; }
  .lab-button:hover { border-color: var(--signal); color: var(--signal); }
  .lab-field { display: block; padding: 14px 20px 10px; }
  .lab-field > span { display: block; margin-bottom: 8px; }
  .lab-field textarea { width: 100%; resize: vertical; min-height: 74px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--ink-soft); color: var(--paper); line-height: 1.45; }
  .lab-operation { padding: 0 20px; }
  .lab-operation legend { margin-bottom: 8px; }
  .lab-segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
  .lab-segmented button { min-width: 0; min-height: 40px; padding: 0 8px; border: 1px solid var(--line); border-right: 0; background: transparent; color: var(--muted); font-family: var(--mono); font-size: .66rem; cursor: pointer; }
  .lab-segmented button:last-child { border-right: 1px solid var(--line); }
  .lab-segmented button[aria-pressed="true"] { background: rgba(199,255,94,.09); color: var(--signal); }
  .lab-invocation { margin: 12px 20px 0; border: 1px solid var(--line); background: #060809; }
  .lab-invocation__header, .lab-raw__header { min-height: 30px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .61rem; letter-spacing: .07em; text-transform: uppercase; }
  .lab-invocation pre, .lab-raw pre { max-width: 100%; margin: 0; overflow: auto; }
  .lab-invocation code, .lab-raw code { display: block; min-width: max-content; padding: 10px 11px; color: var(--paper-soft); font-family: var(--mono); font-size: .66rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
  .lab-invocation code { max-height: 330px; color: #cce69b; }
  .lab-raw { margin: 0 20px 12px; border: 1px solid var(--line); background: #060809; }
  .lab-raw[hidden] { display: none; }
  .lab-raw--key { margin-top: 12px; }
  .lab-raw--artifact { margin-top: 12px; }
  .lab-raw__header button { border: 0; background: transparent; color: var(--signal); font: inherit; cursor: pointer; }
  .lab-raw code { max-height: 104px; color: var(--paper); }
  .function-lab__actions { padding: 12px 20px; }
  .lab-select { display: flex; align-items: center; gap: 10px; }
  .lab-select select { min-height: 38px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 0; background: var(--ink-soft); color: var(--paper); font-family: var(--mono); font-size: .72rem; }
  .lab-select select:disabled { opacity: .45; }
  .function-lab__actions .button { min-height: 40px; }
  .lab-output { min-height: 86px; display: grid; gap: 4px; padding: 13px 20px; border-block: 1px solid var(--line); background: #060809; font-family: var(--mono); font-size: .7rem; }
  .lab-output > strong { color: var(--signal); }
  .lab-output > span { min-width: 0; color: var(--muted); }
  .lab-output > span:has(b) { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 10px; }
  .lab-output b { color: var(--paper-soft); font-weight: 500; }
  .lab-output code { min-width: 0; overflow-wrap: anywhere; color: var(--paper); }
  .lab-note { padding: 10px 20px 12px; line-height: 1.4; text-transform: none; }

  .section { padding: clamp(90px, 12vw, 170px) 20px; border-bottom: 1px solid var(--line); }
  .section__inner { width: min(100%, var(--max)); margin-inline: auto; }
  .section__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 470px); gap: 60px; align-items: end; }
  .section__intro p { font-size: 1.08rem; }
  .section__title { max-width: 880px; margin-top: 18px; }
  .section--light { background: var(--paper); color: var(--ink); }
  .section--light p, .section--light .eyebrow { color: #535858; }
  .section--light .eyebrow::before { background: #536f16; }
  .section--signal { background: var(--signal); color: var(--signal-ink); }
  .section--signal p { color: #2f3c12; }

  .path-switcher { margin-top: 76px; display: grid; grid-template-columns: 270px 1fr; border-top: 1px solid var(--line); }
  .path-tabs { border-right: 1px solid var(--line); }
  .path-tab {
    width: 100%;
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
  }
  .path-tab:hover, .path-tab[aria-selected="true"] { color: var(--paper); }
  .path-tab[aria-selected="true"]::after { content: "↗"; color: var(--signal); }
  .path-tab strong { display: block; color: currentColor; font-size: 1.08rem; }
  .path-tab small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 0.69rem; }
  .path-output { min-width: 0; padding-left: clamp(28px, 5vw, 70px); }
  .path-summary { display: flex; justify-content: space-between; gap: 40px; margin: 28px 0; }
  .path-summary p { max-width: 560px; }
  .package-name { color: var(--signal); font-family: var(--mono); font-size: 0.84rem; }

  .code-window { position: relative; overflow: hidden; border: 1px solid var(--line); background: #090c0d; }
  .code-window__bar {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 18px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.7rem;
  }
  .copy-button {
    padding: 6px 9px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--paper-soft);
    font-family: var(--mono);
    font-size: 0.68rem;
    cursor: pointer;
  }
  .copy-button:hover { border-color: var(--signal); color: var(--signal); }
  .code-window pre { overflow-x: hidden; overflow-y: auto; padding: 24px; font-size: 0.83rem; line-height: 1.72; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
  .code-window code { color: #e7e5de; white-space: inherit; overflow-wrap: inherit; }
  .tok-key { color: #c7ff5e; }
  .tok-str { color: #f6bd73; }
  .tok-com { color: #697275; }
  .tok-fn { color: #9ac7ff; }

  .pipeline { margin-top: 90px; border-top: 1px solid var(--line-strong); }
  .pipeline__row {
    min-height: 150px;
    display: grid;
    grid-template-columns: 90px minmax(180px, .7fr) minmax(280px, 1.3fr) 42px;
    gap: 28px;
    align-items: center;
    border-bottom: 1px solid var(--line-strong);
    transition: padding 200ms ease, background 200ms ease;
  }
  .pipeline__row:hover { padding-inline: 20px; background: rgba(8,10,11,.035); }
  .pipeline__index { font-family: var(--mono); color: #747b79; }
  .pipeline__row h3 { font-size: clamp(1.5rem, 2.5vw, 2.6rem); }
  .pipeline__row p { max-width: 580px; }
  .pipeline__glyph { font-size: 1.4rem; color: #536f16; }

  .preset-line { margin-top: 72px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
  .preset {
    min-height: 340px;
    padding: 34px 30px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .preset:last-child { border-right: 0; }
  .preset__name { font-family: var(--mono); color: var(--signal); font-size: 0.78rem; }
  .preset h3 { margin-top: auto; }
  .preset p { max-width: 300px; }

  .recovery-spotlight { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 9vw, 130px); align-items: center; }
  .recovery-copy h2 { margin: 20px 0 28px; }
  .recovery-copy p { max-width: 550px; }
  .recovery-facts { margin: 36px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
  .recovery-fact { padding: 22px; background: var(--ink); }
  .recovery-fact strong { display: block; font-family: var(--mono); color: var(--signal); font-size: 1.2rem; }
  .recovery-fact span { color: var(--muted); font-size: 0.8rem; }
  .deck-visual { position: relative; min-height: 620px; }
  .deck-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(120px, 14vw, 190px);
    aspect-ratio: .7;
    padding: 16px;
    border: 1px solid var(--line-strong);
    background: var(--ink-raised);
    font-family: var(--mono);
    transform-origin: 50% 120%;
    transition: transform 500ms cubic-bezier(.22,.9,.27,1), border-color 300ms ease;
  }
  .deck-visual:hover .deck-card { border-color: rgba(199,255,94,.45); }
  .deck-card:nth-child(1) { transform: translate(-90%, -52%) rotate(-18deg); }
  .deck-card:nth-child(2) { transform: translate(-72%, -56%) rotate(-9deg); }
  .deck-card:nth-child(3) { transform: translate(-50%, -59%) rotate(0); border-color: var(--signal); }
  .deck-card:nth-child(4) { transform: translate(-28%, -56%) rotate(9deg); }
  .deck-card:nth-child(5) { transform: translate(-10%, -52%) rotate(18deg); }
  .deck-card span { display: block; color: var(--paper-soft); font-size: 1.4rem; }
  .deck-card small { position: absolute; right: 14px; bottom: 14px; color: var(--muted); writing-mode: vertical-rl; }

  .principles { margin-top: 74px; }
  .principle {
    display: grid;
    grid-template-columns: 64px minmax(220px, .7fr) minmax(300px, 1.3fr);
    gap: 30px;
    padding: 30px 0;
    border-top: 1px solid var(--line);
  }
  .principle:last-child { border-bottom: 1px solid var(--line); }
  .principle__number { color: var(--signal); font-family: var(--mono); }
  .principle h3 { font-size: 1.45rem; letter-spacing: -.03em; }
  .principle p { max-width: 640px; }

  .field-notes { margin-top: 76px; }
  .field-note {
    display: grid;
    grid-template-columns: 170px minmax(280px, 1fr) minmax(240px, .7fr) 36px;
    gap: 30px;
    align-items: center;
    padding: 31px 0;
    border-top: 1px solid var(--line);
  }
  .field-note:last-child { border-bottom: 1px solid var(--line); }
  .field-note__type { color: var(--muted); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; }
  .field-note h3 { font-size: clamp(1.3rem, 2vw, 2rem); }
  .field-note:hover h3 { color: var(--signal); }
  .field-note p { font-size: .9rem; }

  .final-cta { min-height: 68vh; display: flex; align-items: center; }
  .final-cta__inner { width: min(100%, var(--max)); margin-inline: auto; }
  .final-cta h2 { max-width: 920px; }
  .final-cta__actions { display: flex; gap: 16px; margin-top: 42px; }

  .site-footer { padding: 46px 20px; }
  .site-footer__inner { width: min(100%, var(--max)); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; }
  .site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; color: var(--muted); font-size: .82rem; }
  .site-footer__meta { margin-top: 20px; color: #62696b; font-family: var(--mono); font-size: .68rem; }

  .page-hero {
    padding: clamp(85px, 12vw, 160px) 20px clamp(70px, 9vw, 120px);
    border-bottom: 1px solid var(--line);
  }
  .page-hero__inner { width: min(100%, var(--max)); margin-inline: auto; }
  .page-hero h1 { max-width: 1050px; margin-top: 22px; font-size: clamp(3.8rem, 9vw, 9rem); }
  .page-hero p { max-width: 620px; margin-top: 30px; font-size: 1.12rem; }

  .docs-shell {
    width: min(100% - 40px, 1500px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 245px minmax(0, 820px) minmax(190px, 1fr);
    gap: clamp(34px, 5vw, 80px);
    align-items: start;
  }
  .docs-sidebar { position: sticky; top: 28px; padding: 44px 0; max-height: 100vh; overflow: auto; }
  .docs-sidebar__course { display: grid; gap: 7px; margin-bottom: 30px; padding: 14px; border: 1px solid rgba(199,255,94,.34); background: rgba(199,255,94,.055); }
  .docs-sidebar__course span { color: var(--signal); font: .53rem var(--mono); letter-spacing: .08em; }
  .docs-sidebar__course strong { font-size: .82rem; line-height: 1.25; }
  .docs-sidebar__course small { color: var(--muted); font-size: .66rem; }
  .docs-sidebar__course:hover { background: var(--signal); color: var(--signal-ink); }
  .docs-sidebar__course:hover span,.docs-sidebar__course:hover small { color: var(--signal-ink); }
  .docs-sidebar__group { margin-bottom: 30px; }
  .docs-sidebar__label { margin-bottom: 10px; color: #646c6e; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
  .docs-nav-button {
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-left: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
  }
  .docs-nav-button:hover, .docs-nav-button[aria-current="page"] { color: var(--paper); border-left-color: var(--signal); }
  .docs-main { min-width: 0; padding: 70px 0 140px; }
  .docs-guide[hidden] { display: none; }
  .docs-guide__header { padding-bottom: 54px; border-bottom: 1px solid var(--line); }
  .docs-guide__header h1 { margin-top: 18px; font-size: clamp(3.2rem, 7vw, 6rem); }
  .docs-guide__header p { max-width: 650px; margin-top: 24px; font-size: 1.08rem; }
  .dev-mode-brief { display: grid; grid-template-columns: 148px minmax(190px,.75fr) minmax(0,1.25fr); gap: 22px; align-items: start; margin-top: 38px; padding: 20px 0; border-block: 1px solid var(--line); }
  .dev-mode-brief > span { color: var(--signal); font: .58rem var(--mono); letter-spacing: .09em; }
  .dev-mode-brief > strong { color: var(--paper); font-size: .92rem; }
  .dev-mode-brief > p { margin: 0; color: var(--muted); font-size: .8rem; }
  [data-dev-mode="expert"] .docs-guide__header h1 { font-size: clamp(2.8rem,5.6vw,5rem); }
  [data-dev-mode="expert"] .docs-section { padding-block: 42px; }
  [data-dev-mode="expert"] .docs-section h2 { font-size: clamp(1.8rem,3.1vw,2.7rem); }
  .docs-section { padding: 58px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 28px; }
  .docs-section h2 { margin-bottom: 24px; font-size: clamp(2rem, 4vw, 3.2rem); }
  .docs-section h3 { margin: 35px 0 14px; font-size: 1.35rem; letter-spacing: -.025em; }
  .docs-section p + p { margin-top: 16px; }
  .docs-section ul, .docs-section ol { padding-left: 21px; color: var(--paper-soft); }
  .docs-section li + li { margin-top: 8px; }
  .docs-section .code-window { margin-top: 24px; }
  .docs-toc { position: sticky; top: 44px; padding-top: 70px; }
  .docs-toc h2 { margin-bottom: 14px; color: #646c6e; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
  .docs-toc a { display: block; padding: 5px 0; color: var(--muted); font-size: .79rem; }
  .docs-toc a:hover { color: var(--paper); }
  .callout { margin: 28px 0; padding: 20px 22px; border-left: 2px solid var(--signal); background: rgba(199,255,94,.045); }
  .callout strong { display: block; margin-bottom: 5px; color: var(--paper); }
  .callout--danger { border-color: var(--danger); background: rgba(255,141,120,.045); }
  .inline-code { padding: 2px 5px; background: var(--ink-raised); color: var(--signal); font-family: var(--mono); font-size: .86em; }
  .decision-table { width: 100%; border-collapse: collapse; margin-top: 25px; text-align: left; }
  .decision-table th, .decision-table td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .decision-table th { color: var(--muted); font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
  .decision-table td:first-child { color: var(--paper); font-weight: 650; }

  .search-dialog {
    width: min(680px, calc(100% - 28px));
    max-height: min(680px, calc(100svh - 60px));
    padding: 0;
    border: 1px solid var(--line-strong);
    background: #0e1112;
    color: var(--paper);
    box-shadow: 0 28px 100px rgba(0,0,0,.55);
  }
  .search-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }
  .search-form { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
  .search-form input { width: 100%; padding: 22px; border: 0; background: transparent; color: var(--paper); outline: 0; }
  .search-close { margin-right: 15px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
  .search-results { max-height: 500px; overflow: auto; padding: 10px; }
  .search-result { display: block; padding: 15px 14px; border-bottom: 1px solid var(--line); }
  .search-result:hover { background: rgba(199,255,94,.05); }
  .search-result strong { display: block; }
  .search-result span { color: var(--muted); font-size: .78rem; }
  .search-empty { padding: 26px; color: var(--muted); text-align: center; }

  .learn-grid { margin-top: 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
  .learn-panel { min-width: 0; min-height: 520px; padding: clamp(28px, 5vw, 60px); background: var(--ink); }
  .learn-panel h2 { margin: 18px 0 22px; font-size: clamp(2.2rem, 4vw, 4.2rem); }
  .choice-group { margin-top: 34px; }
  .choice-group legend { margin-bottom: 12px; color: var(--muted); font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; }
  .choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .choice-button {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }
  .choice-button:hover, .choice-button[aria-pressed="true"] { border-color: var(--signal); color: var(--paper); }
  .recommendation { display: flex; flex-direction: column; }
  .recommendation__package { color: var(--signal); font-family: var(--mono); font-size: .82rem; }
  .recommendation h3 { margin: 24px 0 16px; font-size: clamp(2rem, 3vw, 3.5rem); }
  .recommendation .code-window { margin-top: auto; }

  .anatomy { position: relative; margin-top: 72px; }
  .anatomy-step {
    min-height: 120px;
    display: grid;
    grid-template-columns: 54px minmax(180px, .6fr) minmax(280px, 1.4fr);
    gap: 28px;
    align-items: center;
    border-top: 1px solid var(--line);
  }
  .anatomy-step:last-child { border-bottom: 1px solid var(--line); }
  .anatomy-step__node { width: 13px; height: 13px; border: 1px solid var(--signal); transform: rotate(45deg); }
  .anatomy-step h3 { font-size: 1.4rem; }
  .anatomy-step p { font-size: .93rem; }

  .preset-lab { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: clamp(36px, 8vw, 110px); margin-top: 70px; }
  .preset-controls button { width: 100%; min-height: 70px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
  .preset-controls button:first-child { border-top: 1px solid var(--line); }
  .preset-controls button[aria-pressed="true"] { color: var(--signal); padding-left: 32px; }
  .preset-output { min-width: 0; }
  .preset-meter { height: 2px; margin: 40px 0; background: var(--line); }
  .preset-meter span { display: block; width: 55%; height: 100%; background: var(--signal); transition: width 400ms ease; }
  .preset-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
  .preset-stat { padding: 20px; background: var(--ink); }
  .preset-stat span { display: block; color: var(--muted); font-size: .72rem; }
  .preset-stat strong { display: block; margin-top: 6px; font-family: var(--mono); }

  .support-layout { width: min(100% - 40px, var(--max)); margin: 80px auto 140px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(400px, 1.2fr); gap: clamp(50px, 9vw, 130px); }
  .support-intro { min-width: 0; position: sticky; top: 40px; align-self: start; }
  .support-intro h2 { margin: 20px 0 24px; }
  .support-form { min-width: 0; border-top: 1px solid var(--line); }
  .support-question { padding: 30px 0; border-bottom: 1px solid var(--line); }
  .support-question label { display: block; margin-bottom: 13px; color: var(--paper); font-weight: 650; }
  .support-question select, .support-question textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--ink-soft);
    color: var(--paper);
  }
  .diagnostic-output { margin-top: 28px; }
  .diagnostic-output .code-window pre { max-height: 450px; }
  .secret-boundary { padding: 24px; border: 1px solid rgba(255,141,120,.46); background: repeating-linear-gradient(-45deg,rgba(255,141,120,.035) 0 9px,transparent 9px 18px); }
  .secret-boundary > span { color: var(--danger); font: .56rem var(--mono); letter-spacing: .1em; }
  .secret-boundary > strong { display: block; margin-top: 10px; color: var(--paper); font-size: 1.28rem; }
  .secret-boundary > div { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
  .secret-boundary p { color: var(--muted); font-size: .74rem; }
  .secret-boundary b { color: var(--paper); }
  .support-evidence { margin-top: 18px; padding: 20px; border: 1px solid var(--line); }
  .support-evidence > span { color: var(--signal); font: .55rem var(--mono); letter-spacing: .09em; }
  .support-evidence ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 24px; margin-top: 14px; padding-left: 18px; color: var(--paper-soft); font-size: .76rem; }
  .support-routes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 54px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .support-routes a { min-height: 230px; display: flex; flex-direction: column; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .support-routes span { color: var(--signal); font: .56rem var(--mono); letter-spacing: .09em; }
  .support-routes strong { margin-top: 22px; font-size: 1.25rem; }
  .support-routes p { margin-top: 14px; color: var(--muted); font-size: .82rem; }
  .support-routes a:hover { background: var(--signal); color: var(--signal-ink); }
  .support-routes a:hover span,.support-routes a:hover p { color: rgba(23,32,0,.72); }

  .support-list { margin-top: 70px; }
  .support-item { display: grid; grid-template-columns: 170px 1fr; gap: 30px; padding: 28px 0; border-top: 1px solid var(--line); }
  .support-item:last-child { border-bottom: 1px solid var(--line); }
  .support-item dt { color: var(--paper); font-weight: 650; }
  .support-item dd { color: var(--paper-soft); }
  .support-item code { color: var(--signal); }
  .section--light .support-item dt { color: #111516; }
  .section--light .support-item dd { color: #444b48; }

  .compat-table { margin-top: 55px; }
  .compat-row { display: grid; grid-template-columns: 1fr .8fr 1.4fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
  .compat-row:last-child { border-bottom: 1px solid var(--line); }
  .compat-status { font-family: var(--mono); font-size: .75rem; color: var(--signal); text-transform: uppercase; }
  .compat-status--muted { color: var(--muted); }

  .status-band { padding: 24px 20px; border-bottom: 1px solid var(--line); background: rgba(199,255,94,.06); }
  .status-band__inner { width: min(100%, var(--max)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .status-band strong { font-family: var(--mono); font-size: .78rem; }
  .status-band p { font-size: .82rem; }

  .not-found { min-height: calc(100svh - var(--header-height)); display: grid; place-items: center; padding: 40px 20px; text-align: center; }
  .not-found__code { color: var(--signal); font-family: var(--mono); font-size: clamp(5rem, 18vw, 13rem); line-height: 1; }
  .not-found h1 { margin: 12px 0 20px; font-size: clamp(2rem, 5vw, 4rem); }

  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* AI-first site surfaces */
  .hero--focused .hero__inner { padding-top: calc(var(--header-height) + clamp(28px, 4vh, 50px)); }
  .hero--focused h1 { max-width: 860px; font-size: clamp(3.5rem, 5vw, 5.5rem); }
  .hero--focused .hero__lede { max-width: 610px; }
  .section--compact { padding-block: clamp(80px, 9vw, 126px); }
  .final-cta--compact { min-height: 52vh; }

  .contract-strip { padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--ink-soft); }
  .contract-strip__inner {
    width: min(100%, var(--max));
    min-height: 76px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .035em;
  }
  .contract-strip__inner strong { color: var(--paper); font-weight: 650; }
  .contract-strip__inner strong:nth-of-type(2) { color: var(--signal); }

  .boundary-grid { margin-top: 68px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid rgba(8,10,11,.2); }
  .boundary-column { min-width: 0; padding: clamp(28px, 5vw, 58px); }
  .boundary-column + .boundary-column { border-left: 1px solid rgba(8,10,11,.2); }
  .boundary-label { color: #3f5f00; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; }
  .boundary-column h3 { margin: 20px 0 30px; font-size: clamp(1.9rem, 3vw, 3rem); }

  .plain-list { list-style: none; }
  .plain-list li { position: relative; padding: 13px 0 13px 24px; border-top: 1px solid currentColor; border-color: rgba(8,10,11,.15); color: #3d4443; }
  .plain-list li:last-child { border-bottom: 1px solid rgba(8,10,11,.15); }
  .plain-list li::before { content: "◇"; position: absolute; left: 0; color: #3f5f00; }
  .plain-list--large li { padding-block: 17px; border-color: var(--line); color: var(--paper-soft); }
  .plain-list--large li:last-child { border-color: var(--line); }
  .plain-list--large li::before { color: var(--signal); }

  .boundary-grid--dark { border-color: var(--line); }
  .boundary-grid--dark .boundary-column + .boundary-column { border-color: var(--line); }
  .boundary-grid--dark .boundary-label, .boundary-grid--dark .plain-list li::before { color: var(--signal); }
  .boundary-grid--dark .plain-list li { border-color: var(--line); color: var(--paper-soft); }
  .boundary-grid--dark .plain-list li:last-child { border-color: var(--line); }

  .deck-lab-section { overflow: hidden; }
  .deck-lab { margin-top: 64px; }
  .deck-lab__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(8,10,11,.22); }
.deck-lab__control { width: min(100%, 820px); display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 7px 16px; }
  .deck-lab__control > span { color: #59605e; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
  .deck-lab__theme-note { grid-column: 2; max-width: 570px; color: #626765; font-size: .78rem; }
.deck-lab__choices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid rgba(8,10,11,.22); border-left: 1px solid rgba(8,10,11,.22); }
.deck-lab__choices button { min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; border-right: 1px solid rgba(8,10,11,.22); border-bottom: 1px solid rgba(8,10,11,.22); background: transparent; color: #555b5a; font-family: var(--mono); font-size: .64rem; text-align: left; cursor: pointer; }
.deck-lab__choices button small { color: #858987; font-size: .52rem; }
.deck-lab__choices button[aria-pressed="true"] { background: var(--ink); color: var(--signal); }
  .deck-lab__actions { display: flex; gap: 10px; }
  .button--dark { min-height: 38px; border-color: var(--ink); background: var(--ink); color: var(--paper); }
  .button--dark:hover { background: #222728; border-color: #222728; }
  .deck-component-host { margin-top: 24px; }
  .deck-component-loading { padding: 32px; border: 1px solid rgba(8,10,11,.2); color: #59605e; }
  .site-recovery-ui { --deck-surface: #fff; --deck-text: #111; --deck-muted: #626665; --deck-border: #c8c8c2; --deck-accent: #31470a; box-sizing: border-box; color: var(--deck-text); font: inherit; }
  .site-recovery-ui *, .site-recovery-ui *::before, .site-recovery-ui *::after { box-sizing: border-box; }
  .site-recovery-ui.voideddev-recovery-inline { width: 100%; }
  .site-recovery-ui.voideddev-recovery-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; overflow: auto; background: rgba(0,0,0,.78); backdrop-filter: blur(5px); }
  .site-recovery-ui .voideddev-recovery-panel { width: min(1120px,100%); max-height: calc(100svh - 36px); overflow: auto; padding: clamp(20px,3.4vw,42px); border: 1px solid var(--deck-border); background: var(--deck-surface); }
  .site-recovery-ui.voideddev-recovery-inline > .voideddev-recovery-panel { max-height: none; }
  .site-recovery-ui .voideddev-recovery-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
  .site-recovery-ui .voideddev-recovery-title { margin: 0; color: var(--deck-text); font-size: clamp(1.8rem,3.4vw,3.2rem); }
  .site-recovery-ui .voideddev-recovery-close { border: 0; background: transparent; color: var(--deck-muted); cursor: pointer; }
  .site-recovery-ui .voideddev-recovery-description, .site-recovery-ui .voideddev-recovery-warning, .site-recovery-ui .voideddev-recovery-hint { max-width: 760px; margin: 12px 0 0; color: var(--deck-muted); line-height: 1.5; }
  .site-recovery-ui .voideddev-recovery-warning { padding: 10px 12px; border-left: 2px solid var(--deck-accent); color: var(--deck-text); font-size: .82rem; font-weight: 600; }
  .site-recovery-ui .voideddev-recovery-hint { font-size: .78rem; }
  .site-recovery-ui .voideddev-recovery-deck-grid { display: grid; grid-template-columns: repeat(13,minmax(44px,1fr)); gap: 7px; margin-top: 24px; }
  .site-recovery-ui .voideddev-recovery-card { position: relative; min-width: 0; aspect-ratio: 5 / 7; display: grid; place-items: center; padding: 6px 3px; border: 1px solid var(--deck-border); border-radius: 4px; background: var(--deck-surface); color: var(--deck-text); cursor: grab; }
  .site-recovery-ui .voideddev-recovery-card[data-voideddev-color="red"] { color: #a21e27; }
  .site-recovery-ui .voideddev-recovery-card-selected { outline: 3px solid var(--deck-accent); outline-offset: 2px; }
  .site-recovery-ui .voideddev-recovery-card-position { position: absolute; top: 3px; left: 4px; color: var(--deck-muted); font-family: var(--mono); font-size: .48rem; }
  .site-recovery-ui .voideddev-recovery-card-rank { font-size: clamp(.8rem,1.35vw,1rem); font-weight: 700; }
  .site-recovery-ui .voideddev-recovery-card-suit { font-size: clamp(.85rem,1.65vw,1.2rem); line-height: 1; }
  .site-recovery-ui .voideddev-recovery-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--deck-border); }
  .site-recovery-ui .voideddev-recovery-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--deck-text); background: transparent; color: var(--deck-text); cursor: pointer; }
  .site-recovery-ui .voideddev-recovery-confirm { background: var(--deck-text); color: var(--deck-surface); }
  .site-recovery-ui .voideddev-recovery-error { min-height: 1.4em; margin: 10px 0 0; color: #a21e27; }

  /* Cutout: an expressive paper spread built with renderCardContent. */
  .site-recovery-ui--editorial { --deck-surface: #f3e8cf; --deck-text: #241d17; --deck-muted: #715e4e; --deck-border: #261e17; --deck-accent: #cf3526; font-family: Georgia,"Times New Roman",serif; }
  .site-recovery-ui--editorial .voideddev-recovery-panel { position: relative; overflow: hidden; border: 0; background: #f3e8cf; box-shadow: inset 0 0 0 1px #261e17, 14px 14px 0 #cf3526; }
  .site-recovery-ui--editorial .voideddev-recovery-panel::before { content: "52"; position: absolute; top: -38px; right: -2px; color: rgba(207,53,38,.13); font-size: clamp(8rem,19vw,18rem); font-weight: 900; line-height: .8; pointer-events: none; }
  .site-recovery-ui--editorial .voideddev-recovery-title { position: relative; max-width: 650px; font-size: clamp(3.2rem,7vw,6.8rem); font-style: italic; line-height: .78; letter-spacing: -.075em; }
  .site-recovery-ui--editorial .voideddev-recovery-description { max-width: 520px; font-family: var(--sans); font-size: .9rem; }
  .site-recovery-ui--editorial .voideddev-recovery-warning { max-width: 520px; padding: 8px 0; border: 0; border-block: 1px solid #cf3526; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
  .site-recovery-ui--editorial .voideddev-recovery-hint { font-family: var(--sans); }
  .site-recovery-ui--editorial .voideddev-recovery-deck-grid { position: relative; gap: 5px; margin-top: 36px; padding: 18px 16px 26px; background: #d8c49e; transform: rotate(-.7deg); box-shadow: inset 0 0 0 1px rgba(38,30,23,.22); }
  .site-recovery-ui--editorial .voideddev-recovery-card { aspect-ratio: 4 / 6; overflow: hidden; padding: 0; border: 1px solid #261e17; border-radius: 0; background: #fffaf0; color: #241d17; box-shadow: 2px 3px 0 rgba(38,30,23,.24); }
  .site-recovery-ui--editorial .voideddev-recovery-card:nth-child(4n+1) { transform: rotate(-1.5deg) translateY(3px); }
  .site-recovery-ui--editorial .voideddev-recovery-card:nth-child(4n+2) { transform: rotate(.9deg) translateY(-2px); }
  .site-recovery-ui--editorial .voideddev-recovery-card:nth-child(4n+3) { transform: rotate(-.4deg) translateY(1px); }
  .site-recovery-ui--editorial .voideddev-recovery-card[data-voideddev-color="red"] { color: #cf3526; }
  .site-recovery-ui--editorial .voideddev-recovery-card:hover { z-index: 3; transform: translateY(-10px) rotate(0) scale(1.08); box-shadow: 6px 10px 0 rgba(38,30,23,.2); }
  .site-recovery-ui--editorial .voideddev-recovery-actions { border-color: rgba(38,30,23,.28); }
  .site-recovery-ui--editorial .voideddev-recovery-button { border: 0; border-bottom: 2px solid #261e17; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; }
  .site-recovery-ui--editorial .voideddev-recovery-confirm { border: 0; background: #cf3526; color: #fffaf0; }

  .deck-card-art { position: absolute; inset: 0; display: block; color: inherit; pointer-events: none; }
  .deck-card-art--editorial { animation: deck-deal 380ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--deck-index,0) * 9ms); }
  .deck-card-art__folio { position: absolute; top: 5px; left: 5px; font-family: var(--mono); font-size: .48rem; }
  .deck-card-art__rank { position: absolute; top: 16%; left: 9%; z-index: 1; font-size: clamp(1.25rem,2.3vw,2rem); line-height: 1; }
  .deck-card-art__suit { position: absolute; right: -7%; bottom: -14%; font-size: clamp(3.5rem,6vw,6.5rem); line-height: 1; opacity: .18; transform: rotate(-12deg); }
  .deck-card-art__name { position: absolute; right: 4px; top: 7px; font-family: var(--mono); font-size: .42rem; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; }

  /* Signal: a bright, dense cipher board. Black suits stay intentionally luminous. */
  .site-recovery-ui--signal { --deck-surface: #030806; --deck-text: #efffe8; --deck-muted: #88a99a; --deck-border: #1c5e42; --deck-accent: #baff58; font-family: var(--mono); }
  .site-recovery-ui--signal .voideddev-recovery-panel { position: relative; overflow: hidden; border: 1px solid #52ffab; background: radial-gradient(circle at 70% 0,rgba(84,255,170,.12),transparent 32%),linear-gradient(rgba(65,255,153,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(65,255,153,.026) 1px,transparent 1px),#030806; background-size: auto,22px 22px,22px 22px,auto; box-shadow: 0 0 0 1px #020302,0 0 42px rgba(82,255,171,.2); }
  .site-recovery-ui--signal .voideddev-recovery-panel::after { content: ""; position: absolute; z-index: 4; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg,transparent,#baff58,transparent); box-shadow: 0 0 18px #52ffab; opacity: .75; pointer-events: none; animation: signal-scan 5s linear infinite; }
  .site-recovery-ui--signal .voideddev-recovery-title { color: #baff58; font-size: clamp(2.2rem,4.8vw,4.6rem); letter-spacing: -.08em; text-transform: uppercase; text-shadow: 0 0 24px rgba(186,255,88,.28); }
  .site-recovery-ui--signal .voideddev-recovery-title::before { content: "ROOT://"; display: block; margin-bottom: 7px; color: #52ffab; font-size: .64rem; letter-spacing: .22em; }
  .site-recovery-ui--signal .voideddev-recovery-warning { border-left-color: #ff6f91; color: #ffd5df; }
  .site-recovery-ui--signal .voideddev-recovery-deck-grid { gap: 4px; padding: 7px; border: 1px solid #174b36; background: rgba(0,12,7,.72); }
  .site-recovery-ui--signal .voideddev-recovery-card { aspect-ratio: 1 / 1.08; overflow: hidden; padding: 0; border: 1px solid #24664a; border-radius: 0; background: linear-gradient(145deg,rgba(58,255,151,.1),transparent 55%),#06110c; color: #efffe8; box-shadow: inset 0 0 14px rgba(82,255,171,.04); }
  .site-recovery-ui--signal .voideddev-recovery-card[data-voideddev-color="black"] { color: #efffe8; }
  .site-recovery-ui--signal .voideddev-recovery-card[data-voideddev-color="red"] { border-color: #73404f; background: linear-gradient(145deg,rgba(255,85,130,.12),transparent 55%),#13090d; color: #ff89a7; }
  .site-recovery-ui--signal .voideddev-recovery-card:hover { z-index: 2; border-color: currentColor; transform: scale(1.08); box-shadow: 0 0 20px color-mix(in srgb,currentColor 38%,transparent),inset 0 0 18px color-mix(in srgb,currentColor 12%,transparent); }
  .site-recovery-ui--signal .voideddev-recovery-card-selected { outline-color: #baff58; box-shadow: 0 0 24px rgba(186,255,88,.65); }
  .site-recovery-ui--signal .voideddev-recovery-actions { border-color: #174b36; }
  .site-recovery-ui--signal .voideddev-recovery-button { border-color: #52ffab; color: #efffe8; font-family: var(--mono); text-transform: uppercase; }
  .site-recovery-ui--signal .voideddev-recovery-confirm { background: #baff58; color: #071006; }
  .deck-card-art--signal { animation: signal-arrive 320ms ease-out both; animation-delay: calc(var(--deck-index,0) * 5ms); }
  .deck-card-art__address { position: absolute; top: 5px; left: 5px; color: currentColor; font-size: clamp(.35rem,.62vw,.52rem); opacity: .72; }
  .deck-card-art__sigil { position: absolute; inset: 14% 0 auto; font-size: clamp(1.5rem,2.7vw,2.6rem); line-height: 1; text-align: center; text-shadow: 0 0 13px currentColor; }
  .deck-card-art__signal-rank { position: absolute; inset: auto 4px 5px; overflow: hidden; font-size: clamp(.35rem,.56vw,.48rem); letter-spacing: .05em; text-align: center; text-overflow: clip; white-space: nowrap; }

  @keyframes deck-deal { from { opacity: 0; transform: translate(42px,-32px) rotate(9deg) scale(.86); } to { opacity: 1; } }
  @keyframes signal-arrive { from { opacity: 0; filter: brightness(3); transform: scale(.72); } to { opacity: 1; filter: none; transform: none; } }
  @keyframes signal-scan { from { transform: translateY(-4px); } to { transform: translateY(760px); } }

  .endpoint-list { margin-top: 68px; border-top: 1px solid var(--line); }
  .endpoint-row {
    min-height: 94px;
    display: grid;
    grid-template-columns: 72px minmax(180px, .72fr) minmax(280px, 1.28fr) 24px;
    gap: 24px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    transition: background 160ms ease, padding 160ms ease;
  }
  .endpoint-row:hover { padding-inline: 16px; background: rgba(199,255,94,.045); }
  .endpoint-row__kind { color: var(--muted); font-family: var(--mono); font-size: .7rem; letter-spacing: .09em; }
  .endpoint-row strong { min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: .91rem; color: var(--paper); }
  .endpoint-row p { font-size: .9rem; }
  .endpoint-row--signal { border-left: 2px solid var(--signal); padding-left: 20px; }
  .endpoint-row--signal .endpoint-row__kind, .endpoint-row--signal strong { color: var(--signal); }
  .agent-resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 44px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .agent-resource-grid a { min-height: 230px; display: flex; flex-direction: column; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .agent-resource-grid span { color: var(--signal); font: .54rem var(--mono); letter-spacing: .09em; }
  .agent-resource-grid strong { margin-top: 20px; font-size: 1.2rem; }
  .agent-resource-grid p { margin-top: 12px; color: var(--muted); font-size: .8rem; }
  .agent-resource-grid code { margin-top: auto; padding-top: 20px; color: var(--paper); font-size: .62rem; }
  .agent-resource-grid a:hover { background: var(--signal); color: var(--signal-ink); }
  .agent-resource-grid a:hover span,.agent-resource-grid a:hover p,.agent-resource-grid a:hover code { color: rgba(23,32,0,.72); }

  .page-hero--utility { padding-bottom: clamp(64px, 8vw, 100px); background: radial-gradient(circle at 80% 28%, rgba(199,255,94,.075), transparent 27%); }
  .page-hero--utility h1 { max-width: 1120px; font-size: clamp(3.7rem, 8.5vw, 8rem); }
  .page-hero--utility .hero__actions { margin-top: 34px; }
  .status-line { display: flex; align-items: center; gap: 10px; margin-top: 32px; color: var(--muted); font-family: var(--mono); font-size: .75rem; text-transform: uppercase; }

  .utility-layout {
    width: min(100% - 40px, var(--max));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 210px minmax(0, 860px);
    gap: clamp(50px, 9vw, 120px);
    align-items: start;
  }
  .utility-layout--single { display: block; }
  .utility-layout--single .utility-content { max-width: 930px; margin-inline: auto; }
  .utility-index { position: sticky; top: 28px; padding: 72px 0; }
  .utility-index__label { display: block; margin-bottom: 16px; color: #646c6e; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; }
  .utility-index a { display: block; padding: 6px 0; color: var(--muted); font-size: .82rem; }
  .utility-index a:hover { color: var(--paper); }
  .utility-content { min-width: 0; }
  .utility-section { padding: 76px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
  .utility-section h2 { max-width: 830px; margin: 18px 0 28px; font-size: clamp(2.3rem, 5vw, 4.7rem); }
  .utility-section > p { max-width: 780px; }
  .utility-section > p + p, .utility-section .machine-facts + p { margin-top: 28px; }
  .utility-section .code-window { margin-top: 28px; }

  .core-contract { margin-top: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 22px; border: 1px solid var(--line); background: var(--ink-soft); font-family: var(--mono); font-size: .78rem; }
  .core-contract code { color: var(--muted); }
  .core-contract strong { color: var(--signal); }
  .core-contract span { color: #5e6769; }

  .fact-list { margin-top: 34px; }
  .fact-list > div { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 28px; padding: 24px 0; border-top: 1px solid var(--line); }
  .fact-list > div:last-child { border-bottom: 1px solid var(--line); }
  .fact-list dt { color: var(--paper); font-weight: 650; }
  .fact-list dd { min-width: 0; color: var(--paper-soft); overflow-wrap: anywhere; }
  .fact-list dd code { color: var(--signal); }
  .fact-list--compact > div { grid-template-columns: 130px minmax(0, 1fr); padding: 18px 0; }

  .machine-facts { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
  .machine-fact { min-width: 0; padding: 23px; background: var(--ink-soft); }
  .machine-fact strong { display: block; color: var(--signal); font-family: var(--mono); font-size: 1rem; }
  .machine-fact span { display: block; margin-top: 5px; color: var(--muted); font-size: .8rem; }

  .endpoint-list--utility { margin-top: 34px; }
  .endpoint-list--utility .endpoint-row { grid-template-columns: 60px minmax(180px, .8fr) minmax(220px, 1.2fr) 20px; min-height: 78px; }

  .mcp-tool-list { margin-top: 36px; border-top: 1px solid var(--line); }
  .mcp-tool-list > div { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(280px, 1.25fr); gap: 30px; padding: 22px 0; border-bottom: 1px solid var(--line); }
  .mcp-tool-list code { color: var(--signal); overflow-wrap: anywhere; }
  .mcp-tool-list p { font-size: .9rem; }

  /* Signal is decoration on light surfaces, never body-text color. */
  .section--light .principle__number,
  .section--light .support-item code,
  .section--light .text-signal,
  .section--light .inline-code,
  .section--light .package-name { color: #3f5f00; }
  .section--light .button { color: var(--ink); border-color: rgba(8,10,11,.35); }
  .section--light .button--dark { color: var(--paper); border-color: var(--ink); }
  .section--light .button:hover { border-color: var(--ink); }
  .section--signal .eyebrow { color: #344600; }
  .section--signal .eyebrow::before { background: #344600; }
  .section--signal .button { color: var(--signal-ink); border-color: rgba(23,32,0,.42); }
}

@media (min-width: 781px) {
  .function-lab { max-height: calc(100svh - 102px); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
  .function-lab__header { position: sticky; z-index: 5; top: 0; background: rgba(8,10,11,.96); backdrop-filter: blur(12px); }
}

@layer utilities {
  .text-signal { color: var(--signal); }
  .text-link { display: inline-flex; gap: 8px; align-items: center; color: var(--paper); font-weight: 650; }
  .mt-24 { margin-top: 24px; }
  .mt-40 { margin-top: 40px; }
}

@media (max-width: 1050px) {
  .hero__inner { grid-template-columns: minmax(0,.82fr) minmax(440px,1fr); gap: 42px; }
  .docs-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .docs-toc { display: none; }
  .recovery-spotlight { grid-template-columns: 1fr 1fr; }
  .utility-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 54px; }
}

@media (max-width: 780px) {
  :root { --header-height: 66px; }
  .site-header__inner { width: min(100% - 28px, var(--max)); }
  .menu-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    display: none;
    padding: 24px 20px 30px;
    border-bottom: 1px solid var(--line);
    background: rgba(8,10,11,.97);
    flex-direction: column;
    align-items: flex-start;
  }
  .site-nav.is-open { display: flex; }
  .header-search { margin: 0; }
  .hero__inner { min-height: auto; padding-top: 150px; grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(4rem, 19vw, 6.5rem); }
  .function-lab { margin-top: 28px; }
  .section__intro, .recovery-spotlight, .support-layout { grid-template-columns: minmax(0, 1fr); }
  .path-switcher, .preset-lab { grid-template-columns: minmax(0, 1fr); }
  .path-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-right: 0; }
  .path-tab { min-height: 76px; padding-right: 8px; }
  .path-tab small { display: none; }
  .path-output { padding-left: 0; }
  .pipeline__row { grid-template-columns: 45px 1fr; padding: 28px 0; gap: 12px 20px; }
  .pipeline__row p { grid-column: 2; }
  .pipeline__glyph { display: none; }
  .preset-line, .learn-grid { grid-template-columns: minmax(0, 1fr); }
  .preset { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
  .deck-visual { min-height: 500px; }
  .principle { grid-template-columns: 44px 1fr; }
  .principle p { grid-column: 2; }
  .field-note { grid-template-columns: 1fr 34px; gap: 10px 20px; }
  .field-note__type, .field-note p { grid-column: 1; }
  .field-note .arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .docs-shell { width: min(100% - 28px, 900px); display: block; }
  .docs-sidebar { position: relative; top: 0; max-height: none; display: flex; gap: 8px; overflow-x: auto; padding: 24px 0 0; }
  .docs-sidebar__course { flex: 0 0 auto; display: flex; align-items: center; margin: 0; padding: 9px 12px; white-space: nowrap; }
  .docs-sidebar__course span,.docs-sidebar__course small { display: none; }
  .docs-sidebar__group { display: contents; }
  .docs-sidebar__label { display: none; }
  .docs-nav-button { width: auto; white-space: nowrap; border: 1px solid var(--line); padding: 9px 12px; }
  .docs-main { padding-top: 50px; }
  .anatomy-step { grid-template-columns: 32px 1fr; padding: 24px 0; }
  .anatomy-step p { grid-column: 2; }
  .support-intro { position: static; }
  .support-item { grid-template-columns: 1fr; gap: 8px; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .hero--focused h1 { font-size: clamp(3rem, 13.5vw, 5.4rem); }
  .boundary-grid { grid-template-columns: minmax(0, 1fr); }
  .boundary-column + .boundary-column { border-left: 0; border-top: 1px solid rgba(8,10,11,.2); }
  .boundary-grid--dark .boundary-column + .boundary-column { border-top-color: var(--line); }
  .deck-lab__toolbar { align-items: flex-start; flex-direction: column; }
  .site-recovery-ui .voideddev-recovery-deck-grid { grid-template-columns: repeat(8,minmax(42px,1fr)); }
  .endpoint-row, .endpoint-list--utility .endpoint-row { grid-template-columns: 62px minmax(0, 1fr) 22px; gap: 10px 18px; padding-block: 20px; }
  .endpoint-row p { grid-column: 2; }
  .endpoint-row > .arrow, .endpoint-row > :last-child { grid-column: 3; grid-row: 1 / span 2; }
  .utility-layout { width: min(100% - 28px, 900px); display: block; }
  .utility-index { position: static; display: flex; gap: 8px 18px; overflow-x: auto; padding: 28px 0 0; }
  .utility-index__label { display: none; }
  .utility-index a { flex: none; }
  .utility-section { padding-block: 62px; }
  .mcp-tool-list > div { grid-template-columns: minmax(0, 1fr); gap: 7px; }
}

@media (max-width: 520px) {
  .secret-boundary > div,.support-evidence ul,.support-routes,.agent-resource-grid { grid-template-columns: 1fr; }
  .support-routes a { min-height: 180px; }
  .section { padding-inline: 14px; }
  .hero__inner, .page-hero__inner { width: min(100% - 28px, var(--max)); }
  .hero__inner { padding-top: 106px; padding-bottom: 28px; }
  .hero--focused h1 { font-size: clamp(3rem,13.5vw,3.45rem); }
  .hero__lede { margin-top: 16px; font-size: .94rem; }
  .hero__status { margin-top: 22px; }
  .hero__actions, .final-cta__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .button, .final-cta__actions .button { width: 100%; }
  .hero__status { align-items: flex-start; }
  .function-lab { margin-inline: -14px; border-inline: 0; box-shadow: none; }
  .function-lab__header { align-items: center; padding: 14px; }
  .function-lab__header h2 { font-size: 1.55rem; }
  .function-lab__header .lab-kicker { display: none; }
  .function-lab__header .lab-state { align-self: flex-start; }
  .function-lab__key { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; }
  .function-lab__key strong { overflow-wrap: anywhere; }
  .function-lab__key .lab-button { width: auto; }
  .lab-field { padding: 13px 14px 9px; }
  .lab-field textarea { min-height: 82px; }
  .lab-operation { padding-inline: 14px; }
  .lab-segmented { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .lab-segmented button { min-height: 52px; border-right: 0; border-bottom: 1px solid var(--line); font-size: .57rem; line-height: 1.2; }
  .lab-segmented button:last-child { border-right: 1px solid var(--line); }
  .lab-invocation, .lab-raw { margin-inline: 14px; }
  .lab-invocation code { max-height: 360px; }
  .lab-raw code { min-width: 0; max-height: 128px; }
  .function-lab__actions { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: end; gap: 9px; padding: 12px 14px; }
  .lab-select { align-items: stretch; flex-direction: column; gap: 5px; }
  .lab-select select, .function-lab__actions .button { width: 100%; }
  .lab-output { padding-inline: 14px; }
  .lab-output > span:has(b) { grid-template-columns: 70px minmax(0,1fr); }
  .lab-note { padding-inline: 14px; }
  .section__intro { gap: 24px; }
  .path-summary { display: block; }
  .package-name { display: block; margin-top: 14px; }
  .code-window pre { padding: 18px; font-size: .74rem; }
  .recovery-facts, .preset-stats { grid-template-columns: 1fr; }
  .deck-card { width: 120px; }
  .decision-table { display: block; overflow-x: auto; }
  .compat-row { grid-template-columns: 1fr 1fr; }
  .compat-row p { grid-column: 1 / -1; }
  .status-band__inner { display: block; }
  .status-band p { margin-top: 8px; }
  .contract-strip__inner { justify-content: flex-start; padding-block: 18px; }
  .machine-facts { grid-template-columns: minmax(0, 1fr); }
  .fact-list > div, .fact-list--compact > div { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .endpoint-row, .endpoint-list--utility .endpoint-row { grid-template-columns: 52px minmax(0, 1fr) 18px; }
  .endpoint-row--signal { padding-left: 12px; }
  .core-contract { align-items: flex-start; flex-direction: column; }
  .deck-lab { margin-top: 38px; }
  .deck-lab__toolbar { gap: 16px; }
  .deck-lab__control { width: 100%; display: flex; align-items: flex-start; flex-direction: column; }
  .deck-lab__choices { width: 100%; }
  .deck-lab__choices button { flex: 1; }
  .deck-lab__theme-note { max-width: 32rem; }
  .deck-lab__actions { width: 100%; flex-direction: column; }
  .deck-lab__actions > * { width: 100%; }
  .site-recovery-ui .voideddev-recovery-panel { padding: 16px; }
  .site-recovery-ui .voideddev-recovery-title { font-size: 2rem; }
  .site-recovery-ui .voideddev-recovery-description { font-size: .82rem; }
  .site-recovery-ui .voideddev-recovery-warning { font-size: .72rem; }
  .site-recovery-ui .voideddev-recovery-actions { align-items: stretch; flex-direction: column; }
  .site-recovery-ui .voideddev-recovery-deck-grid { grid-template-columns: none; grid-template-rows: repeat(4,76px); grid-auto-flow: column; grid-auto-columns: 54px; gap: 5px; max-width: 100%; margin-top: 18px; padding: 3px 3px 13px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
  .site-recovery-ui .voideddev-recovery-card { width: 54px; min-height: 76px; aspect-ratio: auto; scroll-snap-align: start; }
  .site-recovery-ui--editorial .voideddev-recovery-panel { box-shadow: inset 0 0 0 1px #261e17,7px 7px 0 #cf3526; }
  .site-recovery-ui--editorial .voideddev-recovery-panel::before { top: -14px; font-size: 8rem; }
  .site-recovery-ui--editorial .voideddev-recovery-title { max-width: 240px; font-size: 3.2rem; }
  .site-recovery-ui--editorial .voideddev-recovery-deck-grid { min-height: 194px; display: flex; align-items: center; gap: 0; padding: 24px 42px 30px; overflow-x: auto; transform: rotate(-.4deg); }
  .site-recovery-ui--editorial .voideddev-recovery-card { flex: 0 0 92px; width: 92px; height: 142px; min-height: 142px; margin-left: -38px; aspect-ratio: auto; }
  .site-recovery-ui--editorial .voideddev-recovery-card:first-child { margin-left: 0; }
  .site-recovery-ui--editorial .voideddev-recovery-card:hover { transform: translateY(-7px) rotate(0) scale(1.03); }
  .deck-card-art__rank { font-size: 1.65rem; }
  .deck-card-art__suit { font-size: 5.2rem; }
  .site-recovery-ui--signal .voideddev-recovery-deck-grid { grid-template-rows: repeat(2,88px); grid-auto-columns: 88px; gap: 4px; padding: 6px 6px 14px; }
  .site-recovery-ui--signal .voideddev-recovery-card { width: 88px; min-height: 88px; }
  .deck-card-art__sigil { font-size: 2rem; }
  .deck-card-art__address { font-size: .43rem; }
  .deck-card-art__signal-rank { font-size: .4rem; }
}

/* The live trace exposes the complete byte path instead of summarizing it. */
.lab-invocation__header { min-height: 38px; padding-left: 0; }
.lab-invocation__header > div { display: flex; align-items: stretch; align-self: stretch; gap: 0; }
.lab-invocation__header button,
.lab-roundtrip button { border: 0; background: transparent; color: var(--signal); font: inherit; cursor: pointer; text-transform: uppercase; }
.lab-language-switch button { min-width: 76px; padding: 0 12px; border-right: 1px solid var(--line); color: var(--muted); }
.lab-language-switch button[aria-pressed="true"] { background: var(--signal); color: #071006; }
.lab-invocation__header > button { padding-inline: 8px 2px; }
.lab-roundtrip { margin: 0 20px 14px; border: 1px solid var(--line-strong); background: #040607; }
.lab-roundtrip[hidden] { display: none; }
.lab-roundtrip__header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.lab-roundtrip__header div > span,
.lab-roundtrip__header div > strong { display: block; }
.lab-roundtrip__header div > span { color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.lab-roundtrip__header div > strong { margin-top: 2px; color: var(--paper); font-size: .84rem; }
.lab-roundtrip__header > span { color: var(--signal); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }
.lab-roundtrip__stages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.lab-stage { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lab-stage:nth-child(2n) { border-right: 0; }
.lab-stage--wide { grid-column: 1 / -1; border-right: 0; }
.lab-stage > header { min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: rgba(199,255,94,.035); }
.lab-stage > header span { color: var(--signal); font-family: var(--mono); font-size: .57rem; }
.lab-stage > header strong { color: var(--paper-soft); font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.lab-value { position: relative; min-width: 0; padding: 9px 10px; border-bottom: 1px solid rgba(241,239,231,.08); }
.lab-value:last-child { border-bottom: 0; }
.lab-value > span { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .05em; text-transform: uppercase; }
.lab-value code { display: block; min-width: 0; padding-right: 48px; overflow-wrap: anywhere; color: var(--paper); font-family: var(--mono); font-size: .61rem; line-height: 1.48; white-space: pre-wrap; }
.lab-value button { position: absolute; top: 8px; right: 10px; font-size: .54rem; }
.lab-value--raw code { max-height: none; padding: 10px 48px 10px 0; color: #d8eeb1; }

/* The three deck examples change composition and motion, not only card skins. */
.deck-component-loading { margin-bottom: 10px; padding: 10px 0; border: 0; font-family: var(--mono); font-size: .7rem; }
.site-recovery-ui .voideddev-recovery-actions { order: 0; justify-content: flex-start; margin: 20px 0 0; padding: 13px 0; border-block: 1px solid var(--deck-border); }
.site-recovery-ui .voideddev-recovery-deck-grid { order: 1; }
.site-recovery-ui--plain.is-secure-shuffling .voideddev-recovery-card { animation: system-shuffle-stack 760ms cubic-bezier(.7,0,.3,1) both; }
.site-recovery-ui--plain.is-secure-shuffling .voideddev-recovery-card:nth-child(3n+1) { animation-delay: 35ms; }
.site-recovery-ui--plain.is-secure-shuffling .voideddev-recovery-card:nth-child(3n+2) { animation-delay: 70ms; }

.site-recovery-ui--editorial .voideddev-recovery-panel { overflow: visible; }
.site-recovery-ui--editorial .voideddev-recovery-deck-grid[data-deck-layout="editorial"] { min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 30px; padding: 26px; overflow: visible; background: #d8c49e; transform: none; }
.deck-hand { min-width: 0; padding: 14px 14px 0; border: 1px solid rgba(38,30,23,.32); background: rgba(255,250,240,.28); }
.deck-hand > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #5f4e40; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; }
.deck-hand > header strong { color: #261e17; }
.deck-hand__fan { position: relative; height: 236px; margin-top: 8px; overflow: hidden; }
.site-recovery-ui--editorial .deck-hand .voideddev-recovery-card { position: absolute; left: 50%; bottom: 13px; z-index: var(--fan-depth); width: 94px; height: 148px; min-height: 148px; margin: 0; transform-origin: 50% 125%; transform: translateX(calc(-50% + var(--fan-x))) rotate(var(--fan-angle)); transition: transform 180ms ease,filter 180ms ease,box-shadow 180ms ease; }
.site-recovery-ui--editorial .deck-hand .voideddev-recovery-card:hover,
.site-recovery-ui--editorial .deck-hand .voideddev-recovery-card:focus-visible { z-index: 30; transform: translateX(calc(-50% + var(--fan-x))) translateY(-24px) rotate(0) scale(1.08); }
.site-recovery-ui--editorial.is-secure-shuffling .deck-hand .voideddev-recovery-card { animation: collect-hand 760ms cubic-bezier(.68,-.2,.32,1.25) both; animation-delay: calc(var(--fan-depth) * 8ms); }

.site-recovery-ui--signal .voideddev-recovery-panel { overflow: hidden; }
.site-recovery-ui--signal .voideddev-recovery-deck-grid[data-deck-layout="signal"] { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0,720px) minmax(280px,1fr); align-items: start; gap: 18px; margin-top: 28px; padding: 18px; overflow: visible; border: 1px solid #174b36; background: #020705; }
.cipher-orbit { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid #174b36; border-radius: 50%; background: radial-gradient(circle,rgba(186,255,88,.08) 0 1px,transparent 2px 14%,rgba(82,255,171,.05) 14.2%,transparent 14.6% 100%),#020705; }
.cipher-core { position: absolute; z-index: 8; left: 50%; top: 50%; width: 142px; aspect-ratio: 1; display: grid; place-content: center; border: 1px solid #baff58; border-radius: 50%; background: radial-gradient(circle,rgba(186,255,88,.19),rgba(3,8,6,.94) 64%); color: #baff58; text-align: center; box-shadow: 0 0 42px rgba(82,255,171,.32),inset 0 0 28px rgba(82,255,171,.12); transform: translate(-50%,-50%); }
.cipher-core::before,.cipher-core::after { content: ""; position: absolute; inset: -15px; border: 1px dashed rgba(82,255,171,.44); border-radius: 50%; animation: cipher-core-spin 10s linear infinite; }
.cipher-core::after { inset: -31px; border-style: solid; border-color: rgba(255,111,145,.24); animation-direction: reverse; animation-duration: 16s; }
.cipher-core strong,.cipher-core span { display: block; }
.cipher-core strong { font-size: 3.6rem; line-height: .9; text-shadow: 0 0 20px currentColor; }
.cipher-core span { margin-top: 9px; font-size: .55rem; letter-spacing: .14em; }
.cipher-ring { --orbit-radius: -105px; position: absolute; inset: 0; animation: cipher-ring-drift 8s ease-in-out infinite alternate; }
.cipher-ring--2 { --orbit-radius: -180px; animation-duration: 10s; animation-direction: alternate-reverse; }
.cipher-ring--3 { --orbit-radius: -255px; animation-duration: 12s; }
.cipher-ring--4 { --orbit-radius: -326px; animation-duration: 14s; animation-direction: alternate-reverse; }
.site-recovery-ui--signal .cipher-ring .voideddev-recovery-card { position: absolute; left: 50%; top: 50%; width: 60px; height: 76px; min-height: 76px; aspect-ratio: auto; transform: translate(-50%,-50%) rotate(var(--orbit-angle)) translateY(var(--orbit-radius)) rotate(var(--orbit-counter)); animation: signal-card-pulse 4.2s ease-in-out infinite; animation-delay: var(--orbit-delay); }
.site-recovery-ui--signal .cipher-ring .voideddev-recovery-card:hover,
.site-recovery-ui--signal .cipher-ring .voideddev-recovery-card:focus-visible { z-index: 12; border-color: currentColor; transform: translate(-50%,-50%) rotate(var(--orbit-angle)) translateY(var(--orbit-radius)) rotate(var(--orbit-counter)) scale(1.45); box-shadow: 0 0 26px currentColor; }
.site-recovery-ui--signal.is-secure-shuffling .cipher-ring { animation-duration: 650ms; }
.site-recovery-ui--signal.is-secure-shuffling .cipher-ring .voideddev-recovery-card { animation: orbit-collapse 760ms cubic-bezier(.7,0,.3,1) both; }

.cipher-reader { min-width: 0; padding: 14px; border: 1px solid #174b36; background: linear-gradient(rgba(65,255,153,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(65,255,153,.026) 1px,transparent 1px),#030806; background-size: 18px 18px; }
.cipher-reader > header { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #174b36; color: #52ffab; font-size: .61rem; letter-spacing: .09em; }
.cipher-reader > header span { color: #88a99a; font-size: .52rem; }
.cipher-reader__focus { position: relative; min-height: 142px; display: grid; align-content: end; margin-top: 12px; padding: 16px; overflow: hidden; border: 1px solid #24664a; background: radial-gradient(circle at 82% 24%,rgba(82,255,171,.17),transparent 30%),#06110c; color: #efffe8; }
.cipher-reader__focus[data-color="red"] { border-color: #73404f; background: radial-gradient(circle at 82% 24%,rgba(255,85,130,.18),transparent 30%),#13090d; color: #ff89a7; }
.cipher-reader__position,.cipher-reader__name,.cipher-reader__id { position: relative; z-index: 1; display: block; }
.cipher-reader__position { align-self: start; color: #88a99a; font-size: .55rem; letter-spacing: .1em; }
.cipher-reader__name { max-width: 72%; margin-top: 34px; font-size: clamp(1.05rem,1.7vw,1.55rem); line-height: 1; text-transform: uppercase; }
.cipher-reader__mark { position: absolute; top: -18px; right: 8px; color: currentColor; font-family: Georgia,serif; font-size: 8.2rem; line-height: 1; opacity: .16; }
.cipher-reader__id { margin-top: 7px; color: currentColor; font-size: .73rem; }
.cipher-reader__order { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.cipher-reader__order button { width: 100%; min-height: 29px; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 6px; border: 1px solid #174b36; background: #020705; color: #efffe8; font: inherit; font-size: .55rem; cursor: pointer; }
.cipher-reader__order button[data-color="red"] { border-color: #4d2834; color: #ff89a7; }
.cipher-reader__order button span { color: #6f9684; font-size: .48rem; }
.cipher-reader__order button:hover,.cipher-reader__order button:focus-visible,.cipher-reader__order button[aria-pressed="true"] { border-color: #baff58; background: rgba(186,255,88,.12); color: #baff58; outline: 0; }
.cipher-reader > p { margin: 12px 0 0; color: #88a99a; font-size: .58rem; line-height: 1.55; }

@keyframes collect-hand { 0% { opacity: 1; } 52% { transform: translateX(-50%) translateY(-34px) rotate(0) scale(.7); } 100% { opacity: 0; transform: translateX(-50%) translateY(-58px) rotate(0) scale(.18); } }
@keyframes system-shuffle-stack { 0% { opacity: 1; } 50% { opacity: .78; transform: translate(18px,-12px) rotate(5deg) scale(.82); } 100% { opacity: 0; transform: translate(0,-18px) rotate(-3deg) scale(.3); } }
@keyframes cipher-ring-drift { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }
@keyframes cipher-core-spin { to { transform: rotate(360deg); } }
@keyframes signal-card-pulse { 0%,100% { filter: brightness(.9); } 50% { filter: brightness(1.28); } }
@keyframes orbit-collapse { to { opacity: 0; transform: translate(-50%,-50%) rotate(var(--orbit-angle)) translateY(-18px) rotate(var(--orbit-counter)) scale(.08); } }

@media (max-width: 780px) {
  .lab-roundtrip__stages { grid-template-columns: minmax(0,1fr); }
  .lab-stage,.lab-stage:nth-child(2n),.lab-stage--wide { grid-column: auto; border-right: 0; }
  .site-recovery-ui--editorial .voideddev-recovery-deck-grid[data-deck-layout="editorial"] { grid-template-columns: minmax(0,1fr); grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto; gap: 16px; padding: 16px; }
  .deck-hand__fan { height: 214px; }
  .site-recovery-ui--signal .voideddev-recovery-deck-grid[data-deck-layout="signal"] { grid-template-columns: minmax(0,1fr); }
  .cipher-ring { --orbit-radius: calc(-13vw); }
  .cipher-ring--2 { --orbit-radius: calc(-22vw); }
  .cipher-ring--3 { --orbit-radius: calc(-32vw); }
  .cipher-ring--4 { --orbit-radius: calc(-40vw); }
  .site-recovery-ui--signal .cipher-ring .voideddev-recovery-card { width: 48px; height: 62px; min-height: 62px; }
}

@media (max-width: 520px) {
  .lab-language-switch button { min-width: 70px; padding-inline: 9px; }
  .lab-invocation__header > button { display: block; }
  .lab-roundtrip { margin-inline: 14px; }
  .lab-roundtrip__header { align-items: flex-start; }
  .lab-roundtrip__header > span { padding-top: 2px; text-align: right; }
  .lab-value code { padding-right: 0; font-size: .58rem; }
  .lab-value button { position: static; display: block; margin-top: 7px; }
  .site-recovery-ui--editorial .voideddev-recovery-panel { padding-inline: 10px; }
  .site-recovery-ui--editorial .voideddev-recovery-deck-grid[data-deck-layout="editorial"] { margin-inline: -3px; padding: 10px; }
  .deck-hand { padding-inline: 8px; }
  .deck-hand__fan { height: 182px; }
  .site-recovery-ui--editorial .deck-hand .voideddev-recovery-card { width: 70px; height: 112px; min-height: 112px; transform: translateX(calc(-50% + var(--fan-x-mobile))) rotate(var(--fan-angle)); }
  .site-recovery-ui--editorial .deck-hand .voideddev-recovery-card:hover,
  .site-recovery-ui--editorial .deck-hand .voideddev-recovery-card:focus-visible { transform: translateX(calc(-50% + var(--fan-x-mobile))) translateY(-18px) rotate(0) scale(1.08); }
  .site-recovery-ui--signal .voideddev-recovery-panel { margin-inline: -6px; padding-inline: 10px; }
  .site-recovery-ui--signal .voideddev-recovery-deck-grid[data-deck-layout="signal"] { margin-inline: -2px; padding: 7px; }
  .cipher-core { width: 74px; }
  .cipher-core strong { font-size: 2.2rem; }
  .cipher-core span { font-size: .4rem; }
  .cipher-ring { --orbit-radius: -46px; }
  .cipher-ring--2 { --orbit-radius: -83px; }
  .cipher-ring--3 { --orbit-radius: -120px; }
  .cipher-ring--4 { --orbit-radius: -157px; }
  .site-recovery-ui--signal .cipher-ring .voideddev-recovery-card { width: 30px; height: 41px; min-height: 41px; }
  .site-recovery-ui--signal .deck-card-art__address { display: none; }
  .site-recovery-ui--signal .deck-card-art__sigil { inset: 10% 0 auto; font-size: 1rem; }
  .site-recovery-ui--signal .deck-card-art__signal-rank { inset: auto 2px 3px; font-size: .31rem; }
  .cipher-reader { padding: 10px; }
  .cipher-reader__focus { min-height: 126px; }
  .cipher-reader__order { gap: 3px; }
  .cipher-reader__order button { min-height: 28px; padding-inline: 5px; }
}

/* Developer Lab depth controls and interactive teaching surfaces. */
.updates-hero h1 { max-width: 900px; }
.updates-status { width: min(100% - 40px,var(--max)); margin: 0 auto; padding: clamp(54px,8vw,110px) 0; border-bottom: 1px solid var(--line); }
.updates-status > div:first-child { display: flex; align-items: center; gap: 10px; color: var(--signal); font: .68rem var(--mono); letter-spacing: .08em; }
.updates-status h2 { max-width: 1000px; margin-top: 30px; font-size: clamp(2.6rem,5.8vw,6rem); }
.updates-status > p { max-width: 790px; margin-top: 26px; font-size: 1.04rem; }
.updates-status dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 52px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.updates-status dl > div { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.updates-status dt { color: var(--muted); font: .57rem var(--mono); text-transform: uppercase; }
.updates-status dd { margin-top: 5px; color: var(--paper); }
.update-ledger { width: min(100% - 40px,var(--max)); margin: 0 auto; padding: clamp(60px,9vw,120px) 0; }
.update-ledger > header { display: grid; grid-template-columns: .7fr 1.3fr; align-items: end; padding-bottom: 40px; border-bottom: 1px solid var(--line-strong); }
.update-ledger > header h2 { font-size: clamp(3rem,7vw,7rem); }
.update-entry { display: grid; grid-template-columns: .7fr 1.3fr; padding: 38px 0 48px; border-bottom: 1px solid var(--line); }
.update-entry time { color: var(--muted); font: .68rem var(--mono); }
.update-entry__type { color: var(--signal); font: .58rem var(--mono); letter-spacing: .1em; }
.update-entry h3 { max-width: 780px; margin-top: 12px; font-size: clamp(2rem,4vw,4.2rem); }
.update-entry p { max-width: 760px; margin-top: 20px; }
.update-entry ul { margin-top: 22px; padding-left: 18px; color: var(--paper-soft); }
.update-entry li + li { margin-top: 8px; }
.notice-board { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; padding: clamp(60px,8vw,100px) max(20px,calc((100% - var(--max))/2)); background: var(--signal); color: var(--signal-ink); }
.notice-board .eyebrow,.notice-board p { color: rgba(23,32,0,.68); }
.notice-board .eyebrow::before { background: currentColor; }
.notice-board h2 { margin-top: 18px; font-size: clamp(2.6rem,5vw,5.4rem); }
.notice-list { border-top: 1px solid rgba(23,32,0,.3); }
.notice-list article { display: grid; grid-template-columns: .7fr 1.3fr; gap: 30px; padding: 22px 0; border-bottom: 1px solid rgba(23,32,0,.3); }
.notice-list strong { font-size: 1.05rem; }
.notice-list p { font-size: .86rem; }
.dev-mode-switch { display: inline-flex; flex: none; border: 1px solid var(--line-strong); }
.dev-mode-switch button { min-height: 32px; padding: 0 12px; border: 0; border-right: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: .64rem var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.dev-mode-switch button:last-child { border-right: 0; }
.dev-mode-switch button[aria-pressed="true"] { background: var(--signal); color: var(--signal-ink); }
[data-dev-mode="guided"] [data-mode-expert], [data-dev-mode="expert"] [data-mode-guided] { display: none !important; }
.dev-lab-block { margin-top: 28px; }
.artifact-explorer { margin-top: 28px; display: grid; grid-template-columns: minmax(170px,.65fr) minmax(0,1.35fr); border: 1px solid var(--line-strong); background: var(--ink-soft); }
.artifact-explorer__rail { display: grid; border-right: 1px solid var(--line); }
.artifact-explorer__rail button { min-height: 54px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); font: .68rem var(--mono); text-align: left; cursor: pointer; }
.artifact-explorer__rail button:last-child { border-bottom: 0; }
.artifact-explorer__rail button[aria-pressed="true"] { background: rgba(199,255,94,.08); color: var(--signal); }
.artifact-explorer__output { min-height: 380px; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px,5vw,64px); }
.artifact-explorer__output > span { color: var(--signal); font: .68rem var(--mono); }
.artifact-explorer__output h3 { margin-top: 10px; font-size: clamp(2.4rem,5vw,5rem); }
.artifact-explorer__output dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 38px; }
.artifact-explorer__output dl > div { padding-top: 10px; border-top: 1px solid var(--line); }
.artifact-explorer__output dt { color: var(--muted); font: .6rem var(--mono); text-transform: uppercase; }
.artifact-explorer__output dd { margin-top: 5px; color: var(--paper); }
.artifact-explorer__output p { max-width: 640px; margin-top: 30px; }
.recovery-simulator { margin-top: 28px; padding: clamp(22px,4vw,48px); border: 1px solid var(--line-strong); background: radial-gradient(circle at 50% 45%,rgba(199,255,94,.08),transparent 36%),var(--ink-soft); }
.recovery-simulator__flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 42px; }
.recovery-simulator__flow > span { position: absolute; opacity: 0; }
.recovery-sim-node { position: relative; min-height: 90px; display: grid; place-items: center; padding: 15px; border: 1px solid var(--line-strong); color: var(--paper); font: .66rem var(--mono); text-align: center; }
.recovery-sim-node:not(:last-child)::after { content: "→"; position: absolute; left: calc(100% + 14px); color: var(--signal); font-size: 1.4rem; }
.recovery-sim-node--deck { border-style: dashed; color: var(--signal); }
.recovery-sim-node--root { background: var(--signal); color: var(--signal-ink); }
.recovery-simulator__apps { width: 55%; margin: 22px 0 28px auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.recovery-simulator__apps div { padding: 12px; border: 1px solid var(--line); color: var(--muted); font: .58rem var(--mono); text-align: center; }
.recovery-simulator > p { margin-top: 18px; font-size: .82rem; }
.recovery-simulator.is-rotating .recovery-sim-node--deck { animation: system-shuffle-stack 760ms ease both; }
.recovery-simulator.is-rotating [data-recovery-wrapper] { animation: wrapper-flash 900ms ease both; }
.implementation-scenarios, .api-groups { margin-top: 28px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.implementation-scenarios article, .api-groups article { min-width: 0; min-height: 230px; display: flex; flex-direction: column; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.implementation-scenarios article > span, .api-groups article > span { color: var(--signal); font: .58rem var(--mono); letter-spacing: .08em; }
.implementation-scenarios h3, .api-groups h3 { margin-top: 22px; font-size: 1.6rem; }
.implementation-scenarios p, .api-groups p { margin-top: 18px; font-size: .84rem; }
.implementation-scenarios .text-link { margin-top: auto; padding-top: 20px; }
.library-table code { white-space: normal; }
  .support-form--embedded { margin-top: 28px; padding: 0; background: transparent; }
@keyframes wrapper-flash { 45% { background: var(--signal); color: var(--signal-ink); transform: scale(1.05); } }

@media (max-width: 780px) {
  .updates-status dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .update-ledger > header,.update-entry,.notice-board { grid-template-columns: 1fr; }
  .update-entry { gap: 20px; }
  .notice-list article { grid-template-columns: 1fr; gap: 8px; }
  .status-band__inner .dev-mode-switch { margin-top: 12px; }
  .artifact-explorer { grid-template-columns: 1fr; }
  .artifact-explorer__rail { grid-template-columns: repeat(3,1fr); border-right: 0; border-bottom: 1px solid var(--line); }
  .artifact-explorer__rail button { min-height: 46px; border-right: 1px solid var(--line); }
  .artifact-explorer__output { min-height: 320px; }
  .recovery-simulator__flow { grid-template-columns: 1fr; gap: 28px; }
  .recovery-sim-node:not(:last-child)::after { left: 50%; top: calc(100% + 3px); transform: translateX(-50%) rotate(90deg); }
  .recovery-simulator__apps { width: 100%; }
  .implementation-scenarios, .api-groups { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .artifact-explorer__rail { grid-template-columns: repeat(2,1fr); }
  .artifact-explorer__output dl { grid-template-columns: 1fr; }
  .recovery-simulator__apps { grid-template-columns: 1fr; }
}

/* Recovery Deck composition catalog: ten additional structures on the same component. */
.site-recovery-ui--dealer,
.site-recovery-ui--spiral,
.site-recovery-ui--timeline,
.site-recovery-ui--vault,
.site-recovery-ui--cascade,
.site-recovery-ui--map,
.site-recovery-ui--archive,
.site-recovery-ui--wave,
.site-recovery-ui--constellation,
.site-recovery-ui--folio { --deck-surface: #f4f1e8; --deck-text: #0b0d0e; --deck-muted: #5e6361; --deck-border: #a5a69f; --deck-accent: #263800; }
.site-recovery-ui--dealer .voideddev-recovery-deck-grid,
.site-recovery-ui--spiral .voideddev-recovery-deck-grid,
.site-recovery-ui--timeline .voideddev-recovery-deck-grid,
.site-recovery-ui--vault .voideddev-recovery-deck-grid,
.site-recovery-ui--cascade .voideddev-recovery-deck-grid,
.site-recovery-ui--map .voideddev-recovery-deck-grid,
.site-recovery-ui--archive .voideddev-recovery-deck-grid,
.site-recovery-ui--wave .voideddev-recovery-deck-grid,
.site-recovery-ui--constellation .voideddev-recovery-deck-grid,
.site-recovery-ui--folio .voideddev-recovery-deck-grid { display: block; max-width: none; min-height: 0; padding: 0; overflow: visible; }

.site-recovery-ui--dealer { --deck-surface: #0d2b20; --deck-text: #f8f0d8; --deck-muted: #a7bfae; --deck-border: #b89e61; --deck-accent: #d1ff65; }
.site-recovery-ui--dealer .voideddev-recovery-panel { background: radial-gradient(ellipse at center,#174a35,#0a241a 68%); box-shadow: inset 0 0 0 8px #082017,inset 0 0 0 10px #8c7449; }
.deck-dealer-table { position: relative; min-height: 760px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 150px 42px; padding: 50px 38px; border: 1px solid #9d8452; border-radius: 46%; background: radial-gradient(ellipse,rgba(255,255,255,.04),transparent 58%); }
.deck-dealer-shoe { position: absolute; z-index: 3; left: 50%; top: 50%; width: 126px; aspect-ratio: 1; display: grid; place-content: center; border: 1px solid #d1ff65; border-radius: 50%; background: #082017; color: #d1ff65; text-align: center; transform: translate(-50%,-50%); box-shadow: 0 0 34px rgba(209,255,101,.2); }
.deck-dealer-shoe strong,.deck-dealer-shoe span { display: block; }
.deck-dealer-shoe strong { font-size: 2.8rem; line-height: 1; }
.deck-dealer-shoe span { margin-top: 6px; font: .52rem var(--mono); letter-spacing: .12em; }
.deck-dealer-lane { min-width: 0; }
.deck-dealer-lane > header { margin-bottom: 10px; color: #d1ff65; font: .58rem var(--mono); letter-spacing: .08em; }
.deck-dealer-cards { display: flex; justify-content: center; padding-left: 28px; }
.site-recovery-ui--dealer .deck-dealer-cards .voideddev-recovery-card { flex: 0 0 62px; width: 62px; height: 90px; min-height: 90px; margin-left: -28px; background: #fffdf5; color: #121313; box-shadow: 2px 4px 0 rgba(0,0,0,.25); transform: rotate(calc((var(--lane-index) - 6) * .45deg)); }
.site-recovery-ui--dealer .deck-dealer-cards .voideddev-recovery-card[data-voideddev-color="red"] { color: #b51f32; }
.site-recovery-ui--dealer .deck-dealer-cards .voideddev-recovery-card:hover { z-index: 8; transform: translateY(-18px) scale(1.18); }

.site-recovery-ui--spiral { --deck-surface: #eeeade; --deck-text: #16191b; --deck-muted: #626866; --deck-border: #4d5350; --deck-accent: #111; }
.site-recovery-ui--spiral .voideddev-recovery-panel { background: radial-gradient(circle at center,#fff 0 2px,transparent 3px),repeating-radial-gradient(circle at center,transparent 0 54px,rgba(8,10,11,.08) 55px 56px),#eeeade; }
.deck-spiral-stage { position: relative; height: min(850px,75vw); min-height: 610px; overflow: hidden; }
.deck-spiral-core { position: absolute; z-index: 4; left: 50%; top: 50%; width: 112px; aspect-ratio: 1; display: grid; place-content: center; border: 1px solid #101313; border-radius: 50%; background: var(--signal); color: #111; text-align: center; transform: translate(-50%,-50%); }
.deck-spiral-core strong,.deck-spiral-core span { display: block; }
.deck-spiral-core span { font: .58rem var(--mono); }
.site-recovery-ui--spiral .deck-spiral-stage .voideddev-recovery-card { position: absolute; left: var(--spiral-left); top: var(--spiral-top); z-index: calc(60 - var(--order-index)); width: 54px; height: 72px; min-height: 72px; aspect-ratio: auto; transform: translate(-50%,-50%) rotate(var(--spiral-angle)); box-shadow: 2px 3px 0 rgba(8,10,11,.18); }
.site-recovery-ui--spiral .deck-spiral-stage .voideddev-recovery-card:hover { z-index: 80; transform: translate(-50%,-50%) rotate(0) scale(1.6); }

.site-recovery-ui--timeline { --deck-surface: #f0eee5; --deck-text: #101315; --deck-muted: #666a68; --deck-border: #262b29; --deck-accent: #111; }
.site-recovery-ui--timeline .voideddev-recovery-panel { background: linear-gradient(#ddd9cb 1px,transparent 1px),#f0eee5; background-size: 100% 28px; }
.deck-order-tape { max-width: 100%; padding: 48px 0 34px; overflow-x: auto; scroll-snap-type: x proximity; }
.deck-order-tape__track { width: max-content; display: flex; align-items: center; padding: 0 24px; }
.deck-order-tape__marker { flex: 0 0 84px; align-self: stretch; display: grid; place-items: center; border-left: 2px solid #101315; color: #101315; font: .55rem var(--mono); writing-mode: vertical-rl; }
.site-recovery-ui--timeline .deck-order-tape .voideddev-recovery-card { flex: 0 0 72px; width: 72px; min-height: 102px; margin-left: -1px; border-radius: 0; scroll-snap-align: center; }
.site-recovery-ui--timeline .deck-order-tape .voideddev-recovery-card:nth-of-type(even) { transform: translateY(16px); }
.site-recovery-ui--timeline .deck-order-tape .voideddev-recovery-card:hover { z-index: 4; background: var(--signal); transform: translateY(-12px) scale(1.18); }

.site-recovery-ui--vault { --deck-surface: #101316; --deck-text: #f1efe7; --deck-muted: #8d9795; --deck-border: #596361; --deck-accent: #c7ff5e; }
.site-recovery-ui--vault .voideddev-recovery-panel { background: radial-gradient(circle at 50% 52%,rgba(199,255,94,.08),transparent 34%),#101316; }
.deck-vault-dial { position: relative; width: min(820px,100%); aspect-ratio: 1; margin-inline: auto; overflow: hidden; border: 1px solid #596361; border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 13%,rgba(199,255,94,.08) 13.2% 13.5%); }
.deck-vault-lock { position: absolute; z-index: 9; left: 50%; top: 50%; width: 132px; aspect-ratio: 1; display: grid; place-content: center; border: 1px solid var(--signal); border-radius: 50%; background: #080a0b; color: var(--signal); text-align: center; transform: translate(-50%,-50%); }
.deck-vault-lock span,.deck-vault-lock strong { display: block; }
.deck-vault-lock span { font: .5rem var(--mono); letter-spacing: .12em; }
.deck-vault-lock strong { font-size: 3.2rem; line-height: 1; }
.deck-vault-ring { --dial-radius: -105px; position: absolute; inset: 0; }
.deck-vault-ring--2 { --dial-radius: -178px; rotate: 7deg; }
.deck-vault-ring--3 { --dial-radius: -250px; rotate: -5deg; }
.deck-vault-ring--4 { --dial-radius: -325px; rotate: 3deg; }
.site-recovery-ui--vault .deck-vault-ring .voideddev-recovery-card { position: absolute; left: 50%; top: 50%; width: 58px; height: 76px; min-height: 76px; transform: translate(-50%,-50%) rotate(var(--dial-angle)) translateY(var(--dial-radius)) rotate(var(--dial-counter)); background: #171c1f; color: #f1efe7; }
.site-recovery-ui--vault .deck-vault-ring .voideddev-recovery-card[data-voideddev-color="red"] { color: #ff8d78; }

.site-recovery-ui--cascade { --deck-surface: #e7e4da; --deck-text: #121415; --deck-muted: #666a68; --deck-border: #555a57; --deck-accent: #111; }
.site-recovery-ui--cascade .voideddev-recovery-panel { background: linear-gradient(125deg,#f6f3e9,#cbc9c0); }
.deck-cascade { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; padding: 24px; }
.deck-cascade-column > header { padding: 8px 0; border-bottom: 1px solid #747874; color: #4b504e; font: .6rem var(--mono); }
.deck-cascade-stack { position: relative; height: 540px; margin-top: 12px; }
.site-recovery-ui--cascade .deck-cascade-stack .voideddev-recovery-card { position: absolute; left: 50%; top: calc(var(--cascade-index) * 34px); z-index: calc(var(--cascade-index) + 1); width: min(112px,80%); height: 156px; min-height: 156px; transform: translateX(-50%) rotate(calc((var(--cascade-index) - 6) * .3deg)); box-shadow: 0 4px 8px rgba(8,10,11,.15); }
.site-recovery-ui--cascade .deck-cascade-stack .voideddev-recovery-card:hover { z-index: 30; transform: translate(-50%,-14px) scale(1.12); }

.site-recovery-ui--map { --deck-surface: #f5f0e2; --deck-text: #151718; --deck-muted: #666b68; --deck-border: #777b77; --deck-accent: #111; }
.site-recovery-ui--map .voideddev-recovery-panel { background: linear-gradient(90deg,rgba(16,19,20,.045) 1px,transparent 1px),linear-gradient(rgba(16,19,20,.045) 1px,transparent 1px),#f5f0e2; background-size: 20px 20px; }
.deck-route-map { display: grid; gap: 32px; padding: 32px 12px; }
.deck-route { --route-color: #e15e45; display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; gap: 18px; }
.deck-route--2 { --route-color: #2870a4; }.deck-route--3 { --route-color: #4d8d48; }.deck-route--4 { --route-color: #8b5ba0; }
.deck-route > header strong,.deck-route > header span { display: block; }
.deck-route > header strong { color: var(--route-color); font: 700 .64rem var(--mono); }
.deck-route > header span { color: #676b68; font: .52rem var(--mono); }
.deck-route__stations { position: relative; display: grid; grid-template-columns: repeat(13,minmax(42px,1fr)); gap: 8px; }
.deck-route__stations::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; background: var(--route-color); transform: translateY(-50%); }
.site-recovery-ui--map .deck-route__stations .voideddev-recovery-card { z-index: 1; width: 100%; min-height: 70px; aspect-ratio: 5/7; border: 3px solid var(--route-color); border-radius: 50%; background: #fffaf0; }

.site-recovery-ui--archive { --deck-surface: #22201b; --deck-text: #f2e8d1; --deck-muted: #aa9e87; --deck-border: #746b5a; --deck-accent: #c7ff5e; }
.site-recovery-ui--archive .voideddev-recovery-panel { background: #22201b; }
.deck-archive { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 20px; border: 1px solid #5e5749; background: #171612; }
.deck-archive-tray { min-width: 0; display: grid; grid-template-columns: 48px repeat(4,minmax(0,1fr)); align-items: center; gap: 5px; padding: 9px; border: 1px solid #5e5749; background: #2d2a23; box-shadow: inset 0 -6px 12px rgba(0,0,0,.2); }
.deck-archive-tray > span { color: #c7ff5e; font: .48rem var(--mono); writing-mode: vertical-rl; }
.site-recovery-ui--archive .deck-archive-tray .voideddev-recovery-card { width: 100%; min-height: 82px; background: #f4eddb; color: #161615; }
.site-recovery-ui--archive .deck-archive-tray .voideddev-recovery-card[data-voideddev-color="red"] { color: #a92e35; }

.site-recovery-ui--wave { --deck-surface: #071217; --deck-text: #e9fffa; --deck-muted: #80a5a5; --deck-border: #2a7776; --deck-accent: #c7ff5e; }
.site-recovery-ui--wave .voideddev-recovery-panel { background: linear-gradient(rgba(87,255,238,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(87,255,238,.045) 1px,transparent 1px),#071217; background-size: 18px 18px; }
.deck-wave-viewport { max-width: 100%; overflow-x: auto; }
.deck-wave { position: relative; width: 3900px; height: 300px; background: linear-gradient(transparent 49.5%,rgba(199,255,94,.25) 50%,transparent 50.5%); }
.site-recovery-ui--wave .deck-wave .voideddev-recovery-card { position: absolute; left: var(--wave-x); top: var(--wave-y); width: 58px; height: 76px; min-height: 76px; background: #0b2026; color: #e9fffa; transform: translateY(-50%) rotate(var(--wave-angle)); box-shadow: 0 0 16px rgba(87,255,238,.12); }
.site-recovery-ui--wave .deck-wave .voideddev-recovery-card[data-voideddev-color="red"] { border-color: #cb6576; color: #ff9bab; }

.site-recovery-ui--constellation { --deck-surface: #03050c; --deck-text: #eff3ff; --deck-muted: #7e89a7; --deck-border: #46537a; --deck-accent: #c7ff5e; }
.site-recovery-ui--constellation .voideddev-recovery-panel { background: radial-gradient(circle at 17% 20%,rgba(84,112,255,.16),transparent 18%),radial-gradient(circle at 80% 67%,rgba(199,255,94,.1),transparent 22%),#03050c; }
.deck-constellation { position: relative; height: 740px; overflow: hidden; background-image: radial-gradient(#fff 0 1px,transparent 1px); background-size: 37px 37px; }
.site-recovery-ui--constellation .deck-constellation .voideddev-recovery-card { position: absolute; left: var(--star-x); top: var(--star-y); width: 52px; height: 52px; min-height: 52px; aspect-ratio: 1; border-radius: 50%; background: #080d1a; color: #eff3ff; transform: translate(-50%,-50%); box-shadow: 0 0 16px rgba(169,191,255,.3); animation: star-pulse 3.4s ease-in-out infinite; animation-delay: var(--star-delay); }
.site-recovery-ui--constellation .deck-constellation .voideddev-recovery-card[data-voideddev-color="red"] { color: #ff9fab; }
.site-recovery-ui--constellation .deck-constellation .voideddev-recovery-card:hover { z-index: 8; border-radius: 4px; transform: translate(-50%,-50%) scale(1.75); }

.site-recovery-ui--folio { --deck-surface: #ded7c5; --deck-text: #1d1a16; --deck-muted: #70695e; --deck-border: #504a40; --deck-accent: #111; font-family: Georgia,serif; }
.site-recovery-ui--folio .voideddev-recovery-panel { background: #ded7c5; }
.deck-folios { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; padding: 20px; }
.deck-folio { min-width: 0; padding: 18px; border: 1px solid #504a40; background: linear-gradient(90deg,#f8f2e3 49.6%,#bcb4a1 50%,#fff8e8 50.4%); box-shadow: 4px 5px 0 rgba(80,74,64,.22); }
.deck-folio > header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #938a78; color: #4c463d; font: .55rem var(--mono); letter-spacing: .08em; }
.deck-folio__cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.site-recovery-ui--folio .deck-folio__cards .voideddev-recovery-card { width: 100%; min-height: 112px; background: rgba(255,255,255,.44); }

@keyframes star-pulse { 50% { filter: brightness(1.5); box-shadow: 0 0 26px currentColor; } }

@media (max-width: 780px) {
  .deck-lab__choices { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .deck-dealer-table { min-height: 1160px; grid-template-columns: 1fr; gap: 32px; padding: 34px 18px; border-radius: 120px; }
  .deck-dealer-shoe { display: none; }
  .deck-spiral-stage { height: 720px; min-height: 720px; }
  .deck-vault-dial { width: 690px; max-width: none; margin-left: 50%; transform: translateX(-50%) scale(.78); transform-origin: 50% 0; margin-bottom: -150px; }
  .deck-cascade { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .deck-route { grid-template-columns: 76px minmax(620px,1fr); }
  .deck-route-map { overflow-x: auto; }
  .deck-archive { grid-template-columns: 1fr; }
  .deck-folios { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .deck-lab__choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .deck-lab__choices button { min-height: 50px; }
  .site-recovery-ui--spiral .voideddev-recovery-panel { padding-inline: 4px; }
  .deck-spiral-stage { width: 650px; height: 650px; min-height: 650px; margin-left: 50%; transform: translateX(-50%) scale(.58); transform-origin: 50% 0; margin-bottom: -270px; }
  .deck-cascade { grid-template-columns: 1fr; padding-inline: 2px; }
  .deck-cascade-stack { height: 510px; }
  .deck-archive { padding: 5px; }
  .deck-archive-tray { grid-template-columns: 34px repeat(4,minmax(0,1fr)); padding: 5px; }
  .site-recovery-ui--archive .deck-archive-tray .voideddev-recovery-card { width: 100%; min-height: 70px; }
  .deck-folios { padding-inline: 0; }
  .deck-folio { padding: 10px; }
  .site-recovery-ui--folio .deck-folio__cards .voideddev-recovery-card { min-height: 84px; }
  .deck-constellation { height: 620px; }
}

/* Encryption fundamentals course */
.course { overflow: clip; background: var(--ink); }
.course-hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(48px, 8vw, 132px);
  width: min(100% - 40px, var(--max));
  margin-inline: auto;
  padding: clamp(72px, 10vw, 144px) 0;
}
.course-hero::after { content: "LEARN / 01—09"; position: absolute; right: 0; bottom: 24px; color: var(--muted); font: .6rem var(--mono); letter-spacing: .14em; }
.course-hero__copy { position: relative; z-index: 2; }
.course-hero__copy h1 { max-width: 740px; margin-top: 26px; font-size: clamp(4.3rem, 8vw, 8.8rem); }
.course-hero__copy > p { max-width: 590px; margin-top: 26px; font-size: clamp(1.05rem, 1.35vw, 1.25rem); }
.course-hero__machine { position: relative; width: min(100%, 650px); margin-left: auto; display: grid; grid-template-columns: minmax(92px,1fr) minmax(72px,.58fr) minmax(110px,1.18fr) minmax(72px,.58fr) minmax(92px,1fr); align-items: center; gap: 8px; padding: 54px 28px 86px; border: 1px solid var(--line-strong); background: linear-gradient(90deg,rgba(199,255,94,.025) 1px,transparent 1px),linear-gradient(rgba(199,255,94,.025) 1px,transparent 1px),#0a0d0e; background-size: 22px 22px; box-shadow: 0 32px 100px rgba(0,0,0,.32); }
.course-hero__machine::before { content: "VISIBLE CUSTODY PATH · NOT A DECORATIVE PIPELINE"; position: absolute; left: 28px; top: 20px; color: var(--muted); font: .53rem var(--mono); letter-spacing: .09em; }
.hero-custody__endpoint,.hero-custody__server { min-width: 0; min-height: 170px; display: grid; align-content: center; gap: 9px; padding: 15px; border: 1px solid var(--line-strong); background: rgba(8,10,11,.92); text-align: center; }
.hero-custody__endpoint { border-color: rgba(199,255,94,.5); }
.hero-custody__server { border-color: rgba(255,139,69,.48); }
.hero-custody__endpoint span,.hero-custody__server span,.hero-custody__endpoint small,.hero-custody__server small { color: var(--muted); font: .48rem var(--mono); }
.hero-custody__endpoint strong { color: var(--signal); font-size: clamp(.62rem,1vw,.82rem); }
.hero-custody__server strong { color: #ff8b45; font-size: clamp(.58rem,.9vw,.76rem); }
.hero-custody__operation { min-width: 0; display: grid; justify-items: center; gap: 8px; color: var(--muted); font: .48rem var(--mono); text-align: center; }
.hero-custody__operation i { position: relative; width: 100%; height: 1px; background: var(--line-strong); }
.hero-custody__operation i::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; background: var(--signal); box-shadow: 0 0 12px rgba(199,255,94,.6); animation: custody-packet 2.8s cubic-bezier(.4,0,.2,1) infinite; }
.hero-custody__operation:nth-of-type(4) i::after { animation-delay: 1.4s; }
.hero-custody__operation code { color: var(--paper); }
.hero-custody__keyline { position: absolute; left: 28px; right: 28px; bottom: 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: var(--signal); font: .49rem var(--mono); }
.hero-custody__keyline strong { min-width: 0; padding-block: 6px; border-block: 1px dashed rgba(199,255,94,.34); color: var(--muted); font-weight: 500; text-align: center; }
@keyframes custody-packet { 0%,12% { left: 0; opacity: 0; } 22% { opacity: 1; } 78% { opacity: 1; } 88%,100% { left: calc(100% - 7px); opacity: 0; } }

.course-map { position: sticky; z-index: 10; top: 0; width: 100%; display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); border-block: 1px solid var(--line); background: rgba(8,10,11,.94); backdrop-filter: blur(16px); }
.course-map a { min-width: 0; min-height: 70px; display: grid; grid-template-columns: auto 1fr; align-content: center; align-items: baseline; gap: 8px; padding: 12px clamp(8px,1.5vw,22px); border-right: 1px solid var(--line); color: var(--muted); }
.course-map a:last-child { border-right: 0; }
.course-map span { font: .52rem var(--mono); }
.course-map strong { overflow: hidden; font-size: clamp(.68rem,.9vw,.84rem); font-weight: 620; text-overflow: ellipsis; }
.course-map a:hover { background: var(--signal); color: var(--signal-ink); }

.course-chapter { width: min(100%, 1440px); margin-inline: auto; padding: clamp(100px, 12vw, 180px) max(20px,calc((100% - var(--max)) / 2)); border-bottom: 1px solid var(--line); }
.course-chapter--paper { background: var(--paper); color: var(--ink); }
.course-chapter--paper p { color: #4f5654; }
.course-chapter--signal { background: var(--signal); color: var(--signal-ink); }
.course-chapter--signal p { color: #33400f; }
.course-chapter__heading { display: grid; grid-template-columns: minmax(150px,.35fr) minmax(0,1.65fr); column-gap: clamp(28px,6vw,92px); align-items: start; }
.course-chapter__heading .chapter-number { grid-row: 1 / span 2; padding-top: 12px; font: .66rem var(--mono); letter-spacing: .1em; }
.course-chapter__heading h2 { max-width: 920px; font-size: clamp(3.4rem,7vw,7.6rem); }
.course-chapter__heading p { grid-column: 2; max-width: 720px; margin-top: 30px; font-size: clamp(1rem,1.3vw,1.2rem); }
.course-analogy { max-width: 850px; display: grid; grid-template-columns: minmax(170px,.4fr) minmax(0,1fr); gap: 30px; margin: 54px 0 0 auto; padding-top: 24px; border-top: 1px solid currentColor; }
.course-analogy strong { font-size: 1rem; }
.course-analogy p { font-size: .92rem; }
.course-analogy--dark { color: var(--signal-ink); }
.course-analogy--dark p { color: #33400f; }

.byte-lab { margin-top: clamp(56px,7vw,90px); border: 1px solid #a8aaa5; background: #fff; color: var(--ink); box-shadow: 12px 12px 0 #d2d0c7; }
.byte-lab > label { display: grid; grid-template-columns: 210px minmax(0,1fr); align-items: center; min-height: 112px; padding: 24px 30px; border-bottom: 1px solid #b8bab4; }
.byte-lab label span { color: #606664; font: .65rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.byte-lab input { width: 100%; border: 0; border-bottom: 2px solid #101314; border-radius: 0; background: transparent; color: #101314; font-size: clamp(1.8rem,4vw,4rem); font-weight: 580; letter-spacing: -.04em; outline: 0; }
.byte-lab input:focus { border-color: #5c8507; }
.byte-lab__readout { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr .5fr; }
.byte-lab__readout > div { min-width: 0; min-height: 120px; padding: 22px; border-right: 1px solid #b8bab4; }
.byte-lab__readout > div:last-child { border-right: 0; }
.byte-lab__readout span,.transform-output > span { display: block; margin-bottom: 15px; color: #737875; font: .58rem var(--mono); letter-spacing: .08em; }
.byte-lab__readout strong,.byte-lab__readout code { overflow-wrap: anywhere; color: #101314; font-size: clamp(.8rem,1.25vw,1rem); }
.byte-strip { min-height: 128px; display: flex; align-items: stretch; gap: 1px; padding: 22px; overflow-x: auto; border-top: 1px solid #b8bab4; background: #d7d6cf; }
.byte-strip > span { flex: 0 0 82px; display: grid; place-items: center; gap: 3px; padding: 11px 6px; background: #101314; color: #f4f2ea; }
.byte-strip small { justify-self: start; color: #8b9491; font: .48rem var(--mono); }
.byte-strip strong { color: var(--signal); font: 1.75rem var(--mono); text-transform: uppercase; }
.byte-strip code { color: #b8bfbc; font-size: .55rem; }

.transform-lab { margin-top: clamp(56px,7vw,90px); }
.transform-input { display: grid; grid-template-columns: 220px minmax(0,1fr); align-items: end; gap: 20px; margin-bottom: 20px; }
.transform-input > span { padding-bottom: 15px; color: var(--muted); font: .62rem var(--mono); text-transform: uppercase; }
.transform-input input { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--paper); border-radius: 0; background: transparent; color: var(--paper); font-size: clamp(1.45rem,3vw,3.1rem); outline: 0; }
.transform-lanes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line-strong); }
.transform-lane { min-width: 0; display: flex; flex-direction: column; padding: clamp(22px,3vw,40px); border-right: 1px solid var(--line-strong); }
.transform-lane:last-child { border-right: 0; }
.transform-lane header > span { display: block; color: var(--signal); font: .61rem var(--mono); letter-spacing: .1em; }
.transform-lane header strong { display: block; margin-top: 12px; font-size: clamp(1.15rem,2vw,1.75rem); }
.transform-lane > p { min-height: 112px; margin-top: 22px; font-size: .88rem; }
.transform-output { min-height: 176px; margin-top: 26px; padding: 18px; border: 1px solid var(--line); background: var(--ink-soft); }
.transform-output code { display: block; max-height: 140px; overflow: auto; color: var(--paper); font-size: .66rem; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.transform-key { margin-top: 26px; padding: 13px 15px; border: 1px solid rgba(199,255,94,.28); background: rgba(199,255,94,.04); }
.transform-key span { display: block; margin-bottom: 7px; color: var(--signal); font: .5rem var(--mono); letter-spacing: .08em; }
.transform-key code { display: block; color: var(--paper); font-size: .58rem; overflow-wrap: anywhere; }
.transform-lane--encrypt .transform-output { margin-top: 10px; }
.transform-lane button,.key-model-lab button,.tamper-lab button,.kdf-lab button,.knowledge-questions button { min-height: 44px; padding: 8px 13px; border: 1px solid var(--line-strong); background: transparent; color: inherit; font-size: .76rem; font-weight: 650; cursor: pointer; }
.transform-lane button:hover,.key-model-lab button:hover,.tamper-lab button:hover,.kdf-lab button:hover,.knowledge-questions button:hover { border-color: var(--signal); }
.transform-lane > button { margin-top: 16px; }
.transform-actions { display: flex; gap: 8px; margin-top: 16px; }
.transform-actions button { flex: 1; }
.transform-lane output { min-height: 53px; display: block; margin-top: 14px; color: var(--muted); font-size: .75rem; }
.transform-verdict { margin-top: 18px; color: var(--muted); font: .62rem var(--mono); }
.term-rule { display: grid; grid-template-columns: repeat(6,auto); justify-content: end; gap: 10px 20px; margin-top: 30px; font: .63rem var(--mono); }
.term-rule span { color: var(--muted); }
.term-rule strong { color: var(--signal); }

.key-model-lab { margin-top: clamp(56px,7vw,90px); border: 1px solid #a7aaa3; background: #e3e1d7; }
.key-model-switch { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #a7aaa3; }
.key-model-switch button { min-height: 62px; border: 0; border-right: 1px solid #a7aaa3; }
.key-model-switch button:last-child { border-right: 0; }
.key-model-switch button[aria-pressed="true"] { background: #101314; color: var(--signal); }
.key-model { padding: clamp(26px,5vw,70px); }
.key-model__stage,.mailbox-sim { display: grid; grid-template-columns: 1fr minmax(180px,.75fr) 1fr; align-items: center; gap: clamp(20px,5vw,80px); }
.key-person,.mailbox-person { display: grid; justify-items: center; gap: 18px; color: #555c59; font: .62rem var(--mono); text-align: center; }
.key-token { padding: 12px 15px; border: 1px solid #101314; background: #fff; color: #101314; font-size: .62rem; }
.key-token--private { background: #101314; color: var(--signal); }
.key-object,.mailbox { min-height: 190px; display: grid; place-content: center; gap: 15px; border: 2px solid #101314; background: #fff; color: #101314; text-align: center; transition: border-radius .3s ease, transform .3s ease, background .3s ease; }
.key-object > span,.mailbox > span { font: .57rem var(--mono); }
.key-object > strong,.mailbox > strong { font-size: 1rem; }
.key-object[data-state="locked"],.mailbox[data-state="sealed"] { border-radius: 50% 50% 5px 5px; background: #101314; color: var(--signal); transform: scale(.92); }
.key-object[data-state="rejected"],.mailbox[data-state="rejected"] { border-color: #b43832; color: #b43832; transform: rotate(-2deg); }
.key-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.key-controls button { border-color: #7e837e; color: #101314; }
.key-model > p { max-width: 700px; margin: 24px auto 0; text-align: center; }

.journey-lab { margin-top: clamp(56px,7vw,90px); border: 1px solid var(--line-strong); }
.journey-mode { display: flex; border-bottom: 1px solid var(--line-strong); }
.journey-mode button { flex: 1; min-height: 62px; border: 0; border-right: 1px solid var(--line-strong); background: none; color: var(--muted); cursor: pointer; }
.journey-mode button:last-child { border-right: 0; }
.journey-mode button[aria-pressed="true"] { background: var(--signal); color: var(--signal-ink); font-weight: 700; }
.journey-stage { position: relative; display: grid; grid-template-columns: 1fr .55fr 1fr .55fr 1fr; align-items: center; gap: 10px; min-height: 330px; padding: 34px; overflow: hidden; }
.journey-end,.journey-service { z-index: 2; min-height: 160px; display: grid; place-content: center; gap: 9px; padding: 14px; border: 1px solid var(--line-strong); background: var(--ink-soft); text-align: center; }
.journey-end > span,.journey-service > span { color: var(--muted); font: .54rem var(--mono); }
.journey-end strong,.journey-service strong { color: var(--signal); font-size: clamp(.65rem,1vw,.8rem); }
.journey-end small,.journey-service small { color: var(--muted); font-size: .65rem; }
.journey-path { position: relative; min-width: 0; height: 50px; }
.journey-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
.journey-packet { position: absolute; z-index: 5; left: calc(16.66% - 60px); top: 50%; width: 120px; padding: 12px 7px; border: 1px solid var(--signal); background: var(--ink); color: var(--signal); font: .55rem var(--mono); text-align: center; transform: translateY(-50%); transition: left .65s cubic-bezier(.2,.8,.2,1); }
.journey-stage[data-journey-stage="1"] .journey-packet { left: calc(33% - 60px); }
.journey-stage[data-journey-stage="2"] .journey-packet { left: calc(51% - 60px); }
.journey-stage[data-journey-stage="3"] .journey-packet { left: calc(83.33% - 60px); }
.journey-stage[data-journey-mode="server"] .journey-packet { border-color: var(--danger); color: var(--danger); }
.journey-controls { display: flex; align-items: center; gap: 24px; padding: 20px; border-top: 1px solid var(--line-strong); }
.journey-controls p { font-size: .82rem; }
.journey-responsibility { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line-strong); }
.journey-responsibility > div { min-width: 0; padding: 18px; border-right: 1px solid var(--line-strong); }
.journey-responsibility > div:last-child { border-right: 0; }
.journey-responsibility span,.journey-responsibility strong { display: block; }
.journey-responsibility span { color: var(--muted); font: .5rem var(--mono); letter-spacing: .08em; }
.journey-responsibility strong { margin-top: 8px; color: var(--signal); font: 650 .64rem var(--mono); overflow-wrap: anywhere; }
.journey-stage[data-journey-mode="server"] + .journey-responsibility strong { color: var(--danger); }
.e2ee-rule { max-width: 850px; display: grid; grid-template-columns: .5fr 1fr; gap: 28px; margin: 50px 0 0 auto; padding-top: 24px; border-top: 1px solid var(--line-strong); }

.tamper-lab { margin-top: clamp(56px,7vw,90px); display: grid; grid-template-columns: minmax(150px,.55fr) 40px minmax(0,1.45fr); gap: 20px; align-items: center; padding: clamp(24px,5vw,60px); border: 1px solid #2b350c; background: var(--ink); color: var(--paper); }
.tamper-message,.tamper-artifact { min-height: 200px; display: grid; align-content: center; gap: 16px; padding: 22px; border: 1px solid var(--line-strong); }
.tamper-message span,.tamper-artifact span { color: var(--muted); font: .56rem var(--mono); }
.tamper-message strong { font-size: clamp(1.15rem,2vw,2rem); }
.tamper-message small { margin-top: 20px; color: var(--muted); font: .5rem var(--mono); }
.tamper-message code { color: var(--signal); font-size: .56rem; overflow-wrap: anywhere; }
.tamper-arrow { color: var(--signal); font-size: 2rem; text-align: center; }
.tamper-artifact code { max-height: 150px; overflow: auto; color: var(--paper-soft); font-size: .63rem; line-height: 1.8; overflow-wrap: anywhere; }
.tamper-artifact code mark { padding: 2px 1px; background: var(--danger); color: var(--ink); box-shadow: 0 0 0 2px rgba(255,141,120,.2); }
.tamper-byte-change { min-height: 34px; padding: 8px 10px; border: 1px solid var(--line); color: var(--paper-soft); font: .55rem var(--mono); }
.tamper-artifact i { width: fit-content; padding: 5px 8px; border: 1px solid var(--muted); color: var(--muted); font: normal .54rem var(--mono); }
.tamper-artifact i[data-state="intact"] { border-color: var(--signal); color: var(--signal); }
.tamper-artifact i[data-state="broken"] { border-color: var(--danger); color: var(--danger); }
.tamper-controls { grid-column: 1 / -1; display: flex; gap: 10px; }
.tamper-controls button { flex: 1; }
.tamper-lab output { grid-column: 1 / -1; min-height: 56px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--paper-soft); }

.kdf-lab { margin-top: clamp(56px,7vw,90px); border: 1px solid #a7aaa3; background: #fff; color: #101314; }
.kdf-inputs { display: grid; grid-template-columns: 1.4fr 1fr auto auto; align-items: end; gap: 18px; padding: 26px; border-bottom: 1px solid #b8bab4; }
.kdf-inputs label { display: grid; gap: 8px; }
.kdf-inputs label > span { color: #626764; font: .57rem var(--mono); text-transform: uppercase; }
.kdf-inputs input[type="text"] { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid #101314; border-radius: 0; background: transparent; color: #101314; outline: 0; }
.kdf-inputs input[type="range"] { accent-color: #689b09; }
.kdf-inputs label strong { font-size: .7rem; }
.kdf-inputs button { border-color: #797e79; color: #101314; }
.kdf-machine { display: grid; grid-template-columns: 1fr auto 1fr auto .7fr auto 1.5fr; align-items: stretch; gap: 10px; padding: 26px; }
.kdf-machine > div { min-width: 0; min-height: 130px; display: grid; align-content: center; gap: 14px; padding: 16px; border: 1px solid #b8bab4; }
.kdf-machine > strong { align-self: center; color: #6c716e; }
.kdf-machine span { color: #737875; font: .54rem var(--mono); }
.kdf-machine code { font-size: .62rem; overflow-wrap: anywhere; }
.kdf-machine .kdf-key { background: #101314; color: var(--signal); }
.kdf-lab output { display: block; padding: 20px 26px; border-top: 1px solid #b8bab4; color: #575d5a; font-size: .78rem; }
.kdf-history { border-top: 1px solid #b8bab4; }
.kdf-history header { display: grid; grid-template-columns: .55fr 1.45fr; gap: 18px; padding: 18px 26px; }
.kdf-history header span { color: #666c68; font: .56rem var(--mono); letter-spacing: .08em; }
.kdf-history header strong { font-size: .8rem; }
.kdf-history ol { list-style: none; }
.kdf-history li { display: grid; grid-template-columns: 120px minmax(0,1fr) minmax(180px,.8fr); gap: 18px; padding: 13px 26px; border-top: 1px solid #d2d0c8; }
.kdf-history li span { color: #5d625f; font: .52rem var(--mono); }
.kdf-history li[data-repeated="true"] span { color: #3f6500; font-weight: 700; }
.kdf-history li strong { font: .64rem var(--mono); overflow-wrap: anywhere; }
.kdf-history li small { color: #6a706c; font: .52rem var(--mono); }

.recovery-simulator--course { margin-top: clamp(56px,7vw,90px); }
.hierarchy-rule { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 24px; border: 1px solid var(--line-strong); }
.hierarchy-rule > div { min-height: 120px; padding: 22px; border-right: 1px solid var(--line-strong); }
.hierarchy-rule > div:last-child { border-right: 0; }
.hierarchy-rule strong,.hierarchy-rule span { display: block; }
.hierarchy-rule strong { color: var(--signal); }
.hierarchy-rule span { margin-top: 10px; color: var(--muted); font-size: .76rem; }
.limit-list { display: grid; grid-template-columns: repeat(3,1fr); margin-top: clamp(56px,7vw,90px); border-top: 1px solid #a7aaa3; border-left: 1px solid #a7aaa3; }
.limit-list article { min-height: 250px; padding: clamp(22px,3vw,38px); border-right: 1px solid #a7aaa3; border-bottom: 1px solid #a7aaa3; }
.limit-list article > span { color: #747a76; font: .55rem var(--mono); }
.limit-list h3 { margin-top: 38px; font-size: clamp(1.35rem,2.3vw,2.3rem); }
.limit-list p { margin-top: 18px; font-size: .84rem; }

.course-chapter--finale { background: radial-gradient(circle at 50% 55%,rgba(199,255,94,.09),transparent 35%),var(--ink); }
.system-finale { margin-top: clamp(56px,7vw,90px); border: 1px solid var(--line-strong); }
.system-finale > label { display: grid; grid-template-columns: 190px minmax(0,1fr); align-items: center; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--line-strong); }
.system-finale > label span { color: var(--muted); font: .56rem var(--mono); text-transform: uppercase; }
.system-finale > label textarea { width: 100%; min-height: 3.4em; padding: 10px 0; border: 0; border-bottom: 1px solid var(--paper); border-radius: 0; background: transparent; color: var(--paper); font: inherit; line-height: 1.45; overflow-wrap: anywhere; resize: vertical; outline: 0; }
.system-finale__trace { display: grid; grid-template-columns: 1fr auto 1.25fr auto 1fr; align-items: stretch; }
.system-finale__trace article { min-width: 0; min-height: 270px; display: grid; align-content: center; gap: 14px; padding: 24px; background: rgba(255,255,255,.015); }
.system-finale__trace article:nth-of-type(2) { background: rgba(255,139,69,.045); }
.system-finale__trace > i { align-self: center; color: var(--signal); font: normal .56rem var(--mono); writing-mode: vertical-rl; }
.system-finale__trace span { color: var(--muted); font: .52rem var(--mono); }
.system-finale__trace strong { color: var(--signal); font-size: .76rem; }
.system-finale__trace article:nth-of-type(2) strong { color: #ff8b45; }
.system-finale__trace code { max-height: 140px; overflow: auto; color: var(--paper-soft); font-size: .58rem; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.system-finale__key { display: grid; grid-template-columns: 190px minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 18px 24px; border-top: 1px solid var(--line-strong); }
.system-finale__key span { color: var(--muted); font: .52rem var(--mono); }
.system-finale__key code { color: var(--signal); font-size: .58rem; overflow-wrap: anywhere; }
.system-finale__key button { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--paper); cursor: pointer; }
.system-finale__verdict { padding: 22px 24px; border-top: 1px solid var(--line-strong); background: var(--signal); color: var(--signal-ink); }
.system-finale__verdict strong { display: block; }
.system-finale__verdict p { margin-top: 6px; color: rgba(23,32,0,.72); }

.course-check { width: min(100% - 40px,var(--max)); display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(40px,8vw,120px); margin-inline: auto; padding: clamp(100px,12vw,180px) 0; }
.course-check h2 { margin-top: 28px; font-size: clamp(3.2rem,6vw,6.3rem); }
.course-check > div:first-child p { max-width: 330px; margin-top: 26px; }
.knowledge-progress { margin-top: 38px; }
.knowledge-progress > strong { color: var(--signal); font: 700 1.8rem var(--mono); }
.knowledge-progress > span { display: block; height: 4px; margin-top: 12px; background: var(--line); }
.knowledge-progress i { display: block; width: 0; height: 100%; background: var(--signal); transition: width .28s ease; }
.knowledge-progress p { margin-top: 10px !important; color: var(--muted); font-size: .72rem; }
.knowledge-questions { border-top: 1px solid var(--line-strong); }
.knowledge-questions article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; padding: 27px 0; border-bottom: 1px solid var(--line-strong); }
.knowledge-questions article > p { color: var(--paper); }
.knowledge-questions article > div { display: flex; gap: 8px; }
.knowledge-questions button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.knowledge-questions article[data-result="correct"] button[aria-pressed="true"] { border-color: var(--signal); background: var(--signal); color: var(--signal-ink); }
.knowledge-questions article[data-result="incorrect"] button[aria-pressed="true"] { border-color: var(--danger); background: var(--danger); color: var(--ink); }
.knowledge-questions output { grid-column: 1 / -1; color: var(--muted); font-size: .75rem; }
.knowledge-complete { margin-top: 24px; padding: 28px; border: 1px solid var(--signal); background: rgba(199,255,94,.08); }
.knowledge-complete[hidden] { display: none; }
.knowledge-complete span,.knowledge-complete strong { display: block; }
.knowledge-complete span { color: var(--signal); font: .58rem var(--mono); letter-spacing: .1em; }
.knowledge-complete strong { max-width: 680px; margin-top: 14px; font-size: 1.2rem; }
.knowledge-complete .button { margin-top: 24px; }

.concept-visualizer { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line-strong); background: var(--ink); color: var(--paper); }
.concept-visualizer canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; pointer-events: none; }
.concept-visualizer__legend,.journey-probe { position: absolute; z-index: 2; inset: 14px 16px auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; color: rgba(241,239,231,.78); font: .51rem var(--mono); letter-spacing: .08em; pointer-events: none; }
.concept-visualizer__legend span:nth-child(2),.journey-probe span:nth-child(2) { text-align: center; }
.concept-visualizer__legend span:nth-child(3),.journey-probe span:nth-child(3) { text-align: right; }
.concept-visualizer__telemetry { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 11px; display: flex; justify-content: space-between; color: rgba(241,239,231,.62); font: .48rem var(--mono); letter-spacing: .08em; pointer-events: none; }
.concept-visualizer--transform { height: clamp(360px,36vw,480px); margin-bottom: 36px; box-shadow: 0 24px 80px rgba(0,0,0,.34); }
.concept-visualizer--keys { height: clamp(290px,30vw,400px); border: 0; border-bottom: 1px solid #a7aaa3; }
.concept-visualizer--journey { height: clamp(310px,32vw,430px); border: 0; border-bottom: 1px solid var(--line-strong); }
.concept-visualizer--tamper { grid-column: 1 / -1; height: clamp(300px,30vw,410px); margin-bottom: 18px; }
.concept-visualizer--tamper .concept-visualizer__telemetry { display: none; }

.journey-lab .journey-stage { grid-template-columns: repeat(3,minmax(0,1fr)); min-height: 0; padding: 0; gap: 0; overflow: visible; }
.journey-lab .journey-path { display: none; }
.journey-lab .journey-end,.journey-lab .journey-service { min-height: 110px; border: 0; border-right: 1px solid var(--line-strong); background: transparent; }
.journey-lab .journey-end:last-child { border-right: 0; }

.transform-lanes { background: rgba(255,255,255,.012); }
.transform-lane { position: relative; }
.transform-lane::before { content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 2px; background: var(--signal); }
.transform-lane--hash::before { background: var(--paper); }
.transform-lane--encrypt::before { background: var(--danger); }
.key-model-lab { box-shadow: 0 28px 70px rgba(8,10,11,.18); }
.tamper-lab { box-shadow: 0 30px 80px rgba(38,52,8,.26); }

@media (max-width: 980px) {
  .course-hero { grid-template-columns: 1fr .85fr; }
  .course-map { overflow-x: auto; grid-template-columns: repeat(9,minmax(118px,1fr)); }
  .transform-lanes { grid-template-columns: 1fr; }
  .transform-lane { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .transform-lane:last-child { border-bottom: 0; }
  .transform-lane > p { min-height: auto; }
  .concept-visualizer--transform { height: 430px; }
  .kdf-inputs { grid-template-columns: 1fr 1fr; }
  .kdf-machine { grid-template-columns: 1fr auto 1fr; }
  .kdf-machine > strong:nth-of-type(3),.kdf-key { grid-column: span 1; }
  .kdf-machine .kdf-key { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .course-hero { min-height: auto; grid-template-columns: 1fr; padding: 82px 0 110px; }
  .course-hero__machine { width: min(88vw,480px); margin-inline: auto; }
  .course-hero::after { bottom: 20px; }
  .course-map { position: relative; top: auto; }
  .course-chapter__heading { grid-template-columns: 1fr; }
  .course-chapter__heading .chapter-number { grid-row: auto; padding: 0 0 25px; }
  .course-chapter__heading p { grid-column: 1; }
  .course-analogy,.e2ee-rule { grid-template-columns: 1fr; gap: 12px; }
  .byte-lab > label { grid-template-columns: 1fr; gap: 14px; }
  .byte-lab__readout { grid-template-columns: 1fr 1fr; }
  .byte-lab__readout > div:nth-child(2) { border-right: 0; }
  .byte-lab__readout > div:nth-child(-n+2) { border-bottom: 1px solid #b8bab4; }
  .transform-input { grid-template-columns: 1fr; }
  .key-model__stage,.mailbox-sim { grid-template-columns: 1fr; }
  .key-object,.mailbox { width: min(260px,100%); min-height: 150px; margin-inline: auto; }
  .journey-lab .journey-stage { grid-template-columns: 1fr; }
  .journey-lab .journey-end,.journey-lab .journey-service { min-height: 92px; border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .journey-lab .journey-end:last-child { border-bottom: 0; }
  .journey-controls { align-items: stretch; flex-direction: column; }
  .journey-responsibility { grid-template-columns: 1fr; }
  .journey-responsibility > div { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .journey-responsibility > div:last-child { border-bottom: 0; }
  .tamper-lab { grid-template-columns: 1fr; }
  .tamper-arrow { transform: rotate(90deg); }
  .tamper-controls,.tamper-lab output { grid-column: 1; }
  .kdf-machine { grid-template-columns: 1fr; }
  .kdf-machine > strong { justify-self: center; }
  .kdf-machine .kdf-key { grid-column: 1; }
  .limit-list { grid-template-columns: 1fr 1fr; }
  .course-check { grid-template-columns: 1fr; }
  .system-finale__trace { grid-template-columns: 1fr; }
  .system-finale__trace > i { padding: 8px; writing-mode: horizontal-tb; text-align: center; }
  .system-finale__trace article { min-height: 190px; }
  .system-finale__key { grid-template-columns: 1fr; }
  .dev-mode-brief { grid-template-columns: 1fr; gap: 9px; }
}

@media (max-width: 520px) {
  .course-hero { width: min(100% - 32px,var(--max)); padding-top: 60px; }
  .course-hero__copy h1 { font-size: clamp(3.55rem,18vw,5.2rem); }
  .course-hero__machine { width: 100%; grid-template-columns: 1fr; padding: 48px 18px 74px; }
  .course-hero__machine::before { left: 18px; }
  .hero-custody__endpoint,.hero-custody__server { min-height: 92px; }
  .hero-custody__operation { grid-template-columns: auto 1fr auto; align-items: center; }
  .hero-custody__operation i { width: 100%; }
  .hero-custody__keyline { left: 18px; right: 18px; bottom: 18px; }
  .course-chapter { padding-block: 84px; }
  .course-chapter__heading h2 { font-size: clamp(3rem,15vw,4.7rem); }
  .concept-visualizer--transform { height: 370px; }
  .concept-visualizer--keys,.concept-visualizer--journey { height: 310px; }
  .concept-visualizer--tamper { height: 300px; }
  .concept-visualizer__legend,.journey-probe { inset-inline: 10px; gap: 8px; font-size: .41rem; }
  .concept-visualizer__telemetry { left: 10px; right: 10px; padding-right: 0; }
  .byte-lab { box-shadow: 6px 6px 0 #d2d0c7; }
  .byte-lab input { font-size: 1.8rem; }
  .byte-lab__readout { grid-template-columns: 1fr; }
  .byte-lab__readout > div { min-height: 94px; border-right: 0; border-bottom: 1px solid #b8bab4; }
  .byte-lab__readout > div:last-child { border-bottom: 0; }
  .transform-actions,.key-controls,.tamper-controls { flex-direction: column; }
  .term-rule { grid-template-columns: auto 1fr; justify-content: stretch; }
  .key-model-switch { grid-template-columns: 1fr; }
  .key-model-switch button { border-right: 0; border-bottom: 1px solid #a7aaa3; }
  .key-model-switch button:last-child { border-bottom: 0; }
  .kdf-inputs { grid-template-columns: 1fr; }
  .kdf-history header,.kdf-history li { grid-template-columns: 1fr; gap: 5px; }
  .system-finale > label { grid-template-columns: 1fr; }
  .hierarchy-rule { grid-template-columns: 1fr; }
  .hierarchy-rule > div { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .hierarchy-rule > div:last-child { border-bottom: 0; }
  .limit-list { grid-template-columns: 1fr; }
  .limit-list article { min-height: auto; }
  .knowledge-questions article { grid-template-columns: 1fr; }
  .knowledge-questions article > div { justify-content: stretch; }
  .knowledge-questions button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .matrix-remold-layer { display: none !important; }
}