/* ============================================================
   THE HEAP, BYTE BY BYTE — engineering field-manual aesthetic
   warm paper · ink · vermillion accents · mono byte-work
   ============================================================ */

:root {
  --paper:      #f6f1e5;
  --paper-deep: #eee6d2;
  --paper-card: #fbf8f0;
  --ink:        #211c14;
  --ink-soft:   #6f6552;
  --rule:       #d9cdb2;
  --rule-hard:  #b8a988;
  --accent:     #c2470f;   /* vermillion */
  --accent-soft:#f3d9c8;
  --pg:         #2f5d8a;   /* postgres blue */
  --pg-soft:    #d9e4ee;
  --green:      #3d6b4a;
  --green-soft: #dbe7d9;
  --gold:       #a97a12;
  --gold-soft:  #f0e3c2;
  --dead:       #8a3a3a;
  --code-bg:    #262019;
  --code-ink:   #efe6d2;
  --serif: "Newsreader", Georgia, serif;
  --display: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 80% -100px, rgba(194,71,15,.05), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(120,100,60,.045) 31px 32px),
    var(--paper);
}

::selection { background: var(--accent); color: var(--paper); }

.mono { font-family: var(--mono); font-size: .88em; }

/* -------------------------------------------------- progress bar */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: transparent;
}
.progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--pg), var(--accent));
  transition: width .1s linear;
}

/* -------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 3px double var(--rule-hard);
  padding: clamp(3rem, 8vw, 6rem) 1.5rem clamp(2.5rem, 6vw, 4.5rem);
}
.hero__bytes {
  position: absolute; inset: 0;
  font-family: var(--mono);
  font-size: 11px; line-height: 1.9; letter-spacing: .35em;
  color: rgba(47,93,138,.13);
  white-space: pre-wrap; word-break: break-all;
  user-select: none; pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  animation: bytesdrift 60s linear infinite;
}
@keyframes bytesdrift { from { transform: translateY(0); } to { transform: translateY(-120px); } }

.hero__inner { position: relative; max-width: 880px; margin: 0 auto; }

.hero__kicker {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .8rem; margin-bottom: 2rem;
  animation: rise .8s ease both;
}
.hero__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 6.2rem);
  line-height: .98;
  letter-spacing: -.02em;
  animation: rise .8s .12s ease both;
}
.hero__title em {
  font-style: italic; font-weight: 500;
  color: var(--pg);
}
.hero__sub {
  max-width: 620px;
  margin-top: 1.6rem;
  font-size: 1.13rem;
  color: var(--ink);
  animation: rise .8s .24s ease both;
}
.hero__toc {
  margin-top: 2.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  animation: rise .8s .36s ease both;
}
.hero__toc a {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .65rem .9rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: .98rem; font-weight: 600;
  transition: background .18s, color .18s;
}
.hero__toc a span {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  color: var(--accent);
}
.hero__toc a:hover { background: var(--ink); color: var(--paper); }
.hero__toc a:hover span { color: var(--accent-soft); }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------- side nav */
.sidenav {
  position: fixed; left: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 50;
}
.sidenav a {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.sidenav a i {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--rule-hard);
  background: transparent;
  transition: all .25s;
}
.sidenav a b {
  font-family: var(--mono); font-size: 10px; color: var(--ink-soft);
  opacity: 0; transform: translateX(-4px); transition: all .25s;
  font-weight: 600;
}
.sidenav a:hover b { opacity: 1; transform: none; }
.sidenav a.active i { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
.sidenav a.active b { opacity: 1; transform: none; color: var(--accent); }
@media (max-width: 1100px) { .sidenav { display: none; } }

/* -------------------------------------------------- chapters */
.manual { max-width: 880px; margin: 0 auto; padding: 0 1.5rem 4rem; }

.chapter { padding: clamp(3rem, 7vw, 5rem) 0 1rem; }

.chapter__head {
  display: flex; align-items: baseline; gap: 1.2rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .8rem; margin-bottom: 2rem;
}
.chapter__num {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 300; font-style: italic;
  color: var(--accent);
  line-height: 1;
}
.chapter__head h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  letter-spacing: -.01em;
}

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

