*, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, h4, h5, p, ol, ul, li, figure { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  img, svg { max-width: 100%; display: block; }
  button { font: inherit; color: inherit; }
  a { color: inherit; }
  p { text-wrap: pretty; }
  ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }

  :root {
    --brand:#0c056d; --brand-light:#1a0f9f; --brand-dark:#080342;
    --accent:#4f46e5; --accent-soft:#eef0ff;
    --success:#10b981; --success-soft:#e7f8f1;
    --warning:#b45309; --warning-soft:#fdf1e3;
    --info:#0e7490; --info-soft:#e3f5f9;
    --bg:#ffffff; --bg-mesh:#fafbff; --surface-1:#f9fafb; --surface-2:#f3f4f6; --card:#ffffff;
    --ink:#1a1a1a; --ink-soft:#4b5563; --muted:#6b7280; --border:#e5e7eb; --border-soft:#eef0f3;
    --radius:12px; --radius-sm:8px; --radius-lg:16px;
    --shadow-sm:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03);
    --shadow-md:0 4px 12px rgba(12,5,109,.08),0 1px 4px rgba(0,0,0,.04);
    --shadow-lg:0 12px 28px rgba(12,5,109,.12),0 4px 10px rgba(0,0,0,.06);
    --shadow-brand:0 8px 24px rgba(12,5,109,.28),0 2px 8px rgba(79,70,229,.18);
    --grad:linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    --sans:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --content-max:960px; --ease:cubic-bezier(.22,.65,.3,1); --ease-spring:cubic-bezier(.18,.9,.28,1.15);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --brand:#818cf8; --brand-light:#a5b4fc; --accent:#6366f1; --accent-soft:#1e1b3a;
      --success:#34d399; --success-soft:#10231c; --warning:#e0913f; --warning-soft:#2a2113; --info:#67d4e8; --info-soft:#0f262c;
      --bg:#0d0d11; --bg-mesh:#0d0d11; --surface-1:#16161c; --surface-2:#1c1c24; --card:#16161c;
      --ink:#f4f4f6; --ink-soft:#c3c7d1; --muted:#8b8f9c; --border:#292933; --border-soft:#22222b;
      --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 4px 12px rgba(0,0,0,.4);
      --shadow-lg:0 12px 28px rgba(0,0,0,.5); --shadow-brand:0 8px 24px rgba(99,102,241,.35);
      --grad:linear-gradient(135deg,#4f46e5 0%,#818cf8 100%);
    }
  }
  :root[data-theme="light"]{ --brand:#0c056d;--brand-light:#1a0f9f;--accent:#4f46e5;--accent-soft:#eef0ff;--success:#10b981;--success-soft:#e7f8f1;--warning:#b45309;--warning-soft:#fdf1e3;--info:#0e7490;--info-soft:#e3f5f9;--bg:#fff;--bg-mesh:#fafbff;--surface-1:#f9fafb;--surface-2:#f3f4f6;--card:#fff;--ink:#1a1a1a;--ink-soft:#4b5563;--muted:#6b7280;--border:#e5e7eb;--border-soft:#eef0f3;--shadow-md:0 4px 12px rgba(12,5,109,.08),0 1px 4px rgba(0,0,0,.04);--shadow-lg:0 12px 28px rgba(12,5,109,.12),0 4px 10px rgba(0,0,0,.06);--shadow-brand:0 8px 24px rgba(12,5,109,.28),0 2px 8px rgba(79,70,229,.18);--grad:linear-gradient(135deg,#0c056d 0%,#4f46e5 100%); }
  :root[data-theme="dark"]{ --brand:#818cf8;--brand-light:#a5b4fc;--accent:#6366f1;--accent-soft:#1e1b3a;--success:#34d399;--success-soft:#10231c;--warning:#e0913f;--warning-soft:#2a2113;--info:#67d4e8;--info-soft:#0f262c;--bg:#0d0d11;--bg-mesh:#0d0d11;--surface-1:#16161c;--surface-2:#1c1c24;--card:#16161c;--ink:#f4f4f6;--ink-soft:#c3c7d1;--muted:#8b8f9c;--border:#292933;--border-soft:#22222b;--shadow-md:0 4px 12px rgba(0,0,0,.4);--shadow-lg:0 12px 28px rgba(0,0,0,.5);--shadow-brand:0 8px 24px rgba(99,102,241,.35);--grad:linear-gradient(135deg,#4f46e5 0%,#818cf8 100%); }

  /* smooth only after load (guide.js adds .smooth-scroll): a smooth jump to a #link on load lands short of the target */
  html { -webkit-text-size-adjust: 100%; }
  html.smooth-scroll { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html, html.smooth-scroll { scroll-behavior: auto; } }
  body { background: var(--bg-mesh); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
  body::before { content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(at 15% 20%, rgba(12,5,109,.06) 0px, transparent 55%), radial-gradient(at 85% 8%, rgba(79,70,229,.07) 0px, transparent 50%), radial-gradient(at 90% 78%, rgba(12,5,109,.04) 0px, transparent 45%); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body::before{ background-image: radial-gradient(at 15% 20%, rgba(99,102,241,.10) 0px, transparent 55%), radial-gradient(at 85% 8%, rgba(129,140,248,.09) 0px, transparent 50%), radial-gradient(at 90% 78%, rgba(99,102,241,.06) 0px, transparent 45%);} }

  #progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--grad); z-index: 100; transition: width .12s linear; border-radius: 0 3px 3px 0; box-shadow: 0 0 10px rgba(79,70,229,.45); }

  .topbar { position: sticky; top: 0; z-index: 80; display: flex; align-items: center; gap: 14px; padding: 12px clamp(16px,4vw,32px); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: box-shadow .3s var(--ease), border-color .3s; }
  .topbar.scrolled { box-shadow: 0 8px 26px -14px rgba(12,5,109,.30); border-bottom-color: transparent; }
  .topbar .logo { height: 22px; width: auto; }
  .topbar .divider { width: 1px; height: 20px; background: var(--border); }
  .topbar .tb-label { font-size: 13px; font-weight: 600; color: var(--muted); }
  .topbar .spacer { flex: 1; }
  .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--ink-soft); cursor: pointer; font-size: 15px; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease-spring), color .2s, border-color .2s; }
  .theme-toggle:hover { transform: rotate(-18deg) scale(1.06); color: var(--accent); border-color: var(--accent); }
  .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .hero { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: clamp(48px,8vw,92px) clamp(20px,5vw,32px) clamp(28px,4vw,44px); }
  .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); margin-bottom: 24px; }
  .badge .vmark { width: 16px; height: 16px; }
  .hero h1 { font-weight: 800; font-size: clamp(34px,6.2vw,60px); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; margin: 0 0 20px; }
  .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  .hero .lede { font-size: clamp(16px,2.2vw,20px); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; margin: 0 0 30px; }
  .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
  .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--ink-soft); box-shadow: var(--shadow-sm); }
  .chip b { color: var(--brand); font-weight: 700; }
  .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

  .panels { display: grid; gap: 16px; margin-top: 34px; grid-template-columns: 1fr; }
  @media (min-width: 720px) { .panels { grid-template-columns: 1fr 1fr; } }
  .panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); }
  .panel h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
  .panel h3 .ico { width: 26px; height: 26px; border-radius: 8px; background: var(--grad); display: grid; place-items: center; color: #fff; font-size: 14px; box-shadow: 0 2px 8px rgba(12,5,109,.22); }
  .panel ol, .panel ul { display: grid; gap: 11px; }
  .panel li { display: flex; gap: 11px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
  .panel li .n { flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--accent-soft); color: var(--brand); font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
  .panel li .tick { flex: none; color: var(--success); font-weight: 800; margin-top: 1px; }

  .shell { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 8px clamp(20px,5vw,32px) 0; display: grid; gap: clamp(20px,4vw,56px); grid-template-columns: 1fr; }
  @media (min-width: 960px) { .shell { grid-template-columns: 250px minmax(0, var(--content-max)); justify-content: center; } }

  .rail { display: none; }
  @media (min-width: 960px) { .rail { display: block; position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 200px); padding: 16px 0; overflow-y: auto; overscroll-behavior: contain; } }
  .rail-group { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); font-weight: 600; margin: 14px 0 4px; padding-left: 2px; }
  .rail-group:first-child { margin-top: 0; }
  .rail a { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: baseline; padding: 4px 0; text-decoration: none; color: var(--muted); font-size: 13px; line-height: 1.35; transition: color .25s var(--ease), transform .25s var(--ease); }
  .rail a .rn { font-family: var(--mono); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); transition: color .25s; }
  .rail a:hover { color: var(--ink); transform: translateX(3px); }
  .rail a:hover .rn { color: var(--accent); }
  .rail li { position: relative; }
  .rail li.active a { color: var(--ink); font-weight: 600; }
  .rail li.active a .rn { color: var(--accent); }
  .rail li::before { content:""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 2px; background: var(--grad); border-radius: 2px; transform: scaleY(0); transform-origin: center; transition: transform .32s var(--ease-spring); }
  .rail li.active::before { transform: scaleY(1); }
  .rail::-webkit-scrollbar { width: 6px; }
  .rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .rail::-webkit-scrollbar-thumb:hover { background: var(--muted); }

  main { min-width: 0; padding-bottom: 48px; }

  .band { position: relative; overflow: hidden; margin: 8px 0 6px; padding: 26px; border-radius: var(--radius-lg); background: var(--grad); color: #fff; box-shadow: var(--shadow-brand); scroll-margin-top: 72px; }
  .stage + .band, .finish-wrap + .band { margin-top: 48px; }
  .band::before { content:""; position: absolute; inset: 0; background-image: radial-gradient(at 85% 15%, rgba(255,255,255,.14) 0, transparent 50%), radial-gradient(at 12% 95%, rgba(255,255,255,.08) 0, transparent 50%); pointer-events: none; }
  .band .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; margin-bottom: 8px; position: relative; }
  .band h2 { font-size: clamp(22px,3.6vw,30px); font-weight: 800; letter-spacing: -.015em; line-height: 1.12; margin-bottom: 8px; position: relative; text-wrap: balance; }
  .band p { font-size: 14.5px; line-height: 1.55; opacity: .93; margin: 0; max-width: 58ch; position: relative; }

  .stage { padding-top: 34px; scroll-margin-top: 72px; }
  .stage-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
  .stage-num { flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--card); color: var(--brand); border: 2px solid color-mix(in srgb, var(--brand) 30%, var(--border)); display: grid; place-items: center; font-size: 16px; font-weight: 800; box-shadow: var(--shadow-sm); font-variant-numeric: tabular-nums; transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
  .stage.is-active .stage-num { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }
  .stage-head .st-title { flex: 1; min-width: 0; }
  .stage-head h3 { font-size: clamp(20px,3.1vw,27px); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; margin-bottom: 7px; text-wrap: balance; }
  .stage-head p { color: var(--ink-soft); font-size: 15px; margin: 0; }
  .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .tag { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; }
  .tag.time { background: var(--surface-2); color: var(--muted); }
  .tag.once { background: var(--accent-soft); color: var(--brand); }
  .tag.optional { background: var(--success-soft); color: var(--success); }

  .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); transition: box-shadow .35s var(--ease), border-color .3s, transform .35s var(--ease); }
  .card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); transform: translateY(-2px); }
  .card + .card { margin-top: 16px; }

  .where { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--brand); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent); padding: 7px 13px; border-radius: 999px; margin-bottom: 16px; }
  .where svg { width: 14px; height: 14px; flex: none; }
  .where .sep { opacity: .5; font-weight: 400; }

  .card h4.sub { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }
  .lead-in { color: var(--ink-soft); font-size: 15px; margin-bottom: 14px; }

  .steps { display: grid; gap: 12px; margin: 4px 0 2px; counter-reset: s; }
  .steps > li { display: grid; grid-template-columns: 28px 1fr; gap: 13px; align-items: start; }
  .steps > li::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(12,5,109,.2); }
  .steps > li .sx { padding-top: 3px; font-size: 15px; color: var(--ink); line-height: 1.55; }
  .steps b { font-weight: 700; color: var(--ink); }
  .kbd { font-family: var(--mono); font-size: 12.5px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; color: var(--brand); white-space: nowrap; }

  .note { display: flex; gap: 11px; margin-top: 16px; padding: 13px 15px; border-radius: var(--radius); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
  .note .ic { flex: none; font-size: 15px; line-height: 1.5; }
  .note b, .note .lab { color: var(--ink); font-weight: 700; }
  .note.why { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent); }
  .note.tip { background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 22%, transparent); }
  .note.know { background: var(--surface-1); border: 1px solid var(--border); }
  .note.skip { background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 26%, transparent); }

  .subparts { display: grid; gap: 14px; margin-top: 4px; }
  .subpart { border-left: 3px solid transparent; border-image: var(--grad) 1; padding-left: 16px; }
  .subpart h5 { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
  .subpart p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
  .subpart .mini-where { font-family: var(--mono); font-size: 12px; color: var(--brand); margin-top: 4px; }

  /* ---- module tour cards (Part 4) ---- */
  .mod-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 22px 0 12px; }
  .mod-sub:first-child { margin-top: 4px; }
  .mod-grid { display: grid; gap: 13px; grid-template-columns: 1fr; }
  @media (min-width: 1280px) { .mod-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 560px) and (max-width: 1279.98px) { .mod-grid { grid-template-columns: 1fr 1fr; } }
  .mod-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 17px; box-shadow: var(--shadow-sm); transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s; }
  .mod-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
  .mod-card .mh { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
  .mod-card .mi { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); display: grid; place-items: center; font-size: 16px; flex: none; }
  .mod-card h5 { font-size: 15px; font-weight: 700; }
  .mod-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 9px; }
  .mod-card .mw { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--brand); }
  .mod-card .mw::before { content: "→"; opacity: .7; display: inline-block; transition: transform .3s var(--ease-spring); }
  .mod-card:hover .mw::before { transform: translateX(3px); }

  /* ---- plan comparison (Stage 2) ---- */
  .table-wrap { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); }
  .plan-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 420px; }
  .plan-table th, .plan-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
  .plan-table thead th { background: var(--surface-1); color: var(--brand); font-weight: 700; font-size: 12.5px; }
  .plan-table tbody th { font-weight: 600; color: var(--ink); }
  .plan-table td { color: var(--ink-soft); }
  .plan-table tr:last-child th, .plan-table tr:last-child td { border-bottom: none; }

  .finish-wrap { padding-top: 40px; scroll-margin-top: 72px; }
  .finish-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
  .finish-banner { background: var(--grad); color: #fff; padding: 26px; position: relative; overflow: hidden; }
  .finish-banner::before { content:""; position: absolute; inset: 0; background-image: radial-gradient(at 85% 20%, rgba(255,255,255,.12) 0, transparent 50%), radial-gradient(at 15% 90%, rgba(255,255,255,.08) 0, transparent 50%); }
  .finish-banner h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; position: relative; }
  .finish-banner p { font-size: 14.5px; opacity: .92; margin: 0; position: relative; }
  .checklist { padding: 8px; }
  .chk-group { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); font-weight: 600; padding: 14px 14px 6px; }
  .chk-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm); transition: background .2s; }
  .chk-row:hover { background: var(--surface-1); }
  .chk-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border); display: grid; place-items: center; color: transparent; font-size: 13px; cursor: pointer; transition: all .25s var(--ease-spring); user-select: none; }
  .chk-row.done .chk-box { background: var(--grad); border-color: transparent; color: #fff; }
  .chk-label { font-size: 14.5px; color: var(--ink); }
  .chk-row.done .chk-label { color: var(--muted); text-decoration: line-through; }
  .chk-tag { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .chk-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 14px; margin-top: 4px; border-top: 1px solid var(--border); }
  .chk-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
  .chk-note svg { width: 15px; height: 15px; flex: none; color: var(--brand); }
  .chk-reset { font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 14px; cursor: pointer; transition: all .2s var(--ease); white-space: nowrap; }
  .chk-reset:hover { background: var(--surface-1); border-color: var(--brand); }
  .chk-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .footer { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 28px clamp(20px,5vw,32px) 84px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
  .footer .fl { display: flex; align-items: center; gap: 8px; }
  .footer img { height: 18px; opacity: .9; }
  .footer a { color: var(--brand); text-decoration: none; font-weight: 600; }
  .footer a:hover { text-decoration: underline; }

  /* ---- back to top ---- */
  .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--grad); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-brand); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); transition: opacity .3s var(--ease), transform .35s var(--ease-spring), visibility .3s; }
  .to-top.show { opacity: 1; visibility: visible; transform: none; }
  .to-top:hover { transform: translateY(-3px) scale(1.06); }
  .to-top:active { transform: translateY(0) scale(.98); }
  .to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .to-top svg { width: 21px; height: 21px; }

  [data-reveal] { opacity: 0; transform: translateY(18px) scale(.99); transition: opacity .6s var(--ease), transform .7s var(--ease-spring); will-change: opacity, transform; }
  [data-reveal].in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .card, .mod-card, .theme-toggle, .chk-box, .to-top, .rail a, .stage-num { transition: opacity .2s !important; }
    .rail li::before { transition: none !important; }
    .rail a:hover, .card:hover, .mod-card:hover, .mod-card:hover .mw::before { transform: none !important; }
    #progress { transition: none; }
  }
  a:focus-visible, .chk-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

  /* ── multi-page additions (same pattern as the HRMS guide) ── */
  .topnav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; margin-left: 8px; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: 999px; transition: background .2s var(--ease), color .2s var(--ease); }
  .topnav a:hover { color: var(--ink); background: var(--surface-1); }
  .topnav .sm { display: none; }
  .topnav a.on { color: var(--brand); background: var(--accent-soft); }
  .allguides { white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; margin-right: 10px; }
  .allguides:hover { border-color: var(--brand); }
  @media (max-width: 720px) {
    .topbar { flex-wrap: wrap; row-gap: 8px; height: auto; padding-top: 10px; padding-bottom: 8px; }
    .topnav { order: 3; width: 100%; gap: 2px; margin-left: 0; }
    .topnav a { padding: 6px 9px; font-size: 13px; }
    .topnav .lg { display: none; } .topnav .sm { display: inline; }
    .topbar .tb-label, .topbar .divider { display: none; }
  }
  .rail .rail-group a, .mnav .rail-group a { display: inline; padding: 0; color: inherit; text-decoration: none; font-size: inherit; }
  .rail .rail-group a:hover, .mnav .rail-group a:hover { text-decoration: underline; transform: none; }
  .rail .rail-group.other, .mnav .rail-group.other { color: var(--muted); }
  .mnav { display: block; margin: 4px 0 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
  .mnav summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--brand); }
  .mnav > div { padding: 0 16px 12px; }
  .mnav ol { list-style: none; margin: 0 0 10px; padding: 0; }
  .mnav li a { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 5px 0; color: var(--ink-soft); text-decoration: none; font-size: 14px; }
  .mnav .rn { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }
  @media (min-width: 960px) { .mnav { display: none; } }
  .shell.wide { grid-template-columns: minmax(0, 1fr); max-width: 1000px; }
  @media (min-width: 960px) { .shell.wide { grid-template-columns: minmax(0, 1fr); } }
  .mod-sub[id] { scroll-margin-top: 80px; }
  a.mod-card { display: block; text-decoration: none; color: inherit; }
  .part-card .pc-steps { font-size: 13px; color: var(--muted); margin-top: 6px; }
  .pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
  .pager a { flex: 1 1 220px; display: block; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); }
  .pager a.next { text-align: right; }
  .pager a:hover { border-color: var(--brand); }
  .pager .pl { display: block; font-size: 12px; color: var(--muted); }
  .pager .pt { display: block; font-weight: 700; color: var(--brand); }

  /* ── 2026-10-18 rebuild: module pages, roles, plans, accessibility ── */
  :root[data-theme="dark"] body::before { background-image: radial-gradient(at 15% 20%, rgba(99,102,241,.10) 0px, transparent 55%), radial-gradient(at 85% 8%, rgba(129,140,248,.09) 0px, transparent 50%), radial-gradient(at 90% 78%, rgba(99,102,241,.06) 0px, transparent 45%); }

  /* skip link: hidden until focused */
  .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--card); color: var(--brand); font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: var(--radius-sm); border: 2px solid var(--accent); box-shadow: var(--shadow-md); text-decoration: none; transition: top .15s; }
  .skip-link:focus { top: 10px; }
  main:focus { outline: none; }

  /* one visible focus ring for everything you can tab to */
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .topnav a:focus-visible, .allguides:focus-visible, .pager a:focus-visible, .mod-card:focus-visible, .mnav summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* the wordmark is navy: show it white on a dark page */
  :root[data-theme="dark"] .topbar .logo, :root[data-theme="dark"] .footer img { filter: brightness(0) invert(1); opacity: .94; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar .logo, :root:not([data-theme="light"]) .footer img { filter: brightness(0) invert(1); opacity: .94; } }

  /* tags: who uses it (its own teal tint) and which plan it needs (amber) */
  .tag.who { background: var(--info-soft); color: var(--info); }
  .tag.plan { background: var(--warning-soft); color: var(--warning); }

  /* module cards: prose, jobs and lists */
  .card > p { margin: 0 0 10px; line-height: 1.6; color: var(--ink-soft); font-size: 15px; }
  .card > p b { color: var(--ink); }
  .card > p + h4.sub, .card > ul + h4.sub, .card > ol + h4.sub, .card > .note + h4.sub, .card > .table-wrap + h4.sub { margin-top: 18px; }
  .card > ul { margin: 0 0 10px 18px; display: grid; gap: 6px; list-style: disc; color: var(--ink-soft); font-size: 15px; }
  .card > .note { margin-top: 12px; }
  .card > .steps + p { margin-top: 12px; }
  .card h4.sub + .steps { margin-top: 8px; }

  /* a long menu path wraps instead of pushing the page sideways on a phone */
  .where { flex-wrap: wrap; max-width: 100%; }

  /* hub */
  .pick-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 30px 0 12px; }
  .stage.directory .pick-sub:first-child, #start .pick-sub:first-child { margin-top: 4px; }
  .mod-group { scroll-margin-top: 80px; }
  .learn-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--brand); text-decoration: none; }
  .learn-link:hover { text-decoration: underline; }

  /* side menu: the two group headings (Set up / Every section) */
  .rail-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 22px 0 2px; padding: 0 0 6px 2px; border-bottom: 1px solid var(--border); }
  .rail-head:first-child { margin-top: 0; }
  .rail-head + .rail-group { margin-top: 8px; }
  .mnav .rail-head { margin-top: 14px; }
  .mnav .rail-head:first-child { margin-top: 2px; }
  .rail .rail-group .rn-bul, .mnav .rail-group .rn-bul { display: none; }

  /* wide tables: fade the right edge while there is more to scroll (guide.js sets the classes) */
  .table-wrap.can-scroll:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .table-hint { display: none; font-size: 12px; color: var(--muted); margin-top: 6px; text-align: right; }
  .table-wrap.can-scroll + .table-hint { display: block; }
  .hero.hub { max-width: 1000px; }

  /* ---- fix round 1: tag text contrast (≥ 4.5:1 in both themes) ---- */
  :root { --tag-time-ink:#4b5563; --tag-optional-ink:#047857; --tag-plan-ink:#92400e; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --tag-time-ink:#a1a5b1; --tag-optional-ink:#34d399; --tag-plan-ink:#e0913f; }
  }
  :root[data-theme="dark"] { --tag-time-ink:#a1a5b1; --tag-optional-ink:#34d399; --tag-plan-ink:#e0913f; }
  :root[data-theme="light"] { --tag-time-ink:#4b5563; --tag-optional-ink:#047857; --tag-plan-ink:#92400e; }
  .tag.time { color: var(--tag-time-ink); }
  .tag.optional { color: var(--tag-optional-ink); }
  .tag.plan { color: var(--tag-plan-ink); }

  /* ---- fix round 1: every anchor target clears the sticky top bar ---- */
  main [id] { scroll-margin-top: 72px; }
  #checklist, .checklist, #done { scroll-margin-top: 80px; }

  /* ---- fix round 1: the rail on short screens — tighter, plus a fade cue while more is below ---- */
  @media (min-width: 960px) {
    .rail::after { content: ""; position: sticky; bottom: 0; display: block; height: 28px; pointer-events: none;
      background: linear-gradient(to bottom, transparent, var(--bg-mesh)); }
  }
  @media (min-width: 960px) and (max-height: 820px) {
    .rail { max-height: calc(100vh - 84px); padding: 8px 0 16px; }
    .rail a { padding: 2px 0; font-size: 12.5px; }
    .rail-head { margin: 12px 0 2px; padding-bottom: 4px; }
    .rail-group { margin: 6px 0 2px; }
    .rail-head + .rail-group { margin-top: 6px; }
  }
  /* the reveal's slide-in transform would move a linked target after the browser has scrolled to it */
  [data-reveal]:target, [data-reveal]:has(:target) { opacity: 1; transform: none; transition: none; }
  /* the top bar wraps to two rows up to ~800px wide (96px tall on a phone) — give anchor targets room under it */
  @media (max-width: 800px) {
    .band, .stage, .finish-wrap, .mod-group, .mod-sub[id], main [id] { scroll-margin-top: 108px; }
    #checklist, .checklist, #done { scroll-margin-top: 112px; }
  }
  /* the active / hovered rail number: the dark accent (#6366f1) is 4.35:1 on the dark page, so dark uses the lighter brand tint */
  :root { --rail-num-on: var(--accent); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rail-num-on: var(--brand); } }
  :root[data-theme="dark"] { --rail-num-on: var(--brand); }
  :root[data-theme="light"] { --rail-num-on: var(--accent); }
  .rail li.active a .rn, .rail a:hover .rn { color: var(--rail-num-on); }