/* Unlock the Secrets of the DARK WEB, Volume 2 | Antonio Brandao, Author | August 2026 */
/* ============================================================
   DARKWEB — Volume 2 companion site
   Offline-safe: no CDN fonts, no external assets.
   ============================================================ */

:root {
  /* --- palette --- */
  /* surfaces: cool near-black, lifted just enough that panels read */
  --void:        #08060e;
  --void-2:      #0e0a18;
  --panel:       #15101f;
  --panel-2:     #1c1430;
  --edge:        #2f2343;
  --edge-hot:    #533484;

  /* primary accent — structure, links, chapter furniture */
  --violet:      #b866ff;
  --violet-soft: #d4a5ff;
  --violet-dim:  #8250bd;
  --magenta:     #ef5ce0;

  /* attention accent — command labels, active state */
  --amber:       #ffd84d;
  --label:       var(--amber);

  /* text — raised contrast for long-form reading */
  --text:        #f1edf8;
  --text-2:      #cabfdd;
  --muted:       #9c91b2;

  /* state */
  --pass:        #5ce596;
  --fail:        #ff7a7a;
  --warn:        #ffc247;

  /* teaching accent — command notes & book-only explanation (adds colour) */
  --cyan:        #46d6d0;
  --cyan-soft:   #93f0ec;

  /* --- type --- */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code",
          "JetBrains Mono", Menlo, Consolas, monospace;

  --measure: 74ch;
  --rail: 264px;
  --radius: 4px;
}

/* ============================================================
   base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--void);
  background-image:
    radial-gradient(ellipse 1000px 560px at 10% -10%, rgba(184,102,255,.13), transparent 66%),
    radial-gradient(ellipse 760px 420px at 94% 2%, rgba(239,92,224,.09), transparent 62%),
    radial-gradient(ellipse 900px 500px at 50% 108%, rgba(83,52,132,.16), transparent 70%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--magenta); }
:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   wordmark
   ============================================================ */

.wordmark {
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
}
.wordmark .a { color: #fff; }
.wordmark .b {
  color: var(--violet);
  text-shadow: 0 0 18px rgba(184,102,255,.55);
}

/* ============================================================
   shell
   ============================================================ */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- sidebar ---- */

.rail {
  border-right: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--void-2), var(--void));
  padding: 26px 18px 90px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.rail__brand { font-size: 19px; margin-bottom: 4px; display: block; }
.rail__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}

.rail__group {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet-dim);
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--edge);
}

.rail__link {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 14px;
  border-left: 2px solid transparent;
}
.rail__link:hover { background: rgba(184,102,255,.07); color: var(--text); }
.rail__link[aria-current="page"] {
  background: rgba(184,102,255,.12);
  border-left-color: var(--violet);
  color: #fff;
}
.rail__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--violet-dim);
  min-width: 22px;
}

/* ---- main ---- */

.main { padding: 40px 48px 120px; min-width: 0; }
.wrap { max-width: var(--measure); }
.wrap--wide { max-width: 96ch; }

/* ============================================================
   headings
   ============================================================ */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 10px;
}

h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  font-weight: 750;
}
h2 {
  font-size: 25px;
  letter-spacing: -.01em;
  margin: 56px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--edge);
  font-weight: 700;
}
h3 { font-size: 18px; margin: 34px 0 10px; font-weight: 650; }
h4 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet-soft);
  margin: 26px 0 8px;
  font-weight: 600;
}

p { margin: 0 0 16px; color: var(--text-2); }
p strong, li strong { color: var(--text); font-weight: 650; }
ul, ol { color: var(--text-2); padding-left: 22px; }
li { margin-bottom: 7px; }

.lede { font-size: 18px; color: var(--text); line-height: 1.6; }

