/* Demo styles for Chapter 15 onward. Loaded after site.css by the chapters that use them. */

/* ---------- FAT ---------- */
.fat { width: 100%; display: grid; gap: 0.5rem; }
.fat-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
.fat-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.25rem; }
.fat-dir { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 0.8rem; }
.fat-dir th { font-family: var(--font-ui); font-size: 0.68rem; color: var(--ink-soft); text-align: left; font-weight: 600; padding: 0.1rem 0.4rem; }
.fat-dir td { padding: 0.15rem 0.4rem; border-top: 1px solid var(--rule); }
.fat-dir tbody tr { cursor: pointer; }
.fat-dir tbody tr:hover td { background: var(--surface-2); }
.fat-dir tr.sel td { background: color-mix(in srgb, var(--signal) 25%, transparent); font-weight: 700; }
.fat-swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-right: 0.4rem; vertical-align: -0.05rem; }
.fat-table { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.fat-table span { display: flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; background: var(--surface-2); border-radius: 3px; padding: 0.1rem 0; border: 2px solid transparent; }
.fat-table span small { font-size: 0.55rem; color: var(--ink-soft); }
.fat-table span i { color: var(--ink-soft); font-size: 0.65rem; }
.fat-table span.cur { border-color: #d0452f; }
.fat-disk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.fat-disk span { display: flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-size: 0.6rem; border-radius: 3px; background: var(--surface-2); color: #1a1408; min-height: 2.6rem; padding: 0.1rem 0; border: 2px solid transparent; overflow: hidden; }
.fat-disk span small { font-size: 0.55rem; opacity: 0.7; }
.fat-disk span em { font-style: normal; font-weight: 700; }
.fat-disk span.sel { border-color: var(--ink); }
.fat-disk span.lit { box-shadow: inset 0 0 0 2px #d0452f; }
.fat-disk span.cur { border-color: #d0452f; transform: translateY(-2px); }
.fat-stats { font-size: 0.85rem; }
.fat-stats .m { color: #d0452f; }
@media (max-width: 520px) { .fat-disk { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- Inode ---------- */
.inode { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.inode-sizes { flex-wrap: wrap; }
.inode-box { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 2px solid var(--ink); border-radius: 8px; padding: 0.5rem; max-width: 100%; }
.inode-meta { display: flex; flex-direction: column; font-size: 0.72rem; color: var(--ink-soft); }
.inode-meta strong { color: var(--ink); font-size: 0.85rem; }
.inode-ptrs { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.inode-ptrs span { font-family: var(--font-mono); font-size: 0.68rem; padding: 0.2rem 0.3rem; border-radius: 3px; background: var(--surface-2); color: var(--ink-soft); }
.inode-ptrs span.used { background: #9fdcb3; color: #1a1408; }
.inode-ptrs span.ind.used { background: #f5c26b; }
.inode-levels { width: 100%; display: grid; gap: 4px; }
.inode-row { display: grid; grid-template-columns: 8.5rem 1fr 12rem; gap: 0.2rem 0.6rem; align-items: center; font-size: 0.82rem; opacity: 0.55; }
.inode-row.used { opacity: 1; }
.inode-row > span:nth-child(3) { font-family: var(--font-mono); font-size: 0.75rem; text-align: right; }
.inode-row small { color: var(--ink-soft); }
.inode-note { grid-column: 1 / -1; font-size: 0.7rem; margin-top: -0.2rem; }
.inode-bar { height: 10px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.inode-bar span { display: block; height: 100%; background: var(--signal); }
.inode-stats { font-size: 0.88rem; text-align: center; }
@media (max-width: 560px) { .inode-row { grid-template-columns: 1fr auto; } .inode-bar { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Journal ---------- */
.jrnl { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.jrnl-cols { width: 100%; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.jrnl-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.25rem; }
.jrnl-steps { margin: 0; padding-left: 1.5rem; font-size: 0.82rem; display: grid; gap: 2px; }
.jrnl-steps li { padding: 0.1rem 0.4rem; border-radius: 4px; }
.jrnl-steps li.j { color: #3b82c4; }
.jrnl-steps li.done { background: #9fdcb3; color: #1a1408; }
.jrnl-steps li.next { outline: 2px dashed var(--accent); }
.jrnl-steps li.lost { background: #f2a196; color: #1a1408; text-decoration: line-through; }
.jrnl-disk { display: grid; gap: 3px; }
.jrnl-box { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; font-family: var(--font-mono); font-size: 0.78rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: var(--surface-2); border-left: 4px solid var(--rule); }
.jrnl-box.on { border-left-color: #2f9e5b; }
.jrnl-box small { font-family: var(--font-ui); color: var(--ink-soft); font-size: 0.7rem; }
.jrnl-box i { color: var(--ink-soft); }
.jrnl-verdict { width: 100%; font-size: 0.9rem; border-radius: 8px; padding: 0; }
.jrnl-verdict.good, .jrnl-verdict.bad, .jrnl-verdict.warn { padding: 0.6rem 0.8rem; }
.jrnl-verdict.good { background: color-mix(in srgb, #2f9e5b 18%, var(--surface)); border-left: 4px solid #2f9e5b; }
.jrnl-verdict.bad { background: color-mix(in srgb, #d0452f 16%, var(--surface)); border-left: 4px solid #d0452f; }
.jrnl-verdict.warn { background: color-mix(in srgb, var(--signal) 18%, var(--surface)); border-left: 4px solid var(--signal); }
.jrnl-plug { background: #d0452f; color: #fff; border-color: #d0452f; font-weight: 600; }
.btn:disabled { opacity: 0.45; cursor: default; }

/* ---------- Text mode ---------- */
.tmode { width: 100%; display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .tmode { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.tmode-screen { display: grid; grid-template-columns: repeat(24, 1ch); justify-content: center; background: #000; padding: 0.6em 0.8em; border-radius: 8px; border: 6px solid #2a2a2a; box-shadow: inset 0 0 20px rgba(0,0,0,0.8); font-family: var(--font-mono); font-size: clamp(0.85rem, 3.6vw, 1.4rem); line-height: 1.2; align-self: start; cursor: text; }
.tmode-screen:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.tmode-screen span { text-align: center; white-space: pre; user-select: none; }
.tmode-screen span.sel { outline: 2px solid #ffb627; outline-offset: -2px; }
.tmode-side { display: grid; gap: 0.5rem; font-size: 0.85rem; align-content: start; }
.tmode-cell strong { font-family: var(--font-mono); color: var(--accent); }
.tmode-cell small { color: var(--ink-soft); }
.tmode-bytes { display: grid; gap: 3px; }
.tmode-bytes > div:not(.tmode-legend) { display: flex; gap: 0.6rem; align-items: center; background: var(--surface-2); border-radius: 5px; padding: 0.2rem 0.5rem; }
.tmode-bytes small { color: var(--ink-soft); font-size: 0.72rem; min-width: 8.5rem; }
.tmode-bytes code { background: none; font-weight: 700; font-size: 1rem; }
.tmode-glyph { font-family: var(--font-mono); font-size: 1.1rem; }
.tmode-bits { font-family: var(--font-mono); letter-spacing: 0.08em; }
.tmode-bits b { padding: 0 0.15rem; border-radius: 3px; }
.tmode-legend { font-size: 0.72rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tmode-legend span { padding: 0 0.35rem; border-radius: 3px; }
.tmode .bk { background: #f2a196; color: #1a1408; }
.tmode .bg { background: #8fc1ec; color: #1a1408; }
.tmode .fg { background: #f5c26b; color: #1a1408; }
.tmode-pick { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.tmode-pick span, .tmode-colors span { font-size: 0.75rem; color: var(--ink-soft); margin-right: 0.2rem; }
.tmode-char { min-height: 30px; padding: 0.1rem 0.4rem; font-size: 0.95rem; }
.tmode-colors { display: grid; grid-template-columns: auto 1fr; gap: 4px 0.4rem; align-items: center; }
.tmode-fg, .tmode-bg { display: flex; flex-wrap: wrap; gap: 3px; }
.tmode-sw { width: 1.35rem; height: 1.35rem; border-radius: 4px; border: 1px solid var(--rule); cursor: pointer; padding: 0; }
.tmode-sw:hover { outline: 2px solid var(--accent); }
.tmode-asm { margin: 0; padding: 0.4rem 0.6rem; font-size: 0.85rem; }
.tmode-dump { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: baseline; }
.tmode-dump small { font-family: var(--font-ui); color: var(--ink-soft); }
.tmode-dump span.sel { background: var(--signal); color: var(--signal-ink); border-radius: 3px; padding: 0 0.2rem; }

/* ---------- Pixel memory ---------- */
.pxm { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.pxm-modes { flex-wrap: wrap; }
.pxm-main { width: 100%; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: flex-start; }
.pxm-grid { display: grid; gap: 1px; width: min(100%, 22rem); background: var(--rule); border: 1px solid var(--rule); touch-action: none; cursor: crosshair; }
.pxm-grid span { aspect-ratio: 1; }
.pxm-grid span.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.pxm-side { flex: 1 1 13rem; display: grid; gap: 0.6rem; font-size: 0.85rem; }
.pxm-pal { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.pxm-pal small { width: 100%; color: var(--ink-soft); font-size: 0.72rem; }
.pxm-sw { width: 1.6rem; height: 1.6rem; border-radius: 4px; border: 1px solid var(--rule); cursor: pointer; padding: 0; }
.pxm-sw.sel { outline: 3px solid var(--accent); outline-offset: 1px; }
.pxm-dump { width: 100%; font-family: var(--font-mono); font-size: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem; align-items: baseline; }
.pxm-dump > small { font-family: var(--font-ui); color: var(--ink-soft); width: 100%; }
.pxm-dump span { background: var(--surface-2); border-radius: 3px; padding: 0 0.25rem; }
.pxm-dump span.sel { background: var(--signal); color: var(--signal-ink); font-weight: 700; }
.pxm-dump span small { display: block; font-size: 0.65rem; letter-spacing: 0.06em; }

/* ---------- Tearing ---------- */
.tear { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.tear .seg button { white-space: normal; }
.tear-cols { width: 100%; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.tear-cols figure { margin: 0; text-align: center; }
.tear-cols canvas { width: 100%; height: auto; image-rendering: pixelated; border-radius: 6px; border: 4px solid #2a2a2a; display: block; }
.tear-cols figcaption { font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.2rem; }
.tear-stats { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- CPU vs GPU race ---------- */
.prace { width: 100%; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.prace-lane { border: 1px solid var(--rule); border-radius: 10px; padding: 0.6rem; display: grid; gap: 0.4rem; }
.prace-head small { display: block; font-size: 0.75rem; color: var(--ink-soft); }
.prace-img { display: grid; gap: 1px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.prace-img span { aspect-ratio: 1; background: var(--surface-2); }
.prace-img span.busy { background: var(--ink); }
.prace-stat { font-size: 0.85rem; }

/* ---------- Rasterizer ---------- */
.raster { width: 100%; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: flex-start; }
svg.circuit.raster-svg { flex: 1 1 18rem; max-width: 30rem; touch-action: none; }
.rs-px { fill: var(--surface-2); stroke: var(--rule); stroke-width: 0.5; cursor: pointer; }
.rs-px.pick { stroke: var(--ink); stroke-width: 1.5; }
.rs-tri { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
.rs-vert { stroke: #fff; stroke-width: 1.5; cursor: grab; }
.rs-vert:focus-visible { stroke: var(--accent); stroke-width: 2.5; outline: none; }
.rs-center { fill: var(--ink); pointer-events: none; }
.raster-side { flex: 1 1 13rem; display: grid; gap: 0.6rem; font-size: 0.85rem; }
.rs-big strong { font-family: var(--font-mono); font-size: 1.6rem; color: var(--accent); }
.rs-big small { display: block; color: var(--ink-soft); }
.rs-pick .ok { color: #2f9e5b; }
.rs-pick .bad { color: #d0452f; }
.rs-pick small { display: block; color: var(--ink-soft); margin-top: 0.3rem; }
.rs-w { display: grid; gap: 3px; margin-top: 0.3rem; }
.rs-w span { position: relative; font-family: var(--font-mono); font-size: 0.75rem; background: var(--surface-2); border-radius: 4px; padding: 0.1rem 0.5rem; overflow: hidden; }
.rs-w i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); opacity: 0.35; }

/* ---------- Shader playground ---------- */
.shader { width: 100%; display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 780px) { .shader { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.shader canvas { width: 100%; height: auto; border-radius: 8px; background: #000; display: block; }
.shader-side { display: grid; gap: 0.5rem; align-content: start; }
.shader-presets { flex-wrap: wrap; }
.shader textarea { width: 100%; min-height: 11rem; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.45; background: var(--code-bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 0.6rem; resize: vertical; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.shader textarea:focus { outline: 2px solid var(--accent); }
.shader-run { justify-content: flex-start; }
.shader-stats { grid-column: 1 / -1; font-size: 0.85rem; }
.demo-status.shader-err { background: color-mix(in srgb, #d0452f 18%, var(--surface)); }

/* ---------- Boot sequence ---------- */
.bseq { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.bseq-stages { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
.bseq-stages li { flex: 1 1 6.5rem; display: flex; flex-direction: column; padding: 0.35rem 0.5rem; border-radius: 6px; background: var(--surface-2); border: 2px solid transparent; cursor: pointer; font-size: 0.85rem; position: relative; }
.bseq-stages li small { font-size: 0.7rem; color: var(--ink-soft); }
.bseq-stages li.done { background: color-mix(in srgb, #2f9e5b 18%, var(--surface)); }
.bseq-stages li.cur { border-color: var(--accent); background: color-mix(in srgb, var(--signal) 25%, var(--surface)); }
.bseq-time { width: 100%; font-size: 0.75rem; color: var(--ink-soft); }
.bseq-bar { display: flex; gap: 2px; height: 1.6rem; margin-bottom: 0.2rem; }
.bseq-bar span { background: var(--surface-2); color: var(--ink); border-radius: 3px; font-size: 0.68rem; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; padding: 0 0.2rem; }
.bseq-bar span.cur { background: var(--signal); color: var(--signal-ink); font-weight: 700; }
.bseq-detail { width: 100%; background: var(--surface-2); border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.92rem; }
.bseq-detail h4 { margin: 0 0 0.3rem; font-family: var(--font-ui); }
.bseq-detail p { margin: 0 0 0.4rem; }
.bseq-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.75rem; }
.bseq-tags span { background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 0 0.5rem; }

/* ---------- Boot sector ---------- */
.bsec { width: 100%; display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .bsec { grid-template-columns: auto minmax(0, 1fr); } }
.bsec-dump { display: grid; grid-template-columns: auto repeat(16, 1.45rem); gap: 1px; font-family: var(--font-mono); font-size: 0.66rem; overflow-x: auto; max-height: 22rem; overflow-y: auto; align-self: start; justify-content: center; }
.bsec-dump span { text-align: center; padding: 0.05rem 0; border-radius: 2px; cursor: pointer; border: 1px solid transparent; }
.bsec-dump .bsec-addr { color: var(--ink-soft); padding-right: 0.4rem; cursor: default; text-align: right; }
.b-code, .k-code { background: #f5c26b; color: #1a1408; }
.b-msg, .k-msg { background: #8fc1ec; color: #1a1408; }
.b-pad, .k-pad { background: var(--surface-2); color: var(--ink-soft); }
.b-sig, .k-sig { background: #9fdcb3; color: #1a1408; font-weight: 700; }
.b-sig.broken { background: #f2a196; }
.bsec-dump span.sel { border-color: var(--ink); }
.bsec-dump span.cur { outline: 2px solid #d0452f; outline-offset: -1px; }
.bsec-side { display: grid; gap: 0.6rem; align-content: start; font-size: 0.85rem; }
.bsec-key { display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.72rem; }
.bsec-key span { padding: 0 0.45rem; border-radius: 3px; }
.bsec-cpu { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-family: var(--font-mono); font-size: 0.8rem; background: var(--surface-2); border-radius: 6px; padding: 0.4rem 0.6rem; }
.bsec-cpu b { color: var(--accent); }
.bsec-next { width: 100%; font-family: var(--font-ui); font-size: 0.8rem; }
.bsec-screen { background: #000; color: #c8c8c8; font-family: var(--font-mono); font-size: 0.8rem; white-space: pre-wrap; border-radius: 6px; padding: 0.5rem 0.7rem; min-height: 4.5rem; border: 4px solid #2a2a2a; }

/* ---------- Mode ladder ---------- */
.mlad { width: 100%; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .mlad { grid-template-columns: 13rem minmax(0, 1fr); } }
.mlad-rungs { display: grid; gap: 4px; align-content: start; }
.mlad-rungs span { font-size: 0.8rem; padding: 0.3rem 0.6rem; border-radius: 6px; background: var(--surface-2); color: var(--ink-soft); border-left: 4px solid var(--rule); }
.mlad-rungs span.done { color: var(--ink); border-left-color: #2f9e5b; }
.mlad-rungs span.cur { background: var(--signal); color: var(--signal-ink); border-left-color: var(--ink); font-weight: 700; }
.mlad-main { display: grid; gap: 0.6rem; align-content: start; }
.mlad-bits { display: flex; flex-wrap: wrap; gap: 4px; }
.mlad-bits span { display: flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 6px; background: var(--surface-2); border: 2px solid var(--rule); min-width: 5.5rem; }
.mlad-bits span b { font-size: 1.1rem; }
.mlad-bits span small { font-family: var(--font-ui); font-size: 0.62rem; color: var(--ink-soft); }
.mlad-bits span.on { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.mlad-bits span.on small { color: var(--signal-ink); }
.mlad-code { margin: 0; font-size: 0.8rem; min-height: 6.5rem; }
.mlad-mode { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; font-size: 0.85rem; }
.mlad-mode strong { font-size: 1.1rem; color: var(--accent); }

/* ---------- Figures with real screenshots ---------- */
.shot { margin: 1.5rem 0; text-align: center; }
.shot img { max-width: 100%; height: auto; border-radius: 8px; border: 6px solid #2a2a2a; image-rendering: pixelated; }
.shot figcaption { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.4rem; }

/* ---------- Privilege levels ---------- */
.priv { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.priv-list { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); width: 100%; }
.priv-list .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0.1rem; }
.priv-list .btn code { background: none; font-size: 0.8rem; }
.priv-list .btn small { font-family: var(--font-ui); font-size: 0.7rem; color: var(--ink-soft); }
.priv-list .btn.sel { border-color: var(--ink); background: color-mix(in srgb, var(--signal) 25%, var(--surface)); }
.priv-cpu { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.85rem; justify-content: center; }
.priv-cpu b { font-family: var(--font-mono); color: var(--accent); }
.priv-out { width: 100%; border-radius: 8px; padding: 0.6rem 0.9rem; border-left: 5px solid var(--rule); background: var(--surface-2); font-size: 0.9rem; }
.priv-out p { margin: 0.2rem 0 0; }
.priv-out.ok { border-left-color: #2f9e5b; }
.priv-out.ok strong { color: #2f9e5b; }
.priv-out.gp, .priv-out.pf { border-left-color: #d0452f; background: color-mix(in srgb, #d0452f 12%, var(--surface)); }
.priv-out.gp strong, .priv-out.pf strong { color: #d0452f; }
.priv-out.sys { border-left-color: #3b82c4; }
.priv-out.sys strong { color: #3b82c4; }

/* ---------- System call trip ---------- */
.strip { width: 100%; display: grid; gap: 0.7rem; }
.strip-lanes { display: grid; gap: 3px; }
.strip-lane { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: 6px; font-size: 0.78rem; }
.strip-lane.user { background: color-mix(in srgb, #3b82c4 12%, var(--surface)); }
.strip-lane.kernel { background: color-mix(in srgb, #d0452f 12%, var(--surface)); }
.strip-dots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.strip-dots span { height: 0.9rem; border-radius: 3px; background: var(--surface-2); opacity: 0.4; }
.strip-dots span.on { background: var(--ink-soft); opacity: 0.6; }
.strip-dots span.x.on { background: #9a6fd0; }
.strip-dots span.cur { background: var(--signal); opacity: 1; outline: 2px solid var(--ink); }
.strip-main { display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .strip-main { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .strip-regs { grid-column: 1 / -1; } }
.strip-text h4 { margin: 0 0 0.2rem; font-family: var(--font-ui); }
.strip-text p { margin: 0; font-size: 0.9rem; }
.strip-code { margin: 0; font-size: 0.8rem; align-self: start; }
.strip-regs { display: flex; flex-wrap: wrap; gap: 4px; }
.strip-regs span { display: flex; flex-direction: column; align-items: center; background: var(--surface-2); border-radius: 6px; padding: 0.2rem 0.6rem; font-family: var(--font-mono); font-size: 0.8rem; min-width: 4.5rem; }
.strip-regs small { font-size: 0.62rem; color: var(--ink-soft); }
.strip-regs .cpl b { color: var(--accent); font-size: 1rem; }

/* ---------- Kernel architectures ---------- */
.karch { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.karch-box { width: 100%; display: grid; gap: 4px; border-radius: 10px; transition: background 0.3s; padding: 4px; }
.karch-box.panic { background: #d0452f; }
.karch-space { border-radius: 8px; padding: 0.4rem 0.5rem; }
.karch-space > small { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.3rem; }
.karch-space.user { background: color-mix(in srgb, #3b82c4 12%, var(--surface)); }
.karch-space.kernel { background: color-mix(in srgb, #d0452f 12%, var(--surface)); }
.karch-items { display: flex; flex-wrap: wrap; gap: 4px; }
.karch-items span { padding: 0.35rem 0.7rem; border-radius: 6px; background: var(--surface); border: 2px solid var(--rule); font-size: 0.82rem; transition: background 0.2s; }
.karch-items span.active { background: var(--signal); color: var(--signal-ink); border-color: var(--ink); font-weight: 700; }
.karch-items span.dead { background: #f2a196; color: #1a1408; border-color: #d0452f; }
.karch-count { font-size: 0.85rem; }

/* ---------- Context switch ---------- */
.cswitch { width: 100%; display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cswitch { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cswitch-text { grid-column: 1 / -1; } }
.cswitch-pcb, .cswitch-cpu, .fexec-proc { border: 2px solid var(--rule); border-radius: 10px; padding: 0.5rem 0.6rem; display: grid; gap: 0.35rem; align-content: start; transition: border-color 0.2s, background 0.2s; }
.cswitch-pcb h4, .cswitch-cpu h4, .fexec-proc h4 { margin: 0; font-family: var(--font-ui); font-size: 0.9rem; }
.cswitch-pcb h4 small, .cswitch-cpu h4 small, .fexec-proc h4 small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.72rem; }
.cswitch-pcb.live { border-color: #2f9e5b; }
.cswitch-pcb.pick { border-color: var(--accent); background: color-mix(in srgb, var(--signal) 15%, var(--surface)); }
.cswitch-cpu { background: color-mix(in srgb, #3b82c4 10%, var(--surface)); }
.cswitch-cpu.kernel { background: color-mix(in srgb, #d0452f 12%, var(--surface)); }
.cswitch-state { justify-self: start; font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--surface-2); }
.cswitch-state.running { background: #2f9e5b; color: #fff; }
.cswitch-state.ready { background: #f5c26b; color: #1a1408; }
.cswitch-state.chosen { background: var(--signal); color: var(--signal-ink); }
.cswitch-state.blocked { background: #8a8a8a; color: #fff; }
.cswitch-state.zombie { background: #6b5b7a; color: #fff; }
.cswitch-saved, .cswitch-regs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.cswitch-saved > small { grid-column: 1 / -1; font-size: 0.68rem; color: var(--ink-soft); }
.cswitch-saved > em { grid-column: 1 / -1; font-size: 0.8rem; color: var(--ink-soft); }
.cswitch-saved span, .cswitch-regs span { display: flex; flex-direction: column; background: var(--surface-2); border-radius: 5px; padding: 0.15rem 0.4rem; font-family: var(--font-mono); font-size: 0.75rem; overflow-wrap: anywhere; }
.cswitch-regs span { background: var(--surface); }
.cswitch-saved small, .cswitch-regs small { font-size: 0.6rem; color: var(--ink-soft); }
.cswitch-regs span.hot { outline: 2px solid var(--accent); }
.cswitch-text h4, .fexec-text h4 { margin: 0 0 0.2rem; font-family: var(--font-ui); }
.cswitch-text p, .fexec-text p { margin: 0.2rem 0 0; font-size: 0.9rem; }

/* ---------- Scheduler ---------- */
.sched { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.sched .seg { flex-wrap: wrap; }
.sched-rows { width: 100%; display: grid; gap: 3px; }
.sched-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.5rem; align-items: center; }
.sched-name { font-size: 0.82rem; font-weight: 600; border-left: 5px solid var(--c, transparent); padding-left: 0.4rem; }
.sched-name small { display: block; font-weight: 400; font-size: 0.66rem; color: var(--ink-soft); }
.sched-axis .sched-name { border: 0; }
.sched-cells { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 1px; }
.sched-cells i { height: 1.4rem; border-radius: 2px; background: var(--surface-2); opacity: 0.35; }
.sched-cells i.run { background: var(--c); opacity: 1; }
.sched-cells i.wait { background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 5px); opacity: 0.8; }
.sched-cells i.blk { background: var(--ink-soft); opacity: 0.25; }
.sched-cells i.done { background: transparent; }
.sched-axis .sched-cells i { background: none; opacity: 1; height: auto; font-style: normal; font-size: 0.62rem; color: var(--ink-soft); }
.sched-key { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.75rem; --c: #3b82c4; }
.sched-key span::before { content: ''; display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 2px; vertical-align: -0.15rem; margin-right: 0.3rem; }
.sched-key .run::before { background: var(--c); }
.sched-key .wait::before { background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 5px); }
.sched-key .blk::before { background: var(--ink-soft); opacity: 0.25; }
.sched-stats { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; justify-content: center; font-size: 0.85rem; min-height: 1.3rem; }
@media (max-width: 560px) { .sched-row { grid-template-columns: 5.5rem minmax(0, 1fr); } .sched-name small { display: none; } }

/* ---------- fork and exec ---------- */
.fexec { width: 100%; display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .fexec { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .fexec-text { grid-column: 1 / -1; } }
.fexec-procs { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-content: start; }
.fexec-proc.new { border-color: var(--accent); }
.fexec-pages { display: flex; flex-wrap: wrap; gap: 3px; }
.fexec-pages span { font-size: 0.72rem; padding: 0.15rem 0.45rem; border-radius: 4px; background: #8fc1ec; color: #1a1408; }
.fexec-pages span.cow { background: repeating-linear-gradient(135deg, #8fc1ec 0 4px, #c9e1f6 4px 8px); }
.fexec-pages span.ls { background: #f5c26b; }
.fexec-pages em { font-size: 0.78rem; color: var(--ink-soft); }
.fexec-ret { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }
.fexec-term { margin: 0; background: #000; color: #c8c8c8; border: 4px solid #2a2a2a; border-radius: 6px; min-height: 5rem; font-size: 0.8rem; white-space: pre-wrap; align-self: start; }
.fexec-text code { font-size: 0.8rem; }

/* ---------- Register parts ---------- */
.rparts { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.rparts-reg { width: min(100%, 34rem); display: grid; gap: 3px; }
.rparts-bytes, .rparts-names { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.rparts-bytes span { display: flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-size: 1rem; font-weight: 600; padding: 0.25rem 0; border-radius: 5px; background: var(--surface-2); border: 2px solid transparent; transition: background 0.2s; }
.rparts-bytes span small { font-family: var(--font-ui); font-size: 0.58rem; font-weight: 400; color: var(--ink-soft); }
.rparts-bytes span.w { background: var(--signal); color: var(--signal-ink); }
.rparts-bytes span.w small { color: var(--signal-ink); }
.rparts-bytes span.z { background: #f2a196; color: #1a1408; border-color: #d0452f; }
.rparts-bytes span.z small { color: #1a1408; }
.rparts-names span { font-size: 0.68rem; text-align: center; border-top: 2px solid var(--ink-soft); padding-top: 0.1rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; }
.rparts-vals { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; justify-content: center; font-size: 0.8rem; }
.rparts-vals small { color: var(--ink-soft); margin-right: 0.3rem; }
.rparts-list { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.rparts-list .btn code { background: none; font-size: 0.8rem; }
.rparts-list .btn.sel { border-color: var(--ink); background: color-mix(in srgb, var(--signal) 25%, var(--surface)); }
.rparts-enc { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; justify-content: center; font-size: 0.8rem; }
.rparts-enc small { color: var(--ink-soft); }
.rparts-code { font-size: 0.95rem; font-weight: 600; }

/* ---------- Assembly stepper ---------- */
.astep { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.astep-main { width: 100%; display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .astep-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.astep-code { list-style: none; margin: 0; padding: 0.4rem; background: var(--code-bg); border-radius: 8px; font-size: 0.8rem; align-self: start; }
.astep-code li { display: grid; grid-template-columns: 4.2rem 2.6rem 1fr; gap: 0.3rem; align-items: baseline; padding: 0.12rem 0.3rem; border-radius: 4px; border-left: 3px solid transparent; }
.astep-code li code { background: none; white-space: nowrap; }
.astep-addr { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-soft); }
.astep-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }
.astep-code li.last { background: color-mix(in srgb, var(--signal) 15%, transparent); }
.astep-code li.cur { border-left-color: var(--accent); background: color-mix(in srgb, var(--signal) 35%, transparent); font-weight: 700; }
.astep-side { display: grid; gap: 0.6rem; align-content: start; }
.astep-regs { display: flex; flex-wrap: wrap; gap: 4px; }
.astep-regs span { display: flex; flex-direction: column; align-items: center; background: var(--surface-2); border-radius: 6px; padding: 0.2rem 0.5rem; font-family: var(--font-mono); font-size: 0.85rem; min-width: 4.2rem; border: 2px solid transparent; }
.astep-regs span small { font-size: 0.62rem; color: var(--ink-soft); }
.astep-regs span.chg { border-color: var(--accent); background: color-mix(in srgb, var(--signal) 25%, var(--surface)); }
.astep-regs span.pc { background: var(--surface); border-color: var(--rule); }
.astep-mem { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.astep-mem > small { width: 100%; font-size: 0.7rem; color: var(--ink-soft); }
.astep-mem span { display: flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-size: 0.85rem; background: #8fc1ec; color: #1a1408; border-radius: 4px; padding: 0.15rem 0.5rem; min-width: 2.8rem; border: 2px solid transparent; }
.astep-mem span small { font-size: 0.58rem; opacity: 0.75; }
.astep-mem span.rd { border-color: #d0452f; background: #f5c26b; }
.astep-count { font-size: 0.85rem; }

/* ---------- Addressing modes ---------- */
.amode { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.amode-picks { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: center; }
.amode-pick { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.amode-pick > span { font-size: 0.72rem; color: var(--ink-soft); }
.amode-pick .seg button { min-width: 2.2rem; padding: 0.35rem 0.55rem; }
.amode-sum { font-size: 0.95rem; }
.amode-mem { width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.amode-cell { display: grid; gap: 2px; }
.amode-cell small { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-soft); text-align: center; }
.amode-cell > div { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; background: #8fc1ec; padding: 2px; border-radius: 4px; }
.amode-cell i { height: 1.3rem; background: color-mix(in srgb, #fff 40%, transparent); border-radius: 1px; }
.amode-cell i.rd { background: #d0452f; }
.amode-cell i.first { box-shadow: -2px 0 0 var(--ink); }
.amode-cols { width: 100%; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.amode-x86, .amode-rv { border: 1px solid var(--rule); border-radius: 10px; padding: 0.5rem 0.7rem; display: grid; gap: 0.35rem; align-content: start; font-size: 0.85rem; }
.amode-x86 h4, .amode-rv h4 { margin: 0; font-family: var(--font-ui); }
.amode-x86 h4 small, .amode-rv h4 small { font-weight: 400; color: var(--ink-soft); font-size: 0.75rem; margin-left: 0.3rem; }
.amode-x86 > small, .amode-rv > small { color: var(--ink-soft); font-size: 0.75rem; }
.amode-bytes { display: flex; gap: 3px; }
.amode-bytes span { font-family: var(--font-mono); font-size: 0.85rem; background: var(--surface-2); border-radius: 4px; padding: 0.1rem 0.4rem; }
.amode-bytes span.sib { background: var(--signal); color: var(--signal-ink); font-weight: 700; }
.amode-rv pre { margin: 0; font-size: 0.78rem; }
.amode-rv pre span { color: var(--ink-soft); margin-left: 0.8rem; }

/* ---------- Push and pop ---------- */
.spush { width: 100%; display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .spush { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.spush-stack, .cstack-stack { display: grid; gap: 2px; align-content: start; }
.spush-stack > small { font-size: 0.68rem; color: var(--ink-soft); }
.spush-slot { display: grid; grid-template-columns: 6.5rem 4.5rem 1fr auto; gap: 0.4rem; align-items: center; padding: 0.25rem 0.5rem; border-radius: 4px; background: var(--surface-2); border: 2px solid transparent; font-size: 0.82rem; min-height: 2rem; }
.spush-slot b { font-family: var(--font-mono); color: var(--ink-soft); opacity: 0.5; }
.spush-slot em { font-style: normal; font-size: 0.7rem; color: var(--ink-soft); opacity: 0.5; }
.spush-slot.live { background: #8fc1ec; color: #1a1408; }
.spush-slot.live b, .spush-slot.live em { color: #1a1408; opacity: 1; }
.spush-slot.hot { border-color: #d0452f; }
.spush-addr { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); }
.spush-slot.live .spush-addr { color: #1a1408; opacity: 0.7; }
.spush-ptr { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: #d0452f; }
.spush-side { display: grid; gap: 0.6rem; align-content: start; }
.spush-regs { display: flex; flex-wrap: wrap; gap: 4px; }
.spush-regs span { display: flex; flex-direction: column; align-items: center; background: var(--surface-2); border-radius: 6px; padding: 0.2rem 0.6rem; font-family: var(--font-mono); font-size: 0.85rem; }
.spush-regs small { font-family: var(--font-ui); font-size: 0.62rem; color: var(--ink-soft); }
.spush-code { display: grid; gap: 0.25rem; font-size: 0.85rem; }
.spush-code small { color: var(--ink-soft); font-size: 0.72rem; }
.spush-code pre { margin: 0; font-size: 0.8rem; }

/* ---------- Call stack ---------- */
.cstack { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.cstack-chain { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; font-size: 0.82rem; }
.cstack-chain small { color: var(--ink-soft); margin-right: 0.3rem; font-size: 0.72rem; }
.cstack-chain span { font-family: var(--font-mono); background: var(--surface-2); border-radius: 4px; padding: 0.1rem 0.45rem; }
.cstack-chain span.cur { background: var(--signal); color: var(--signal-ink); font-weight: 700; }
.cstack-chain i { font-style: normal; color: var(--ink-soft); }
.cstack-main { width: 100%; display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cstack-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cstack-side { display: grid; gap: 0.6rem; align-content: start; }
.cstack-stack .spush-slot { grid-template-columns: 6.2rem 4.6rem 1fr auto; }
.cstack .astep-code li { grid-template-columns: 4.2rem 4.4rem 1fr; }

/* ---------- Stack smashing ---------- */
.smash { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.smash-src { margin: 0; width: 100%; font-size: 0.8rem; }
.smash-in { font-family: var(--font-mono); font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: center; width: min(100%, 30rem); }
.smash-in input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); }
.smash-in input:focus { outline: 2px solid var(--accent); }
.smash-presets { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.smash-frame { width: 100%; display: grid; gap: 3px; }
.smash-frame > small { font-size: 0.68rem; color: var(--ink-soft); }
.smash-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.4rem; align-items: center; }
.smash-row em { font-style: normal; font-size: 0.75rem; text-align: right; color: var(--ink-soft); }
.smash-row.broken em { color: #d0452f; font-weight: 700; }
.smash-row > div { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.smash-row span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 2.1rem; border-radius: 3px; background: var(--surface-2); font-family: var(--font-mono); }
.smash-row span b { font-size: 0.85rem; line-height: 1; }
.smash-row span small { font-size: 0.58rem; color: var(--ink-soft); }
.smash-row span.w { background: #9fdcb3; color: #1a1408; }
.smash-row span.w small, .smash-row span.bad small { color: #1a1408; }
.smash-row span.bad { background: #f2a196; color: #1a1408; }
.smash-out { width: 100%; border-radius: 8px; padding: 0.6rem 0.9rem; border-left: 5px solid var(--rule); background: var(--surface-2); font-size: 0.88rem; }
.smash-out p { margin: 0.2rem 0 0; }
.smash-out.ok { border-left-color: #2f9e5b; }
.smash-out.warn { border-left-color: var(--signal); }
.smash-out.bad { border-left-color: #d0452f; background: color-mix(in srgb, #d0452f 12%, var(--surface)); }
.smash-out.bad strong { color: #d0452f; font-family: var(--font-mono); }
@media (max-width: 520px) { .smash-row { grid-template-columns: 4.2rem minmax(0, 1fr); } .smash-row span small { display: none; } }