/* Demo styles for Chapter 23 onward. Loaded after site.css and demos-2.css by the chapters that use them. */

/* ---------- Tiny compiler ---------- */
.tcc { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.tcc-src { width: 100%; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; justify-content: center; font-size: 0.85rem; }
.tcc-src code { background: none; }
.tcc-src input { flex: 1 1 10rem; max-width: 20rem; min-width: 0; font-family: var(--font-mono); font-size: 0.95rem; padding: 0.35rem 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); }
.tcc-src input:focus { outline: 2px solid var(--accent); }
.tcc.err .tcc-src input { border-color: #d0452f; outline-color: #d0452f; }
.tcc.err .tcc-stages { opacity: 0.35; }
.tcc-presets { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.tcc-presets .btn code { background: none; font-size: 0.78rem; }
.tcc-stages { width: 100%; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); transition: opacity 0.2s; }
.tcc-stage { border: 1px solid var(--rule); border-radius: 10px; padding: 0.5rem 0.6rem; display: grid; gap: 0.4rem; align-content: start; }
.tcc-stage h4 { margin: 0; font-family: var(--font-ui); font-size: 0.85rem; }
.tcc-stage h4 small { font-weight: 400; color: var(--ink-soft); margin-left: 0.3rem; }
.tcc-toks { display: flex; flex-wrap: wrap; gap: 3px; }
.tcc-tok { display: flex; flex-direction: column; align-items: center; border-radius: 5px; padding: 0.1rem 0.4rem; font-family: var(--font-mono); }
.tcc-tok small { font-family: var(--font-ui); font-size: 0.55rem; opacity: 0.75; }
.tcc-tok.num { background: #8fc1ec; color: #1a1408; }
.tcc-tok.var { background: #9fdcb3; color: #1a1408; }
.tcc-tok.op { background: #f5c26b; color: #1a1408; }
.tcc-tok.paren { background: var(--surface-2); }
.tcc-tree, .tcc-tree ul { list-style: none; margin: 0; padding: 0; }
.tcc-tree ul { padding-left: 1rem; border-left: 2px solid var(--rule); margin-left: 0.6rem; }
.tcc-tree li { padding: 0.1rem 0; }
.tcc-tree span { display: inline-block; font-family: var(--font-mono); font-size: 0.82rem; border-radius: 4px; padding: 0 0.4rem; }
.tcc-op { background: #f5c26b; color: #1a1408; font-weight: 700; }
.tcc-num { background: #8fc1ec; color: #1a1408; }
.tcc-var { background: #9fdcb3; color: #1a1408; }
.tcc-notes { display: grid; gap: 2px; font-size: 0.72rem; color: #2f9e5b; }
.tcc-code pre { margin: 0; font-size: 0.8rem; }

/* ---------- Optimisation levels ---------- */
.optl { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.optl-src { margin: 0; width: 100%; font-size: 0.8rem; }
.optl-picks { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: center; }
.optl-main { width: 100%; display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .optl-main { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.optl-asm { margin: 0; font-size: 0.74rem; max-height: 26rem; overflow: auto; }
.optl-side { display: grid; gap: 0.6rem; align-content: start; }
.optl-count { font-size: 0.9rem; }
.optl-count strong { font-family: var(--font-mono); font-size: 1.3rem; color: var(--accent); }
.optl-bars { display: grid; gap: 3px; }
.optl-bars > small { font-size: 0.72rem; color: var(--ink-soft); }
.optl-bar { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 0.4rem; align-items: center; font-size: 0.75rem; padding: 0.15rem 0.3rem; border-radius: 4px; }
.optl-bar i { height: 0.8rem; background: var(--ink-soft); opacity: 0.5; border-radius: 2px; }
.optl-bar b { grid-column: 2; font-family: var(--font-mono); font-weight: 400; font-size: 0.7rem; }
.optl-bar.cur { background: color-mix(in srgb, var(--signal) 25%, transparent); font-weight: 700; }
.optl-bar.cur i { background: var(--accent); opacity: 1; }

/* ---------- Linker ---------- */
.link { width: 100%; display: grid; gap: 0.6rem; }
.link-files { display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .link-files { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.link-file { border: 1px solid var(--rule); border-radius: 10px; padding: 0.5rem 0.6rem; display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.link-file h4 { margin: 0; font-family: var(--font-mono); font-size: 0.9rem; }
.link-syms { display: flex; flex-wrap: wrap; gap: 3px; font-size: 0.72rem; }
.link-syms span { background: #9fdcb3; color: #1a1408; border-radius: 4px; padding: 0.05rem 0.4rem; }
.link-syms span.u { background: #f2a196; }
.link-syms b { font-family: var(--font-mono); margin-right: 0.3rem; }
.link-code { display: grid; gap: 1px; overflow-x: auto; }
.link-row { display: grid; grid-template-columns: 2.6rem 13.5rem 1fr; gap: 0.4rem; align-items: center; font-size: 0.74rem; padding: 0.05rem 0.2rem; border-radius: 3px; white-space: nowrap; }
.link-row.cur { background: color-mix(in srgb, var(--signal) 30%, transparent); }
.link-row code { background: none; font-size: 0.74rem; }
.link-addr { font-family: var(--font-mono); color: var(--ink-soft); font-size: 0.7rem; }
.link-bytes { display: flex; gap: 2px; font-family: var(--font-mono); }
.link-bytes span { padding: 0 0.1rem; border-radius: 2px; }
.link-bytes span.hole { background: #f2a196; color: #1a1408; }
.link-bytes span.fixed { background: #9fdcb3; color: #1a1408; }
.link-map { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; font-size: 0.78rem; }
.link-map:empty { display: none; }
.link-map small { width: 100%; color: var(--ink-soft); font-size: 0.7rem; }
.link-map code { margin-right: 0.3rem; }
.link-calc { font-size: 0.85rem; }
.link-calc:empty { display: none; }

/* ---------- Python bytecode VM ---------- */
.pyvm { width: 100%; display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .pyvm { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.pyvm-left { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.pyvm-src { margin: 0; font-size: 0.78rem; }
.pyvm-src span.cur { background: color-mix(in srgb, var(--signal) 40%, transparent); }
.pyvm-code { list-style: none; margin: 0; padding: 0.3rem; background: var(--code-bg); border-radius: 8px; font-size: 0.74rem; overflow-x: auto; }
.pyvm-code li { display: grid; grid-template-columns: 1.6rem 6.2rem 9.5rem 1fr; gap: 0.3rem; align-items: baseline; padding: 0.05rem 0.3rem; border-radius: 3px; border-left: 3px solid transparent; white-space: nowrap; }
.pyvm-code li code { background: none; }
.pyvm-off, .pyvm-bytes { font-family: var(--font-mono); color: var(--ink-soft); font-size: 0.68rem; }
.pyvm-arg { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); }
.pyvm-code li.last { background: color-mix(in srgb, var(--signal) 15%, transparent); }
.pyvm-code li.cur { border-left-color: var(--accent); background: color-mix(in srgb, var(--signal) 35%, transparent); font-weight: 700; }
.pyvm-side { display: grid; gap: 0.5rem; align-content: start; }
.pyvm-box { border: 1px solid var(--rule); border-radius: 8px; padding: 0.4rem 0.6rem; display: grid; gap: 0.3rem; }
.pyvm-box h4 { margin: 0; font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-soft); font-weight: 600; }
.pyvm-stack { display: flex; flex-direction: column-reverse; gap: 2px; min-height: 4.6rem; justify-content: flex-start; }
.pyvm-stack span { font-family: var(--font-mono); font-size: 0.85rem; background: #f5c26b; color: #1a1408; border-radius: 4px; padding: 0.1rem 0.5rem; }
.pyvm-stack span:last-child { outline: 2px solid var(--ink); }
.pyvm-stack em { font-size: 0.8rem; color: var(--ink-soft); }
.pyvm-locals { display: flex; flex-wrap: wrap; gap: 4px; }
.pyvm-locals span { display: flex; flex-direction: column; align-items: center; background: var(--surface-2); border-radius: 6px; padding: 0.15rem 0.6rem; font-family: var(--font-mono); font-size: 0.9rem; min-width: 3.5rem; }
.pyvm-locals small { font-size: 0.65rem; color: var(--ink-soft); }
.pyvm-c { font-size: 0.75rem; }
.pyvm-count { font-size: 0.85rem; }

/* ---------- JIT warm-up ---------- */
.jit { width: 100%; display: grid; gap: 0.6rem; }
.jit-src { margin: 0; font-size: 0.78rem; }
.jit-chart { height: 9rem; display: flex; align-items: flex-end; gap: 2px; border-bottom: 2px solid var(--rule); border-left: 2px solid var(--rule); padding: 0 2px; }
.jit-chart i { flex: 1 1 0; min-width: 2px; max-width: 14px; border-radius: 2px 2px 0 0; background: #3b82c4; }
.jit-chart i.str { background: #d0452f; }
.jit-key { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.75rem; }
.jit-key span::before { content: ''; display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; margin-right: 0.3rem; vertical-align: -0.1rem; }
.jit-key .num::before { background: #3b82c4; }
.jit-key .str::before { background: #d0452f; }
.jit-stats { font-size: 0.85rem; min-height: 1.2rem; }

/* ---------- Garbage collection ---------- */
.gcd { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.gcd .seg { flex-wrap: wrap; }
.gcd-svg { width: 100%; max-width: 44rem; height: auto; }
.gcd-edge { stroke: var(--ink-soft); stroke-width: 2; fill: none; }
.gcd-edge.root { stroke: var(--ink); stroke-dasharray: 4 3; }
.gcd-head { fill: var(--ink-soft); }
.gcd-root rect { fill: var(--surface-2); stroke: var(--ink); stroke-width: 1.5; }
.gcd-root text { font-family: var(--font-mono); font-size: 13px; text-anchor: middle; fill: var(--ink); }
.gcd-root.off rect { stroke-dasharray: 3 3; stroke: var(--ink-soft); }
.gcd-root.off text { fill: var(--ink-soft); font-size: 11px; }
.gcd-node rect { fill: #8fc1ec; stroke: #1a1408; stroke-width: 1.5; transition: fill 0.3s, opacity 0.3s; }
.gcd-node text { font-family: var(--font-ui); font-size: 12px; text-anchor: middle; fill: #1a1408; }
.gcd-node circle { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.gcd-node .gcd-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--ink); }
.gcd-node.marked rect { fill: #9fdcb3; stroke: #2f9e5b; stroke-width: 3; }
.gcd-node.lost rect { fill: #f2a196; }
.gcd-node.freed rect { fill: none; stroke: var(--ink-soft); stroke-dasharray: 4 3; opacity: 0.5; }
.gcd-node.freed text { fill: var(--ink-soft); opacity: 0.6; }
.gcd-mem { font-size: 0.85rem; }
.gcd-mem .bad { color: #d0452f; }

/* ---------- Pipeline ---------- */
.pipe, .ooo { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.pipe .seg, .ooo .seg { flex-wrap: wrap; }
.pipe-reorder { font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: center; }
.pipe-grid, .ooo-grid { width: 100%; display: grid; gap: 2px; overflow-x: auto; }
.pipe-row { display: grid; grid-template-columns: 9.5rem repeat(var(--n), minmax(1.6rem, 1fr)); gap: 2px; align-items: center; min-width: min-content; }
.ooo .pipe-row { grid-template-columns: 11.5rem repeat(var(--n), minmax(1.3rem, 1fr)); }
.pipe-row code { background: none; font-size: 0.75rem; white-space: nowrap; }
.pipe-row code small { color: #d0452f; font-family: var(--font-ui); font-size: 0.65rem; }
.pipe-row.waits code { color: #d0452f; }
.pipe-row i { height: 1.5rem; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; border-radius: 3px; background: var(--surface-2); opacity: 0.5; }
.pipe-head i { background: none; opacity: 1; color: var(--ink-soft); height: auto; font-weight: 400; }
.pipe-row i.IF, .pipe-key .IF::before { background: #8fc1ec; }
.pipe-row i.ID, .pipe-key .ID::before { background: #9fdcb3; }
.pipe-row i.EX, .pipe-key .EX::before { background: #f5c26b; }
.pipe-row i.MEM, .pipe-key .MEM::before { background: #c7a6e8; }
.pipe-row i.WB, .pipe-key .WB::before { background: #f2a196; }
.pipe-row i.stall, .pipe-key .stall::before, .pipe-row i.wait, .pipe-key .wait::before { background: repeating-linear-gradient(135deg, #d0452f 0 2px, transparent 2px 6px); }
.pipe-row i.ret, .pipe-key .ret::before { background: #2f9e5b; color: #fff; }
.pipe-row i.EX.miss { background: #e0a03a; }
.pipe-row i.IF, .pipe-row i.ID, .pipe-row i.EX, .pipe-row i.MEM, .pipe-row i.WB, .pipe-row i.stall, .pipe-row i.wait, .pipe-row i.ret { opacity: 1; color: #1a1408; }
.pipe-row i.ret { color: #fff; }
.pipe-key { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.72rem; justify-content: center; }
.pipe-key span::before { content: ''; display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; margin-right: 0.3rem; vertical-align: -0.1rem; }
.pipe-stats, .ooo-stats { font-size: 0.9rem; }

/* ---------- Branch prediction ---------- */
.bpred { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.bpred-picks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; justify-content: center; }
.bpred-picks > div { display: grid; gap: 0.2rem; justify-items: center; }
.bpred-picks small { font-size: 0.72rem; color: var(--ink-soft); }
.bpred-picks .seg { flex-wrap: wrap; }
.bpred-strip { width: 100%; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; }
.bpred-strip span { height: 1.6rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; border-radius: 3px; background: var(--surface-2); }
.bpred-strip span.ok { background: #9fdcb3; color: #1a1408; }
.bpred-strip span.bad { background: #f2a196; color: #1a1408; }
.bpred-key { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.72rem; }
.bpred-key .ok::before, .bpred-key .bad::before { content: ''; display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; margin-right: 0.3rem; vertical-align: -0.1rem; }
.bpred-key .ok::before { background: #9fdcb3; }
.bpred-key .bad::before { background: #f2a196; }
.bpred-state { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; font-size: 0.8rem; min-height: 2.6rem; }
.bpred-state small { width: 100%; text-align: center; color: var(--ink-soft); font-size: 0.72rem; }
.bpred-state span { display: flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--surface-2); border: 2px solid transparent; }
.bpred-state span em { font-family: var(--font-ui); font-style: normal; font-weight: 400; font-size: 0.6rem; color: var(--ink-soft); }
.bpred-state span.cur { border-color: var(--accent); background: color-mix(in srgb, var(--signal) 30%, var(--surface)); }
.bpred-state code { font-size: 1rem; letter-spacing: 0.15em; }
.bpred-state > em { width: 100%; text-align: center; font-size: 0.72rem; color: var(--ink-soft); font-style: normal; }
.bpred-score { font-size: 0.9rem; min-height: 1.3rem; }
.pipe-row i.held, .pipe-key .held::before { background: #9fdcb3; opacity: 0.6; }

/* ---------- Race condition ---------- */
.race { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.race .seg { flex-wrap: wrap; }
.race-main { width: 100%; display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
@media (max-width: 560px) { .race-main { grid-template-columns: minmax(0, 1fr); } }
.race-thread { border: 1px solid var(--rule); border-radius: 10px; padding: 0.5rem 0.6rem; display: grid; gap: 0.3rem; align-content: start; }
.race-thread[data-t="A"] { border-left: 5px solid #3b82c4; }
.race-thread[data-t="B"] { border-left: 5px solid #e0a03a; }
.race-thread h4 { margin: 0; font-family: var(--font-ui); font-size: 0.9rem; }
.race-thread h4 small { font-weight: 400; color: var(--ink-soft); font-size: 0.72rem; }
.race-thread ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 2px; font-size: 0.78rem; }
.race-thread li { padding: 0.05rem 0.3rem; border-radius: 3px; }
.race-thread li code { background: none; }
.race-thread li.done { opacity: 0.45; text-decoration: line-through; }
.race-thread li.next { background: color-mix(in srgb, var(--signal) 35%, transparent); font-weight: 700; }
.race-thread li.blocked { background: color-mix(in srgb, #d0452f 25%, transparent); }
.race-reg { font-family: var(--font-mono); font-size: 0.82rem; }
.race-mem { display: grid; gap: 0.3rem; justify-items: center; padding: 0.6rem; border: 2px solid var(--ink); border-radius: 10px; min-width: 9rem; }
.race-mem small { font-size: 0.7rem; color: var(--ink-soft); }
.race-mem span { font-family: var(--font-mono); font-size: 1.1rem; padding: 0.2rem 0.5rem; border-radius: 6px; }
.race-mem span.ok { background: #9fdcb3; color: #1a1408; }
.race-mem span.bad { background: #f2a196; color: #1a1408; }
.race-log { width: 100%; margin: 0; padding-left: 1.6rem; font-size: 0.78rem; display: grid; gap: 1px; max-height: 12rem; overflow: auto; }
.race-log li.tA b { color: #3b82c4; }
.race-log li.tB b { color: #c07a10; }

/* ---------- Cache coherence ---------- */
.mesi { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.mesi-cores { width: 100%; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .mesi-cores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mesi-core { border: 2px solid var(--rule); border-radius: 10px; padding: 0.5rem; display: grid; gap: 0.4rem; justify-items: center; transition: border-color 0.2s; }
.mesi-core.hot { border-color: var(--accent); }
.mesi-core h4 { margin: 0; font-family: var(--font-ui); font-size: 0.85rem; }
.mesi-line { width: 100%; display: grid; justify-items: center; border-radius: 6px; padding: 0.3rem; font-size: 0.8rem; }
.mesi-line b { font-family: var(--font-mono); font-size: 1.3rem; line-height: 1; }
.mesi-line small { font-size: 0.65rem; }
.mesi-line span { font-family: var(--font-mono); }
.mesi-line.M { background: #f2a196; color: #1a1408; }
.mesi-line.E { background: #8fc1ec; color: #1a1408; }
.mesi-line.S { background: #9fdcb3; color: #1a1408; }
.mesi-line.I { background: var(--surface-2); color: var(--ink-soft); }
.mesi-btns { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.mesi-btns .btn { font-size: 0.75rem; padding: 0.25rem 0.5rem; min-height: 0; }
.mesi-mem { display: flex; gap: 0.6rem; align-items: baseline; font-family: var(--font-mono); font-size: 0.9rem; }
.mesi-mem small { font-family: var(--font-ui); color: var(--ink-soft); font-size: 0.72rem; }
.mesi-mem em { font-family: var(--font-ui); font-style: normal; font-size: 0.75rem; color: #d0452f; }
.mesi-stats { font-size: 0.85rem; }
.mesi-log { width: 100%; margin: 0; padding-left: 1.4rem; font-size: 0.78rem; display: grid; gap: 2px; color: var(--ink-soft); }
.mesi-log li:first-child { color: var(--ink); }

/* ---------- Amdahl's law ---------- */
.amd { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.amd-ctrls { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; justify-content: center; font-size: 0.85rem; }
.amd-ctrls label { display: flex; flex-direction: column; gap: 0.2rem; }
.amd-ctrls label.amd-real { flex-direction: row; align-items: center; gap: 0.4rem; }
.amd-ctrls input[type=range] { width: 12rem; accent-color: var(--accent); }
.amd-svg { width: 100%; max-width: 40rem; height: auto; }
.amd-grid { stroke: var(--rule); stroke-width: 1; }
.amd-ax { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-soft); text-anchor: middle; }
.amd-lab { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-soft); text-anchor: middle; }
.amd-ideal { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 5 4; }
.amd-curve { fill: none; stroke: #3b82c4; stroke-width: 3; }
.amd-limit { stroke: #d0452f; stroke-width: 1; stroke-dasharray: 3 3; }
.amd-dot { fill: var(--signal); stroke: var(--ink); stroke-width: 2; }
rect.amd-real { fill: #e0a03a; stroke: #1a1408; stroke-width: 1.5; }
.amd-out { font-size: 0.9rem; text-align: center; }

/* ---------- Packet layers ---------- */
.pwrap { width: 100%; display: grid; gap: 0.6rem; }
.pwrap-nest { display: grid; }
.pwrap-box { border-radius: 8px; padding: 0.3rem 0.5rem 0.5rem; display: grid; gap: 0.3rem; border: 2px solid rgba(0,0,0,0.25); color: #1a1408; }
.pwrap-box small { font-size: 0.7rem; font-weight: 600; }
.pwrap-box code { background: rgba(255,255,255,0.6); font-size: 0.72rem; padding: 0.2rem 0.4rem; border-radius: 4px; overflow-wrap: anywhere; }
.pwrap-box.app, .pwrap-bar .app { background: #f5c26b; }
.pwrap-box.tcp, .pwrap-bar .tcp { background: #9fdcb3; }
.pwrap-box.ip, .pwrap-bar .ip { background: #8fc1ec; }
.pwrap-box.eth, .pwrap-bar .eth { background: #c7a6e8; }
.pwrap-fields { display: grid; gap: 2px; font-size: 0.82rem; }
.pwrap-fields h4 { margin: 0 0 0.2rem; font-family: var(--font-ui); }
.pwrap-fields div { display: grid; grid-template-columns: 11rem 1fr; gap: 0.5rem; padding: 0.1rem 0.3rem; background: var(--surface-2); border-radius: 4px; }
.pwrap-fields small { color: var(--ink-soft); }
@media (max-width: 520px) { .pwrap-fields div { grid-template-columns: 1fr; gap: 0; } }
.pwrap-bar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.pwrap-bar span { height: 1.4rem; min-width: 1.6rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.7rem; color: #1a1408; border-radius: 3px; }
.pwrap-bar em { flex-basis: 100%; font-style: normal; font-size: 0.8rem; color: var(--ink-soft); }

/* ---------- Routing and traceroute ---------- */
.rtrace { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.rtrace-hops { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; counter-reset: hop -1; }
@media (max-width: 620px) { .rtrace-hops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rtrace-hops li { position: relative; display: grid; gap: 0.1rem; padding: 0.4rem; border-radius: 8px; border: 2px solid var(--rule); background: var(--surface-2); font-size: 0.75rem; text-align: center; transition: border-color 0.2s, background 0.2s; }
.rtrace-hops li b { font-family: var(--font-ui); font-size: 0.75rem; }
.rtrace-hops li small { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.rtrace-hops li i { font-style: normal; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; color: #d0452f; }
.rtrace-hops li.here { border-color: var(--accent); background: color-mix(in srgb, var(--signal) 35%, var(--surface)); }
.rtrace-hops li.seen { border-color: #2f9e5b; }
.rtrace-table { width: 100%; max-width: 30rem; display: grid; gap: 2px; font-size: 0.8rem; }
.rtrace-table small { color: var(--ink-soft); font-size: 0.72rem; }
.rtrace-table div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 4px; background: var(--surface-2); }
.rtrace-table div.match { background: color-mix(in srgb, var(--signal) 40%, var(--surface)); font-weight: 700; }
.rtrace-out { margin: 0; width: 100%; font-size: 0.78rem; min-height: 3rem; }

/* ---------- TCP timeline ---------- */
.tcpsim { width: 100%; display: grid; gap: 0.5rem; justify-items: center; }
.tcpsim-lose { font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: center; }
.tcpsim-svg { width: 100%; max-width: 34rem; height: auto; }
.tcpsim-end { font-family: var(--font-ui); font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.tcpsim-time { font-family: var(--font-ui); font-size: 10px; fill: var(--ink-soft); }
.tcpsim-life { stroke: var(--ink); stroke-width: 2; }
.tcpsim-msg { stroke-width: 2; }
.tcpsim-msg.ctl { stroke: #9a6fd0; }
.tcpsim-msg.data { stroke: #3b82c4; }
.tcpsim-msg.ack { stroke: #2f9e5b; }
.tcpsim-msg.dup { stroke: #e0a03a; }
.tcpsim-msg.lost { stroke-dasharray: 4 3; }
.tcpsim-msg.cur { stroke-width: 3.5; }
.tcpsim-head { fill: var(--ink-soft); }
.tcpsim-lab { font-family: var(--font-mono); font-size: 10px; text-anchor: middle; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.tcpsim-lab.cur { font-weight: 700; font-size: 11px; }
.tcpsim-x { font-size: 16px; fill: #d0452f; text-anchor: middle; font-weight: 700; }

/* ---------- Matrix multiplication ---------- */
.mmul { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.mmul .seg { flex-wrap: wrap; }
.mmul-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center; }
.mmul-mat { display: grid; justify-items: center; gap: 0.15rem; }
.mmul-mat small { font-size: 0.7rem; color: var(--ink-soft); }
.mmul-op { font-size: 1.3rem; font-weight: 700; color: var(--ink-soft); }
.mmul-grid { border-collapse: separate; border-spacing: 2px; }
.mmul-grid td { width: 2.1rem; height: 2.1rem; text-align: center; font-family: var(--font-mono); font-size: 0.9rem; background: var(--surface-2); border-radius: 4px; transition: background 0.15s; }
.mmul-mat[data-n="C"] td { cursor: pointer; }
.mmul-grid td.hot { background: var(--signal); color: var(--signal-ink); font-weight: 700; }
.mmul-grid td.done { background: #9fdcb3; color: #1a1408; }
.mmul-grid td.hot.done { background: var(--signal); }
.mmul-calc { font-family: var(--font-mono); font-size: 0.78rem; text-align: center; min-height: 1.2rem; max-width: 100%; overflow-wrap: anywhere; }
.mmul-count { font-size: 0.85rem; }

/* ---------- Number formats ---------- */
.nfmt { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.nfmt-in { font-size: 0.9rem; display: flex; gap: 0.4rem; align-items: center; }
.nfmt-in input { width: 12rem; font-family: var(--font-mono); font-size: 0.95rem; padding: 0.3rem 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); }
.nfmt-in input:focus { outline: 2px solid var(--accent); }
.nfmt-presets { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.nfmt-rows { width: 100%; display: grid; gap: 3px; overflow-x: auto; }
.nfmt-row { display: grid; grid-template-columns: 6.5rem auto minmax(7rem, 1fr) 8.5rem; gap: 0.6rem; align-items: center; padding: 0.25rem 0.5rem; background: var(--surface-2); border-radius: 6px; font-size: 0.8rem; min-width: min-content; }
.nfmt-row b { font-family: var(--font-ui); }
.nfmt-bits { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; white-space: nowrap; }
.nfmt-bits span { padding: 0.05rem 0.1rem; border-radius: 2px; color: #1a1408; }
.nfmt-bits .s { background: #f2a196; }
.nfmt-bits .e { background: #8fc1ec; }
.nfmt-bits .m { background: #9fdcb3; }
.nfmt-bits .i { background: #f5c26b; }
.nfmt-bits .over { background: none; color: #d0452f; font-family: var(--font-ui); }
.nfmt-val { font-family: var(--font-mono); font-weight: 600; }
.nfmt-row small { color: var(--ink-soft); font-size: 0.72rem; }
@media (max-width: 640px) { .nfmt-row { grid-template-columns: 5rem 1fr; } .nfmt-row .nfmt-bits { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Language model calculator ---------- */
.llm { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.llm-pick { display: grid; gap: 0.2rem; justify-items: center; }
.llm-pick small { font-size: 0.72rem; color: var(--ink-soft); }
.llm-pick .seg { flex-wrap: wrap; }
.llm-out { width: 100%; max-width: 32rem; display: grid; gap: 4px; }
.llm-out > div { display: grid; grid-template-columns: 11rem 1fr; gap: 0.1rem 0.6rem; align-items: center; padding: 0.35rem 0.6rem; background: var(--surface-2); border-radius: 6px; font-size: 0.85rem; }
.llm-out small { color: var(--ink-soft); font-size: 0.72rem; grid-row: span 2; }
.llm-out strong { font-family: var(--font-mono); }
.llm-out .ok { color: #2f9e5b; font-size: 0.78rem; }
.llm-out .bad { color: #d0452f; font-size: 0.78rem; font-weight: 700; }
.llm-bar { display: block; height: 0.6rem; background: var(--surface); border-radius: 3px; overflow: hidden; }
.llm-bar i { display: block; height: 100%; }
.llm-bar.mem i { background: #3b82c4; }
.llm-bar.calc i { background: #e0a03a; }
.llm-out .llm-total { background: color-mix(in srgb, var(--signal) 30%, var(--surface)); }
.llm-out .llm-total small { grid-row: auto; }