/* GENERATED from hoa-data-discipline/14-STORY-PAGE.html — do not hand-edit.
   Regenerate with scratchpad/gen_gap.py. */

#tabpanel-gap /* ------------------------------------------------------------------
     H-OA brand tokens. Per branding/standards/BRANDING.md the brand is
     dark-only — that's a deliberate single-world commitment,
#tabpanel-gap so the
     tokens do not vary by theme. A light-theme stamp must not break it.
     ------------------------------------------------------------------ */
  :root,
#tabpanel-gap :root[data-theme="dark"],
#tabpanel-gap {
    --bg:         #0a0e1a;
    --elev-1:     #11182b;
    --elev-2:     #1a2342;
    --line:       #1f2a4a;
    --text:       #e3eaff;
    --text-2:     #aab4d4;
    --text-3:     #7886a8;
    --accent:     #4eead0;
    --accent-dim: rgba(78, 234, 208, 0.16);
    --gold:       #b69d6c;
    --gold-dim:   rgba(182, 157, 108, 0.16);

    /* readout grounds — elev-1 washed toward each state colour */
    --panel-risk: #202431;
    --panel-good: #172b3a;

    --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
    --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
    --step-3:  clamp(2rem, 1.5rem + 2.4vw, 3.4rem);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 620ms;

    color-scheme: dark;
  }
#tabpanel-gap * { box-sizing: border-box; }
#tabpanel-gap {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
#tabpanel-gap .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.1rem, 3vw, 2rem) 5rem;
  }
#tabpanel-gap .eyebrow {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0;
  }
#tabpanel-gap h2 {
    font-size: var(--step-3);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 600;
    text-wrap: balance;
    margin: 0.6rem 0 0.85rem;
    max-width: 20ch;
  }
#tabpanel-gap .lede {
    color: var(--text-2);
    font-size: var(--step-1);
    max-width: 56ch;
    margin: 0;
    text-wrap: pretty;
  }
#tabpanel-gap /* ---------------- readout ---------------- */

  .flowarrow {
    display: flex;
    justify-content: center;
    margin-top: clamp(0.9rem, 2vw, 1.3rem);
  }
#tabpanel-gap .flowarrow svg { display: block; width: 46px; height: 26px; }
#tabpanel-gap .flowarrow path { fill: var(--gold); transition: fill 460ms var(--ease); }
#tabpanel-gap .flowarrow.closed path { fill: var(--accent); }
#tabpanel-gap .result {
    margin-top: clamp(0.6rem, 1.4vw, 0.9rem);
    background: var(--panel-risk);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    padding: clamp(1.4rem, 3.5vw, 2.25rem);
    display: grid;
    gap: 1.4rem;
    transition: background-color 460ms var(--ease), border-top-color 460ms var(--ease);
  }
#tabpanel-gap .result.closed {
    background: var(--panel-good);
    border-top-color: var(--accent);
  }

  @keyframes materialize {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
#tabpanel-gap .result.is-new { animation: materialize 420ms var(--ease) both; }
#tabpanel-gap .result-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
#tabpanel-gap .result-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
#tabpanel-gap .result-toggle .chev {
    flex: none;
    color: var(--text-3);
    transition: transform 320ms var(--ease), color 200ms var(--ease);
  }
#tabpanel-gap .result-toggle:hover .chev { color: var(--text); }
#tabpanel-gap .result-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
#tabpanel-gap .result-body { display: grid; gap: 1.4rem; }
#tabpanel-gap .result.collapsed .result-body { display: none; }
#tabpanel-gap .result-body.is-new { animation: materialize 380ms var(--ease) both; }
#tabpanel-gap .readout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem 2.5rem;
    align-items: end;
  }
#tabpanel-gap .state-line {
    font-size: var(--step-2);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0;
    max-width: 18ch;
    text-wrap: balance;
  }
#tabpanel-gap .state-sub {
    margin: 0;
    color: var(--text-2);
    font-size: var(--step-0);
    line-height: 1.45;
    max-width: 44ch;
    text-wrap: pretty;
  }
#tabpanel-gap .meters { display: grid; gap: 0.75rem; min-width: min(320px, 72vw); }
#tabpanel-gap .meter-row {
    display: grid;
    grid-template-columns: 4.2rem 1fr 7.5rem;
    align-items: center;
    gap: 0.75rem;
  }
#tabpanel-gap .meter-label {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    color: var(--text-3);
  }
#tabpanel-gap .meter-track {
    height: 10px;
    border-radius: 5px;
    position: relative;
  }