.lede {
  font-size: 1.22rem; line-height: 1.55;
  font-weight: 500;
  margin-bottom: 1.2rem;
}
.chapter__body > p { margin-bottom: 1.1rem; }
.chapter__body b, .chapter__body strong { font-weight: 700; }

.chapter__body a, .colophon a {
  color: var(--pg);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rule-hard);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.chapter__body a:hover, .colophon a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.outro {
  font-family: var(--display);
  font-size: 1.25rem; line-height: 1.5;
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
}

/* deflist */
.deflist { margin: 0 0 1.2rem 1.4rem; }
.deflist li { margin-bottom: .65rem; padding-left: .3rem; }
.deflist li::marker { font-family: var(--mono); font-size: .8em; color: var(--accent); font-weight: 600; }

/* -------------------------------------------------- notes */
.note {
  margin: 1.4rem 0 1.6rem;
  padding: 1rem 1.2rem;
  background: var(--paper-deep);
  border-left: 3px solid var(--accent);
  font-size: .97rem;
  line-height: 1.55;
}
.note b { font-family: var(--display); }

/* -------------------------------------------------- figures */
.figure { margin: 1.6rem 0 1.8rem; }
.figure figcaption, .widget figcaption {
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .04em;
  color: var(--ink-soft);
  margin-top: .6rem;
  padding-left: .2rem;
  border-left: 2px solid var(--rule-hard);
  padding-left: .7rem;
}

.ascii {
  font-family: var(--mono);
  font-size: clamp(.62rem, 1.7vw, .82rem);
  line-height: 1.45;
  overflow-x: auto;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  box-shadow: 4px 4px 0 var(--paper-deep);
  padding: 1.1rem 1.3rem;
  color: var(--ink);
}

/* code blocks */
.code {
  font-family: var(--mono);
  font-size: .82rem; line-height: 1.65;
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  margin: 1.4rem 0;
  border-radius: 2px;
  box-shadow: 5px 5px 0 var(--paper-deep);
}
.c-kw { color: #e8a45c; }
.c-cm { color: #8d8371; font-style: italic; }

/* -------------------------------------------------- tables */
.tablewrap { overflow-x: auto; margin: 1.4rem 0; }
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  background: var(--paper-card);
  border: 1px solid var(--rule-hard);
}
.spec th {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  text-align: left;
  background: var(--ink); color: var(--paper);
  padding: .55rem .8rem;
}
.spec td {
  padding: .55rem .8rem;
  border-top: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.45;
}
.spec tr:nth-child(even) td { background: rgba(217,205,178,.18); }
.spec--tight td, .spec--tight th { padding: .35rem .6rem; font-size: .8rem; }

/* -------------------------------------------------- widgets (shared) */
.widget {
  margin: 1.8rem 0 2rem;
  border: 1.5px solid var(--ink);
  background: var(--paper-card);
  box-shadow: 7px 7px 0 var(--paper-deep);
}
.widget__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--ink); color: var(--paper);
  padding: .5rem .9rem;
}
.widget__title {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-soft);
}
.widget__hint { font-family: var(--mono); font-size: .68rem; color: rgba(246,241,229,.55); }
.widget figcaption { margin: .8rem .9rem 1rem; }

