/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg:        #070b14;
  --bg-2:      #0c1322;
  --panel:     #101a2c;
  --panel-2:   #16233a;
  --line:      #22334f;
  --line-soft: #1a2840;
  --ink:       #e8eefb;
  --ink-2:     #a7b6d0;
  --ink-3:     #6d7f9e;
  --accent:    #42e2c8;
  --accent-2:  #7aa2ff;
  --warn:      #ffb454;
  --hot:       #ff6b8b;
  --violet:    #b98bff;
  --lime:      #9ade5a;
  --shadow:    0 18px 48px rgba(0,0,0,.45);
  --radius:    14px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
}
:root[data-theme="light"] {
  --bg:        #f6f8fc;
  --bg-2:      #eef2f9;
  --panel:     #ffffff;
  --panel-2:   #f2f5fb;
  --line:      #d2dbe9;
  --line-soft: #e2e8f2;
  --ink:       #101827;
  --ink-2:     #44536b;
  --ink-3:     #76859c;
  --accent:    #0d9e88;
  --accent-2:  #3667d6;
  --warn:      #b5720a;
  --hot:       #d4365c;
  --violet:    #7a4bd0;
  --lime:      #4d8c1f;
  --shadow:    0 14px 36px rgba(20,35,70,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--accent-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
code, kbd { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #04121a; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ── top bar ────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 14px;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none; font-weight: 650; font-size: .95rem;
  white-space: nowrap; flex: 0 0 auto;
}
.brand svg { color: var(--accent); flex: 0 0 auto; }
.chapters {
  display: flex; gap: 2px; overflow-x: auto; flex: 1 1 auto;
  scrollbar-width: none; -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.chapters::-webkit-scrollbar { display: none; }
.chapters a {
  color: var(--ink-3); text-decoration: none; font-size: .85rem; font-weight: 550;
  padding: 6px 11px; border-radius: 99px; white-space: nowrap; transition: color .15s, background .15s;
}
.chapters a:hover { color: var(--ink); background: var(--panel-2); }
.chapters a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.theme-toggle {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.progress {
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .1s linear;
}
@media (max-width: 720px) {
  .brand span { display: none; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.hero-canvas { position: absolute; inset: 0; z-index: 0; opacity: .55; }
.hero-canvas canvas { width: 100%; height: 100%; display: block; }
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto; padding: clamp(48px, 9vw, 104px) 16px clamp(40px, 6vw, 72px);
}
.eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700;
  color: var(--accent); margin-bottom: 14px;
}
.hero h1 { font-size: clamp(1.9rem, 5.2vw, 3.4rem); font-weight: 720; max-width: 20ch; }
.hero h1 em { font-style: normal; color: var(--ink-2); }
.typed {
  font-family: var(--mono); font-size: .82em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  padding: 2px 10px; border-radius: 8px; white-space: nowrap;
}
.typed::after { content: "▌"; opacity: .8; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-lede { margin-top: 22px; max-width: 62ch; color: var(--ink-2); font-size: clamp(1rem, 1.6vw, 1.12rem); }
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin: 30px 0 28px; max-width: 900px;
}
.stat {
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px;
}
.stat b { display: block; font-size: 1.15rem; color: var(--accent); font-family: var(--mono); letter-spacing: -.02em; }
.stat span { font-size: .8rem; color: var(--ink-3); line-height: 1.35; display: block; margin-top: 3px; }
.cta {
  display: inline-block; background: var(--accent); color: #04121a; font-weight: 650;
  padding: 11px 22px; border-radius: 99px; text-decoration: none; font-size: .95rem;
}
.cta:hover { filter: brightness(1.08); }

/* ── chapters ───────────────────────────────────────────────────────────── */
.chapter { max-width: 1180px; margin: 0 auto; padding: clamp(46px, 7vw, 86px) 16px; }
.chapter + .chapter { border-top: 1px solid var(--line-soft); }
.chapter-head { max-width: 72ch; margin-bottom: 26px; }
.chapter-num {
  font-family: var(--mono); font-size: .76rem; color: var(--accent);
  letter-spacing: .1em; display: block; margin-bottom: 8px;
}
.chapter h2 { font-size: clamp(1.4rem, 3.2vw, 2.1rem); font-weight: 700; }
.lede { margin-top: 12px; color: var(--ink-2); font-size: clamp(.97rem, 1.4vw, 1.06rem); }

.stage {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.notes {
  margin-top: 18px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.note {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent); border-radius: 10px; padding: 13px 15px;
}
.note h4 { margin: 0 0 6px; font-size: .88rem; font-weight: 650; letter-spacing: -.01em; }
.note p { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.note.v2 { border-left-color: var(--accent-2); }
.note.v3 { border-left-color: var(--warn); }
.note.v4 { border-left-color: var(--violet); }

/* ── shared stage furniture ─────────────────────────────────────────────── */
.bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
.bar .spacer { flex: 1 1 auto; }
.bar label { font-size: .8rem; color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; }
button.btn {
  font: inherit; font-size: .85rem; font-weight: 600;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: .14s;
}
button.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button.btn:disabled { opacity: .42; cursor: not-allowed; }
button.btn.primary { background: var(--accent); color: #04121a; border-color: transparent; }
button.btn.primary:hover:not(:disabled) { filter: brightness(1.08); color: #04121a; }
button.btn.ghost { background: transparent; }
button.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
input[type="text"], select {
  font: inherit; font-size: .85rem; font-family: var(--mono);
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line);
  padding: 7px 10px; border-radius: 8px; min-width: 0;
}
input[type="range"] { accent-color: var(--accent); width: 116px; vertical-align: middle; }
.pill {
  font-family: var(--mono); font-size: .74rem; padding: 3px 9px; border-radius: 99px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap;
}
.pill.ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pill.hot { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 45%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

.svg-wrap { width: 100%; background: var(--bg-2); }
.svg-wrap svg { display: block; width: 100%; height: auto; }

.log {
  font-family: var(--mono); font-size: .78rem; line-height: 1.75;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 12px 14px; max-height: 190px; overflow-y: auto; color: var(--ink-2);
}
.log .row { display: flex; gap: 10px; opacity: 0; animation: logIn .28s ease forwards; }
.log .row .t { color: var(--ink-3); flex: 0 0 auto; min-width: 5.4em; text-align: right; }
.log .row .m { flex: 1 1 auto; }
.log .row.acc .m { color: var(--accent); }
.log .row.hot .m { color: var(--hot); }
.log .row.warn .m { color: var(--warn); }
.log .row.vio .m { color: var(--violet); }
@keyframes logIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .log .row { animation: none; opacity: 1; } }

.empty { color: var(--ink-3); font-style: italic; }

/* ── scene: journey ─────────────────────────────────────────────────────── */
.j-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.j-step { padding: 12px 14px; border-right: 1px solid var(--line-soft); transition: background .2s; }
.j-step:last-child { border-right: 0; }
.j-step .k { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); letter-spacing: .06em; }
.j-step .n { font-size: .87rem; font-weight: 640; margin-top: 3px; }
.j-step .ms { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); margin-top: 3px; }
.j-step.live { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.j-step.live .n, .j-step.live .ms { color: var(--accent); }
.j-step.done .ms { color: var(--ink-2); }

/* ── scene: layers ──────────────────────────────────────────────────────── */
.layer-wrap { padding: 18px 16px 4px; display: grid; gap: 0; }
.layer {
  border: 1px solid var(--line); border-radius: 11px; padding: 11px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s, border-color .2s;
}
.layer + .layer { margin-top: 0; }
.layer-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.layer-head .ln { font-size: .84rem; font-weight: 650; }
.layer-head .lt { font-size: .74rem; color: var(--ink-3); font-family: var(--mono); }
.layer-body { display: flex; align-items: stretch; gap: 5px; }
.hdr {
  font-family: var(--mono); font-size: .72rem; padding: 8px 9px; border-radius: 7px;
  border: 1px dashed currentColor; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; background: color-mix(in srgb, currentColor 11%, transparent);
  transition: .15s; flex: 0 0 auto;
}
.hdr:hover, .hdr.sel { background: color-mix(in srgb, currentColor 26%, transparent); border-style: solid; }
.payload {
  flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: .72rem;
  padding: 8px 10px; border-radius: 7px; background: var(--panel-2);
  border: 1px solid var(--line-soft); color: var(--ink-3);
  display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.field-box { padding: 4px 16px 18px; }
.field-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px;
  font-size: .87rem; color: var(--ink-2); min-height: 92px;
}
.field-card h4 { margin: 0 0 6px; font-size: .9rem; color: var(--ink); }
.field-card .who { font-family: var(--mono); font-size: .74rem; color: var(--accent); margin-bottom: 8px; }
.field-card ul { margin: 8px 0 0; padding-left: 18px; }
.field-card li { margin: 2px 0; }

/* ── scene: http ────────────────────────────────────────────────────────── */
.http-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--line); }
.http-col { background: var(--panel); padding: 14px 16px; min-width: 0; }
.http-col h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 0 0 10px; }
pre.wire {
  font-family: var(--mono); font-size: .76rem; line-height: 1.65; margin: 0;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 12px; overflow-x: auto; color: var(--ink-2); white-space: pre; min-height: 210px;
}
pre.wire .m { color: var(--accent); font-weight: 650; }
pre.wire .h { color: var(--accent-2); }
pre.wire .s { color: var(--warn); }
pre.wire .b { color: var(--ink-3); }
.waterfall { padding: 14px 16px 18px; border-top: 1px solid var(--line); }
.wf-row { display: grid; grid-template-columns: minmax(96px, 168px) minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: .76rem; margin-bottom: 5px; }
.wf-row .nm { font-family: var(--mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-track { height: 15px; background: var(--bg); border-radius: 4px; position: relative; overflow: hidden; border: 1px solid var(--line-soft); }
.wf-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: none; }
.wf-row .tm { font-family: var(--mono); color: var(--ink-3); text-align: right; }

/* ── scene: physical ────────────────────────────────────────────────────── */
.phys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.phys-cell { background: var(--panel); padding: 15px 16px; }
.phys-cell h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 0 0 10px; }
.big-num { font-family: var(--mono); font-size: 1.7rem; color: var(--accent); letter-spacing: -.02em; line-height: 1.15; }
.sub-num { font-size: .8rem; color: var(--ink-3); margin-top: 4px; }
.meter { height: 9px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line-soft); overflow: hidden; margin: 9px 0 5px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .45s cubic-bezier(.2,.8,.3,1); }

/* ── recap ──────────────────────────────────────────────────────────────── */
.recap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.recap-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px;
  text-decoration: none; color: inherit; display: block; transition: .16s;
}
.recap-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.recap-card .rk { font-family: var(--mono); font-size: .72rem; color: var(--accent); letter-spacing: .08em; }
.recap-card h3 { font-size: .98rem; margin: 6px 0 7px; font-weight: 650; }
.recap-card p { font-size: .84rem; color: var(--ink-2); margin: 0; line-height: 1.5; }
.recap-card .terms { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.recap-card .terms span {
  font-family: var(--mono); font-size: .68rem; padding: 2px 7px; border-radius: 99px;
  background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--ink-3);
}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line-soft); padding: 34px 16px 52px;
  max-width: 1180px; margin: 0 auto; color: var(--ink-3); font-size: .85rem;
}
.site-footer p { max-width: 74ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── svg shared classes ─────────────────────────────────────────────────── */
svg text { font-family: var(--sans); fill: var(--ink-2); }
svg .mono { font-family: var(--mono); }
svg .nlabel { font-size: 11px; font-weight: 600; fill: var(--ink); }
svg .nsub { font-size: 9.5px; fill: var(--ink-3); font-family: var(--mono); }
svg .edge { stroke: var(--line); stroke-width: 2; fill: none; }
svg .edge.hit { stroke-width: 14; stroke: transparent; cursor: pointer; }
svg .edge.down { stroke: var(--hot); stroke-dasharray: 5 5; opacity: .55; }
svg .edge.act { stroke: var(--accent); stroke-width: 2.6; }
svg .box { fill: var(--panel); stroke: var(--line); stroke-width: 1.4; }
svg .box.on { stroke: var(--accent); }
svg .glow { filter: drop-shadow(0 0 6px currentColor); }

/* ── scene: journey extras ──────────────────────────────────────────────── */
.j-step.skipped { opacity: .5; }
.j-step.skipped .ms { color: var(--accent); }

/* ── scene: tls layout ──────────────────────────────────────────────────── */
.tls-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1px; background: var(--line); }
.tls-main { background: var(--panel); min-width: 0; padding: 6px 4px; }
.tls-side { background: var(--panel); padding: 16px 18px; min-width: 0; }
.tls-side h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 0 0 9px; }
@media (max-width: 880px) { .tls-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── narrow screens: pan the wide diagrams instead of shrinking them to dust ── */
@media (max-width: 760px) {
  .svg-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
  .svg-wrap svg { min-width: 680px; }
  .stage:has(.svg-wrap)::after {
    content: "↔ drag the diagram sideways to see the rest";
    display: block; font-size: .72rem; color: var(--ink-3);
    padding: 9px 14px; border-top: 1px solid var(--line-soft);
  }
  .bar { padding: 10px; gap: 8px; }
  .bar label { font-size: .75rem; }
  input[type="range"] { width: 88px; }
  .wf-row { grid-template-columns: minmax(78px, 110px) minmax(0, 1fr) 46px; gap: 7px; font-size: .7rem; }
  .layer-body { flex-wrap: wrap; }
  .payload { flex: 1 0 100%; }
}