#tabpanel-gap .meter-track.risk { background: rgba(182, 157, 108, 0.26); }
#tabpanel-gap .meter-track.value { background: rgba(78, 234, 208, 0.22); }
#tabpanel-gap .meter-fill {
    display: block;
    height: 100%;
    width: 0;
    min-width: 10px;
    border-radius: 5px;
    position: relative;
    transition: width var(--dur) var(--ease);
  }
#tabpanel-gap .meter-fill::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    bottom: -4px;
    width: 2px;
    border-radius: 1px;
    background: inherit;
  }
#tabpanel-gap .meter-fill.risk { background: var(--gold); }
#tabpanel-gap .meter-fill.value { background: var(--accent); }
#tabpanel-gap .meter-value {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-align: right;
    color: var(--text-2);
  }
#tabpanel-gap /* ---------------- the value chain ---------------- */

  .chain-shell { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
#tabpanel-gap .chain-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.1rem;
    margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
    border-bottom: 1px solid var(--line);
  }
#tabpanel-gap .chain-title {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
  }
#tabpanel-gap .modes { display: flex; gap: 0.55rem; }
#tabpanel-gap .modebtn {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.45rem 1.15rem;
    cursor: pointer;
    transition: color 200ms var(--ease), border-color 200ms var(--ease), background-color 200ms var(--ease);
  }
#tabpanel-gap .modebtn:hover { color: var(--text-2); border-color: var(--text-3); }
#tabpanel-gap .modebtn.is-active { color: var(--bg); background: var(--accent); border-color: var(--accent); }
#tabpanel-gap .modebtn[data-mode="reality"].is-active { background: var(--gold); border-color: var(--gold); }
#tabpanel-gap .modebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#tabpanel-gap .chain {
    position: relative;
    background: var(--elev-1);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1rem, 3vw, 1.9rem);
  }
#tabpanel-gap .seg {
    position: absolute;
    z-index: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--line);
    pointer-events: none;
    transition: background-color 500ms var(--ease);
  }
#tabpanel-gap /* the handoff itself: fine in perception,
#tabpanel-gap the problem in reality */
  .seg.link { background: var(--accent); }
#tabpanel-gap .chain.reality .seg.link { background: var(--gold); }
#tabpanel-gap .chain-nodes { display: flex; align-items: flex-start; }
#tabpanel-gap .cnode {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
  }
#tabpanel-gap .chain-gap { flex: 0 0 0px; transition: flex-basis 760ms var(--ease); }
#tabpanel-gap .chain.reality .chain-gap { flex-basis: 26%; }
#tabpanel-gap .cdot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--text-3);
    background: var(--bg);
    flex: none;
    transition: border-color 400ms var(--ease), background-color 400ms var(--ease), box-shadow 400ms var(--ease);
  }
#tabpanel-gap .clabel {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-3);
    transition: color 400ms var(--ease);
  }
#tabpanel-gap .cnode.key .cdot {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 6px var(--accent-dim);
  }
#tabpanel-gap .cnode.key .clabel { color: var(--accent); }
#tabpanel-gap .chain.reality .cnode.key .cdot {
    border-color: var(--gold);
    background: var(--gold);
    box-shadow: 0 0 0 6px var(--gold-dim);
  }
#tabpanel-gap .chain.reality .cnode.key .clabel { color: var(--gold); }
#tabpanel-gap .reveal[hidden] { display: none; }
#tabpanel-gap .reveal.is-new { animation: materialize 520ms var(--ease) both; }

  @media (max-width: 560px) {
#tabpanel-gap .clabel { font-size: 0.58rem; letter-spacing: 0.04em; }
#tabpanel-gap .chain { padding: 1.35rem 0.6rem; border-radius: 18px; }
#tabpanel-gap .chain.reality .chain-gap { flex-basis: 18%; }
  }
#tabpanel-gap /* ---------------- the two sides ---------------- */

  .axis-shell { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
#tabpanel-gap .arena { position: relative; padding-top: 64px; }
#tabpanel-gap .sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 6vw, 5rem);
  }
#tabpanel-gap .side-panel {
    background: var(--elev-1);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: clamp(1rem, 2.5vw, 1.4rem) clamp(0.9rem, 2vw, 1.4rem) clamp(1rem, 2.5vw, 1.4rem);
    display: grid;
    gap: 1.35rem;
    /* panels are stretched to equal height by .sides; without this the
       shorter one distributes the slack into its rows and drops its
       track below the other's, taking its dots off the line */
    align-content: start;
  }
#tabpanel-gap .side-btn {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 0.8rem;
    width: 100%;
    /* fixed header height so a wrapped label can never push one panel's
       track below the other's, which would take its dots off the line */
    min-height: 3.4rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: color 200ms var(--ease), border-color 200ms var(--ease);
  }
