/* SSH key login lesson: dark illustrated theme. One hue per idea:
   amber = private key, teal = public key, pink = signature, purple = host key,
   blue = encryption and the network, green = let in / fits, coral = refused. */

@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree-latin-wght-normal.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JBMono"; src: url(fonts/jetbrains-mono-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JBMono"; src: url(fonts/jetbrains-mono-latin-ext.woff2) format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --bg: #11163b; --bg-deep: #0b0f2e;
  --stage: #181f4c; --panel: #1f2759; --panel-2: #283270; --panel-3: #323d84;
  --line: #4a57a8; --line-hi: #b7c1ff;
  --text: #f2f4ff; --text-2: #c3caf0;
  --ink: #0b1030; --paper: #eef1ff; --screen: #070a22; --scr: #e6ebff; --led: #9fb0ff;
  --code-bg: #0a0e2b;
  --amber: #ffbe0b; --amber-lt: #ffd457; --amber-glow: rgba(255, 190, 11, .16);
  --teal: #22c7bf; --teal-2: #9be8e1; --teal-lt: #63e6dc; --teal-glow: rgba(34, 199, 191, .18);
  --pink: #ff4f97; --pink-lt: #ff8fbe;
  --purple: #a58bff; --purple-lt: #c7b7ff; --purple-glow: rgba(165, 139, 255, .2);
  --green: #3ddc84; --green-lt: #78eba9; --green-glow: rgba(61, 220, 132, .15);
  --coral: #ff6f5e; --coral-lt: #ffa194; --coral-glow: rgba(255, 111, 94, .16);
  --blue: #4f8bff; --blue-lt: #97bbff; --blue-glow: rgba(79, 139, 255, .16); --blue-veil: rgba(16, 24, 72, .9);
  --wire-on: #c3caf0; --wire-off: #4a57a8;
  --display: "Bricolage", ui-rounded, system-ui, sans-serif;
  --body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --mono: "JBMono", ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { font-size: 18px; scrollbar-width: thin; scrollbar-color: var(--line) var(--bg-deep); -webkit-text-size-adjust: 100%; }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-hi); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

body {
  margin: 0; color: var(--text); font: 1rem/1.65 var(--body); -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image: radial-gradient(900px 520px at 85% -120px, #2c2878 0, rgba(44, 40, 120, 0) 70%), radial-gradient(700px 500px at -10% 10%, #172a6e 0, rgba(23, 42, 110, 0) 70%);
  background-repeat: no-repeat;
}
::selection { background: var(--purple); color: var(--ink); }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
a { color: var(--blue-lt); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--paper); }
code { font: 600 .88em/1 var(--mono); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: .12em .36em; overflow-wrap: anywhere; }
b, strong { font-weight: 750; }
h1, h2, h3 { font-family: var(--display); color: var(--text); }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.prose { max-width: 70ch; }
.prose p { margin: 0 0 1em; }

/* ---------- header ---------- */
.toplink { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 8px 16px; border-radius: 999px; background: var(--panel); border: 2px solid var(--line); color: var(--text); font-weight: 700; text-decoration: none; font-size: 1rem; }
.toplink:hover { background: var(--panel-2); color: var(--text); }
.hero { padding-bottom: 8px; }
.kicker { margin: 40px 0 12px; font: 800 1rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.hero h1 { font-weight: 800; font-size: clamp(2.05rem, 5.6vw, 3.75rem); line-height: 1.03; letter-spacing: -.02em; margin: 0 0 22px; text-wrap: balance; }
.hero h1 .second { display: block; color: var(--pink-lt); margin-top: .12em; }
.lede { font-size: 1.2rem; line-height: 1.6; max-width: 58ch; margin: 0 0 8px; }
.hint { color: var(--text-2); font-size: 1rem; max-width: 70ch; margin: 4px 0 0; }
kbd { font: 700 .85em/1 var(--mono); color: var(--text); background: var(--panel-2); border: 1px solid var(--line-hi); border-bottom-width: 3px; border-radius: 6px; padding: .15em .45em; }

/* ---------- glossary ---------- */
.glossary { margin-top: 56px; }
.glossary > h2 { font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 6px; }
.glossary > p { color: var(--text-2); margin: 0 0 20px; }
.terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.term { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 16px; }
.term svg { width: 64px; height: 56px; display: block; }
.term h3 { margin: 2px 0 4px; font-size: 1.1rem; font-weight: 800; line-height: 1.25; }
.term p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }

/* ---------- parts and chapters ---------- */
.part { margin: 88px 0 8px; padding: 28px 28px 24px; border-radius: 26px; border: 2px solid var(--line); background: linear-gradient(135deg, #2a246f 0, #1a2766 100%); }
.part .kicker { margin: 0 0 10px; color: var(--purple-lt); }
.part h2 { margin: 0 0 6px; font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.08; }
.part p { margin: 0; color: var(--text-2); }
section.ch { padding-top: 64px; scroll-margin-top: 16px; }
.ch-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.ch-num { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); font: 800 1.4rem/1 var(--display); border: 3px solid var(--line-hi); }
.ch-head h2 { margin: 0; font-weight: 800; font-size: clamp(1.55rem, 4.2vw, 2.3rem); line-height: 1.12; }
.gist { font-size: 1.22rem; font-weight: 650; line-height: 1.5; margin: 0 0 14px; }
section.ch h3 { font-size: 1.3rem; font-weight: 800; margin: 36px 0 10px; }

/* ---------- figures ---------- */
.fig { margin: 30px 0 34px; background: var(--stage); border: 3px solid var(--line); border-radius: 26px; padding: 20px; box-shadow: 0 8px 0 rgba(4, 6, 22, .65); }
.fig:focus-visible { outline: 3px solid var(--paper); outline-offset: 5px; }
.art { container-type: inline-size; }
.art svg { display: block; width: 100%; height: auto; overflow: visible; }
.art .lay-narrow { display: none; }
@container (max-width: 699px) {
  .art .lay-wide { display: none; }
  .art .lay-narrow { display: block; max-width: 470px; margin: 0 auto; }
}
.js .fig:not(.ready) .art { visibility: hidden; }

.art text { fill: var(--text); font-family: var(--body); font-size: 16px; font-weight: 500; }
.art .lay-narrow text { font-size: 15px; }
.art text.b { font-weight: 750; }
.art text.disp { font-family: var(--display); font-weight: 800; font-size: 19px; }
.art .lay-narrow text.disp { font-size: 17px; }
.art text.mono { font-family: var(--mono); font-size: 15px; }
.art .lay-narrow text.mono { font-size: 14px; }
.art text.ink { fill: var(--ink); }
.art text.dim { fill: var(--text-2); }
.art text.scr { fill: var(--scr); }
.art text.c-amber { fill: var(--amber-lt); }
.art text.c-teal { fill: var(--teal-lt); }
.art text.c-pink { fill: var(--pink-lt); }
.art text.c-purple { fill: var(--purple-lt); }
.art text.c-green { fill: var(--green-lt); }
.art text.c-coral { fill: var(--coral-lt); }
.art text.c-blue { fill: var(--blue-lt); }
.art text.c-coral-ink { fill: #b8251a; }
.pop, .spin { transform-box: fill-box; transform-origin: center; }
.wipe { transform-box: fill-box; transform-origin: right center; }
.grow-x { transform-box: fill-box; transform-origin: left center; }
.grow-y { transform-box: fill-box; transform-origin: center top; }

/* captions: a list without JavaScript, one fixed-height box with it */
.cap { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 2px solid var(--line); }
.cap ol { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 14px; }
.cap li, .cap .idle { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; margin: 0; font-size: 1.04rem; line-height: 1.5; font-weight: 600; }
.cap li::before, .cap .idle::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); color: var(--ink); font: 800 1.05rem/1 var(--display); font-variant-numeric: tabular-nums; }
.cap li > span, .cap .idle > span { padding-top: 6px; }
.cap .idle { display: none; counter-increment: none; }
.cap .idle::before { content: "▶"; font-size: .8rem; background: var(--panel-3); color: var(--text); border: 2px solid var(--line-hi); }
.js .cap { display: grid; }
.js .cap ol { display: contents; }
.js .cap .idle { display: grid; }
.js .cap li, .js .cap .idle { grid-area: 1 / 1; visibility: hidden; }
.js .cap li.on, .js .cap .idle.on { visibility: visible; }
.cap code { font-size: .86em; }

