/*
╔══════════════════════════════════════════════════════════════════════════════╗
║ RETAIL // RESET — DEFAULT · CLASSIC HOLO                                    ║
║ File: assets/css/style.css                                                   ║
║                                                                              ║
║ ROLE                                                                         ║
║ This is the canonical default stylesheet: the original collector-card Holo  ║
║ Pack with foil sweeps, rarity frames, binder energy and the corrected       ║
║ true-centre navigation contract.                                            ║
║                                                                              ║
║ SELECTOR MAP                                                                 ║
║ style.css  = Default / Classic Holo                                          ║
║ style7.css = Holo / Original Archive visual system                           ║
║                                                                              ║
║ Keep this file as the initial href for #rr-style-pack.                       ║
╚══════════════════════════════════════════════════════════════════════════════╝
*/


/* ========================================================================== */
/* ========================================================================== */
/*  00 · THEME ENGINES / COLLECTOR PACK TOKENS */
/*  Terminal = Prism foil · Codex = Gold foil · Void = Cosmic foil. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
:root,
html[data-theme="terminal"] {
  --bg: radial-gradient(ellipse 120% 80% at 50% 0%, #15203a 0%, #0c1426 45%, #070b16 100%);
  --acc: #3d9bff; --acc2: #36e0d0; --gold: #ffcf4d; --mag: #ff5cc8; --violet: #9d6bff;
  --text: #eef3ff; --muted: #98a6cc; --faint: #56638a;
  --panel: rgba(61, 155, 255, 0.06); --panel2: rgba(61, 155, 255, 0.13);
  --bd: rgba(120, 170, 255, 0.4); --bd-soft: rgba(120, 170, 255, 0.22);
  --geo: rgba(61, 155, 255, 0.4); --geo2: rgba(54, 224, 208, 0.34);
  --grad: linear-gradient(115deg, #ff5cc8, #ffcf4d 18%, #36e0d0 38%, #3d9bff 58%, #9d6bff 78%, #ff5cc8);
  --glow: 0 0 1px rgba(255, 255, 255, 0.6), 0 0 24px rgba(61, 155, 255, 0.55);
  --scan: rgba(120, 170, 255, 0.05); --ink: #07101f;
  --surface: rgba(9, 17, 35, 0.66); --surface-strong: rgba(7, 12, 27, 0.88);
  --surface-deep: rgba(5, 8, 20, 0.94); --nav-bg: rgba(7, 12, 27, 0.78);
  --shadow-strong: 0 24px 70px rgba(0, 0, 0, 0.45); --radius-card: 18px;
}
html[data-theme="codex"] {
  --bg: radial-gradient(ellipse 120% 80% at 50% 0%, #2a1d05 0%, #1a1304 45%, #0c0902 100%);
  --acc: #ffcf4d; --acc2: #ff9d3d; --gold: #ffe79a; --mag: #ff6fae; --violet: #c89bff;
  --text: #fff4dc; --muted: #c2a874; --faint: #7a6437;
  --panel: rgba(255, 207, 77, 0.07); --panel2: rgba(255, 207, 77, 0.14);
  --bd: rgba(255, 207, 77, 0.44); --bd-soft: rgba(255, 207, 77, 0.24);
  --geo: rgba(255, 207, 77, 0.4); --geo2: rgba(255, 157, 61, 0.34);
  --grad: linear-gradient(115deg, #fff2c4, #ffcf4d 22%, #ff9d3d 42%, #ffe79a 62%, #ffb84d 82%, #fff2c4);
  --glow: 0 0 1px rgba(255, 255, 255, 0.7), 0 0 26px rgba(255, 207, 77, 0.6);
  --scan: rgba(255, 207, 77, 0.05); --ink: #1a1304;
  --surface: rgba(29, 20, 4, 0.66); --surface-strong: rgba(23, 16, 3, 0.88);
  --surface-deep: rgba(12, 8, 2, 0.94); --nav-bg: rgba(19, 13, 3, 0.80);
  --shadow-strong: 0 24px 70px rgba(0, 0, 0, 0.48); --radius-card: 18px;
}
html[data-theme="void"] {
  --bg: radial-gradient(ellipse 120% 80% at 50% 0%, #1c1040 0%, #110827 45%, #07041a 100%);
  --acc: #b06bff; --acc2: #4de0ff; --gold: #ffd35e; --mag: #ff5cc8; --violet: #b06bff;
  --text: #f1e8ff; --muted: #ab93d6; --faint: #62498f;
  --panel: rgba(176, 107, 255, 0.07); --panel2: rgba(176, 107, 255, 0.15);
  --bd: rgba(176, 107, 255, 0.42); --bd-soft: rgba(176, 107, 255, 0.24);
  --geo: rgba(176, 107, 255, 0.4); --geo2: rgba(77, 224, 255, 0.34);
  --grad: linear-gradient(115deg, #ff5cc8, #b06bff 22%, #4de0ff 44%, #9d6bff 64%, #ffd35e 84%, #ff5cc8);
  --glow: 0 0 1px rgba(255, 255, 255, 0.6), 0 0 28px rgba(176, 107, 255, 0.6);
  --scan: rgba(176, 107, 255, 0.05); --ink: #110827;
  --surface: rgba(20, 9, 43, 0.68); --surface-strong: rgba(14, 6, 32, 0.89);
  --surface-deep: rgba(8, 3, 21, 0.95); --nav-bg: rgba(13, 6, 30, 0.80);
  --shadow-strong: 0 24px 70px rgba(0, 0, 0, 0.50); --radius-card: 18px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Reusable foil sweep — drop ::after on any element and add .holo-host position */
@keyframes foilShift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes sparkle { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.25); } }
@keyframes drift { to { background-position: 120px 160px, -90px 130px; } }

/* ========================================================================== */
/* ========================================================================== */
/*  01 · RESET / TYPE / CORE UTILITIES */
/*  Existing index fonts: Cinzel for display · Space Grotesk for copy · IBM Plex Mono for data. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
body { font-family: "Space Grotesk", system-ui, sans-serif; color: var(--text); background: var(--bg) fixed; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.locked { overflow: hidden; height: 100vh; }
.mono { font-family: "IBM Plex Mono", monospace; }
h1, h2, h3, h4 { font-family: "Cinzel", "Times New Roman", serif; line-height: 1.02; letter-spacing: 0.005em; color: var(--text); }
.acc { color: var(--acc); } .gold { color: var(--gold); } .mag { color: var(--mag); }
.gtext { background: var(--grad); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; filter: saturate(1.3); animation: foilShift 6s linear infinite; }

/* ========================================================================== */
/* ========================================================================== */
/*  02 · AMBIENT LAYERS / FOIL MOTION */
/*  Background texture stays behind content; motion has a reduced-motion escape hatch. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
.geo-wm { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7; background-image: radial-gradient(var(--geo) 1.4px, transparent 2px), radial-gradient(var(--geo2) 1.4px, transparent 2px); background-size: 64px 64px, 92px 92px; background-position: 0 0, 32px 46px; animation: drift 30s linear infinite; }
.geo-wm:before { content: ""; position: absolute; inset: -10%; background: radial-gradient(circle at 22% 20%, rgba(120, 170, 255, 0.16), transparent 34%), radial-gradient(circle at 80% 26%, rgba(255, 92, 200, 0.12), transparent 32%); filter: blur(8px); }
.geo-wm svg { display: none; }
.geo-wm .cr, .geo-wm .ln { display: none; }
.spin { transform-origin: center; animation: spin 180s linear infinite; }
.spin-r { transform-origin: center; animation: spin 140s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.scan { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, var(--scan) 50%, transparent 70%); background-size: 300% 100%; mix-blend-mode: screen; opacity: 0.5; animation: foilShift 12s linear infinite; }
.scan:after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 38%, transparent 56%, rgba(0, 0, 0, 0.6) 100%); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 30px; position: relative; z-index: 3; }
@media (max-width: 600px) { .wrap { padding: 0 18px; } }
/* foil button: holographic shine that ignites on hover */
.btn { position: relative; overflow: hidden; font-family: "IBM Plex Mono"; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid transparent; background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--grad) border-box; background-size: auto, 300% auto; color: var(--text); padding: 14px 28px; border-radius: 12px; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s; font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); animation: foilShift 8s linear infinite; }
.btn:after { content: ""; position: absolute; inset: 0; background: var(--grad); background-size: 300% 100%; mix-blend-mode: soft-light; opacity: 0.5; animation: foilShift 6s linear infinite; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--glow), 0 10px 28px rgba(0, 0, 0, 0.5); }
.btn:hover:after { opacity: 0.9; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; animation: none; }
.btn:disabled:after { display: none; }
.btn.ghost { background: transparent; color: var(--acc); border: 1px solid var(--bd); animation: none; }
.btn.ghost:after { display: none; }

