:root {
  --primary: #0f62fe; --primary-dark: #0043ce; --primary-light: #edf5ff;
  --bg: #f4f4f4; --card: #ffffff; --text: #161616; --muted: #525252;
  --border: #e0e0e0; --success: #24a148; --warn: #f1c21b; --danger: #da1e28; --accent: #8a3ffc;
  --radius: 12px;
}
* { box-sizing: border-box; }
body { font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; background: var(--bg); color: var(--text); line-height: 1.55; }
a { color: var(--primary-dark); }
header { background: linear-gradient(135deg, #0f62fe, #0043ce); color: #fff; padding: 1.4rem 1rem 1.2rem; text-align: center; }
header h1 { margin: 0; font-size: 1.5rem; }
header p { margin: .3rem 0 0; opacity: .9; font-size: .95rem; }
nav { background: #fff; display: flex; overflow-x: auto; position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
nav button { flex: 0 0 auto; padding: .75rem .9rem; border: none; background: none; font: inherit; font-size: .9rem; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; }
nav button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
main { padding: 1rem; max-width: 980px; margin: 0 auto; }
.section { display: none; }
.section.active { display: block; }
.card { background: var(--card); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.card h2 { margin-top: 0; font-size: 1.25rem; }
.card h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.lead { font-size: 1.02rem; color: var(--muted); }
.grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tile { border: 1px solid var(--border); border-radius: 10px; padding: .8rem; background: #fff; cursor: pointer; text-align: left; font: inherit; }
.tile:hover, .tile.selected { border-color: var(--primary); background: var(--primary-light); }
.tile strong { display: block; margin-bottom: .2rem; }
.tile small { color: var(--muted); }
.detail { margin-top: .8rem; padding: .9rem; border-left: 4px solid var(--primary); background: var(--primary-light); border-radius: 0 10px 10px 0; }
.pill { display: inline-block; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: #e8daff; color: #491d8b; margin-right: .3rem; }
.pill.green { background: #defbe6; color: #0e6027; }
.pill.yellow { background: #fcf4d6; color: #684e00; }
.pill.red { background: #fff1f1; color: #a2191f; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: #f4f4f4; }
.table-wrap { overflow-x: auto; }
code, .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .85rem; background: #f2f4f8; padding: .05rem .3rem; border-radius: 4px; }
.steps { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0; }
.step { padding: .45rem .7rem; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-size: .88rem; }
.step.done { background: #defbe6; border-color: var(--success); }
.step.current { background: var(--primary-light); border-color: var(--primary); font-weight: 600; }
.arrow { color: var(--muted); }
.btn { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: .55rem 1rem; font: inherit; cursor: pointer; }
.btn.secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
label { font-size: .9rem; }
input[type=number], input[type=text], select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 6px; }
.log { background: #161616; color: #c6c6c6; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .78rem; padding: .7rem; border-radius: 8px; max-height: 240px; overflow: auto; white-space: pre; }
.callout { padding: .7rem .9rem; border-radius: 8px; background: #fcf4d6; border-left: 4px solid var(--warn); font-size: .9rem; }
.quiz-q { margin-bottom: 1rem; }
.quiz-q button { display: block; width: 100%; text-align: left; margin: .3rem 0; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }
.quiz-q button.correct { background: #defbe6; border-color: var(--success); }
.quiz-q button.wrong { background: #fff1f1; border-color: var(--danger); }
.explain { font-size: .88rem; color: var(--muted); margin-top: .3rem; }
.sources { font-size: .82rem; color: var(--muted); }
.sources li { margin-bottom: .2rem; }
.ex-hide { display: none; }
.tile small:not(.ex-hide) { display: block; }
input[type=range] { width: 100%; }
.byline { font-size: .85rem; color: var(--muted); border-left: 3px solid var(--accent); padding-left: .6rem; }
footer { text-align: center; font-size: .8rem; color: var(--muted); padding: 1.5rem 1rem 2rem; }
@media (max-width: 600px) { header h1 { font-size: 1.25rem; } main { padding: .7rem; } .card { padding: .9rem; } }

/* knowledge base */
.kb-stat { cursor: default; text-align: center; }
.kb-stat strong { display: block; font-size: 1.6rem; color: #0f62fe; }
.kb-facts { padding-left: 1.2rem; }
.kb-facts li { margin: .35rem 0; }
.kb-topic { scroll-margin-top: 4rem; }
#kb-counter { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
#kb-counter .kb-stat { padding: .5rem .3rem; }
#kb-counter .kb-stat strong { font-size: 1.3rem; }
#kb-counter .kb-stat small { font-size: .72rem; }

/* how to use */
.beginner { border-left: 4px solid #0f62fe; }
.path li, .howto-steps > li { margin: .6rem 0; }
.howto-steps { padding-left: 1.3rem; }
.howto-steps p { margin: .25rem 0; }
.where { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; background: #f2f4f8; border-radius: 4px; padding: .2rem .45rem; display: inline-block; margin: .2rem 0; }
.done input { margin-right: .3rem; }
.done input:checked + strong { text-decoration: line-through; opacity: .6; }
.callout.ok { background: #defbe6; border-color: #24a148; }

/* hands-on lab */
.lab-flow { padding-left: 1.3rem; }
.lab-flow li { margin: .2rem 0; }
.lab-progress { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; margin: .6rem 0; }
.lab-progress .bar { flex: 1 1 160px; height: 10px; background: #e0e0e0; border-radius: 999px; overflow: hidden; }
.lab-progress .bar span { display: block; height: 100%; width: 0; background: #24a148; transition: width .2s; }
button.link { background: none; border: 0; color: #0f62fe; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.done input:checked + span { text-decoration: line-through; opacity: .6; }

/* knowledge diagrams */
.kb-fig { margin: .6rem 0; }
.kb-fig img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }

/* troubleshooting, cheat sheets */
#tr-search { width: 100%; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; margin: .4rem 0; box-sizing: border-box; }
.trouble h3 { margin-top: .4rem; }
table.cheat td { vertical-align: top; padding: .35rem .3rem; }
@media print {
  body.print-cheat header, body.print-cheat nav, body.print-cheat footer { display: none !important; }
  body.print-cheat main > section:not(#howto) { display: none !important; }
  body.print-cheat #howto { display: block !important; }
  body.print-cheat #howto > *:not(#howto-body), body.print-cheat #howto-body > *:not(.cheat-sheet) { display: none !important; }
  body.print-cheat .print-cheat-btn { display: none !important; }
  body.print-cheat .cheat-sheet { box-shadow: none; border: 1px solid #999; }
}

/* ---------- mobile experience (#25) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.section { scroll-margin-top: 3.5rem; }
/* tab bar: menu button stays at the left, edge fade shows that the bar scrolls */
nav .menu-btn { position: sticky; left: 0; z-index: 1; flex: 0 0 auto; background: #fff; border: none; border-right: 1px solid var(--border); padding: .75rem .9rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--primary); cursor: pointer; }
@media (max-width: 700px) {
  /* scroll shadow on the right edge shows that the tab bar scrolls (opaque, unlike a mask) */
  nav { background:
      linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll,
      #fff; }
  footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  header { padding: 1rem .9rem .9rem; }
  header h1 { font-size: 1.25rem; }
  header p:not(:last-child) { display: none; }
  main { padding: .75rem; }
  .card { padding: 1rem; }
}
/* sections menu */
.menu-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(22,22,22,.45); display: flex; justify-content: center; align-items: flex-end; }
.menu-sheet[hidden] { display: none; }
.menu-panel { background: #fff; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: .8rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.menu-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: #fff; padding: .3rem 0 .5rem; }
.menu-head button { border: none; background: var(--bg); border-radius: 999px; width: 2.4rem; height: 2.4rem; font-size: 1rem; cursor: pointer; }
.menu-group { margin: .8rem 0 .35rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.menu-item { display: block; text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: .65rem .7rem; background: #fff; font: inherit; color: var(--text); text-decoration: none; cursor: pointer; min-height: 3.2rem; }
.menu-item small { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; line-height: 1.3; }
body.menu-open { overflow: hidden; }
/* previous / next */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1.2rem 0 .5rem; }
.prevnext a { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; text-decoration: none; color: var(--text); min-height: 3.2rem; }
.prevnext a small { display: block; color: var(--muted); font-size: .75rem; }
.prevnext .pn-next { text-align: right; }
/* floating buttons */
.fab { position: fixed; right: calc(.9rem + env(safe-area-inset-right)); bottom: calc(.9rem + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: .4rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
.fab.show { opacity: 1; pointer-events: auto; }
.fab button { border: none; border-radius: 999px; background: var(--primary); color: #fff; min-width: 2.9rem; height: 2.9rem; padding: 0 .9rem; font: inherit; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }
/* bigger tap targets */
.done { display: flex; gap: .55rem; align-items: flex-start; padding: .25rem 0; cursor: pointer; }
.done input { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; margin: .1rem 0 0; }
.sources a { display: inline-block; padding: .2rem 0; }
/* collapsible troubleshooting */
details.trouble > summary { list-style: none; cursor: pointer; }
details.trouble > summary::-webkit-details-marker { display: none; }
details.trouble > summary h3 { margin: .45rem 0 .1rem; padding-right: 1.6rem; position: relative; }
details.trouble > summary h3::after { content: "▾"; position: absolute; right: 0; top: 0; color: var(--muted); }
details.trouble[open] > summary h3::after { content: "▴"; }
/* phone guide */
details.phone > summary { cursor: pointer; }
details.phone > summary small { display: block; color: var(--muted); margin-top: .15rem; }
.phone-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.qr-box { display: none; align-items: center; gap: 1rem; margin-top: .6rem; }
.qr-box img { border-radius: 8px; border: 1px solid var(--border); }
@media (min-width: 900px) { .qr-box { display: flex; } }
@media (max-width: 560px) { .phone-cols { grid-template-columns: 1fr; } .menu-grid { grid-template-columns: 1fr; } }
@media print { .fab, .prevnext, nav .menu-btn, .menu-sheet, details.phone { display: none !important; } }

/* ---------- diagrams (#28) ---------- */
figure.dg { margin: .9rem 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: .7rem; }
figure.dg figcaption { font-size: .85rem; color: var(--muted); margin-top: .4rem; }
.dg-svg { width: 100%; height: auto; display: block; max-width: 520px; margin: 0 auto; }
.dg-svg .bx { fill: #fff; stroke: #8d8d8d; stroke-width: 1.4; }
.dg-svg .bx.hl { fill: #edf5ff; stroke: #0f62fe; } .dg-svg .bx.ok { fill: #defbe6; stroke: #24a148; }
.dg-svg .bx.bad { fill: #fff1f1; stroke: #da1e28; } .dg-svg .bx.warn { fill: #fcf4d6; stroke: #b28600; }
.dg-svg .bx.agent { fill: #f6f2ff; stroke: #8a3ffc; } .dg-svg .bx.soft { fill: #f4f4f4; stroke: #c6c6c6; }
.dg-svg .t { fill: #161616; text-anchor: middle; } .dg-svg .t.b { font-weight: 600; }
.dg-svg .lbl { fill: #0043ce; font-size: 12px; font-weight: 600; } .dg-svg .note { fill: #525252; font-size: 12px; }
.dg-svg .ln { stroke: #525252; stroke-width: 1.6; fill: none; } .dg-svg .ln.dash { stroke-dasharray: 5 4; } .dg-svg .ahead { fill: #525252; }
.dg-svg .ev { fill: #fff; stroke: #24a148; stroke-width: 2; } .dg-svg .ev.end { stroke: #da1e28; stroke-width: 4; } .dg-svg .ev.endok { stroke: #24a148; stroke-width: 4; }
.dg-svg .gw { fill: #fcf4d6; stroke: #b28600; stroke-width: 1.6; } .dg-svg .tok { fill: #0f62fe; }
.qos-ctl { display: grid; gap: .35rem; margin-bottom: .4rem; }
.qos-opt { display: flex; gap: .5rem; align-items: center; padding: .3rem .1rem; cursor: pointer; }
.qos-opt input { width: 1.25rem; height: 1.25rem; }
.qos-mark { transition: transform .35s ease; }
.qos-out { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.qos-out li { margin: .2rem 0; } .q-ok::marker { content: "✓ "; color: var(--success); } .q-warn::marker { content: "! "; color: #b28600; } .q-bad::marker { content: "✗ "; color: var(--danger); } .q-tip { list-style: none; margin-left: -1.1rem; font-weight: 600; }
details.dg-more > summary { cursor: pointer; color: var(--primary-dark); font-weight: 600; padding: .35rem 0; }
.tl-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; }
.tl-seg { display: block; } .tl-legend { list-style: none; padding: 0; margin: .6rem 0 0; font-size: .9rem; }
.tl-legend li { margin: .25rem 0; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; } .tl-legend small { color: var(--muted); }
.tl-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tl-0 { background: #0f62fe; } .tl-1 { background: #8a3ffc; } .tl-2 { background: #24a148; } .tl-3 { background: #ff832b; } .tl-4 { background: #1192e8; } .tl-5 { background: #d02670; } .tl-break { background: #c6c6c6; }
@media (prefers-reduced-motion: reduce) { .qos-mark { transition: none; } }
/* ---------- reading time, progress, badges (#27, #29) ---------- */
.readtime { display: inline-block; font-size: .8rem; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem; margin: 0 0 .6rem; }
.readtime.total { display: block; border: none; background: none; padding: 0; margin: .4rem 0 0; font-size: .85rem; }
.menu-item .rt { color: var(--primary-dark); font-weight: 600; }
.menu-progress { font-size: .8rem; color: var(--muted); margin-left: .4rem; }
.muted { color: var(--muted); font-weight: 400; font-size: .8rem; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin: .6rem 0; }
.badge { border: 1px dashed var(--border); border-radius: 10px; padding: .55rem; text-align: center; filter: grayscale(1); opacity: .6; }
.badge .ic { font-size: 1.5rem; display: block; } .badge strong { display: block; font-size: .88rem; } .badge small { display: block; font-size: .72rem; color: var(--muted); line-height: 1.25; }
.badge.earned { filter: none; opacity: 1; border: 1px solid var(--success); background: #defbe6; }
.dyk { background: var(--primary-light); border-radius: 10px; padding: .7rem .8rem; margin-top: .6rem; }
.dyk-h { margin: 0 0 .3rem; font-weight: 700; } .dyk p { margin: .2rem 0; } .dyk-act { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.toast { position: fixed; left: 50%; top: calc(1rem + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 60; background: #161616; color: #fff; padding: .7rem 1.1rem; border-radius: 999px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: opacity .5s; max-width: 92vw; text-align: center; }
.toast.out { opacity: 0; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 59; overflow: hidden; }
.confetti span { position: absolute; top: -2rem; font-size: 1.4rem; animation: fall 2.2s ease-in forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: .2; } }
@media print { .toast, .confetti, .fun, .qos-ctl { display: none !important; } }
.tl-legend li { display: grid; grid-template-columns: 12px 2.6rem 1fr auto; gap: .45rem; align-items: baseline; }
.tl-legend li .tl-dot { align-self: center; }