.btn {
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  padding: .45rem .85rem;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  transition: all .15s;
  border-radius: 2px;
}
.btn small { opacity: .6; font-weight: 400; margin-left: .2em; }
.btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.legend {
  display: flex; flex-wrap: wrap; gap: 1rem;
  padding: .7rem .9rem 0;
  font-family: var(--mono); font-size: .7rem; color: var(--ink-soft);
}
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.sw { width: 13px; height: 13px; display: inline-block; border: 1px solid rgba(0,0,0,.25); }
.sw--header { background: var(--pg); }
.sw--linp   { background: var(--gold); }
.sw--free   { background: repeating-linear-gradient(45deg, #efe8d6 0 4px, #e2d7bc 4px 8px); }
.sw--tuple  { background: var(--green); }

/* -------------------------------------------------- playground */
.playground { padding: 1rem .9rem .4rem; }
.playground__controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }

.playground__pages { display: flex; flex-direction: column; gap: .9rem; }

.hpage { animation: pagein .5s ease both; }
@keyframes pagein { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: none; } }
.hpage__label {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-soft);
  margin-bottom: .25rem;
  display: flex; justify-content: space-between;
}
.hpage__label .full { color: var(--dead); font-weight: 600; }
.hpage__strip {
  display: flex; height: 46px;
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.seg {
  position: relative;
  min-width: 3px;
  transition: flex-grow .45s cubic-bezier(.5,0,.2,1), background .3s;
  cursor: default;
}
.seg--header { background: var(--pg); }
.seg--linp   { background: var(--gold); border-left: 1px solid rgba(0,0,0,.15); }
.seg--free   { background: repeating-linear-gradient(45deg, #efe8d6 0 5px, #e2d7bc 5px 10px); }
.seg--tuple  { background: var(--green); border-left: 1px solid rgba(255,255,255,.25); }
.seg--tuple:nth-child(odd) { filter: brightness(1.15); }
.seg--tuple.flash { animation: segflash .8s ease; }
@keyframes segflash { 0% { filter: brightness(2.1); } 100% { filter: brightness(1); } }
.seg:hover::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono); font-size: .66rem;
  background: var(--ink); color: var(--paper);
  padding: .25rem .5rem; border-radius: 2px;
  z-index: 20; pointer-events: none;
}
.hpage__markers {
  position: relative; height: 15px;
  font-family: var(--mono); font-size: .6rem; color: var(--accent);
}
.hpage__markers span { position: absolute; transform: translateX(-50%); transition: left .45s cubic-bezier(.5,0,.2,1); white-space: nowrap; }

.playground__meta { display: grid; grid-template-columns: auto 1fr; gap: 1rem; margin-top: 1rem; align-items: start; }
@media (max-width: 640px) { .playground__meta { grid-template-columns: 1fr; } }

.statgrid {
  display: grid; grid-template-columns: auto auto; gap: .15rem 1rem;
  font-family: var(--mono); font-size: .74rem;
  background: var(--paper-deep); padding: .7rem .9rem;
  min-width: 220px;
}
.statgrid dt { color: var(--ink-soft); }
.statgrid dd { text-align: right; font-weight: 600; }

.pglog {
  font-family: var(--mono); font-size: .7rem; line-height: 1.7;
  max-height: 108px; overflow-y: auto;
  border-left: 2px solid var(--rule-hard);
  padding-left: .8rem;
  color: var(--ink-soft);
}
.pglog .op { color: var(--accent); font-weight: 600; }
.pglog div:first-child { color: var(--ink); }

/* -------------------------------------------------- hexplorer */
.hexplorer { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: 1.1rem .9rem; }
@media (max-width: 700px) { .hexplorer { grid-template-columns: 1fr; } }

.hexplorer__bytes {
  display: grid; grid-template-columns: repeat(8, 34px); gap: 3px;
  align-self: start;
}
.hxb {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  text-align: center; line-height: 30px; height: 30px;
  background: var(--paper-deep);
  border: 1px solid var(--rule-hard);
  cursor: pointer;
  transition: all .14s;
}
.hxb:hover, .hxb.lit {
  background: var(--field-c, var(--pg));
  color: #fff; border-color: transparent;
  transform: translateY(-2px);
}
.hexplorer__detail {
  background: var(--paper-deep);
  padding: 1rem 1.1rem;
  min-height: 150px;
  border-left: 3px solid var(--pg);
}
.hexplorer__prompt { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); }
.hexplorer__detail h4 { font-family: var(--mono); font-size: .95rem; color: var(--pg); margin-bottom: .3rem; }
.hexplorer__detail .hval { font-family: var(--mono); font-size: .8rem; margin: .35rem 0; }
.hexplorer__detail .hval b { color: var(--accent); }
.hexplorer__detail p { font-size: .9rem; line-height: 1.5; }