/* ========================================================================== */
/* ========================================================================== */
/*  03 · GLOBAL NAVIGATION / THEME AND STYLE CONTROLS */
/*  One responsive navigation contract for root and folder pages. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px clamp(12px, 2vw, 26px); transform: translateY(-130%); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s; border-bottom: 1px solid transparent; }
body.entered #nav { transform: translateY(0); }
#nav.solid { background: rgba(8, 12, 24, 0.78); backdrop-filter: blur(16px); border-bottom: 1px solid var(--bd-soft); }
.nav-mark { font-family: "Cinzel", "Times New Roman", serif; font-size: 18px; letter-spacing: 0.01em; white-space: nowrap; justify-self: start; color: var(--text); }
.nav-mark .s { background: var(--grad); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foilShift 6s linear infinite; }
.nav-home-link { color: inherit; text-decoration: none; }
.nav-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; min-width: 0; margin: 0 auto; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { font-family: "IBM Plex Mono"; font-size: 12px; line-height: 1; color: var(--muted); text-decoration: none; padding: 8px 13px; border-radius: 10px; white-space: nowrap; transition: 0.25s; border: 1px solid transparent; }
.nav-links a:hover { color: var(--text); background: var(--panel2); border-color: var(--bd-soft); }
.nav-links a.cta, .nav-links a[aria-current="page"] { color: var(--ink); background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--grad) border-box; border: 1px solid transparent; background-size: auto, 300% auto; animation: foilShift 8s linear infinite; color: var(--text); }
.nav-themes { display: flex; gap: 5px; padding-left: 10px; border-left: 1px solid var(--bd-soft); justify-self: end; }
.nav-themes button { width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--bd-soft); cursor: pointer; font-family: "IBM Plex Mono"; font-size: 11px; background: transparent; color: var(--muted); transition: 0.25s; }
.nav-themes button.active { border-color: var(--acc); color: var(--acc); box-shadow: var(--glow); }
@media (max-width: 760px) { #nav { gap: 10px; padding: 10px 14px; } .nav-mark { font-size: 15px; } .nav-themes { display: none; } }
.themebar { position: fixed; top: 14px; right: 16px; z-index: 120; display: flex; gap: 6px; background: rgba(8, 12, 24, 0.6); backdrop-filter: blur(14px); border: 1px solid var(--bd); border-radius: 30px; padding: 6px; }
.themebar button { width: 33px; height: 33px; border-radius: 50%; border: 1px solid transparent; cursor: pointer; font-family: "IBM Plex Mono"; font-size: 13px; background: transparent; color: var(--muted); }
.themebar button.active { border-color: var(--acc); color: var(--acc); box-shadow: var(--glow); }
body.entered .themebar { display: none; }

/* ========================================================================== */
/* ========================================================================== */
/*  04 · ENTRY GATE / RISK THRESHOLD */
/*  Mobile-safe launch gate, checklist states, reward panel and indicator-vault hand-off. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
#gate { position: fixed; inset: 0; z-index: 110; display: flex; align-items: flex-start; justify-content: center; padding: 22px 16px calc(104px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; background: radial-gradient(ellipse 100% 80% at 50% 26%, rgba(12, 18, 36, 0.92), rgba(5, 7, 16, 0.99)); backdrop-filter: blur(5px); transition: opacity 0.8s, visibility 0.8s; }
@media (min-height: 760px) { #gate { align-items: center; } }
#gate.gone { opacity: 0; visibility: hidden; }
.gate-card { position: relative; overflow: hidden; max-width: 680px; width: 100%; text-align: center; margin: auto 0; background: rgba(10, 14, 28, 0.8) padding-box, var(--grad) border-box; border: 2px solid transparent; background-size: auto, 300% auto; border-radius: 22px; padding: 42px 34px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); animation: foilShift 10s linear infinite; }
.gate-card:after { content: ""; position: absolute; inset: 0; background: var(--grad); background-size: 300% 100%; mix-blend-mode: soft-light; opacity: 0.14; pointer-events: none; animation: foilShift 8s linear infinite; }
.gate-mark { position: relative; z-index: 1; font-family: "Cinzel", "Times New Roman", serif; font-size: clamp(34px, 7vw, 70px); letter-spacing: 0.01em; }
.glitch { position: relative; display: inline-block; }
.glitch:before, .glitch:after { content: "RETAIL // RESET"; position: absolute; left: 0; top: 0; width: 100%; opacity: 0.55; }
.glitch:before { color: var(--mag); transform: translate(2px, 1px); z-index: -1; }
.glitch:after { color: var(--acc2); transform: translate(-2px, -1px); z-index: -2; }
.boot { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 13px; color: var(--acc); min-height: 20px; margin: 18px 0 6px; }
.gate-head { position: relative; z-index: 1; font-family: "Cinzel", "Times New Roman", serif; font-size: clamp(20px, 3.4vw, 30px); margin: 10px 0; }
.gate-sub { position: relative; z-index: 1; color: var(--muted); font-size: 15px; max-width: 520px; margin: 0 auto 24px; }
.checks { position: relative; z-index: 1; text-align: left; max-width: 520px; margin: 0 auto 22px; display: flex; flex-direction: column; gap: 12px; }
.chk { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 12px; padding: 15px 17px; cursor: pointer; transition: 0.3s; }
.chk:hover { border-color: var(--acc); box-shadow: var(--glow); }
.chk input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--acc); flex: none; cursor: pointer; }
.chk span { font-size: 13.5px; color: var(--text); }
.reward { display: none; }
.reward.show { display: block; position: relative; z-index: 1; animation: fade 0.8s; }
@keyframes fade { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; } }
.reward h3 { font-size: clamp(20px, 3vw, 28px); margin-bottom: 8px; }
.reward p { color: var(--muted); font-size: 14px; max-width: 540px; margin: 0 auto 16px; }
.codebox { text-align: left; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; max-width: 560px; margin: 0 auto; }
.codebox .bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; border-bottom: 1px solid var(--bd-soft); font-family: "IBM Plex Mono"; font-size: 11px; color: var(--muted); }
.codebox pre { padding: 14px; overflow-x: auto; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--acc2); line-height: 1.55; max-height: 220px; }
.copy { cursor: pointer; color: var(--ink); background: var(--grad); background-size: 200% auto; border: none; border-radius: 999px; padding: 4px 12px; font-family: "IBM Plex Mono"; font-weight: 700; font-size: 10px; animation: foilShift 6s linear infinite; }
.gate-actions { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 4; padding-top: 12px; }

/* ========================================================================== */
/* ========================================================================== */
/*  05 · SHARED SECTIONS / CARDS / GRIDS / FOOTER */
/*  The reusable structural vocabulary shared by homepage, archive and education pages. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
section { position: relative; z-index: 2; padding: 84px 0; border-top: 1px solid var(--bd-soft); }
.eyebrow { display: inline-block; font-family: "IBM Plex Mono"; font-size: 11px; letter-spacing: 0.18em; color: var(--ink); background: var(--grad); background-size: 200% auto; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; text-transform: uppercase; animation: foilShift 6s linear infinite; }
h2.t { font-size: clamp(28px, 4.6vw, 50px); }
h3.sub { font-size: clamp(19px, 2.8vw, 28px); margin: 0 0 4px; }
.lead { color: var(--muted); max-width: 780px; margin-top: 16px; font-size: 16.5px; }
.lead b { color: var(--text); }
.note { font-family: "IBM Plex Mono"; font-size: 12px; color: var(--muted); margin-top: 16px; }
.note b { color: var(--gold); }
.reveal { opacity: 0; transform: translateY(30px); transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
.hero2 { padding-top: 132px; text-align: center; }
.hero2 h1 { font-family: "Cinzel", "Times New Roman", serif; font-size: clamp(32px, 6vw, 72px); }
.hero2 .tag { font-family: "IBM Plex Mono"; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 18px; font-size: 12px; }
/* shared card surface */
.col, .lens, .ta, .gcard, .coin, .door, .box, .shape, .floorcard, .module, .scn-body, .rr-panel, .flow-step, .unit-card, .kernel-card { position: relative; overflow: hidden; }
.col:after, .gcard:after, .coin:after, .door:after, .box:after, .floorcard:after, .module:after, .lens:after, .ta:after { content: ""; position: absolute; inset: 0; background: var(--grad); background-size: 300% 100%; mix-blend-mode: soft-light; opacity: 0.1; pointer-events: none; transition: opacity 0.4s; animation: foilShift 9s linear infinite; }
.col:hover:after, .gcard:hover:after, .coin:hover:after, .door:hover:after, .box:hover:after, .floorcard:hover:after, .module:hover:after, .lens:hover:after, .ta:hover:after { opacity: 0.32; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }
.col { background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 18px; padding: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.col:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: var(--glow); }
.col h4 { font-size: 18px; margin-bottom: 14px; }
.col.lie h4 { color: var(--mag); } .col.real h4 { color: var(--acc2); }
.col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; position: relative; z-index: 1; }
.col li { font-family: "IBM Plex Mono"; font-size: 13px; color: var(--muted); padding-left: 20px; position: relative; }
.col li:before { position: absolute; left: 0; }
.col.lie li:before { content: "✕"; color: var(--mag); } .col.real li:before { content: "◆"; color: var(--acc2); }
.animal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px auto 0; max-width: 760px; }
@media (max-width: 620px) { .animal { grid-template-columns: 1fr 1fr; } }
.lens { background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 14px; padding: 18px; text-align: center; transition: 0.3s; }
.lens:hover { transform: translateY(-4px) rotate(-1deg); border-color: var(--acc); box-shadow: var(--glow); }
.lens b { display: block; position: relative; z-index: 1; font-family: "Cinzel", "Times New Roman", serif; font-size: 14px; color: var(--text); }
.lens span { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--acc); }
.lens.core { background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--grad) border-box; border: 1px solid transparent; background-size: auto, 300% auto; animation: foilShift 8s linear infinite; }
.lens.core b { color: var(--gold); } .lens.core span { color: var(--acc2); }
@media (max-width: 620px) { .lens.core { grid-column: span 2; } }
.chartcard { margin-top: 26px; background: rgba(8, 12, 24, 0.55); border: 1px solid var(--bd); border-radius: 20px; padding: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
.chartcard svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--muted); padding: 10px 0 4px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 16px; height: 0; border-top: 3px solid; display: inline-block; border-radius: 3px; }
.takeaways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 680px) { .takeaways { grid-template-columns: 1fr; } }
.ta { background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 14px; padding: 18px; text-align: center; }
.ta b { display: block; position: relative; z-index: 1; font-family: "Cinzel", "Times New Roman", serif; font-size: 18px; background: var(--grad); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foilShift 6s linear infinite; }
.ta span { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--muted); }
.pattern { margin-top: 46px; padding-top: 30px; border-top: 1px dashed var(--bd-soft); }
.pattern .px { font-family: "IBM Plex Mono"; font-size: 11.5px; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 10px; margin: 18px auto; }
.chain .v { font-family: "IBM Plex Mono"; font-weight: 600; font-size: clamp(15px, 2.2vw, 20px); color: var(--text); background: var(--panel2); border: 1px solid var(--bd); border-radius: 10px; padding: 9px 15px; }
.chain .v.proj { color: var(--gold); border-style: dashed; }
.chain .op { display: flex; flex-direction: column; align-items: center; color: var(--acc); font-family: "IBM Plex Mono"; min-width: 54px; }
.chain .op .r { font-size: 11px; color: var(--acc2); } .chain .op .ar { font-size: 18px; line-height: 1; } .chain .op .r.fib { color: var(--gold); }
.mech { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd-soft); border: 1px solid var(--bd-soft); border-radius: 14px; overflow: hidden; margin-top: 14px; }
@media (max-width: 680px) { .mech { grid-template-columns: 1fr; } }
.mech > div { background: rgba(8, 12, 24, 0.55); padding: 18px; }
.mech span { display: block; font-family: "IBM Plex Mono"; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 7px; }
.mech .c1 span { color: var(--acc2); } .mech .c2 span { color: var(--gold); } .mech .c3 span { color: var(--mag); }
.mech b { font-weight: 500; font-family: "Space Grotesk"; font-size: 13.5px; color: var(--text); }
.mech .big { font-family: "IBM Plex Mono"; color: var(--acc); font-size: 14px; display: block; margin-bottom: 4px; }
.minisvg { width: 100%; height: 170px; margin-top: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 820px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .grid3 { grid-template-columns: 1fr; } }
.gcard { background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 16px; padding: 22px; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.gcard:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: var(--glow); }
.gcard h4 { position: relative; z-index: 1; font-size: 16px; margin-bottom: 6px; }
.gcard .fx { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--gold); margin-bottom: 6px; }
.gcard p { position: relative; z-index: 1; font-size: 13px; color: var(--muted); }
.gcard .pp { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--acc2); margin-top: 8px; }
.coins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 900px) { .coins { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .coins { grid-template-columns: 1fr; } }
.coin { background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 16px; padding: 20px; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.coin:hover { transform: translateY(-4px) rotate(0.4deg); border-color: var(--acc); box-shadow: var(--glow); }
.coin .top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.coin .tk { font-family: "Cinzel", "Times New Roman", serif; font-size: 16px; color: var(--gold); }
.coin .nm { font-family: "IBM Plex Mono"; font-size: 11px; color: var(--muted); }
.coin dl { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-family: "IBM Plex Mono"; font-size: 11px; margin: 8px 0; }
.coin dt { color: var(--faint); } .coin dd { color: var(--text); text-align: right; }
.coin .why { position: relative; z-index: 1; font-size: 12px; color: var(--muted); border-top: 1px solid var(--bd-soft); padding-top: 8px; margin-top: 6px; }
.coin .why b { color: var(--acc); }
.coin.slot { border-style: dashed; opacity: 0.95; } .coin .live { color: var(--mag); }
.coin-logo { position: relative; z-index: 1; width: 48px; height: 48px; border: 2px solid transparent; border-radius: 50%; display: grid; place-items: center; font-family: "Cinzel", "Times New Roman", serif; color: var(--ink); background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--grad) border-box; background-size: auto, 200% auto; box-shadow: var(--glow); flex: none; animation: foilShift 7s linear infinite; }
.coin-logo { color: var(--text); }
.coin-links { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; border-top: 1px solid var(--bd-soft); padding-top: 10px; }
.coin-links a { font-family: "IBM Plex Mono"; font-size: 10.5px; color: var(--acc); text-decoration: none; border: 1px solid var(--bd-soft); border-radius: 999px; padding: 5px 10px; background: rgba(0, 0, 0, 0.25); }
.coin-links a:hover { border-color: var(--acc); box-shadow: var(--glow); }
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 820px) { .doors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .doors { grid-template-columns: 1fr; } }
.door { display: block; text-decoration: none; background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 18px; padding: 26px; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; color: var(--text); }
.door:hover { transform: translateY(-5px); border-color: var(--acc); box-shadow: var(--glow); }
.door .n { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--faint); }
.door h4 { position: relative; z-index: 1; font-size: 19px; margin: 6px 0; }
.door p { position: relative; z-index: 1; font-size: 13px; color: var(--muted); }
.door .go { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 12px; color: var(--acc); margin-top: 10px; display: inline-block; }
.door .go:after { content: " ◆"; }
.aut { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
@media (max-width: 680px) { .aut { grid-template-columns: 1fr; } }
.aut div { font-family: "IBM Plex Mono"; font-size: 12.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--bd-soft); border-left: 3px solid var(--mag); border-radius: 12px; padding: 13px 16px; }
.aut div b { color: var(--text); }
footer { position: relative; z-index: 2; border-top: 1px solid var(--bd-soft); padding: 52px 0 72px; background: rgba(5, 7, 16, 0.5); }
.footgrid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
@media (max-width: 680px) { .footgrid { grid-template-columns: 1fr; } }
.disc { border: 1px solid var(--bd); border-radius: 16px; background: rgba(0, 0, 0, 0.25); padding: 22px 24px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.disc b { color: var(--gold); text-transform: uppercase; font-family: "IBM Plex Mono"; font-size: 11px; letter-spacing: 0.1em; display: block; margin-bottom: 8px; }
.smap { font-family: "IBM Plex Mono"; font-size: 12.5px; }
.smap a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; transition: 0.25s; }
.smap a:hover { color: var(--acc); padding-left: 6px; }



/* -------------------------------------------------------------------------- */
/*  05.1 · GENERIC HOLOGRAPHIC SURFACES                                       */
/*  Optional helpers for new HTML. Existing pages do not need these classes.  */
/* -------------------------------------------------------------------------- */
.holo-host,
.holo-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.holo-card {
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  background-size: auto, 300% auto;
  box-shadow: var(--shadow-strong), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: foilShift 11s linear infinite;
}

.holo-card::before,
.holo-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.holo-card::before {
  inset: 7px;
  z-index: -1;
  border: 1px solid var(--bd-soft);
  border-radius: calc(var(--radius-card) - 7px);
  opacity: 0.76;
}

.holo-card::after {
  inset: 0;
  z-index: -1;
  background: var(--grad);
  background-size: 300% 100%;
  mix-blend-mode: soft-light;
  opacity: 0.13;
  animation: foilShift 8s linear infinite;
}

.holo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow), var(--shadow-strong);
}

/* A simple technical-divider utility inspired by the archive / lab pages. */
.rr-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 34px 0;
  color: var(--gold);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rr-rule::before,
.rr-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--bd), transparent);
}

/* ========================================================================== */
/* ========================================================================== */
/*  20 · HOMEPAGE SUPPORT */
/*  Hero hierarchy, reset narrative, home watchlist, Bitcoin teaser and compact calls to action. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
.hero-actions, .nav-actions, .page-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-width: 160px; text-decoration: none; font-family: "IBM Plex Mono"; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 22px; border-radius: 12px; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid transparent; }
.hero-btn:hover { transform: translateY(-3px); box-shadow: var(--glow); }
.hero-btn.mission { color: var(--ink); background: var(--grad); background-size: 220% auto; animation: foilShift 7s linear infinite; }
.hero-btn.thesis { color: var(--text); background: var(--panel2); border-color: var(--bd); }
.center-copy { text-align: center; margin: 0 auto; } .center-kicker { text-align: center; }
.pick-shelf { margin-top: 28px; }
.pick-shelf + .pick-shelf { margin-top: 34px; padding-top: 24px; border-top: 1px dashed var(--bd-soft); }
.pick-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.pick-head h3 { font-size: clamp(20px, 3vw, 30px); }
.pick-head p { max-width: 520px; color: var(--muted); font-size: 13px; text-align: right; }
.coins-star { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.coins-research { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.coin.compact { padding: 14px; }
.coin.compact .top { margin-bottom: 6px; }
.coin.compact .coin-logo { width: 38px; height: 38px; font-size: 13px; }
.coin.compact .tk { font-size: 14px; } .coin.compact .nm { font-size: 10px; }
.coin.compact dl { grid-template-columns: 1fr; gap: 2px; margin: 6px 0; font-size: 10.5px; }
.coin.compact dt { display: none; } .coin.compact dd { text-align: left; }
.coin.compact .why { font-size: 11.5px; line-height: 1.45; }
.coin.compact .coin-links { margin-top: 8px; padding-top: 8px; }
.coin.compact .coin-links a { font-size: 10px; padding: 3px 7px; }
.coin.micro { padding: 12px; min-height: 0; }
.coin.micro .top { display: block; margin-bottom: 5px; }
.coin.micro .coin-logo { display: none; }
.coin.micro .tk { font-size: 13px; color: var(--gold); } .coin.micro .nm { font-size: 9.5px; }
.coin.micro dl { display: none; }
.coin.micro .why { border-top: 1px solid var(--bd-soft); margin-top: 6px; padding-top: 6px; font-size: 10.8px; line-height: 1.4; }
.coin.micro .coin-links { display: none; }
@media (max-width: 980px) { .coins-star { grid-template-columns: repeat(3, minmax(0, 1fr)); } .coins-research { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pick-head { display: block; text-align: center; } .pick-head p { text-align: center; margin: 8px auto 0; } .coins-star, .coins-research { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .coins-star, .coins-research { grid-template-columns: 1fr 1fr; } .hero-btn { min-width: 138px; padding: 12px 16px; } }
.home-picks-panel { margin-top: 28px; border: 1px solid var(--bd); border-radius: 22px; padding: 26px; background: rgba(8, 12, 24, 0.5); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32); }
.home-picks-head { margin-bottom: 14px; } .home-picks-head.secondary { margin-top: 24px; }
.home-picks-head h3 { font-size: clamp(20px, 2.8vw, 30px); color: var(--text); margin-bottom: 6px; }
.home-picks-head p { color: var(--muted); max-width: 760px; font-size: 14px; }
.home-coin-list { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.home-coin-chip { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 7px 14px 7px 7px; border: 1px solid var(--bd-soft); border-radius: 999px; background: var(--panel2); color: var(--text); text-decoration: none; font-family: "IBM Plex Mono"; font-size: 11px; letter-spacing: 0.05em; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.home-coin-chip:after { content: ""; position: absolute; inset: 0; background: var(--grad); background-size: 300% 100%; mix-blend-mode: soft-light; opacity: 0.12; pointer-events: none; animation: foilShift 9s linear infinite; }
.home-coin-chip:hover { transform: translateY(-3px); border-color: var(--acc); box-shadow: var(--glow); }
.home-coin-chip:hover:after { opacity: 0.32; }
.home-coin-chip img { position: relative; z-index: 1; width: 38px; height: 38px; display: block; border-radius: 50%; object-fit: cover; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--bd-soft); }
.home-coin-chip span { position: relative; z-index: 1; color: var(--text); white-space: nowrap; }
.home-coin-chip.small { min-height: 46px; padding: 6px 12px 6px 6px; opacity: 0.95; }
.home-coin-chip.small img { width: 32px; height: 32px; }
.home-picks-cta { margin-top: 24px; display: flex; justify-content: flex-start; }
@media (max-width: 620px) { .home-picks-panel { padding: 18px; } .home-coin-chip { width: calc(50% - 4px); justify-content: flex-start; } .home-picks-cta { justify-content: stretch; } .home-picks-cta .hero-btn { width: 100%; } }
@media (max-width: 420px) { .home-coin-chip { width: 100%; } }

/* ========================================================================== */
/* ========================================================================== */
/*  30 · BITCOIN BREAKDOWN PAGE SUPPORT */
/*  Chart labs, cycle visualisation, equation panels, scenario cards and study tooling. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
header.hero { position: relative; z-index: 3; padding: 132px 22px 70px; text-align: center; }
.kick { display: inline-block; font-family: "IBM Plex Mono"; color: var(--ink); background: var(--grad); background-size: 200% auto; padding: 5px 12px; border-radius: 999px; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; margin-bottom: 18px; animation: foilShift 6s linear infinite; }
.hero h1 { font-family: "Cinzel", "Times New Roman", serif; font-size: clamp(34px, 7vw, 82px); }
.hero h1 .b { background: var(--grad); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foilShift 6s linear infinite; }
.hero p { max-width: 640px; margin: 24px auto 0; color: var(--muted); font-size: 17px; }
.hero .consts { margin-top: 26px; font-family: "IBM Plex Mono"; font-size: 12.5px; color: var(--gold); letter-spacing: 0.1em; }
.step { font-family: "IBM Plex Mono"; font-size: 12px; letter-spacing: 0.14em; color: var(--acc); margin-bottom: 12px; }
.step:before { content: "◆ LV. "; color: var(--gold); }
.cur { display: inline-block; width: 9px; height: 14px; background: var(--acc); margin-left: 4px; vertical-align: -2px; border-radius: 2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 26px; }
@media (max-width: 780px) { .cols { grid-template-columns: 1fr; } }
.box { background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 16px; padding: 22px; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.box:hover { transform: translateY(-3px); border-color: var(--acc); box-shadow: var(--glow); }
.box h4 { position: relative; z-index: 1; font-size: 17px; margin-bottom: 8px; }
.box p { position: relative; z-index: 1; font-size: 13.5px; color: var(--muted); }
.box .who { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); margin-bottom: 6px; }
.mtable { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 22px; font-family: "IBM Plex Mono"; font-size: 13px; background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 14px; overflow: hidden; }
.mtable th, .mtable td { padding: 11px 13px; text-align: right; border-bottom: 1px solid var(--bd-soft); }
.mtable th { color: var(--acc); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.mtable th:first-child, .mtable td:first-child { text-align: left; color: var(--text); }
.mtable td { color: var(--muted); }
.mtable .hl { color: var(--gold); }
.mtable tr:hover td { background: var(--panel2); }
.eq { font-family: "IBM Plex Mono"; color: var(--acc2); font-size: clamp(14px, 2.2vw, 19px); background: var(--panel); border: 1px solid var(--bd-soft); border-left: 3px solid var(--acc); border-radius: 12px; padding: 14px 18px; margin: 14px 0; overflow-x: auto; }
.eq .d { color: var(--muted); }
.pie-wrap { display: grid; grid-template-columns: 380px 1fr; gap: 36px; align-items: center; margin-top: 26px; }
@media (max-width: 780px) { .pie-wrap { grid-template-columns: 1fr; } }
.pie { width: min(320px, 78vw); aspect-ratio: 1; border-radius: 50%; margin: auto; position: relative; background: conic-gradient(from -90deg, var(--mag) 0deg 96deg, var(--acc) 96deg 360deg); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 0 50px var(--bd); }
.pie:after { content: "1440d"; position: absolute; inset: 24%; border-radius: 50%; display: grid; place-items: center; background: #070b16; color: var(--gold); font-family: "Cinzel", "Times New Roman", serif; font-size: 1.3rem; border: 1px solid var(--bd); }
html[data-theme="codex"] .pie:after { background: #0c0902; } html[data-theme="void"] .pie:after { background: #07041a; }
.legend { display: flex; flex-direction: column; gap: 10px; font-family: "IBM Plex Mono"; font-size: 13px; margin-top: 18px; }
.legend .d { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; }
.shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 900px) { .shapes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .shapes { grid-template-columns: 1fr; } }
.shape { background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 16px; padding: 20px; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.shape:hover { transform: translateY(-3px); border-color: var(--acc); box-shadow: var(--glow); }
.shape svg { position: relative; z-index: 1; width: 100%; height: 84px; display: block; margin-bottom: 10px; }
.shape svg * { fill: none; stroke: var(--acc2); stroke-width: 1.6; }
.shape svg .f { fill: var(--panel2); stroke: none; }
.shape h4 { position: relative; z-index: 1; font-size: 15px; margin-bottom: 4px; }
.shape .fx { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--gold); margin-bottom: 6px; }
.shape p { position: relative; z-index: 1; font-size: 12px; color: var(--muted); }
.engine { display: grid; grid-template-columns: 330px 1fr; gap: 22px; margin-top: 26px; }
@media (max-width: 860px) { .engine { grid-template-columns: 1fr; } }
.ctrl { background: var(--panel); border: 1px solid var(--bd); border-radius: 18px; padding: 24px; }
.ctrl h4 { font-family: "IBM Plex Mono"; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); margin-bottom: 16px; }
.fld { margin-bottom: 16px; }
.fld label { display: flex; justify-content: space-between; font-family: "IBM Plex Mono"; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.fld label b { color: var(--gold); }
.fld input[type=range] { width: 100%; accent-color: var(--acc); }
.fld input[type=number] { width: 100%; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--bd-soft); color: var(--text); font-family: "IBM Plex Mono"; padding: 9px 12px; border-radius: 10px; }
.marks { display: flex; justify-content: space-between; font-family: "IBM Plex Mono"; font-size: 9px; color: var(--faint); margin-top: 3px; }
.stage { background: var(--panel); border: 1px solid var(--bd); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; }
.stage svg { width: 100%; height: 230px; }
.outs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bd-soft); border: 1px solid var(--bd-soft); border-radius: 14px; overflow: hidden; margin-top: 18px; }
@media (max-width: 520px) { .outs { grid-template-columns: 1fr 1fr; } }
.out { background: rgba(8, 12, 24, 0.55); padding: 14px; text-align: center; }
.out span { display: block; font-family: "IBM Plex Mono"; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.out b { font-family: "Cinzel", "Times New Roman", serif; font-size: clamp(15px, 2.4vw, 22px); color: var(--acc); }
.verdict { margin-top: 16px; padding: 14px; border: 1px solid var(--bd); border-radius: 12px; text-align: center; font-family: "IBM Plex Mono"; font-size: 13px; }
.verdict.high { color: var(--acc); border-color: var(--acc); box-shadow: var(--glow); }
.verdict.hum { color: var(--gold); border-color: rgba(255, 207, 77, 0.5); }
.verdict.broken { color: var(--mag); border-color: rgba(255, 92, 200, 0.5); }
.scn-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.scn-tab { font-family: "IBM Plex Mono"; font-size: 12px; padding: 10px 16px; border: 1px solid var(--bd-soft); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: 0.25s; }
.scn-tab:hover { color: var(--text); border-color: var(--bd); }
.scn-tab.on { color: var(--ink); background: var(--grad); background-size: 200% auto; border-color: transparent; animation: foilShift 6s linear infinite; }
.scn-body { position: relative; overflow: hidden; margin-top: 18px; background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 18px; padding: 24px; min-height: 140px; }
.scn-body h4 { position: relative; z-index: 1; font-size: 19px; margin-bottom: 8px; }
.scn-body .px { position: relative; z-index: 1; font-family: "IBM Plex Mono"; color: var(--gold); font-size: 13px; margin: 8px 0; }
.scn-body p { position: relative; z-index: 1; color: var(--muted); font-size: 14px; }
.scn-body .an { position: relative; z-index: 1; margin-top: 10px; font-style: italic; color: var(--text); font-size: 13px; }
.floorgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 26px; }
@media (max-width: 980px) { .floorgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .floorgrid { grid-template-columns: 1fr; } }
.floorcard { background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 16px; padding: 20px; min-height: 190px; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.floorcard:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: var(--glow); }
.floorcard .price { position: relative; z-index: 1; font-family: "Cinzel", "Times New Roman", serif; font-size: clamp(20px, 3.3vw, 30px); line-height: 1; color: var(--gold); margin-bottom: 8px; }
.floorcard .tag { position: relative; z-index: 1; display: inline-block; font-family: "IBM Plex Mono"; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc); border: 1px solid var(--bd-soft); border-radius: 999px; padding: 4px 9px; margin-bottom: 10px; }
.floorcard p { position: relative; z-index: 1; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.floorcard.main { border-color: var(--acc); box-shadow: 0 0 38px rgba(61, 155, 255, 0.22); }
.teachmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
@media (max-width: 820px) { .teachmap { grid-template-columns: 1fr; } }
.teach { border: 1px dashed var(--bd); background: var(--panel); border-radius: 14px; padding: 18px; }
.teach b { display: block; color: var(--gold); font-family: "IBM Plex Mono"; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 7px; }
.teach p { font-size: 12.5px; color: var(--muted); }
.watch-warning { border: 1px solid var(--bd-soft); border-radius: 16px; padding: 20px; margin-top: 28px; background: var(--panel); color: var(--muted); font-size: 14px; line-height: 1.75; }
.watch-warning b { color: var(--gold); }
body[data-page="bitcoin-breakdown"] footer .footgrid { align-items: start; }

/* ========================================================================== */
/* ========================================================================== */
/*  40 · SHARED CONTENT-PAGE SUPPORT */
/*  Reusable page hero, module cards, charts, tables, calculators and informational components. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
.linkbtn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-family: "IBM Plex Mono"; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--bd); color: var(--acc); padding: 12px 20px; border-radius: 12px; margin: 6px; transition: transform 0.3s, box-shadow 0.3s; background: var(--panel2); font-size: 11px; }
.linkbtn:hover { transform: translateY(-2px); border-color: var(--acc); box-shadow: var(--glow); }
.linkbtn.mission-btn { color: var(--ink); background: var(--grad); background-size: 200% auto; border-color: transparent; animation: foilShift 7s linear infinite; }
.linkbtn.thesis-btn { color: var(--text); background: var(--panel2); }
.page-hero { padding: 132px 0 70px; text-align: center; border-top: none; }
.page-hero h1 { font-family: "Cinzel", "Times New Roman", serif; font-size: clamp(34px, 7vw, 80px); }
.page-hero .consts { font-family: "IBM Plex Mono"; font-size: 12px; color: var(--gold); letter-spacing: 0.12em; margin-top: 18px; }
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 900px) { .module-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .module-grid { grid-template-columns: 1fr; } }
.module { background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 16px; padding: 22px; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.module:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: var(--glow); }
.module .num { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--faint); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.module h3 { position: relative; z-index: 1; font-size: 18px; margin-bottom: 8px; }
.module p { position: relative; z-index: 1; font-size: 13.5px; color: var(--muted); }
.module .tagline { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--gold); margin-top: 10px; border-top: 1px solid var(--bd-soft); padding-top: 9px; }
.sourcebar { font-family: "IBM Plex Mono"; font-size: 11px; color: var(--muted); margin-top: 18px; }
.sourcebar a { color: var(--acc); text-decoration: none; }
.sourcebar a:hover { text-decoration: underline; }
.code-slab { background: rgba(0, 0, 0, 0.42); border: 1px solid var(--bd); border-radius: 16px; margin-top: 16px; overflow: hidden; }
.code-slab .bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--bd-soft); font-family: "IBM Plex Mono"; font-size: 11px; color: var(--gold); }
.code-slab pre { padding: 16px; overflow: auto; font-family: "IBM Plex Mono"; font-size: 11px; color: var(--acc2); line-height: 1.6; max-height: 360px; white-space: pre; }
.timeline { display: grid; gap: 12px; margin-top: 24px; }
.tl { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 14px; padding: 16px; }
.tl b { font-family: "IBM Plex Mono"; color: var(--gold); }
.tl p { color: var(--muted); font-size: 13.5px; }
@media (max-width: 620px) { .tl { grid-template-columns: 1fr; } }
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 18px; font-family: "IBM Plex Mono"; font-size: 12px; background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 14px; overflow: hidden; }
.matrix th, .matrix td { border-bottom: 1px solid var(--bd-soft); padding: 11px; text-align: left; }
.matrix th { color: var(--acc); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; }
.matrix td { color: var(--muted); }
.matrix b { color: var(--text); }

/* ========================================================================== */
/* ========================================================================== */
/*  45 · RESEARCH LAB / ASSET LAB */
/*  Project doors, source-led research boxes, lab controls, asset cards and expandable findings. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
body[data-page="research-lab"] .rl-hero .lead, body[data-page="research-asset"] .rl-asset-hero .lead { max-width: 940px; }
body[data-page="research-lab"] .center-copy, body[data-page="research-asset"] .center-copy { margin: 0 auto; text-align: center; }
.rl-mini-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.rl-taggrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 980px; margin: 22px auto 0; }
.rl-tag { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bd-soft); border-radius: 999px; padding: 8px 13px; background: transparent; color: var(--muted); font-family: "IBM Plex Mono"; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; transition: 0.25s; }
.rl-tag:hover { color: var(--acc); border-color: var(--acc); box-shadow: var(--glow); }
.rl-method-grid, .rl-lens-grid, .rl-stat-grid, .rl-asset-grid { display: grid; gap: 16px; margin-top: 28px; }
.rl-method-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rl-lens-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rl-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rl-asset-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; }
.rl-method-grid article, .rl-lens-grid article, .rl-stat, .rl-coin-door, .rl-proof-split article, .rl-cycle-card, .rl-phase-card, .rl-pattern-card, .rl-fib-box, .rl-chart-frame, .rl-chart-missing { position: relative; overflow: hidden; border: 1px solid var(--bd-soft); background: var(--panel); border-radius: 16px; }
.rl-method-grid article:after, .rl-lens-grid article:after, .rl-stat:after, .rl-coin-door:after { content: ""; position: absolute; inset: 0; background: var(--grad); background-size: 300% 100%; mix-blend-mode: soft-light; opacity: 0.1; pointer-events: none; transition: opacity 0.4s; animation: foilShift 9s linear infinite; }
.rl-coin-door:hover:after { opacity: 0.32; }
.rl-method-grid article, .rl-lens-grid article, .rl-stat, .rl-proof-split article { padding: 22px; }
.rl-method-grid article span, .rl-lens-grid article span, .rl-stat span, .rl-cycle-stats span, .rl-small-stats span b, .rl-pattern-context span { position: relative; z-index: 1; font-family: "IBM Plex Mono"; color: var(--faint); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.rl-method-grid article h3, .rl-lens-grid article b, .rl-proof-split article h3 { position: relative; z-index: 1; display: block; font-family: "Cinzel", "Times New Roman", serif; color: var(--text); font-size: 16px; line-height: 1.16; margin: 7px 0 8px; }
.rl-method-grid article p, .rl-lens-grid article p, .rl-proof-split article p, .rl-phase-card p, .rl-pattern-card p { position: relative; z-index: 1; color: var(--muted); font-size: 13.5px; }
.rl-coin-door { min-height: 142px; text-decoration: none; color: var(--text); padding: 18px 12px; display: grid; justify-items: center; text-align: center; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.rl-coin-door:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: var(--glow); }
.rl-coin-door img { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bd); background: rgba(0, 0, 0, 0.4); }
.rl-coin-door b { position: relative; z-index: 1; font-family: "Cinzel", "Times New Roman", serif; color: var(--gold); font-size: 16px; margin-top: 7px; }
.rl-coin-door span { position: relative; z-index: 1; font-size: 12px; color: var(--muted); }
.rl-coin-door em { position: relative; z-index: 1; font-family: "IBM Plex Mono"; font-style: normal; color: var(--acc); font-size: 10px; margin-top: 3px; }
.rl-proof-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.rl-note-strip { margin-top: 18px; border: 1px dashed var(--bd); border-radius: 14px; padding: 16px 18px; color: var(--muted); background: var(--panel); font-family: "IBM Plex Mono"; font-size: 12px; }
.rl-note-strip b { color: var(--gold); }
.rl-asset-mast { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 22px; max-width: 980px; margin: 0 auto; text-align: left; }
.rl-asset-mast img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bd); background: rgba(0, 0, 0, 0.4); box-shadow: var(--glow); }
.rl-asset-mast h1 { font-family: "Cinzel", "Times New Roman", serif; font-size: clamp(30px, 6vw, 66px); }
.rl-stat { min-height: 118px; padding: 20px; }
.rl-stat b { position: relative; z-index: 1; display: block; color: var(--text); font-family: "Cinzel", "Times New Roman", serif; font-size: clamp(15px, 2.3vw, 22px); line-height: 1.16; margin-top: 8px; }
.rl-chart-frame { margin-top: 24px; padding: 14px; }
.rl-chart-frame img { width: 100%; display: block; border-radius: 12px; border: 1px solid var(--bd-soft); background: rgba(0, 0, 0, 0.4); }
.rl-chart-frame figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px 0; color: var(--muted); font-family: "IBM Plex Mono"; font-size: 11px; }
.rl-chart-frame figcaption span { color: var(--gold); }
.rl-chart-frame .rl-chart-missing { display: none; margin-top: 0; }
.rl-chart-frame.is-missing .rl-chart-missing { display: block; }
.rl-chart-missing { margin-top: 24px; padding: 24px; border-style: dashed; text-align: center; }
.rl-chart-missing b { display: block; font-family: "Cinzel", "Times New Roman", serif; color: var(--gold); margin-bottom: 7px; }
.rl-chart-missing span { display: block; color: var(--muted); font-family: "IBM Plex Mono"; font-size: 11px; word-break: break-word; }
.rl-controls { display: grid; gap: 12px; margin-top: 24px; border: 1px solid var(--bd-soft); border-radius: 16px; padding: 18px; background: var(--panel); }
.rl-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rl-filter, .rl-search input { border: 1px solid var(--bd-soft); background: transparent; color: var(--muted); border-radius: 999px; padding: 9px 14px; font-family: "IBM Plex Mono"; font-size: 11px; }
.rl-filter { cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; }
.rl-filter:hover, .rl-filter.active { color: var(--ink); border-color: transparent; background: var(--grad); background-size: 200% auto; animation: foilShift 6s linear infinite; }
.rl-search { display: grid; gap: 7px; color: var(--gold); font-family: "IBM Plex Mono"; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.rl-search input { width: 100%; border-radius: 10px; outline: none; color: var(--text); }
.rl-cycle-explorer, .rl-pattern-library, .rl-phase-stack, .rl-inline-patterns { display: grid; gap: 16px; margin-top: 24px; }
.rl-cycle-card { overflow: hidden; }
.rl-cycle-card summary { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; cursor: pointer; padding: 20px 22px; list-style: none; border-bottom: 1px solid var(--bd-soft); }
.rl-cycle-card summary::-webkit-details-marker { display: none; }
.rl-cycle-card summary span { font-family: "IBM Plex Mono"; color: var(--acc); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.rl-cycle-card summary b { color: var(--text); font-family: "Cinzel", "Times New Roman", serif; font-size: 16px; }
.rl-cycle-inner { padding: 20px; }
.rl-cycle-stats, .rl-small-stats, .rl-read-grid { display: grid; gap: 8px; }
.rl-cycle-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 14px; }
.rl-cycle-stats div, .rl-small-stats span, .rl-read-grid div { border: 1px solid var(--bd-soft); border-radius: 10px; padding: 11px; background: rgba(0, 0, 0, 0.2); }
.rl-cycle-stats b, .rl-read-grid span, .rl-small-stats span { display: block; color: var(--text); font-family: "IBM Plex Mono"; font-size: 11.5px; margin-top: 4px; }
.rl-fib-box { padding: 18px; margin: 14px 0; }
.rl-fib-box b { color: var(--gold); font-family: "Cinzel", "Times New Roman", serif; font-size: 14px; display: block; }
.rl-fib-box span, .rl-fib-box p { color: var(--muted); font-family: "IBM Plex Mono"; font-size: 11px; }
.rl-fib-box div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rl-fib-box em { font-style: normal; color: var(--acc); border: 1px solid var(--bd-soft); border-radius: 999px; padding: 6px 10px; font-family: "IBM Plex Mono"; font-size: 10.5px; }
.rl-phase-card, .rl-pattern-card { padding: 20px; }
.rl-card-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.rl-card-top span { display: block; color: var(--acc); font-family: "IBM Plex Mono"; font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; margin-bottom: 4px; }
.rl-card-top h4 { font-size: 18px; }
.rl-status { display: inline-flex; align-items: center; white-space: nowrap; border: 1px solid var(--bd-soft); border-radius: 999px; padding: 6px 10px; color: var(--gold); background: transparent; font-family: "IBM Plex Mono"; font-size: 10px; }
.rl-small-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 12px 0; }
.rl-read-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 13px; }
.rl-read-grid b { color: var(--gold); font-family: "IBM Plex Mono"; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.rl-inline-patterns { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--bd-soft); }
.rl-pattern-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: start; }
.rl-pattern-context { border: 1px solid var(--bd-soft); border-radius: 12px; padding: 14px; background: rgba(0, 0, 0, 0.2); }
.rl-pattern-context b { display: block; color: var(--gold); font-family: "Cinzel", "Times New Roman", serif; font-size: 13px; margin-top: 4px; }
[hidden] { display: none !important; }
@media (max-width: 1080px) { .rl-asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rl-cycle-stats, .rl-small-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rl-method-grid, .rl-lens-grid, .rl-stat-grid, .rl-proof-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rl-asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rl-cycle-card summary { grid-template-columns: 1fr; } .rl-read-grid, .rl-pattern-wrap { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .rl-method-grid, .rl-lens-grid, .rl-stat-grid, .rl-proof-split, .rl-cycle-stats, .rl-small-stats { grid-template-columns: 1fr; } .rl-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rl-asset-mast { grid-template-columns: 1fr; text-align: center; } .rl-asset-mast img { margin: 0 auto; } .rl-card-top { display: grid; } }
@media (max-width: 420px) { .rl-asset-grid { grid-template-columns: 1fr; } }

/* ========================================================================== */
/* ========================================================================== */
/*  50 · RETAIL ROLODEX */
/*  Structured learning-map panels, module clusters, lesson units and interaction patterns. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
.rr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.rr-actions .linkbtn { min-width: 170px; }
.rr-alert { margin: 26px auto 0; max-width: 920px; border: 1px solid var(--bd); background: var(--panel); border-radius: 16px; padding: 18px 20px; font-family: "IBM Plex Mono"; font-size: 12px; color: var(--muted); text-align: left; }
.rr-alert b { color: var(--gold); }
.rr-map { display: grid; grid-template-columns: 1.05fr 1.35fr; gap: 18px; margin-top: 30px; }
.rr-panel { background: var(--panel); border: 1px solid var(--bd-soft); border-radius: 18px; padding: 24px; }
.rr-panel:after { content: ""; position: absolute; inset: 0; background: var(--grad); background-size: 300% 100%; mix-blend-mode: soft-light; opacity: 0.08; pointer-events: none; animation: foilShift 11s linear infinite; }
.rr-panel h3 { position: relative; z-index: 1; font-size: 22px; margin-bottom: 10px; }
.rr-panel p { position: relative; z-index: 1; color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.rr-kernel { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.kernel-card { border: 1px solid var(--bd-soft); background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 14px 15px; min-height: 106px; }
.kernel-card b { display: block; color: var(--gold); font-family: "IBM Plex Mono"; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.kernel-card span { color: var(--text); font-size: 13px; }
.rr-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.flow-step { border: 1px solid var(--bd-soft); border-radius: 14px; padding: 18px; background: var(--panel); min-height: 156px; }
.flow-step .num { position: relative; z-index: 1; font-family: "Cinzel", "Times New Roman", serif; color: var(--acc); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.flow-step h3 { position: relative; z-index: 1; font-size: 17px; margin-bottom: 8px; }
.flow-step p { position: relative; z-index: 1; font-size: 13px; color: var(--muted); }
.unit-cluster { margin-top: 32px; border: 1px solid var(--bd-soft); border-radius: 20px; background: var(--panel); overflow: hidden; }
.cluster-head { padding: 24px; border-bottom: 1px solid var(--bd-soft); background: rgba(0, 0, 0, 0.2); display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.cluster-head h3 { font-size: clamp(22px, 3.2vw, 32px); }
.cluster-head p { color: var(--muted); max-width: 780px; margin-top: 8px; }
.cluster-badge { font-family: "IBM Plex Mono"; color: var(--ink); border: none; border-radius: 999px; padding: 9px 14px; font-size: 10.5px; white-space: nowrap; background: var(--grad); background-size: 200% auto; animation: foilShift 7s linear infinite; }
.unit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd-soft); }
.unit-card { background: rgba(8, 12, 24, 0.55); padding: 22px; min-height: 245px; }
.unit-card:hover { background: rgba(8, 12, 24, 0.7); }
.unit-card:after { content: ""; position: absolute; inset: 0; background: var(--grad); background-size: 300% 100%; mix-blend-mode: soft-light; opacity: 0; pointer-events: none; transition: opacity 0.4s; animation: foilShift 9s linear infinite; }
.unit-card:hover:after { opacity: 0.22; }
.unit-code { position: relative; z-index: 1; font-family: "IBM Plex Mono"; color: var(--faint); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 9px; }
.unit-card h4 { position: relative; z-index: 1; font-size: 18px; margin-bottom: 10px; }
.unit-card p { position: relative; z-index: 1; color: var(--muted); font-size: 13.5px; }
.unit-card ul { position: relative; z-index: 1; list-style: none; margin-top: 12px; display: grid; gap: 6px; }
.unit-card li { color: var(--text); font-size: 12.5px; padding-left: 16px; position: relative; }
.unit-card li:before { content: "◆"; color: var(--acc); position: absolute; left: 0; }
.pop-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pop-open, .mini-toggle { font-family: "IBM Plex Mono"; color: var(--acc); background: rgba(0, 0, 0, 0.2); border: 1px solid var(--bd-soft); border-radius: 999px; padding: 8px 12px; font-size: 10.5px; cursor: pointer; transition: 0.25s; }
.pop-open:hover, .mini-toggle:hover { border-color: var(--acc); box-shadow: var(--glow); }
.hidden-note { display: none; margin-top: 12px; border-top: 1px dashed var(--bd-soft); padding-top: 12px; color: var(--muted); font-size: 13px; position: relative; z-index: 1; }
.hidden-note.show { display: block; animation: fade 0.4s ease; }
.pattern-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 20px; font-family: "IBM Plex Mono"; font-size: 12px; overflow: hidden; border-radius: 16px; border: 1px solid var(--bd-soft); background: var(--panel); }
.pattern-table th, .pattern-table td { border-bottom: 1px solid var(--bd-soft); padding: 14px 13px; text-align: left; vertical-align: top; }
.pattern-table th { color: var(--acc); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; background: rgba(0, 0, 0, 0.2); }
.pattern-table td { color: var(--muted); }
.pattern-table b { color: var(--text); }
.scar-box { margin-top: 24px; border: 1px solid var(--bd); border-radius: 20px; padding: 26px; background: var(--panel); }
.scar-box h3 { font-size: clamp(22px, 3vw, 32px); margin-bottom: 12px; }
.scar-box p { color: var(--muted); max-width: 900px; }
.scar-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.scar-metric { border: 1px solid var(--bd-soft); border-radius: 12px; padding: 16px; background: rgba(0, 0, 0, 0.2); text-align: center; }
.scar-metric b { display: block; font-family: "Cinzel", "Times New Roman", serif; font-size: 18px; color: var(--gold); }
.scar-metric span { font-family: "IBM Plex Mono"; font-size: 10.5px; color: var(--muted); }
.route-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.route-strip a { font-family: "IBM Plex Mono"; font-size: 11px; color: var(--muted); text-decoration: none; border: 1px solid var(--bd-soft); border-radius: 999px; padding: 8px 12px; transition: 0.25s; }
.route-strip a:hover { color: var(--acc); border-color: var(--acc); box-shadow: var(--glow); }
.modal-backdrop { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(5, 7, 16, 0.78); backdrop-filter: blur(8px); }
.modal-backdrop.show { display: flex; animation: fade 0.3s ease; }
.modal-card { position: relative; overflow: hidden; width: min(760px, 100%); max-height: min(80vh, 760px); overflow-y: auto; background: rgba(10, 14, 28, 0.92) padding-box, var(--grad) border-box; border: 2px solid transparent; background-size: auto, 300% auto; border-radius: 20px; padding: 28px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); animation: foilShift 10s linear infinite; }
.modal-top { position: relative; z-index: 1; display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--bd-soft); padding-bottom: 14px; margin-bottom: 14px; }
.modal-top h3 { font-family: "Cinzel", "Times New Roman", serif; font-size: 22px; }
.modal-close { border: 1px solid var(--bd-soft); color: var(--gold); background: transparent; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-family: "IBM Plex Mono"; }
.modal-close:hover { border-color: var(--acc); box-shadow: var(--glow); }
.modal-body { position: relative; z-index: 1; }
.modal-body p { color: var(--muted); margin-top: 12px; }
.modal-body b { color: var(--text); }
.modal-list { position: relative; z-index: 1; margin-top: 14px; display: grid; gap: 8px; list-style: none; }
.modal-list li { color: var(--text); border-left: 2px solid var(--acc); padding-left: 12px; font-size: 13.5px; }
@media (max-width: 980px) { .unit-grid, .rr-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .rr-map { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cluster-head { grid-template-columns: 1fr; } .unit-grid, .rr-kernel, .rr-flow, .scar-metrics { grid-template-columns: 1fr; } .pattern-table, .pattern-table thead, .pattern-table tbody, .pattern-table th, .pattern-table td, .pattern-table tr { display: block; } .pattern-table thead { display: none; } .pattern-table tr { border-bottom: 1px solid var(--bd-soft); background: rgba(0, 0, 0, 0.2); } .pattern-table td { border-bottom: none; } .pattern-table td:before { content: attr(data-label); display: block; color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 5px; } }

/* ========================================================================== */
/* ========================================================================== */
/*  60 · STAR PICKS / THE BINDER */
/*  Coin dossiers, attribute grids, fact drawers, source bars and responsive card behaviour. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */
body[data-page="star-picks"] {
  --sp-green: var(--acc2); --sp-cyan: var(--acc2); --sp-gold: var(--gold);
  --sp-mag: var(--mag); --sp-text: var(--text); --sp-muted: var(--muted);
  --sp-faint: var(--faint); --sp-line: var(--bd); --sp-line-soft: var(--bd-soft);
}
body[data-page="star-picks"] .watch-intro { max-width: 960px; margin: 0 auto 26px; text-align: center; }
body[data-page="star-picks"] .page-hero .lead { max-width: 900px; }
body[data-page="star-picks"] .page-hero .consts { max-width: 980px; margin: 0 auto; }
body[data-page="star-picks"] .coin-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; margin-top: 28px; }
/* the card: rarity border via gradient ring + engraved inner frame + foil + gem */
body[data-page="star-picks"] .coin-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-self: start; height: auto; padding: 18px; border-radius: 18px; border: 2px solid transparent; background: linear-gradient(rgba(10, 14, 28, 0.92), rgba(10, 14, 28, 0.92)) padding-box, var(--grad) border-box; background-size: auto, 300% auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.4); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s; animation: foilShift 12s linear infinite; }
body[data-page="star-picks"] .coin-card:after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--grad); background-size: 300% 100%; mix-blend-mode: soft-light; opacity: 0.12; pointer-events: none; transition: opacity 0.4s; animation: foilShift 9s linear infinite; }
body[data-page="star-picks"] .coin-card:before { content: "◆"; position: absolute; top: 12px; right: 14px; z-index: 2; font-size: 13px; color: var(--gold); text-shadow: var(--glow); pointer-events: none; }
body[data-page="star-picks"] .coin-card:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: var(--glow), 0 26px 60px rgba(0, 0, 0, 0.5); }
body[data-page="star-picks"] .coin-card:hover:after { opacity: 0.4; }
body[data-page="star-picks"] .coin-card[data-bucket="research worthy"]:before { color: var(--acc2); }
body[data-page="star-picks"] .coin-card.is-hidden { display: none !important; }
body[data-page="star-picks"] .coin-card:not(:has(details[open])) { min-height: 0; }
body[data-page="star-picks"] .coin-card > * { position: relative; z-index: 1; }
body[data-page="star-picks"] .coin-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
body[data-page="star-picks"] .coin-orb { position: relative; display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; text-decoration: none; color: var(--text); border: 2px solid transparent; background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--grad) border-box; background-size: auto, 200% auto; box-shadow: var(--glow); transition: 0.35s; animation: foilShift 7s linear infinite; }
body[data-page="star-picks"] .coin-orb:hover { transform: scale(1.06) rotate(-4deg); }
body[data-page="star-picks"] .coin-orb img { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body[data-page="star-picks"] .coin-orb img[hidden] { display: none !important; }
body[data-page="star-picks"] .coin-orb span { position: relative; z-index: 1; padding: 0 5px; text-align: center; font-family: "Cinzel", "Times New Roman", serif; font-size: 13px; line-height: 1; }
body[data-page="star-picks"] .coin-live { min-width: 126px; padding: 9px 11px; border: 1px solid var(--bd-soft); border-radius: 12px; background: rgba(0, 0, 0, 0.35); text-align: right; font-family: "IBM Plex Mono"; }
body[data-page="star-picks"] .coin-live b { display: block; margin-bottom: 3px; color: var(--text); font-size: 13px; line-height: 1.1; font-weight: 700; }
body[data-page="star-picks"] .coin-live .chg { display: block; color: var(--faint); font-size: 10px; line-height: 1.25; }
body[data-page="star-picks"] .coin-live .chg.up { color: var(--acc2); }
body[data-page="star-picks"] .coin-live .chg.down { color: var(--mag); }
body[data-page="star-picks"] .coin-kicker { display: inline-block; margin: 8px 0 7px; color: var(--ink); background: var(--grad); background-size: 200% auto; padding: 3px 10px; border-radius: 999px; font-family: "IBM Plex Mono"; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; animation: foilShift 6s linear infinite; }
body[data-page="star-picks"] .coin-copy h3 { margin: 0 0 7px; color: var(--text); font-family: "Cinzel", "Times New Roman", serif; font-size: 19px; }
body[data-page="star-picks"] .coin-copy h3 em { display: block; margin-top: 4px; color: var(--gold); font-family: "IBM Plex Mono"; font-size: 12px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
body[data-page="star-picks"] .coin-copy p { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.55; }
body[data-page="star-picks"] .coin-copy .role, body[data-page="star-picks"] .role { min-height: 48px; color: var(--text); }
body[data-page="star-picks"] .status-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 12px; }
body[data-page="star-picks"] .mini-pill { border: 1px solid var(--bd-soft); border-radius: 999px; padding: 6px 9px; background: rgba(0, 0, 0, 0.3); color: var(--muted); font-family: "IBM Plex Mono"; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
body[data-page="star-picks"] .mini-pill.green { color: var(--acc2); border-color: rgba(54, 224, 208, 0.45); }
body[data-page="star-picks"] .mini-pill.amber, body[data-page="star-picks"] .mini-pill.audit { color: var(--gold); border-color: rgba(255, 207, 77, 0.45); }
body[data-page="star-picks"] .mini-pill.red { color: var(--mag); border-color: rgba(255, 92, 200, 0.45); }
body[data-page="star-picks"] .rr-attribute-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 13px 0 12px; }
body[data-page="star-picks"] .rr-attr { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 7px; align-items: start; min-height: 66px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--bd-soft); background: rgba(0, 0, 0, 0.28); }
body[data-page="star-picks"] .rr-icon { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1px solid currentColor; background: rgba(0, 0, 0, 0.35); font-family: "IBM Plex Mono"; font-size: 10px; line-height: 1; }
body[data-page="star-picks"] .rr-attr b { color: var(--text); font-family: "IBM Plex Mono"; font-size: 10px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }
body[data-page="star-picks"] .rr-attr em { grid-column: 2; margin-top: 2px; color: var(--muted); font-family: "IBM Plex Mono"; font-size: 9.7px; font-style: normal; line-height: 1.35; }
body[data-page="star-picks"] .rr-good .rr-icon, body[data-page="star-picks"] .rr-good b, body[data-page="star-picks"] .rr-pass .rr-icon, body[data-page="star-picks"] .rr-pass b, body[data-page="star-picks"] .rr-yes .rr-icon, body[data-page="star-picks"] .rr-yes b { color: var(--acc2); }
body[data-page="star-picks"] .rr-watch .rr-icon, body[data-page="star-picks"] .rr-watch b, body[data-page="star-picks"] .rr-mixed .rr-icon, body[data-page="star-picks"] .rr-mixed b, body[data-page="star-picks"] .rr-audit .rr-icon, body[data-page="star-picks"] .rr-audit b { color: var(--gold); }
body[data-page="star-picks"] .rr-bad .rr-icon, body[data-page="star-picks"] .rr-bad b, body[data-page="star-picks"] .rr-no .rr-icon, body[data-page="star-picks"] .rr-no b, body[data-page="star-picks"] .rr-fail .rr-icon, body[data-page="star-picks"] .rr-fail b { color: var(--mag); }
body[data-page="star-picks"] .knowledge-core { display: grid; gap: 0; margin: 12px 12px 0; border: 1px solid var(--bd-soft); border-radius: 12px; background: rgba(0, 0, 0, 0.28); overflow: hidden; }
body[data-page="star-picks"] .reveal-panel .knowledge-core { margin: 12px 12px 0; }
body[data-page="star-picks"] .fact-row, body[data-page="star-picks"] .reveal-panel .fact-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--bd-soft); padding: 9px 10px; font-family: "IBM Plex Mono"; font-size: 11px; }
body[data-page="star-picks"] .fact-row:first-child { border-top: none; }
body[data-page="star-picks"] .fact-row span { color: var(--acc); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; }
body[data-page="star-picks"] .fact-row b { color: var(--muted); font-weight: 500; line-height: 1.45; }
body[data-page="star-picks"] .reveal-panel { margin-top: auto; }
body[data-page="star-picks"] .reveal-panel details { margin-top: 10px; border: 1px solid var(--bd-soft); border-radius: 14px; background: rgba(0, 0, 0, 0.28); overflow: hidden; }
body[data-page="star-picks"] .reveal-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; padding: 11px 13px; color: var(--gold); font-family: "IBM Plex Mono"; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
body[data-page="star-picks"] .reveal-panel summary::-webkit-details-marker { display: none; }
body[data-page="star-picks"] .reveal-panel summary::after { content: "▾"; display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--bd-soft); color: var(--acc); background: rgba(0, 0, 0, 0.35); }
body[data-page="star-picks"] .reveal-panel details[open] summary { border-bottom: 1px solid var(--bd-soft); }
body[data-page="star-picks"] .reveal-panel details[open] summary::after { content: "▴"; }
body[data-page="star-picks"] .detail-body { padding: 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
body[data-page="star-picks"] .detail-body p { margin: 8px 0; }
body[data-page="star-picks"] .detail-body b { color: var(--text); }
body[data-page="star-picks"] .coin-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
body[data-page="star-picks"] .coin-links a { text-decoration: none; border: 1px solid var(--bd-soft); color: var(--acc); border-radius: 999px; padding: 7px 11px; font-family: "IBM Plex Mono"; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(0, 0, 0, 0.25); }
body[data-page="star-picks"] .coin-links a:hover { border-color: var(--acc); color: var(--gold); box-shadow: var(--glow); }
body[data-page="star-picks"] .sourcebar { margin-top: 28px; border: 1px solid var(--bd-soft); border-radius: 16px; padding: 18px; background: var(--panel); color: var(--muted); font-size: 13px; line-height: 1.7; }
body[data-page="star-picks"] .sourcebar b { color: var(--gold); }
body[data-page="star-picks"] .sourcebar a { color: var(--acc); text-decoration: none; margin-right: 12px; }
body[data-page="star-picks"] .sourcebar a:hover { text-decoration: underline; }
@media (max-width: 1180px) { body[data-page="star-picks"] .coin-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { body[data-page="star-picks"] .coin-board { grid-template-columns: 1fr; } body[data-page="star-picks"] .coin-card { min-height: auto; } }
@media (max-width: 540px) { body[data-page="star-picks"] .coin-top { align-items: center; } body[data-page="star-picks"] .coin-orb { flex-basis: 54px; width: 54px; height: 54px; } body[data-page="star-picks"] .coin-live { min-width: 112px; } body[data-page="star-picks"] .rr-attribute-grid { grid-template-columns: 1fr; } body[data-page="star-picks"] .fact-row { grid-template-columns: 1fr; gap: 3px; } }



/* ========================================================================== */
/* ========================================================================== */
/*  90 · COMPATIBILITY CONTRACT / ALIGNMENT REPAIRS */
/*  These selectors reconcile the Holo Pack base with the supplied current */
/*  index HTML: nav controls, style selector, centred home section headers, */
/*  current footer marks and modernised opaque surface layers. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/*  90.1 · SURFACE TOKEN REPAIRS                                              */
/* -------------------------------------------------------------------------- */
#nav.solid {
  background: var(--nav-bg);
}

#gate {
  background:
    radial-gradient(ellipse 100% 80% at 50% 26%, color-mix(in srgb, var(--surface-strong) 92%, transparent), var(--surface-deep));
}