/* ============================================================
   meta chips
   ============================================================ */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--edge-hot);
  border-radius: 999px;
  color: var(--text-2);
  background: rgba(184,102,255,.06);
}
.chip--hot { border-color: var(--violet); color: var(--violet); }
.chip--pass { border-color: var(--pass); color: var(--pass); }
/* vibrant meta chips: plain chips cycle through the accent hues so the rows
   read colourful rather than uniform (the semantic --hot/--pass keep theirs) */
.chips .chip:not(.chip--hot):not(.chip--pass):nth-child(5n+1){ border-color:var(--cyan);        color:var(--cyan-soft);   background:rgba(70,214,208,.08); }
.chips .chip:not(.chip--hot):not(.chip--pass):nth-child(5n+2){ border-color:var(--amber);       color:var(--amber);       background:rgba(255,216,77,.08); }
.chips .chip:not(.chip--hot):not(.chip--pass):nth-child(5n+3){ border-color:var(--pass);        color:var(--pass);        background:rgba(92,229,150,.08); }
.chips .chip:not(.chip--hot):not(.chip--pass):nth-child(5n+4){ border-color:var(--magenta);     color:var(--magenta);     background:rgba(239,92,224,.08); }
.chips .chip:not(.chip--hot):not(.chip--pass):nth-child(5n+5){ border-color:var(--violet-soft); color:var(--violet-soft); background:rgba(184,102,255,.08); }

/* ============================================================
   lab card
   ============================================================ */

.lab {
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  padding: 0 0 26px;
  margin: 42px 0;
}
.lab__head {
  padding: 18px 26px 16px;
  border-bottom: 1px solid var(--edge);
  border-radius: 5px 5px 0 0;
  background: rgba(184,102,255,.05);
  display: flex;
  align-items: center;
  gap: 16px;
}
.lab__id {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--void);
  background: linear-gradient(135deg, var(--violet), var(--magenta));
  padding: 6px 11px;
  border-radius: 3px;
  white-space: nowrap;
}
.lab__title { margin: 0; font-size: 19px; font-weight: 680; }
.lab__body { padding: 22px 26px 0; }
.lab__body > :first-child { margin-top: 0; }

/* ============================================================
   command block — the signature element
   ============================================================ */

.cmd {
  margin: 18px 0;
  border: 1px solid var(--edge-hot);
  border-left: 3px solid var(--amber);
  border-radius: 5px;
  background: #05030a;
  box-shadow: 0 0 0 1px rgba(184,102,255,.08), 0 8px 28px -18px rgba(184,102,255,.7);
}
.cmd__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, rgba(184,102,255,.26), rgba(239,92,224,.10));
  border-bottom: 1px solid var(--edge-hot);
}
.cmd__where {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
  text-shadow: 0 0 14px rgba(255, 216, 77, .45);
}
.cmd__copy {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 3px 9px;
  cursor: pointer;
}
.cmd__copy:hover { color: var(--text); border-color: var(--violet); }
.cmd pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: #e6dcff;
}

/* themed scrollbars — the default light bar fights the panel */
.cmd pre, .out pre {
  scrollbar-width: thin;
  scrollbar-color: var(--edge-hot) transparent;
}
.cmd pre::-webkit-scrollbar,
.out pre::-webkit-scrollbar { height: 8px; }
.cmd pre::-webkit-scrollbar-track,
.out pre::-webkit-scrollbar-track { background: transparent; }
.cmd pre::-webkit-scrollbar-thumb,
.out pre::-webkit-scrollbar-thumb {
  background: var(--edge-hot);
  border-radius: 999px;
}
.cmd pre::-webkit-scrollbar-thumb:hover,
.out pre::-webkit-scrollbar-thumb:hover { background: var(--violet-dim); }
.cmd pre .p { color: var(--violet-dim); user-select: none; }
.cmd pre .c { color: var(--muted); font-style: italic; }

