/* THE CHAPTER SHELL — everything five chapters share.
 * ===========================================================================
 * Extracted when chapters four and five were built, because the alternative was a
 * fourth and fifth copy of two hundred identical lines. This repo has already paid
 * for duplicated presentation once: the "putting it together" recaps were copied
 * between chapters and then hand-fitted to one chart, and every copy had to be found
 * and fixed separately. Shared structure is how that stops being possible.
 *
 * What lives here: the palette, the reveal system, the chapter nav and progress rail,
 * the hero, the primer, the roadmap, the step heads, the thread bridges, the "in
 * short"/"putting it together" blocks, and every responsive tier.
 * What does NOT: anything a single system draws — the 五格 grids, the letter tiles,
 * the sky wheel, the twelve-animal ring. Those stay in their own chapter.
 *
 * --sys is the accent, set per chapter (:root override) — wood for the name, water for
 * BaZi, and so on. Everything else reads from it.
 *
 * NOTE: chapters one to three still inline their own copy of these rules. They are
 * identical to what is here (this file was extracted from chapter three) and should be
 * migrated to link this instead; not done in the same pass that added two chapters,
 * because breaking three working pages to tidy a fourth is a bad trade. */

:root{
  --bg0:#0b0b18; --text:#F5F0EB; --dim:#a9a4be; --faint:#8580a0;
  --gold:#C4A265; --gold-b:#e2c890;
  --wood:#5aa46c; --fire:#e35235; --earth:#e0b04e; --metal:#dfe6f2; --water:#4a86d8;
  --ji:#3fa876; --xiong:#D4903A;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --zhs:'Noto Serif TC',serif; --mono:'IBM Plex Mono',monospace;
  --card:rgba(255,255,255,.035); --card-br:rgba(255,255,255,.09);
  --hairline:rgba(196,162,101,.25); --ease:cubic-bezier(.2,.7,.3,1);
  --sys:var(--wood);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg0);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;
  line-height:1.55;padding-bottom:100px;overflow-x:hidden}
.note,.chapnav,.page,.readbar{position:relative;z-index:2}
.chapnav{z-index:40}
.readbar{z-index:60}
.wrap{max-width:600px;margin:0 auto;padding:0 20px}
.note{background:linear-gradient(180deg,rgba(196,162,101,.14),rgba(196,162,101,.05));
  border-bottom:1px solid var(--hairline);padding:13px 20px;font-size:12.5px;color:var(--gold-b)}
