/* ── page-specific styles (per site convention) ───────────────────────
   Pulls global tokens from css/site.css; declares only page-local aliases
   (the status colours, which have no global token). v2.0: the page is a
   GATED JOURNEY — chapter locking, the journey rail, the line-by-line
   first cast, the live ribbon and the tamper toy all live here. */
    .narrow { max-width: 720px; margin: 0 auto; }

    /* The page's single .page-content wrapper (all sections live inside one
       <main>, so the shared .page-section + .page-section --section-gap rule
       owns the vertical rhythm). */
    .so-ctx .page-content { max-width: var(--max-w); padding: 2px 2rem 12px; }

    /* Section labels are page-defined on this site (see iching.html). Centred to
       match the other pages; AA-tuned --gold-ink for small text on the dark ground. */
    .section-label {
      display: block; text-align: center; font-family: var(--sans); font-size: var(--text-xs);
      letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
      color: var(--gold-ink); margin-bottom: var(--space-2);
    }

    /* Local hexagram ink (yang is near-black on parchment) + status colours.
       --so-ok / --so-warn are the only page-local colours: no global token
       exists for success/error text on the dark ground. */
    .so-stack { --yang: var(--card-dark); }
    .so-ctx { --so-ok: #7fd79a; --so-warn: #e79a92; }

    /* ══ The journey rail — the shape of the path, lit as it unlocks ══ */
    .so-rail {
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
      gap: 2px 4px; max-width: 760px; margin: 1.2rem auto .4rem; padding: 0 .5rem;
    }
    .so-rail-item {
      font-family: var(--sans); font-size: .6rem; font-weight: 600;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--ink-muted); background: none; border: none; border-radius: 999px;
      padding: 6px 9px; cursor: pointer; white-space: nowrap;
      transition: color var(--ease), opacity var(--ease);
    }
    .so-rail-item:hover:not(:disabled) { color: var(--gold-ink); }
    .so-rail-item[aria-current="true"] { color: var(--gold); }
    .so-rail-item:disabled { opacity: .32; cursor: default; }
    .so-rail-sep { color: var(--ink-muted); opacity: .4; font-size: .55rem; }
    @media (max-width: 560px) { .so-rail-item { padding: 5px 6px; letter-spacing: .08em; } }

    /* ══ Chapter locking ══
       A locked chapter shows its dim heading (with an amber lock-dot) and
       nothing else; the body is collapsed + inert (set by JS). Unlocking
       removes .so-locked and adds .section-open — the shared grid-rows
       unfurl in site.css does the reveal. */
    .so-chapter.so-locked > .section-toggle { opacity: .35; cursor: default; }
    .so-chapter.so-locked > .section-toggle .section-chev { visibility: hidden; }
    .so-lockdot {
      width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
      background: var(--so-warn); opacity: .8; display: none;
    }
    .so-chapter.so-locked > .section-toggle .so-lockdot { display: inline-block; }

    /* ── Threshold ── */
    .so-lede { font-size: var(--text-md); line-height: 1.75; }
    .so-topnote {
      display: flex; align-items: flex-start; gap: var(--space-2);
      max-width: 720px; margin: var(--space-4) auto;
      background: var(--surface); border: 1px solid var(--rule-strong);
      border-radius: var(--r-md); padding: var(--space-2) var(--space-3);
      color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.5;
    }
    .so-topnote .so-topnote-mark { color: var(--so-warn); font-style: normal; flex: 0 0 auto; }
    .so-topnote a { color: var(--gold-ink); }
    .so-skips { text-align: center; margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--text-sm); }
    .so-quiet {
      background: none; border: none; padding: 2px 4px; cursor: pointer;
      font-family: var(--sans); font-size: var(--text-sm); color: var(--gold-ink);
      border-bottom: 1px solid transparent; transition: color var(--ease), border-color var(--ease);
    }
    .so-quiet:hover, .so-quiet:focus-visible { color: var(--gold); border-bottom-color: currentColor; }

    /* ── I · One line, one coin ── */
    .so-line-stage {
      display: flex; align-items: center; justify-content: center; gap: var(--space-6);
      flex-wrap: wrap; margin-top: var(--space-4);
    }
    .so-line-fig {
      flex: 0 0 auto; min-width: 120px; min-height: 150px;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid #e3d8c4; border-radius: var(--r-md);
      padding: var(--space-4) var(--space-5);
      background:
        linear-gradient(165deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
        linear-gradient(165deg, rgba(120,90,40,0) 62%, rgba(120,90,40,.07)),
        var(--card-paper);
      box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45);
      --yang: var(--card-dark);
    }
    .so-line-side { flex: 0 1 260px; }
    .so-line-bits { display: flex; gap: 4px; min-height: 26px; }
    .so-line-bit {
      width: 22px; height: 26px; display: flex; align-items: center; justify-content: center;
      font-family: var(--mono); font-size: .78rem; color: var(--gold-ink);
      background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
    }
    .so-line-bit.is-empty { color: transparent; border-style: dashed; opacity: .5; }
    .so-line-done { margin-top: var(--space-4); }

    /* ── II · stack — 22 slots, filled as cast ── */
    .so-stack {
      display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
      max-width: 440px; margin: var(--space-4) auto;
    }
    .so-hex {
      border: 1px solid #e3d8c4;
      border-radius: var(--r-md); padding: var(--space-3) var(--space-2) var(--space-2);
      text-align: center;
      background:
        linear-gradient(165deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
        linear-gradient(165deg, rgba(120,90,40,0) 62%, rgba(120,90,40,.07)),
        var(--card-paper);
      box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45);
    }
    #soStack .so-cell { width: 54px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
    #soStack .so-ord { font-size: var(--text-xs); color: var(--ink-muted); letter-spacing: .04em; margin-bottom: 3px; }
    #soStack .so-hex {
      width: 100%; box-sizing: border-box; aspect-ratio: 1;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      border-radius: var(--r-sm); padding: 5px 3px; cursor: pointer;
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    #soStack .so-hex:hover {
      border-color: var(--gold); transform: translateY(-2px);
      box-shadow: 0 0 0 1px var(--gold), 0 7px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.5);
    }
    @media (prefers-reduced-motion: reduce) {
      #soStack .so-hex { transition: box-shadow var(--ease), border-color var(--ease); }
      #soStack .so-hex:hover { transform: none; }
    }
    /* Empty slot — not yet cast: bare dashed outline on the night ground */
    #soStack .so-hex.is-slot {
      background: none; box-shadow: none; border-style: dashed; border-color: var(--rule-strong);
      cursor: default;
    }
    #soStack .so-hex.is-slot:hover { border-color: var(--rule-strong); transform: none; box-shadow: none; }
    /* The 22nd — the seal slot: parchment ghosted, waiting for chapters IV–V */
    #soStack .so-hex.is-seal-slot { opacity: .55; cursor: default; }
    #soStack .so-hex.is-seal-slot:hover { border-color: #e3d8c4; transform: none;
      box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45); }
    #soStack .so-hex.is-seal-slot.is-ready { opacity: .85; cursor: pointer; }
    #soStack .so-hex.is-seal-slot.is-ready:hover { border-color: var(--gold); }
    /* The sealed 22nd tile: bottom two lines gold (yours), top four amber (the seal).
       hexagramSVG tags each rect with data-line (0 = bottom … 5 = top); CSS wins
       over the SVG fill presentation attribute. */
    #soStack .so-hex.is-sealed svg rect[data-line="0"],
    #soStack .so-hex.is-sealed svg rect[data-line="1"] { fill: var(--gold); }
    #soStack .so-hex.is-sealed svg rect[data-line="2"],
    #soStack .so-hex.is-sealed svg rect[data-line="3"],
    #soStack .so-hex.is-sealed svg rect[data-line="4"],
    #soStack .so-hex.is-sealed svg rect[data-line="5"] { fill: #a5702e; }
    .so-hex svg { display: block; margin: 3px auto 0; }
    .so-hex .so-hex-name { font-family: var(--serif); color: var(--card-dark); font-size: var(--text-sm); line-height: 1.25; }
    .so-hex .so-hex-kw { color: #8a7d60; font-size: var(--text-xs); margin-top: 2px; }

    .so-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin: var(--space-4) 0; }

    /* ── III · the weave — live ribbon (partial while casting) ── */
    .so-ribbon {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: var(--space-3) var(--space-4);
      margin-top: var(--space-4);
    }
    .so-word-group { display: flex; flex-direction: column; gap: 3px; }
    .so-word-label {
      font-family: var(--mono); font-size: var(--text-xs);
      color: var(--gold-ink); letter-spacing: .03em; min-height: 1em;
    }
    .so-word-label.is-starving { color: var(--ink-muted); font-style: italic; }
    .so-bit-row { display: flex; gap: 2px; }
    .so-bit {
      width: 16px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--mono); font-size: .68rem; color: var(--ink-muted);
      background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
    }
    .so-bit.alt { background: var(--surface-alt); }
    .so-bit.is-cs { color: var(--so-warn); border-color: var(--so-warn); background: rgba(231,154,146,.08); }
    .so-bit.is-free { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; color: var(--gold-ink); }
    .so-bit.is-empty { color: transparent; border-style: dashed; background: none; opacity: .55; }
    /* ribbon ↔ stack linkage: hovering one lights the other */
    .so-bit.is-lit { border-color: var(--gold); background: rgba(197,160,89,.12); }
    #soStack .so-hex.is-lit { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), inset 0 1px 0 rgba(255,255,255,.5); }
    /* tamper mode: cells become pressable; the flipped cell + broken seal marked */
    .so-ribbon.is-tamper .so-bit { cursor: pointer; }
    .so-ribbon.is-tamper .so-bit:hover { border-color: var(--gold); }
    .so-bit.is-flip { border-color: var(--so-warn); box-shadow: 0 0 0 1px var(--so-warn) inset; color: var(--so-warn); background: rgba(231,154,146,.16); }
    .so-bit.is-bad { background: rgba(231,154,146,.28); color: #fff; }
    .so-ribbon-key { flex-basis: 100%; text-align: center; margin-top: var(--space-2); }
    .so-ribbon-key .so-key-free { color: var(--gold-ink); }
    .so-ribbon-key .so-key-cs { color: var(--so-warn); }
    .so-key-free { color: var(--gold-ink); }
    .so-key-cs { color: var(--so-warn); }
    @media (max-width: 560px) {
      .so-bit { width: 12px; height: 16px; font-size: .56rem; border-radius: 2px; }
      .so-ribbon { gap: var(--space-2) var(--space-3); }
    }

    /* ── IV · the seal — ledger + final-hexagram diagram + tamper ── */
    .so-ledger {
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
      gap: 4px 10px; margin: var(--space-4) auto;
      font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-muted);
      letter-spacing: .04em;
    }
    .so-ledger-op { color: var(--gold-ink); opacity: .7; }
    .so-ledger-free { color: var(--gold-ink); }
    .so-ledger-cs { color: var(--so-warn); }
    .so-seal-figwrap {
      display: flex; align-items: center; justify-content: center; gap: var(--space-5);
      flex-wrap: wrap; margin: var(--space-4) 0;
    }
    .so-seal-fig {
      flex: 0 0 auto;
      border: 1px solid #e3d8c4; border-radius: var(--r-md);
      padding: var(--space-4) var(--space-5);
      background:
        linear-gradient(165deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
        linear-gradient(165deg, rgba(120,90,40,0) 62%, rgba(120,90,40,.07)),
        var(--card-paper);
      box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45);
    }
    .so-seal-figcap { flex: 0 1 300px; }
    /* slot-hexagram line classes (drawn by slotHexSVG in js/seedoracle.js) —
       global to the page: the seal diagram, the locked 22nd tile, and the
       chapter-I line-by-line figure all use them. */
    .so-ctx svg .so-l-free { fill: var(--gold); }
    .so-ctx svg .so-l-cs { fill: #a5702e; }
    .so-ctx svg .so-l-slot { fill: none; stroke: var(--rule-strong); stroke-dasharray: 4 3; }
    .so-ctx svg .so-l-slot-free { fill: none; stroke: var(--gold); stroke-dasharray: 4 3; }
    .so-ctx svg .so-l-slot-cs { fill: none; stroke: #a5702e; stroke-dasharray: 4 3; }
    /* inside the parchment line-caster/seal tiles the plain slots read warm */
    .so-line-fig svg .so-l-slot, #soStack .so-hex svg .so-l-slot { stroke: #cbbfa4; }

    /* ── V · suit cards + phrase reveal ── */
    .so-fh-opts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--space-2); justify-content: center; }
    .so-fh-opt { font: inherit; width: 122px; box-sizing: border-box; cursor: pointer;
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); }
    .so-fh-opt:hover { border-color: var(--gold); transform: translateY(-2px);
      box-shadow: 0 0 0 1px var(--gold), 0 7px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.5); }
    .so-fh-opt.is-cur { box-shadow: 0 0 0 2px var(--gold), inset 0 1px 0 rgba(255,255,255,.5); }
    @media (prefers-reduced-motion: reduce) { .so-fh-opt:hover { transform: none; } }
    .so-fw-count { color: var(--ink-muted); font-size: var(--text-sm); margin-bottom: var(--space-2); }
    .so-fw-count.warn { color: var(--so-warn); }
    /* the two lines a suit sets, drawn small above the pip */
    .so-suit-lines { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; align-items: center; }
    .so-suit-lines .so-sl-row { display: flex; gap: 3px; }
    .so-suit-lines i { display: block; height: 3px; border-radius: 1px; background: currentColor; }
    .so-suit-lines .so-sl-yang { width: 22px; }
    .so-suit-lines .so-sl-yin { width: 9px; }
    .so-suit { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 5px; }
    .so-suit-pip { font-size: 26px; line-height: 1; display: inline-flex; }
    .so-suit-pip .pip-svg { width: 1em; height: 1em; }
    .so-suit-pip .pip-uni { font-size: 1em; line-height: 1; }
    .so-suit-name { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; letter-spacing: .02em; }
    .so-fh-opt.suit-red  { --suit: var(--red); }
    .so-fh-opt.suit-dark { --suit: var(--card-dark); }
    .so-fh-opt.suit-red  .so-suit-pip, .so-fh-opt.suit-red  .so-suit-name, .so-fh-opt.suit-red  .so-suit-lines { color: var(--red); }
    .so-fh-opt.suit-dark .so-suit-pip, .so-fh-opt.suit-dark .so-suit-name, .so-fh-opt.suit-dark .so-suit-lines { color: var(--card-dark); }

    /* the tucked length chips (the 24·44 footnote) */
    .so-len { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
    .so-len .so-len-tuck { opacity: .5; font-size: .68rem; padding: 3px 10px; }
    .so-len .so-len-tuck[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--gold) inset; color: var(--gold-ink); }
    .so-len-note { margin-top: var(--space-6); }

    /* Mnemonic panel (the phrase reveal) */
    .so-phrase-reveal { margin-top: var(--space-5); }
    .so-phrase-wrap { position: relative; margin-bottom: var(--space-2); }
    .so-phrase {
      width: 100%; min-height: 84px; resize: vertical;
      background: var(--surface); color: var(--text);
      border: 1px solid var(--border); border-radius: var(--r-md);
      padding: var(--space-3) var(--space-4); font-family: var(--mono);
      font-size: var(--text-md); line-height: 1.7; letter-spacing: .01em;
    }
    .so-status { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); }
    .so-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-muted); flex: 0 0 auto; }
    .so-status.valid .so-dot { background: var(--so-ok); box-shadow: 0 0 8px var(--so-ok); }
    .so-status.invalid .so-dot { background: var(--so-warn); }
    .so-status .msg { color: var(--ink-muted); }
    .so-status.valid .msg { color: var(--so-ok); }
    .so-status.invalid .msg { color: var(--so-warn); }

    /* the payoff cascade — fired once when the reading seals */
    @keyframes soSealIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .so-just-sealed #soStack .so-hex.is-sealed { animation: soSealIn .5s ease both; }
    .so-just-sealed .so-bit.is-cs,
    .so-just-sealed .so-bit.is-free { animation: soSealIn .45s ease both; animation-delay: .25s; }
    .so-just-sealed .so-word-group:last-child .so-word-label { animation: soSealIn .45s ease both; animation-delay: .5s; }
    .so-just-sealed .so-phrase-reveal { animation: soSealIn .55s ease both; animation-delay: .7s; }
    @media (prefers-reduced-motion: reduce) {
      .so-just-sealed #soStack .so-hex.is-sealed,
      .so-just-sealed .so-bit.is-cs, .so-just-sealed .so-bit.is-free,
      .so-just-sealed .so-word-group:last-child .so-word-label,
      .so-just-sealed .so-phrase-reveal { animation: none; }
    }

    /* ── VI · proof — entropy rows, SHA instrument ── */
    .so-ent-row { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
    .so-ent-row:first-child { border-top: none; }
    .so-ent-k { color: var(--ink-muted); font-size: var(--text-sm); min-width: 140px; }
    .so-ent-v { font-family: var(--mono); font-size: var(--text-sm); color: var(--gold-ink); word-break: break-all; flex: 1 1 240px; }
    .so-ent-v.so-ent-cs { color: var(--so-warn); }

    /* the SHA instrument (pared from the Calculator page's .sha block) */
    .so-sha { margin-top: var(--space-4); }
    .so-sha-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }
    .so-sha-input {
      flex: 1 1 220px; min-width: 0;
      background: var(--surface); color: var(--text);
      border: 1px solid var(--border); border-radius: var(--r-sm);
      padding: 9px 12px; font-family: var(--mono); font-size: var(--text-sm);
    }
    .so-sha-input:focus-visible { outline: none; border-color: var(--gold); }
    .so-sha-out { margin-top: var(--space-3); }
    .so-sha-out .so-sha-hl { color: var(--so-warn); font-weight: 600; }

    /* Geomancy CSS retired 2026-07-08 — see dev/retired/geomancy/geomancy.css.frag */


    /* "A curiosity, not a wallet" notice */
    .so-alert {
      background: var(--surface); border: 1px solid var(--rule-strong);
      border-radius: var(--r-md); padding: var(--space-3) var(--space-4);
      margin-bottom: var(--space-5);
    }
    .so-alert .so-alert-h {
      display: block; font-family: var(--serif); font-size: var(--text-md);
      color: var(--gold-ink); margin-bottom: 4px;
    }
    .so-alert p { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; margin: 0; }

    /* Collapsible prose (sub-folds inside chapters) */
    details.so-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .55rem; }
    details.so-fold > summary::-webkit-details-marker { display: none; }
    .page-section details.so-fold > summary .section-chev { transform: none; }
    .page-section details.so-fold[open] > summary .section-chev { transform: rotate(180deg); }
    details.so-fold > summary:hover .section-chev,
    details.so-fold > summary:focus-visible .section-chev { opacity: 1; }
    details.so-fold.so-fold-sec { margin-top: var(--space-6); }
    details.so-fold.so-fold-sec > summary {
      text-align: center; font-family: var(--sans); font-size: var(--text-xs); letter-spacing: .18em;
      text-transform: uppercase; font-weight: 600; color: var(--gold-ink); padding: 0 0 var(--space-3);
    }

    /* "By hand" explainer */
    .so-howto p { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.7; margin: 0 0 var(--space-3); }
    .so-howto .so-mono { font-family: var(--mono); color: var(--gold-ink); font-size: .82em; }
    .so-mono { font-family: var(--mono); color: var(--gold-ink); font-size: .88em; }

    .so-note { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; }
    .so-credit { color: var(--ink-muted); font-size: var(--text-xs); text-align: center; margin-top: var(--space-5); }
    .so-credit a { color: var(--gold-ink); }
    .so-seedout { word-break: break-all; font-family: var(--mono, monospace); font-size: var(--text-sm); color: var(--gold-ink); }

    /* Derived addresses (BIP44/49/84/86) */
    .so-addr-controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
    .so-addr-controls label { color: var(--ink-muted); font-size: var(--text-sm); }
    .so-addr-controls select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 10px; font-family: var(--sans); font-size: var(--text-sm); cursor: pointer; }
    .so-addr-out { margin-top: var(--space-2); }
    .so-addr-row { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
    .so-addr-row:first-of-type { border-top: none; }
    .so-addr-k { color: var(--ink-muted); font-size: var(--text-sm); min-width: 130px; }
    .so-addr-v { font-family: var(--mono); font-size: var(--text-sm); color: var(--gold-ink); word-break: break-all; flex: 1 1 240px; }
    .so-addr-out code { font-family: var(--mono); color: var(--gold-ink); }
    .so-addr-more { margin-top: var(--space-3); font-family: var(--sans); font-size: var(--text-sm);
      color: var(--gold-ink); background: none; border: none; padding: 4px 0; cursor: pointer;
      border-bottom: 1px solid transparent; transition: color var(--ease), border-color var(--ease); }
    .so-addr-more:hover { color: var(--gold); border-bottom-color: currentColor; }
    .so-addr-listhead { margin-top: var(--space-3); color: var(--ink-muted); font-size: var(--text-xs);
      letter-spacing: .04em; text-transform: uppercase; }
    .so-addr-list { margin-top: var(--space-2); display: flex; flex-direction: column; gap: 2px; }
    .so-addr-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
      font: inherit; background: none; border: 1px solid transparent; border-radius: var(--r-sm);
      padding: 6px 8px; cursor: pointer; transition: background var(--ease), border-color var(--ease); }
    .so-addr-item:hover { background: var(--surface); }
    .so-addr-item.is-sel { background: var(--surface); border-color: var(--gold); }
    .so-addr-idx { color: var(--ink-muted); font-family: var(--mono); font-size: var(--text-xs); min-width: 1.5em; text-align: right; }
    .so-addr-mono { font-family: var(--mono); font-size: var(--text-sm); color: var(--gold-ink); }
    .so-addr-nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
    .so-addr-pg { font-family: var(--mono); font-size: var(--text-sm); color: var(--gold-ink); background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--r-sm); min-height: 30px; padding: 0 10px; cursor: pointer;
      transition: border-color var(--ease), color var(--ease); }
    .so-addr-pg:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
    .so-addr-pg:disabled { opacity: .4; cursor: default; }
    .so-addr-range { font-family: var(--mono); font-size: var(--text-sm); color: var(--ink-muted); min-width: 6.5em; text-align: center; }
    .so-addr-jump { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: var(--text-sm); margin-left: auto; }
    .so-addr-jump input { width: 5.5em; background: var(--surface); color: var(--text); border: 1px solid var(--border);
      border-radius: var(--r-sm); padding: 5px 8px; font-family: var(--mono); font-size: var(--text-sm); }
    .so-addr-jump input:focus-visible { outline: none; border-color: var(--gold); }

    /* Final-word (checksum) calculator — the seal chapter's word-tongue twin */
    .so-fw-out { margin-top: var(--space-3); }
    .so-fw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .so-fw-chip {
      font-family: var(--mono); font-size: var(--text-sm); color: var(--text);
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: border-color var(--ease), color var(--ease);
    }
    .so-fw-chip:hover, .so-fw-chip:focus-visible { border-color: var(--gold); color: var(--gold-ink); }

    /* stat / counter lines */
    .so-geo-stat { margin-top: var(--space-2); font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-muted); }

    /* Hexagram detail popup — page-level bits site.css leaves to each page */
    .hx-overlay {
      display: none; position: fixed; inset: 0; z-index: 300;
      background: rgba(22,16,41,.52);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      align-items: center; justify-content: center; padding: 1rem;
    }
    .hx-popup { height: auto; }
    .hx-header { display: flex; gap: 1.25rem; align-items: flex-start; padding: 16px 28px 8px; }
    .hx-fig-svg { background: var(--card-paper); border: 1px solid var(--border); --yang: var(--card-dark); }
    .hx-name .hx-pin { font-size: 1rem; color: var(--ink-muted); font-style: italic; }
    .hx-body { flex: 1; overflow-y: auto; min-height: 0; padding: 2px 28px 22px; }
    .hx-judgment { font-family: var(--serif); font-size: 1.12rem; line-height: 1.7; color: var(--text); margin: 0; }

    .hidden { display: none !important; }