.out {
  margin: -14px 0 20px;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--pass);
  border-top: none;
  border-radius: 0 0 5px 5px;
  background: rgba(255,255,255,.015);
}
.out__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pass);
  padding: 7px 14px 0;
}
.out pre {
  margin: 0;
  padding: 6px 16px 14px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}

/* ============================================================
   callouts
   ============================================================ */

.note {
  border-left: 3px solid var(--violet);
  background: rgba(184,102,255,.07);
  padding: 14px 18px;
  margin: 22px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.note--warn { border-left-color: var(--warn); background: rgba(251,191,36,.07); }
.note--fail { border-left-color: var(--fail); background: rgba(248,113,113,.07); }
.note__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 6px;
  font-weight: 700;
}
.note--warn .note__title { color: var(--warn); }
.note--fail .note__title { color: var(--fail); }
.note p:last-child { margin-bottom: 0; }

/* ============================================================
   screenshot placeholder
   ============================================================ */

.shot {
  margin: 26px 0;
  border: 1px dashed var(--edge-hot);
  border-radius: 5px;
  background:
    repeating-linear-gradient(45deg, rgba(184,102,255,.03) 0 12px, transparent 12px 24px),
    var(--panel);
  padding: 22px 24px;
}
.shot__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 10px;
}
.shot__file {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  background: rgba(0,0,0,.4);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: 12px;
}
.shot__brief { color: var(--text-2); font-size: 14.5px; margin: 0; }
.shot__brief strong { color: var(--text); }
.shot__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--edge);
  background: rgba(0,0,0,.25);
  margin: 0 0 12px;
}
/* once a real figure has loaded, drop the "to-capture" placeholder styling */
.shot--has-img {
  border-style: solid;
  border-color: var(--edge);
  background: var(--panel);
}
/* reader-facing caption: stays inside the screenshot box */
.shot__caption {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  padding-left: 13px;
  border-left: 2px solid var(--edge-hot);
}
/* screenshot notes: a separate box that sits just below the screenshot box */
.shot-notes {
  margin: 26px 0;
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: rgba(0,0,0,.22);
  padding: 14px 18px;
}
.shot + .shot-notes { margin-top: -14px; }
.shot-notes__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.shot-notes .shot__file { margin-bottom: 10px; }
.shot-notes .shot__brief { font-size: 13.5px; color: var(--text-2); margin: 0; }

/* ============================================================
   verify gate
   ============================================================ */

.cmdnote {
  margin: 12px 0 24px;
  padding: 13px 16px 14px 17px;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(70,214,208,.09), rgba(184,102,255,.05)),
    var(--panel);
}
.cmdnote__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(70, 214, 208, .40);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmdnote__label::before {
  content: "\203A";
  font-size: 16px;
  line-height: 1;
}
.cmdnote p { margin: 0; color: var(--text-2); }
.cmdnote p + p { margin-top: 8px; }
.cmdnote code {
  color: var(--cyan-soft);
  background: rgba(70, 214, 208, .10);
}

.gate {
  border: 1px solid var(--pass);
  border-radius: 5px;
  background: rgba(74,222,128,.06);
  padding: 18px 22px;
  margin: 30px 26px 0;
}
.gate__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pass);
  font-weight: 700;
  margin-bottom: 10px;
}
.gate ul { margin: 10px 0 0; }
.gate li::marker { color: var(--pass); }

/* ============================================================
   destination tagging (book / site split)
   ============================================================ */

/* how far right of the element the label sits.
   Blocks nested inside a lab card need to clear the card's padding + border. */
.lab 

/* Author-only. Never in the printed book, never on the public site.
   Visible in Full and Comments views so you can work with them. */


body.tagged body.tagged body.tagged /* screenshot-notes filter as comments but tag as SCREENSHOT */
body.tagged .shot-notes
/* The labels live in the right margin, which only exists on wide viewports.
   Below this the reading column fills the width and there is nowhere to put them. */