.note b{color:var(--text)}
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-r="zoom"]{transform:scale(.9)}
[data-reveal][data-r="zoom"].in{transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}*{animation:none!important}}
.shead{display:flex;gap:14px;align-items:flex-start;margin:56px 0 0;padding-top:24px;border-top:1px solid var(--card-br)}
.shead .ico{width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--hairline);background:rgba(196,162,101,.08);transition:transform .4s var(--ease),background .3s}
.shead:hover .ico{transform:translateY(-3px) scale(1.05);background:rgba(196,162,101,.15)}
.shead .ico svg{width:22px;height:22px;stroke:var(--gold-b);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shead .step{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.shead h2{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.01em;line-height:1.15;margin-top:3px}
.shead h2 .zh{font-family:var(--zhs);font-size:16px;color:var(--faint);margin-left:9px;font-weight:600}
.slede{color:var(--dim);font-size:14.5px;margin:10px 0 20px}
.thread{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:14px 16px;
  border-left:2px solid var(--gold);background:rgba(196,162,101,.05);border-radius:0 12px 12px 0}
.thread .ar{color:var(--gold);font-size:15px;flex:0 0 auto}
.thread p{font-size:14px;color:var(--dim);line-height:1.6}
.thread b{color:var(--text)}
.chapnav{position:sticky;top:0;background:rgba(11,11,24,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--card-br);padding:10px 20px}
.cn{max-width:600px;margin:0 auto;display:flex;align-items:center;gap:8px}
.cdot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:var(--zhs);
  font-size:13px;background:rgba(255,255,255,.05);color:var(--faint);text-decoration:none;
  transition:transform .25s var(--ease),background .25s,color .25s}
.cdot:hover{transform:translateY(-2px) scale(1.06);color:var(--text)}
.cdot.now{background:var(--sys);color:#0b0b18;font-weight:700}
.cprog{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.cprog b{color:var(--gold-b);font-weight:500}
.readbar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--sys),var(--gold-b));width:0;transition:width .12s linear}
.chero{padding:54px 0 30px;text-align:center}
.chero .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--faint);text-transform:uppercase}
.chero .zh{font-family:var(--zhs);font-size:76px;font-weight:700;line-height:1;margin:16px 0 6px;
  background:linear-gradient(180deg,var(--sys),color-mix(in srgb,var(--sys) 30%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.chero h1{font-family:var(--serif);font-size:34px;font-weight:600}
.chero .say{font-family:var(--serif);font-size:21px;line-height:1.4;color:var(--gold-b);margin:20px auto 0;max-width:440px;font-style:italic}
.primer{border:1px solid rgba(196,162,101,.22);background:rgba(196,162,101,.06);border-radius:16px;padding:18px 20px;margin-top:26px}
.primer .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.primer p{font-size:14.5px;color:var(--dim);line-height:1.65}
.primer p+p{margin-top:9px}
.primer b{color:var(--text)}
.roadmap{margin-top:24px;border:1px solid var(--card-br);background:var(--card);border-radius:18px;padding:20px}
.roadmap .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.rstep{display:flex;gap:12px;align-items:center;padding:9px 0;text-decoration:none;color:inherit;border-radius:10px;transition:transform .25s var(--ease)}
.rstep:hover{transform:translateX(5px)}
.rstep .n{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;font-family:var(--mono);font-size:11px;background:rgba(255,255,255,.06);color:var(--faint)}
.rstep .q{font-size:14.5px;color:var(--text);font-weight:500}
.rstep .q em{font-style:normal;color:var(--faint);font-weight:400;font-size:13px;display:block;margin-top:1px}
/* ── the characters and their strokes ────────────────────────────── */
.chars{display:flex;gap:12px;justify-content:center;margin-top:8px;flex-wrap:wrap}
/* ── THE DERIVATION — the signature diagram ──────────────────────── */
.deriv{margin-top:8px;border:1px solid var(--card-br);background:var(--card);border-radius:18px;padding:22px}
.drow{display:grid;grid-template-columns:78px 1fr 66px;align-items:center;gap:14px;padding:11px 0;
  border-top:1px solid var(--card-br)}
.drow:first-of-type{border-top:0}
.drow .nm{font-family:var(--zhs);font-size:15px;font-weight:600}
.drow .nm small{display:block;font-family:var(--sans);font-size:11px;color:var(--faint);font-weight:400;margin-top:2px}
.drow .calc{font-family:var(--mono);font-size:13px;color:var(--dim);text-align:center}
.drow .calc b{color:var(--text);font-weight:500}
.drow .res{text-align:right;font-family:var(--mono);font-size:22px;font-weight:500}
.drow.ji .res{color:var(--ji)}
.drow.xiong .res{color:var(--xiong)}
.drow .res small{display:block;font-family:var(--zhs);font-size:11px;margin-top:2px}
.dcap{font-size:12.5px;color:var(--faint);margin-top:14px;line-height:1.6;text-align:center}
.dcap b{color:var(--gold-b)}
/* ── grid cards ──────────────────────────────────────────────────── */
.grids{display:grid;gap:10px;margin-top:8px}
/* ── 三才 — the interactions, never shown before ─────────────────── */
.san{display:grid;gap:10px;margin-top:8px}
.means{margin-top:10px}
.mlead{border:1px solid rgba(196,162,101,.3);border-radius:20px;padding:24px;
  background:linear-gradient(180deg,rgba(196,162,101,.11),rgba(196,162,101,.02))}
.mlead .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mlead p{font-size:16px;color:var(--text);line-height:1.68;margin-top:10px}
.mblk{border:1px solid var(--card-br);background:var(--card);border-radius:16px;padding:19px 21px;margin-top:11px;
  transition:transform .3s var(--ease),border-color .3s}
.mblk:hover{transform:translateY(-3px);border-color:var(--hairline)}
.mblk h4{font-size:16px;font-weight:700;display:flex;gap:10px;align-items:baseline}
.mblk h4 em{font-family:var(--mono);font-style:normal;font-size:10.5px;color:var(--faint);border:1px solid var(--card-br);border-radius:100px;padding:2px 8px;white-space:nowrap}
.mblk p{font-size:14.5px;color:var(--dim);margin-top:8px;line-height:1.68}
.together{margin-top:14px;border:1px solid rgba(196,162,101,.32);border-radius:20px;padding:24px;
  background:linear-gradient(180deg,rgba(196,162,101,.1),rgba(196,162,101,.02))}
.together .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.together ol{margin:14px 0 0;padding-left:0;list-style:none;counter-reset:t}
.together li{counter-increment:t;position:relative;padding-left:34px;margin-bottom:13px;font-size:14.5px;color:var(--dim);line-height:1.6}
.together li::before{content:counter(t);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;
  background:rgba(196,162,101,.16);color:var(--gold-b);display:grid;place-items:center;font-family:var(--mono);font-size:11px}
.together li b{color:var(--text)}
.together .fin{margin-top:16px;padding-top:15px;border-top:1px solid rgba(196,162,101,.22);font-size:15px;color:var(--text);line-height:1.62}
.next{margin-top:50px;border:1px solid var(--card-br);background:var(--card);border-radius:18px;padding:20px;
  display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;transition:transform .3s var(--ease),border-color .3s}
.next:hover{border-color:var(--hairline);transform:translateY(-3px)}
.next .g{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-family:var(--zhs);font-size:21px;
  font-weight:700;background:var(--metal);color:#0b0b18;flex:0 0 auto;transition:transform .35s var(--ease)}
.next:hover .g{transform:scale(1.09) rotate(4deg)}
.next .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.next .t{font-size:16px;font-weight:700;margin-top:3px}
.next .ar{margin-left:auto;color:var(--gold);font-size:19px;transition:transform .3s var(--ease)}
.next:hover .ar{transform:translateX(5px)}
/* ── THE KEEPSAKE — a gift, and never mistaken for the reading ────
   Founder, 2026-09-02: "I dont think its appropriate to display at the top since the name
   is suggested by the system and not their true name."
   Exactly the spec's own conclusion (skill-spec-name-analysis.md §6.1): the gift block
   CLOSES the chapter, is visually distinct, and carries mandatory boundary copy. It is
   deliberately styled unlike every other card here — gold rather than system-green,
   bordered rather than filled — so it cannot be skim-read as part of the analysis. */
.gift{margin-top:44px;border:1px solid rgba(196,162,101,.45);border-radius:22px;padding:0;
  overflow:hidden;background:linear-gradient(180deg,rgba(196,162,101,.09),rgba(196,162,101,.02))}
/* ── PATH B — the Western name reading ───────────────────────────── */
/* Step 1 letters. The vowel/consonant split is not decoration: it is the whole
   reason one name yields more than one number. Soul Urge reads only the gold
   tiles, Personality only the plain ones — so the colouring teaches the
   arithmetic before any prose has to explain it. */
.letters{display:grid;gap:26px;margin-top:16px}
@media (max-width:520px){
  /* No flex-grow. With it, SARAH's five tiles stretched to 61px while WHITFIELD's
     nine sat at 49px, and a short last row would have blown up to full width — the
     tiles are a measuring device, so they have to stay the same size as each other. */
  .lt{flex:0 0 auto;min-width:44px;padding:9px 5px 8px}
  .lt .c{font-size:21px} .lt .n{font-size:13px}
  .lgrid{gap:6px}
}
footer{margin-top:36px;font-size:12.5px;color:var(--faint);text-align:center}
@media (min-width:768px) and (max-width:1039px){
  .wrap{max-width:760px}
  .roadmap{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px} .roadmap .k{grid-column:1/-1}
  .chero .zh{font-size:92px} .chero h1{font-size:38px}
}
@media (min-width:1040px){
  body{padding-bottom:120px}
  .page{display:block;padding:0 28px}
  .wrap{max-width:680px;margin:0 auto;padding:0}
  .rail{position:fixed;right:34px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;z-index:3}
  .rail .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
    white-space:nowrap;margin-bottom:14px;align-self:flex-end;text-align:right}
  .rail .k b{color:var(--gold-b);font-weight:500}
  .rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;height:34px;text-decoration:none}
  .rail a .n{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);flex:0 0 auto;font-size:0;color:transparent;
    position:relative;z-index:1;transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s}
  .rail a::before{content:"";position:absolute;right:4px;top:0;width:1px;height:100%;background:var(--card-br)}
  .rail a:first-of-type::before{top:50%;height:50%} .rail a:last-of-type::before{height:50%}
  .rail a.done .n{background:rgba(196,162,101,.5)}
  .rail a.on .n{background:var(--gold-b);transform:scale(1.35);box-shadow:0 0 0 5px rgba(196,162,101,.14)}
  .rail a span:last-child{order:-1;margin-right:13px;white-space:nowrap;font-size:12.5px;text-align:right;color:var(--faint);
    opacity:0;transform:translateX(5px);transition:opacity .25s,transform .25s var(--ease),color .25s}
  .rail a:hover span:last-child{opacity:.85;transform:none;color:var(--dim)}
  .rail a.on span:last-child{opacity:1;transform:none;color:var(--gold-b);font-weight:500}
  .breakout,.roadmap{width:calc(100% + 64px);margin-left:-32px}
  .roadmap{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;padding:24px 28px} .roadmap .k{grid-column:1/-1}
  .chero{padding:74px 0 34px} .chero .zh{font-size:100px} .chero h1{font-size:40px} .chero .say{font-size:22px;max-width:500px}
  .shead h2{font-size:30px} .primer{padding:24px 28px} .primer p{font-size:15px}
  .mlead p{font-size:17px} .together{padding:28px 32px}
}
@media (min-width:1040px) and (max-width:1279px){ .rail a span:last-child{display:none} .rail{right:22px} }
@media (min-width:1400px){
  .wrap{max-width:720px} .rail{right:48px}
  .breakout,.roadmap{width:calc(100% + 150px);margin-left:-75px}
}
@media (max-width:1039px){ .rail{display:none} }

/* The breakout is opt-in: add `breakout` to any block that should widen past the
   reading column on large screens. Chapter three learned this the hard way — an
   asymmetric breakout (margin-left:-150px against width:calc(100% + 150px)) pulled
   four blocks 75px off-centre while the column itself measured true, so the page
   looked broken in a way that measuring the wrong element hid. Both halves match. */

/* ── FOCUS, DESIGNED ─────────────────────────────────────────────────────────
   The browser's default indicator is a thick blue-and-white rounded box. On a round
   chip or a chapter link it reads as a rendering fault rather than as a state — the
   founder screenshotted one and called it ugly, which it is. Removing focus styling
   outright is not the alternative: a keyboard user would have no idea where they are.
   These replace it in the page's own language, and only on :focus-visible, so a mouse
   click shows nothing and tabbing shows a real indicator. */
.cdot:focus,.rstep:focus,.next:focus{outline:none}
.cdot:focus-visible{outline:2px solid var(--gold-b);outline-offset:3px;border-radius:9px}
.rstep:focus-visible,.next:focus-visible{outline:2px solid var(--gold-b);outline-offset:2px;border-radius:12px}

/* INPUT MODALITY, TRACKED EXPLICITLY. :focus-visible is the right idea and it is not
   enough on its own here: it does not reliably match on a focusable SVG <g>, and the
   failure mode is the bad one — a keyboard user with no indicator at all, which is
   worse than the ugly box this replaced. So a `kbd` class goes on <html> the moment a
   navigation key is pressed and comes off on any pointer press, and the designed rings
   key off either signal. Belt and braces, because one of them is silent when it fails. */
/* Measured 2026-09-02: on a focusable SVG <g>, document.activeElement becomes the group
   and NOTHING else works — `g.matches(':focus')` is false, no focus or focusin event
   fires, and the browser paints its own indicator regardless. So SVG shapes are no
   longer used as controls anywhere; real buttons carry the interaction, and these rules
   only have to cover real elements. */
html.kbd .cdot:focus{outline:2px solid var(--gold-b);outline-offset:3px;border-radius:9px}
html.kbd .rstep:focus,html.kbd .next:focus,html.kbd .krow:focus{
  outline:2px solid var(--gold-b);outline-offset:2px;border-radius:12px}

/* The hidden attribute loses to any author display rule (grid, flex, block). Every page
   that hides something with it means hidden, so make it win everywhere. */
[hidden]{display:none!important}