.gate-card,
.chartcard,
.home-picks-panel,
.modal-card {
  background-color: var(--surface-strong);
}

footer {
  background: color-mix(in srgb, var(--surface-deep) 72%, transparent);
}

/* -------------------------------------------------------------------------- */
/*  90.2 · NAV CONTROL CONTRACT                                               */
/*  The reference index has nav controls in addition to the original logo, */
/*  links and theme buttons. This block keeps all three areas readable. */
/* -------------------------------------------------------------------------- */
#nav {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.nav-links {
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  padding: 2px 0;
}

.nav-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}

.style-dropdown {
  position: relative;
}

.style-dropdown > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid var(--bd-soft);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.style-dropdown > summary::-webkit-details-marker {
  display: none;
}

.style-dropdown > summary::after {
  content: "▾";
  color: var(--acc);
  font-size: 11px;
}

.style-dropdown[open] > summary,
.style-dropdown > summary:hover {
  border-color: var(--acc);
  color: var(--text);
  background: var(--panel2);
  box-shadow: var(--glow);
}

.style-dropdown[open] > summary::after {
  content: "▴";
}

.style-dot {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--bd);
  border-radius: 50%;
  color: var(--gold);
  line-height: 1;
}

.style-label {
  white-space: nowrap;
}

.style-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 130;
  display: grid;
  width: max-content;
  min-width: 170px;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(16px);
}