@media (max-width: 1240px) {
    body.tagged::after {
    content: "Tag labels need a wider window";
    position: fixed;
    right: 20px;
    bottom: 62px;
    z-index: 39;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(7,5,12,.94);
    border: 1px solid var(--edge);
    border-radius: 3px;
    padding: 4px 9px;
  }
}

/* ---- split control ---- */


/* ============================================================
   home page
   ============================================================ */

.hero {
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: linear-gradient(150deg, var(--panel-2), var(--void-2) 70%);
  padding: 44px 44px 40px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 340px at 88% 18%, rgba(239,92,224,.15), transparent 70%);
  pointer-events: none;
}
.hero__mark { font-size: clamp(34px, 5.5vw, 58px); margin-bottom: 12px; }
.hero__sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.hero p { max-width: 56ch; position: relative; z-index: 1; }

.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--panel);
  padding: 20px 22px;
  display: block;
  color: inherit;
}
.card:hover { border-color: var(--violet); background: var(--panel-2); }
.card__k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 8px;
}
.card__t { font-size: 17px; font-weight: 650; margin-bottom: 6px; color: var(--text); }
.card__d { font-size: 14px; color: var(--muted); margin: 0; }

.part {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 46px 0 4px;
}
.part__sub { font-size: 14px; color: var(--muted); margin: 0 0 18px; font-style: italic; }

.ch {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--panel);
  padding: 16px 20px;
  margin-bottom: 10px;
  color: inherit;
}
.ch:hover { border-color: var(--violet); }
.ch--soon { opacity: .42; pointer-events: none; }
.ch__n {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--violet-dim);
}
.ch__t { font-size: 16px; font-weight: 640; color: var(--text); }
.ch__d { font-size: 13.5px; color: var(--muted); }
.ch__m { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }

/* ============================================================
   pager
   ============================================================ */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--edge);
}
.pager a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ============================================================
   responsive
   ============================================================ */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--edge);
    padding-bottom: 20px;
  }
  .main { padding: 28px 20px 110px; }
  .hero { padding: 30px 24px; }
  .lab__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lab__body, .gate { padding-left: 18px; padding-right: 18px; }
  .gate { margin-left: 18px; margin-right: 18px; }
  .ch { grid-template-columns: 40px 1fr; }
  .ch__m { display: none; }
  }

/* ============================================================
   how to read this chapter
   ============================================================ */

.howto {
  border: 1px solid var(--edge-hot);
  border-radius: 6px;
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  padding: 22px 26px;
  margin: 28px 0 34px;
}
.howto__t {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  margin-bottom: 14px;
}
.howto__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.howto__opt { border-left: 2px solid var(--violet); padding-left: 14px; }
.howto__opt h5 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
}
.howto__opt p { margin: 0; font-size: 14px; color: var(--text-2); }

/* ============================================================
   lab index
   ============================================================ */

.labindex { margin: 8px 0 40px; border-top: 1px solid var(--edge); }

.labindex__item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 12px;
  border-bottom: 1px solid var(--edge);
  color: inherit;
  transition: background .12s ease;
}
.labindex__item:hover { background: rgba(184,102,255,.09); }
.labindex__id {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: .04em;
}
.labindex__t { font-size: 15.5px; color: var(--text); font-weight: 520; }
.labindex__m {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ============================================================
   per-lab navigation
   ============================================================ */

.labnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin: 26px 26px 0;
  padding-top: 16px;
  border-top: 1px solid var(--edge);
}
.labnav a {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 6px 14px;
}
.labnav a:hover {
  color: var(--amber);
  border-color: var(--edge-hot);
  background: rgba(255,216,77,.06);
}
.labnav a.labnav--next { color: var(--violet-soft); border-color: var(--edge-hot); }
.labnav a.labnav--next:hover { color: var(--amber); }

@media (max-width: 900px) {
  .labindex__item { grid-template-columns: 48px 1fr; }
  .labindex__m { display: none; }
  .labnav { margin-left: 18px; margin-right: 18px; }
}


