/* Page 44 · NEW POWERS. T1 SPOTLIGHT chrome (the feedback pages' night stage) + a grimoire / altar for the spells.
   On ../kit.css (tokens, fonts) + fbkit.css (PICK stamp, pick bar, @font-face fallback). */
:root { --stage-1: #2B2347; --stage-2: #191430; --stage-3: #0D0A1C; --mint: #7CFFA3; --violet: #8E73FF; --parch: #FFF6E0; --parch-2: #F2E0B6; --parch-3: #E2C98F; --leather: #4A2160; --leather-2: #2C1240; --gold-hi: #FFE98C; --ok: #1FBF5C;
  --el: #FFD23F; --el-hi: #FFF6E0; --el-lo: #B97800; }
html { scroll-behavior: smooth; }
body.pw { margin: 0; min-height: 100vh; color: var(--cream); font: 500 15px / 1.5 var(--f-body); -webkit-font-smoothing: antialiased; padding-bottom: 140px; overflow-x: hidden;
  background:
    radial-gradient(60% 34% at 50% 0%, rgba(142, 115, 255, 0.22), transparent 70%),
    radial-gradient(36% 26% at 6% 4%, rgba(255, 79, 163, 0.14), transparent 70%),
    radial-gradient(36% 26% at 94% 3%, rgba(63, 154, 255, 0.16), transparent 70%),
    linear-gradient(180deg, var(--stage-1), var(--stage-2) 26%, var(--stage-3)); }
body.pw::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55;
  background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 32% 64%, #fff, transparent), radial-gradient(1.6px 1.6px at 58% 30%, #fff, transparent), radial-gradient(1.2px 1.2px at 74% 78%, #fff, transparent), radial-gradient(1.4px 1.4px at 88% 22%, #fff, transparent), radial-gradient(1px 1px at 46% 88%, #fff, transparent), radial-gradient(1px 1px at 8% 82%, #fff, transparent);
  background-size: 640px 640px; }
.pw *, .pw *::before, .pw *::after { box-sizing: border-box; }
.pw .wrap { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 22px; }
.pw img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- top bar */
.mbar { position: sticky; top: 0; z-index: 150; background: rgba(20, 15, 40, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 2px solid rgba(0, 0, 0, 0.35); }
.mbar__in { max-width: 1320px; margin: 0 auto; padding: 9px 22px; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.mbar__brand { font: 400 17px / 1 var(--f-display); letter-spacing: 0.03em; margin-right: auto; display: flex; align-items: center; gap: 9px; color: #fff; }
.mbar__brand i { width: 24px; height: 24px; border-radius: 7px; background: var(--yellow); border: 2.5px solid var(--ink); box-shadow: 1px 3px 0 var(--ink); display: inline-grid; place-items: center; font: 400 14px/1 var(--f-display); color: var(--ink); font-style: normal; }
.mbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.mbar nav a { font: 400 14px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-2); text-decoration: none; padding: 7px 10px 6px; border-radius: 9px; }
.mbar nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ---------------------------------------------------------------- the phone frame + stages */
.dev { position: relative; border: 4px solid var(--ink); border-radius: 30px; padding: 10px; background: linear-gradient(160deg, #3B3550, #17141F 55%, #0B0A10); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), 4px 9px 0 var(--ink); }
.dev__scr { position: relative; overflow: hidden; border-radius: 21px; background: #05040A; aspect-ratio: 2556 / 1179; }
.dev__island { position: absolute; z-index: 3; left: 1.6%; top: 50%; width: 1.1%; height: 22%; translate: 0 -50%; border-radius: 99px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); }
.dev__tag { position: absolute; z-index: 4; left: 16px; top: -14px; padding: 5px 10px 4px; border-radius: 9px; border: 2.5px solid var(--ink); background: var(--panel-2); color: #fff; font: 400 13px/1 var(--f-display); letter-spacing: 0.05em; box-shadow: 2px 3px 0 var(--ink); white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.dev__tag.y { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); }
.dev__tag.m { background: var(--mint); color: var(--ink); }
.stage { position: absolute; inset: 0; }
.pws { position: absolute; inset: 0; overflow: hidden; }
.pws svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pws__ui { pointer-events: none; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; margin-top: 26px; padding: 30px 34px; border-radius: 30px; border: 4px solid var(--ink); box-shadow: 4px 9px 0 var(--ink); overflow: hidden;
  background: radial-gradient(60% 90% at 82% 30%, rgba(255, 122, 26, 0.18), transparent 60%), radial-gradient(50% 80% at 10% 90%, rgba(92, 214, 255, 0.14), transparent 60%), linear-gradient(160deg, #3A2E6E, #231B49 60%, #170F33);
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.2fr); gap: 30px; align-items: center; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.2px, transparent 1.7px); background-size: 8px 8px; }
.hero > * { position: relative; z-index: 1; }
.eye { font: 800 12px / 1.3 var(--f-body); letter-spacing: 0.2em; color: #FFB3D6; text-transform: uppercase; }
.hero h1 { margin: 10px 0 12px; font: 400 clamp(40px, 5.4vw, 66px) / 0.94 var(--f-display); color: var(--yellow); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); letter-spacing: 0.01em; }
.hero h1 span { color: #fff; }
.hero p { margin: 0 0 10px; color: var(--cream-2); font-size: 16px; max-width: 60ch; }
.hero p b { color: #fff; }
.quote { margin-top: 12px; display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.32); border: 2px dashed rgba(255, 246, 224, 0.25); }
.quote b { font: 400 14px/1 var(--f-display); color: var(--yellow); letter-spacing: 0.06em; }
.quote b.q2 { margin-top: 4px; color: var(--mint); }
.quote > span { font: 600 14px/1.4 var(--f-body); color: var(--cream-2); }
.els { display: flex !important; flex-wrap: wrap; gap: 6px; }
.elchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 99px; border: 2px solid var(--ink); background: #1E1B2B; font: 400 13px/1 var(--f-display); letter-spacing: 0.05em; color: #fff; box-shadow: 1px 2px 0 var(--ink); }
.elchip svg { width: 20px; height: 20px; display: block; }
.elchip.is-extra { background: rgba(255, 197, 49, 0.14); border-style: dashed; }
.asks { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.asks a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 13px; background: rgba(13, 11, 22, 0.55); box-shadow: 2px 4px 0 var(--ink); color: var(--cream-2); text-decoration: none; font-size: 13px; line-height: 1.3; transition: transform 0.12s var(--out); }
.asks a:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.07); }
.asks a b { display: block; font: 400 15px/1.05 var(--f-display); letter-spacing: 0.03em; color: #fff; }
.asks a i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--f-display); font-style: normal; color: var(--ink); background: var(--yellow); border: 2.5px solid var(--ink); }
.hero__fig { display: grid; gap: 12px; }
.hero__cap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 28px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px; border-radius: 8px; border: 2px solid var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); font: 400 13px/1 var(--f-display); letter-spacing: 0.04em; box-shadow: 1px 2px 0 var(--ink); }
.chip--dim { background: rgba(255, 246, 224, 0.12); color: var(--cream-2); border-color: rgba(0, 0, 0, 0.5); box-shadow: none; }
.chip--mint { background: var(--mint); }

/* ---------------------------------------------------------------- sections */
.sec { margin-top: 70px; scroll-margin-top: 70px; }
.sec__head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sec__num { font: 400 15px/1 var(--f-display); letter-spacing: 0.1em; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 9px; padding: 6px 10px 5px; box-shadow: 2px 4px 0 var(--ink); transform: rotate(-3deg); }
.sec__num--s { font-size: 13px; padding: 5px 8px 4px; }
.sec__head h2 { margin: 0; font: 400 clamp(28px, 3.4vw, 42px)/1 var(--f-display); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); letter-spacing: 0.01em; }
.sec__head p { flex: 0 0 100%; margin: 4px 0 0; color: var(--cream-2); padding-right: max(0px, calc(100% - 86ch)); }
.sec__head p b { color: #fff; }
.said { display: inline-flex; gap: 8px; align-items: baseline; margin-top: 8px; padding: 7px 11px; border-radius: 11px; background: rgba(0, 0, 0, 0.3); border: 2px dashed rgba(255, 246, 224, 0.22); color: var(--cream-2); font-size: 13.5px; font-style: italic; }
.said b { font: 400 13px/1 var(--f-display); font-style: normal; color: var(--yellow); letter-spacing: 0.05em; }
h3.sub { margin: 34px 0 14px; font: 400 21px/1 var(--f-display); letter-spacing: 0.04em; color: var(--cream); display: flex; align-items: center; gap: 12px; }
h3.sub::after { content: ""; flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 246, 224, 0.25), transparent); }
.subsec { margin-top: 44px; scroll-margin-top: 70px; }
.subsec__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.subsec__head h3 { margin: 0; font: 400 clamp(22px, 2.4vw, 30px)/1 var(--f-display); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.subsec__head p { flex: 0 0 100%; margin: 2px 0 0; color: var(--cream-2); padding-right: max(0px, calc(100% - 84ch)); }
.subsec__head p b { color: #fff; }
.rec { -webkit-text-stroke: 0; text-shadow: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 4px; border-radius: 9px; border: 2.5px solid var(--ink); background: var(--mint); color: var(--ink); font: 400 13px/1 var(--f-display); letter-spacing: 0.06em; box-shadow: 2px 3px 0 var(--ink); transform: rotate(-3deg); white-space: nowrap; }
.why { margin: 0; color: var(--cream-2); font-size: 14px; }
.why b { color: #fff; }

/* the game-style segmented tabs */
.seg { display: inline-flex; padding: 4px; gap: 4px; border: 3px solid var(--ink); border-radius: 14px; background: #120F20; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5), 2px 4px 0 var(--ink); flex-wrap: wrap; }
.seg button { position: relative; min-width: 64px; min-height: 40px; padding: 4px 12px; border: 0; border-radius: 10px; cursor: pointer; background: transparent; color: var(--cream-2); font: 400 16px/1 var(--f-display); letter-spacing: 0.03em; display: grid; place-items: center; gap: 2px; }
.seg button small { font: 800 8.5px/1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-3); text-transform: uppercase; }
.seg button:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.seg button.on { background: linear-gradient(180deg, #5C537F, #3A3458 55%, #2A2640); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 0 0 2.5px var(--ink); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.seg button.on small { -webkit-text-stroke: 0; color: var(--yellow); }
.seg button .star { position: absolute; right: -5px; top: -7px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); background: var(--mint); display: grid; place-items: center; font: 400 11px/1 var(--f-display); color: var(--ink); -webkit-text-stroke: 0; }

/* panels */
.panel { position: relative; border: 4px solid var(--ink); border-radius: 26px; background: linear-gradient(180deg, #2E2850, #1E1A33 60%, #171329); box-shadow: 3px 8px 0 var(--ink); padding: 22px; }
.panel h3 { margin: 0 0 6px; font: 400 21px/1.05 var(--f-display); letter-spacing: 0.02em; color: #fff; }
.panel p { margin: 0; color: var(--cream-2); font-size: 14px; }
.facts { display: grid; gap: 8px; }
.facts div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 13.5px; color: var(--cream-2); line-height: 1.42; }
.facts div i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); font: 400 13px/1 var(--f-display); font-style: normal; color: var(--ink); background: var(--mint); }
.facts div i.w { background: #FFC67A; }
.facts div b { color: #fff; }

/* ---------------------------------------------------------------- 01 the name */
.namestage { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.namepick { display: grid; gap: 14px; }
.names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nm { position: relative; display: grid; gap: 4px; justify-items: start; padding: 12px 14px 11px; border: 3.5px solid var(--ink); border-radius: 16px; cursor: pointer; text-align: left; color: #fff; background: linear-gradient(180deg, #3A3458, #2A2640 60%, #1E1B2B); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 3px 5px 0 var(--ink); transition: transform 0.12s var(--out), box-shadow 0.12s; }
.nm:hover { transform: translateY(-2px); }
.nm b { font: 400 25px/1 var(--f-display); letter-spacing: 0.03em; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.nm small { font: 800 10px/1.2 var(--f-body); letter-spacing: 0.12em; color: var(--cream-3); text-transform: uppercase; }
.nm.on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); color: var(--ink); }
.nm.on b { -webkit-text-stroke: 0; }
.nm.on small { color: rgba(29, 27, 36, 0.7); }
.nm .rec { position: absolute; right: -8px; top: -13px; font-size: 11px; padding: 4px 7px 3px; }
.nm .tick { position: absolute; right: 10px; bottom: 9px; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--ok); display: none; place-items: center; }
.nm .tick svg { width: 14px; height: 14px; }
.nm.is-picked .tick { display: grid; }
.nameinfo { border: 4px solid var(--ink); border-radius: 22px; padding: 16px 18px; background: linear-gradient(180deg, #2E2850, #1E1A33 60%, #171329); box-shadow: 3px 8px 0 var(--ink); display: grid; gap: 12px; }
.nameinfo h4 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 28px/1 var(--f-display); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.forms { display: flex; flex-wrap: wrap; gap: 6px; }
.form { display: inline-grid; gap: 2px; padding: 6px 9px; border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.3); }
.form span { font: 800 9px/1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-3); text-transform: uppercase; }
.form b { font: 400 15px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; }
.nameinfo .pick { justify-self: start; }
.wordspots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wspot { position: relative; display: grid; gap: 10px; align-content: start; }
.wspot__art { position: relative; border: 4px solid var(--ink); border-radius: 20px; overflow: hidden; aspect-ratio: 1.55 / 1; box-shadow: 3px 6px 0 var(--ink); background: radial-gradient(80% 90% at 50% 20%, #2C2A5E, #12102A); display: grid; place-items: center; }
.wspot__art svg { width: 100%; height: 100%; display: block; }
.wspot h4 { margin: 0; font: 400 16px/1.1 var(--f-display); color: #fff; letter-spacing: 0.03em; }
.wspot p { margin: 0; font-size: 13px; color: var(--cream-3); }
.wspot p b { color: var(--cream); }
.wspot .was { text-decoration: line-through; text-decoration-thickness: 2px; color: rgba(255, 246, 224, 0.45); }

/* ---------------------------------------------------------------- 02 the ledger: today's 9 -> the new 12 */
.ledger { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; align-items: stretch; margin: 0 0 26px; padding: 14px; border: 3px dashed rgba(255, 246, 224, 0.18); border-radius: 22px; background: rgba(0, 0, 0, 0.22); }
.ledger__h { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font: 800 11px/1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-3); text-transform: uppercase; margin-bottom: 4px; }
.ledger__h b { font: 400 17px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; text-transform: none; }
.lg { display: grid; grid-template-rows: auto 22px auto; justify-items: center; gap: 2px; text-align: center; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.lg__old { width: 100%; min-height: 42px; display: grid; place-items: center; padding: 4px 3px; border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.55); background: rgba(255, 246, 224, 0.08); font: 400 11.5px/1.05 var(--f-display); letter-spacing: 0.03em; color: rgba(255, 246, 224, 0.62); }
.lg__old.none { border-style: dashed; color: rgba(255, 246, 224, 0.35); background: transparent; font-size: 12px; }
.lg__arrow { width: 16px; height: 22px; }
.lg__new { width: 100%; display: grid; justify-items: center; gap: 4px; }
.lg__gem { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, var(--g1), var(--g2)); box-shadow: 0 3px 0 var(--ink); transition: transform 0.15s var(--spring); }
.lg__gem svg { width: 32px; height: 32px; }
.lg:hover .lg__gem { transform: translateY(-3px) scale(1.06); }
.lg__name { font: 400 11.5px/1.05 var(--f-display); letter-spacing: 0.03em; color: #fff; }
.lg__kind { font: 800 8.5px/1 var(--f-body); letter-spacing: 0.12em; padding: 2px 5px; border-radius: 5px; border: 1.5px solid var(--ink); color: var(--ink); text-transform: uppercase; }
.lg__kind.keep { background: var(--mint); }
.lg__kind.rework { background: var(--yellow); }
.lg__kind.new { background: #FF8FCB; }
.lg.is-retired .lg__new { opacity: 0.85; }
.lg__retired { width: 44px; height: 44px; border-radius: 50%; border: 3px dashed rgba(255, 246, 224, 0.35); display: grid; place-items: center; color: rgba(255, 246, 224, 0.45); font: 400 22px/1 var(--f-display); }

/* ---------------------------------------------------------------- 02 the altar: portal + grimoire */
.altar { display: grid; gap: 0; }
.portal { position: relative; --el: #FFD23F; }
.portal__frame { position: relative; border: 4px solid var(--ink); border-radius: 28px; overflow: hidden; aspect-ratio: 2.162 / 1; background: #05040A;
  box-shadow: 0 0 0 4px #2A1B3D, 0 0 0 7px var(--ink), 0 0 60px -6px color-mix(in srgb, var(--el) 70%, transparent), 4px 12px 0 7px var(--ink); transition: box-shadow 0.5s; }
.portal__frame::after { content: ""; position: absolute; inset: 0; border-radius: 24px; pointer-events: none; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--el) 55%, transparent), inset 0 0 40px rgba(0, 0, 0, 0.55); }
.portal__top { position: absolute; z-index: 4; left: 14px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; right: 70px; pointer-events: none; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 4px; border-radius: 9px; border: 2.5px solid var(--ink); background: rgba(13, 11, 22, 0.86); color: #fff; font: 400 14px/1 var(--f-display); letter-spacing: 0.05em; box-shadow: 2px 3px 0 var(--ink); }
.pchip svg { width: 18px; height: 18px; display: block; }
.pchip--el { background: var(--el); color: var(--ink); }
.pchip--dim { color: var(--cream-2); font-size: 12.5px; }
.pnav { position: absolute; z-index: 5; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 3.5px solid var(--ink); cursor: pointer; display: grid; place-items: center; color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); box-shadow: 2px 4px 0 var(--ink); transition: transform 0.12s var(--out); }
.pnav svg { width: 24px; height: 24px; }
.pnav:hover { transform: scale(1.08); }
.pnav:active { transform: scale(0.94); }
.pnav--l { left: 12px; }
.pnav--r { right: 12px; }
/* the phase timeline */
.tl { display: flex; align-items: center; gap: 8px; margin: 18px 6px 0; }
.tl__btn { flex: none; height: 38px; min-width: 38px; padding: 0 10px; border-radius: 11px; border: 3px solid var(--ink); cursor: pointer; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #4A4468, #2A2640); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 2px 3px 0 var(--ink); }
.tl__btn svg { width: 18px; height: 18px; fill: currentColor; }
.tl__btn .i-play { display: none; }
.tl__btn.is-paused .i-play { display: block; }
.tl__btn.is-paused .i-pause { display: none; }
.tl__btn--txt { font: 400 13px/1 var(--f-display); letter-spacing: 0.05em; }
.tl__btn--txt.on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); }
.tl__bar { position: relative; flex: 1; min-width: 0; height: 38px; display: flex; gap: 3px; padding: 3px; border-radius: 12px; border: 3px solid var(--ink); background: #120F20; box-shadow: 2px 3px 0 var(--ink); cursor: pointer; }
.tl__seg { position: relative; min-width: 0; border-radius: 8px; background: #2A2640; display: grid; place-items: center; overflow: hidden; font: 400 11.5px/1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-3); white-space: nowrap; transition: background 0.2s, color 0.2s; }
.tl__seg span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.tl__seg.on { background: color-mix(in srgb, var(--el) 85%, #000); color: var(--ink); }
.tl__seg.warn { background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, 0.08) 6px 12px); }
.tl__head { position: absolute; z-index: 2; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px var(--ink); pointer-events: none; }

.grim { position: relative; margin-top: 30px; padding: 16px 16px 14px; border: 4px solid var(--ink); border-radius: 30px; box-shadow: 4px 10px 0 var(--ink);
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 210, 63, 0.1), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 3px, transparent 3px 7px), linear-gradient(160deg, #5A2A72, var(--leather) 45%, var(--leather-2)); }
.grim::before, .grim::after { content: ""; position: absolute; width: 54px; height: 54px; pointer-events: none; z-index: 3;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M3 3H40L32 11H11V32L3 40Z' fill='%23FFD23F' stroke='%231D1B24' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='13' r='5' fill='%23FF7A1A' stroke='%231D1B24' stroke-width='2.5'/%3E%3C/svg%3E"); }
.grim::before { left: 4px; top: 4px; }
.grim::after { right: 4px; bottom: 4px; transform: rotate(180deg); }
.grim__tabs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; padding: 0 30px 14px; }
.gem { position: relative; display: grid; justify-items: center; gap: 5px; padding: 6px 0 4px; border: 0; background: none; cursor: pointer; color: #fff; border-radius: 14px; transition: transform 0.15s var(--spring); }
.gem:hover { transform: translateY(-3px); }
.gem__disc { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 3.5px solid var(--ink); display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, var(--g1), var(--g2) 75%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25), 0 4px 0 var(--ink); transition: box-shadow 0.2s, transform 0.2s var(--spring); }
.gem__disc svg { width: 42px; height: 42px; }
.gem__name { font: 400 11.5px/1.05 var(--f-display); letter-spacing: 0.03em; text-align: center; color: var(--cream-2); min-height: 2.1em; }
.gem.on .gem__disc { transform: translateY(-5px) scale(1.1); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 0 0 4px var(--yellow), 0 0 22px 6px color-mix(in srgb, var(--g1) 60%, transparent), 0 9px 0 var(--ink); }
.gem.on .gem__name { color: var(--yellow); }
.gem__tick { position: absolute; top: 2px; right: calc(50% - 36px); width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--ok); display: none; place-items: center; z-index: 2; }
.gem__tick svg { width: 13px; height: 13px; }
.gem.is-picked .gem__tick { display: grid; }
.gem__el { position: absolute; top: -3px; left: calc(50% - 38px); width: 22px; height: 22px; }
.gem__el svg { width: 22px; height: 22px; }
.grim__book { position: relative; perspective: 2200px; }
.grim__pages { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 440px; border: 3.5px solid var(--ink); border-radius: 18px; overflow: hidden;
  background: linear-gradient(90deg, var(--parch-3) 0%, var(--parch) 4%, var(--parch) 45%, #E6CF9E 49.6%, #C9AE76 50%, #E6CF9E 50.4%, var(--parch) 55%, var(--parch) 96%, var(--parch-3) 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.45), inset 0 -10px 30px rgba(120, 80, 20, 0.18); color: var(--ink); }
.grim__pages::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55; background-image: radial-gradient(rgba(120, 80, 30, 0.12) 1px, transparent 1.4px); background-size: 7px 7px; }
.page { position: relative; padding: 26px 34px 26px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.page--l { padding-right: 40px; }
.page--r { padding-left: 40px; }
.grim__turn { position: absolute; z-index: 5; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: 0 50%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, #D9BE84, var(--parch) 18%, var(--parch) 90%, var(--parch-3)); border-radius: 0 16px 16px 0; box-shadow: -6px 0 18px rgba(80, 50, 10, 0.35); }
.grim__turn.go-l { animation: pw-turn-l 0.55s cubic-bezier(0.45, 0.05, 0.3, 1) both; }
.grim__turn.go-r { left: 0; transform-origin: 100% 50%; border-radius: 16px 0 0 16px; animation: pw-turn-r 0.55s cubic-bezier(0.45, 0.05, 0.3, 1) both; }
@keyframes pw-turn-l { 0% { opacity: 1; transform: rotateY(0); } 99% { opacity: 1; transform: rotateY(-180deg); } 100% { opacity: 0; transform: rotateY(-180deg); } }
@keyframes pw-turn-r { 0% { opacity: 1; transform: rotateY(0); } 99% { opacity: 1; transform: rotateY(180deg); } 100% { opacity: 0; transform: rotateY(180deg); } }
.page .fade { display: grid; gap: 14px; align-content: start; animation: pw-in 0.45s var(--out) both; }
@keyframes pw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pg__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg__no { font: 400 14px/1 var(--f-display); letter-spacing: 0.12em; color: rgba(29, 27, 36, 0.55); }
.seal { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 5px; border-radius: 99px; border: 2.5px solid var(--ink); background: var(--el); color: var(--ink); font: 400 14px/1 var(--f-display); letter-spacing: 0.06em; box-shadow: 1px 3px 0 var(--ink); }
.seal svg { width: 22px; height: 22px; display: block; }
.pg__name { margin: 0; font: 400 clamp(36px, 4vw, 54px)/0.92 var(--f-display); letter-spacing: 0.01em; color: var(--el); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.pg__line { margin: 0; font: italic 600 17px/1.42 var(--f-body); color: #3A2E22; max-width: 44ch; }
.pg__h { margin: 4px 0 0; font: 400 14px/1 var(--f-display); letter-spacing: 0.14em; color: rgba(29, 27, 36, 0.6); display: flex; align-items: center; gap: 10px; }
.pg__h::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, rgba(29, 27, 36, 0.25) 0 6px, transparent 6px 10px); }
.beats { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: b; }
.beats li { counter-increment: b; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.42; color: #2A2230; }
.beats li::before { content: counter(b); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2.5px solid var(--ink); background: var(--el); font: 400 14px/1 var(--f-display); color: var(--ink); }
.beats li b { color: var(--ink); }
.aimrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.aimart { border: 3px solid var(--ink); border-radius: 14px; background: #1E1B2B; aspect-ratio: 1.3 / 1; overflow: hidden; box-shadow: 2px 3px 0 var(--ink); }
.aimart svg { width: 100%; height: 100%; display: block; }
.aimrow b { display: block; font: 400 19px/1 var(--f-display); letter-spacing: 0.03em; color: var(--ink); }
.aimrow span { font-size: 13.5px; color: #4A3E52; line-height: 1.4; }
.counter { position: relative; padding: 14px 16px 14px 56px; border-radius: 16px; border: 3px solid var(--ink); background: #fff; box-shadow: 2px 4px 0 var(--ink); font-size: 14.5px; line-height: 1.42; color: #2A2230; }
.counter::before { content: ""; position: absolute; left: 12px; top: 13px; width: 32px; height: 32px; border-radius: 10px; border: 2.5px solid var(--ink); background: var(--mint) no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%231D1B24' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.counter b { display: block; font: 400 15px/1 var(--f-display); letter-spacing: 0.08em; color: var(--ink); margin-bottom: 4px; }
.stamps { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stamp { display: inline-grid; gap: 1px; padding: 7px 12px 6px; border-radius: 10px; border: 3px solid currentColor; font: 400 18px/1 var(--f-display); letter-spacing: 0.05em; transform: rotate(-4deg); background: rgba(255, 255, 255, 0.35); }
.stamp small { font: 800 9.5px/1.1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; }
.stamp--keep { color: #15803D; }
.stamp--rework { color: #B45309; }
.stamp--new { color: #BE185D; }
.sigkill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2A1530, #1A0C20); color: #fff; box-shadow: 2px 3px 0 var(--ink); }
.sigkill i { font-style: normal; padding: 4px 6px 3px; border-radius: 7px; background: #FF3352; border: 2px solid var(--ink); font: 400 12px/1 var(--f-display); letter-spacing: 0.04em; }
.sigkill b { font: 400 17px/1 var(--f-display); letter-spacing: 0.04em; }
.sigkill em { font-style: normal; font: 800 9px/1 var(--f-body); letter-spacing: 0.12em; color: #FF8FCB; }
.role { display: inline-flex; align-items: center; padding: 6px 10px 5px; border-radius: 9px; border: 2.5px solid var(--ink); background: #fff; font: 400 14px/1 var(--f-display); letter-spacing: 0.06em; color: var(--ink); box-shadow: 1px 3px 0 var(--ink); }
.ourcall { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 3px dashed rgba(29, 27, 36, 0.35); background: rgba(255, 255, 255, 0.35); }
.ourcall .rec { transform: rotate(-4deg); }
.ourcall .rec.skip { background: #FFC67A; }
.ourcall p { margin: 0; font-size: 13.5px; line-height: 1.4; color: #3A2E3E; }
.page--r .pick { justify-self: start; }
.pick.pick--build .pick__on, .pick.pick--build .pick__off { display: inline; }
.pick.pick--build .pick__on { display: none; }
.pick.pick--build.is-picked .pick__on { display: inline; }
.pick.pick--build.is-picked .pick__off { display: none; }
.grim__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 8px 2px; }
.grim__count { font: 400 18px/1 var(--f-display); letter-spacing: 0.05em; color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; margin-right: auto; }
.chipbtn { height: 38px; padding: 0 14px; border-radius: 11px; border: 3px solid var(--ink); cursor: pointer; font: 400 15px/1 var(--f-display); letter-spacing: 0.04em; color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 2px 4px 0 var(--ink); }
.chipbtn:active { transform: translate(1px, 2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 1px 1px 0 var(--ink); }
.chipbtn--dim { color: #fff; background: linear-gradient(180deg, #4A4468, #2A2640); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 2px 4px 0 var(--ink); }

/* ---------------------------------------------------------------- 03 getting one */
.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.way { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 3.5px solid var(--ink); border-radius: 18px; cursor: pointer; text-align: left; color: #fff; background: linear-gradient(180deg, #3A3458, #2A2640 60%, #1E1B2B); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 3px 5px 0 var(--ink); transition: transform 0.12s var(--out); }
.way:hover { transform: translateY(-2px); }
.way__l { width: 44px; height: 44px; border-radius: 12px; border: 3px solid var(--ink); display: grid; place-items: center; font: 400 24px/1 var(--f-display); color: var(--ink); background: var(--cream); box-shadow: 0 3px 0 var(--ink); }
.way b { display: block; font: 400 18px/1.02 var(--f-display); letter-spacing: 0.03em; }
.way small { display: block; margin-top: 3px; font: 600 11.5px/1.25 var(--f-body); color: var(--cream-3); }
.way.on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); color: var(--ink); }
.way.on small { color: rgba(29, 27, 36, 0.72); }
.way.on .way__l { background: var(--ink); color: var(--yellow); }
.way .rec { position: absolute; right: -8px; top: -14px; font-size: 11px; padding: 4px 7px 3px; }
.way .tick { position: absolute; right: 8px; bottom: 8px; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--ok); display: none; place-items: center; }
.way .tick svg { width: 12px; height: 12px; }
.way.is-picked .tick { display: grid; }
.waystage { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.waystage__main { display: grid; gap: 16px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.step { position: relative; display: grid; gap: 4px; align-content: start; padding: 10px 12px 11px; border: 3px solid var(--ink); border-radius: 14px; cursor: pointer; text-align: left; color: var(--cream-2); background: rgba(13, 11, 22, 0.6); box-shadow: 2px 4px 0 var(--ink); overflow: hidden; }
.step b { font: 400 15px/1.05 var(--f-display); letter-spacing: 0.03em; color: #fff; display: flex; gap: 7px; align-items: center; }
.step b i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); font: 400 12px/1 var(--f-display); font-style: normal; }
.step span { font-size: 12.5px; line-height: 1.35; }
.step__fill { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--yellow); }
.step.on { background: rgba(255, 210, 63, 0.12); border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow), 2px 4px 0 var(--ink); }
.step.on b i { background: var(--yellow); }
.waynote { display: grid; gap: 14px; }
.waynote h3 { margin: 0; font: 400 30px/1 var(--f-display); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.waynote .lead { margin: 0; color: var(--cream-2); font-size: 15px; }
.waynote .lead b { color: #fff; }
.vars { display: grid; gap: 8px; }
.vars > span { font: 800 10.5px/1 var(--f-body); letter-spacing: 0.16em; color: var(--cream-3); text-transform: uppercase; }
.picks2 { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- 04 look */
.medrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.med { display: grid; gap: 8px; justify-items: center; text-align: center; }
.med__art { width: 100%; aspect-ratio: 1 / 1; border: 3.5px solid var(--ink); border-radius: 20px; background: radial-gradient(80% 80% at 50% 40%, #1E2A5E, #0C0F2A); box-shadow: 3px 6px 0 var(--ink); overflow: hidden; }
.med__art svg { width: 100%; height: 100%; display: block; }
.med b { font: 400 16px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; }
.med span { font-size: 12.5px; color: var(--cream-3); line-height: 1.35; }
.lookstage { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.lookstage__main { display: grid; gap: 14px; }
.portal--lite .portal__frame { border-radius: 24px; }
.lookspells { display: flex; flex-wrap: wrap; gap: 8px; }
.lookspells button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 5px; border-radius: 12px; border: 3px solid var(--ink); cursor: pointer; background: #1E1B2B; color: var(--cream-2); font: 400 14px/1 var(--f-display); letter-spacing: 0.04em; box-shadow: 2px 3px 0 var(--ink); }
.lookspells button svg { width: 28px; height: 28px; }
.lookspells button.on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); }
.looknote, .bannote { display: grid; gap: 14px; }
.stylecards { display: grid; gap: 10px; }
.stylecard { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: 3.5px solid var(--ink); border-radius: 18px; cursor: pointer; text-align: left; color: #fff; background: linear-gradient(180deg, #3A3458, #2A2640 60%, #1E1B2B); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 3px 5px 0 var(--ink); }
.stylecard__sw { width: 52px; height: 52px; border-radius: 14px; border: 3px solid var(--ink); overflow: hidden; background: #0C0F2A; }
.stylecard__sw svg { width: 100%; height: 100%; display: block; }
.stylecard b { display: block; font: 400 18px/1.05 var(--f-display); letter-spacing: 0.03em; }
.stylecard small { display: block; margin-top: 3px; font: 600 12px/1.3 var(--f-body); color: var(--cream-3); }
.stylecard.on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); color: var(--ink); }
.stylecard.on small { color: rgba(29, 27, 36, 0.72); }
.stylecard .rec { position: absolute; right: -8px; top: -13px; font-size: 11px; padding: 4px 7px 3px; }
.stylecard .tick, .bancard .tick { position: absolute; right: 10px; bottom: 9px; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--ok); display: none; place-items: center; }
.stylecard .tick svg, .bancard .tick svg { width: 12px; height: 12px; }
.stylecard.is-picked .tick, .bancard.is-picked .tick { display: grid; }
.triptych { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trip { display: grid; gap: 8px; }
.trip__art { position: relative; border: 3.5px solid var(--ink); border-radius: 18px; overflow: hidden; aspect-ratio: 1.6 / 1; box-shadow: 3px 6px 0 var(--ink); background: #05040A; cursor: pointer; }
.trip__art.on { box-shadow: 0 0 0 4px var(--yellow), 3px 6px 0 var(--ink); }
.trip__tag { position: absolute; z-index: 3; left: 10px; top: 10px; padding: 4px 8px 3px; border-radius: 8px; border: 2px solid var(--ink); background: rgba(13, 11, 22, 0.85); color: #fff; font: 400 13px/1 var(--f-display); letter-spacing: 0.05em; }
.trip p { margin: 0; font-size: 13px; color: var(--cream-3); }
.trip p b { color: var(--cream); }
.bannerstage { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.bancards { display: grid; gap: 10px; }
.bancard { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: 3.5px solid var(--ink); border-radius: 18px; cursor: pointer; text-align: left; color: #fff; background: linear-gradient(180deg, #3A3458, #2A2640 60%, #1E1B2B); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 3px 5px 0 var(--ink); }
.bancard .way__l { width: 42px; height: 42px; font-size: 22px; }
.bancard b { display: block; font: 400 18px/1.05 var(--f-display); letter-spacing: 0.03em; }
.bancard small { display: block; margin-top: 3px; font: 600 12px/1.3 var(--f-body); color: var(--cream-3); }
.bancard.on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); color: var(--ink); }
.bancard.on small { color: rgba(29, 27, 36, 0.72); }
.bancard.on .way__l { background: var(--ink); color: var(--yellow); }
.bancard .rec { position: absolute; right: -8px; top: -13px; font-size: 11px; padding: 4px 7px 3px; }

/* ---------------------------------------------------------------- 05 the rules scroll */
.scroll { position: relative; padding: 0 18px; }
.scroll__rod { position: relative; z-index: 2; height: 30px; border-radius: 15px; border: 4px solid var(--ink); background: linear-gradient(180deg, #A8743C, #6E4320 60%, #4A2C14); box-shadow: 0 5px 0 var(--ink); margin: 0 -18px; }
.scroll__rod::before, .scroll__rod::after { content: ""; position: absolute; top: 50%; translate: 0 -50%; width: 26px; height: 40px; border-radius: 10px; border: 4px solid var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); }
.scroll__rod::before { left: -14px; }
.scroll__rod::after { right: -14px; }
.rules { list-style: none; margin: -6px 0; padding: 26px 26px 20px; display: grid; gap: 14px; counter-reset: r; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink);
  background: linear-gradient(90deg, var(--parch-3), var(--parch) 3%, var(--parch) 97%, var(--parch-3)); color: var(--ink); }
.rule { counter-increment: r; display: grid; grid-template-columns: 330px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 12px; border-radius: 18px; border: 3px solid rgba(29, 27, 36, 0.14); background: rgba(255, 255, 255, 0.38); }
.rule__art { position: relative; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; aspect-ratio: 1.7 / 1; background: #05040A; box-shadow: 2px 4px 0 var(--ink); }
.rule__art .stage { position: absolute; inset: 0; }
.rule h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font: 400 21px/1.05 var(--f-display); letter-spacing: 0.02em; color: var(--ink); }
.rule h4::before { content: counter(r); width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2.5px solid var(--ink); background: var(--yellow); font: 400 16px/1 var(--f-display); box-shadow: 1px 2px 0 var(--ink); }
.rule p { margin: 0; font-size: 14.5px; line-height: 1.45; color: #2A2230; }
.rule p + p { margin-top: 6px; }
.rule p b { color: var(--ink); }
.rule .code { display: inline-block; margin-top: 6px; font: 600 11.5px/1.3 ui-monospace, Menlo, monospace; color: #6A5A78; }
.rule .pick { align-self: center; }

/* ---------------------------------------------------------------- our picks */
.ours { margin-top: 70px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: center; padding: 26px; border: 4px solid var(--ink); border-radius: 30px; box-shadow: 4px 9px 0 var(--ink); scroll-margin-top: 70px;
  background: radial-gradient(60% 90% at 20% 20%, rgba(124, 255, 163, 0.12), transparent 60%), radial-gradient(60% 90% at 90% 80%, rgba(255, 122, 26, 0.14), transparent 60%), linear-gradient(160deg, #3A2E6E, #231B49 60%, #170F33); }
.ours h2 { margin: 0 0 8px; font: 400 clamp(26px, 3vw, 38px)/1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.ours__lead { margin: 0 0 14px; color: var(--cream-2); }
.ours__lead b { color: #fff; }
.ours ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ours li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14px; color: var(--cream-2); }
.ours li > b { font: 400 15px/1.1 var(--f-display); letter-spacing: 0.04em; color: #fff; }
.ours li em { font-style: normal; color: var(--mint); font-weight: 800; }
.ours li em.yours { color: var(--yellow); }
.foot { margin-top: 30px; color: var(--cream-3); font-size: 12.5px; }
.foot code { font-size: 12px; color: var(--cream-2); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .hero, .namestage, .waystage, .lookstage, .bannerstage, .ours { grid-template-columns: minmax(0, 1fr); }
  .wordspots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grim__tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0 18px 14px; }
  .ledger { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .medrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rule { grid-template-columns: 260px minmax(0, 1fr); }
  .rule .pick { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  .grim__pages { grid-template-columns: minmax(0, 1fr); background: linear-gradient(90deg, var(--parch-3) 0%, var(--parch) 4%, var(--parch) 96%, var(--parch-3) 100%); }
  .page--l, .page--r { padding: 20px 18px; }
  .page--r { border-top: 2px dashed rgba(29, 27, 36, 0.25); }
  .grim__turn { display: none; }
  .ways, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .triptych { grid-template-columns: minmax(0, 1fr); }
  .rule { grid-template-columns: minmax(0, 1fr); }
  .rule .pick { grid-column: auto; }
  .ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pw .wrap { padding: 0 12px; }
  .hero { padding: 22px 14px; border-radius: 24px; }
  .mbar nav { display: none; }
  .asks { grid-template-columns: minmax(0, 1fr); }
  .names { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wordspots { grid-template-columns: minmax(0, 1fr); }
  .grim { padding: 12px 8px 10px; border-radius: 22px; }
  .grim__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 6px 10px; gap: 2px; }
  .gem__disc { width: 50px; height: 50px; }
  .gem__disc svg { width: 36px; height: 36px; }
  .pnav { width: 38px; height: 38px; }
  .pnav svg { width: 18px; height: 18px; }
  .portal__top { left: 8px; top: 8px; }
  .pchip { font-size: 11.5px; padding: 4px 7px 3px; }
  .pchip--dim { display: none; }
  .tl { flex-wrap: wrap; margin: 14px 0 0; }
  .tl__bar { flex-basis: 100%; order: 3; }
  .tl__seg { font-size: 9px; }
  .ways, .steps { grid-template-columns: minmax(0, 1fr); }
  .medrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aimrow { grid-template-columns: 96px minmax(0, 1fr); }
  .ourcall { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .scroll { padding: 0 6px; }
  .scroll__rod { margin: 0 -6px; }
  .rules { padding: 18px 12px; }
  .ours { padding: 18px 14px; }
  .ours li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .said { display: block; }
  .dev { padding: 6px; border-radius: 20px; }
  .dev__scr { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .grim__turn.go-l, .grim__turn.go-r { animation: none; opacity: 0; }
  .page .fade { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- the hero reel (a cinematic portal) */
.hero__portal .portal__frame { border-radius: 26px; }
.htitle { position: absolute; z-index: 4; left: 16px; bottom: 14px; display: grid; gap: 6px; justify-items: start; pointer-events: none; }
.htitle.go { animation: pw-ht 0.6s var(--spring) both; }
@keyframes pw-ht { 0% { opacity: 0; transform: translateX(-30px) scale(0.9); } 100% { opacity: 1; transform: none; } }
.htitle b { font: 400 clamp(26px, 3.2vw, 46px)/0.95 var(--f-display); color: var(--el); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); letter-spacing: 0.01em; }
.htitle small { font: 800 11px/1 var(--f-body); letter-spacing: 0.16em; color: #fff; text-transform: uppercase; padding: 4px 8px 3px; border-radius: 7px; background: rgba(13, 11, 22, 0.8); border: 2px solid var(--ink); }
.hero__cap .chip { cursor: pointer; }
.hero__dots { position: absolute; z-index: 4; right: 16px; bottom: 16px; display: flex; gap: 6px; }
.hero__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); border: 2px solid var(--ink); }
.hero__dots i.on { background: var(--yellow); }
@media (max-width: 620px) { .htitle { left: 10px; bottom: 8px; } .htitle small { display: none; } .hero__dots { display: none; } }

/* ---------------------------------------------------------------- 04 the warning anatomy */
.anat { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 8px; }
.anat .portal { --el: #FF7A1A; }
.anat__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: a; }
.anat__list li { counter-increment: a; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.4; color: var(--cream-2); }
.anat__list li::before { content: counter(a); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2.5px solid var(--ink); background: var(--yellow); color: var(--ink); font: 400 15px/1 var(--f-display); box-shadow: 1px 2px 0 var(--ink); }
.anat__list li b { display: block; font: 400 16px/1.1 var(--f-display); letter-spacing: 0.04em; color: #fff; margin-bottom: 2px; }
@media (max-width: 1100px) { .anat { grid-template-columns: minmax(0, 1fr); } }