/* -------------------------------------------------- itemid widget */
.itemid { padding: 1.1rem .9rem; }
.itemid__controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.4rem;
  margin-bottom: 1.2rem;
}
.itemid__controls label {
  display: flex; flex-direction: column; gap: .3rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.itemid__controls label b { color: var(--ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
.itemid__controls input[type=range] { accent-color: var(--accent); }
.itemid__controls select {
  font-family: var(--mono); font-size: .78rem;
  padding: .35rem .4rem;
  background: var(--paper-card); border: 1.5px solid var(--ink); color: var(--ink);
}
.itemid__controls output { color: var(--ink); font-size: .9rem; }

.itemid__bits { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.bitgroup { flex: 1 1 0; min-width: 0; }
.bitgroup--flag { flex: 0 0 auto; }
.bitgroup__label {
  font-family: var(--mono); font-size: .6rem; font-weight: 600;
  color: var(--ink-soft); white-space: nowrap;
  margin-bottom: 4px;
}
.bitgroup__bits { display: flex; gap: 2px; }
.bit {
  flex: 1 1 0; min-width: 13px; max-width: 26px; height: 34px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: clamp(.6rem, 1.8vw, .82rem); font-weight: 600;
  border: 1px solid rgba(0,0,0,.2);
  transition: background .2s;
}
.bitgroup--flag .bit { flex: 0 0 auto; width: 26px; }
.bit--len  { background: var(--green-soft); color: var(--green); }
.bit--flag { background: var(--gold-soft); color: var(--gold); }
.bit--off  { background: var(--pg-soft); color: var(--pg); }
.bit.on--len  { background: var(--green); color: #fff; }
.bit.on--flag { background: var(--gold); color: #fff; }
.bit.on--off  { background: var(--pg); color: #fff; }
.itemid__readout {
  margin-top: 1rem; font-size: .82rem; line-height: 1.8;
  background: var(--paper-deep); padding: .7rem .9rem;
}
.itemid__readout b { color: var(--accent); }

/* -------------------------------------------------- bitmap lab */
.bitmaplab { padding: 1.1rem .9rem; display: grid; gap: 1.3rem; }

.bitmaplab__natts {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin-bottom: .8rem;
}
.bitmaplab__natts input { accent-color: var(--accent); flex: 1; max-width: 260px; }
.bitmaplab__natts output { font-size: 1rem; font-weight: 600; color: var(--ink); }

.bitmaplab__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  padding: .4rem .6rem;
  border: 1.5px solid var(--green);
  background: var(--green-soft); color: var(--green);
  cursor: pointer; user-select: none;
  transition: all .15s;
  border-radius: 2px;
}
.chip:hover { transform: translateY(-2px); }
.chip.isnull {
  border-color: var(--rule-hard); border-style: dashed;
  background: transparent; color: var(--ink-soft);
  text-decoration: line-through;
}

.bitmaplab__bitrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.bmbyte { display: flex; gap: 2px; flex-direction: column; }
.bmbyte__label { font-family: var(--mono); font-size: .6rem; color: var(--ink-soft); text-align: center; }
.bmbyte__bits { display: flex; gap: 2px; }
.bmbit {
  width: 24px; height: 30px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  border: 1px solid rgba(0,0,0,.2);
  position: relative;
  transition: all .2s;
}
.bmbit small { position: absolute; bottom: -15px; font-size: .52rem; color: var(--ink-soft); font-weight: 400; }
.bmbit--set  { background: var(--green); color: #fff; }
.bmbit--null { background: var(--paper-card); color: var(--dead); border-color: var(--dead); border-style: dashed; }
.bmbit--pad  { background: repeating-linear-gradient(45deg, #efe8d6 0 4px, #e2d7bc 4px 8px); color: var(--ink-soft); }
.bitmaplab__bitrow { padding-bottom: 18px; }
.bmnone {
  font-family: var(--mono); font-size: .78rem; color: var(--ink-soft);
  border: 1.5px dashed var(--rule-hard); padding: .55rem .8rem;
}
.bmnone b { color: var(--green); }

.bitmaplab__calc {
  font-size: .78rem; line-height: 1.9;
  background: var(--paper-deep); padding: .7rem .9rem; margin-top: .6rem;
}
.bitmaplab__calc b { color: var(--accent); }
.bitmaplab__calc .free { color: var(--green); font-weight: 600; }

.bitmaplab__layout { margin-top: .8rem; }
.tuplebar { display: flex; height: 38px; border: 1.5px solid var(--ink); overflow: hidden; }
.tuplebar .tseg {
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .62rem; font-weight: 600; color: #fff;
  min-width: 26px;
  transition: flex-grow .4s ease;
  white-space: nowrap; overflow: hidden;
  border-right: 1px solid rgba(0,0,0,.2);
}
.tseg--hdr { background: var(--pg); }
.tseg--bmp { background: var(--gold); }
.tseg--pad { background: repeating-linear-gradient(45deg, #b9ad91 0 4px, #a89a7c 4px 8px); color: var(--ink); }
.tseg--col { background: var(--green); }
.tseg--col:nth-child(even) { filter: brightness(1.18); }
.tuplebar__caption { font-family: var(--mono); font-size: .66rem; color: var(--ink-soft); margin-top: .35rem; }

/* -------------------------------------------------- alter demo */
.alterdemo { padding: 1.1rem .9rem; }
.alterdemo__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.alterdemo__narr { font-family: var(--mono); font-size: .74rem; color: var(--accent); font-weight: 600; }

.alterdemo__schema {
  font-size: .78rem;
  background: var(--code-bg); color: var(--code-ink);
  padding: .6rem .9rem; margin-bottom: 1rem;
  border-radius: 2px;
  min-height: 2.4em;
}
.alterdemo__schema .new { color: #e8a45c; animation: segflash .9s ease; }

.alterdemo__rows { display: grid; gap: .7rem; }
.arow {
  border: 1px solid var(--rule-hard);
  background: var(--paper-deep);
  padding: .6rem .8rem;
  animation: pagein .45s ease both;
}
.arow__head {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .45rem;
}
.arow__head b { color: var(--ink); }
.arow__head .natts { color: var(--accent); font-weight: 600; }
.arow__cols { display: flex; flex-wrap: wrap; gap: 5px; }
.acol {
  font-family: var(--mono); font-size: .7rem;
  padding: .3rem .55rem;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 2px;
}
.acol b { display: block; font-size: .6rem; opacity: .75; font-weight: 400; }
.acol--value   { background: var(--green-soft); color: var(--green); }
.acol--null    { background: var(--gold-soft); color: var(--gold); }
.acol--missing { background: transparent; border-style: dashed; color: var(--dead); }
.acol.flash { animation: segflash .9s ease; }

/* -------------------------------------------------- compaction */
.compact { padding: 1.1rem .9rem; }
.compact__controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.compact__strip {
  display: flex; height: 52px;
  border: 1.5px solid var(--ink);
  overflow: hidden; margin-bottom: 1rem;
}
.cseg {
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .74rem; font-weight: 700; color: #fff;
  transition: flex-grow .5s cubic-bezier(.5,0,.2,1), background .3s, opacity .3s;
  min-width: 0;
  border-left: 1px solid rgba(255,255,255,.25);
}
.cseg--free { background: repeating-linear-gradient(45deg, #efe8d6 0 5px, #e2d7bc 5px 10px); color: var(--ink-soft); }
.cseg--hole { background: repeating-linear-gradient(45deg, #e8c8bc 0 5px, #ddb4a4 5px 10px); color: var(--dead); }
.cseg--t0 { background: #3d6b4a; } .cseg--t1 { background: #52855f; }
.cseg--t2 { background: #2f5d8a; } .cseg--t3 { background: #4a79a8; }
.compact__narr { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); margin-top: .8rem; min-height: 1.5em; }
.compact__narr b { color: var(--accent); }
#cpTable td.dead { color: var(--dead); font-style: italic; }
#cpTable td.moved { color: var(--accent); font-weight: 600; }

/* -------------------------------------------------- query flow */
.qflow { padding: 1.1rem .9rem; }
.qflow__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.qflow__controls label { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.qflow__controls select {
  font-family: var(--mono); font-size: .8rem; padding: .3rem .4rem;
  background: var(--paper-card); border: 1.5px solid var(--ink);
}

.qflow__grid { display: grid; grid-template-columns: 240px 1fr; gap: 1.2rem; }
@media (max-width: 760px) { .qflow__grid { grid-template-columns: 1fr; } }

.qflow__steps { list-style: none; display: flex; flex-direction: column; }
.qflow__steps li {
  padding: .45rem .7rem;
  border-left: 3px solid var(--rule);
  font-family: var(--mono); font-size: .7rem;
  color: var(--ink-soft);
  transition: all .25s;
}
.qflow__steps li b { display: block; font-size: .74rem; color: var(--ink-soft); }
.qflow__steps li span { font-size: .62rem; }
.qflow__steps li.done { border-color: var(--green); }
.qflow__steps li.done b { color: var(--green); }
.qflow__steps li.now {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.qflow__steps li.now b { color: var(--accent); }

.qflow__stage { display: flex; flex-direction: column; gap: 1rem; }
.qflow__panel {
  border: 1px solid var(--rule-hard);
  padding: .7rem .8rem;
  background: var(--paper-deep);
  opacity: .45;
  transition: opacity .3s;
}
.qflow__panel.live { opacity: 1; }
.qflow__panel h4 {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .5rem;
}

.qflow__keys { display: flex; flex-wrap: wrap; gap: 4px; }
.qkey {
  font-family: var(--mono); font-size: .76rem; font-weight: 600;
  width: 40px; height: 34px;
  display: grid; place-items: center;
  background: var(--paper-card); border: 1.5px solid var(--rule-hard);
  transition: all .25s;
  position: relative;
}
.qkey.range { border-color: var(--pg); background: var(--pg-soft); }
.qkey.probe { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-3px); }
.qkey.hit   { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-3px) scale(1.08); }
.qkey.dim   { opacity: .3; }
.qkey small { position: absolute; top: -14px; font-size: .52rem; color: var(--accent); font-weight: 600; }
.qflow__keys { padding-top: 14px; }

.qflow__page { display: flex; height: 34px; border: 1.5px solid var(--ink); overflow: hidden; }
.qflow__page .seg { transition: all .3s; }
.qflow__page .seg.target { animation: segflash 1s ease infinite alternate; outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }

.qflow__tuple { display: flex; flex-wrap: wrap; gap: 2px; }
.qtb {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  width: 30px; height: 26px;
  display: grid; place-items: center;
  background: var(--paper-card); border: 1px solid var(--rule-hard);
  color: var(--ink-soft);
  transition: all .2s;
}
.qtb.lit--hdr { background: var(--pg); color: #fff; border-color: transparent; }
.qtb.lit--bmp { background: var(--gold); color: #fff; border-color: transparent; }
.qtb.lit--col { background: var(--green); color: #fff; border-color: transparent; }
.qflow__row { margin-top: .6rem; font-size: .8rem; min-height: 1.4em; }
.qflow__row b { color: var(--green); }

.qflow__narr {
  margin-top: 1rem;
  font-family: var(--mono); font-size: .74rem; line-height: 1.6;
  border-left: 2px solid var(--accent);
  padding-left: .8rem;
  color: var(--ink);
  min-height: 2.2em;
}

/* -------------------------------------------------- HeapProbe vs PostgreSQL duo blocks */
.duo {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--ink);
  margin: 1.4rem 0 1.6rem;
  background: var(--paper-card);
}
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; } }
.duo__cell { padding: .9rem 1.1rem; font-size: .93rem; line-height: 1.55; }
.duo__cell h5 {
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .45rem;
  display: flex; align-items: center; gap: .45rem;
}
.duo__cell h5::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.duo__cell--hp { border-right: 1px dashed var(--rule-hard); }
.duo__cell--hp h5 { color: var(--accent); }
.duo__cell--hp h5::before { background: var(--accent); }
.duo__cell--pg h5 { color: var(--pg); }
.duo__cell--pg h5::before { background: var(--pg); }
@media (max-width: 640px) {
  .duo__cell--hp { border-right: none; border-bottom: 1px dashed var(--rule-hard); }
}

/* -------------------------------------------------- glossary */
.gloss {
  margin: 1.6rem 0;
  border: 1.5px solid var(--ink);
  background: var(--paper-card);
}
.gloss__title {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--accent-soft);
  padding: .45rem .9rem;
}
.gloss dl {
  display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem;
  padding: .9rem 1rem;
  font-size: .88rem; line-height: 1.5;
}
.gloss dt { font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--pg); white-space: nowrap; }
@media (max-width: 560px) { .gloss dl { grid-template-columns: 1fr; gap: .1rem; } .gloss dd { margin-bottom: .5rem; } }

/* -------------------------------------------------- colophon */
.colophon {
  border-top: 3px double var(--rule-hard);
  margin-top: 3rem;
  padding: 2rem 1.5rem 3rem;
  max-width: 880px; margin-left: auto; margin-right: auto;
  font-size: .82rem; color: var(--ink-soft);
  display: grid; gap: .5rem;
}
.colophon b { font-family: var(--display); letter-spacing: .06em; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}