/* ============================================================
   author comments — not published anywhere
   ============================================================ */

.comment {
  border: 1px dashed var(--amber);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,216,77,.04) 0 10px, transparent 10px 20px),
    rgba(255,216,77,.05);
  padding: 14px 18px;
  margin: 22px 0;
}
.comment__t {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  margin-bottom: 7px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.comment__t::before { content: "✎"; font-size: 13px; }
.comment p:last-child { margin-bottom: 0; }
.comment ul { margin-bottom: 0; }

/* a running count, so you can see at a glance how many are outstanding */

/* ── end-of-chapter pedagogy: summary, key takeaways, check-your-understanding ── */
.chsum { margin: 52px 0 12px; padding-top: 26px; border-top: 2px solid var(--edge-hot); }
.chsum__title { color: var(--violet); font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px; }
.chsum__box { background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--violet-dim);
  border-radius: var(--radius); padding: 15px 20px; margin: 0 0 18px; }
.chsum__k { color: var(--amber); font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; margin: 2px 0 12px; }
.chsum__list { margin: 0; padding-left: 1.15rem; }
.chsum__list li { margin: 0 0 9px; color: var(--text-2); }
.chsum__list li:last-child { margin-bottom: 2px; }
.cyu { border: 1px solid var(--edge); border-radius: var(--radius); margin: 0 0 8px; background: var(--void-2); overflow: hidden; }
.cyu summary { cursor: pointer; padding: 11px 16px; color: var(--text); font-weight: 600; list-style: none; }
.cyu summary::-webkit-details-marker { display: none; }
.cyu summary::before { content: "Q"; color: var(--cyan); font-weight: 800; margin-right: 11px; font-family: var(--mono); }
.cyu summary:hover { color: var(--cyan-soft); }
.cyu[open] summary { border-bottom: 1px solid var(--edge); color: var(--cyan-soft); }
.cyu__a { padding: 12px 16px 14px 43px; color: var(--text-2); font-size: .95rem; position: relative; }
.cyu__a::before { content: "A"; position: absolute; left: 16px; color: var(--pass); font-weight: 800; font-family: var(--mono); }

/* ── site search (in the rail) + theme toggle ────────────────────────────── */
.rail__search { display:flex; gap:6px; align-items:center; padding:2px 20px 8px; position:relative; }
.rail__search input { flex:1; min-width:0; box-sizing:border-box; padding:8px 11px; font:inherit; font-size:13px;
  background:var(--panel); border:1px solid var(--edge); border-radius:6px; color:var(--text); }
.rail__search input:focus { outline:none; border-color:var(--violet); }
.rail__search input::placeholder { color:var(--muted); }
.theme-toggle { flex:none; width:33px; height:33px; border-radius:6px; background:var(--panel);
  border:1px solid var(--edge); color:var(--text-2); cursor:pointer; font-size:15px; line-height:1; }
.theme-toggle:hover { color:var(--violet); border-color:var(--edge-hot); }
.rail__results { display:none; position:absolute; top:100%; left:20px; right:20px; z-index:30;
  max-height:52vh; overflow-y:auto; background:var(--panel-2); border:1px solid var(--edge);
  border-radius:6px; box-shadow:0 12px 34px rgba(0,0,0,.45); }
.rail__results.on { display:block; }
.rail__result { display:block; padding:8px 12px; font-size:12.5px; color:var(--text-2);
  border-bottom:1px solid var(--edge); text-decoration:none; line-height:1.35; }
.rail__result:last-child { border-bottom:none; }
.rail__result:hover { background:var(--edge); color:var(--text); }
.rail__result--lab { color:var(--cyan-soft); }
.rail__result--term { color:var(--amber); }
.rail__noresult { padding:9px 12px; font-size:12.5px; color:var(--muted); }