.style-menu button {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: 0.2s;
}

.style-menu button:hover,
.style-menu button[aria-current="true"] {
  border-color: var(--bd);
  background: var(--panel2);
  color: var(--text);
}

.nav-home-link,
.nav-links a[aria-current="page"] {
  color: inherit;
  text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/*  90.3 · HOMEPAGE CONTENT CONTRACT                                          */
/*  The supplied homepage uses direct .wrap children for its section heading. */
/*  Keep the later narrative sections visually centred like the opening hero. */
/* -------------------------------------------------------------------------- */
body[data-page="home"] section > .wrap > .eyebrow {
  display: flex;
  width: fit-content;
  max-width: min(100%, 920px);
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
  text-align: center;
}

body[data-page="home"] section > .wrap > .t,
body[data-page="home"] section > .wrap > h2,
body[data-page="home"] section > .wrap > .lead {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

body[data-page="home"] section > .wrap > .lead {
  max-width: 920px;
}

body[data-page="home"] .hero2,
body[data-page="home"] .hero2 + section {
  border-top: 0;
}

body[data-page="home"] .home-picks-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 22px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
  background-size: auto, 300% auto;
}

body[data-page="home"] .home-picks-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 1px solid var(--bd-soft);
  border-radius: 14px;
}

body[data-page="home"] .home-picks-cta {
  justify-content: center;
}

body[data-page="home"] .home-coin-list.research {
  opacity: 0.9;
}

.legal-mark {
  color: var(--acc);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.65;
}

/* -------------------------------------------------------------------------- */
/*  90.4 · INTERACTION ACCESSIBILITY                                          */
/* -------------------------------------------------------------------------- */
a,
button,
summary,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

button,
a {
  touch-action: manipulation;
}


/* ========================================================================== */
/* ========================================================================== */
/*  99 · RESPONSIVE / REDUCED MOTION / FINAL SAFETY OVERRIDES */
/*  Keep this final section small. This is the only permitted location for */
/*  cross-page breakpoints and motion fallback rules. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */

@media (max-width: 1080px) {
  #nav {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .nav-controls {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -3px;
  }

  body.entered header.hero,
  body.entered .page-hero,
  body.entered .hero2 {
    padding-top: 170px;
  }
}

@media (max-width: 760px) {
  #nav {
    gap: 8px;
    padding: 10px 14px;
  }

  .nav-mark {
    font-size: 15px;
  }

  .nav-links {
    grid-column: 1 / -1;
    width: 100%;
    padding-bottom: 2px;
  }

  .nav-controls {
    position: absolute;
    top: 9px;
    right: 12px;
    display: flex;
  }

  .nav-controls .nav-themes {
    display: none;
  }

  .style-dropdown > summary {
    width: 32px;
    min-height: 32px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }

  .style-label {
    display: none;
  }

  .themebar {
    top: 10px;
    right: 10px;
  }

  .gate-card {
    padding: 30px 18px;
  }

  .hero2 {
    padding-top: 122px;
  }
}

