/* One idea per block: a takeaway headline, one picture, two or three sentences, optional details. */
.toc { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-crt); font-size: 21px; }
.toc a { color: var(--amber-dim); text-decoration: none; }
.toc a:hover, .toc a:focus-visible { color: var(--amber); }
.idea { display: grid; gap: 14px; }
.take { font-family: var(--font-ui); font-weight: 600; font-size: clamp(22px, 3vw, 28px); line-height: 1.2; color: var(--sand); margin: 0; max-width: 40ch; }
.take em { font-style: normal; color: var(--amber); }
.say { margin: 0; max-width: 68ch; color: var(--sand); font-size: 18px; opacity: .92; }
.say b { color: var(--amber); font-weight: 600; }
.pic { border: 1px solid var(--amber-faint); background: #0b0703; padding: 16px; display: grid; gap: 14px; min-width: 0; }
.ill { font-family: var(--font-ui); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-dim); }

/* byte strips */
.row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.row .who { font-family: var(--font-crt); font-size: 21px; color: var(--amber-dim); line-height: 1.05; }
.row .who small { display: block; font-family: var(--font-ui); font-size: 14px; color: var(--sand); opacity: .8; }
.strip { display: flex; flex-wrap: wrap; gap: 4px; }
.strip b { width: 38px; height: 34px; display: grid; place-items: center; font-family: var(--font-crt); font-weight: 400; font-size: 21px; border: 1px solid var(--amber-dim); color: var(--amber); }
.strip b.y { background: rgba(159, 220, 108, .16); border-color: var(--ok); color: var(--ok); }
.strip b.n { background: rgba(255, 94, 58, .16); border-color: var(--neon); color: var(--neon); }
.strip b.x { border-style: dashed; border-color: var(--neon); color: var(--neon); }
.strip.none { min-height: 34px; align-items: center; color: var(--neon); font-family: var(--font-crt); font-size: 21px; border: 1px dashed var(--neon); padding: 0 10px; width: fit-content; }
.verdict { font-family: var(--font-crt); font-size: 23px; letter-spacing: .04em; }
.verdict.ok { color: var(--ok); text-shadow: 0 0 8px rgba(159, 220, 108, .5); } .verdict.bad { color: var(--neon); } .verdict.mid { color: var(--amber); }
.tries { display: grid; gap: 18px; }
.try { display: grid; gap: 8px; border-left: 3px solid var(--amber-faint); padding-left: 14px; min-width: 0; }
.try .hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.try .n { font-family: var(--font-crt); font-size: 24px; color: var(--amber); }
.try p { margin: 0; color: var(--sand); font-size: 16px; max-width: 70ch; }
details { color: var(--sand); min-width: 0; }
details summary { cursor: pointer; font-family: var(--font-crt); font-size: 19px; color: var(--amber-dim); width: fit-content; }
details summary:hover { color: var(--amber); }
details[open] summary { margin-bottom: 6px; }
pre.code { margin: 0; font-family: var(--font-crt); font-size: 19px; line-height: 1.2; color: var(--amber); border: 1px solid var(--amber-faint); padding: 8px 10px; overflow-x: auto; white-space: pre; max-width: 100%; }
pre.code .hl { color: var(--neon); } pre.code .ok { color: var(--ok); }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } .strip b { width: 30px; height: 30px; font-size: 18px; } }

/* loop diagram */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.flow .st { flex: 1 1 130px; border: 1px solid var(--amber-dim); padding: 10px 12px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.flow .st b { font-family: var(--font-crt); font-weight: 400; font-size: 23px; color: var(--amber); line-height: 1.05; }
.flow .st span { font-size: 15px; color: var(--sand); }
.flow .st.loop { border: 2px solid var(--amber); box-shadow: 0 0 12px rgba(255, 182, 66, .2); }
.flow .st.loop .rep { font-family: var(--font-crt); font-size: 18px; color: var(--neon); }
.flow .st.done { border-color: var(--ok); } .flow .st.done b { color: var(--ok); }
.flow .ar { align-self: center; font-family: var(--font-crt); font-size: 26px; color: var(--amber-dim); }
@media (max-width: 700px) { .flow { flex-direction: column; } .flow .st { flex-basis: auto; } .flow .ar { transform: rotate(90deg); align-self: center; line-height: .6; } }

/* size ladder */
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ladder .rung { display: grid; gap: 6px; align-content: start; }
.ladder .bar { height: 10px; }
.ladder .sz { font-family: var(--font-crt); font-size: 20px; color: var(--amber-dim); }
.ladder .who { font-family: var(--font-crt); font-size: 24px; color: var(--amber); line-height: 1.05; }
.ladder .eg { font-size: 15px; color: var(--sand); }
.ladder-axis { display: flex; justify-content: space-between; font-family: var(--font-crt); font-size: 18px; color: var(--amber-dim); }
@media (max-width: 700px) { .ladder { grid-template-columns: 1fr 1fr; row-gap: 18px; } }

/* simple bars */
.stack { display: flex; height: 46px; border: 1px solid var(--amber-dim); }
.stack span { display: grid; place-items: center; font-family: var(--font-crt); font-size: 22px; color: var(--screen); white-space: nowrap; overflow: hidden; min-width: 0; }
.key { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 16px; color: var(--sand); }
.key i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.key b { font-family: var(--font-crt); font-weight: 400; font-size: 21px; color: var(--amber); margin-right: 4px; }
.vs { display: grid; gap: 10px; }
.vs .r { display: grid; grid-template-columns: 130px minmax(0, 1fr) 56px; gap: 12px; align-items: center; }
.vs .r .l { font-family: var(--font-crt); font-size: 21px; color: var(--amber-dim); line-height: 1.05; }
.vs .r .t { height: 26px; background: rgba(74, 52, 24, .45); }
.vs .r .t i { display: block; height: 100%; }
.vs .r .v { font-family: var(--font-crt); font-size: 23px; color: var(--amber); text-align: right; }

/* blueprint demo */
.bp { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; align-items: start; }
.card { border: 1px solid var(--amber-dim); padding: 10px 12px; font-family: var(--font-crt); font-size: 21px; line-height: 1.25; color: var(--amber); }
.card .t { color: var(--sand); }
.card .gap { color: var(--neon); }
.card .gap.filled { color: var(--ok); }
.fns { display: flex; flex-wrap: wrap; gap: 6px; }
.fns span { font-family: var(--font-crt); font-size: 19px; padding: 2px 8px; border: 1px solid var(--neon); color: var(--neon); transition: color .3s, border-color .3s; }
.fns.ok span { border-color: var(--ok); color: var(--ok); }
.btn { font-family: var(--font-crt); font-size: 21px; background: transparent; color: var(--amber); border: 1px solid var(--amber); padding: 4px 14px; cursor: pointer; width: fit-content; }
.btn:hover, .btn:focus-visible { background: var(--amber); color: var(--screen); outline: none; }
@media (max-width: 600px) { .bp { grid-template-columns: 1fr; } }

/* stat cards */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.fact { border: 1px solid var(--amber-faint); padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.fact .big { font-family: var(--font-crt); font-size: 46px; line-height: .95; color: var(--amber); }
.fact .h { font-weight: 600; font-size: 18px; color: var(--sand); }
.fact p { margin: 0; color: var(--sand); opacity: .88; font-size: 16px; }
dl.defs { margin: 0; display: grid; gap: 10px; max-width: 80ch; }
dl.defs dt { font-family: var(--font-crt); font-size: 23px; color: var(--amber); }
dl.defs dd { margin: 0; color: var(--sand); }