/* the control bar: every part has a fixed size, so nothing moves */
.bar { display: none; }
.js .bar { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.bar button { flex: none; height: 46px; border-radius: 999px; border: 2px solid var(--line-hi); background: var(--panel-2); color: var(--text); font: 800 1rem/1 var(--display); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .15s, color .15s; }
.bar button:hover:not(:disabled) { background: var(--panel-3); }
.bar button:disabled { opacity: .35; cursor: default; }
.bar .ic { width: 46px; }
.bar svg { width: 20px; height: 20px; flex: none; }
.bar .play { width: 124px; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.bar .play:hover:not(:disabled) { background: #fff; }
.bar .play .lbl { display: inline-block; width: 4.1em; text-align: left; }
.bar .play svg { display: none; }
.bar .play[data-mode="play"] .i-play, .bar .play[data-mode="pause"] .i-pause, .bar .play[data-mode="replay"] .i-replay { display: block; }
.bar .prog { flex: 1 1 auto; min-width: 0; display: flex; gap: 5px; height: 10px; margin: 0 6px; }
.bar .prog i { flex: 1; border-radius: 5px; background: var(--panel-3); transition: background-color .25s; }
.bar .prog i.done { background: var(--text-2); }
.bar .count { flex: none; width: 4.4em; white-space: nowrap; text-align: right; font: 800 1.02rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--text-2); }
.fig-note { margin: 12px 2px 0; color: var(--text-2); font-size: 1rem; }

/* ---------- code ---------- */
.code { margin: 18px 0 8px; border-radius: 18px; border: 2px solid var(--line); background: var(--code-bg); overflow: hidden; }
.code::before { content: attr(data-label); display: block; padding: 8px 16px; font: 700 .85rem/1.4 var(--mono); color: var(--text-2); background: var(--panel); border-bottom: 2px solid var(--line); }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 15px/1.65 var(--mono); color: var(--scr); tab-size: 2; }
.code pre:focus-visible { outline-offset: -4px; }
.code .c { color: #a3addf; }
.code .p { color: var(--green-lt); }
.code .w { color: var(--coral-lt); }

/* ---------- annotated anatomies ---------- */
.anat { margin: 18px 0 8px; border-radius: 22px; border: 2px solid var(--line); background: var(--panel); padding: 18px; }
.anat-code { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--code-bg); font: 15px/2.2 var(--mono); color: var(--scr); white-space: pre-wrap; overflow-wrap: anywhere; }
.seg { padding: 2px 5px; border-radius: 6px; background: var(--panel-2); border-bottom: 3px solid var(--line-hi); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.seg[data-pin]::before { content: attr(data-pin); display: inline-block; width: 21px; height: 21px; margin-right: 7px; border-radius: 50%; background: var(--paper); color: var(--ink); font: 800 .76rem/21px var(--display); text-align: center; vertical-align: 1px; }
.seg.k-amber { border-bottom-color: var(--amber); }
.seg.k-teal { border-bottom-color: var(--teal); }
.seg.k-coral { border-bottom-color: var(--coral); }
.anat-code .c { color: #a3addf; }
.anat-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.anat-notes li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 16px; background: var(--panel-2); border: 2px solid var(--line); font-size: 17px; line-height: 1.5; }
.anat-notes .pic { position: relative; width: 48px; height: 48px; }
.anat-notes .pic svg { width: 48px; height: 48px; display: block; }
.anat-notes .pic::after { content: attr(data-pin); position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); font: 800 .78rem/1 var(--display); }
.anat-notes b { color: var(--text); }

/* ---------- callouts, facts, tables, recap ---------- */
.callout { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; margin: 22px 0; padding: 18px 20px; border-radius: 20px; background: var(--panel); border: 2px solid var(--line-hi); }
.callout svg { width: 56px; height: 56px; display: block; }
.callout h3, section.ch .callout h3 { margin: 4px 0 6px; font-size: 1.2rem; }
.callout p { margin: 0; }
.callout.warn { border-color: var(--coral); background: linear-gradient(180deg, rgba(255, 111, 94, .1), rgba(255, 111, 94, .04)), var(--panel); }
.facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.facts li { position: relative; padding-left: 28px; }
.facts li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 10px; height: 10px; border-radius: 3px; background: var(--text-2); transform: rotate(45deg); }
.tbl-scroll { overflow-x: auto; margin: 16px 0 8px; border-radius: 18px; border: 2px solid var(--line); }
.tbl { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--panel); font-size: 17px; }
.tbl th, .tbl td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font: 800 1rem/1.3 var(--display); color: var(--text-2); background: var(--panel-2); }
.tbl tr:last-child td { border-bottom: 0; }
.recap { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.recap li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 2px solid var(--line); }
.recap li::before { content: "✓"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: var(--ink); font: 800 1.05rem/1 var(--display); }

/* ---------- footer ---------- */
.sources { margin-top: 88px; padding: 32px 0 72px; border-top: 2px solid var(--line); color: var(--text-2); }
.sources h2 { font-size: 1.5rem; margin: 0 0 10px; }
.sources ul { padding-left: 1.2em; display: grid; gap: 6px; }
.sources .toplink { margin-top: 18px; }

/* ---------- small screens ---------- */
@media (max-width: 520px) {
  html { font-size: 17px; }
  .wrap { padding: 0 16px; }
  .kicker { margin-top: 28px; }
  .fig { padding: 10px; border-radius: 20px; margin: 24px 0 28px; }
  .cap { padding: 12px; margin-top: 10px; }
  .cap li, .cap .idle { grid-template-columns: 34px 1fr; column-gap: 10px; font-size: 1rem; }
  .cap li::before, .cap .idle::before { width: 34px; height: 34px; font-size: .95rem; }
  .cap li > span, .cap .idle > span { padding-top: 4px; }
  .js .bar { gap: 6px; margin-top: 10px; }
  .bar button { height: 44px; }
  .bar .ic { width: 42px; }
  .bar .play { width: 98px; gap: 6px; }
  .bar .play .lbl { width: 3.9em; }
  .bar .prog { display: none; }
  .bar .count { flex: 1 1 auto; width: auto; min-width: 0; font-size: .95rem; }
  .part { padding: 22px 18px 20px; margin-top: 64px; }
  .term { grid-template-columns: 52px 1fr; padding: 14px; }
  .term svg { width: 52px; height: 46px; }
  .anat { padding: 12px; }
  .anat-code { font-size: 14px; padding: 12px; }
  .anat-notes li { grid-template-columns: 40px 1fr; padding: 12px; }
  .anat-notes .pic, .anat-notes .pic svg { width: 40px; height: 40px; }
  .callout { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .callout svg { width: 48px; height: 48px; }
  .code pre { font-size: 14px; padding: 14px; }
  .ch-num { width: 44px; height: 44px; font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}