.deck {
  --accent: #4c3fbf;
  --accent-deep: #372d8f;
  --accent-soft: #e6e4fa;
  --accent-ink: #fff;
  --b: #00a29c;
  --b-soft: #d4f0ee;
  --gray: #e9edf1;
}
.deck .points li::marker { color: var(--accent); }
.deck .deck-progress span { background: var(--accent); }
.deck code { background: var(--accent-soft); }
.deck .btn code, .deck h2 code, .deck .opt code { background: none; padding: 0; color: inherit; }
.deck a { color: var(--accent-deep); }
.deck .btn:hover:not(:disabled) { background: var(--accent-soft); }
.deck .btn.primary:hover:not(:disabled), .deck .btn.sel:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn.danger { border-color: var(--block); color: var(--block); }
.deck .btn.danger:hover:not(:disabled) { background: var(--block-soft); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; flex: none; }
.bl-legend { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; font-size: 0.78em; color: var(--muted); }
.bl-legend .sw { margin-right: -8px; }
.cost-track { height: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: block; }
.cost-fill { display: block; height: 100%; background: var(--accent); transition: width 0.2s; }

/* Title */
.title-slide { flex-direction: row; align-items: center; gap: clamp(28px, 6vw, 80px); }
.title-slide h1 { font-size: clamp(2.5rem, 5vw + 0.5rem, 5rem); max-width: 10ch; }
.title-slide .lead { font-size: clamp(1.05rem, 0.8vw + 0.8rem, 1.3rem); max-width: 44ch; }
.hero-vm { flex: none; width: min(100%, 380px); height: auto; }
.hv-t { font: 700 12px var(--font); fill: var(--muted); text-anchor: middle; }
.hv-pages rect { fill: var(--panel); stroke: var(--ink); stroke-width: 1.5; }
.hv-pages rect.none { stroke: var(--line); stroke-dasharray: 4 3; }
.hv-pages text { font: 700 9.5px var(--mono); fill: var(--ink); text-anchor: middle; }
.hv-pages text.dim { fill: var(--muted); font-weight: 400; font-family: var(--font); }
.hv-links path { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.8; }
.hv-links path:nth-child(n+5) { stroke: var(--b); }
.hv-frames rect { stroke: var(--ink); stroke-width: 1.5; }
.hv-frames .a { fill: var(--accent); }
.hv-frames .b { fill: var(--b); }
.hv-frames .ab { fill: var(--accent-deep); }
.hv-frames .f { fill: var(--panel); stroke: var(--line); }
@media (max-width: 900px) {
  .title-slide { flex-direction: column-reverse; align-items: stretch; }
  .hero-vm { width: 100%; max-height: 230px; }
}