#tabpanel-gap .side-btn:hover { color: var(--text-2); border-bottom-color: var(--text-3); }
#tabpanel-gap .side-btn[aria-expanded="true"] { color: var(--accent); border-bottom-color: var(--accent); }
#tabpanel-gap .side-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#tabpanel-gap .side-btn .label { flex: 1; }
#tabpanel-gap .side-btn .chev { transition: transform 240ms var(--ease); flex: none; }
#tabpanel-gap .side-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
#tabpanel-gap .side-icon { flex: none; width: 22px; height: 22px; }
#tabpanel-gap .side-icon path,
#tabpanel-gap .side-icon circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
#tabpanel-gap .side-track {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
#tabpanel-gap /* ONE line,
#tabpanel-gap first dot to last,
#tabpanel-gap drawn over both panels. Measured in JS from
     the live dots so it can never drift out of alignment with them. */
  .spine {
    position: absolute;
    z-index: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--line);
    pointer-events: none;
  }
#tabpanel-gap /* ---------------- lightbox detail ---------------- */

  .detail {
    margin-top: 1.5rem;
    background: var(--elev-2);
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--accent-dim);
    padding: clamp(1.35rem, 3vw, 2rem);
    display: grid;
    gap: 1.25rem;
  }
#tabpanel-gap .detail[hidden] { display: none; }

  @keyframes lightbox {
    from { opacity: 0; transform: translateY(-7px); }
    to   { opacity: 1; transform: none; }
  }
#tabpanel-gap .detail.is-open { animation: lightbox 320ms var(--ease) both; }
#tabpanel-gap .detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }
#tabpanel-gap .detail-eyebrow {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 0.3rem;
  }
#tabpanel-gap .detail-who {
    font-size: var(--step-2);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
  }
#tabpanel-gap .detail-def {
    margin: 0.5rem 0 0;
    font-size: var(--step-0);
    line-height: 1.45;
    max-width: 58ch;
    transition: color 320ms var(--ease);
  }
#tabpanel-gap .detail.bad  .detail-def { color: var(--gold); }
#tabpanel-gap .detail.good .detail-def { color: var(--accent); }
#tabpanel-gap .detail-close {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    color: var(--text-3);
    background: none;
    border: 1px solid var(--line);
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    flex: none;
  }
#tabpanel-gap .detail-close:hover { color: var(--text); border-color: var(--text-3); }
#tabpanel-gap .detail-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#tabpanel-gap .detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.8rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  }
#tabpanel-gap .detail-list li {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: 0.65rem;
    color: var(--text-2);
    font-size: var(--step-1);
    line-height: 1.45;
  }
#tabpanel-gap .detail-list svg { margin-top: 0.3em; width: 1.15rem; height: 1.15rem; }
#tabpanel-gap .detail-list svg path { stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-width: 1.5; }
#tabpanel-gap .detail.bad  .detail-list svg path { stroke: var(--gold); }
#tabpanel-gap .detail.good .detail-list svg path { stroke: var(--accent); }
#tabpanel-gap .dimmable { transition: opacity 320ms var(--ease); }
#tabpanel-gap.lightbox-open .dimmable { opacity: 0.45; }
#tabpanel-gap /* curly brace spanning the live gap,
#tabpanel-gap floating above both panels */
  .dim {
    position: absolute;
    top: 30px;
    height: 16px;
    transition: left var(--dur) var(--ease), width var(--dur) var(--ease);
    pointer-events: none;
  }
#tabpanel-gap .brace { display: block; width: 100%; height: 16px; }
#tabpanel-gap .brace path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 320ms var(--ease);
  }
#tabpanel-gap .dim.is-closed .brace path { stroke: var(--accent); }
#tabpanel-gap .dim-tag {
    position: absolute;
    left: 50%;
    top: -1.6rem;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
    transition: color 320ms var(--ease);
  }
#tabpanel-gap .dim.is-closed .dim-tag { color: var(--accent); }
#tabpanel-gap .node {
    position: relative;
    z-index: 2;
    flex: none;
    background: none;
    border: 0;
    padding: 0.5rem 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: 7.5rem;
  }
#tabpanel-gap .node:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 6px;
    border-radius: 6px;
  }
#tabpanel-gap .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--text-3);
    background: var(--bg);
    transition: border-color 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
    flex: none;
  }
#tabpanel-gap .node:hover .dot { border-color: var(--text-2); }
#tabpanel-gap .node[aria-pressed="true"] .dot {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 7px var(--accent-dim);
    transform: scale(1.1);
  }
#tabpanel-gap .node-name {
    font-size: var(--step-0);
    font-weight: 500;
    color: var(--text-3);
    text-align: center;
    line-height: 1.25;
    transition: color 240ms var(--ease);
  }
#tabpanel-gap .node[aria-pressed="true"] .node-name { color: var(--text); }
#tabpanel-gap /* ---------------- outcomes ---------------- */

  .outcome-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
  }
#tabpanel-gap .outcome-list li {
    display: grid;
    grid-template-columns: 0.55rem 1fr;
    gap: 0.75rem;
    color: var(--text-2);
    line-height: 1.5;
    max-width: 74ch;
  }
#tabpanel-gap .outcome-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    margin-top: 0.6em;
    transition: background-color 460ms var(--ease);
  }
#tabpanel-gap .result.closed .outcome-list li::before { background: var(--accent); }
#tabpanel-gap .outcome-list b { color: var(--text); font-weight: 600; }
#tabpanel-gap .bottomline {
    margin-top: 0.35rem;
    padding-top: 1.05rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.4rem;
  }
#tabpanel-gap .bottomline-label {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
  }
#tabpanel-gap .bottomline-text {
    margin: 0;
    font-size: var(--step-1);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--gold);
    max-width: 62ch;
    text-wrap: balance;
    transition: color 460ms var(--ease);
  }
#tabpanel-gap .result.closed .bottomline-text { color: var(--accent); }
#tabpanel-gap /* ---------------- consequence band ---------------- */

  .consequence {
    padding-top: 1.2rem;
    border-top: 1px dashed var(--line);
    display: grid;
    gap: 0.8rem;
  }
#tabpanel-gap .consequence h3 {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold);
    margin: 0;
    transition: color 460ms var(--ease);
  }
#tabpanel-gap .result.closed .consequence h3 { color: var(--accent); }
#tabpanel-gap /* ---------------- views ---------------- */

  .viewnav {
    display: flex;
    gap: clamp(1.25rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line);
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  }
#tabpanel-gap .viewbtn {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 0 0.8rem;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 200ms var(--ease), border-color 200ms var(--ease);
  }
#tabpanel-gap .viewbtn:hover { color: var(--text-2); }
#tabpanel-gap .viewbtn.is-active { color: var(--accent); border-bottom-color: var(--accent); }
#tabpanel-gap .viewbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#tabpanel-gap .view[hidden] { display: none; }
#tabpanel-gap .view.is-new { animation: materialize 420ms var(--ease) both; }
#tabpanel-gap /* ---------------- closer ---------------- */

  .closer { margin-top: clamp(1rem, 2vw, 1.5rem); }
#tabpanel-gap .teach {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
  }
#tabpanel-gap /* Each card hands its seven parts to a shared row grid,
#tabpanel-gap so head,
#tabpanel-gap title,
#tabpanel-gap duration,
#tabpanel-gap lede,
#tabpanel-gap bullets,
#tabpanel-gap closing paragraph and green line all sit in
     the same horizontal band across both cards no matter how the copy runs.
     Falls back to the plain flex column where subgrid is unsupported. */
  @supports (grid-template-rows: subgrid) {
    .teach { grid-template-rows: auto auto auto auto 1fr auto auto; }
#tabpanel-gap .teach-card {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
      row-gap: 1.1rem;
    }
#tabpanel-gap .teach-list { align-self: start; }
#tabpanel-gap .teach-close { margin-top: 0; }
#tabpanel-gap }
  .teach-card {
    background: var(--elev-1);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 26px;
    padding: clamp(1.35rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
#tabpanel-gap .teach-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
  }
#tabpanel-gap .teach-icon { flex: none; width: 26px; height: 26px; color: var(--accent); }
#tabpanel-gap .teach-icon path,
#tabpanel-gap .teach-icon circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
#tabpanel-gap .teach-for {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-3);
    line-height: 1.4;
  }
#tabpanel-gap .teach-title {
    margin: 0;
    font-size: var(--step-2);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
#tabpanel-gap .teach-format {
    margin: -0.55rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
  }
#tabpanel-gap .teach-format svg { flex: none; width: 15px; height: 15px; }
#tabpanel-gap .teach-format svg path,
#tabpanel-gap .teach-format svg circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
#tabpanel-gap .teach-lede { margin: 0; color: var(--text-2); line-height: 1.5; }
#tabpanel-gap .teach-lede b { color: var(--text); font-weight: 600; }
#tabpanel-gap .teach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
#tabpanel-gap .teach-list li {
    display: grid;
    grid-template-columns: 1.05rem 1fr;
    gap: 0.6rem;
    color: var(--text-2);
    line-height: 1.45;
  }