/* ── light theme (override the palette; terminals stay dark for legibility) ── */
body.theme-light {
  --void:#f6f4fb; --void-2:#ffffff; --panel:#ffffff; --panel-2:#f2edfa;
  --edge:#e3ddf1; --edge-hot:#c8b3ec;
  --text:#1b1526; --text-2:#443c58; --muted:#6c6584;
  --violet:#7c3aed; --violet-soft:#9a5cf0; --violet-dim:#7c3aed;
  --magenta:#c026d3; --amber:#a16207; --label:#a16207;
  --pass:#15803d; --fail:#dc2626; --warn:#b45309; --cyan:#0e7490; --cyan-soft:#0e7490;
  background:#f6f4fb;
}
body.theme-light { background-image:none; }
body.theme-light pre, body.theme-light .cmd pre, body.theme-light .out pre { background:#0e0a18; color:#f1edf8; }
body.theme-light .xref { color:#0e7490; border-bottom-color:rgba(14,116,144,.5); }
body.theme-light .cyu[open] summary, body.theme-light .cyu summary:hover { color:#0e7490; }

/* ── print: light page, dark terminals, chrome hidden, answers expanded ───── */
@media print {
  .rail, .rail__search, .theme-toggle, .cmd__copy, .labnav, .pager { display:none !important; }
  body { background:#fff !important; background-image:none !important; color:#111 !important; }
  .wrap, main { max-width:100% !important; margin:0 !important; padding:0 !important; }
  pre, .cmd pre, .out pre { background:#0e0a18 !important; color:#f1edf8 !important; }
  .cyu__a { display:block !important; }               /* print the answers */
  .cyu, .chsum__box, .shot, .lab { break-inside:avoid; }
  h2, h3 { break-after:avoid; }
  a { color:#111 !important; }
  .xref { text-decoration:underline; }
}
body.theme-light .wordmark .a { color:#1b1526; }
body.theme-light .wordmark .b { color:var(--violet); }

/* landing hero: full-title eyebrow + subtitle around the DARK WEB wordmark */
.hero__eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.hero__fulltitle{ font-size:16px; color:var(--text-2); letter-spacing:.02em; margin:12px 0 2px; }

/* ---- Code marker: violet terminal chip identifies every command step ------
   Book/Book-view: marks the command note (the command runs on the lab site).
   Full/Site view: marks the command box you copy and run. Legend on the
   landing page + the book's "How to use this book" page. */
.cmdnote__label::before, .cmd__bar::before {
  content:""; display:inline-block; width:1.15em; height:1.15em; flex:0 0 auto;
  margin-right:.42em; vertical-align:-.24em;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Crect%20x=%222%22%20y=%223%22%20width=%2220%22%20height=%2218%22%20rx=%224.2%22%20fill=%22%237c3aed%22/%3E%3Cpath%20d=%22M6.6%208.8l3.6%203.2-3.6%203.2%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%221.9%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M12.4%2015.4h4.6%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%221.9%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E") no-repeat center/contain;
}
.ricon { display:inline-block; width:1.05em; height:1.05em; vertical-align:-.2em;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Crect%20x=%222%22%20y=%223%22%20width=%2220%22%20height=%2218%22%20rx=%224.2%22%20fill=%22%237c3aed%22/%3E%3Cpath%20d=%22M6.6%208.8l3.6%203.2-3.6%203.2%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%221.9%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M12.4%2015.4h4.6%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%221.9%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E") no-repeat center/contain; }

/* landing "How this book works" band */
.howto-band{ border:1px solid var(--edge); border-left:3px solid var(--violet);
  background:var(--panel); border-radius:10px; padding:18px 22px; margin:0 0 28px; }
.howto-band__h{ font-size:15px; letter-spacing:.02em; margin:0 0 8px; color:var(--text); }
.howto-band p{ color:var(--text-2); margin:0 0 8px; line-height:1.55; }
.howto-band p:last-child{ margin-bottom:0; }

/* ---- Front-matter sections on the landing page ---------------------------
   Executive summary, how-to-use, about/method/continue: the same content the
   printed book carries in its roman front matter, so the site is complete on
   its own. Mirrors .howto-band's panel treatment at section scale. */
.howto-band__jump{ margin-top:12px !important; font-size:13px; }
.howto-band__jump a{ color:var(--violet-soft); text-decoration:none;
  border-bottom:1px solid var(--edge-hot); margin-right:16px; white-space:nowrap; }
.howto-band__jump a:hover{ color:var(--text); border-bottom-color:var(--violet); }

.fmweb{ border-top:1px solid var(--edge); padding:26px 0 4px; margin:34px 0 0; }
.fmweb__h{ font-size:20px; letter-spacing:.01em; margin:0 0 14px; color:var(--text); }
.fmweb__h2{ font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--violet-soft); margin:26px 0 10px; }
.fmweb p{ color:var(--text-2); line-height:1.62; margin:0 0 12px; max-width:74ch; }
.fmweb__list{ margin:0 0 14px; padding-left:1.2em; max-width:74ch; }
.fmweb__list li{ color:var(--text-2); line-height:1.6; margin:0 0 10px; }
.fmweb__list li strong{ color:var(--text); }
.fmweb__ref{ display:inline-block; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--edge); border-radius:4px; padding:1px 6px;
  margin-left:4px; white-space:nowrap; }
.fmweb a{ color:var(--violet-soft); }
.fmweb--note{ border-top:1px solid var(--edge); }
.fmweb--note .fmweb__h{ font-size:16px; color:var(--text-2); }
.fmweb--note p{ max-width:64ch; }

/* ---- Landing-page calls to action ------------------------------------------
   index.html is where a reader arrives, and the labs now sit below the
   front-matter sections, so the hero carries a direct route to them. */
.hero__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:20px !important; }
.cta{ display:inline-block; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:11px 18px; border-radius:6px; border:1px solid var(--edge-hot);
  color:var(--text); transition:border-color .18s, background .18s, color .18s; }
.cta:hover{ border-color:var(--violet); }
.cta--hot{ background:var(--violet); border-color:var(--violet); color:#fff; }
.cta--hot:hover{ background:var(--violet-soft); border-color:var(--violet-soft); color:#fff; }
.howto-band__go{ color:var(--violet-soft) !important; font-weight:600;
  border-bottom-color:var(--violet) !important; }

/* The active rail link is white-on-tint, which disappears in the light theme.
   Now that the theme toggle is reachable from index.html too, fix the contrast. */
body.theme-light .rail__link[aria-current="page"]{ color:var(--text); }

/* ===========================================================================
   PUBLIC EDITION ONLY
   This site carries the commands; the book carries the reasoning. Two things
   need styling that the full edition never shows: the note at the top of each
   page, and the placeholder left where a book-only lab would have been.
   =========================================================================== */
.publicnote{ font-size:14px; color:var(--muted); border-left:2px solid var(--edge-hot);
  padding:2px 0 2px 14px; margin:0 0 34px; max-width:70ch; }
.publicnote a{ color:var(--violet-soft); text-decoration:none;
  border-bottom:1px solid var(--edge-hot); }
.publicnote a:hover{ color:var(--text); }

.inbook{ border:1px solid var(--edge); border-left:3px solid var(--violet-dim);
  border-radius:10px; background:var(--panel); padding:22px 26px; margin:26px 0; }
.inbook__id{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violet-soft); }
.inbook__title{ font-size:19px; margin:8px 0 12px; color:var(--text); }
.inbook p{ color:var(--text-2); line-height:1.62; margin:0 0 10px; max-width:72ch; }
.inbook__where{ font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--muted); margin:14px 0 0 !important; }

.step{ font-size:15px; letter-spacing:.02em; color:var(--text); margin:26px 0 10px; }