/* Two address spaces */
.sp-procs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .sp-procs { grid-template-columns: 1fr; } }
.sp-proc { display: flex; flex-direction: column; gap: 4px; border-radius: 10px; padding: 8px; border: 1.5px solid var(--c); min-width: 0; }
.sp-proc > b { font-size: 0.85em; color: var(--c); }
.sp-proc.pa { --c: var(--accent); --cs: var(--accent-soft); }
.sp-proc.pb { --c: var(--b); --cs: var(--b-soft); }
.sp-page {
  font: inherit; font-size: 0.72em; text-align: left; cursor: pointer; color: var(--ink);
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 4px; align-items: center;
  padding: 5px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); min-height: 34px;
}
.sp-page code { background: none; padding: 0; font-size: 0.92em; overflow: hidden; text-overflow: ellipsis; }
.sp-n { color: var(--muted); }
.sp-f { font-family: var(--mono); font-weight: 700; }
.sp-page.sel { background: var(--cs); border-color: var(--c); }
.sp-ram { display: flex; flex-direction: column; gap: 4px; }
.sp-frames { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.sp-frame { border-radius: 5px; padding: 3px 2px; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.66em; text-align: center; line-height: 1.15; border: 1.5px solid transparent; }
.sp-frame small { font-family: var(--mono); font-weight: 700; font-size: 1em; }
.sp-frame.o-free { background: var(--panel); border: 1.5px dashed var(--line); color: var(--muted); }
.sp-frame.o-a { background: var(--accent-soft); border-color: var(--accent); }
.sp-frame.o-b { background: var(--b-soft); border-color: var(--b); }
.sp-frame.o-ab { background: linear-gradient(135deg, var(--accent-soft) 50%, var(--b-soft) 50%); border-color: var(--ink); }
.sp-frame.o-k { background: var(--ink); color: #fff; }
.sp-frame.o-o { background: var(--gray); color: var(--muted); }
.sp-frame.hi { box-shadow: 0 0 0 3px var(--value); }
@media (max-width: 520px) { .sp-frames { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Layout and ASLR */
.ly-map { display: flex; flex-direction: column; gap: 3px; }
.ly-reg {
  font: inherit; font-size: 0.8em; cursor: pointer; color: var(--ink); text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 2.6em; gap: 8px; align-items: center;
  padding: 3px 10px; border-radius: 6px; border: 1.5px solid transparent; background: var(--accent-soft); min-height: 30px;
}
.ly-reg code { background: none; padding: 0; font-size: 0.9em; }
.ly-reg small { font-family: var(--mono); color: var(--muted); text-align: right; }
.ly-reg.r-kernel { background: var(--ink); color: #fff; }
.ly-reg.r-kernel small { color: #b8c4d0; }
.ly-reg.r-libs, .ly-reg.r-text { background: #d8d3f6; }
.ly-reg.r-anon { background: var(--b-soft); }
.ly-reg.r-heap { background: var(--b-soft); }
.ly-reg.r-null { background: var(--panel); border: 1.5px dashed var(--line); color: var(--muted); }
.ly-reg.sel { border-color: var(--accent-deep); box-shadow: 0 0 0 2px var(--accent); }
.ly-gap { text-align: center; color: var(--muted); font-size: 0.7em; line-height: 1.2; }
.ly-detail { border-left: 4px solid var(--accent); padding: 2px 0 2px 14px; min-height: 6.2em; }
.ly-detail p { font-size: 0.86em; color: var(--muted); margin: 2px 0 4px; }
.ly-detail .ly-line { font-size: 0.72em; overflow-wrap: anywhere; }

/* PTE */
.pte-box { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pte { display: grid; grid-template-columns: 1fr 5fr repeat(5, 1fr); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.pte .f { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 2px 6px; font-family: var(--mono); font-weight: 700; font-size: 0.85em; border-right: 1px solid var(--line); background: var(--panel); }
.pte .f:last-child { border-right: 0; }
.pte .f small { font-weight: 400; font-size: 0.7em; color: var(--muted); }
.pte .pfn { background: var(--accent-soft); font-family: var(--font); }
.pte .p { background: var(--accent); color: #fff; }
.pte .p small { color: #e6e4fa; }
.pte .nx { background: var(--gray); }
.pte-legend { display: grid; grid-template-columns: 2.6em 1fr; gap: 6px 10px; margin: 0; font-size: 0.9em; }
.pte-legend dt { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.pte-legend dd { margin: 0; }

/* Page walk */
.hex-pre { font-family: var(--mono); font-weight: 700; margin-right: -4px; }
.hex-in { font: inherit; font-family: var(--mono); width: 11em; max-width: 52vw; padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); min-height: 40px; }
.wk-bits { display: flex; flex-wrap: wrap; gap: 4px; }
.wk-chunk { display: flex; flex-direction: column; align-items: center; padding: 4px 6px; border-radius: 6px; background: var(--c); flex: 1 1 auto; }
.wk-chunk code { background: none; padding: 0; font-size: 0.72em; letter-spacing: 0.02em; }
.wk-chunk b { font-family: var(--mono); font-size: 0.85em; }
.wk-chunk .label { font-size: 0.68em; color: var(--ink); }
.c0 { --c: #d8d3f6; }
.c1 { --c: #fde4b8; }
.c2 { --c: #d4f0ee; }
.c3 { --c: #f9dfe7; }
.c4 { --c: var(--gray); }
.wk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-height: 9.5em; font-size: 0.8em; }
.wk-steps li { display: flex; gap: 8px; align-items: center; animation: pop 0.25s; font-family: var(--mono); overflow-wrap: anywhere; }
.wk-steps li > span:last-child { min-width: 0; }
.wk-lv { flex: none; width: 3.6em; text-align: center; padding: 2px 0; border-radius: 4px; background: var(--c); font-weight: 700; }
.wk-steps li.miss b { color: var(--block); }
.wk-steps li.done b { color: var(--accent-deep); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }

/* TLB */
.tl-l { min-width: 7.5em; }
.tl-grid { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 3px; }
.tl-c { font-style: normal; font-family: var(--mono); font-size: 0.66em; text-align: center; padding: 4px 0; border-radius: 4px; background: var(--accent-soft); transition: background 0.15s; }
.tl-c.empty { background: var(--paper); border: 1px dashed var(--line); }
.tl-c.hit { background: var(--ok); color: #fff; }
.tl-c.miss { background: var(--block); color: #fff; }

/* Huge pages */
.hg-l { min-width: 6em; }
.hg-reach { display: grid; gap: 4px; }

/* Page faults */
.sy-list { display: grid; gap: 4px; }
@media (min-width: 901px) { .sy-list { grid-template-columns: 1fr 1fr; } }
.sy-btn { font: inherit; font-size: 0.78em; text-align: left; padding: 6px 9px; border-radius: 7px; border: 1.5px solid var(--line); background: var(--panel); cursor: pointer; color: var(--ink); min-height: 36px; }
.sy-btn:hover { background: var(--paper); }
.sy-btn.sel { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.pf-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; min-height: 4.5em; align-content: flex-start; }
.pf-flow li { font-size: 0.78em; padding: 4px 9px; border-radius: 6px; border: 1.5px solid; animation: pop 0.25s backwards; }
.pf-flow li:not(:last-child)::after { content: ""; }
.pf-flow li + li { margin-left: 18px; position: relative; }
.pf-flow li + li::before { content: "→"; position: absolute; left: -15px; color: var(--muted); }
.pf-flow li.ok { border-color: var(--ok); background: var(--ok-soft); }
.pf-flow li.warn { border-color: #d9b800; background: #fdf4c4; }
.pf-flow li.bad { border-color: var(--block); background: var(--block-soft); }
.pf-flow li.verdict { background: var(--ink); color: #fff; border-color: var(--ink); }
.pf-flow li.verdict.bad { background: var(--block); border-color: var(--block); }
.pf-flow li.verdict.warn { background: #b38f00; border-color: #b38f00; }

/* Lazy allocation */
.lz-bars { display: grid; gap: 6px; }
.lz-row { display: grid; grid-template-columns: 2.8em 1fr 4.8em; gap: 10px; align-items: center; }
.lz-row.wide { grid-template-columns: 11em 1fr 4.8em; }
.lz-row b { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9em; }
.cost-fill.lz-v { background: #a59ce0; }
.cost-fill.lz-r { background: var(--accent-deep); }
.lz-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; }
.lz-grid i { height: 16px; border-radius: 2px; }
.lz-x { background: var(--paper); }
.lz-0, .sw.lz-0 { background: var(--panel); border: 1px dashed #a59ce0; }
.lz-1, .sw.lz-1 { background: #d8d3f6; }
.lz-2, .sw.lz-2 { background: var(--accent-deep); }
@media (max-width: 520px) { .lz-row.wide { grid-template-columns: 1fr 4.8em; } .lz-row.wide .label { grid-column: 1 / -1; } }

/* OOM */
.oo-bar { display: flex; height: 30px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.oo-bar span { height: 100%; transition: width 0.3s; font-size: 0.68em; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-weight: 600; }
.oo-k { background: var(--ink); }
.sw.c1, .oo-bar .c1 { background: #7a95b0; }
.sw.c2, .oo-bar .c2 { background: #336791; }
.sw.c3, .oo-bar .c3 { background: #d97a00; }
.sw.c4, .oo-bar .c4 { background: var(--accent); }
.oo-bar .oo-cache { background: repeating-linear-gradient(-45deg, #c9d5e0 0 6px, #b7c6d4 6px 12px); color: var(--ink); }
.oo-bar .oo-free { background: var(--panel); color: var(--muted); }
.oo-commit { font-weight: 400; }
.oo-table { display: grid; font-size: 0.82em; }
.oo-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.oo-row span:not(:first-child) { text-align: right; }
.oo-row.oo-h { color: var(--muted); font-size: 0.9em; font-weight: 600; }
.oo-row.dead { color: var(--block); text-decoration: line-through; }
.oo-row i.sw { display: inline-block; }

/* RSS/PSS */
.rp-table { display: grid; font-size: 0.85em; border-top: 2px solid var(--ink); }
.rp-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.rp-row span:not(:first-child) { text-align: right; font-family: var(--mono); font-size: 0.92em; }
.rp-row.rp-h { color: var(--muted); font-weight: 600; }
.rp-row.rp-h span { font-family: var(--font); }
.rp-row.rp-sum { font-weight: 700; }

/* CoW */
.cw { display: grid; gap: 8px; }
.cw-row { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; align-items: center; min-height: 58px; }
.cw-pages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.cw-pg {
  font: inherit; cursor: pointer; color: var(--ink); position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 2px; min-height: 54px;
  border-radius: 6px; border: 1.5px solid var(--ink); background: var(--panel);
}
.cw-pg small { position: absolute; left: 4px; top: 1px; font-size: 0.6em; color: var(--muted); }
.cw-pg b { font-family: var(--mono); font-size: 0.8em; margin-top: 8px; }
.cw-pg span { font-family: var(--mono); font-size: 0.66em; color: var(--muted); }
.cw-pg.shared { background: var(--accent-soft); border-color: var(--accent); border-style: dashed; }
.cw-pg.own { background: var(--b-soft); border-color: var(--b); }
.cw-pg.ro span { color: var(--block); font-weight: 700; }
.cw-pg:hover { box-shadow: 0 0 0 2px var(--value); }
@media (max-width: 520px) { .cw-row { grid-template-columns: 1fr; gap: 3px; } }

/* Thrashing */
.th-chart svg { width: 100%; height: auto; display: block; }
.th-chart .g { stroke: var(--line); stroke-width: 1; }
.th-chart .ax { font: 9px var(--font); fill: var(--muted); }
.th-chart .ram { stroke: var(--ink); stroke-dasharray: 3 3; }
.th-chart .ram-t { fill: var(--ink); font-weight: 700; }
.th-chart .ln { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.th-chart .pt { fill: var(--value); stroke: var(--ink); stroke-width: 2; }

/* free -m */
.fr-out { background: var(--ink); color: #e3ecf3; border-radius: 10px; padding: 10px 12px; font-family: var(--mono); font-size: 0.74em; }
.fr-cmd { color: #8aa0b4; margin-bottom: 4px; }
.fr-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 6px; text-align: right; }
.fr-k { color: #8aa0b4; font-size: 0.9em; white-space: nowrap; }
.fr-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.fr-v.av, .fr-k.av { color: #9ee6c9; }
.fr-v.fr, .fr-k.fr { color: var(--value); }
.fr-bar span { transition: width 0.3s; }
.fr-u, .sw.fr-u { background: var(--accent-deep); }
.fr-c, .sw.fr-c { background: #c9d5e0; }
.fr-d, .sw.fr-d { background: #d9b800; }
.fr-f, .sw.fr-f { background: var(--panel); border: 1px solid var(--line); }
.fr-col { display: flex; flex-direction: column; }
@media (max-width: 520px) { .fr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }