:root {
  --ink: #150f19;
  --ink-2: #211626;
  --panel: rgba(43, 29, 49, 0.94);
  --panel-2: rgba(54, 36, 60, 0.94);
  --line: #72566f;
  --line-soft: rgba(190, 154, 181, 0.24);
  --paper: #fff9fc;
  --text: #fff9fc;
  --muted: #d8c4d2;
  --pink: #ff78a8;
  --pink-hot: #ff4d91;
  --pink-soft: #ffc0d7;
  --green: #71d6a8;
  --gold: #ffd47a;
  --shadow: 0 28px 80px rgba(7, 3, 9, 0.34);
  font-family: Inter, ui-rounded, "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--text); overflow-x: hidden; -webkit-tap-highlight-color: rgba(255, 120, 168, 0.22); }
button, a { font: inherit; }
button { color: inherit; touch-action: manipulation; }
a { color: inherit; }

.skip-link { position: fixed; z-index: 100; left: 16px; top: 10px; padding: 10px 14px; border-radius: 9px; background: var(--paper); color: var(--ink); font-weight: 900; transform: translateY(-150%); transition: transform 140ms ease; }
.skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--gold); outline-offset: 3px; }

.ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.52;
  z-index: 0;
}

.review-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: 66px;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 10px clamp(18px, 4vw, 64px);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(21, 15, 25, 0.84);
  backdrop-filter: blur(18px);
}
.brand img { display: block; width: 150px; height: 42px; object-fit: contain; object-position: left center; }
.review-bar nav { display: flex; gap: 8px; }
.review-bar nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}
.review-bar nav a:hover, .review-bar nav a:focus-visible { color: var(--text); background: rgba(255, 120, 168, 0.13); }
.review-badge { justify-self: end; color: var(--pink-soft); font: 800 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.09em; }

.spread {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: clamp(104px, 11vh, 138px) clamp(22px, 6vw, 96px) clamp(62px, 8vh, 96px);
  border-bottom: 1px solid var(--line-soft);
  overflow: clip;
}
.spread, .lesson-heading h2, .cover-copy h1 { scroll-margin-top: 78px; }
.spread::before {
  content: "";
  position: absolute;
  width: 680px;
  aspect-ratio: 1;
  left: -340px;
  top: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 93, 151, 0.13), transparent 68%);
  pointer-events: none;
}