@media (max-width: 620px) {
  section {
    padding: 64px 0;
  }

  .lead {
    font-size: 15.5px;
  }

  .eyebrow {
    max-width: 100%;
    text-align: center;
  }

  .home-coin-chip {
    width: calc(50% - 5px);
  }
}

@media (max-width: 420px) {
  .home-coin-chip {
    width: 100%;
  }

  .style-menu {
    right: auto;
    left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .scan {
    opacity: 0.22;
  }
}


/* ========================================================================== */
/* ========================================================================== */
/*  90 · CURRENT MARKUP COMPATIBILITY / SHARED SELECTOR CONTRACT             */
/*  Every pack supports the same selector-swapped HTML contract.              */
/*  This bridge styles only newer shared markup; pack personality stays above. */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */

.nav-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.style-dropdown {
  position: relative;
  z-index: 140;
}

.style-dropdown > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  list-style: none;
  border: 1px solid var(--bd-soft);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.style-dropdown > summary::-webkit-details-marker { display: none; }
.style-dropdown > summary::after {
  content: "⌄";
  color: var(--acc);
  font-size: 13px;
  line-height: 1;
  transition: transform 0.22s ease;
}
.style-dropdown[open] > summary::after { transform: rotate(180deg); }
.style-dropdown > summary:hover,
.style-dropdown[open] > summary {
  border-color: var(--acc);
  box-shadow: var(--glow);
}

.style-dot {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
}

.style-label { white-space: nowrap; }

.style-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  gap: 5px;
  width: max-content;
  min-width: 184px;
  padding: 8px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--panel2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.style-menu button {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.style-menu button:hover,
.style-menu button.active,
.style-menu button[aria-pressed="true"] {
  border-color: var(--bd);
  background: var(--panel);
  color: var(--text);
}

/* Homepage section titles use the same centred reading axis as the hero. */
body[data-page="home"] section > .wrap > .eyebrow {
  display: flex;
  width: fit-content;
  max-width: min(100%, 920px);
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
  text-align: center;
}

body[data-page="home"] section > .wrap > .t,
body[data-page="home"] section > .wrap > h2,
body[data-page="home"] section > .wrap > .lead {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

body[data-page="home"] section > .wrap > .lead { max-width: 920px; }

/* Current Star Picks cards must grow independently when one accordion opens. */
body[data-page="star-picks"] .coin-board { align-items: start !important; }
body[data-page="star-picks"] .coin-card { align-self: start !important; height: auto !important; }

/* Keep the generated route shell clear of the fixed navigation. */
body.entered header.hero,
body.entered .page-hero,
body.entered .hero2 { scroll-margin-top: 104px; }

/* ========================================================================== */
/* ========================================================================== */
/*  99 · RESPONSIVE / REDUCED MOTION / FINAL SAFETY                           */
/*  One mobile selector contract and a non-animated accessibility state.       */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */

@media (max-width: 980px) {
  #nav {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
  }

  .nav-mark { justify-self: center; }
  .nav-links { width: 100%; justify-content: center; row-gap: 5px; }
  .nav-controls { justify-self: center; }

  body.entered header.hero,
  body.entered .page-hero,
  body.entered .hero2 { padding-top: 160px; }
}

@media (max-width: 620px) {
  .style-menu {
    position: fixed;
    top: 58px;
    right: 12px;
    left: 12px;
    width: auto;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .style-menu button { min-width: 0; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ========================================================================== */
/* ========================================================================== */
/*  98 · NAVIGATION — TRUE VIEWPORT CENTRING                                  */
/*  The old auto / 1fr / auto grid centred the links inside leftover space,   */
/*  which shifts the visual centre whenever the logo and display controls     */
/*  have different widths. On wide screens, equal outer tracks place the      */
/*  primary navigation on the actual centre of the browser viewport.          */
/* -------------------------------------------------------------------------- */
/* ========================================================================== */
/* ========================================================================== */

@media (min-width: 1241px) {
  #nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center;
  }

  #nav .nav-mark {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  #nav .nav-links {
    grid-column: 2;
    grid-row: 1;
    width: max-content;
    max-width: calc(100vw - 330px);
    margin: 0 !important;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #nav .nav-controls {
    position: static !important;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

/* The menu becomes a centred second row before the desktop row would crowd. */
@media (min-width: 761px) and (max-width: 1240px) {
  #nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 6px 14px;
  }

  #nav .nav-mark {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  #nav .nav-controls {
    position: static !important;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  #nav .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0 !important;
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
  }
}

/* Mobile keeps the control at the top-right and the links on their own row. */
@media (max-width: 760px) {
  #nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
  }

  #nav .nav-mark {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  #nav .nav-controls {
    position: static !important;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  #nav .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0 !important;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #nav .nav-links::-webkit-scrollbar {
    display: none;
  }
}