#tabpanel-gap .teach-list svg { margin-top: 0.24em; width: 1.05rem; height: 1.05rem; }
#tabpanel-gap .teach-list svg path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
#tabpanel-gap .teach-kicker {
    margin: 0;
    color: var(--text-2);
    line-height: 1.5;
  }
#tabpanel-gap /* pinned to the foot of the card so both sides land together */
  .teach-close {
    margin: auto 0 0;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
    color: var(--accent);
    font-size: var(--step-1);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-wrap: pretty;
  }
#tabpanel-gap /* ---------------- run of show ---------------- */

  .ros-shell { margin-top: clamp(1rem, 2vw, 1.5rem); }
#tabpanel-gap .ros {
    list-style: none;
    margin: 0;
    padding: 0;
  }
#tabpanel-gap .ros li {
    display: grid;
    grid-template-columns: 5.25rem 1fr;
    gap: 1.5rem;
    padding: 1.05rem 0;
    border-top: 1px solid var(--line);
  }
#tabpanel-gap .ros li:last-child { border-bottom: 1px solid var(--line); }
#tabpanel-gap .ros-time {
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    padding-top: 0.35em;
  }
#tabpanel-gap .ros h3 { margin: 0; font-size: var(--step-1); font-weight: 600; letter-spacing: -0.015em; }
#tabpanel-gap .ros-points {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
  }
#tabpanel-gap .ros-points li {
    display: grid;
    grid-template-columns: 0.45rem 1fr;
    gap: 0.65rem;
    color: var(--text-2);
    line-height: 1.45;
    max-width: 70ch;
  }
#tabpanel-gap .ros-points li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-3);
    margin-top: 0.62em;
  }
#tabpanel-gap .ros-points b { color: var(--gold); font-weight: 600; }
#tabpanel-gap .ros-purpose {
    margin: 1.2rem 0 0;
    font-size: var(--step-1);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--accent);
  }
#tabpanel-gap .ros-note {
    margin-top: 1.5rem;
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    color: var(--text-3);
  }

  @media (max-width: 600px) {
#tabpanel-gap .ros li { grid-template-columns: 1fr; gap: 0.35rem; }
  }
#tabpanel-gap footer {
    margin-top: 4rem;
    font-family: var(--mono);
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
#tabpanel-gap /* the two sides never stack — they shrink,
#tabpanel-gap because a vertical
     arrangement destroys the whole point of a measured gap */
  @media (max-width: 860px) {
    .sides { gap: clamp(0.75rem, 3vw, 1.75rem); }
#tabpanel-gap .arena { padding-top: 54px; }
#tabpanel-gap .side-panel { padding: 0.9rem 0.7rem 1rem; border-radius: 20px; }
#tabpanel-gap .side-btn { font-size: 0.7rem; letter-spacing: 0.08em; gap: 0.45rem; min-height: 3rem; }
#tabpanel-gap .side-icon { width: 18px; height: 18px; }
#tabpanel-gap .node { width: 5.6rem; }
#tabpanel-gap .node-name { font-size: 0.82rem; }
#tabpanel-gap .readout { grid-template-columns: 1fr; align-items: start; }
#tabpanel-gap }

  @media (max-width: 560px) {
    .sides { gap: 0.5rem; }
#tabpanel-gap .side-panel { padding: 0.7rem 0.45rem 0.85rem; border-radius: 16px; }
#tabpanel-gap .side-btn { font-size: 0.6rem; letter-spacing: 0.04em; gap: 0.35rem; min-height: 2.8rem; }
#tabpanel-gap .side-icon { width: 15px; height: 15px; }
#tabpanel-gap .node { width: 4.3rem; }
#tabpanel-gap .node-name { font-size: 0.72rem; line-height: 1.2; }
#tabpanel-gap .dot { width: 16px; height: 16px; }
#tabpanel-gap }

  @media (prefers-reduced-motion: reduce) {
    * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  }


/* ------------------------------------------------------------------ */
/* Panel fit — appended by gen_gap.py, not from the source stylesheet.  */
/* ------------------------------------------------------------------ */
#tabpanel-gap {
  container-type: inline-size;
  background: transparent;   /* the panel already provides the surface */
  margin: 0;
}
#tabpanel-gap .wrap { padding-left: 0; padding-right: 0; max-width: none; }

/* Seven labels across a panel column, not a full page. */
@container (max-width: 820px) {
  #tabpanel-gap .clabel {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }
  #tabpanel-gap .chain { padding-left: 0.6rem; padding-right: 0.6rem; }
}
@container (max-width: 620px) {
  #tabpanel-gap .clabel { font-size: 0.55rem; letter-spacing: 0; }
}