.cover-spread {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(480px, 1.08fr);
  align-items: center;
  gap: clamp(20px, 5vw, 86px);
  background:
    linear-gradient(105deg, rgba(21,15,25,0.98) 0 44%, rgba(21,15,25,0.72) 70%, rgba(21,15,25,0.96)),
    radial-gradient(circle at 75% 36%, rgba(255, 113, 162, 0.22), transparent 38%);
}
.cover-copy { position: relative; z-index: 4; max-width: 690px; }
.eyebrow { margin: 0 0 20px; color: var(--pink-soft); font: 850 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.13em; }
.eyebrow span { display: inline-flex; margin-right: 10px; padding: 7px 10px; border: 1px solid var(--pink); border-radius: 999px; color: var(--paper); }
.cover-copy h1 { margin: 0; max-width: 760px; font-size: clamp(68px, 8.2vw, 150px); line-height: 0.78; letter-spacing: -0.075em; text-transform: uppercase; text-wrap: balance; }
.cover-copy h1 em { color: var(--pink); font-family: Georgia, "Times New Roman", serif; font-weight: 400; text-transform: lowercase; letter-spacing: -0.045em; }
.cover-deck { max-width: 640px; margin: 38px 0 0; color: var(--muted); font-size: clamp(18px, 1.65vw, 28px); line-height: 1.46; font-weight: 650; }
.cover-rule { width: min(390px, 70%); height: 3px; margin: 34px 0 18px; background: linear-gradient(90deg, var(--pink), transparent); }
.cover-byline { margin: 0; color: var(--paper); font-weight: 850; letter-spacing: 0.02em; }
.prototype-note, .vote-disclosure { max-width: 480px; margin: 16px 0 0; color: #a58c9e; font-size: 12px; line-height: 1.5; }

.cover-picker { max-width: 620px; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.cover-picker legend { width: 100%; margin-bottom: 7px; color: #bda6b7; font: 850 10px/1.2 ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.cover-picker button { min-height: 38px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(32,21,37,0.82); color: var(--muted); font-size: 12px; font-weight: 850; cursor: pointer; }
.cover-picker button:hover, .cover-picker button:focus-visible { border-color: var(--pink); color: var(--paper); }
.cover-picker button[aria-pressed="true"] { border-color: var(--pink); background: rgba(255,120,168,0.16); color: var(--paper); }

.cover-art { position: relative; align-self: stretch; min-height: 690px; }
.cover-character { position: absolute; z-index: 4; right: 3%; bottom: -12%; height: 109%; max-width: 82%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 28px 38px rgba(4, 1, 6, 0.46)); }
.cover-character.cover-b { right: 0; bottom: -13%; height: 111%; max-width: 92%; }
.cover-character.cover-c { right: -2%; bottom: -11%; height: 107%; max-width: 92%; }
.cover-character.cover-a { right: -5%; bottom: -8%; height: 101%; max-width: 85%; border-radius: 28px; mix-blend-mode: screen; opacity: 0.92; }
.cover-character.cover-proxy { right: 3%; bottom: -12%; height: 109%; max-width: 82%; }
.cover-orbit { position: absolute; z-index: 2; width: min(48vw, 680px); aspect-ratio: 1; left: 2%; top: 4%; border: 1px solid rgba(255, 126, 172, 0.25); border-radius: 50%; transform: rotate(-7deg); }
.cover-orbit::before, .cover-orbit::after { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(113, 214, 168, 0.22); border-radius: 50%; }
.cover-orbit::after { inset: 28%; border-color: rgba(255, 212, 122, 0.2); }
.cover-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cover-orbit path { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; opacity: 0.75; }
.cover-orbit path.hot { stroke: var(--pink); stroke-dasharray: 10 9; }
.orbit-node { position: absolute; z-index: 3; min-width: 110px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(32, 21, 37, 0.86); color: var(--paper); font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: var(--shadow); text-align: center; }
.node-orders { left: 3%; top: 27%; }
.node-keys { right: 1%; top: 20%; }
.node-result { right: 0; bottom: 20%; }
.cover-stamp { position: absolute; z-index: 6; right: 1%; bottom: 6%; padding: 12px 16px; border: 3px solid var(--gold); color: var(--gold); font: 950 13px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; transform: rotate(-5deg); }

.fashion-plate-spread {
  min-height: 100svh;
  display: grid;
  place-items: end center;
  isolation: isolate;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,.96) 0 19%, rgba(255,231,240,.88) 40%, transparent 63%),
    linear-gradient(145deg, #fff9fb 0 36%, #f8cadc 36% 64%, #bc386d 64% 100%);
}
.fashion-plate-spread::before {
  width: 72%;
  left: 14%;
  top: 8%;
  aspect-ratio: 1;
  border: 1px solid rgba(149,35,83,.18);
  background: repeating-radial-gradient(circle, transparent 0 30px, rgba(255,255,255,.34) 31px 32px);
}
.fashion-plate-spread::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7% 7%;
  border: 1px solid rgba(120,26,66,.26);
  border-radius: 46% 46% 12px 12px;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.17);
}
.fashion-plate-spread > img {
  position: relative;
  z-index: 4;
  width: min(67vw, 780px);
  height: 96svh;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 34px 35px rgba(74,15,41,.28));
}
.fashion-plate-halo {
  position: absolute;
  z-index: 1;
  width: min(74vw, 860px);
  aspect-ratio: 1;
  left: 50%;
  top: 48%;
  border-radius: 50%;
  background: rgba(255,252,253,.78);
  box-shadow: 0 0 0 22px rgba(255,255,255,.16), 0 0 90px rgba(122,25,67,.16);
  transform: translate(-50%, -50%);
}
.fashion-plate-orbit { position: absolute; z-index: 2; left: 50%; top: 48%; border: 2px solid rgba(128,26,70,.23); border-radius: 50%; transform: translate(-50%,-50%) rotate(-14deg); }
.fashion-plate-orbit::after { content:""; position:absolute; width:12px; aspect-ratio:1; right:9%; top:17%; border-radius:50%; background:#d9427f; box-shadow:0 0 0 7px rgba(255,255,255,.7); }
.fashion-plate-orbit.orbit-one { width: min(82vw, 960px); aspect-ratio: 1.35; }
.fashion-plate-orbit.orbit-two { width: min(67vw, 760px); aspect-ratio: .82; transform: translate(-50%,-50%) rotate(19deg); }
.fashion-plate-petals i { position:absolute; z-index:3; width:16px; height:10px; border-radius:100% 0 100% 0; background:rgba(205,51,113,.5); transform:rotate(var(--turn, 22deg)); }
.fashion-plate-petals i:nth-child(1) { left:10%; top:18%; --turn:24deg; }
.fashion-plate-petals i:nth-child(2) { left:18%; top:66%; --turn:-31deg; }
.fashion-plate-petals i:nth-child(3) { right:13%; top:24%; --turn:62deg; }
.fashion-plate-petals i:nth-child(4) { right:21%; top:73%; --turn:-18deg; }
.fashion-plate-petals i:nth-child(5) { left:31%; top:11%; --turn:77deg; }
.fashion-plate-petals i:nth-child(6) { right:34%; bottom:8%; --turn:9deg; }

.candidate-strip { position: relative; z-index: 2; padding: 54px clamp(22px, 6vw, 96px) 68px; border-bottom: 1px solid var(--line-soft); background: #110c14; }
.candidate-heading { max-width: 1400px; margin: 0 auto 24px; display: grid; grid-template-columns: minmax(0,0.8fr) minmax(320px,1.2fr); gap: 18px 50px; align-items: end; }
.candidate-heading .eyebrow { grid-column: 1 / -1; margin: 0; }
.candidate-heading h2 { margin: 0; font-size: clamp(32px,4vw,60px); line-height: 1; letter-spacing: -0.05em; }
.candidate-heading > p:last-child { margin: 0; color: var(--muted); line-height: 1.5; font-weight: 650; }
.candidate-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.candidate-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); }
.candidate-card.preferred { border-color: rgba(113,214,168,0.58); }
.candidate-card.caution { border-color: rgba(255,212,122,0.5); }
.candidate-card.rejected { border-color: rgba(255,77,145,0.62); }
.candidate-card button { width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.candidate-card button:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.candidate-card button[aria-pressed="true"] { background: rgba(255,120,168,0.08); }
.candidate-image { height: 280px; display: grid; place-items: end center; overflow: hidden; background: radial-gradient(circle at 50% 55%, rgba(255,120,168,0.18), transparent 62%); }
.candidate-image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.candidate-copy { min-height: 78px; display: grid; gap: 5px; padding: 15px 17px; border-top: 1px solid var(--line-soft); }
.candidate-copy strong { font-size: 17px; }
.candidate-copy small { color: var(--muted); line-height: 1.35; }

.lesson-spread { background: linear-gradient(180deg, #171019, #1e1422); }
.fanout-spread { background: linear-gradient(180deg, #1b121f, #120d15); }
.lesson-heading { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(340px, 1.14fr); gap: clamp(28px, 7vw, 110px); align-items: end; max-width: 1400px; margin: 0 auto 34px; }
.lesson-heading h2 { margin: 0; font-size: clamp(38px, 5vw, 82px); line-height: 0.98; letter-spacing: -0.055em; text-wrap: balance; }
.lesson-heading > p { margin: 0 0 7px; color: var(--muted); font-size: clamp(18px, 1.55vw, 25px); line-height: 1.52; }
.lesson-heading strong { color: var(--paper); }
.lesson-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -8px; }

.sql-strip { max-width: 1400px; margin: 0 auto 26px; padding: 16px 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #0f0b12; color: #eadde6; box-shadow: inset 0 1px rgba(255,255,255,0.03); }
.sql-strip code { white-space: nowrap; font: 700 clamp(12px, 1.2vw, 17px)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sql-strip b { color: var(--pink); }

.join-stage { position: relative; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(90px, 12vw, 190px); align-items: start; }
.connector-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.connector-layer path { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; opacity: 0.76; vector-effect: non-scaling-stroke; }
.connector-layer path.hot { stroke: var(--pink-hot); stroke-width: 5; stroke-dasharray: 10 8; filter: drop-shadow(0 0 8px rgba(255,77,145,0.32)); }
.connector-layer circle { fill: var(--paper); stroke: var(--green); stroke-width: 3; vector-effect: non-scaling-stroke; }
.connector-layer circle.hot { stroke: var(--pink-hot); }

.table-card, .result-card { position: relative; z-index: 2; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.table-card { padding: 22px; }
.card-kicker { color: var(--pink-soft); font: 850 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.1em; }
.table-card h3, .result-card h3 { margin: 6px 0 17px; color: var(--paper); font-size: 24px; letter-spacing: -0.03em; }
table { width: 100%; border-collapse: collapse; color: var(--paper); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
th, td { padding: 12px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
th { color: #bda6b7; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
td { font-size: clamp(12px, 1.1vw, 16px); font-weight: 700; }
tbody tr { transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr[data-key="1"] { background: rgba(255, 120, 168, 0.055); }
tbody tr.duplicate-row { background: rgba(255, 77, 145, 0.16); color: var(--pink-soft); }
tbody tr.fanout-copy { background: rgba(255, 77, 145, 0.1); }
.key-cell { position: relative; color: var(--gold); }
.key-cell::after { content: ""; position: absolute; width: 8px; height: 8px; top: 50%; right: -5px; border-radius: 50%; background: var(--green); transform: translateY(-50%); box-shadow: 0 0 0 3px var(--ink-2); }
.lookup-card .key-cell::after { left: -5px; right: auto; }
.duplicate-row .key-cell::after { background: var(--pink-hot); }
.row-state { color: var(--muted); font-size: 11px; }
.row-state.hot { color: var(--pink-soft); }

.explain-row { max-width: 1400px; margin: 24px auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.explain-card { min-height: 116px; padding: 18px; display: grid; grid-template-columns: 36px 1fr; gap: 13px; align-items: start; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(49,33,55,0.68), rgba(32,22,37,0.55)); }
.explain-card p { margin: 0; color: var(--muted); line-height: 1.5; font-weight: 650; }
.explain-card code { color: var(--gold); }
.step-number { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--pink); border-radius: 50%; color: var(--pink-soft); font: 900 13px/1 ui-monospace, monospace; }
.answer-card { border-top-color: var(--green); }
.answer-card .step-number { border-color: var(--green); color: var(--green); }

.result-card { max-width: 1400px; margin: 0 auto; }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px 8px; }
.metric-pill, .warning-pill { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 7px; padding: 10px 14px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); font-size: 13px; font-weight: 850; }
.metric-pill strong { font-size: 24px; }
.result-card .table-scroll { overflow-x: auto; padding: 0 12px 14px; }
.result-card td, .result-card th { padding-left: 14px; padding-right: 14px; }

.fanout-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.fanout-heading .eyebrow { margin: 0 0 14px; }
.toggle-button { display: flex; align-items: center; gap: 13px; min-height: 64px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); cursor: pointer; text-align: left; box-shadow: var(--shadow); }
.toggle-button:hover { border-color: var(--pink); }
.toggle-button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.toggle-track { width: 50px; height: 28px; padding: 3px; border-radius: 999px; background: #60485a; transition: background 180ms ease; }
.toggle-track span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); transition: transform 180ms ease; }
.toggle-button[aria-pressed="true"] .toggle-track { background: var(--pink-hot); }
.toggle-button[aria-pressed="true"] .toggle-track span { transform: translateX(22px); }
.toggle-copy { display: grid; gap: 3px; }
.toggle-copy strong { font-size: 14px; }
.toggle-copy small { color: var(--muted); font-size: 11px; }

.fanout-stage { margin-top: 28px; }
.incident-metrics { max-width: 1400px; margin: 24px auto; display: grid; grid-template-columns: 220px 240px 1fr; border: 1px solid var(--line); border-radius: 16px; background: rgba(24,16,28,0.78); overflow: hidden; }
.incident-metrics > div { display: grid; gap: 3px; padding: 17px 20px; border-right: 1px solid var(--line-soft); }
.incident-metrics span { color: var(--muted); font: 800 11px/1.2 ui-monospace, monospace; letter-spacing: 0.07em; text-transform: uppercase; }
.incident-metrics strong { font-size: 29px; line-height: 1; }
.incident-metrics small { color: var(--green); font-weight: 850; }
.incident-metrics small.hot { color: var(--pink); }
.incident-metrics p { align-self: center; margin: 0; padding: 18px 22px; color: var(--muted); line-height: 1.45; font-weight: 650; }
.warning-pill { border-color: var(--green); color: var(--green); font: 900 11px/1 ui-monospace, monospace; letter-spacing: 0.08em; }
.warning-pill.hot { border-color: var(--pink-hot); color: var(--pink-soft); background: rgba(255,77,145,0.1); }
.takeaway { max-width: 1400px; margin: 22px auto 0; padding: 23px 0 0; display: grid; grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr); gap: 30px; border-top: 2px solid var(--pink); }
.takeaway strong { font-size: clamp(20px, 2vw, 31px); line-height: 1.15; letter-spacing: -0.03em; }
.takeaway span { color: var(--muted); font-size: 17px; line-height: 1.55; }
.takeaway code { color: var(--gold); }

.key-spread { background: linear-gradient(180deg, #1d1421, #151018); }
.schema-stage { max-width: 1180px; margin: 44px auto 28px; display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,0.35fr) minmax(0,1fr); align-items: center; }
.schema-card { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.schema-card > h3 { margin: 0; padding: 9px 22px 18px; font-size: 30px; letter-spacing: -0.04em; }
.schema-label { display: block; padding: 22px 22px 0; color: var(--pink-soft); font: 850 11px/1.2 ui-monospace, monospace; letter-spacing: 0.1em; }
.schema-row { min-height: 66px; display: grid; grid-template-columns: minmax(120px,1fr) auto minmax(120px,0.8fr); gap: 12px; align-items: center; padding: 13px 22px; border-top: 1px solid var(--line-soft); }
.schema-row code { color: var(--paper); font-weight: 850; }
.schema-row small { justify-self: end; color: var(--muted); font-weight: 700; }
.key-badge { padding: 5px 8px; border-radius: 7px; font: 900 10px/1 ui-monospace, monospace; }
.key-badge.pk { border: 1px solid var(--gold); color: var(--gold); }
.key-badge.fk { border: 1px solid var(--green); color: var(--green); }
.schema-relation { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; color: var(--pink-soft); font: 850 10px/1 ui-monospace, monospace; }
.schema-relation span { height: 2px; background: linear-gradient(90deg, var(--pink), var(--green)); }
.concept-grid { max-width: 1180px; margin: 0 auto 30px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.concept-grid article { min-height: 190px; padding: 22px; border-top: 2px solid var(--pink); background: rgba(42,28,48,0.72); }
.concept-grid article:nth-child(2) { border-top-color: var(--green); }
.concept-grid article:nth-child(3) { border-top-color: var(--gold); }
.concept-number { color: var(--pink-soft); font: 900 12px/1 ui-monospace, monospace; }
.concept-grid h3 { margin: 18px 0 8px; font-size: 23px; }
.concept-grid p { margin: 0; color: var(--muted); line-height: 1.55; font-weight: 650; }
.concept-grid code { color: var(--gold); }

.missing-spread { background: linear-gradient(180deg, #161019, #201522); }
.row-machine { max-width: 1180px; margin: 38px auto 28px; display: grid; grid-template-columns: minmax(220px,0.8fr) 80px minmax(300px,1.2fr); gap: 16px; align-items: stretch; }
.machine-input, .machine-output { min-height: 110px; padding: 20px; display: grid; gap: 7px; align-content: center; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.machine-input span { font-size: 25px; font-weight: 900; }
.machine-input code { color: var(--muted); }
.machine-input.missing { grid-column: 1; }
.machine-arrow { display: grid; place-items: center; color: var(--pink); font-size: 36px; }
.machine-output { grid-template-columns: repeat(2,minmax(0,1fr)); border-color: rgba(113,214,168,0.48); }
.machine-output span { display: grid; place-items: center; min-height: 62px; border-radius: 10px; background: rgba(113,214,168,0.09); color: var(--green); font: 850 15px/1 ui-monospace, monospace; }
.machine-output.null { grid-template-columns: 1fr; border-color: rgba(255,120,168,0.48); }
.machine-output.null span { background: rgba(255,120,168,0.09); color: var(--pink-soft); }
.compact-result { max-width: 1180px; }
.null-row { background: rgba(255,120,168,0.08); color: var(--pink-soft); }

.count-spread { background: linear-gradient(180deg, #1a111e, #121015); }
.count-visual { max-width: 1180px; margin: 44px auto 34px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.count-visual article { position: relative; min-height: 310px; padding: 28px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-content: start; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.count-name { grid-column: 1 / -1; margin-bottom: 8px; color: var(--paper); font-size: 34px; font-weight: 900; }
.joined-chip { grid-column: 1 / -1; padding: 15px; border: 1px solid rgba(113,214,168,0.44); border-radius: 11px; color: var(--green); font: 850 15px/1 ui-monospace, monospace; }
.joined-chip.null { border-color: rgba(255,120,168,0.5); color: var(--pink-soft); }
.count-score { margin-top: 8px; padding: 16px; display: grid; gap: 8px; border-top: 1px solid var(--line); }
.count-score span { color: var(--muted); font: 800 11px/1.2 ui-monospace, monospace; }
.count-score strong { font-size: 42px; }

.anti-spread { background: linear-gradient(180deg, #171019, #211625); }
.query-compare { max-width: 1400px; margin: 42px auto 32px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.query-compare article { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.query-label { display: inline-flex; padding: 6px 9px; border-radius: 999px; font: 900 10px/1 ui-monospace, monospace; }
.query-label.good { border: 1px solid var(--green); color: var(--green); }
.query-label.caution { border: 1px solid var(--gold); color: var(--gold); }
.query-compare h3 { margin: 16px 0 13px; font-size: 23px; }
.query-compare pre, .answer-stack pre { margin: 0 0 16px; padding: 16px; overflow-x: auto; border-radius: 11px; background: #0f0b12; color: #f0e4ec; font-size: 13px; line-height: 1.55; }
.query-compare p { margin: 0; color: var(--muted); line-height: 1.55; font-weight: 650; }

.practice-spread { background: linear-gradient(180deg, #18101c, #211526); }
.practice-grid { max-width: 1400px; margin: 44px auto 24px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.practice-grid article { min-height: 310px; padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.practice-number { color: var(--pink); font: 950 14px/1 ui-monospace, monospace; }
.practice-grid h3 { margin: 25px 0 12px; font-size: 27px; letter-spacing: -0.04em; }
.practice-grid p { margin: 0; color: var(--muted); line-height: 1.55; font-weight: 650; }
.practice-grid code { color: var(--gold); }
.practice-grid .prompt-line { margin-top: auto; padding-top: 22px; color: var(--paper); }
.answer-jump { max-width: 1400px; margin: 0 auto; padding: 20px 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid var(--line-soft); }
.answer-jump span { color: var(--muted); }
.answer-jump a { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid var(--pink); border-radius: 999px; color: var(--pink-soft); text-decoration: none; font-weight: 850; }
.practice-continuation { max-width: 1180px; margin: 28px auto 0; color: var(--pink-soft); font: 850 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.practice-continuation span { display: inline-flex; margin-right: 10px; padding: 6px 9px; border: 1px solid var(--pink); border-radius: 999px; color: var(--paper); }

.answers-spread { background: linear-gradient(180deg, #151018, #0f0b12); }
.answer-stack { max-width: 1180px; margin: 42px auto 32px; display: grid; gap: 12px; }
.answer-stack details { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.answer-stack summary { min-height: 66px; padding: 18px 22px; display: flex; align-items: center; gap: 16px; color: var(--paper); font-size: 19px; font-weight: 850; cursor: pointer; }
.answer-stack summary:hover { background: rgba(255,120,168,0.07); }
.answer-stack summary:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.answer-stack summary span { color: var(--pink); font: 900 12px/1 ui-monospace, monospace; }
.answer-stack details > div { padding: 0 22px 22px; }
.answer-stack p { margin: 0; color: var(--muted); line-height: 1.55; font-weight: 650; }
.answer-stack p code { color: var(--gold); }

.manga-spread { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); gap: 0; padding: 0; background: #f7f3f5; color: #1b151c; }
.manga-plate { width: 100%; height: 100svh; min-height: 720px; object-fit: cover; object-position: center; filter: grayscale(1) contrast(1.04); }
.manga-copy { align-self: center; padding: clamp(48px, 7vw, 104px); }
.manga-copy h2 { margin: 24px 0; font-size: clamp(52px, 6vw, 96px); line-height: .95; letter-spacing: -.055em; }
.manga-copy p { max-width: 620px; color: #5a4b56; font-size: 19px; line-height: 1.6; }
.manga-copy blockquote { margin: 42px 0 0; padding: 22px 0; border-block: 2px solid #d83074; color: #7f1745; font-size: 24px; font-weight: 900; }
.early-fashion-vote { display: inline-flex; min-height: 42px; align-items: center; margin: 0 0 28px; padding: 10px 15px; border: 1px solid #c52f70; border-radius: 999px; color: #8d174a; background: #fff7fa; font-size: 13px; font-weight: 900; text-decoration: none; }
.early-fashion-vote:hover, .early-fashion-vote:focus-visible { background: #fde3ed; outline: 3px solid rgba(197,47,112,.22); outline-offset: 3px; }

.pipeline { max-width: 1400px; margin: 48px auto 30px; display: grid; grid-template-columns: repeat(9, auto); align-items: center; gap: 14px; }
.pipeline article { min-width: 180px; min-height: 150px; display: grid; align-content: center; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.pipeline article span { color: var(--pink); font: 900 11px/1 ui-monospace, monospace; }
.pipeline article strong { font-size: 20px; }
.pipeline article small { color: var(--muted); line-height: 1.4; }
.pipeline > b { color: var(--pink); font-size: 24px; }
.model-contrast, .predicate-grid { max-width: 1180px; margin: 24px auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.model-contrast article, .predicate-grid article { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.model-contrast pre, .predicate-grid pre, .hero-code { margin: 18px 0; padding: 20px; overflow-x: auto; border-radius: 12px; background: #0e0a11; color: #f7ebf2; line-height: 1.6; }
.model-contrast p, .predicate-grid p { color: var(--muted); line-height: 1.55; }
.coach-rail { max-width: 780px; margin: 30px auto 0; display: grid; grid-template-columns: 86px 1fr; gap: 18px; align-items: center; padding: 14px 22px 14px 12px; border: 1px solid rgba(255, 120, 168, .34); border-radius: 18px; background: linear-gradient(90deg, rgba(255,120,168,.10), rgba(42,28,48,.72)); }
.coach-rail img { width: 86px; height: 86px; object-fit: contain; image-rendering: pixelated; }
.coach-rail div { display: grid; gap: 5px; }
.coach-rail b { color: var(--pink-soft); font-size: 14px; }
.coach-rail span { color: var(--muted); line-height: 1.45; }

.join-atlas { max-width: 1280px; margin: 48px auto 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.join-atlas article { min-height: 270px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.join-atlas h3 { margin: 24px 0 12px; font-size: 25px; }
.join-atlas p { color: var(--muted); line-height: 1.5; }
.join-atlas small { display: block; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-soft); color: var(--pink-soft); line-height: 1.45; }
.atlas-code { color: var(--pink); font: 900 12px/1 ui-monospace, monospace; }
.forecast-box { max-width: 1180px; margin: 22px auto; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 19px 22px; border: 1px solid var(--gold); border-radius: 14px; background: rgba(255,212,122,.06); }
.forecast-box b { color: var(--gold); }
.forecast-box span { color: var(--muted); }
.forecast-box strong { color: var(--paper); }
.anti-art { max-width: 1180px; height: 560px; margin: 28px auto 0; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: #f7f3f5; }
.anti-art img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: grayscale(1) contrast(1.05); }
.anti-art span { position: absolute; left: 18px; bottom: 16px; padding: 8px 11px; border-radius: 999px; background: rgba(15,11,18,.88); color: var(--pink-soft); font: 900 10px/1 ui-monospace, monospace; }

.distinct-ledger { max-width: 1180px; margin: 48px auto 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.distinct-ledger article { min-height: 170px; padding: 24px; display: grid; align-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); }
.distinct-ledger span { color: var(--pink); font: 900 11px/1 ui-monospace, monospace; }
.distinct-ledger strong { font-size: 32px; }
.distinct-ledger small { color: var(--muted); }
.hero-code { max-width: 880px; margin: 22px auto 34px; font-size: 16px; }
.repair-grid { max-width: 1180px; margin: 48px auto 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.repair-grid article { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.repair-grid h3 { margin: 20px 0 12px; }
.repair-grid pre { padding: 14px; overflow-x: auto; border-radius: 10px; background: #0e0a11; }
.repair-grid p { color: var(--muted); line-height: 1.5; }
.grain-flow { max-width: 940px; margin: 28px auto; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; }
.grain-flow span { min-height: 90px; display: grid; place-items: center; text-align: center; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--muted); }
.grain-flow b { color: var(--paper); }
.grain-flow i { color: var(--pink); font-size: 28px; font-style: normal; }

.preflight-list { max-width: 1180px; margin: 42px auto 28px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.preflight-list li { min-height: 76px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.preflight-list span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--pink-hot); font: 900 11px/1 ui-monospace, monospace; }
.preflight-list b { line-height: 1.35; }
.red-flags { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 18px; border: 1px solid var(--gold); border-radius: 14px; }
.red-flags b { color: var(--gold); margin-right: auto; }
.red-flags span { padding: 7px 10px; border-radius: 999px; background: rgba(255,212,122,.09); color: #ffe6b2; font-size: 12px; }

.gallery-spread { background: linear-gradient(180deg, #1c1220, #0f0a12); }
.collectible-grid { max-width: 1400px; margin: 42px auto 28px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.collectible-grid > :is(button, a) { position: relative; grid-column: span 4; min-height: 430px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--paper); cursor: zoom-in; text-align: left; text-decoration: none; }
.collectible-grid > :is(button, a):nth-child(4), .collectible-grid > :is(button, a):nth-child(5) { grid-column: span 6; }
.collectible-grid img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .25s ease; }
.collectible-grid > :is(button, a):hover img { transform: scale(1.025); }
.collectible-grid span { position: absolute; inset: auto 0 0; display: grid; gap: 5px; padding: 46px 18px 16px; background: linear-gradient(transparent, rgba(10,6,12,.94)); }
.collectible-grid small { color: var(--muted); }
.gallery-note { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; }
.gallery-note b { color: var(--pink-soft); }
.gallery-note span { color: var(--muted); }
.gallery-note a { color: var(--green); font-weight: 850; text-decoration: none; }
.motion-teaser-spread { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(360px,1.2fr); gap: clamp(28px,6vw,90px); align-items: center; background: radial-gradient(circle at 78% 44%, rgba(255,120,168,.2), transparent 34%), linear-gradient(145deg,#160f19,#28172a); }
.motion-teaser-copy { max-width: 560px; justify-self: end; }
.motion-teaser-copy h2 { margin: 22px 0; font-size: clamp(54px,6vw,94px); line-height: .9; letter-spacing: -.055em; }
.motion-teaser-copy > p:not(.eyebrow) { color: var(--muted); font-size: 18px; line-height: 1.6; }
.motion-teaser-frame { position: relative; justify-self: start; width: min(45vw,510px); aspect-ratio: 1440 / 2176; padding: 10px; border: 1px solid rgba(255,159,194,.45); border-radius: 30px; background: linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,120,168,.05)); box-shadow: 0 34px 90px rgba(5,2,7,.46); }
.motion-teaser-frame::before { content:""; position:absolute; inset:-22px; z-index:-1; border:1px solid rgba(255,120,168,.2); border-radius:42px; transform:rotate(2deg); }
.motion-teaser-frame video { display:block; width:100%; height:100%; border-radius:22px; background:#f7edf2; object-fit:cover; }
.next-drop-grid { max-width: 1100px; margin: 48px auto 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.next-drop-grid article { min-height: 420px; position: relative; overflow: hidden; padding: 30px 30px 30px 190px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.next-drop-grid img { position: absolute; left: 12px; bottom: 0; width: 170px; height: 300px; object-fit: contain; object-position: bottom; }
.next-drop-grid h3 { margin: 22px 0 12px; font-size: 31px; }
.next-drop-grid p { color: var(--muted); line-height: 1.55; }
.interest-link { margin-top: 22px; min-height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--pink); border-radius: 999px; background: rgba(255,120,168,.08); color: var(--pink-soft); font-weight: 900; text-decoration: none; }
.interest-link:hover { background: rgba(255,120,168,.16); }

.answer-closer { grid-template-columns: 150px 1.2fr .8fr; align-items: center; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.answer-closer img { width: 140px; height: 180px; object-fit: contain; object-position: bottom; }
.answer-closer > div { display: grid; gap: 12px; }
.answer-closer ol { display: grid; gap: 12px; padding-left: 24px; color: var(--paper); font-weight: 850; }

.gallery-dialog { border: 1px solid var(--line); border-radius: 18px; padding: 0; background: #0c080e; color: var(--paper); max-width: min(94vw, 1180px); }
.gallery-dialog::backdrop { background: rgba(4,2,5,.9); }
.gallery-dialog img { display: block; max-width: 92vw; max-height: 88vh; }
.gallery-dialog button { position: absolute; right: 12px; top: 12px; z-index: 2; padding: 9px 13px; border: 0; border-radius: 999px; background: rgba(15,10,18,.88); color: var(--paper); font-weight: 900; cursor: pointer; }

.prototype-footer { position: relative; z-index: 2; min-height: 62px; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px clamp(22px, 6vw, 96px); color: #9e8598; font: 750 11px/1.4 ui-monospace, monospace; }

@media (max-width: 900px) {
  .review-bar { grid-template-columns: 1fr auto; height: 58px; }
  .review-bar nav { display: none; }
  .brand img { width: 130px; height: 36px; }
  .cover-spread { grid-template-columns: 1fr; padding-top: 94px; }
  .cover-copy { z-index: 7; }
  .cover-copy h1 { font-size: clamp(62px, 16vw, 112px); }
  .cover-deck { max-width: 78%; }
  .cover-art { position: absolute; inset: 22% -12% -5% 28%; min-height: 0; opacity: 0.78; }
  .cover-character { right: -2%; height: 102%; max-width: 100%; }
  .cover-orbit { width: 72vw; left: -22%; top: 7%; }
  .prototype-note { max-width: 64%; }
  .candidate-heading { grid-template-columns: 1fr; }
  .candidate-heading .eyebrow { grid-column: auto; }
  .candidate-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .candidate-image { height: 220px; }
  .lesson-heading { grid-template-columns: 1fr; gap: 18px; }
  .lesson-heading .eyebrow { margin-bottom: 0; }
  .join-stage { gap: 62px; }
  .explain-row { grid-template-columns: 1fr; }
  .explain-card { min-height: 0; }
  .incident-metrics { grid-template-columns: 1fr 1fr; }
  .incident-metrics > div:nth-child(2) { border-right: 0; }
  .incident-metrics p { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); }
  .takeaway { grid-template-columns: 1fr; gap: 16px; }
  .schema-stage { grid-template-columns: 1fr; gap: 14px; }
  .schema-relation { grid-template-columns: auto 1fr auto; transform: rotate(90deg); width: 150px; justify-self: center; }
  .concept-grid, .query-compare, .practice-grid, .join-atlas, .repair-grid { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr; }
  .pipeline > b { transform: rotate(90deg); justify-self: center; }
  .manga-spread { grid-template-columns: 1fr; }
  .manga-plate { height: 62vh; min-height: 520px; }
  .model-contrast, .predicate-grid, .preflight-list, .next-drop-grid { grid-template-columns: 1fr; }
  .distinct-ledger { grid-template-columns: 1fr; }
  .collectible-grid > :is(button, a), .collectible-grid > :is(button, a):nth-child(4), .collectible-grid > :is(button, a):nth-child(5) { grid-column: span 6; }
  .concept-grid article, .practice-grid article { min-height: 0; }
  .row-machine { grid-template-columns: minmax(180px,0.8fr) 60px minmax(240px,1.2fr); }
}

@media (max-width: 640px) {
  .spread { padding: 88px 17px 56px; }
  .review-badge { font-size: 9px; }
  .cover-copy h1 { font-size: clamp(58px, 20vw, 92px); }
  .cover-deck { max-width: 100%; margin-top: 26px; font-size: 17px; }
  .cover-art { inset: 38% -38% -7% 15%; opacity: 0.5; }
  .cover-orbit { width: 90vw; }
  .cover-stamp { right: 27%; }
  .prototype-note { max-width: 78%; }
  .lesson-heading h2 { font-size: 42px; }
  .join-stage { grid-template-columns: 1fr; gap: 62px; }
  .table-card { padding: 17px 12px; }
  th, td { padding: 10px 8px; }
  .key-cell::after { right: 50%; top: auto; bottom: -35px; transform: translateX(50%); }
  .lookup-card .key-cell::after { left: 50%; top: -35px; bottom: auto; transform: translateX(-50%); }
  .fanout-heading { grid-template-columns: 1fr; }
  .toggle-button { justify-self: stretch; }
  .result-head { align-items: flex-start; padding: 18px 17px 7px; }
  .result-head h3 { font-size: 19px; }
  .metric-pill { padding: 8px 11px; }
  .incident-metrics { grid-template-columns: 1fr 1fr; }
  .incident-metrics > div { padding: 14px; }
  .incident-metrics strong { font-size: 24px; }
  .cover-picker { max-width: 88%; }
  .cover-picker button { min-height: 42px; }
  .candidate-grid { grid-template-columns: 1fr; }
  .candidate-image { height: 310px; }
  .schema-row { grid-template-columns: 1fr auto; }
  .schema-row small { grid-column: 1 / -1; justify-self: start; }
  .row-machine { grid-template-columns: 1fr; }
  .machine-arrow { transform: rotate(90deg); min-height: 46px; }
  .machine-input.missing { grid-column: auto; }
  .count-visual { grid-template-columns: 1fr; }
  .answer-jump { align-items: flex-start; flex-direction: column; }
  .prototype-footer { flex-direction: column; align-items: flex-start; }
  .forecast-box, .gallery-note { grid-template-columns: 1fr; }
  .motion-teaser-spread { grid-template-columns: 1fr; }
  .motion-teaser-copy { justify-self: stretch; }
  .motion-teaser-frame { justify-self: center; width: min(82vw,430px); }
  .grain-flow { grid-template-columns: 1fr; }
  .grain-flow i { transform: rotate(90deg); justify-self: center; }
  .collectible-grid { grid-template-columns: 1fr; }
  .collectible-grid > :is(button, a), .collectible-grid > :is(button, a):nth-child(4), .collectible-grid > :is(button, a):nth-child(5) { grid-column: auto; min-height: 390px; }
  .next-drop-grid article { padding: 28px 24px 300px; }
  .next-drop-grid img { left: 50%; transform: translateX(-50%); }
}

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

@media print {
  :root { color-scheme: light; --ink:#fffaf4; --ink-2:#fff3f7; --panel:#fffdfb; --panel-2:#fff8f8; --line:#d9a9bd; --line-soft:#ecd6df; --paper:#fffdfb; --text:#432c3c; --muted:#705968; --pink:#e84987; --pink-hot:#dc3f7b; --pink-soft:#a93361; --green:#168b7a; --gold:#9f6c08; --shadow:none; }
  @page { size: A4 portrait; margin: 0; }
  html, body {
    width: 210mm;
    max-width: 210mm;
    margin: 0;
  }
  body {
    background: #fffaf4;
    color: var(--text);
  }
  .table-card, .result-card, .explain-card, .schema-card, .concept-grid article,
  .model-contrast article, .predicate-grid article, .join-atlas article,
  .count-visual article, .query-compare article, .distinct-ledger article,
  .repair-grid article, .practice-grid article, .preflight-list li,
  .next-drop-grid article, .answer-stack details, .coach-rail, .toggle-button,
  .pipeline article, .machine-input, .machine-output {
    --paper:#241523;
    --text:#241523;
    --muted:#58434f;
    --pink-soft:#9f2858;
    --green:#168b7a;
    --gold:#9f6c08;
    color:#241523;
  }
  .table-card, .result-card, .explain-card, .schema-card, .concept-grid article,
  .model-contrast article, .predicate-grid article, .join-atlas article,
  .count-visual article, .query-compare article, .distinct-ledger article,
  .repair-grid article, .practice-grid article, .preflight-list li,
  .next-drop-grid article, .answer-stack details, .coach-rail,
  .pipeline article, .machine-input, .machine-output, .answers-spread > .answer-closer {
    background: linear-gradient(145deg, #fffaf6 0%, #f8edf2 100%);
  }
  .review-bar, .prototype-footer, .prototype-note, .ambient-canvas, .candidate-strip, .gallery-dialog, .gallery-note a, .motion-teaser-spread, .skip-link,
  .cover-picker { display: none !important; }
  main { display: block; width: 210mm; max-width: 210mm; }
  #answers { break-after: page; page-break-after: always; }
  #next-drop { height: 297mm; overflow: hidden; display: grid; align-content: center; }
  .answer-stack details:not([open]) > div { display: block !important; }
  .spread { flex: 0 0 auto; width: 210mm; min-width: 210mm; max-width: 210mm; min-height: 297mm; height: 297mm; padding: 8mm 9mm; border-bottom: 0; break-after: page; page-break-after: always; overflow: hidden; }
  #answers { min-height: 0; height: auto; overflow: visible; }
  main > .spread:last-of-type { break-after: auto; page-break-after: auto; }
  #answers { border-bottom: 0; }
  .cover-spread {
    grid-template-columns: .76fr 1.24fr;
    min-height: 297mm;
    height: 297mm;
    overflow: hidden;
    break-inside: avoid;
    color: #fff9fc;
    --text:#fff9fc;
    --muted:#d8c4d2;
    --paper:#fff9fc;
  }
  #pairing { height: 297mm; overflow: hidden; break-inside: avoid; }
  #pairing .coach-rail { display: none !important; }
  .cover-copy h1 { font-size: 19mm; }
  .cover-art { position: relative; inset: auto; min-height: 0; height: 281mm; opacity: 1; }
  .cover-orbit { width: 100%; max-width: none; left: 0; }
  .cover-character.cover-c { z-index: 3; right: -8mm; bottom: -7mm; width: auto; height: 82%; max-width: none; filter: drop-shadow(0 5mm 7mm rgba(4,1,6,.24)); }
  .lesson-heading { grid-template-columns: .86fr 1.14fr; gap: 7mm; margin-bottom: 5mm; }
  .lesson-heading h2 { font-size: 11.5mm; }
  .lesson-heading > p { font-size: 3.8mm; }
  .join-stage { gap: 22mm; }
  .table-card { padding: 3.5mm; }
  .table-card h3, .result-card h3 { margin: 1.5mm 0 3mm; font-size: 5mm; }
  th, td { padding: 2mm; }
  .result-head { padding: 3.5mm 4mm 1mm; }
  .result-card .table-scroll { padding: 0 2mm 2mm; }
  .explain-row { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3mm; margin-block: 5mm; }
  #pairing .explain-row { margin-block: 3mm; }
  .explain-card { min-height: 0; padding: 4mm; }
  .explain-card { background: #fffdfb; }
  .pipeline { grid-template-columns: minmax(27mm,1.05fr) 5mm minmax(23mm,.85fr) 5mm minmax(31mm,1.15fr) 5mm minmax(35mm,1.25fr) 5mm minmax(24mm,.9fr); gap: 1mm; margin: 7mm auto 7mm; }
  .pipeline article { min-width: 0; min-height: 40mm; padding: 4mm; }
  .pipeline article strong { font-size: 4mm; line-height: 1.22; }
  .pipeline article small { font-size: 2.9mm; line-height: 1.45; }
  .pipeline > b { transform: none; font-size: 4mm; }
  .model-contrast, .predicate-grid, .next-drop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .concept-grid, .query-compare, .practice-grid, .repair-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .schema-stage { grid-template-columns: minmax(0,1fr) minmax(28mm,.35fr) minmax(0,1fr); gap: 2mm; margin: 5mm auto 4mm; }
  .schema-card > h3 { padding: 2mm 4mm 3mm; font-size: 5.5mm; }
  .schema-label { padding: 3mm 4mm 0; }
  .schema-row { min-height: 11mm; grid-template-columns: minmax(0,1fr) auto minmax(0,.9fr); padding: 2mm 4mm; }
  .schema-row small { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .schema-relation { width: auto; transform: none; }
  .concept-grid { margin-bottom: 4mm; gap: 2.5mm; }
  .concept-grid article { min-height: 34mm; padding: 3.5mm; background: #fffdfb; }
  .concept-grid h3 { margin: 3mm 0 1.5mm; font-size: 4.5mm; }
  .concept-grid p { font-size: 3mm; }
  .join-atlas { grid-template-columns: repeat(4,minmax(0,1fr)); margin: 7mm auto 5mm; }
  .join-atlas article { min-height: 48mm; padding: 4mm; }
  .practice-grid { margin: 7mm auto 5mm; gap: 3mm; }
  .practice-grid article { min-height: 0; padding: 4mm; }
  .practice-grid h3 { margin: 4mm 0 2mm; font-size: 4.7mm; }
  .practice-grid p { font-size: 3mm; }
  .practice-grid .prompt-line { margin-top: 3mm; padding-top: 3mm; }
  #practice .practice-grid { margin: 4mm auto 3mm; }
  #practice .core-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .practice-continuation-spread .practice-continuation { margin: 8mm auto 3mm; }
  .practice-continuation-spread .stretch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 3mm; }
  #practice .answer-jump, .practice-continuation-spread .answer-jump { display: none; }
  .preflight-list { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 7mm auto 5mm; gap: 2.5mm; }
  .preflight-list li { min-height: 14mm; padding: 2.5mm 3mm; }
  .manga-spread { --paper:#241523; --text:#241523; --muted:#6f5666; grid-template-columns: 1.15fr .85fr; min-height: 297mm; height: 297mm; padding: 0; color:#241523; break-inside: avoid; }
  .fashion-plate-spread { min-height: 297mm; height: 297mm; padding: 0; break-inside: avoid; }
  .fashion-plate-orbit { display: none; }
  .fashion-plate-spread > img { width: 142mm; height: 289mm; }
  .fashion-plate-halo { width: 168mm; }
  .fashion-plate-orbit.orbit-one { width: 190mm; }
  .fashion-plate-orbit.orbit-two { width: 154mm; }
  .table-card, .result-card, .explain-card, .takeaway, .coach-rail, .practice-grid article, .answer-stack details { break-inside: avoid; }
  .spread::before { display: none; }
  .sql-strip, .model-contrast pre, .predicate-grid pre, .hero-code, .repair-grid pre, .query-compare pre, .answer-stack pre { background: #2a1a2b; color: #fff8fb; }
  .manga-plate { height: 297mm; min-height: 0; }
  .manga-copy { padding: 10mm; }
  .manga-copy h2 { font-size: 15mm; }
  .early-fashion-vote { min-height: 9mm; margin-bottom: 7mm; padding: 2mm 3.5mm; font-size: 3mm; }
  .coach-rail { grid-template-columns: 28mm 1fr; gap: 2mm; min-height: 32mm; margin-top: 4mm; padding: 1mm 4mm 1mm 0; overflow: hidden; background: #fff2f7; }
  .coach-rail img { width: 28mm; height: 30mm; object-fit: contain; object-position: center bottom; transform: scale(1.05); transform-origin: center center; }
  .coach-rail b { font-size: 3mm; }
  .coach-rail span { font-size: 3mm; }
  .query-compare { margin: 5mm auto 4mm; gap: 2.5mm; }
  .query-compare article { padding: 3.5mm; }
  .query-compare h3 { margin: 2.5mm 0 2mm; font-size: 4.3mm; }
  .query-compare pre { margin-bottom: 2.5mm; padding: 3mm; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 2.5mm; }
  .query-compare p { font-size: 2.9mm; }
  .anti-art { height: 108mm; margin-top: 4mm; }
  .takeaway { grid-template-columns: .78fr 1.22fr; gap: 5mm; margin-top: 4mm; padding-top: 4mm; }
  .takeaway strong { font-size: 4.5mm; }
  .takeaway span { font-size: 3.2mm; }
  .row-machine, .count-visual, .distinct-ledger, .repair-grid { margin: 5mm auto 4mm; }
  .distinct-ledger article { min-height: 32mm; padding: 3.5mm; }
  .repair-grid article { padding: 3.5mm; }
  .repair-grid h3 { margin: 3mm 0 2mm; }
  .repair-grid pre { padding: 2.5mm; font-size: 2.5mm; }
  .repair-grid p { font-size: 2.9mm; }
  .grain-flow span { color: #58434f; }
  .grain-flow span b { color: #241523; }
  .fanout-spread .fanout-heading { grid-template-columns: 1fr auto; }
  .fanout-spread .toggle-button { min-height: 12mm; padding: 2mm 3mm; }
  .fanout-spread .fanout-stage { margin-top: 4mm; }
  .fanout-spread .incident-metrics { margin: 4mm auto; }
  .fanout-spread .incident-metrics > div { padding: 3mm 4mm; }
  .fanout-spread .incident-metrics p { padding: 3mm 4mm; font-size: 3mm; }
  .fanout-spread .result-card td, .fanout-spread .result-card th { padding-block: 1.4mm; }
  .fanout-spread .coach-rail { display: none; }
  .collectible-grid { margin: 7mm auto 5mm; gap: 3mm; }
  .collectible-grid > :is(button, a) { grid-column: span 4; min-height: 72mm; height: 72mm; }
  .collectible-grid > :is(button, a):nth-child(4), .collectible-grid > :is(button, a):nth-child(5) { grid-column: span 6; }
  .next-drop-grid { margin: 7mm auto 5mm; }
  .next-drop-grid article { min-height: 80mm; padding: 6mm 6mm 6mm 45mm; }
  .next-drop-grid img { width: 42mm; height: 72mm; left: 0; }
  .next-drop-grid article:first-child img { width: 48mm; height: 76mm; left: -2mm; }
  .next-drop-grid article { background: #fffdfb; }
  .answer-stack { margin: 7mm auto 5mm; gap: 2.5mm; }
  .answer-stack summary { min-height: 12mm; padding: 3mm 4mm; font-size: 4mm; }
  .answer-stack details > div { padding: 0 4mm 4mm; }
  .answer-stack pre { margin: 2.5mm 0; padding: 3mm; font-size: 2.6mm; line-height: 1.4; }
  .answer-stack p { font-size: 3mm; }
  .interest-link { min-height: 9mm; margin-top: 4mm; padding: 0 3mm; font-size: 3mm; }
  .vote-disclosure { max-width: none; margin-top: 3mm; color: #d8c4d2; font-size: 3.1mm; }
  .answers-spread > .answer-closer { min-height: 102mm; grid-template-columns: 56mm 1.15fr .85fr; gap: 4mm; margin-top: 4mm; padding: 5mm 6mm 5mm 2mm; border-top: 1px solid #e6b7ca; border-radius: 5mm; background: #fffdfb; }
  .answer-closer img { width: 48mm; height: 90mm; object-position: center bottom; transform:scale(1.25); transform-origin:center bottom; }
  .answer-closer strong { color: #241523; font-size: 5.4mm; }
  .answer-closer span { color: #58434f; font-size: 3.2mm; }
  .answer-closer ol { gap: 3mm; padding-left: 5mm; color: #241523; font-size: 3.2mm; }

  /* The browser edition is intentionally dark. The downloadable field book uses the academy's
     warm paper surface so it reads as a designed workbook instead of a sequence of slide cards. */
  .lesson-spread,
  .fanout-spread,
  .practice-continuation-spread,
  .answers-spread,
  #next-drop {
    color: #432c3c;
    --text:#432c3c;
    --muted:#705968;
    --paper:#fffdfb;
    --pink-soft:#a93361;
    background:
      radial-gradient(circle at 12mm 12mm, rgba(219,102,147,.055) 0 3.4mm, transparent 3.7mm) 0 0 / 42mm 42mm,
      #fffaf4;
  }
  .lesson-spread .eyebrow,
  .answers-spread .eyebrow,
  #next-drop .eyebrow { color:#a93361; }
  .lesson-spread .eyebrow span,
  .answers-spread .eyebrow span,
  #next-drop .eyebrow span { color:#6a304a; }
  .lesson-spread .lesson-heading strong { color:#432c3c; }
  .lesson-spread .takeaway,
  .fanout-spread .takeaway { color:#432c3c; }
  .lesson-spread .takeaway strong,
  .fanout-spread .takeaway strong { color:#432c3c; }
  .lesson-spread .takeaway span,
  .fanout-spread .takeaway span { color:#705968; }
  .lesson-spread .practice-continuation,
  .practice-continuation-spread .practice-continuation { color:#6a304a; }
  .lesson-spread .red-flags { background:#fff4e6; color:#6a304a; }
  .lesson-spread .red-flags span { background:#fffaf4; color:#705968; }
  .lesson-spread .forecast-box strong { color:#a93361; }
  .fanout-spread .incident-metrics { background:#fff4f7; color:#432c3c; box-shadow:none; }
  .fanout-spread .incident-metrics span,
  .fanout-spread .incident-metrics p { color:#705968; }
  .fanout-spread .incident-metrics strong { color:#432c3c; }
  .fanout-spread .eyebrow span { color:#6a304a; }
  .table-card, .result-card, .schema-card, .concept-grid article,
  .model-contrast article, .predicate-grid article, .join-atlas article,
  .count-visual article, .query-compare article, .distinct-ledger article,
  .repair-grid article, .practice-grid article, .preflight-list li,
  .next-drop-grid article, .answer-stack details, .coach-rail,
  .pipeline article, .machine-input, .machine-output,
  .toggle-button, .answers-spread > .answer-closer {
    box-shadow:none !important;
    filter:none !important;
  }
  .connector-layer path.hot { filter:none; }
  #gallery {
    color:#fff9fc;
    --text:#fff9fc;
    --muted:#d8c4d2;
    --paper:#fff9fc;
    --pink-soft:#ff9fc2;
    background:linear-gradient(180deg,#1b121f,#110c14);
  }

  /* Alternate collectible edition. It retains the original midnight-academy mood without
     restoring the heavy browser shadows that made the previous print pass look muddy. */
  html.print-dark {
    color-scheme: dark;
    --ink:#150f19;
    --ink-2:#1d1421;
    --panel:#281b2d;
    --panel-2:#211724;
    --line:#63445f;
    --line-soft:#473043;
    --paper:#fff9fc;
    --text:#fff9fc;
    --muted:#d8c4d2;
    --pink:#ff4f93;
    --pink-hot:#ff79aa;
    --pink-soft:#ff9fc2;
    --green:#65d6c5;
    --gold:#f3c96b;
  }
  html.print-dark body { background:#150f19; color:#fff9fc; }
  html.print-dark .lesson-spread,
  html.print-dark .fanout-spread,
  html.print-dark .practice-continuation-spread,
  html.print-dark .answers-spread,
  html.print-dark #next-drop {
    color:#fff9fc;
    --text:#fff9fc;
    --muted:#d8c4d2;
    --paper:#fff9fc;
    --pink-soft:#ff9fc2;
    background:
      radial-gradient(circle at 12mm 12mm, rgba(255,121,170,.07) 0 3.4mm, transparent 3.7mm) 0 0 / 42mm 42mm,
      linear-gradient(180deg,#1b121f,#150f19);
  }
  html.print-dark .table-card,
  html.print-dark .result-card,
  html.print-dark .explain-card,
  html.print-dark .schema-card,
  html.print-dark .concept-grid article,
  html.print-dark .model-contrast article,
  html.print-dark .predicate-grid article,
  html.print-dark .join-atlas article,
  html.print-dark .count-visual article,
  html.print-dark .query-compare article,
  html.print-dark .distinct-ledger article,
  html.print-dark .repair-grid article,
  html.print-dark .practice-grid article,
  html.print-dark .preflight-list li,
  html.print-dark .next-drop-grid article,
  html.print-dark .answer-stack details,
  html.print-dark .coach-rail,
  html.print-dark .toggle-button,
  html.print-dark .pipeline article,
  html.print-dark .machine-input,
  html.print-dark .machine-output,
  html.print-dark .answers-spread > .answer-closer,
  html.print-dark .fanout-spread .incident-metrics {
    color:#fff9fc;
    --text:#fff9fc;
    --muted:#d8c4d2;
    --paper:#fff9fc;
    --pink-soft:#ff9fc2;
    background:linear-gradient(145deg,#2a1d30,#211724);
    border-color:#63445f;
    box-shadow:none !important;
    filter:none !important;
  }
  html.print-dark .lesson-spread .eyebrow,
  html.print-dark .answers-spread .eyebrow,
  html.print-dark #next-drop .eyebrow,
  html.print-dark .fanout-spread .eyebrow { color:#ff79aa; }
  html.print-dark .lesson-spread .eyebrow span,
  html.print-dark .answers-spread .eyebrow span,
  html.print-dark #next-drop .eyebrow span,
  html.print-dark .fanout-spread .eyebrow span { color:#ffb6d0; }
  html.print-dark .lesson-spread .lesson-heading strong,
  html.print-dark .lesson-spread .takeaway,
  html.print-dark .fanout-spread .takeaway,
  html.print-dark .lesson-spread .takeaway strong,
  html.print-dark .fanout-spread .takeaway strong,
  html.print-dark .grain-flow span b,
  html.print-dark .answers-spread > .answer-closer strong,
  html.print-dark .answers-spread > .answer-closer ol { color:#fff9fc; }
  html.print-dark .lesson-spread .takeaway span,
  html.print-dark .fanout-spread .takeaway span,
  html.print-dark .grain-flow span,
  html.print-dark .answers-spread > .answer-closer span,
  html.print-dark .fanout-spread .incident-metrics span,
  html.print-dark .fanout-spread .incident-metrics p { color:#d8c4d2; }
  html.print-dark .lesson-spread .forecast-box strong,
  html.print-dark .fanout-spread .incident-metrics strong { color:#ff9fc2; }
  html.print-dark .toggle-copy strong { color:#fff9fc; }
  html.print-dark .toggle-copy small { color:#d8c4d2; }
  html.print-dark .lesson-spread .practice-continuation,
  html.print-dark .practice-continuation-spread .practice-continuation { color:#ffb6d0; }
  html.print-dark .lesson-spread .red-flags { background:#3b2631; color:#ffd48a; }
  html.print-dark .lesson-spread .red-flags span { background:#251921; color:#e8cad7; }
  html.print-dark .sql-strip,
  html.print-dark .model-contrast pre,
  html.print-dark .predicate-grid pre,
  html.print-dark .hero-code,
  html.print-dark .repair-grid pre,
  html.print-dark .query-compare pre,
  html.print-dark .answer-stack pre { background:#100b13; color:#fff8fb; }

  /* Stable answer groups keep each answer card whole without manufacturing a clipped running
     header inside the card's own border. */
  .answer-stack details:nth-child(3),
  .answer-stack details:nth-child(7),
  .answer-stack details:nth-child(10) {
    break-before:page;
    page-break-before:always;
    margin-top:7mm;
  }
  .answer-stack details:nth-child(3)::before,
  .answer-stack details:nth-child(7)::before,
  .answer-stack details:nth-child(10)::before { content:none; }
}


.release-tools {
  position: fixed;
  z-index: 40;
  inset: 14px 18px auto auto;
  display: flex;
  gap: 8px;
}
.release-tools a, .release-footer a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid rgba(255,120,168,.55);
  border-radius: 999px;
  background: rgba(21,15,25,.86);
  color: #fff9fc;
  font-weight: 850;
  text-decoration: none;
  backdrop-filter: blur(14px);
}
.release-tools .download-companion { background: #e84987; border-color: #ff9fc2; }
.release-tools .paper-companion { background: rgba(21,15,25,.86); }
.release-footer {
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px clamp(18px, 5vw, 72px);
  background: #0f0b12;
  color: #d8c4d2;
  font-size: 12px;
}
.release-downloads { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .release-tools { inset: 10px 10px auto auto; justify-content: flex-end; }
  .release-tools a:first-child, .release-tools .paper-companion { display: none; }
  .cover-copy { z-index: 8; max-width: calc(100vw - 34px); }
  .cover-copy h1 { font-size: clamp(52px, 17.2vw, 70px); line-height: .82; letter-spacing: -.065em; }
  .cover-art { inset: 42% -48% -7% 28%; opacity: .24; }
  .release-footer { align-items: flex-start; flex-direction: column; }
}
@media print {
  .release-tools, .release-footer { display: none !important; }
}