/* WOW World OS — black/gold command-center family.
   Canon: 00 — CURRENT — WOW World App 2 — Full OS Visual Synthesis Canon (2026-10-01). */

:root {
  --bg: #050505;
  --bg-2: #0b0b0c;
  --panel: #101012;
  --panel-2: #16161a;
  --line: rgba(212, 175, 55, 0.22);
  --line-strong: rgba(232, 193, 90, 0.55);
  --gold: #e3b74a;
  --gold-hi: #f6d77e;
  --gold-lo: #a97c1f;
  --gold-grad: linear-gradient(180deg, #f8dc85 0%, #e3b74a 48%, #b8862a 100%);
  --text: #f3efe6;
  --text-2: #b9b3a6;
  --text-3: #a8a294; /* was #8a8478 — raised for guest legibility on panels and photo scrims (≥4.5:1 on --panel-2) */
  --live: #e5484d;
  --ok: #46a758;
  --warn: #e3b74a;
  --unk: #8a8fa0;
  --focus: #ffe08a;
  --rail-w: 176px;
  --top-h: 64px;
  --radius: 10px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--gold); color: #111; padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 8px; }

/* ── Boot / failure screens (never white) ───────────────────── */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #1a1408 0%, var(--bg) 60%); z-index: 50; }
.boot .mark { width: 72px; height: 72px; opacity: 0.95; }
.boot p { color: var(--text-2); letter-spacing: 0.2em; font-size: 11px; text-transform: uppercase; margin-top: 14px; text-align: center; }

.netbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60; background: #1a1206; border: 1px solid var(--line-strong); color: var(--gold-hi); padding: 10px 16px; border-radius: 999px; font-size: 13px; box-shadow: var(--shadow); display: none; }
.netbar.on { display: block; }

/* ── Shell grid ─────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: var(--top-h) 1fr; min-height: 100vh; }
.top { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #0c0b09, #070707); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; width: calc(var(--rail-w) - 18px); }
.brand svg { width: 34px; height: 30px; }
.panel h3 > svg { width: 20px; height: 20px; vertical-align: -3px; margin-right: 6px; }
.brand .word { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 0.04em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px; background: #0e0e10; border: 1px solid #26231c; border-radius: 10px; padding: 0 12px; height: 38px; color: var(--text-3); }
.search svg { width: 16px; height: 16px; flex: none; }
.search input { flex: 1; background: none; border: 0; color: var(--text); font: inherit; font-size: 13px; outline: none; min-width: 0; }
.search input::placeholder { color: var(--text-3); }
.top-icons { display: flex; gap: 6px; margin-left: auto; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: none; border: 1px solid transparent; color: var(--text-2); }
.icon-btn:hover { color: var(--gold-hi); border-color: var(--line); }
.icon-btn svg { width: 19px; height: 19px; }
.ident { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 10px; border: 1px solid #26231c; border-radius: 999px; background: #0d0d0f; }
.ident .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #1b1b20; border: 1px solid var(--line-strong); color: var(--gold-hi); }
.ident .av svg { width: 16px; height: 16px; }
.ident .who { font-size: 13px; font-weight: 600; }
.ident .who small { display: block; font-size: 10px; color: var(--text-3); font-weight: 500; letter-spacing: 0.05em; }

/* rail */
.rail { border-right: 1px solid var(--line); background: linear-gradient(180deg, #0a0a0a, #060606); padding: 12px 10px; position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.rail a svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.rail a:hover { color: var(--text); background: #121214; }
.rail a[aria-current="page"] { background-color: #d9b45a; background-image: var(--gold-grad); color: #1a1205; }
.rail a[aria-current="page"] svg { color: #1a1205; }
.rail .rail-foot { margin-top: 18px; padding: 12px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--text-3); line-height: 1.5; }

main { min-width: 0; padding: 22px 26px 60px; }
main:focus { outline: none; }

/* ── Buttons & chips ───────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 8px; font-weight: 600; font-size: 14px; border: 1px solid transparent; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn-gold { background: var(--gold-grad); color: #1a1205; box-shadow: 0 4px 18px rgba(227, 183, 74, 0.25); }
.btn-gold:hover { filter: brightness(1.06); }
.btn-line { background: rgba(10, 10, 10, 0.6); border-color: var(--line-strong); color: var(--gold-hi); }
.btn-line:hover { background: rgba(40, 30, 10, 0.6); }
.btn-ghost { background: #141416; border-color: #2a2720; color: var(--text); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.72; cursor: not-allowed; filter: grayscale(0.55); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 6px; border-radius: 999px; border: 1px solid #3a352a; background: rgba(0, 0, 0, 0.55); font-size: 12.5px; }
.pill .play { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--text-2); display: grid; place-items: center; }
.pill .play svg { width: 12px; height: 12px; }

.truth { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; border: 1px solid; white-space: nowrap; }
.truth::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: currentColor; }
.truth.t-existing { color: #8fd19e; border-color: rgba(143, 209, 158, 0.35); }
.truth.t-real { color: #8fd19e; border-color: rgba(143, 209, 158, 0.35); }
.truth.t-demo { color: #e7b6ff; border-color: rgba(231, 182, 255, 0.35); }
.truth.t-unavail { color: #9aa0ad; border-color: rgba(154, 160, 173, 0.35); }
.truth.t-unknown { color: #9aa0ad; border-color: rgba(154, 160, 173, 0.35); border-style: dashed; }
.truth.t-arch { color: var(--gold-hi); border-color: var(--line-strong); }
.truth.t-live { color: #ff8b8f; border-color: rgba(229, 72, 77, 0.5); }

.owner { font-size: 11px; color: var(--text-3); }
.owner b { color: var(--text-2); font-weight: 600; }

/* ── Section heads ─────────────────────────────────────────── */
.sec { margin-top: 26px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-h h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: 0.01em; }
.sec-h a { font-size: 12.5px; color: var(--gold); font-weight: 600; }
.eyebrow { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 700; }

/* ── Hero / world entry ────────────────────────────────────── */
.hero { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); min-height: 340px; background: #020308; isolation: isolate; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2, 3, 8, 0.92) 0%, rgba(2, 3, 8, 0.55) 42%, rgba(2, 3, 8, 0) 70%); }
.hero-body { padding: 54px 40px 34px; max-width: 560px; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.02; }
.hero h1 .l1 { display: block; font-size: 30px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 .l2 { display: block; font-size: 54px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.01em; }
.hero .tag { margin: 12px 0 22px; font-size: 17px; color: var(--text); letter-spacing: 0.02em; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .fine { margin-top: 14px; font-size: 12.5px; color: var(--text-2); }
.hero .vision { position: absolute; right: 22px; bottom: 22px; }

/* ── Realm doors ───────────────────────────────────────────── */
.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.door { background: linear-gradient(180deg, #121214, #0b0b0c); border: 1px solid #2a261d; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.door:hover { border-color: var(--line-strong); }
.door .art { aspect-ratio: 16 / 10; background-size: cover; background-position: center; position: relative; }
.door .art .truth { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.7); }
.door .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.door h3 { margin: 0; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.door p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.4; flex: 1; }
.door .btn { margin-top: 10px; height: 34px; font-size: 12.5px; }

/* CSS art for rooms without owner art */
.art-academy { background: radial-gradient(ellipse at 50% 85%, rgba(120, 160, 255, 0.35), transparent 60%), linear-gradient(180deg, #050b1d 0%, #0d1a3a 60%, #142650 100%); }
.art-academy::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 14%; height: 52%; background: repeating-linear-gradient(90deg, #c9d6ff 0 6%, transparent 6% 14%), linear-gradient(#c9d6ff, #c9d6ff); background-size: 100% 78%, 100% 12%; background-position: 0 100%, 0 0; background-repeat: no-repeat; opacity: 0.75; clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%); }
.art-games { background: radial-gradient(circle at 30% 30%, rgba(80, 180, 255, 0.5), transparent 40%), radial-gradient(circle at 75% 60%, rgba(160, 80, 255, 0.45), transparent 45%), linear-gradient(135deg, #060818, #120830); }
.art-games::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(120, 200, 255, 0.12) 18px 19px); }
.art-events { background: radial-gradient(ellipse at 50% 0%, rgba(255, 200, 100, 0.55), transparent 55%), radial-gradient(ellipse at 20% 100%, rgba(255, 90, 60, 0.35), transparent 50%), linear-gradient(180deg, #1a0c05, #070404); }
.art-journey { background: radial-gradient(circle at 50% 120%, rgba(227, 183, 74, 0.4), transparent 60%), linear-gradient(180deg, #0b0a07, #050505); }
.art-passport { background: radial-gradient(circle at 30% 40%, rgba(227, 183, 74, 0.35), transparent 50%), linear-gradient(135deg, #15110a, #060606); }

/* ── Panels ────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.panel { background: linear-gradient(180deg, #111113, #0b0b0c); border: 1px solid #26231c; border-radius: 12px; padding: 16px; }
.panel h3 { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.panel p { margin: 0; color: var(--text-2); font-size: 13px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 10px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; background: #0e0e10; border: 1px solid #201d17; }
.list li .grow { flex: 1; min-width: 0; }
.list li .t { font-size: 13.5px; font-weight: 600; }
.list li .s { font-size: 12px; color: var(--text-3); }
.empty { padding: 18px; border: 1px dashed #3a352a; border-radius: 10px; color: var(--text-2); font-size: 13px; }

/* live now */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--unk); display: inline-block; }
.live-dot.on { background: var(--live); }

/* ── Room pages ────────────────────────────────────────────── */
.room-head { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); padding: 34px 30px; background-size: cover; background-position: center; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; }
.room-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35)); }
.room-head > * { position: relative; }
.room-head h1 { margin: 6px 0 4px; font-family: var(--display); font-size: 36px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.room-head p { margin: 0 0 16px; color: var(--text-2); max-width: 560px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.tab { height: 32px; padding: 0 14px; border-radius: 8px; background: #121214; border: 1px solid #2a2720; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.tab[aria-selected="true"] { background: var(--gold-grad); color: #1a1205; border-color: transparent; }

/* destination frame (realm-owned content inside WOW chrome) */
.dest { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto 1fr; background: var(--bg); }
.dest-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #0f0d09, #070707); }
.dest-bar .back { display: inline-flex; align-items: center; gap: 8px; }
.dest-bar .meta { flex: 1; min-width: 0; }
.dest-bar .meta .t { font-weight: 700; font-size: 14px; }
.dest-bar .meta .s { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest iframe { width: 100%; height: 100%; border: 0; background: var(--bg); }
.dest .fail { display: grid; place-items: center; padding: 30px; text-align: center; }

/* ── Creator destination (Wavemotion public face) ──────────── */
.creator { max-width: 980px; }
.c-card { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; padding: 24px; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(ellipse at 0% 0%, rgba(227, 183, 74, 0.12), transparent 50%), linear-gradient(180deg, #121214, #0a0a0b); }
.c-avatar { width: 200px; height: 200px; border-radius: 50%; border: 2px solid var(--gold); display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #3a2f1a, #0d0b07); font-family: var(--display); font-size: 64px; color: var(--gold-hi); }
.c-card h1 { margin: 0; font-size: 28px; }
.c-card .h { color: var(--text-3); font-size: 13px; }
.c-stats { display: flex; gap: 22px; margin: 14px 0; }
.c-stats div { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.c-stats b { display: block; font-size: 15px; color: var(--text); letter-spacing: 0; text-transform: none; }
.c-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 16px; }
.c-action { text-align: left; padding: 14px; border-radius: 10px; background: #0f0f11; border: 1px solid #2a261d; display: grid; gap: 4px; }
.c-action:hover { border-color: var(--line-strong); }
.c-action .k { font-size: 10.5px; letter-spacing: 0.16em; color: var(--gold); font-weight: 700; }
.c-action .l { font-weight: 600; }
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: linear-gradient(90deg, rgba(227, 183, 74, 0.14), rgba(227, 183, 74, 0.03)); font-size: 13px; margin-bottom: 14px; }
.banner svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 1px; }
.banner.muted { border-color: #2c2a26; background: #0e0e10; color: var(--text-2); }

/* ── Forms ─────────────────────────────────────────────────── */
.form { display: grid; gap: 12px; }
.field label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid #2f2b22; background: #0c0c0e; color: var(--text); font: inherit; }
.field textarea { height: 110px; padding: 10px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(227, 183, 74, 0.2); }
.or { text-align: center; color: var(--text-3); font-size: 12px; }
.err { color: #ff9b9b; font-size: 13px; }
.ok { color: #8fd19e; font-size: 13px; }
.claim { max-width: 440px; margin: 10px auto; }
.claim h1 { margin: 0; font-size: 26px; text-align: center; }
.claim .sub { text-align: center; color: var(--text-2); margin: 6px 0 18px; }

/* Passport card */
.pp { display: grid; grid-template-columns: 1fr 200px; gap: 18px; padding: 22px; border-radius: 14px; border: 1px solid var(--line-strong); background: radial-gradient(ellipse at 100% 0%, rgba(227, 183, 74, 0.18), transparent 50%), linear-gradient(135deg, #17130b, #0a0a0a); }
.pp .num { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 26px; letter-spacing: 0.08em; color: var(--gold-hi); margin: 6px 0; }
.qr { width: 180px; height: 180px; background: #f3efe6; padding: 10px; border-radius: 10px; }
.qr svg { width: 100%; height: 100%; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; }

/* stat tiles with value-class labels */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tile { padding: 14px; border-radius: 10px; background: #0e0e10; border: 1px solid #26231c; }
.tile .v { font-size: 22px; font-weight: 700; margin: 4px 0; }
.tile .k { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px; }
.tile .k svg { width: 13px; height: 13px; color: var(--gold); }

/* WM Pro door */
.wm-door { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); padding: 36px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(227, 183, 74, 0.22), transparent 55%), linear-gradient(180deg, #0f0c06, #050505); }
.wm-door h1 { font-family: var(--display); margin: 8px 0 0; font-size: 34px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wm-door .g { letter-spacing: 0.3em; color: var(--gold-hi); margin: 6px 0 18px; }
.wm-door svg.spark { width: 100%; max-width: 520px; height: 90px; margin: 0 auto 14px; display: block; }
.wm-door .ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* toast */
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 70; max-width: 380px; background: #15120b; border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; font-size: 13px; box-shadow: var(--shadow); }

.door .chev { display: none; color: var(--text-3); margin-right: 10px; }
/* Academy school/course cards: text stacks at every width (the door row layout is for art + label). */
.door.ac-card { display: grid; gap: 6px; align-content: start; padding: 16px; color: inherit; }
.door.ac-card p { flex: none; }
.door .chev svg { width: 18px; height: 18px; }

/* ── Mobile companion ──────────────────────────────────────── */
.m-tabs { display: none; }
.m-menu { display: none; }
.m-only { display: none; }

@media (max-width: 1100px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --top-h: 56px; }
  .shell { grid-template-columns: 1fr; }
  .rail { display: none; }
  .top { padding: 0 10px; gap: 8px; }
  .brand { width: auto; flex: 1; justify-content: center; }
  .brand .word { font-size: 22px; }
  .search, .top-icons .desk { display: none; }
  .ident { padding: 3px; }
  .ident .who { display: none; }
  .m-only { display: inline-grid; }
  main { padding: 14px 14px 96px; }
  .hero { min-height: 0; }
  .hero::after { background: linear-gradient(180deg, rgba(2, 3, 8, 0.15) 0%, rgba(2, 3, 8, 0.85) 70%); }
  .hero-body { padding: 150px 18px 20px; }
  .hero h1 .l1 { font-size: 20px; }
  .hero h1 .l2 { font-size: 36px; }
  .hero .tag { font-size: 14px; margin: 8px 0 14px; }
  .hero .ctas .btn { flex: 1; height: 40px; padding: 0 10px; font-size: 13px; }
  .hero .vision { display: none; }
  .doors { grid-template-columns: 1fr; gap: 8px; }
  .door { flex-direction: row; align-items: center; }
  .door .art { width: 92px; aspect-ratio: 4 / 3; flex: none; margin: 8px; border-radius: 6px; }
  .door .art .truth { display: none; }
  .door .body { padding: 10px 6px 10px 0; }
  .door .body .btn { display: none; }
  .door .chev { display: block; }
  .c-card { grid-template-columns: 1fr; text-align: center; padding: 18px; }
  .c-avatar { width: 120px; height: 120px; font-size: 40px; margin: 0 auto; }
  .c-stats { justify-content: center; }
  .pp { grid-template-columns: 1fr; }
  .qr { margin: 0 auto; }
  .room-head { padding: 22px 18px; }
  .room-head h1 { font-size: 28px; }

  .m-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #060606; border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    /* Own compositing layer: on iPhone Safari the blurred .door/.panel cards painted through a translucent fixed bar. */
    transform: translateZ(0); -webkit-transform: translateZ(0); isolation: isolate; }
  .m-tabs a, .m-tabs button { display: grid; justify-items: center; gap: 2px; font-size: 10.5px; color: var(--text-3); padding: 4px 0; background: none; border: 0; min-height: 48px; }
  .m-tabs svg { width: 21px; height: 21px; }
  .m-tabs [aria-current="page"] { color: var(--gold-hi); }
  .m-menu[data-open="true"] { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.6); }
  .m-menu .sheet { position: absolute; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); background: #070707; border-right: 1px solid var(--line); padding: 16px; overflow-y: auto; }
  .m-menu ol { list-style: none; margin: 14px 0 0; padding: 0; }
  .m-menu ol a { display: flex; gap: 14px; align-items: center; padding: 12px 8px; font-size: 15px; border-radius: 8px; }
  .m-menu ol a svg { width: 20px; height: 20px; color: var(--gold); }
  .m-menu ol a[aria-current="page"] { background: #17130a; color: var(--gold-hi); }
  .dest-bar .meta .s { display: none; }
}

/* ── Motion: subtle, meaningful, and off under Reduced Motion ─ */
.route-in { animation: routeIn 260ms ease-out; }
@keyframes routeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Long truth chips and resolver URLs wrap instead of widening the card. */
.pp > div, .grid-2 > *, .kv dd { min-width: 0; }
.kv dd .truth, .owner .truth { white-space: normal; }
.pp .owner { overflow-wrap: anywhere; }

/* ══ Current-gen visual physics (mockups 07–15) ═════════════════════
   The world is felt around the interface; the current human job wins. */
:root { --glass: rgba(9, 9, 12, 0.72); --glass-2: rgba(16, 15, 20, 0.78); --cyan: #4fd1ff; --violet: #9b6bff; }
#atmo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, rgba(0,0,0,0) 0%, rgba(3,3,6,0.55) 60%), linear-gradient(180deg, rgba(3,3,6,0.35), rgba(3,3,6,0.78)); }
body { background: #030306; }
.glass, .panel, .door, .rail, .top, .subnav { background: var(--glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.panel, .door, .glass { border: 1px solid rgba(227, 183, 74, 0.22); }
.top { background: rgba(6, 6, 9, 0.82); }
.rail { background: rgba(6, 6, 9, 0.78); }

/* brand + room nav */
.brand .word small { display: block; font-family: var(--font); font-size: 8.5px; letter-spacing: 0.28em; color: var(--gold); -webkit-text-fill-color: var(--gold); margin-top: -2px; }
.topnav { display: none; gap: 2px; }
.topnav a { display: grid; justify-items: center; gap: 3px; padding: 6px 9px; border-radius: 8px; font-size: 10.5px; color: var(--text-2); border-bottom: 2px solid transparent; }
.topnav a svg { width: 17px; height: 17px; }
.topnav a:hover { color: var(--text); }
.topnav a[aria-current="page"] { color: var(--gold-hi); border-bottom-color: var(--gold); }
@media (min-width: 1360px) { .topnav { display: flex; } .search { max-width: 280px; } }

/* rail head, subtitles, passport card */
.rail-head { display: flex; gap: 10px; align-items: center; padding: 6px 8px 14px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.rail-head svg { width: 30px; height: 26px; }
.rail-head b { display: block; color: var(--gold-hi); font-size: 14px; }
.rail-head small { color: var(--text-3); font-size: 10.5px; }
.rail a span small { display: block; font-size: 9.5px; letter-spacing: 0.02em; text-transform: none; font-weight: 500; opacity: 0.8; }
.rail-pass { margin-top: 14px; display: grid; gap: 10px; }
.pass-card { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(227, 183, 74, 0.06); }
.pass-card .pc-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--gold-hi); flex: none; }
.pass-card .pc-ic svg { width: 17px; height: 17px; }
.pass-card b { display: block; font-size: 12.5px; color: var(--gold-hi); }
.pass-card small { font-size: 10.5px; color: var(--text-3); }
.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.caps li { display: flex; gap: 9px; align-items: center; font-size: 11.5px; color: var(--text-3); }
.caps li svg { width: 15px; height: 15px; flex: none; }
.caps li.on { color: var(--text-2); }
.caps li.on svg { color: #8fd19e; }
.caps small { display: block; font-size: 9.5px; color: var(--text-3); }
.rail { display: flex; flex-direction: column; }

/* room grids */
.room-grid { display: grid; gap: 16px; align-items: start; }
.room-grid.music, .room-grid.market { grid-template-columns: 210px minmax(0, 1fr) 300px; }
.room-grid.market { grid-template-columns: 210px minmax(0, 1fr) 280px; }
.room-grid.radio { grid-template-columns: minmax(0, 1fr) 300px; }
.room-grid.tv, .room-grid.lounge { grid-template-columns: minmax(0, 1fr) 320px; }
.room-main { min-width: 0; display: grid; gap: 4px; }
.tv-side { display: grid; gap: 12px; position: sticky; top: calc(var(--top-h) + 12px); }
.subnav { border: 1px solid rgba(227,183,74,0.22); border-radius: 12px; padding: 14px 10px; position: sticky; top: calc(var(--top-h) + 12px); }
.sub-head { display: flex; gap: 10px; align-items: center; padding: 0 6px 12px; }
.sub-head > svg { width: 26px; height: 26px; color: var(--gold); }
.sub-head b { display: block; color: var(--gold-hi); font-family: var(--display); letter-spacing: 0.04em; }
.sub-head small { font-size: 10.5px; color: var(--text-3); }
.subnav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.subnav ol a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--text-2); }
.subnav ol a svg { width: 16px; height: 16px; color: var(--gold); }
.subnav ol a:hover { background: rgba(227,183,74,0.08); color: var(--text); }
.subnav ol li:first-child a { background: var(--gold-grad); color: #1a1205; }
.subnav ol li:first-child a svg { color: #1a1205; }
.release-card { margin-top: 14px; padding: 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(227,183,74,0.14), rgba(155,107,255,0.08)); display: grid; gap: 6px; }
.release-card b { font-size: 13px; }
.release-card small { font-size: 11px; color: var(--text-3); }

/* covers (no artwork uploaded → typographic tile, labelled) */
.cover { --h: 40; aspect-ratio: 1; border-radius: 8px; display: grid; place-items: end start; padding: 8px; overflow: hidden; position: relative;
  background: radial-gradient(circle at 70% 25%, hsla(var(--h), 90%, 65%, 0.75), transparent 55%), radial-gradient(circle at 20% 90%, hsla(calc(var(--h) + 200), 80%, 55%, 0.55), transparent 60%), linear-gradient(160deg, #15121c, #07070a); }
.cover span { font-family: var(--display); font-size: 11px; line-height: 1.1; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.cover.big { width: 100%; max-width: 240px; margin: 0 auto 8px; }
.cover.big span { font-size: 18px; }
.cover.round { border-radius: 50%; place-items: center; width: 64px; padding: 0; }
.cover.round span { font-size: 22px; }
.cover.round.sm { width: 36px; }
.cover.round.sm span { font-size: 14px; }
.trk .cover { width: 42px; flex: none; padding: 4px; }
.trk .cover span { font-size: 7px; }

/* music hero */
.m-hero, .r-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 230px; border-radius: 14px; overflow: hidden; min-height: 280px; }
.m-hero-art, .r-hero-art { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: 0.55; }
.m-hero::after, .r-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,4,8,0.95) 0%, rgba(4,4,8,0.55) 55%, rgba(4,4,8,0.2)); }
.m-hero-body, .r-hero-body, .m-facts { position: relative; z-index: 1; }
.m-hero-body, .r-hero-body { padding: 34px 30px; display: grid; gap: 8px; align-content: center; }
.m-hero h1, .r-hero h1, .l-hero h1, .tv-cap h1 { margin: 0; font-family: var(--display); font-size: 40px; line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: flex; gap: 10px; align-items: center; }
.m-hero h1 svg, .r-hero h1 svg, .tv-cap h1 svg { width: 34px; height: 34px; color: var(--gold); }
.lead { margin: 0; font-weight: 700; letter-spacing: 0.04em; color: var(--text); }
.m-facts { list-style: none; margin: 18px 18px 18px 0; padding: 14px; display: grid; gap: 9px; align-content: center; border-radius: 10px; background: rgba(0,0,0,0.55); border: 1px solid var(--line); font-size: 12px; }
.m-facts li { display: flex; gap: 8px; align-items: center; }
.m-facts svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.releases { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.rel { text-align: left; background: none; border: 0; padding: 0; display: grid; gap: 3px; }
.rel b { font-size: 13px; margin-top: 4px; }
.rel span { font-size: 12px; color: var(--text-2); }
.rel small { font-size: 11px; color: var(--text-3); }
.rel:hover .cover { outline: 2px solid var(--gold); }
.artists { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.artist { display: grid; justify-items: center; gap: 4px; font-size: 12px; }
.artist small { color: var(--text-3); }
.tracks .trk { padding: 8px 10px; }
.trk-play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(227,183,74,0.1); color: var(--gold-hi); display: grid; place-items: center; flex: none; }
.trk-play svg { width: 13px; height: 13px; }
.steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.steps li { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,0.35); font-size: 13px; }
.steps small { color: var(--text-3); font-size: 11px; }

/* now playing */
.np { border-radius: 14px; padding: 16px; display: grid; gap: 10px; position: sticky; top: calc(var(--top-h) + 12px); }
.np h3 { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.np-meta b { display: block; font-size: 17px; }
.np-meta span { color: var(--text-2); font-size: 13px; }
.np-meta small { display: block; color: var(--text-3); font-size: 11px; margin-top: 2px; }
canvas.wave { width: 100%; height: 54px; display: block; }
canvas.wave.wide { height: 64px; margin-top: 8px; }
.np-time { display: flex; gap: 8px; align-items: center; font: 11px var(--mono, ui-monospace); color: var(--text-3); font-variant-numeric: tabular-nums; }
.np-time input { flex: 1; accent-color: var(--gold); }
.np-ctl { display: flex; justify-content: center; align-items: center; gap: 14px; }
.play-big { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(227,183,74,0.12); color: var(--gold-hi); display: grid; place-items: center; }
.play-big svg { width: 20px; height: 20px; }
.play-big.sm { width: 40px; height: 40px; }
.play-big[disabled] { opacity: 0.4; }

/* radio */
.r-hero { grid-template-columns: 1fr; }
.r-show { margin: 6px 0 0; font-size: 26px; }

/* tv */
.tv-stage { border-radius: 14px; overflow: hidden; }
.tv-screen { position: relative; min-height: 400px; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.tv-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.92)); }
.tv-state { position: absolute; top: 14px; left: 14px; background: rgba(0,0,0,0.7); z-index: 1; }
.tv-cap { position: relative; padding: 26px 26px 64px; display: grid; gap: 8px; max-width: 640px; }
.tv-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: rgba(0,0,0,0.6); font-size: 11px; color: var(--text-3); }
.tv-bar svg { width: 14px; height: 14px; }
.tv-bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.15); }
.chan { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ch { --h: 40; padding: 14px 12px; border-radius: 10px; min-height: 84px; display: grid; align-content: end; gap: 2px;
  background: radial-gradient(circle at 80% 10%, hsla(var(--h), 85%, 60%, 0.35), transparent 60%), var(--glass) !important; }
.ch b { font-size: 13px; }
.ch small { font-size: 10.5px; color: var(--text-3); }

/* lounge + market heroes */
.l-hero, .k-hero { border-radius: 14px; overflow: hidden; background-size: cover; background-position: center; position: relative; min-height: 270px; display: flex; align-items: flex-end; }
.l-hero::before, .k-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,4,8,0.94), rgba(4,4,8,0.35) 70%); }
.l-hero-body, .k-hero-body { position: relative; padding: 30px; display: grid; gap: 8px; max-width: 560px; }
.k-hero h1 { margin: 0; font-size: 40px; line-height: 1.05; }
.k-hero h1 em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.post { border-radius: 12px; padding: 14px; display: grid; gap: 8px; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); background: rgba(0,0,0,0.4); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }

/* home media strip */
.media3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.m3 { --h: 40; border-radius: 12px; padding: 16px; display: grid; gap: 4px; justify-items: start;
  background: radial-gradient(circle at 90% 0%, hsla(var(--h), 85%, 60%, 0.28), transparent 60%), var(--glass) !important; }
.m3:hover { border-color: var(--line-strong); }
.m3-ic svg { width: 26px; height: 26px; color: var(--gold); }
.m3 b { font-size: 16px; }
.m3 small { color: var(--text-3); font-size: 12px; margin-bottom: 6px; }

/* persistent player bar */
#playerbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 35; width: min(920px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px;
  background: rgba(8, 8, 12, 0.92); border: 1px solid var(--line-strong); backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
#playerbar .cover { width: 44px; flex: none; padding: 4px; }
#playerbar .cover span { font-size: 7px; }
.pb-meta { min-width: 0; flex: 0 1 200px; }
.pb-meta b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-meta span { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pb-prog { flex: 1; display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pb-prog i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.15); overflow: hidden; }
.pb-prog em { display: block; height: 100%; background: var(--gold-grad); width: 0; }
body.has-player main { padding-bottom: 110px; }

@media (max-width: 1280px) {
  .room-grid.music, .room-grid.market { grid-template-columns: minmax(0, 1fr) 280px; }
  .room-grid.music .subnav, .room-grid.market .subnav { display: none; }
}
@media (max-width: 980px) {
  .room-grid.music, .room-grid.market, .room-grid.radio, .room-grid.tv, .room-grid.lounge { grid-template-columns: 1fr; }
  .np, .tv-side { position: static; }
  .media3 { grid-template-columns: 1fr; }
  .m-hero { grid-template-columns: 1fr; }
  .m-facts { margin: 0 18px 18px; }
}
@media (max-width: 760px) {
  .m-hero h1, .r-hero h1, .l-hero h1, .tv-cap h1, .k-hero h1 { font-size: 30px; }
  .m-hero-body, .r-hero-body, .l-hero-body, .k-hero-body { padding: 20px 18px; }
  .tv-screen { min-height: 340px; }
  #playerbar { bottom: calc(70px + env(safe-area-inset-bottom)); gap: 8px; }
  #playerbar .pb-prog, #playerbar [data-prev] { display: none; }
  body.has-player main { padding-bottom: 170px; }
  .rail-pass { display: none; }
}
/* atmosphere sits on the root; body stays transparent so the city shows through */
html { background: #030306; }
body { background: transparent; }
.list li > svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.sec-h h2 svg { width: 20px; height: 20px; color: var(--live); vertical-align: -3px; }
#playerbar[hidden] { display: none; }
@media (max-width: 760px) {
  .rail { display: none !important; }
  .brand .word small { display: none; }
}

/* ── Fidelity pass vs mockups 10–15: warmer light, lit gold edges, brighter stages ── */
:root { --glass: rgba(10, 9, 12, 0.58); }
.glass, .panel, .door, .subnav, .np { box-shadow: 0 0 0 1px rgba(227,183,74,0.18), 0 0 28px rgba(227,183,74,0.07), inset 0 1px 0 rgba(255,220,140,0.06); }
.rail a { text-transform: none; letter-spacing: 0.01em; font-size: 13px; font-weight: 500; }
.rail a[aria-current="page"] { font-weight: 700; box-shadow: 0 0 18px rgba(227,183,74,0.35); }
.m-hero-art, .r-hero-art { opacity: 0.85; }
.m-hero::after, .r-hero::after { background: linear-gradient(90deg, rgba(4,4,8,0.9) 0%, rgba(4,4,8,0.35) 55%, rgba(4,4,8,0.05)); }
.l-hero::before, .k-hero::before { background: linear-gradient(90deg, rgba(4,4,8,0.88), rgba(4,4,8,0.1) 75%); }
.tv-screen::before { background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.88)); }
.mtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.mtile { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; font-size: 12px; }
.mtile .cover { width: 40px; flex: none; padding: 0; }
.mtile b { display: block; font-size: 13px; }
.mtile small { color: var(--text-3); }
/* Command Center composition (mockups 02/03) */
.cc-row { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 14px; align-items: stretch; }
.cc-row .panel { display: grid; gap: 8px; align-content: start; }
.cc-row h3 { font-size: 13px; }
.pp-mini { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(227,183,74,0.06); }
.pp-mini .pc-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--gold-hi); }
.pp-mini .pc-ic svg { width: 18px; height: 18px; }
.pp-mini b { display: block; font-family: ui-monospace, Menlo, monospace; color: var(--gold-hi); }
.pp-mini small { color: var(--text-3); font-size: 11px; }
.gate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gt { --h: 40; min-height: 82px; border-radius: 9px; padding: 10px; display: grid; align-content: end; gap: 1px; border: 1px solid rgba(227,183,74,0.2); background-size: cover; background-position: center;
  background-color: #0c0b10; background-image: radial-gradient(circle at 75% 20%, hsla(var(--h), 80%, 55%, 0.35), transparent 60%); }
.gt:hover { border-color: var(--line-strong); }
.gt b { font-family: var(--display); font-size: 13px; color: var(--gold-hi); }
.gt small { font-size: 10.5px; color: var(--text-2); }
.gt .truth { justify-self: start; margin-top: 4px; }
.lw { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.lw:first-of-type { border-top: 0; }
.lw small { color: var(--text-3); font-size: 11.5px; }
@media (max-width: 1280px) { .cc-row { grid-template-columns: 1fr 1fr; } .cc-gate { grid-column: 1 / -1; grid-row: 1; } }
@media (max-width: 760px) { .cc-row { grid-template-columns: 1fr; } .gate { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rail .rail-pass a.btn { color: #1a1205; justify-content: center; padding: 0 14px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.rail .rail-pass a.pass-card { color: var(--text); text-transform: none; padding: 10px; }
@media (max-width: 760px) {
  .l-hero::before, .k-hero::before { background: linear-gradient(180deg, rgba(4,4,8,0.55), rgba(4,4,8,0.94) 55%); }
  .m-hero-art.art-academy { opacity: 0.3 !important; }
}
.fnow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fn { text-align: left; padding: 10px; border-radius: 12px; display: grid; gap: 5px; color: var(--text); }
.fn .cover { width: 100%; }
.fn .truth { justify-self: start; }
.fn b { font-size: 13px; }
.fn small { font-size: 11px; color: var(--text-3); }
.qa { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.qa .btn { justify-content: flex-start; }
.evts { display: grid; gap: 12px; }
.evt { display: flex; gap: 14px; padding: 14px; border-radius: 12px; }
.evt h3 { margin: 0 0 2px; font-size: 16px; text-transform: none; letter-spacing: 0; }
.evt p { margin: 8px 0 0; color: var(--text-2); font-size: 13px; }
.evt-date { width: 58px; flex: none; text-align: center; border: 1px solid var(--line-strong); border-radius: 10px; padding: 6px 0; background: rgba(227,183,74,0.08); align-self: flex-start; }
.evt-date b { display: block; font-size: 11px; letter-spacing: 0.12em; color: var(--gold); }
.evt-date span { font-family: var(--display); font-size: 24px; color: var(--gold-hi); }

/* ── Marketplace: warm sunset manifestation (mockup 10) ─────────── */
body[data-room="market"]::before { background:
  radial-gradient(ellipse at 72% 8%, rgba(255, 158, 70, 0.32), transparent 55%),
  radial-gradient(ellipse at 20% 100%, rgba(255, 120, 40, 0.18), transparent 60%),
  linear-gradient(180deg, rgba(70, 30, 8, 0.45), rgba(14, 7, 4, 0.82)); }
body[data-room="market"] .glass, body[data-room="market"] .panel, body[data-room="market"] .subnav { background: rgba(22, 13, 8, 0.62); box-shadow: 0 0 0 1px rgba(240,180,90,0.28), 0 0 30px rgba(255,160,70,0.10), inset 0 1px 0 rgba(255,220,160,0.08); }
.k-hero.warm { position: relative; border-radius: 16px; overflow: hidden; min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(240,180,90,0.4); box-shadow: 0 0 40px rgba(255,150,60,0.18); }
.k-hero-art { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.1) brightness(0.95); }
.k-hero.warm::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,10,4,0.95) 0%, rgba(30,14,5,0.78) 40%, rgba(40,18,6,0.15) 75%), linear-gradient(0deg, rgba(20,10,4,0.6), transparent 50%); }
.k-hero.warm > * { position: relative; z-index: 2; }
.k-search { position: absolute !important; top: 16px; left: 16px; right: 16px; display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 12px; border-radius: 12px; }
.k-search > svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.k-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; font-size: 13px; outline: none; }
.k-search select { background: rgba(0,0,0,0.45); color: var(--text-2); border: 1px solid var(--line); border-radius: 8px; height: 34px; padding: 0 8px; font: inherit; font-size: 12px; }
.k-hero-body { padding: 90px 30px 30px; max-width: 600px; display: grid; gap: 10px; }
.k-hero-body h1 { margin: 0; font-size: 46px; line-height: 1.02; font-weight: 800; letter-spacing: -0.01em; }
.k-hero-body h1 em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-hero-body > p { margin: 0; color: #e9dcc7; max-width: 48ch; }
.k-pillars { list-style: none; margin: 6px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.k-pillars li { display: flex; gap: 8px; align-items: center; }
.k-pillars li > svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--gold-hi); flex: none; }
.k-pillars b { display: block; font-size: 12.5px; }
.k-pillars small { font-size: 11px; color: #cdbfa8; }
.k-video { position: absolute !important; right: 16px; bottom: 16px; display: flex; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 12px; max-width: 280px; }
.k-video .play { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; color: var(--gold-hi); flex: none; }
.k-video .play svg { width: 14px; height: 14px; }
.k-video b { display: block; font-size: 13px; }
.k-video small { font-size: 11px; color: #cdbfa8; }
.k-cats { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.k-cat { border-radius: 10px; padding: 6px; display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 11px; color: var(--text-2); }
.k-cat i { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 7px; }
.k-cat.all { align-content: center; border: 1px solid var(--line-strong) !important; color: var(--gold-hi); }
.k-cat.all svg { width: 26px; height: 26px; }
.k-cat:hover { color: var(--text); }
.k-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.k-prod { border-radius: 12px; overflow: hidden; display: grid; }
.k-img { aspect-ratio: 4 / 3.4; position: relative; }
.k-img .truth { position: absolute; top: 8px; left: 8px; background: rgba(20,12,6,0.82); }
.k-body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.k-body b { font-size: 14px; }
.k-body small { font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
.k-sell { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; padding: 16px; border-radius: 14px; margin-top: 20px; }
.k-sell-art { border-radius: 10px; aspect-ratio: 1; }
.k-sell h2 { margin: 6px 0; font-size: 22px; }
.k-sell p { margin: 0 0 12px; color: var(--text-2); }
.shop-thumb { aspect-ratio: 16 / 9; border-radius: 8px; margin-bottom: 4px; }
.k-cart h3 { display: flex; gap: 8px; align-items: center; }
.k-cart h3 svg, .k-impact h3 svg { width: 16px; height: 16px; color: var(--gold); }
.k-count { min-width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--gold-grad); color: #1a1205; font-weight: 700; font-size: 12px; }
.k-cart .owner svg { width: 12px; height: 12px; vertical-align: -2px; }
@media (max-width: 1280px) { .k-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .k-hero.warm { min-height: 0; }
  .k-hero.warm::before { background: linear-gradient(180deg, rgba(20,10,4,0.55), rgba(20,10,4,0.95) 55%); }
  .k-search select { display: none; }
  .k-hero-body { padding: 80px 18px 20px; }
  .k-hero-body h1 { font-size: 32px; }
  .k-video { position: static !important; margin: 0 16px 16px; max-width: none; }
  .k-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-sell { grid-template-columns: 1fr; }
  .k-sell-art { aspect-ratio: 16 / 9; }
}
.k-hero.warm > .k-hero-art { position: absolute; inset: 0; z-index: 0; }
.k-hero.warm > .k-video { top: 76px; bottom: auto; }
@media (max-width: 760px) { .k-hero.warm > .k-video { position: static !important; } }
.k-hero.warm { align-items: stretch; }
.k-hero.warm > .k-hero-art { left: 38%; }
.k-hero.warm::before { background: linear-gradient(90deg, rgba(24,12,5,1) 0%, rgba(24,12,5,0.96) 36%, rgba(30,14,5,0.55) 52%, rgba(40,18,6,0.05) 78%), linear-gradient(0deg, rgba(20,10,4,0.55), transparent 45%); }
@media (max-width: 760px) { .k-hero.warm > .k-hero-art { left: 0; } }
@media (max-width: 760px) {
  .k-hero.warm::before { background: linear-gradient(180deg, rgba(24,12,5,0.55) 0%, rgba(24,12,5,0.9) 30%, rgba(24,12,5,0.96) 100%); }
  .k-hero.warm > .k-hero-art { opacity: 0.75; }
}
@media (max-width: 760px) { .k-hero.warm > .k-hero-art { opacity: 0.22 !important; } }
/* golden hour, not dusk */
body[data-room="market"]::before { background:
  radial-gradient(ellipse at 68% -5%, rgba(255, 178, 90, 0.55), transparent 50%),
  radial-gradient(ellipse at 15% 10%, rgba(255, 120, 80, 0.22), transparent 45%),
  radial-gradient(ellipse at 50% 110%, rgba(255, 150, 60, 0.30), transparent 55%),
  linear-gradient(180deg, rgba(90, 42, 12, 0.35), rgba(20, 10, 5, 0.7)); }
body[data-room="market"] .glass, body[data-room="market"] .panel, body[data-room="market"] .subnav { background: rgba(36, 21, 11, 0.55); }
body[data-room="market"] .rail, body[data-room="market"] .top { background: rgba(26, 14, 7, 0.82); }

/* ── Events / Games / Passport / Journey warmth ──────────────── */
body[data-room="events"]::before { background: radial-gradient(ellipse at 75% 0%, rgba(255, 90, 160, 0.22), transparent 55%), radial-gradient(ellipse at 20% 100%, rgba(227, 183, 74, 0.22), transparent 60%), linear-gradient(180deg, rgba(30, 8, 26, 0.35), rgba(5, 3, 8, 0.8)); }
body[data-room="games"]::before { background: radial-gradient(ellipse at 70% 10%, rgba(120, 90, 255, 0.28), transparent 55%), radial-gradient(ellipse at 15% 90%, rgba(79, 209, 255, 0.18), transparent 60%), linear-gradient(180deg, rgba(8, 6, 30, 0.4), rgba(3, 3, 10, 0.82)); }
.ev-hero, .gm-hero { min-height: 300px; }
.ev-hero::after { background: linear-gradient(90deg, rgba(8,4,10,0.95) 0%, rgba(8,4,10,0.6) 55%, rgba(8,4,10,0.1)) !important; }
.gm-hero::after { background: none !important; }
.ev-steps { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ev-steps li { border-radius: 12px; padding: 14px; display: grid; gap: 4px; }
.ev-steps span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: #1a1205; font-weight: 800; font-size: 13px; }
.ev-steps b { font-size: 15px; }
.ev-steps small { color: var(--text-2); font-size: 12px; }
.ev-empty { display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: 14px; }
.ev-empty p { margin: 4px 0 10px; color: var(--text-2); }
.evt-date.big { width: 86px; padding: 10px 0; }
.evt-date.big span { font-size: 36px; }
.gm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gm-grid h3 { display: flex; gap: 8px; align-items: center; }
.gm-grid h3 svg { width: 16px; height: 16px; color: var(--gold); }
.gm-keys { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gm-keys li { display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--text-2); }
kbd { font: 600 11px ui-monospace, Menlo, monospace; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: rgba(0,0,0,0.45); color: var(--gold-hi); box-shadow: 0 2px 0 rgba(227,183,74,0.25); }
.pp-example { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.pp-card-ex { border-radius: 16px; padding: 18px; position: relative; display: grid; gap: 10px; background: radial-gradient(ellipse at 100% 0%, rgba(227,183,74,0.22), transparent 55%), linear-gradient(135deg, rgba(30,24,12,0.9), rgba(8,8,8,0.85)) !important; border: 1px solid var(--line-strong) !important; }
.pp-card-ex svg[viewBox="0 0 64 56"] { width: 38px; height: 34px; }
.pp-card-ex .num { font-family: ui-monospace, Menlo, monospace; font-size: 20px; letter-spacing: 0.08em; color: var(--gold-hi); }
.pp-card-ex small { color: var(--text-3); font-size: 11.5px; }
.pp-ex-qr { position: absolute; right: 16px; bottom: 44px; width: 64px; height: 64px; border-radius: 8px; background: #f3efe6; color: #0a0a0a; display: grid; place-items: center; }
.pp-ex-qr svg { width: 44px; height: 44px; }
.pp-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-benefits li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; }
.pp-benefits li > svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.pp-benefits b { display: block; }
.pp-benefits small { color: var(--text-2); font-size: 12px; }
.j-path { list-style: none; margin: 16px 0 0; padding: 0; display: flex; gap: 0; flex-wrap: wrap; position: relative; }
.j-path li { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 0; font-size: 13px; color: var(--text-3); }
.j-path li + li::before { content: ""; width: 28px; height: 2px; background: rgba(227,183,74,0.3); margin-right: 8px; }
.j-path span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); font-size: 12px; }
.j-path li.done { color: var(--text); }
.j-path li.done span { background: var(--gold-grad); color: #1a1205; border-color: transparent; font-weight: 800; }
@media (max-width: 980px) { .gm-grid, .ev-steps { grid-template-columns: 1fr; } .pp-example { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pp-benefits { grid-template-columns: 1fr; } }
.pp-card-ex .truth { justify-self: start; }
.pp-card-ex small { max-width: 72%; }
.pp-ex-qr { top: 16px; bottom: auto; }
.set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.set-list li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; }
.set-list .t { font-weight: 600; }
.set-list .s { font-size: 12.5px; color: var(--text-3); }
.set-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: rgba(227,183,74,0.08); color: var(--gold-hi); flex: none; }
.set-ic svg { width: 18px; height: 18px; }
.set-list .grow { flex: 1; min-width: 0; }
/* ── Creator destination (Wavemotion public face), current-gen ── */
.c-hero { border-radius: 16px; overflow: hidden; }
.c-cover { height: 170px; background-size: cover; background-position: center 40%; position: relative; }
.c-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(8,8,10,0.95)); }
.c-id { display: flex; gap: 22px; align-items: flex-start; padding: 0 24px 22px; margin-top: -84px; position: relative; }
.c-id .c-avatar { width: 150px; height: 150px; font-size: 54px; flex: none; box-shadow: 0 0 0 6px rgba(8,8,10,0.9), 0 0 40px rgba(227,183,74,0.3); }
.c-id h1 { margin: 6px 0 0; font-size: 30px; }
.c-id .h { color: var(--text-3); font-size: 13px; }
.c-bio { margin: 10px 0 0; color: var(--text-2); max-width: 60ch; }
.c-id > .grow { padding-top: 88px; }
.c-actions { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
.c-action { padding: 0 !important; overflow: hidden; display: grid !important; gap: 4px; border-radius: 12px !important; }
.c-action > .k, .c-action > .l, .c-action > .owner { padding: 0 14px; }
.c-action > .owner { padding-bottom: 14px; }
.c-art { display: block; height: 96px; background-size: cover; background-position: center; position: relative; margin-bottom: 8px; }
.c-art.art-academy { height: 96px; }
.c-link h3 { display: flex; gap: 8px; align-items: center; }
.c-link h3 svg { width: 16px; height: 16px; color: var(--gold); }
.c-qr { width: 150px; height: 150px; margin: 12px auto; background: #f3efe6; border-radius: 10px; padding: 6px; }
.c-qr svg { width: 100%; height: 100%; }
.c-url { display: block; text-align: center; font-size: 12px; color: var(--gold-hi); margin-bottom: 10px; word-break: break-all; }
@media (max-width: 760px) {
  .c-id { flex-direction: column; align-items: center; text-align: center; margin-top: -70px; }
  .c-id .c-avatar { width: 120px; height: 120px; font-size: 42px; }
  .c-id > .grow { padding-top: 0; }
  .c-id .row { justify-content: center; }
}
.payout-card h3, .payout-card h3 svg { display: inline-flex; gap: 8px; align-items: center; }
.payout-card h3 svg { width: 16px; height: 16px; color: var(--gold); }
.adm-handle { height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid #2f2b22; background: #0c0c0e; color: var(--text); font: inherit; font-size: 13px; }

/* Terms + Privacy */
.legal-wrap { display: grid; gap: 12px; max-width: 820px; }
.legal { padding: 18px 20px; border-radius: 14px; }
.legal h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--gold); }
.legal p { margin: 0 0 8px; line-height: 1.6; color: var(--text-2, #c9c6bd); }
.legal p:last-child { margin-bottom: 0; }
.pp h1.num { margin: 6px 0; font-weight: 400; line-height: 1.2; }

/* Report content */
.report { position: relative; }
.report > summary { list-style: none; cursor: pointer; }
.report > summary::-webkit-details-marker { display: none; }
.report-form { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--glass, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(212,175,55,.2)); min-width: min(320px, 80vw); }
.report-form label { display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.report-form select, .report-form textarea { background: #0b0b10; color: var(--text, #f3efe6); border: 1px solid var(--line, #333); border-radius: 8px; padding: 8px; font: inherit; }

/* Links inside running text are underlined, not told apart by colour alone (WCAG 1.4.1). */
.banner a, .owner a, .legal p a, p a:not(.btn), .toast a { text-decoration: underline; text-underline-offset: 2px; }
.rail a[aria-current="page"] span small { opacity: 1; } /* worst gradient stop: 5.72:1 (was 4.31:1 faded) */

/* ATH family mark — small, quiet, on every ATH app */
.ath-badge { display: flex; align-items: center; gap: 8px; margin: 14px 12px 4px; padding: 8px 10px; border-radius: 10px; font-size: 11px; letter-spacing: 0.04em; color: var(--text-2); border: 1px solid rgba(227,183,74,0.18); text-decoration: none; }
.ath-badge img { width: 14px; height: auto; flex: none; }
.ath-badge:hover, .ath-badge:focus-visible { color: var(--gold-hi); border-color: rgba(227,183,74,0.45); }

/* Agreements: who is signing; content rights */
.age-basis { border: 1px solid rgba(227,183,74,0.2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; margin: 4px 0; }
.age-basis legend { padding: 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-hi); }
.age-basis .guardian { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); }
.age-basis .guardian[hidden] { display: none; }
.rights-new { margin-top: 12px; }
.rights-new > summary { list-style: none; cursor: pointer; display: inline-flex; }
.rights-new > summary::-webkit-details-marker { display: none; }
.rights-new[open] > summary { margin-bottom: 12px; }

/* ── The Idea Library ─────────────────────────────────────────────── */
.lib-loop{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:14px 0 0;counter-reset:lib}
.lib-loop li{counter-increment:lib;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(227,183,74,.35);border-radius:999px;padding:5px 10px;color:#f1d48a}
.lib-loop li::before{content:counter(lib) " · ";opacity:.6}
/* Reading comfort first: a measured line, generous leading, real paragraph rhythm. */
.lib-read .lib-body{max-width:68ch;font:18px/1.75 Georgia,"Times New Roman",serif;color:#efe7d6}
.lib-read .lib-body p{margin:0 0 1.1em}
.lib-read .lib-body ::selection{background:rgba(227,183,74,.35)}
.lib-nav{justify-content:space-between;flex-wrap:wrap;gap:8px;margin:12px 0}
.lib-resp,.lib-recall,[data-lib-mark],[data-lib-post]{display:grid;gap:8px;margin:14px 0}
.lib-resp textarea,.lib-recall textarea,[data-lib-mark] textarea,[data-lib-mark] input,[data-lib-post] textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:inherit}
.lib-marks blockquote,.lib-recall blockquote,#lib-recall blockquote{margin:0 0 6px;padding-left:12px;border-left:3px solid #e3b74a;font-style:italic}
.lib-book b{font-size:1.15rem}
@media (max-width:620px){.lib-read .lib-body{font-size:17px;line-height:1.7}}

/* ── VISUAL LEARNS — The Polyglot's Mind ──────────────────────────
   Identity: a cinematic language world (night indigo, amber practical light,
   brass) around an ivory sketch-paper drawing table. Distinct from the Idea
   Library's reading room: scenes and hands, not pages. */
.vl-room { --vl-ink:#0a0d22; --vl-amber:#ffcf6a; --vl-paper:#f4ecd8; display:block }
.vl-hero { position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); min-height:340px; display:grid; align-items:end; margin-bottom:18px; background:#070a1c }
.vl-hero-art { position:absolute; inset:0 }
.vl-hero-art svg { width:100%; height:100%; object-fit:cover; display:block }
.vl-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,6,16,.94) 0%, rgba(5,6,16,.7) 46%, rgba(5,6,16,.05) 100%), linear-gradient(0deg, rgba(5,6,16,.85), transparent 55%) }
.vl-hero-body { position:relative; z-index:1; padding:28px; max-width:620px }
.vl-hero h1 { margin:.1em 0 0; letter-spacing:.08em }
.vl-sig { font-family:var(--display); color:var(--gold-hi); font-size:1.35rem; margin:.1em 0 .4em; letter-spacing:.04em }
.vl-loop { display:flex; flex-wrap:wrap; gap:5px; list-style:none; padding:0; margin:14px 0 0; counter-reset:vl }
.vl-loop li { counter-increment:vl; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(255,207,106,.35); border-radius:999px; padding:4px 9px; color:#ffdf9a; background:rgba(10,13,34,.55) }
.vl-loop li::before { content:counter(vl) " "; opacity:.55 }
.vl-doors { display:grid; gap:16px }
.vl-door { display:grid; grid-template-columns:minmax(0,260px) 1fr; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:linear-gradient(180deg,#0d1028,#08091a) }
.vl-door-art svg { width:100%; height:100%; display:block; min-height:170px }
.vl-door-body { padding:16px 18px }
.vl-door h3 { margin:.2em 0 .3em; font-size:1.25rem }
.vl-door h3 span[dir] { font-family:var(--display); color:var(--gold-hi); font-size:1.4rem }
.vl-lessons { list-style:none; padding:0; margin:8px 0 }
.vl-lessons li { padding:4px 0 }
.vl-lessons a { color:var(--text) } .vl-lessons a span { color:var(--text-3); font-size:.85rem }
.vl-ok { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#9be5a8; border:1px solid rgba(155,229,168,.4); border-radius:999px; padding:1px 7px }
.vl-compare { width:100%; border-collapse:collapse; font-size:.95rem }
.vl-compare th, .vl-compare td { text-align:start; padding:8px; border-bottom:1px solid var(--line) }
.vl-compare td[lang], .vl-compare td > span[lang] { font-size:1.15rem } .vl-compare small { color:var(--text-3); font-size:.75rem; margin-inline-start:6px }
.vl-na li { color:var(--text-2); margin:4px 0 }
.vl-stars { list-style:none; padding:0; margin:6px 0 10px; display:grid; gap:4px }
.vl-star { display:flex; justify-content:space-between; gap:8px; padding:5px 10px; border-radius:8px; background:linear-gradient(90deg, rgba(255,207,106,calc(var(--lit) * .35)) calc(var(--lit) * 100%), rgba(255,255,255,.03) 0); font-size:.85rem }
.vl-star.dim { color:var(--text-3) }
.vl-stamp summary { cursor:pointer; color:var(--gold-hi); padding:6px 0 }
.vl-receipt { font-size:.85rem; border-inline-start:2px solid var(--line-strong); padding-inline-start:10px }
.vl-receipt ul { margin:2px 0 8px; padding-inline-start:18px }

.vl-lesson-head { margin-bottom:10px }
.vl-steps { display:flex; gap:6px; flex-wrap:wrap; position:sticky; top:62px; z-index:5; padding:8px 0; background:linear-gradient(180deg, var(--bg) 70%, transparent) }
.vl-steps a { font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--text-2); background:#0b0c18 }
.vl-station { margin:22px 0; scroll-margin-top:120px }
.vl-station > h2 { font-family:var(--display); color:var(--gold-hi); letter-spacing:.04em; font-size:1.25rem; margin:0 0 6px }
.vl-scene { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#070a1c; box-shadow:0 30px 60px -30px rgba(255,180,80,.25) }
.vl-scene svg { width:100%; height:auto; display:block }
.vl-obj { cursor:pointer; transition:filter .2s, opacity .2s; outline:none }
.vl-obj:hover, .vl-obj:focus-visible { filter:drop-shadow(0 0 6px #ffd27a) brightness(1.15) }
.vl-obj.on { filter:drop-shadow(0 0 10px #ffd27a) drop-shadow(0 0 2px #fff) brightness(1.2) }
.vl-flicker { animation:vlflick 3.2s ease-in-out infinite; transform-origin:400px 232px }
@keyframes vlflick { 50% { opacity:.75; transform:scale(.94) } }
.vl-school { animation:vlschool 9s ease-in-out infinite; transform-origin:470px 210px }
@keyframes vlschool { 50% { transform:translate(-30px,12px) rotate(-6deg) } }
.vl-leaf { animation:vlleaf 7s linear infinite } .vl-leaf:nth-child(odd) { animation-duration:9s }
@keyframes vlleaf { to { transform:translate(-40px,420px) rotate(240deg) } }
@media (prefers-reduced-motion: reduce) { .vl-flicker, .vl-school, .vl-leaf { animation:none } }
/* Visual Learns photo scenes: honest credit line; door/entry art is a picture, not a tap target */
.vl-scene-svg .ph-credit { font:500 13px Inter,system-ui,sans-serif; fill:rgba(255,255,255,.66); paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:3px; pointer-events:none }
.vl-scene-svg .ph-sign { font-family:"Frank Ruhl Libre","David","Times New Roman",serif; font-weight:700; fill:#4a2e16; pointer-events:none }
:is(.vl-door-art, .hu-entry-art) .ph-credit { display:none }
:is(.vl-door-art, .hu-entry-art) .vl-obj { pointer-events:none }
:is(.vl-door-art, .hu-entry-art) .ph-hit { stroke:transparent !important; fill:transparent !important }
.vl-caption { position:absolute; left:12px; bottom:12px; right:12px; min-height:0; pointer-events:none; font-size:1.2rem; text-shadow:0 2px 8px #000 }
.vl-caption b { font-family:var(--display); color:var(--gold-hi); font-size:1.6rem } .vl-caption i { color:#ffdf9a; margin:0 6px } .vl-caption span { color:#e8e2d4 }
.vl-objects { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:6px }
.vl-word { background:#0d1028; border:1px solid var(--line); color:var(--text); border-radius:999px; padding:6px 12px; font:inherit; cursor:pointer }
.vl-word b { color:var(--gold-hi) } .vl-word i { color:#ffdf9a } .vl-word span { color:var(--text-3); font-size:.85rem }
.vl-note { display:block; color:var(--text-3); font-size:.75rem; max-width:360px; margin:2px 8px }
.vl-lines { list-style:none; padding:0; margin:8px 0 }
.vl-lines li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line) }
.vl-lines b { font-size:1.15rem; color:var(--gold-hi) } .vl-lines span:not([data-vl-heard]) { color:var(--text-2) }
.vl-glyphs { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 }
.vl-glyph { width:52px; height:52px; font-size:1.7rem; border-radius:12px; border:1px solid var(--line); background:#0d1028; color:var(--text); cursor:pointer }
.vl-glyph.on { border-color:var(--gold); background:#1d1608; color:var(--gold-hi) }
.vl-sketch-wrap { display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:18px; align-items:start }
.vl-paper { position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--vl-paper); background-image:linear-gradient(rgba(120,90,40,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(120,90,40,.12) 1px,transparent 1px),linear-gradient(rgba(120,90,40,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(120,90,40,.25) 1px,transparent 1px); background-size:20px 20px,20px 20px,50% 50%,50% 50%; background-position:center; box-shadow:inset 0 0 40px rgba(90,60,20,.25), 0 20px 40px -20px #000 }
.vl-guide { position:absolute; inset:0; display:grid; place-items:center; font-size:min(230px,58vw); line-height:1; color:#1b1610; opacity:.16; pointer-events:none; transition:opacity .3s, color .3s }
.vl-guide.compare { opacity:.5; color:#b3202a }
.vl-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair }
.vl-glyph-info b { font-size:2rem; color:var(--gold-hi); margin-inline-end:8px }
.vl-storybook { border-radius:14px; padding:20px 22px; background:linear-gradient(180deg,#1b1508,#100c05); border:1px solid rgba(255,207,106,.25); box-shadow:inset 0 0 60px rgba(255,180,80,.08) }
.vl-storybook h3 { font-family:var(--display); color:var(--gold-hi); margin:0 0 8px }
.vl-story-text { font-size:1.18rem; line-height:1.75; color:#f3ead2 }
.vl-gloss { color:var(--text-2); border-inline-start:2px solid var(--line-strong); padding-inline-start:10px }
.vl-gloss-inline { display:block; color:var(--text-3); font-size:.8rem; margin:2px 0 6px }
.vl-items { display:grid; gap:12px }
.vl-item { border:1px solid var(--line); border-radius:14px; padding:14px; background:#0b0d1d }
.vl-q { margin:0 0 6px } .vl-cap { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:#ffdf9a; border:1px solid rgba(255,207,106,.3); border-radius:999px; padding:1px 7px; margin-inline-end:6px }
.vl-target { font-size:2.4rem; font-family:var(--display); color:var(--gold-hi); margin:4px 0 }
.vl-choices { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 }
.vl-choice { font:inherit; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:#11142a; color:var(--text); cursor:pointer; text-align:start }
.vl-choice.on { border-color:var(--gold); background:#2a1f08; color:var(--gold-hi) }
/* Drill pictures: an option or question that names a scene object shows that object, cut from the lesson's scene */
.vl-choice { min-height:44px }
.vl-choices.has-pics { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px }
@media (min-width:760px) { .vl-choices.has-pics { grid-template-columns:repeat(4, minmax(0, 1fr)) } }
.vl-choice-pic { display:flex; flex-direction:column; padding:0; overflow:hidden; border-radius:14px; background:linear-gradient(180deg, #121527, #0b0d1a); box-shadow:0 14px 28px -18px rgba(0,0,0,.8); transition:border-color .2s, box-shadow .2s, transform .2s }
.vl-choice-pic:hover { border-color:rgba(246,215,126,.55); transform:translateY(-1px) }
.vl-choice-pic:focus-visible { outline:2px solid var(--gold); outline-offset:2px }
.vl-choice-pic.on { border-color:var(--gold); background:linear-gradient(180deg, #2a1f08, #17120a); box-shadow:0 0 0 1px var(--gold), 0 16px 32px -16px rgba(246,215,126,.45) }
.vl-choice-t { display:flex; align-items:center; min-height:44px; padding:8px 12px; line-height:1.25; overflow-wrap:anywhere }
.vl-shot { display:block; aspect-ratio:4 / 3; width:100%; background:#070a1c; overflow:hidden; border-bottom:1px solid var(--line) }
.vl-shot:empty { background:radial-gradient(circle at 50% 45%, #1a1d33, #070a1c) }
.vl-shot svg { display:block; width:100%; height:100%; pointer-events:none }
.vl-shot .vl-obj { filter:none !important } .vl-shot .vl-credit { display:none } .vl-shot svg:has(.vl-obj.on) .vl-obj:not(.on) { opacity:.4 }
.vl-shot-q { width:min(260px, 70%); border:1px solid var(--line); border-radius:12px; margin:6px 0 8px; box-shadow:0 14px 28px -18px rgba(0,0,0,.8) }
.vl-type { font:inherit; font-size:1.1rem; width:100%; max-width:360px; padding:9px 12px; border-radius:10px; border:1px solid var(--line-strong); background:#0e0e14; color:var(--text); margin:6px 0 }
.vl-built { min-height:48px; display:flex; flex-wrap:wrap; gap:6px; padding:8px; border-radius:10px; border:1px dashed var(--line-strong); margin:8px 0; background:#07080f }
.vl-tiles { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.vl-tile { font:inherit; font-size:1.1rem; padding:6px 12px; border-radius:9px; border:1px solid rgba(255,207,106,.35); background:#1a1608; color:#ffe7ae; cursor:pointer }
.vl-tile[disabled] { opacity:.3; cursor:default }
.vl-fb { margin-top:8px; font-size:.92rem } .vl-fb.correct { color:#9be5a8 } .vl-fb.almost { color:#ffd27a } .vl-fb.wrong { color:#ff9f8f }
.vl-convo fieldset { border:1px solid var(--line); border-radius:12px; margin:10px 0; padding:10px 14px }
.vl-convo legend { padding:0 6px } .vl-them { font-size:1.1rem; color:var(--gold-hi) }
.vl-convo label { display:block; padding:6px 0; cursor:pointer }
.vl-why { color:var(--text-2); font-size:.9rem; margin:4px 0 0 }
.vl-prove { border:1px solid var(--line-strong); border-radius:16px; padding:18px; background:radial-gradient(ellipse at top, rgba(255,207,106,.08), transparent 60%), #0a0b17 }
.vl-proved { color:#9be5a8 }
.vl-proof { margin-top:12px; display:grid; gap:10px } .vl-proof-n { font-size:.75rem; color:var(--text-3); letter-spacing:.1em }
.vl-result.pass h3 { color:#9be5a8 } .vl-result.retry h3 { color:#ffd27a }
.vl-results { list-style:none; padding:0 } .vl-results li { padding:6px 0; border-bottom:1px solid var(--line); font-size:.92rem } .vl-results li.ok b { color:#9be5a8 } .vl-results li.no b { color:#ff9f8f }
.vl-stamp-new { color:var(--gold-hi); font-weight:700 }
.vl-sketches { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px }
.vl-sk { margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0b0d1d }
.vl-sk img { width:100%; height:auto; display:block; background:var(--vl-paper) }
.vl-sk figcaption { padding:8px; font-size:.8rem; display:grid; gap:6px }
.vl-entry { background:radial-gradient(ellipse at 85% 30%, rgba(255,207,106,.14), transparent 55%), linear-gradient(180deg,#0d1028,#08091a) !important }
@media (max-width: 760px) {
  .vl-hero { min-height:300px } .vl-hero-body { padding:18px }
  .vl-hero::after { background:linear-gradient(0deg, rgba(5,6,16,.96) 30%, rgba(5,6,16,.35) 100%) }
  .vl-door { grid-template-columns:1fr } .vl-door-art svg { min-height:0; max-height:170px }
  .vl-sketch-wrap { grid-template-columns:1fr } .vl-paper { max-width:340px }
  .vl-steps { top:56px }
  .vl-caption b { font-size:1.25rem } .vl-caption { font-size:1rem }
}

/* ── STUDENT OF THE GAME — a market terminal, not a classroom ───────────
   Near-black, hairline grid, tabular numerals, classic red/green (WM Pro's
   default market paint). Brass marks the brand, never price direction. */
.sg-room { --sg-up:#26a69a; --sg-down:#ef5350; --sg-grid:#141a24 }
.sg-hero { position:relative; border-radius:18px; overflow:hidden; border:1px solid #1f2733; min-height:320px; display:grid; align-items:end; background:#06080d; margin-bottom:18px }
.sg-hero-art { position:absolute; inset:0 } .sg-hero-art svg { width:100%; height:100%; display:block }
.sg-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,6,10,.96) 0%, rgba(4,6,10,.78) 48%, rgba(4,6,10,.15) 100%) }
.sg-hero-body { position:relative; z-index:1; padding:28px; max-width:640px }
.sg-hero h1 { margin:.1em 0 0; letter-spacing:.08em }
.sg-creed { font-family:var(--display); color:var(--gold-hi); font-size:1.25rem; margin:.15em 0 .4em }
.sg-edu { display:inline-block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:#ffd27a; border:1px solid rgba(255,210,122,.35); border-radius:999px; padding:4px 10px; margin:6px 0 0 }
.sg-lessons { display:grid; gap:10px }
.sg-lesson { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:16px 18px; border-radius:14px; border:1px solid #1f2733; background:linear-gradient(90deg,#0a0e15,#07090e); color:var(--text) }
.sg-lesson:hover { border-color:var(--line-strong) }
.sg-lesson b { font-size:1.15rem } .sg-lesson p { margin:.2em 0; color:var(--text-2) }
.sg-n { font-variant-numeric:tabular-nums; font-family:ui-monospace,Menlo,monospace; font-size:1.6rem; color:var(--sg-up); line-height:1 }
.sg-calc-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr)); gap:10px; margin:10px 0 }
.sg-calc-form label { display:grid; gap:4px; min-width:0; font-size:.78rem; color:var(--text-3); letter-spacing:.04em; text-transform:uppercase }
.sg-calc-form input { width:100%; min-width:0; box-sizing:border-box; font:inherit; font-size:1.05rem; font-variant-numeric:tabular-nums; font-family:ui-monospace,Menlo,monospace; padding:9px 10px; border-radius:9px; border:1px solid #2a3342; background:#05070b; color:var(--text) }
.sg-out { display:block }
.sg-kv { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:8px 0; font-variant-numeric:tabular-nums }
.sg-kv dt { color:var(--text-3) } .sg-kv dd { margin:0 } .sg-kv b { color:var(--sg-up); font-size:1.15rem }
.sg-warn { color:#ffb199 }
.sg-modules { columns:2; padding-inline-start:18px; color:var(--text-2) } .sg-modules li { margin:3px 0; break-inside:avoid }
.vl-num { display:inline-flex; align-items:center; gap:8px } .vl-num .vl-type { max-width:200px; font-variant-numeric:tabular-nums; font-family:ui-monospace,Menlo,monospace } .vl-num span { color:var(--text-3) }
.vl-rules b { font-family:ui-monospace,Menlo,monospace; color:var(--gold-hi) }
.vl-lesson[data-lang="sg"] .vl-scene { border-color:#1f2733; box-shadow:0 30px 60px -30px rgba(38,166,154,.18) }
.vl-lesson[data-lang="sg"] .vl-station > h2 { color:#cfe9e5 }
.sg-entry { background:linear-gradient(90deg, rgba(38,166,154,.10), transparent 60%), linear-gradient(180deg,#0a0e15,#06080d) !important }
@media (max-width: 760px) {
  .sg-hero::after { background:linear-gradient(0deg, rgba(4,6,10,.97) 35%, rgba(4,6,10,.4) 100%) }
  .sg-hero-body { padding:18px } .sg-modules { columns:1 }
}

/* Marketplace local pickup */
.pickup-code { display:grid; gap:4px; margin:10px 0; padding:12px 14px; border-radius:12px; border:1px solid var(--line-strong); background:radial-gradient(ellipse at top left, rgba(227,183,74,.12), transparent 60%), #0e0c07; max-width:420px }
.pickup-code span { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3) }
.pickup-code b { font-family:ui-monospace,Menlo,monospace; font-size:2rem; letter-spacing:.18em; color:var(--gold-hi) }
.pickup-code small { color:var(--text-2) }
.pickup-confirm { display:grid; gap:6px; min-width:200px }
.pickup-confirm input { font-family:ui-monospace,Menlo,monospace; font-size:1.2rem; letter-spacing:.2em; padding:8px 10px; border-radius:9px; border:1px solid var(--line-strong); background:#0b0b0e; color:var(--text); width:100%; box-sizing:border-box }

/* Marketplace: the path to selling — every gate's real state, in order. */
.sp-steps { list-style:none; counter-reset:none; padding:0; margin:12px 0 0; display:grid; gap:2px }
.sp-steps li { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; padding:12px 14px; border-radius:12px; border:1px solid transparent; background:#0b0b0e }
.sp-steps li.sp-next { border-color:var(--line-strong); background:radial-gradient(ellipse at left, rgba(227,183,74,.10), transparent 70%), #0e0c07 }
.sp-steps b { display:block } .sp-steps p { margin:.2em 0 .4em; color:var(--text-2) }
.sp-mark { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); font-size:.9rem }
.sp-done .sp-mark { color:#9be5a8; border-color:#9be5a855 } .sp-ready .sp-mark, .sp-next .sp-mark { color:var(--gold-hi); border-color:var(--line-strong) }
.sp-waiting .sp-mark { color:#ffd27a } .sp-locked .sp-mark, .sp-locked b, .sp-locked p { color:var(--text-3) }
.sp-state { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); white-space:nowrap }
.sp-done .sp-state { color:#9be5a8 }
@media (max-width:620px){ .sp-steps li{ grid-template-columns:auto 1fr } .sp-state{ grid-column:2; } }

/* A door with no photograph shows the room's own live facts, not a gradient. */
.art-facts { background: radial-gradient(ellipse at 50% 110%, rgba(227, 183, 74, 0.22), transparent 60%), linear-gradient(180deg, #0f0e0b, #080807); display: flex; align-items: center; justify-content: center; }
.art-facts ul { list-style: none; margin: 0; padding: 10px 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; width: 100%; }
.art-facts li { display: grid; gap: 2px; text-align: center; }
.art-facts li b { font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.art-facts li span { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.art-facts li b.txt { font-size: 12.5px; letter-spacing: 0.02em; text-transform: uppercase; }
.art-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #000; }
.art-wall img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Academy campus: the three house schools as large destination cards. */
.campus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.campus-card { color: inherit; text-decoration: none; }
.campus-card .campus-art { aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 12px; position: relative; }
.campus-card.art-sg .campus-art { background: radial-gradient(ellipse at 20% 110%, rgba(227,183,74,.35), transparent 55%), linear-gradient(180deg, #0a0e12, #05070a); }
.campus-card.art-vl .campus-art { background: radial-gradient(ellipse at 80% 0%, rgba(120,90,220,.35), transparent 55%), linear-gradient(180deg, #0d0a14, #06050a); }
.campus-card.art-lib .campus-art { background: radial-gradient(ellipse at 50% 120%, rgba(227,183,74,.28), transparent 60%), linear-gradient(180deg, #110d08, #080605); }
.campus-facts { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
.campus-facts li { display: grid; gap: 1px; } .campus-facts b { font-size: 20px; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.campus-facts span { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.campus-card .body { padding: 14px; display: grid; gap: 6px; }
.campus-card h3 { margin: 0; font-family: var(--display); font-size: 22px; letter-spacing: 0; text-transform: none; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.campus-card p { margin: 0; color: var(--text-2); font-size: 13px; }
.campus-card .btn { margin-top: 8px; }
.classrooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.classroom { display: grid; gap: 4px; padding: 14px; border-radius: 10px; color: inherit; text-decoration: none; }
.classroom b { font-size: 15px; } .classroom small { color: var(--text-2); }
@media (max-width: 900px) { .campus, .classrooms { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .campus, .classrooms { grid-template-columns: 1fr; } }

/* The campus hero: black and gold like the plate, not the blue institutional columns. */
.m-hero-art.art-academy { background: radial-gradient(ellipse at 85% 20%, rgba(227,183,74,.30), transparent 50%), radial-gradient(ellipse at 10% 110%, rgba(227,183,74,.18), transparent 55%), linear-gradient(180deg, #0c0a07, #06050a) !important; opacity: 1 !important; }
.m-hero-art.art-academy::before { display: none; }

/* Promo room and the Home strip: films made today, honest about what they are. */
.promos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.promo { border-radius: 12px; overflow: hidden; display: grid; }
.promo video { width: 100%; aspect-ratio: 9 / 16; background: #000; display: block; }
.promo .body { padding: 12px 14px 14px; display: grid; gap: 6px; } .promo h3 { margin: 0; font-size: 16px; }
.promo-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.promo-tile { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 9 / 12; color: inherit; text-decoration: none; }
.promo-tile img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.promo-tile span { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 13px; font-weight: 600; text-shadow: 0 1px 6px #000; }
@media (max-width: 900px) { .promos, .promo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Nova presents: a disclosed AI presenter pointing at real product films. */
.nova-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 18px; border-radius: 14px; align-items: start; }
.nova-face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(227,183,74,.6); }
.nova-body { display: grid; gap: 8px; } .nova-body h2 { margin: 0; }
.nova-films { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 10px; }
@media (max-width: 640px) { .nova-card { grid-template-columns: 1fr; } .nova-films { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nova-film { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.nova-film img { width: 100%; aspect-ratio: 9 / 12; object-fit: cover; object-position: top; border-radius: 10px; display: block; border: 1px solid rgba(255,255,255,.08); }
.nova-film span { font-size: 13px; font-weight: 600; line-height: 1.25; } .nova-film small { opacity: .7; font-size: 12px; }

/* ════ WOW Academy — halls, A+ school, Book Club, Bible Study, classrooms (Oct 16 SUPERMAX) ════ */
/* Environments are drawn, not photographed: lamp light, shelving and wood built from gradients, so they stay sharp, light and readable. */
.hall-trading { background:
  radial-gradient(ellipse 60% 70% at 78% 30%, rgba(227,183,74,.22), transparent 60%),
  repeating-linear-gradient(90deg, rgba(227,183,74,.06) 0 1px, transparent 1px 64px),
  repeating-linear-gradient(0deg, rgba(227,183,74,.05) 0 1px, transparent 1px 48px),
  linear-gradient(180deg, #0a0906 0%, #060505 100%); }
.hall-library, .hall-bible { position: relative; background:
  radial-gradient(ellipse 45% 55% at 50% 0%, rgba(255,205,120,.30), transparent 70%),
  radial-gradient(ellipse 30% 40% at 12% 35%, rgba(255,190,100,.16), transparent 70%),
  radial-gradient(ellipse 30% 40% at 88% 35%, rgba(255,190,100,.16), transparent 70%),
  linear-gradient(180deg, rgba(8,6,4,.25) 0%, rgba(8,6,4,.92) 70%),
  repeating-linear-gradient(90deg, #3b2412 0 9px, #5a2e1c 9px 15px, #2a3a2c 15px 22px, #6b4a1e 22px 27px, #3e1f1a 27px 36px, #1d2a3b 36px 42px, #57391a 42px 50px, #2b1a10 50px 54px),
  linear-gradient(180deg, #1a1109, #0b0705); background-blend-mode: normal, normal, normal, normal, overlay, normal; }
.hall-bible { background:
  radial-gradient(ellipse 40% 50% at 50% -5%, rgba(255,214,140,.42), transparent 70%),
  radial-gradient(ellipse 22% 30% at 20% 60%, rgba(255,186,90,.22), transparent 70%),
  radial-gradient(ellipse 22% 30% at 80% 60%, rgba(255,186,90,.22), transparent 70%),
  linear-gradient(180deg, rgba(10,7,4,.3) 0%, rgba(10,7,4,.94) 78%),
  repeating-linear-gradient(90deg, #4a2a12 0 8px, #6a3b1a 8px 13px, #3a1c12 13px 21px, #7a5522 21px 25px, #2f1b10 25px 34px, #5b3416 34px 41px),
  linear-gradient(180deg, #24150a, #0c0804); }
.hall-bible::after, .hall-library::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(60,36,16,.55) 40%, #160d06), repeating-linear-gradient(100deg, rgba(255,220,160,.04) 0 2px, transparent 2px 22px); }

.ap-hero, .bc-hero, .bs-hero { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line-strong); padding: clamp(22px, 5vw, 52px); min-height: 300px; display: grid; align-content: end; gap: 18px; margin-bottom: 18px; }
.ap-hero-body { position: relative; z-index: 1; max-width: 760px; display: grid; gap: 10px; }
.ap-hero .display, .bc-hero .display, .bs-hero .display { font-size: clamp(34px, 6vw, 60px); line-height: 1.02; margin: 0; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.ap-hero .lead, .bc-hero .lead, .bs-hero .lead { font-size: clamp(16px, 2.2vw, 20px); color: var(--gold-hi); margin: 0; }
.ap-process { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.ap-process li { counter-increment: s; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(0,0,0,.55); color: var(--gold-hi); }
.ap-process li::before { content: counter(s) " · "; color: var(--gold); }
.ap-grid, .bs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.bs-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
.ap-path { display: grid; gap: 12px; }
.ap-mod { padding: 16px 18px; border-radius: 14px; }
.ap-mod h3 { margin: 4px 0 8px; }
.ap-mod ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.ap-open a { color: var(--gold-hi); font-weight: 600; }
.ap-dev { color: var(--muted, #a59f90); } .ap-dev small { opacity: .7; margin-left: 6px; }
.ap-side { display: grid; gap: 14px; }
.campus-map { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 12px; margin: 0 0 12px; }
.campus-map a { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--gold-hi); font-size: 13px; text-decoration: none; background: rgba(0,0,0,.4); }
.campus-map a:hover, .campus-map a:focus-visible { background: rgba(227,183,74,.14); }

/* Candlestick Foundations */
.cf-body { display: grid; gap: 16px; }
.cf-body .panel { padding: 20px 22px; }
.cf-body h2 { margin: 6px 0 10px; font-size: clamp(19px, 2.4vw, 24px); }
.cf-anat { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 14px; align-items: center; }
.cf-ex { padding: 16px 18px; border-radius: 14px; margin-top: 12px; display: grid; gap: 8px; }
.cf-chart { height: clamp(260px, 42vw, 420px); border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); }
.cf-chart canvas, .ls-chart canvas { width: 100%; height: 100%; display: block; outline-offset: -3px; }
.cf-ask { color: var(--gold-hi); margin: 0; }
.cf-reveal { border-left: 3px solid var(--gold); padding-left: 12px; }
.cf-lesson { font-weight: 600; color: var(--gold-hi); }
.cf-steps { display: grid; gap: 8px; padding-left: 20px; }
.cf-calc input { width: 120px; }

/* Book Club + Bible Study */
.bc-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.bc-door { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 16px; text-decoration: none; color: inherit; min-height: 220px; }
.bc-door h2 { margin: 0; font-size: 26px; }
.bc-bible { background: linear-gradient(180deg, rgba(40,24,10,.6), rgba(10,7,4,.9)), radial-gradient(ellipse 60% 60% at 50% 0%, rgba(255,210,130,.28), transparent 70%); border-color: var(--line-strong); }
.bs-start .radio { display: block; padding: 6px 0; }
.bs-start fieldset { border: 0; padding: 0; margin: 0; }

/* The room */
.cls { border-radius: 18px; padding: 12px; border: 1px solid var(--line-strong); display: grid; gap: 12px; min-height: calc(100vh - 120px); }
.cls-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px; }
.cls-title h1 { margin: 2px 0 0; font-size: clamp(18px, 2.6vw, 26px); }
.cls-status { display: flex; gap: 6px; flex-wrap: wrap; }
.cls-pill { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(0,0,0,.5); color: var(--muted, #b8b2a2); }
.cls-pill.live { color: #0b0b0b; background: #3fc58a; border-color: #3fc58a; font-weight: 700; }
.cls-pill.rec { color: #fff; background: #c0392b; border-color: #c0392b; font-weight: 700; }
.cls-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cls-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; min-height: 0; }
.cls-stage { border-radius: 14px; padding: 12px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 10px; min-height: 68vh; }
.cls-stage-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cls-stage-tabs .tab[aria-selected="true"] { background: var(--gold-grad); color: #1a1205; }
.cls-lead, .cls-follow { margin-left: auto; font-size: 12.5px; }
.cls-stage-view { min-height: 0; overflow: auto; border-radius: 12px; background: rgba(5,4,3,.72); border: 1px solid var(--line); }
.cls-people-stage { display: grid; place-items: center; min-height: 240px; padding: 24px; text-align: center; }
.cls-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.cls.stage-people .cls-tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tile { margin: 0; position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #0d0b08; border: 1px solid var(--line); }
.tile.speaking { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(227,183,74,.5); }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.no-cam video { display: none; }
.tile.no-cam::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(227,183,74,.25), transparent 45%); }
.tile figcaption { position: absolute; left: 8px; bottom: 6px; font-size: 12.5px; background: rgba(0,0,0,.65); padding: 2px 8px; border-radius: 999px; }
.cls-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.cls-side { border-radius: 14px; padding: 12px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-height: 0; max-height: calc(100vh - 210px); overflow: auto; }
.cls-note-form { display: grid; gap: 8px; }
.cls-note-form .row { display: flex; gap: 6px; flex-wrap: wrap; }
.cls-note-form select, .cls-note-form input { flex: 1 1 110px; min-width: 0; }
.cls-note { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); margin: 8px 0; background: rgba(0,0,0,.35); }
.cls-note.shared { border-left: 3px solid var(--gold); }
.cls-note p { margin: 6px 0; white-space: pre-wrap; }
.cls-note footer { display: flex; gap: 6px; }
.cls-chat { max-height: 50vh; overflow: auto; display: grid; gap: 6px; padding: 4px; }
.cls-chat p { margin: 0; }
.cls-banner { position: sticky; bottom: 10px; z-index: 5; }
.cls-banner > div { padding: 12px 16px; border-radius: 12px; border: 1px solid #c0392b; background: rgba(30,6,4,.92); }
.cls-door { border-radius: 18px; padding: clamp(18px, 6vw, 64px); display: grid; place-items: center; min-height: 70vh; border: 1px solid var(--line-strong); }
.cls-door-card { max-width: 520px; width: 100%; padding: 24px; border-radius: 16px; position: relative; z-index: 1; }
.linkish { background: none; border: 0; padding: 0; color: var(--gold-hi); cursor: pointer; text-align: left; font: inherit; }

/* Scripture on the stage: the Bible is the centre of the room. */
.bible { display: grid; gap: 10px; padding: 14px clamp(12px, 3vw, 28px); }
.bible-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; position: sticky; top: 0; z-index: 2; padding: 8px 0; background: linear-gradient(180deg, rgba(8,6,4,.98), rgba(8,6,4,.85)); }
.bible-bar select { min-width: 0; }
.bible-text { display: grid; gap: 24px; }
.bible-text.two { grid-template-columns: 1fr 1fr; }
.bible-col h2 { font-family: var(--display); color: var(--gold-hi); font-size: clamp(22px, 3vw, 30px); margin: 4px 0 12px; }
.bible-col h2 small { font-size: 13px; color: var(--gold); letter-spacing: .14em; }
.verse { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.7; margin: 0 0 6px; padding: 2px 6px; border-radius: 6px; cursor: pointer; color: #f1e7cf; }
.verse sup { color: var(--gold); font-family: system-ui; font-size: 11px; margin-right: 4px; }
.verse:hover, .verse:focus-visible { background: rgba(227,183,74,.08); outline: none; }
.verse[data-hl="gold"] { background: rgba(227,183,74,.28); box-shadow: inset 3px 0 0 var(--gold); }
.verse-menu { display: grid; gap: 4px; padding: 10px; border-radius: 10px; margin: 4px 0 10px; max-width: 320px; border: 1px solid var(--line-strong); }
.verse-menu button { text-align: left; background: rgba(0,0,0,.45); border: 1px solid var(--line); color: var(--gold-hi); padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.verse-menu button:hover, .verse-menu button:focus-visible { background: rgba(227,183,74,.16); }
.bible-src { font-size: 12px; }

/* Lesson chart on the stage */
.ls { display: grid; grid-template-rows: auto minmax(320px, 1fr) auto; gap: 8px; height: 100%; padding: 10px; }
.ls-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ls-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.ls-tools [aria-pressed="true"] { background: var(--gold-grad); color: #1a1205; }
.ls-chart { min-height: 320px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong); }
.screen-stage { display: grid; gap: 6px; padding: 8px; height: 100%; }
.screen-stage video { width: 100%; height: 100%; max-height: 70vh; object-fit: contain; background: #000; border-radius: 10px; }

@media (max-width: 1100px) { .bs-grid { grid-template-columns: 1fr 1fr; } .bs-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .ap-grid, .bs-grid, .bc-doors { grid-template-columns: 1fr; }
  .cls-body { grid-template-columns: 1fr; }
  .cls-top { grid-template-columns: 1fr; }
  .cls-actions { justify-content: flex-start; }
  .cls-side { max-height: none; }
  .cls-stage { min-height: 60vh; }
  .bible-text.two { grid-template-columns: 1fr; }
  .cf-anat { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tile, .verse { transition: none; } }
/* The stage keeps the full width until there is truly room for both columns (the rail takes ~150px). */
@media (max-width: 1240px) { .cls-body { grid-template-columns: 1fr; } .cls-side { max-height: none; } .cls-top { grid-template-columns: 1fr; } .cls-actions { justify-content: flex-start; } }
.cls-top .cls-title h1 { line-height: 1.1; }
.hall-library::before, .hall-bible::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: repeating-linear-gradient(180deg, transparent 0 86px, rgba(20,12,6,.95) 86px 96px, rgba(120,80,40,.35) 96px 98px); }
.cls-door > *, .ap-hero > *, .bc-hero > *, .bs-hero > * { position: relative; z-index: 1; }
.cls.hall-bible, .cls.hall-library, .cls.hall-trading { position: relative; }
.cls > * { position: relative; z-index: 1; }
.ap-grades { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.ap-grades li { display: grid; gap: 2px; padding: 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(0,0,0,.55); font-size: 11.5px; color: #c9c1ad; }
.ap-grades li b { font-family: var(--display); font-size: 22px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-grades li:last-child { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(227,183,74,.35), 0 0 30px rgba(227,183,74,.15); }
.ap-sem li { margin-bottom: 4px; }
.ap-doctrine { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.cf-canon { margin: 12px 0 0; padding: 12px 16px; border-left: 3px solid var(--gold); background: rgba(227,183,74,.06); border-radius: 0 10px 10px 0; }
@media (max-width: 900px) { .ap-grades { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Icons inside Academy headings stay text-sized (the Bible Study start panel drew one at full width). */
.ap-page h2 svg, .ap-page h3 svg, .bc-page h2 svg, .bs-page h2 svg, .bs-page h3 svg, .room-main h3 svg, .tv-side h3 svg, .cls h1 svg { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 6px; flex: none; }
/* Room controls in the house style: dark glass, gold edge, readable at a glance. */
.cls select, .cls input[type="text"], .cls input:not([type]), .cls textarea, .bs-page select, .bs-page input, .bc-page select, .bc-page input, .cls-door input {
  background: rgba(10,8,5,.85); color: #f1e7cf; border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 14px; }
.cls select, .bs-page select, .bc-page select { appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.cls select:focus-visible, .cls input:focus-visible, .cls textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cls textarea::placeholder, .cls input::placeholder { color: #8d8676; font-family: inherit; }
/* `hidden` must win over the flex/grid display rules inside rooms (controls and Record stay hidden until they apply). */
.cls [hidden], .cls-controls[hidden], .ap-page [hidden], .cf-page [hidden] { display: none !important; }
.dx-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dx-pick legend { margin-bottom: 8px; }
.dx-wrong { border-color: #e0605a !important; color: #ffb4ad !important; }
b.up { color: #3fc58a; } b.down { color: #e0605a; }
.jr .jr-body { margin: 0 0 4px; white-space: pre-wrap; font-family: Georgia, "Iowan Old Style", serif; font-size: 16px; line-height: 1.55; color: #f1e7cf; }
.jr h3 { color: var(--gold-hi); margin: 14px 0 6px; font-family: var(--display); }
/* Campus map: a photograph with our own gold labels; each building is a door. */
#ac-schools { min-width: 0; }
.campus-mapart { min-width: 0; max-width: 100%; margin: 0 0 12px; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong); background: #07050a; }
.cm-stage { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.campus-mapart svg { width: 100%; height: auto; display: block; }
@media (max-width: 719px) { .campus-mapart svg { width: 720px; max-width: none; } }
@media (min-width: 720px) { .cm-swipe { display: none; } }
.campus-mapart figcaption { padding: 8px 14px; font-size: 12px; }
.cm-lab rect { fill: rgba(8,6,3,.74); stroke: rgba(227,183,74,.75); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cm-cap { fill: #f6d77e; font: 700 12px/1 var(--display, Georgia), serif; letter-spacing: .12em; text-anchor: middle; }
.cm-sub { fill: #d9cfb6; font: 10.5px/1 system-ui, sans-serif; text-anchor: middle; }
.cm-bld { cursor: pointer; outline: none; }
.cm-bld:hover .cm-lab rect, .cm-bld:focus-visible .cm-lab rect { fill: rgba(40,28,8,.9); stroke: #f6d77e; stroke-width: 2; }
.cm-bld:focus-visible .cm-cap { text-decoration: underline; }
.dx-pick .btn { white-space: normal; text-align: left; height: auto; min-height: 44px; line-height: 1.3; max-width: 100%; }
.dx-pick .btn:disabled { opacity: .55; cursor: default; }
.dx-pick .btn.btn-gold:disabled { opacity: 1; box-shadow: 0 0 0 2px rgba(227,183,74,.55); }
.px-check { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: rgba(0,0,0,.35); }
.px-check ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; }
.fp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .fp-cols p { margin: 4px 0 0; font-size: 14px; }
.fp-form h3 { margin: 14px 0 4px; color: var(--gold-hi); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.fp-form select, .fp-form input, .fp-form textarea { background: rgba(10,8,5,.85); color: #f1e7cf; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; font: inherit; width: 100%; }
.fp-receipt { margin-top: 14px; border: 1px solid var(--gold); border-radius: 14px; padding: 16px; background: linear-gradient(180deg, rgba(227,183,74,.08), rgba(0,0,0,.4)); }
.fp-grade { display: flex; align-items: baseline; gap: 12px; } .fp-grade b { font-family: var(--display); font-size: 48px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp-receipt ul { list-style: none; padding: 0; display: grid; gap: 6px; } .fp-receipt li.ok b { color: #3fc58a; } .fp-receipt li.no b { color: #e0605a; }
@media (max-width: 760px) { .fp-cols { grid-template-columns: 1fr; } }
/* Drawn study hall behind the Bible Study hero and room door. */
.has-art { position: relative; overflow: hidden; }
.has-art > .hall-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.has-art::before, .has-art::after { display: none; }
.bs-hero.has-art .ap-hero-body { background: linear-gradient(90deg, rgba(8,5,3,.88), rgba(8,5,3,.55) 70%, transparent); padding: 18px 22px; border-radius: 14px; max-width: 640px; }
.cls-door.has-art .cls-door-card { background: rgba(10,7,4,.86); }
.ec-table { display: grid; gap: 6px; margin: 10px 0; }
.ec-table [role=row] { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.3); font-size: 14px; }
.ec-table .ec-h { background: transparent; border: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 0 10px; }
@media (max-width: 760px) { .ec-table [role=row] { grid-template-columns: 1fr; } .ec-table .ec-h { display: none; } }
.s1-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.s1-row input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--gold); }
[data-s1-form] .btn { margin-top: 12px; }
.s1-grades { list-style: none; padding: 0; display: grid; gap: 8px; } .s1-grades b { font-family: var(--display); color: var(--gold-hi); margin-right: 6px; }
.r-drill { display: grid; gap: 6px; margin: 10px 0; }
.r-row { display: grid; grid-template-columns: 40px 1fr 80px 44px minmax(0, 200px); gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.r-row input { background: rgba(10,8,5,.85); color: #f1e7cf; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; width: 100%; }
.r-row.ok { border-color: #3fc58a; } .r-row.no { border-color: #e0605a; } .r-row small { color: var(--gold-hi); }
@media (max-width: 760px) { .r-row { grid-template-columns: 34px 1fr; } .r-row input { grid-column: 1 / 2; } }
.o-drill { display: grid; gap: 8px; margin: 10px 0; }
.o-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(90px, .6fr)) auto; gap: 8px; align-items: end; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.o-row label { display: grid; gap: 3px; font-size: 11px; color: var(--muted, #a59f90); }
.o-row input, .o-row select { background: rgba(10,8,5,.85); color: #f1e7cf; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; width: 100%; }
.o-row small { grid-column: 1 / -1; color: var(--gold-hi); }
.o-row.ok { border-color: #3fc58a; } .o-row.no { border-color: #e0605a; }
@media (max-width: 900px) { .o-row { grid-template-columns: 1fr 1fr; } .o-row b { grid-column: 1 / -1; } }
.fl-run { text-align: center; padding: 18px; border: 1px solid var(--gold); border-radius: 14px; margin-top: 10px; }
.fl-time { font-family: var(--display); font-size: clamp(48px, 10vw, 84px); margin: 0; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.cf-page .lib-loop + p, .cf-page .ap-process + p { margin-top: 14px; }
.s2-table { display: grid; gap: 4px; margin: 10px 0; font-size: 14px; }
.s2-table > div { display: grid; grid-template-columns: 1.2fr 1fr 1fr .8fr; gap: 8px; padding: 6px 8px; border-bottom: 1px solid rgba(227,183,74,.15); }
.s2-table .s2-h { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.s11-case { padding: 10px 0; border-bottom: 1px solid rgba(227,183,74,.12); }
@media (max-width: 520px) { .s2-table > div { grid-template-columns: 1fr 1fr; } }
.s11-case .btn.is-right { border-color: #3fc58a; color: #3fc58a; }
.s11-case .btn.is-wrong { border-color: #e0605a; color: #e0605a; }
form[data-cf-explain] { display: grid; gap: 10px; margin-top: 10px; }
form[data-cf-explain] textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink, #f2ead6); background: rgba(0,0,0,.35); border: 1px solid rgba(227,183,74,.35); border-radius: 12px; padding: 12px 14px; resize: vertical; }
form[data-cf-explain] textarea:focus { outline: 2px solid var(--gold, #e3b74a); outline-offset: 1px; }
form[data-cf-explain] .btn { justify-self: start; }
.s13-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; align-items: end; }
.s13-form .btn { justify-self: start; }
.s15-tier { border: 1px solid rgba(227,183,74,.2); border-radius: 12px; padding: 10px 14px 4px; margin: 0 0 12px; }
.s15-tier legend { padding: 0 6px; }
.s13-lanes { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.s13-lanes li { padding: 8px 12px; border: 1px solid rgba(227,183,74,.18); border-radius: 10px; line-height: 1.45; }
.s14-rows { width: 100%; box-sizing: border-box; font: 14px/1.5 ui-monospace, Menlo, monospace; color: var(--text); background: rgba(0,0,0,.35); border: 1px solid rgba(227,183,74,.35); border-radius: 12px; padding: 12px; }
.cap-run { display: grid; gap: 4px; } .cap-run .btn { justify-self: start; margin-top: 8px; }
.map-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.map-key i, .map-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.s4-wide { grid-column: 1 / -1; }
.s9-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.s9-card { margin: 0; border: 1px solid rgba(227,183,74,.2); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.3); }
.s9-card img { display: block; width: 100%; height: 150px; object-fit: cover; }
.s9-card figcaption { padding: 8px 10px; font-size: 13px; line-height: 1.45; }
.set-list > li { min-width: 0; } .set-list .s { overflow-wrap: anywhere; }
.cls-when { margin: 6px 0 0; font-size: 14px; color: var(--text-2, #d8cfb8); }
.cls-when a { color: var(--gold); }
.cls-sched { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cls-sched input { min-height: 36px; border-radius: 8px; border: 1px solid #2f2b22; background: #0c0c0e; color: var(--text); padding: 0 8px; font: inherit; }
.bible-plan { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .bible-plan .is-here { border-color: var(--gold); color: var(--gold); }
.s5-ok { color: #3fc58a; } .s5-no { color: #e0605a; }
.s8-cands { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.s8-cand { border: 1px solid rgba(227,183,74,.2); border-radius: 12px; padding: 8px 12px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.s8-cand legend { padding: 0 6px; }
.s8-table > div { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
@media (max-width: 520px) { .s8-table > div { grid-template-columns: 1.2fr 1fr 1fr 1fr; font-size: 12px; gap: 4px; } }
.cls.is-ended [data-cls-av], .cls.is-ended [data-cls-invite], .cls.is-ended [data-cls-controls], .cls.is-ended [data-cls-chat-form], .cls.is-ended [data-cls-sched], .cls.is-ended [data-cls-newinvite], .cls.is-ended [data-cls-end] { display: none !important; }
.cls-ended { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(227,183,74,.35); }

/* ── A+ · Reading the glass ── */
.gl-page { max-width: 1180px; margin: 0 auto; padding: 0 0 48px; }
.gl-hero { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(22px, 4vw, 44px); margin: 8px 0 22px; background: radial-gradient(120% 140% at 85% -10%, rgba(227,183,74,.22), transparent 55%), radial-gradient(80% 120% at -10% 120%, rgba(91,141,239,.10), transparent 60%), linear-gradient(180deg, #14110b, #090807); border: 1px solid rgba(227,183,74,.28); box-shadow: 0 30px 80px -40px rgba(227,183,74,.35), inset 0 1px 0 rgba(255,255,255,.04); }
.gl-hero .display { font-size: clamp(34px, 6vw, 64px); line-height: 1.02; margin: 6px 0 10px; background: linear-gradient(180deg, #fff2cf 0%, #e3b74a 55%, #a87b22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.01em; }
.gl-hero .lead { font-size: clamp(16px, 2vw, 20px); max-width: 62ch; }
.gl-hero p { max-width: 70ch; }
.gl-hero-glow { position: absolute; inset: -40% -10% auto auto; width: 60%; height: 140%; background: conic-gradient(from 210deg, transparent, rgba(227,183,74,.16), transparent 40%); filter: blur(30px); pointer-events: none; animation: glDrift 14s ease-in-out infinite alternate; }
@keyframes glDrift { from { transform: translateX(0) rotate(0); } to { transform: translateX(-6%) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .gl-hero-glow { animation: none; } }
.gl-ladder { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.gl-g { font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; padding: 7px 11px; border-radius: 999px; border: 1px solid; }
.g-full { color: #3fc58a; border-color: rgba(63,197,138,.5); } .g-partial { color: #e3b74a; border-color: rgba(227,183,74,.5); } .g-degraded { color: #e0905a; border-color: rgba(224,144,90,.5); } .g-silence { color: #9aa0a6; border-color: rgba(154,160,166,.45); }
.gl-family { margin: 26px 0; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gl-card { display: grid; gap: 6px; padding: 10px 10px 14px; border-radius: 16px; text-decoration: none; color: inherit; border: 1px solid rgba(227,183,74,.18); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.gl-card:hover, .gl-card:focus-visible { transform: translateY(-3px); border-color: rgba(227,183,74,.55); box-shadow: 0 18px 40px -24px rgba(227,183,74,.5); }
.gl-card canvas, .gl-card-illu { width: 100%; height: 120px; border-radius: 10px; display: block; overflow: hidden; }
.gl-card-illu svg { width: 100%; height: 100%; }
.gl-card b { font-size: 16px; } .gl-card small { color: var(--text-3, #a59f8f); line-height: 1.4; }
.gl-need { justify-self: start; font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: #e3b74a; border: 1px solid rgba(227,183,74,.35); padding: 4px 7px; border-radius: 6px; margin-right: 6px; }
.gl-art { margin: 18px 0 0; }
.gl-art canvas { width: 100%; height: clamp(240px, 38vw, 380px); display: block; border-radius: 14px; border: 1px solid rgba(227,183,74,.22); }
.gl-art .ga-svg { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid rgba(227,183,74,.22); }
.gl-art figcaption { font-size: 12.5px; color: var(--text-3, #a59f8f); margin-top: 8px; }
.ga-t { fill: #d8cfb8; font: 13px system-ui; } .ga-n { font: 700 14px ui-monospace, Menlo, monospace; } .ga-stamp { fill: #e3b74a; font: 700 11px ui-monospace, Menlo, monospace; letter-spacing: .14em; }
.gl-body { display: grid; gap: 18px; }
.gl-tool { display: grid; gap: 14px; }
.gl-tool h2 { margin: 6px 0 0; }
.gl-simple { padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(227,183,74,.16), rgba(227,183,74,.04)); border: 1px solid rgba(227,183,74,.35); }
.gl-simple p { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; margin: 6px 0 0; }
.gl-read { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.gl-read > div { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(227,183,74,.12); }
.gl-read h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #e3b74a; }
.gl-read p { margin: 0; line-height: 1.55; }
.gl-ladder-full { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.gl-step { padding: 12px 14px; border-radius: 12px; border: 1px solid; background: rgba(0,0,0,.25); }
.gl-step b { font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; } .gl-step p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #d8cfb8; }
.gl-limit { padding: 10px 14px; border-left: 3px solid rgba(227,183,74,.6); background: rgba(227,183,74,.05); border-radius: 0 10px 10px 0; margin: 0; }
.gl-drills { display: grid; gap: 16px; }
.gl-drill { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(227,183,74,.14); }
.gl-drill h3 { margin: 0; }
.gl-gq { display: grid; gap: 6px; padding: 8px 0; }
.gl-say { display: grid; gap: 8px; } .gl-say .btn { white-space: normal; text-align: left; height: auto; min-height: 44px; line-height: 1.4; }
.gl-drills .btn.is-right { border-color: #3fc58a; color: #3fc58a; } .gl-drills .btn.is-wrong { border-color: #e0605a; color: #e0605a; }
.gl-course { list-style: none; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.gl-course a { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(227,183,74,.16); background: rgba(255,255,255,.02); color: inherit; text-decoration: none; }
.gl-course a:hover { border-color: rgba(227,183,74,.5); }
.gl-course small { grid-column: 2; color: var(--text-3, #a59f8f); }
.gl-n { grid-row: span 2; font: 700 20px/1 var(--display, serif); color: #e3b74a; text-align: center; }
.gl-search { width: 100%; box-sizing: border-box; margin-top: 12px; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(227,183,74,.35); background: rgba(0,0,0,.4); color: var(--text, #f2ead6); }
.gl-lib { display: grid; gap: 8px; }
.gl-entry { border-radius: 12px; padding: 10px 14px; border: 1px solid rgba(227,183,74,.14); }
.gl-entry summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.gl-entry summary small { flex-basis: 100%; color: var(--text-3, #a59f8f); }
.gl-entry[open] { border-color: rgba(227,183,74,.45); } .gl-entry .gl-read, .gl-entry .gl-ladder-full { margin-top: 10px; }
@media (max-width: 520px) { .gl-course a { grid-template-columns: 34px 1fr; } .gl-course a .owner { grid-column: 2; } .gl-art canvas { height: 260px; } }
.ap-feature { position: relative; display: grid; gap: 6px; margin: 0 0 20px; padding: 22px 26px; border-radius: 20px; text-decoration: none; color: inherit; overflow: hidden; background: radial-gradient(120% 160% at 100% 0%, rgba(227,183,74,.28), transparent 55%), linear-gradient(120deg, #17130b, #0b0a08); border: 1px solid rgba(227,183,74,.45); box-shadow: 0 24px 60px -36px rgba(227,183,74,.6); transition: transform .18s ease; }
.ap-feature:hover { transform: translateY(-2px); }
.ap-feature b { font-family: var(--display); font-size: clamp(26px, 4vw, 40px); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-feature-cta { justify-self: start; margin-top: 6px; padding: 8px 16px; border-radius: 999px; background: var(--gold-grad); color: #1a1205; font-weight: 800; letter-spacing: .06em; }

/* ── Academy campus — cinematic ── */
.ac-hero { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(24px, 4.5vw, 52px); margin: 0 0 20px; background: radial-gradient(110% 140% at 80% -20%, rgba(227,183,74,.30), transparent 55%), radial-gradient(70% 100% at 0% 120%, rgba(155,107,224,.12), transparent 60%), linear-gradient(180deg, #15110a, #080706); border: 1px solid rgba(227,183,74,.35); box-shadow: 0 40px 90px -50px rgba(227,183,74,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.ac-hero .display { font-size: clamp(42px, 8vw, 88px); line-height: .98; margin: 8px 0 6px; letter-spacing: .02em; background: linear-gradient(180deg, #fff3cf 0%, #f0c560 45%, #a87b22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 40px rgba(227,183,74,.18); }
.ac-hero .lead { font-size: clamp(17px, 2.2vw, 22px); }
.ac-stats { list-style: none; padding: 0; margin: 18px 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
@media (min-width: 1000px) { .ac-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ac-stats li { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(227,183,74,.22); background: rgba(0,0,0,.28); display: grid; gap: 2px; }
.ac-stats b { font-family: var(--display); font-size: clamp(26px, 3.4vw, 38px); line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.ac-stats span { font-size: 12.5px; color: var(--text-2, #cfc8b6); }
@media (prefers-reduced-motion: no-preference) {
  .cm-lab rect { transition: fill .2s, stroke .2s; }
}
.gl-plate { margin: 16px 0 0; }
.gl-plate img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid rgba(227,183,74,.3); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8); }
.gl-plate figcaption { font-size: 12.5px; color: var(--text-3, #a59f8f); margin-top: 8px; }
.gl-card-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.gl-hero-plate::before { content: ""; position: absolute; inset: 0 0 0 38%; background: url(/plates/plate-03-flow-family.jpg) 0 30% / cover no-repeat; opacity: .32; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); pointer-events: none; }
.gl-hero-plate > * { position: relative; }
@media (max-width: 720px) { .gl-hero-plate::before { inset: 0; opacity: .14; -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); } }

/* ── A+ · Blind Replay Decision Chamber ── */
.br-door { position: relative; display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 22px; align-items: center; margin: 0 0 22px; padding: 18px 22px 18px 18px; border-radius: 22px; color: inherit; text-decoration: none; overflow: hidden; background: radial-gradient(90% 160% at 0% 50%, rgba(227,183,74,.20), transparent 60%), radial-gradient(70% 120% at 100% 0%, rgba(91,141,239,.08), transparent 60%), linear-gradient(135deg, #15110a, #080706 70%); border: 1px solid rgba(227,183,74,.5); box-shadow: 0 30px 70px -40px rgba(227,183,74,.65), inset 0 1px 0 rgba(255,236,180,.10), inset 0 -20px 40px -30px rgba(0,0,0,.8); transition: transform .2s ease, box-shadow .2s ease; }
.br-door:hover, .br-door:focus-visible { transform: translateY(-3px); box-shadow: 0 36px 80px -36px rgba(227,183,74,.8), inset 0 1px 0 rgba(255,236,180,.14); }
.br-door-glow { position: absolute; inset: -60% auto auto -20%; width: 70%; height: 220%; background: conic-gradient(from 160deg, transparent, rgba(227,183,74,.16), transparent 35%); filter: blur(28px); pointer-events: none; }
.br-door-art { position: relative; display: block; height: 130px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #0e0c09, #060505); border: 1px solid rgba(227,183,74,.28); box-shadow: inset 0 0 30px rgba(0,0,0,.7); }
.br-door-art svg { width: 100%; height: 100%; display: block; }
.br-door-body { position: relative; display: grid; gap: 6px; }
.br-door-body b { font-family: var(--display); font-size: clamp(28px, 4vw, 42px); line-height: 1; background: linear-gradient(180deg, #fff2cf 0%, #e3b74a 55%, #a87b22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.br-door-body > span:not(.eyebrow):not(.ap-feature-cta) { color: var(--text-2); line-height: 1.5; max-width: 62ch; }
.br-hero .br-src { display: inline-flex; gap: 8px; align-items: center; margin: 12px 0 0; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(227,183,74,.35); background: rgba(0,0,0,.35); font-size: 12.5px; color: var(--gold-hi); max-width: 100%; }
.br-dot { width: 8px; height: 8px; border-radius: 50%; background: #e3b74a; box-shadow: 0 0 10px #e3b74a; flex: none; }
.br-strip { list-style: none; padding: 0; margin: 16px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.br-strip li { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 999px; font-size: 12px; color: var(--text-3); border: 1px solid rgba(227,183,74,.16); background: rgba(255,255,255,.02); transition: all .2s ease; }
.br-strip li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 10.5px/1 ui-monospace, Menlo, monospace; border: 1px solid rgba(227,183,74,.35); color: #e3b74a; }
.br-strip li.is-done { color: var(--text); border-color: rgba(227,183,74,.55); background: rgba(227,183,74,.08); }
.br-strip li.is-done span { background: var(--gold-grad); color: #1a1205; border-color: transparent; }
.br-chamber { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.br-stage, .br-form, .br-review, .br-card, .br-truth { border-radius: 20px; padding: clamp(14px, 2vw, 20px); background: linear-gradient(180deg, rgba(20,17,12,.88), rgba(8,8,9,.9)); border: 1px solid rgba(227,183,74,.26); box-shadow: 0 30px 70px -45px rgba(0,0,0,.9), 0 0 0 1px rgba(227,183,74,.06), inset 0 1px 0 rgba(255,230,170,.08); }
.br-stage { position: sticky; top: calc(var(--top-h) + 12px); display: grid; gap: 12px; }
.br-stage-h { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.br-pill { font: 700 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(227,183,74,.4); color: #e3b74a; background: rgba(227,183,74,.06); }
.br-pill.is-live { color: #1a1205; background: var(--gold-grad); border-color: transparent; }
.br-canvas-wrap { border-radius: 14px; overflow: hidden; border: 1px solid rgba(227,183,74,.24); box-shadow: inset 0 0 40px rgba(0,0,0,.8), 0 20px 50px -30px rgba(227,183,74,.35); }
.br-canvas-wrap canvas { display: block; width: 100%; height: clamp(300px, 34vw, 470px); }
.br-readout { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--text-2); }
.br-readout b { color: #e3b74a; font-weight: 600; margin-right: 4px; }
.br-flow { font-size: 13px; }
.br-form { display: grid; gap: 4px; }
.br-step { border: 0; margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(227,183,74,.10); min-width: 0; }
.br-step legend { display: grid; grid-template-columns: 28px 1fr; gap: 0 10px; align-items: center; padding: 0; margin-bottom: 10px; width: 100%; }
.br-step legend b { font-size: 15px; letter-spacing: .02em; }
.br-step legend small { grid-column: 2; color: var(--text-3); font-size: 12.5px; }
.br-n { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--display); color: #1a1205; background: var(--gold-grad); box-shadow: 0 0 14px rgba(227,183,74,.35); }
.br-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.br-chip, .br-check, .br-act { position: relative; cursor: pointer; }
.br-chip input, .br-check input, .br-act input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.br-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 13px; border-radius: 999px; font-size: 13px; border: 1px solid rgba(227,183,74,.24); background: rgba(255,255,255,.025); color: var(--text-2); transition: all .15s ease; }
.br-chip input:checked + span { color: #1a1205; background: var(--gold-grad); border-color: transparent; font-weight: 700; box-shadow: 0 6px 18px -8px rgba(227,183,74,.8); }
.br-chip input:focus-visible + span, .br-check input:focus-visible + span, .br-act input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.br-checks { display: grid; gap: 6px; }
.br-check span { display: block; padding: 9px 12px 9px 38px; border-radius: 12px; border: 1px solid rgba(227,183,74,.16); background: rgba(255,255,255,.02); font-size: 13px; color: var(--text-2); position: relative; }
.br-check span::before { content: ""; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 5px; border: 1px solid rgba(227,183,74,.5); }
.br-check input:checked + span { border-color: rgba(227,183,74,.55); color: var(--text); background: rgba(227,183,74,.07); }
.br-check input:checked + span::before { background: var(--gold-grad); border-color: transparent; box-shadow: inset 0 0 0 3px #1a1205; }
.br-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.br-levels label { display: grid; gap: 4px; font-size: 12px; color: var(--text-3); }
.br-levels input { font: 600 16px ui-monospace, Menlo, monospace; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(227,183,74,.32); background: rgba(0,0,0,.45); color: var(--text); width: 100%; min-width: 0; }
.br-levels input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227,183,74,.2); }
.br-rmeter { margin-top: 10px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(227,183,74,.18); background: rgba(0,0,0,.3); }
.br-rmeter b { grid-row: span 2; font: 700 26px/1 var(--display); color: var(--text-3); min-width: 64px; }
.br-rmeter span { font-size: 12.5px; color: var(--text-2); }
.br-rmeter i { display: block; height: 5px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.br-rmeter em { display: block; height: 100%; width: 0; background: var(--gold-grad); transition: width .25s ease; }
.br-rmeter.is-ok b { color: #3fc58a; } .br-rmeter.is-ok em { background: linear-gradient(90deg, #2c8f63, #3fc58a); }
.br-rmeter.is-low b { color: #e3b74a; }
.br-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.br-act span { display: grid; place-items: center; min-height: 48px; border-radius: 14px; font-weight: 700; letter-spacing: .04em; border: 1px solid rgba(227,183,74,.26); background: rgba(255,255,255,.025); transition: all .15s ease; }
.br-act-long input:checked + span { background: linear-gradient(180deg, #2f9e6c, #1d6b48); border-color: #3fc58a; color: #fff; }
.br-act-short input:checked + span { background: linear-gradient(180deg, #c4504a, #8d302c); border-color: #e0605a; color: #fff; }
.br-act-wait input:checked + span, .br-act-no_trade input:checked + span { background: var(--gold-grad); color: #1a1205; border-color: transparent; }
.br-lock { margin-top: 12px; min-height: 50px; font-size: 15px; letter-spacing: .06em; }
.br-form.is-locked { opacity: .78; }
.br-form.is-locked .br-lock { opacity: .5; }
.br-reveal { margin-top: 20px; display: grid; gap: 18px; animation: brRise .5s ease both; }
.br-reveal[hidden] { display: none; }
@keyframes brRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.br-verdicts { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; align-items: start; }
.br-card { display: grid; gap: 10px; }
.br-big { margin: 0; font-family: var(--display); font-size: clamp(24px, 3vw, 34px); line-height: 1.05; }
.br-big small { font: 600 15px ui-monospace, Menlo, monospace; color: var(--text-3); margin-left: 6px; }
.br-ok { color: #3fc58a; } .br-bad { color: #e0605a; } .br-flat { color: var(--gold-hi); }
.br-card p { margin: 0; color: var(--text-2); line-height: 1.5; }
.br-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.br-facts li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 13.5px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(227,183,74,.10); }
.br-facts b { color: #e3b74a; font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.br-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.br-checklist li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(227,183,74,.10); background: rgba(255,255,255,.02); }
.br-checklist li.pass { border-color: rgba(63,197,138,.28); } .br-checklist li.fail { border-color: rgba(224,96,90,.4); background: rgba(224,96,90,.05); }
.br-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.pass .br-mark { background: rgba(63,197,138,.16); color: #3fc58a; } .fail .br-mark { background: rgba(224,96,90,.16); color: #e0605a; }
.br-checklist b { font-size: 13.5px; } .br-checklist p { font-size: 12.5px; margin-top: 2px; }
.br-truth { display: grid; gap: 10px; background: radial-gradient(80% 140% at 100% 0%, rgba(227,183,74,.16), transparent 60%), linear-gradient(180deg, rgba(20,17,12,.92), rgba(8,8,9,.92)); }
.br-truth h2 { margin: 0; font-family: var(--display); font-size: clamp(22px, 3vw, 32px); }
.br-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.br-2x2 .q { position: relative; padding: 14px; border-radius: 14px; border: 1px solid rgba(227,183,74,.14); background: rgba(255,255,255,.02); display: grid; gap: 4px; opacity: .62; transition: all .2s ease; }
.br-2x2 .q small { color: var(--text-3); font-size: 12px; padding-right: 44px; } .br-2x2 .q b { font-size: 17px; }
.br-2x2 .q-good-good b, .br-2x2 .q-good-bad b { color: #3fc58a; } .br-2x2 .q-bad-good b, .br-2x2 .q-bad-bad b { color: #e0605a; }
.br-2x2 .q.is-you { opacity: 1; border-color: rgba(227,183,74,.7); background: rgba(227,183,74,.08); box-shadow: 0 0 0 1px rgba(227,183,74,.3), 0 18px 40px -24px rgba(227,183,74,.7); }
.br-you { position: absolute; top: 10px; right: 10px; font: 800 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--gold-grad); color: #1a1205; }
.br-law { margin: 6px 0 0; padding: 12px 14px; border-radius: 12px; font-family: var(--display); font-size: clamp(15px, 1.8vw, 18px); color: var(--gold-hi); border: 1px solid rgba(227,183,74,.3); background: rgba(0,0,0,.3); }
.br-again { gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.br-review { margin-top: 20px; display: grid; gap: 12px; }
.br-review-top { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: stretch; }
.br-streak { display: grid; place-items: center; align-content: center; padding: 12px 22px; border-radius: 16px; border: 1px solid rgba(227,183,74,.4); background: radial-gradient(circle at 50% 30%, rgba(227,183,74,.18), rgba(0,0,0,.3)); text-align: center; }
.br-streak b { font: 700 40px/1 var(--display); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.br-streak span { font-size: 11.5px; color: var(--text-3); max-width: 12ch; }
.br-mini2x2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.br-mini2x2 div { padding: 10px; border-radius: 12px; border: 1px solid rgba(227,183,74,.12); background: rgba(255,255,255,.02); display: grid; gap: 2px; }
.br-mini2x2 b { font: 700 22px/1 ui-monospace, Menlo, monospace; color: var(--gold-hi); } .br-mini2x2 span { font-size: 11.5px; color: var(--text-3); }
.br-jlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.br-jlist li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(227,183,74,.10); background: rgba(255,255,255,.02); font-size: 13px; border-left: 3px solid rgba(227,183,74,.3); }
.br-jlist li.is-sound { border-left-color: #3fc58a; } .br-jlist li.is-weak { border-left-color: #e0605a; }
.br-jdate { font: 12px ui-monospace, Menlo, monospace; color: var(--text-3); }
.br-tag { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(227,183,74,.2); color: var(--text-2); }
.br-tag.ok { color: #3fc58a; border-color: rgba(63,197,138,.4); } .br-tag.bad { color: #e0605a; border-color: rgba(224,96,90,.4); }
@media (max-width: 1020px) { .br-chamber, .br-verdicts { grid-template-columns: 1fr; } .br-stage { position: relative; top: 0; } }
@media (max-width: 640px) {
  .br-door { grid-template-columns: 1fr; padding: 14px; gap: 14px; } .br-door-art { height: 110px; }
  .br-mini2x2 { grid-template-columns: 1fr 1fr; } .br-review-top { grid-template-columns: 1fr; }
  .br-facts li { grid-template-columns: 1fr; gap: 2px; }
  .br-canvas-wrap canvas { height: 300px; }
  .br-hero .br-src { border-radius: 12px; align-items: flex-start; }
  .br-strip li { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .br-reveal { animation: none; } .br-door, .br-door:hover { transition: none; transform: none; } }
/* ══ Living Learning System — MindCanvas, House of Understanding, Language atlas ══ */
.mc { display:grid; gap:10px; min-width:0 }
.mc-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px; border-radius:16px; background:linear-gradient(180deg,#17130b,#0b0905); border:1px solid rgba(227,183,74,.35); box-shadow:inset 0 1px 0 rgba(255,220,140,.12), 0 10px 26px -14px rgba(227,183,74,.35) }
.mc-group { display:flex; flex-wrap:wrap; gap:4px; align-items:center }
.mc-end { margin-left:auto }
.mc-b { font:inherit; font-size:12.5px; font-weight:600; color:var(--gold-hi); background:rgba(10,8,4,.7); border:1px solid rgba(227,183,74,.3); border-radius:999px; padding:7px 12px; min-height:34px; cursor:pointer }
.mc-b.on, .mc-b[aria-pressed="true"] { background:var(--gold-grad); color:#1a1205; border-color:transparent }
.mc-b:disabled { opacity:.4; cursor:not-allowed }
.mc-commit { border-color:var(--line-strong) }
.mc-pen { width:26px; height:26px; border-radius:50%; background:var(--pen); border:2px solid #0b0905; box-shadow:0 0 0 1px rgba(227,183,74,.4); cursor:pointer }
.mc-pen.on { box-shadow:0 0 0 2px var(--gold-hi), 0 0 10px var(--pen) }
.mc-textrow { display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--text-2) }
.mc-textrow input { flex:1; min-width:0; background:#0c0a07; border:1px solid var(--line-strong); border-radius:10px; color:var(--text); padding:8px 10px; font:inherit }
.mc-palette { display:flex; flex-wrap:wrap; gap:6px }
.mc-pchip { font:inherit; display:inline-flex; flex-direction:column; align-items:center; gap:1px; padding:6px 12px; border-radius:999px; border:1px solid rgba(227,183,74,.35); background:#100c06; color:var(--gold-hi); cursor:pointer; min-height:36px }
.mc-pchip b { font-size:15px }
.mc-pchip small { font-size:11px; color:var(--text-2) }
.mc-pchip.on { background:var(--gold-grad); color:#1a1205 }
.mc-pchip.on small { color:#3a2a08 }
.mc-stage { border-radius:18px; overflow:hidden; border:1px solid rgba(227,183,74,.3); background:radial-gradient(ellipse at 50% 30%,#15110a,#070605 70%); box-shadow:inset 0 0 40px rgba(0,0,0,.7), 0 24px 50px -30px rgba(255,180,80,.3) }
.mc-svg { display:block; width:100%; height:auto; cursor:crosshair; user-select:none; -webkit-user-select:none }
.mc[data-tool="erase"] .mc-svg { cursor:not-allowed }
.mc[data-tool="chip"] .mc-chip, .mc[data-tool="text"] .mc-txt { cursor:grab }
.mc-chip text, .mc-txt { font-family:'Noto Sans Hebrew','Arial Hebrew',var(--font); pointer-events:none }
.mc-chip rect { pointer-events:all }
.mc-foot { margin:0 }

.hu-page { display:grid; gap:16px; min-width:0 }
.hu-hero { position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line-strong); min-height:300px; display:grid; align-items:end; background:#05060d; box-shadow:0 30px 70px -40px rgba(227,183,74,.45) }
.hu-hero-art { position:absolute; inset:0 } .hu-hero-art svg { width:100%; height:100%; display:block }
.hu-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,4,6,.95),rgba(4,4,6,.7) 50%,rgba(4,4,6,.15)), linear-gradient(0deg,rgba(4,4,6,.9),transparent 60%) }
.hu-hero-body { position:relative; z-index:1; padding:28px; max-width:640px }
.hu-hero h1 { margin:.2em 0 .1em; font-size:clamp(26px,4.4vw,46px); line-height:1.08; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.hu-tag { letter-spacing:.32em; font-size:12px; color:var(--gold-hi); margin:4px 0 10px }
.hu-hero .lead b { font-size:1.2em; color:var(--gold-hi) }
.hu-journey { border-radius:20px; padding:14px 16px; display:grid; gap:10px }
.hu-journey-h { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline }
.hu-journey-h b { color:var(--gold-hi); font-size:13px }
.hu-loop { display:flex; gap:4px; list-style:none; margin:0; padding:2px 0 6px; overflow-x:auto; scrollbar-width:thin }
.hu-loop li { flex:none; display:flex; align-items:center; gap:5px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); border:1px solid #2a251a; border-radius:999px; padding:5px 10px 5px 5px; background:#0b0a08 }
.hu-loop li span { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#1b170f; font-size:10px; color:var(--text-2) }
.hu-loop li.on { color:#1a1205; background:var(--gold-grad); border-color:transparent; box-shadow:0 0 18px rgba(227,183,74,.45) }
.hu-loop li.on span { background:#1a1205; color:var(--gold-hi) }
.hu-ladder { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px }
.hu-rung { font:inherit; font-size:12.5px; font-weight:600; color:var(--text-2); background:linear-gradient(180deg,#14110b,#0a0906); border:1px solid #2e2818; border-radius:14px; padding:8px 6px; cursor:pointer; display:grid; gap:2px; justify-items:center; text-align:center; min-height:48px }
.hu-rung small { color:var(--gold); font-size:10.5px; letter-spacing:.1em }
.hu-rung.on { color:var(--gold-hi); border-color:var(--line-strong); box-shadow:inset 0 0 0 1px rgba(227,183,74,.4), 0 0 20px rgba(227,183,74,.2) }
.hu-together { border-radius:16px; padding:10px 16px }
.hu-together summary { cursor:pointer; color:var(--gold-hi); font-weight:600; font-size:13.5px }
.hu-together-f { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin:10px 0 6px }
.hu-together-f label { display:grid; gap:3px; font-size:12px; color:var(--text-2) }
.hu-together-f input { background:#0c0a07; border:1px solid var(--line-strong); border-radius:10px; color:var(--text); padding:8px 10px; font:inherit; width:150px }
.hu-turn { margin:6px 0 0; color:var(--gold-hi); font-size:13.5px }
.hu-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start }
.hu-main { display:grid; gap:16px; min-width:0 }
.hu-side { display:grid; gap:12px; position:sticky; top:calc(var(--top-h, 60px) + 12px) }
.hu-card { border-radius:18px; padding:14px 16px; display:grid; gap:8px; align-content:start; min-width:0 }
.hu-card h3 { margin:0; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold) }
.hu-scene { position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line-strong); background:#05060d; box-shadow:0 30px 60px -30px rgba(255,180,80,.3) }
.hu-scene .hu-svg { width:100%; height:auto; display:block; aspect-ratio:16/9 }
.hu-obj { cursor:pointer; transition:filter .2s; outline:none }
.hu-obj:hover, .hu-obj:focus-visible { filter:drop-shadow(0 0 6px #ffd27a) brightness(1.15) }
.hu-obj.on { filter:drop-shadow(0 0 12px #ffd27a) drop-shadow(0 0 2px #fff) brightness(1.25) }
.hu-flicker { animation:hu-flick 3.2s ease-in-out infinite }
@keyframes hu-flick { 50% { opacity:.75 } }
@media (prefers-reduced-motion: reduce) { .hu-flicker { animation:none } }
.hu-caption { position:absolute; left:50%; top:12px; pointer-events:none; transform:translateX(-50%); display:flex; gap:10px; align-items:baseline; padding:6px 16px; border-radius:999px; background:rgba(8,6,3,.82); border:1px solid var(--line-strong); white-space:nowrap }
.hu-caption:empty { display:none }
.hu-caption b { font-size:26px; color:var(--gold-hi); font-family:'Noto Sans Hebrew','Arial Hebrew',serif }
.hu-caption span { color:var(--text-2); font-size:13px }
.hu-cards { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:14px; align-items:start }
.hu-cards-side { display:grid; gap:12px; min-width:0 }
.hu-trace { border-radius:22px; padding:16px; display:grid; gap:8px; background:linear-gradient(180deg,rgba(26,20,10,.85),rgba(8,7,5,.9)); box-shadow:0 0 0 1px rgba(227,183,74,.32), 0 0 40px rgba(227,183,74,.1), inset 0 1px 0 rgba(255,220,140,.1) }
.hu-trace-h { display:flex; justify-content:space-between; align-items:center; gap:8px }
.hu-trace-sub { margin:0; color:var(--text-2); font-style:italic }
.hu-word { display:flex; justify-content:center; gap:6px; font-size:clamp(52px,9vw,84px); line-height:1.25; color:var(--gold-hi); font-family:'Noto Sans Hebrew','Arial Hebrew',serif; text-shadow:0 0 24px rgba(227,183,74,.35) }
.hu-let { position:relative; padding-top:10px }
.hu-let i { position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:50%; background:var(--gold-grad); color:#1a1205; font:700 11px/20px var(--font); text-align:center; font-style:normal; text-shadow:none }
.hu-hintline { margin:0; text-align:center; color:var(--text) } .hu-hintline i { color:var(--gold-hi) }
.hu-tracebox .mc-bar { padding:6px } .hu-tracebox .mc-b { padding:6px 10px; min-height:32px }
.hu-trace-act, .hu-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.hu-thumb { display:block; border-radius:14px; overflow:hidden; border:1px solid rgba(227,183,74,.3); background:#05060d; aspect-ratio:16/10 }
.hu-thumb svg { width:100%; height:100%; display:block }
.hu-opts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px }
.hu-opt { font:inherit; font-size:15px; min-height:44px; border-radius:12px; border:1px solid rgba(227,183,74,.3); background:#0e0b07; color:var(--text); cursor:pointer; padding:6px }
.hu-opt[lang="he"] { font-size:21px; font-family:'Noto Sans Hebrew','Arial Hebrew',serif }
.hu-opt.on { border-color:var(--gold-hi); box-shadow:0 0 0 1px var(--gold-hi); color:var(--gold-hi) }
.hu-opt.ok { border-color:#3fc6b8; color:#8fe7dc } .hu-opt.no { border-color:#e0574a; color:#f0a49b }
.hu-big { margin:0; font-size:40px; color:var(--gold-hi); text-align:center; font-family:'Noto Sans Hebrew','Arial Hebrew',serif }
.hu-ph { margin:0; text-align:center; font-weight:700; letter-spacing:.12em; color:var(--text) } .hu-ph small { color:var(--text-3); letter-spacing:0; font-weight:400 }
.hu-step { border-radius:22px; padding:18px; background:linear-gradient(180deg,rgba(18,15,10,.8),rgba(8,7,5,.85)); box-shadow:0 0 0 1px rgba(227,183,74,.2), inset 0 1px 0 rgba(255,220,140,.06); display:grid; gap:14px; min-width:0 }
.hu-step[data-hu-panel="explore"] { background:none; box-shadow:none; padding:0 }
.hu-step-h h2 { margin:.2em 0; font-family:var(--display); color:var(--gold-hi) } .hu-step-h p { margin:0; color:var(--text-2) }
.hu-quiz { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.hu-quiz-8 { grid-template-columns:repeat(4,minmax(0,1fr)) }
.hu-q { margin:0; border:1px solid #2e2818; border-radius:16px; padding:10px; display:grid; gap:8px; background:#0b0906; min-width:0 }
.hu-q legend { padding:0 6px; color:var(--gold); font-weight:700 }
.hu-q.ok { border-color:rgba(63,198,184,.7) } .hu-q.no { border-color:rgba(224,87,74,.7) }
.hu-q small, .hu-q .owner { font-size:12px; color:var(--text-2) }
.hu-q select { font:inherit; font-size:19px; background:#100c06; color:var(--gold-hi); border:1px solid var(--line-strong); border-radius:10px; padding:6px; min-height:42px; font-family:'Noto Sans Hebrew','Arial Hebrew',serif }
.hu-hint { margin:0; font-size:13px; color:var(--text) } .hu-hint b { font-size:20px; color:var(--gold-hi) }
.hu-score { margin:0; color:var(--text) } .hu-score b { color:var(--gold-hi) }
.hu-escape { display:grid; grid-template-columns:160px minmax(0,1fr); gap:16px; align-items:start }
.hu-lockdoor { display:grid; gap:10px; justify-items:center; perspective:600px }
.hu-lockdoor svg { width:140px; height:auto; filter:drop-shadow(0 0 18px rgba(227,183,74,.25)) }
.hu-leaf { transform-origin:14px 100px; transition:transform 1.2s cubic-bezier(.2,.8,.2,1) }
.hu-lockdoor.open .hu-leaf { transform:rotateY(-70deg) }
.hu-lockdoor.open svg rect:first-child { fill:#3a2a10 }
/* House photo scene: thumbnails outline the asked-about object; the locked door is a carved-door photo whose arch swings open. */
.hu-focus .ph-hit { fill:rgba(246,215,126,.1); stroke:#f6d77e; stroke-width:2.5; vector-effect:non-scaling-stroke }
.hu-lockdoor svg { width:min(180px, 46vw); border-radius:12px }
.hu-lockdoor .hu-leaf { transform-origin:25px 100px }
.hu-lockdoor .hu-beyond { opacity:0; transition:opacity 1.2s }
.hu-lockdoor.open .hu-beyond { opacity:1 }
.hu-tumblers { display:flex; gap:5px; list-style:none; padding:0; margin:0 }
.hu-tumblers li { width:12px; height:22px; border-radius:6px; background:#1b170f; border:1px solid #3a3020 }
.hu-tumblers li.set { background:#5a4720 } .hu-tumblers li.ok { background:#3fc6b8 } .hu-tumblers li.no { background:#e0574a }
.hu-ev { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.hu-ev-col { border:1px solid #2e2818; border-radius:16px; padding:12px; background:#0b0906; min-width:0 }
.hu-ev-col h3 { margin:0 0 4px; color:var(--gold-hi); font-size:14px; letter-spacing:.1em; text-transform:uppercase }
.hu-ev-col ul { list-style:none; padding:0; margin:8px 0 0; display:grid; gap:6px }
.hu-ev-col li { display:grid; font-size:13px } .hu-ev-col li small { color:var(--text-3); font-size:11.5px }
.hu-skills { list-style:none; padding:0; margin:0; display:grid; gap:8px }
.hu-skills li { display:grid; grid-template-columns:1fr auto; gap:0 8px; align-items:baseline; padding-bottom:6px; border-bottom:1px solid #221e15 }
.hu-skills li span { font-size:13px; color:var(--text) } .hu-skills li b { color:var(--gold-hi) } .hu-skills li b.dim { color:var(--text-3) }
.hu-skills li small { grid-column:1 / -1; font-size:11.5px; color:var(--text-3) }
.hu-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap }
.hu-nav .owner { flex:1; text-align:center; min-width:120px }
.hu-recon .mc-pchip b { font-family:'Noto Sans Hebrew','Arial Hebrew',serif; font-size:18px }
.hu-entry { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); border-radius:24px; overflow:hidden; margin-bottom:18px; text-decoration:none; color:var(--text); border:1px solid var(--line-strong); background:linear-gradient(120deg,#120d06,#060505 70%); box-shadow:0 0 0 1px rgba(227,183,74,.12), 0 30px 60px -36px rgba(227,183,74,.55), inset 0 1px 0 rgba(255,220,140,.12) }
.hu-entry-art svg { width:100%; height:100%; min-height:220px; display:block }
.hu-entry-body { display:grid; gap:8px; align-content:center; padding:22px 24px }
.hu-entry-h { font-family:var(--display); font-size:clamp(22px,3vw,32px); line-height:1.1; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.hu-entry-he { font-size:26px; color:var(--gold-hi); font-family:'Noto Sans Hebrew','Arial Hebrew',serif }
.hu-entry-p { color:var(--text-2); font-size:14px }
.hu-entry .btn { justify-self:start }
.hu-entry:hover { border-color:var(--gold-hi) }
.pg-atlas { border-radius:22px; padding:18px; margin-bottom:18px; display:grid; gap:14px }
.pg-atlas-h { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:end }
.pg-atlas-h h2 { margin:.15em 0; font-family:var(--display); color:var(--gold-hi) } .pg-atlas-h p { margin:0; max-width:560px }
.pg-search input { width:260px; max-width:100%; background:#0c0a07; border:1px solid var(--line-strong); border-radius:999px; color:var(--text); padding:9px 14px; font:inherit }
.pg-tiles { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px }
.pg-tile { border-radius:16px; padding:12px; display:grid; gap:3px; align-content:start; background:linear-gradient(180deg,#121009,#090806); border:1px solid #2a2418; min-width:0 }
.pg-tile.live { border-color:var(--line-strong); box-shadow:0 0 22px rgba(227,183,74,.12) }
.pg-native { font-size:22px; color:var(--gold-hi); line-height:1.25 }
.pg-tile b { font-size:13.5px } .pg-tile small { color:var(--text-3); font-size:11.5px } .pg-note { color:var(--text-2) !important }
.pg-status { justify-self:start; margin-top:6px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; border-radius:999px; padding:3px 8px; border:1px solid #3a3426; color:var(--text-3) }
.pg-status.ok { color:#1a1205; background:var(--gold-grad); border-color:transparent }
.pg-go { display:inline-block; margin-top:6px; margin-right:8px; color:var(--gold-hi); font-size:13px; font-weight:600 }
.pg-scripture { display:grid; gap:4px; padding:14px 16px; border-radius:16px; text-decoration:none; color:var(--text); border:1px dashed rgba(227,183,74,.45); background:linear-gradient(90deg,rgba(40,28,10,.6),rgba(10,8,5,.6)) }
.pg-scripture b { color:var(--gold-hi); font-size:15px } .pg-scripture span:last-child { color:var(--text-2); font-size:13px }
.cm-sec { margin-top:18px; display:grid; gap:10px }
.cm-sec h2 { margin:0; font-family:var(--display); color:var(--gold-hi) }
@media (max-width: 1000px) { .hu-grid { grid-template-columns:minmax(0,1fr) } .hu-side { position:static; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) } .hu-cards { grid-template-columns:minmax(0,1fr) } }
@media (max-width: 720px) {
  .hu-ladder { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .hu-quiz-8 { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hu-escape { grid-template-columns:minmax(0,1fr) }
  .hu-ev { grid-template-columns:minmax(0,1fr) }
  .hu-entry { grid-template-columns:minmax(0,1fr) } .hu-entry-art svg { min-height:150px; max-height:190px }
  .hu-hero-body { padding:18px } .hu-hero { min-height:260px }
  .hu-caption b { font-size:20px }
  .mc-end { margin-left:0 }
  .pg-tiles { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pg-search, .pg-search input { width:100% }
}
.hu-page [hidden], .mc [hidden], .pg-atlas [hidden], .hu-together [hidden] { display:none !important }

.br-recon{margin-top:22px;padding-top:18px;border-top:1px solid rgba(227,183,74,.18)}
.br-recon h3{margin:4px 0 6px}

/* ── Living Conversation · Café de Lucía (cv-) ───────────────── */
.cv-page{display:grid;gap:18px}
.cv-hero{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(227,183,74,.35);min-height:clamp(300px,36vw,520px);display:grid}
.cv-scene{position:absolute;inset:0}.cv-scene-svg{width:100%;height:100%;display:block}
.cv-hero-copy{position:relative;align-self:end;padding:28px clamp(18px,4vw,36px);background:linear-gradient(180deg,rgba(6,5,4,0) 0%,rgba(6,5,4,.82) 45%,rgba(6,5,4,.95) 100%);display:grid;gap:8px}
.cv-hero-copy h1{margin:0;font-size:clamp(30px,6vw,48px);color:#f6d77e;letter-spacing:-.01em}
.cv-hero-copy .lead{max-width:62ch;margin:0;color:#e9e1cf}
.cv-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media (max-width:900px){.cv-grid{grid-template-columns:1fr}}
.cv-chat{border-radius:20px;padding:16px;display:grid;gap:12px;border:1px solid rgba(227,183,74,.28)}
.cv-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cv-seg{display:inline-flex;border:1px solid rgba(227,183,74,.45);border-radius:999px;overflow:hidden}
.cv-seg button{background:transparent;color:#d8cfbb;border:0;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer}
.cv-seg button[aria-pressed="true"]{background:linear-gradient(180deg,#f0cf74,#c99a35);color:#1a1206;font-weight:700}
.cv-level{display:flex;gap:6px;align-items:center;font-size:13px;color:#bdb39f}
.cv-level select{background:#120d05;color:#f3e8cc;border:1px solid rgba(227,183,74,.4);border-radius:10px;padding:6px 8px}
.cv-mini{background:rgba(227,183,74,.08);border:1px solid rgba(227,183,74,.35);color:#f0d690;border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer}
.cv-mini:focus-visible,.cv-chip:focus-visible,.cv-seg button:focus-visible{outline:2px solid #f6d77e;outline-offset:2px}
.cv-log{list-style:none;margin:0;padding:6px 2px;display:grid;gap:12px;max-height:520px;overflow:auto}
.cv-empty{color:#e9e1cf;font-size:16px}.cv-empty p{margin:0 0 4px}
.cv-turn{max-width:86%;border-radius:18px;padding:12px 14px}
.cv-me{justify-self:end;background:linear-gradient(180deg,rgba(240,207,116,.22),rgba(201,154,53,.14));border:1px solid rgba(227,183,74,.45);color:#fff6dc}
.cv-me p{margin:0;font-size:16px}
.cv-her{justify-self:start;background:#14100a;border:1px solid rgba(227,183,74,.22)}
.cv-who{display:flex;gap:7px;align-items:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#c9a54c}
.cv-dot{width:8px;height:8px;border-radius:50%;background:#b8452c;box-shadow:0 0 8px #b8452c}
.cv-es{margin:6px 0;font-size:17px;color:#f6efdc}
.cv-tools{display:flex;gap:6px;flex-wrap:wrap}
.cv-en{margin:8px 0 0;color:#a9a08c;font-size:14px}
.cv-coach{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(63,198,184,.07);border:1px solid rgba(63,198,184,.35)}
.cv-coach p{margin:4px 0 0;color:#bff0e9;font-size:15px}
.cv-note{margin:8px 0 0;font-size:13px;color:#cbbf9f}
.cv-starters{display:flex;flex-wrap:wrap;gap:8px}
.cv-chip{background:#120d05;border:1px solid rgba(227,183,74,.4);color:#f3e2b0;border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer}
.cv-form{display:grid;gap:8px}
.cv-form textarea{width:100%;box-sizing:border-box;background:#0d0a06;color:#f6efdc;border:1px solid rgba(227,183,74,.4);border-radius:14px;padding:12px;font:inherit;font-size:16px;resize:vertical}
.cv-actions{display:flex;gap:8px;justify-content:flex-end}
.cv-signin{display:grid;gap:10px;padding:14px;border-radius:14px;background:rgba(227,183,74,.06);border:1px dashed rgba(227,183,74,.4)}
.cv-signin p{margin:0;color:#e2d8c2}
.cv-side{display:grid;gap:12px}.cv-card{border-radius:18px;padding:14px 16px;border:1px solid rgba(227,183,74,.22)}
.cv-card h3{margin:0 0 6px;color:#f0d690;font-size:16px}.cv-card ul{margin:0;padding-left:18px;display:grid;gap:6px;color:#d9cfb9;font-size:14px}
.cv-entry-art{display:grid;place-items:center;font-size:64px;background:radial-gradient(circle at 50% 30%,rgba(255,206,120,.35),rgba(42,26,16,.9) 70%)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cv-rom{margin:2px 0 6px;color:#c9b98f;font-size:14px;font-style:italic}
.cv-worlds{display:grid;gap:8px}
.cv-worlds-home{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:-4px 0 8px}
.cv-world{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:#120d05;border:1px solid rgba(227,183,74,.3);color:#f3e2b0;text-decoration:none}
.cv-world span{grid-row:1/3;font-size:26px;text-align:center}.cv-world b{font-size:14px}.cv-world small{color:#a99f88;font-size:12px}
.cv-world:hover,.cv-world:focus-visible{border-color:#e3b74a;outline:none}
/* ═══ Book Club — ATH Academy library home · Bible Study — Our Study Room ═══
   Obsidian + refined gold, warm lamp light, rounded dimensional glass. */
.ath-coin { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #2a2112, #0a0806 70%); border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,230,160,.25), 0 0 0 3px rgba(10,8,5,.9), 0 0 0 4px rgba(227,183,74,.35), 0 8px 24px rgba(0,0,0,.6); }
.ath-coin img { width: 70%; height: 70%; object-fit: contain; }
.ath-coin.sm { width: 64px; height: 64px; }
.bc-lib { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.bc-main { min-width: 0; display: grid; gap: 18px; }
.bc-main > * { margin: 0; }
.bc-rail { position: sticky; top: calc(var(--top-h) + 14px); border-radius: 20px; padding: 18px 12px; display: grid; gap: 14px;
  background: linear-gradient(180deg, rgba(26,19,10,.85), rgba(8,6,4,.92)); border: 1px solid var(--line); min-width: 0; }
.bc-rail-brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; padding: 0 6px 12px; border-bottom: 1px solid var(--line); }
.bc-rail-brand b { display: block; font-family: var(--display); letter-spacing: .12em; font-size: 14px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bc-rail-brand small { color: var(--text-2); font-size: 12px; }
.bc-rail nav, .bc-rail-foot { display: grid; gap: 2px; }
.bc-rail nav a, .bc-rail-foot a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; }
.bc-rail nav a span, .bc-rail-foot a span { width: 18px; text-align: center; color: var(--gold); }
.bc-rail nav a:hover, .bc-rail-foot a:hover { background: rgba(227,183,74,.08); }
.bc-rail nav a[aria-current] { background: linear-gradient(90deg, rgba(227,183,74,.22), rgba(227,183,74,.04)); box-shadow: inset 2px 0 0 var(--gold); color: var(--gold-hi); }
.bc-rail-foot { border-top: 1px solid var(--line); padding-top: 10px; }
.bc-hero.has-art { min-height: clamp(380px, 46vw, 540px); border-radius: 24px; padding: clamp(18px, 4vw, 44px); align-content: end; margin: 0; box-shadow: 0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,220,140,.12); }
.bc-hero-body { position: relative; z-index: 1; max-width: 620px; display: grid; gap: 10px; padding: clamp(16px, 3vw, 26px); border-radius: 18px;
  background: linear-gradient(160deg, rgba(14,10,6,.84), rgba(8,6,4,.62)); border: 1px solid rgba(232,193,90,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,230,160,.12), 0 18px 50px rgba(0,0,0,.5); }
.bc-hero-body > * { margin: 0; }
.bc-kicker { font-family: var(--display); letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--gold); }
.bc-hero .display { font-size: clamp(30px, 5vw, 54px); line-height: 1.04; }
.bc-sum { color: var(--text-2); }
.bc-cta, .bc-card .row { flex-wrap: wrap; gap: 10px; }
.bc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bc-tile { display: grid; gap: 4px; padding: 18px; border-radius: 18px; text-decoration: none; color: var(--text); position: relative; overflow: hidden;
  background: linear-gradient(170deg, rgba(40,28,12,.7), rgba(8,6,4,.9)); border: 1px solid var(--line); transition: transform .18s, border-color .18s; }
.bc-tile::after { content: ""; position: absolute; inset: -40% -20% auto auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,205,120,.18), transparent 70%); pointer-events: none; }
.bc-tile:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.bc-tile-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; color: var(--gold-hi); background: rgba(227,183,74,.1); border: 1px solid var(--line); margin-bottom: 6px; }
.bc-tile b { font-size: 16px; } .bc-tile small { color: var(--text-2); }
.bc-search { border-radius: 18px; padding: 14px; }
.bc-search input[type="search"] { width: 100%; font-size: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(5,4,3,.8); border: 1px solid var(--line-strong); color: var(--text); }
.bc-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bc-results:not(:empty) { margin-top: 10px; }
.bc-results a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); background: rgba(227,183,74,.05); }
.bc-results a:hover { background: rgba(227,183,74,.12); }
.bc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.bc-card { border-radius: 20px; padding: clamp(16px, 2.6vw, 24px); display: grid; gap: 10px; align-content: start;
  background: linear-gradient(170deg, rgba(24,18,10,.82), rgba(8,6,4,.9)); border: 1px solid var(--line); }
.bc-card > * { margin: 0; }
.bc-card h2 { font-size: 22px; }
.bc-continue { background: linear-gradient(160deg, rgba(60,40,14,.6), rgba(8,6,4,.92)), radial-gradient(ellipse at 100% 0, rgba(255,200,110,.2), transparent 60%); border-color: var(--line-strong); }
.bc-meter { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.bc-meter span { display: block; height: 100%; background: var(--gold-grad); border-radius: 99px; }
.bc-list { margin: 0; }
.bc-row { display: flex; gap: 12px; align-items: center; }
.bc-row-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--gold-hi); background: rgba(227,183,74,.1); border: 1px solid var(--line); }
.bc-row p { margin: 2px 0 0; }
.bc-empty { padding: 16px; border-radius: 14px; border: 1px dashed var(--line-strong); background: rgba(227,183,74,.04); display: grid; gap: 10px; justify-items: start; }
.bc-empty p { margin: 0; }
.bc-open summary { list-style: none; display: inline-flex; cursor: pointer; }
.bc-open summary::-webkit-details-marker { display: none; }
.bc-open[open] summary { margin-bottom: 12px; }
.bc-bible-door { display: flex; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 20px; text-decoration: none; color: inherit;
  background: linear-gradient(100deg, rgba(50,32,12,.75), rgba(8,6,4,.9) 70%), radial-gradient(ellipse 50% 90% at 0 50%, rgba(255,205,120,.25), transparent 70%); border: 1px solid var(--line-strong); }
.bc-bible-door h2 { margin: 2px 0 4px; font-size: 24px; } .bc-bible-door p { margin: 0; color: var(--text-2); }
.bc-bible-door .grow { min-width: 0; flex: 1; }

/* Our Study Room */
.bs-page { display: grid; gap: 18px; }
.bs-page > * { margin: 0; }
.bs-room.has-art { min-height: clamp(420px, 44vw, 560px); border-radius: 24px; padding: clamp(16px, 3.6vw, 40px); align-content: center; box-shadow: 0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,220,140,.12); }
.bs-room-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 36px); align-items: center; }
.bs-room .ap-hero-body { display: grid; gap: 10px; }
.bs-room .ap-hero-body > * { margin: 0; }
.bs-room .row { flex-wrap: wrap; gap: 10px; }
.bs-screen { margin: 0; border-radius: 16px; padding: 12px; background: linear-gradient(180deg, #2b1f0e, #120c05); border: 1px solid rgba(232,193,90,.6); min-width: 0;
  box-shadow: 0 0 0 6px rgba(10,7,4,.95), 0 0 0 7px rgba(227,183,74,.3), 0 0 70px rgba(255,200,110,.25), 0 30px 60px rgba(0,0,0,.7); }
.bs-screen-in { min-height: 220px; max-height: 320px; overflow: hidden; border-radius: 10px; padding: clamp(14px, 2.4vw, 26px);
  background: radial-gradient(ellipse at 50% 0, rgba(255,226,160,.16), transparent 70%), linear-gradient(180deg, #0f0b07, #070504); }
.bs-screen-in p { margin: 0 0 10px; }
.bs-screen-ref { font-family: var(--display); letter-spacing: .08em; color: var(--gold-hi); font-size: clamp(18px, 2.2vw, 24px); }
.bs-screen-ref small { font-family: var(--font); font-size: 12px; color: var(--text-3); letter-spacing: .1em; }
.bs-screen-v { font-family: Georgia, "Times New Roman", serif; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.55; color: #f6ecd6; }
.bs-screen-v sup, .bs-v sup { color: var(--gold); font-family: var(--font); font-size: .62em; margin-right: 3px; }
.bs-screen figcaption { padding: 8px 4px 0; font-size: 12px; }
.bs-reader { border-radius: 22px; }
.bs-reader-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: end; margin-bottom: 14px; }
.bs-reader-head h2 { margin: 0; }
.bs-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.bs-bar label { min-width: 0; max-width: 100%; }
.bs-bar select { max-width: 100%; }
.bs-reader-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bs-text { border-radius: 16px; padding: clamp(14px, 2.4vw, 26px); background: linear-gradient(180deg, rgba(20,15,9,.9), rgba(8,6,4,.92)); border: 1px solid var(--line); max-height: 640px; overflow: auto; }
.bs-ch-h { font-family: var(--display); color: var(--gold-hi); margin: 0 0 12px; font-size: 24px; }
.bs-ch-h small { font-family: var(--font); color: var(--text-3); font-size: 12px; }
.bs-v { margin: 0; padding: 6px 10px; border-radius: 10px; font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.65; cursor: pointer; border-left: 2px solid transparent; }
.bs-v:hover { background: rgba(227,183,74,.06); }
.bs-v.has-note { border-left-color: rgba(227,183,74,.55); }
.bs-v.is-sel { background: rgba(227,183,74,.16); border-left-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(227,183,74,.35); }
.bs-verse { position: sticky; top: calc(var(--top-h) + 14px); border-radius: 16px; padding: 16px; display: grid; gap: 12px; border: 1px solid var(--line-strong); min-width: 0; }
.bs-verse > * { margin: 0; }
.bs-lbl { display: grid; gap: 6px; justify-items: start; }
.bs-lbl p, .bs-lbl blockquote { margin: 0; }
.bs-lbl blockquote { font-family: Georgia, serif; font-size: 16px; line-height: 1.55; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgba(227,183,74,.06); border-radius: 0 10px 10px 0; }
.bs-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; border: 1px solid; }
.bs-tag.t-scr { color: #f6d77e; border-color: rgba(246,215,126,.5); background: rgba(246,215,126,.08); }
.bs-tag.t-orig { color: #c9b8ff; border-color: rgba(201,184,255,.45); background: rgba(201,184,255,.07); }
.bs-tag.t-hist { color: #9fd4c0; border-color: rgba(159,212,192,.45); background: rgba(159,212,192,.07); }
.bs-tag.t-interp { color: #ffb38a; border-color: rgba(255,179,138,.45); background: rgba(255,179,138,.07); }
.bs-tag.t-refl { color: #f3efe6; border-color: rgba(243,239,230,.4); background: rgba(243,239,230,.06); }
.bs-note-form { display: grid; gap: 8px; }
.bs-note-form textarea { width: 100%; }
.bs-note-form .row { gap: 8px; flex-wrap: wrap; }
.bs-notes { margin: 0; }
.bs-notes p { margin: 4px 0 0; }
.bs-plan-refs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.bs-chip { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(227,183,74,.08); border: 1px solid var(--line); color: var(--gold-hi); cursor: pointer; }
.bs-chip:hover { border-color: var(--line-strong); }
@media (max-width: 1100px) {
  .bc-lib { grid-template-columns: 1fr; }
  .bc-rail { position: static; padding: 12px; }
  .bc-rail nav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .bc-rail nav a { white-space: nowrap; border: 1px solid var(--line); }
  .bc-rail-foot { display: flex; gap: 6px; flex-wrap: wrap; }
  .bc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .bs-room-grid, .bs-reader-body, .bc-split { grid-template-columns: 1fr; }
  .bs-verse { position: static; }
}
@media (max-width: 560px) {
  .bc-tile { padding: 14px; } .bc-tile-ic { width: 34px; height: 34px; font-size: 17px; }
  .bc-bible-door { flex-direction: column; align-items: flex-start; }
  .bc-hero.has-art { min-height: 0; padding: 150px 12px 12px; }
  .bs-room.has-art { padding: 14px 12px; }
  .bs-screen-in { min-height: 160px; }
  .bs-bar select { flex: 1 1 140px; }
}
.bs-note-form textarea { font: inherit; }
.bc-hero-body { max-width: 540px; }
[data-bs-src] { margin-top: 10px; }
@media (max-width: 860px) { .bs-text { max-height: 62vh; } }
/* ── Focus & Flow Chamber (/academy/focus) — fc-* ─────────────────── */
.fc-page { display: grid; gap: 18px; min-width: 0; max-width: 1240px; margin: 0 auto; }
.fc-page [hidden] { display: none !important; }
.fc-chamber { --sh: clamp(250px, 36vw, 470px); position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(227,183,74,.32); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(227,183,74,.08), inset 0 1px 0 rgba(255,220,140,.12); background: #0b0a08; isolation: isolate; }
.fc-scene { position: absolute; left: 0; top: 0; width: 100%; height: var(--sh); display: block; z-index: -1; }
.fc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,6,5,0) calc(var(--sh) - 150px), rgba(7,6,5,.85) calc(var(--sh) - 30px), #070605 var(--sh)); z-index: -1; pointer-events: none; }
.fc-hero { position: relative; margin-top: calc(var(--sh) - 64px); padding: 0 clamp(18px, 3vw, 34px) clamp(18px, 3vw, 30px); display: grid; gap: 8px; max-width: 760px; }
.fc-hero .display { margin: 0; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.04; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.fc-hero .lead { margin: 0; color: var(--text); font-size: clamp(15px, 1.5vw, 18px); }
.fc-honest { margin: 0; color: var(--gold-hi); font-size: 13.5px; padding: 8px 12px; border-radius: 12px; background: rgba(12,10,6,.72); border: 1px solid rgba(227,183,74,.3); width: fit-content; max-width: 100%; }
.fc-foot { justify-self: center; text-align: center; }
.fc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
.fc-panel { min-width: 0; padding: clamp(16px, 2vw, 24px); border-radius: 20px; background: linear-gradient(180deg, rgba(24,21,15,.92), rgba(10,9,7,.94)); border: 1px solid rgba(227,183,74,.24); box-shadow: 0 24px 60px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,220,140,.08), 0 0 32px rgba(227,183,74,.05); display: grid; gap: 14px; align-content: start; }
.fc-h2 { margin: 0; font-family: var(--display); font-size: 18px; letter-spacing: .06em; color: var(--gold-hi); }
.fc-field { display: grid; gap: 6px; min-width: 0; }
.fc-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.fc-label small { text-transform: none; letter-spacing: 0; color: var(--text-3); font-weight: 400; }
.fc-hint, .fc-quiet { color: var(--text-3); font-size: 12.5px; margin: 0; }
.fc-quiet a, .ev-quiet a, .ev-empty a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.fc-input { width: 100%; min-width: 0; font: inherit; color: var(--text); background: rgba(5,5,5,.7); border: 1px solid rgba(227,183,74,.28); border-radius: 12px; padding: 10px 12px; }
.fc-input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(227,183,74,.18); }
textarea.fc-input { resize: vertical; min-height: 56px; }
select.fc-input { height: 42px; padding: 0 10px; }
.fc-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fc-mode { text-align: left; display: grid; gap: 3px; padding: 12px; border-radius: 14px; background: rgba(8,8,8,.6); border: 1px solid #2c271d; min-width: 0; }
.fc-mode b { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.fc-mode small { font-size: 12px; color: var(--text-3); line-height: 1.35; }
.fc-mode[aria-checked="true"] { border-color: var(--gold); background: linear-gradient(180deg, rgba(60,44,14,.55), rgba(16,12,5,.8)); box-shadow: inset 0 1px 0 rgba(255,220,140,.15), 0 0 22px rgba(227,183,74,.14); }
.fc-mode[aria-checked="true"] b { color: var(--gold-hi); }
.fc-dest-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fc-dest-row select { flex: 1 1 220px; }
.fc-lengths { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fc-len { height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(8,8,8,.6); border: 1px solid #2f2a20; font-weight: 600; font-size: 13px; }
.fc-len[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-hi); background: rgba(60,44,14,.5); }
.fc-len:disabled, .fc-custom input:disabled { opacity: .5; cursor: not-allowed; }
.fc-custom { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12.5px; }
.fc-custom input { width: 96px; height: 38px; border-radius: 999px; padding: 0 12px; }
.fc-dial { --p: 0; justify-self: center; width: min(230px, 64vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(227,183,74,.12) 0); padding: 6px; box-shadow: 0 0 40px rgba(227,183,74,.12); }
.fc-dial-in { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #1d1810, #070605 70%); display: grid; place-content: center; text-align: center; border: 1px solid rgba(227,183,74,.25); }
.fc-time { font-family: var(--display); font-size: clamp(40px, 9vw, 54px); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.fc-state { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.fc-ctl { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fc-sound { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(227,183,74,.14); }
.fc-sound-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fc-sel select { height: 34px; border-radius: 10px; }
.fc-vol { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); flex: 1 1 160px; min-width: 0; }
.fc-vol input { flex: 1; min-width: 0; accent-color: var(--gold); }
.fc-switch { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-2); cursor: pointer; }
.fc-switch input { accent-color: var(--gold); width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.fc-notes-h { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; }
.fc-past { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fc-past-row { padding: 12px; border-radius: 14px; background: rgba(6,6,6,.6); border: 1px solid #29241b; display: grid; gap: 6px; min-width: 0; }
.fc-past-h { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; font-size: 13px; }
.fc-past-h b { color: var(--gold-hi); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.fc-past-h span, .fc-past-obj { color: var(--text-2); font-size: 12.5px; margin: 0; overflow-wrap: anywhere; }
.fc-past-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; font-size: 13px; }
.fc-past-dl dt { color: var(--text-3); }
.fc-past-dl dd { margin: 0; overflow-wrap: anywhere; }
.fc-past-link { font-size: 12.5px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.fc-reflect form { display: grid; gap: 12px; }
.fc-reflect form .btn { justify-self: start; }
.fc-exit { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 60; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(8,7,5,.92); color: var(--gold-hi); border: 1px solid var(--gold); font-weight: 600; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
body.fc-minimal .top, body.fc-minimal .rail, body.fc-minimal .m-tabs, body.fc-minimal .np, body.fc-minimal .m-menu { display: none !important; }
body.fc-minimal .shell { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.fc-minimal main { padding-top: 64px; padding-bottom: 40px; }
.fc-door { display: grid; gap: 4px; padding: 16px; border-radius: 14px; margin-bottom: 12px; }
.fc-door b { font-family: var(--display); color: var(--gold-hi); font-size: 16px; }
.fc-door p { margin: 0; color: var(--text-2); font-size: 13px; }
/* Slow ambient motion — off entirely for reduced motion. */
.fc-mote { opacity: 0; animation: fc-mote 14s linear infinite; animation-delay: var(--d, 0s); }
@keyframes fc-mote { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .55; } 80% { opacity: .3; } 100% { opacity: 0; transform: translate(var(--x, 6px), -70px); } }
.fc-shaft { animation: fc-breathe 11s ease-in-out infinite; }
@keyframes fc-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.fc-mist { animation: fc-drift 40s ease-in-out infinite alternate; }
@keyframes fc-drift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
.fc-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: fc-flicker 3.2s ease-in-out infinite; }
@keyframes fc-flicker { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(.94, 1.06); } 70% { transform: scale(1.03, .97); } }
.fc-sun { animation: fc-breathe 18s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fc-mote, .fc-shaft, .fc-mist, .fc-flame, .fc-sun { animation: none; } .fc-mote { opacity: .35; } }
@media (max-width: 900px) { .fc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .fc-chamber { --sh: 300px; border-radius: 18px; }
  .fc-modes { grid-template-columns: minmax(0, 1fr); }
  .fc-mode { grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: 8px; }
  .fc-honest { font-size: 12.5px; }
}

/* ── Passport Proof (/academy/evidence) — ev-* ───────────────────── */
.ev-page { display: grid; gap: 18px; min-width: 0; max-width: 1180px; margin: 0 auto; }
.ev-hero { position: relative; overflow: hidden; padding: clamp(22px, 4vw, 42px); border-radius: 22px; border: 1px solid rgba(227,183,74,.3); background: radial-gradient(120% 140% at 85% -10%, rgba(227,183,74,.18), transparent 55%), linear-gradient(180deg, #15120c, #070605); box-shadow: 0 30px 70px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,220,140,.12); display: grid; gap: 10px; }
.ev-hero .display { margin: 0; font-size: clamp(32px, 4.4vw, 52px); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ev-hero .lead { margin: 0; color: var(--text); max-width: 640px; }
.ev-rule { margin: 4px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--gold); background: rgba(40,30,10,.45); color: var(--gold-hi); font-weight: 600; font-size: 14px; max-width: 760px; }
.ev-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ev-legend div { padding: 12px 14px; border-radius: 14px; background: rgba(12,11,8,.85); border: 1px solid #2c271d; display: grid; gap: 2px; min-width: 0; }
.ev-legend b { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.ev-legend span { font-size: 12.5px; color: var(--text-3); }
.ev-legend .on { border-color: var(--gold); box-shadow: 0 0 22px rgba(227,183,74,.12); }
.ev-legend .on b { color: var(--gold-hi); }
.ev-source, .ev-quiet { margin: 0; color: var(--text-3); font-size: 12.5px; }
.ev-school { padding: clamp(16px, 2.4vw, 24px); border-radius: 20px; border: 1px solid rgba(227,183,74,.22); background: linear-gradient(180deg, rgba(22,19,13,.94), rgba(9,8,6,.96)); box-shadow: 0 24px 60px -32px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,220,140,.07); display: grid; gap: 14px; min-width: 0; }
.ev-school-h { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: flex-end; }
.ev-school-h h2 { margin: 2px 0 0; font-family: var(--display); font-size: clamp(19px, 2.2vw, 24px); color: var(--text); }
.ev-count { display: flex; align-items: baseline; gap: 8px; }
.ev-count b { font-family: var(--display); font-size: 30px; color: var(--gold-hi); }
.ev-count span { font-size: 12px; color: var(--text-3); }
.ev-table { display: grid; gap: 6px; min-width: 0; }
.ev-tr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .6fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(6,6,6,.55); border: 1px solid #241f17; }
.ev-th { background: none; border: none; padding: 0 14px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ev-th small { text-transform: none; letter-spacing: 0; }
.ev-task { display: grid; gap: 2px; min-width: 0; }
.ev-task b { overflow-wrap: anywhere; }
.ev-task small { color: var(--text-3); font-size: 12px; }
.ev-cell { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; }
.ev-assisted { background: rgba(255,255,255,.025); }
.ev-indep.on { border-color: rgba(227,183,74,.55); background: linear-gradient(180deg, rgba(60,44,14,.4), rgba(20,15,6,.5)); }
.ev-score { display: flex; align-items: baseline; gap: 6px; }
.ev-score b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ev-indep.on .ev-score b { color: var(--gold-hi); }
.ev-score span, .ev-meta { font-size: 11.5px; color: var(--text-3); }
.ev-none { font-size: 12px; color: var(--text-3); font-style: italic; }
.ev-date { font-size: 12.5px; color: var(--text-2); }
.ev-empty { margin: 0; color: var(--text-2); font-size: 13.5px; }
.ev-panel { padding: 20px; border-radius: 18px; border: 1px solid rgba(227,183,74,.24); background: rgba(12,11,8,.9); display: grid; gap: 10px; }
.ev-guest { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: center; padding: clamp(18px, 3vw, 28px); border-radius: 20px; border: 1px solid rgba(227,183,74,.28); background: linear-gradient(135deg, rgba(30,24,12,.92), rgba(8,7,5,.96)); box-shadow: inset 0 1px 0 rgba(255,220,140,.1), 0 24px 60px -30px rgba(0,0,0,.85); }
.ev-guest p { margin: 8px 0 0; color: var(--text-2); max-width: 680px; }
.ev-seal svg { width: 120px; height: 120px; display: block; filter: drop-shadow(0 0 18px rgba(227,183,74,.25)); }
@media (max-width: 760px) {
  .ev-legend { grid-template-columns: minmax(0, 1fr); }
  .ev-th { display: none; }
  .ev-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ev-task, .ev-date { grid-column: 1 / -1; }
  .ev-cell::before, .ev-date::before { content: attr(data-h); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
  .ev-date::before { margin-right: 8px; }
  .ev-guest { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .ev-seal svg { width: 84px; height: 84px; }
}

/* ── A+ Laboratories (aplus-labs.js) · prefix lab- ── */
.lab-page { overflow-x: clip; }
.lab-page [hidden] { display: none !important; }
.lab-crumbs { margin: 0 0 4px; }
.lab-src { display: inline-flex; gap: 8px; align-items: center; margin: 12px 0 0; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(227,183,74,.35); background: rgba(0,0,0,.35); font-size: 12.5px; color: var(--gold-hi); max-width: 100%; }
.lab-src.is-sim { border-color: rgba(157,183,255,.55); color: #cfdcff; background: rgba(40,52,90,.35); font-weight: 700; letter-spacing: .02em; }
.lab-dot { width: 8px; height: 8px; border-radius: 50%; background: #e3b74a; box-shadow: 0 0 10px #e3b74a; flex: none; }
.lab-src.is-sim .lab-dot { background: #9db7ff; box-shadow: 0 0 10px #9db7ff; }
.lab-stage, .lab-q, .lab-calc, .lab-drills, .lab-dc-card { border-radius: 20px; padding: clamp(14px, 2vw, 22px); background: linear-gradient(180deg, rgba(20,17,12,.9), rgba(8,8,9,.92)); border: 1px solid rgba(227,183,74,.26); box-shadow: 0 30px 70px -45px rgba(227,183,74,.55), inset 0 1px 0 rgba(255,236,180,.08); margin: 0 0 18px; min-width: 0; }
.lab-stage-h, .lab-dc-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lab-simtag { font: 700 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; padding: 6px 9px; border-radius: 999px; color: #cfdcff; border: 1px dashed rgba(157,183,255,.6); background: rgba(157,183,255,.07); }
.lab-canvas { border-radius: 14px; overflow: hidden; border: 1px solid rgba(227,183,74,.24); box-shadow: inset 0 0 40px rgba(0,0,0,.8), 0 20px 50px -30px rgba(227,183,74,.35); }
.lab-canvas canvas { display: block; width: 100%; height: 220px; touch-action: none; }
.lab-canvas-tall canvas { height: clamp(260px, 30vw, 400px); }
/* doors row on Reading the glass */
.lab-row { margin: 0 0 26px; }
.lab-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lab-door { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px; border-radius: 20px; color: inherit; text-decoration: none; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, rgba(227,183,74,.16), transparent 55%), linear-gradient(180deg, rgba(22,19,13,.92), rgba(8,8,9,.95)); border: 1px solid rgba(227,183,74,.28); box-shadow: 0 24px 60px -40px rgba(227,183,74,.7), inset 0 1px 0 rgba(255,236,180,.1); transition: transform .2s ease, box-shadow .2s ease; }
.lab-door:hover, .lab-door:focus-visible { transform: translateY(-3px); box-shadow: 0 34px 70px -34px rgba(227,183,74,.85), inset 0 1px 0 rgba(255,236,180,.14); }
.lab-door-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #e3b74a; background: linear-gradient(180deg, #19150d, #0a0907); border: 1px solid rgba(227,183,74,.35); box-shadow: inset 0 0 14px rgba(0,0,0,.7); }
.lab-door-ic svg { width: 30px; height: 30px; }
.lab-door-tag { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-top: 4px; }
.lab-door b { font-family: var(--display); font-size: 21px; line-height: 1.1; background: linear-gradient(180deg, #fff2cf 0%, #e3b74a 55%, #a87b22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lab-door > span:not(.lab-door-ic):not(.lab-door-tag):not(.lab-go) { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.lab-go { margin-top: 4px; color: var(--gold-hi); font-weight: 700; font-size: 13px; }
/* order flow */
.lab-scen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.lab-scen-b { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; text-align: left; padding: 12px; border-radius: 16px; cursor: pointer; color: var(--text); background: linear-gradient(180deg, rgba(22,19,13,.9), rgba(10,9,8,.92)); border: 1px solid rgba(227,183,74,.22); font: inherit; min-width: 0; }
.lab-scen-b span { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--display); color: #e3b74a; border: 1px solid rgba(227,183,74,.45); }
.lab-scen-b b { font-size: 14px; } .lab-scen-b small { color: var(--text-3); font-size: 12px; line-height: 1.35; }
.lab-scen-b[aria-pressed="true"] { border-color: rgba(246,215,126,.8); background: radial-gradient(120% 120% at 0 0, rgba(227,183,74,.22), transparent 60%), linear-gradient(180deg, rgba(30,24,14,.95), rgba(12,10,8,.95)); box-shadow: 0 16px 40px -24px rgba(227,183,74,.9); }
.lab-scen-b[aria-pressed="true"] span { background: var(--gold-grad); color: #1a1205; border-color: transparent; }
.lab-scen-b:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lab-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.lab-lg { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(227,183,74,.14); border-top: 3px solid; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.lab-lg b { display: block; font: 700 10.5px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .16em; margin-bottom: 3px; }
.lab-lg-executed { border-top-color: #f6d77e; } .lab-lg-executed b { color: #f6d77e; }
.lab-lg-depth { border-top-color: #8f8a7d; border-top-style: dashed; } .lab-lg-depth b { color: #c9c2b2; }
.lab-lg-delta { border-top-color: #9db7ff; } .lab-lg-delta b { color: #9db7ff; }
.lab-lg-inferred { border-top-color: #c38bff; border-top-style: dotted; } .lab-lg-inferred b { color: #d7b2ff; }
.lab-of-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.lab-ladder-wrap { border-radius: 14px; border: 1px solid rgba(227,183,74,.22); background: #08070a; overflow: hidden; }
.lab-lr { display: grid; grid-template-columns: 1fr 64px 1fr 1.1fr 46px; align-items: center; min-height: 25px; font: 11.5px/1 ui-monospace, Menlo, monospace; border-bottom: 1px solid rgba(255,255,255,.035); }
.lab-lh { min-height: 36px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); background: rgba(227,183,74,.05); text-align: center; line-height: 1.2; }
.lab-lh small { text-transform: none; letter-spacing: 0; }
.lab-lr > span { position: relative; padding: 0 6px; height: 100%; display: flex; align-items: center; min-width: 0; }
.lab-lh > span { justify-content: center; flex-direction: column; }
.lab-dbid, .lab-dask { color: #c9c2b2; }
.lab-dbid { justify-content: flex-end; } .lab-dbid i, .lab-dask i { position: absolute; top: 4px; bottom: 4px; border: 1px dashed; border-radius: 3px; }
.lab-dbid i { right: 4px; background: rgba(63,197,138,.10); border-color: rgba(63,197,138,.45); } .lab-dask i { left: 4px; background: rgba(224,96,90,.10); border-color: rgba(224,96,90,.45); }
.lab-dbid em, .lab-dask em { position: relative; font-style: normal; }
.lab-px { justify-content: center; color: var(--text-2); background: rgba(255,255,255,.02); }
.lab-lr.is-bid .lab-px { background: rgba(63,197,138,.22); color: #c9ffe4; font-weight: 700; } .lab-lr.is-ask .lab-px { background: rgba(224,96,90,.22); color: #ffd6d3; font-weight: 700; }
.lab-fp { gap: 4px; justify-content: center; }
.lab-fp b { flex: 1; text-align: center; padding: 3px 2px; border-radius: 4px; font-weight: 700; color: #f6d77e; }
.lab-fp b.b { background: rgba(224,96,90, calc(var(--a) * .55)); } .lab-fp b.a { background: rgba(63,197,138, calc(var(--a) * .55)); }
.lab-dl { justify-content: flex-end; color: var(--text-3); } .lab-dl.pos { color: #9db7ff; } .lab-dl.neg { color: #ff9e98; }
.lab-of-side { display: grid; gap: 10px; min-width: 0; }
.lab-tape-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lab-tape { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; max-height: 260px; overflow: hidden; }
.lab-tape li { display: grid; grid-template-columns: 64px 46px 1fr; gap: 8px; padding: 5px 9px; border-radius: 8px; font: 11.5px/1.2 ui-monospace, Menlo, monospace; background: rgba(255,255,255,.02); border-left: 3px solid; animation: labIn .25s ease; }
.lab-tape li.buy { border-left-color: #3fc58a; } .lab-tape li.sell { border-left-color: #e0605a; }
.lab-tape li b { color: #f6d77e; text-align: right; } .lab-tape li em { font-style: normal; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes labIn { from { opacity: 0; transform: translateY(-4px); } }
/* The tape is re-rendered every tick (innerHTML), so animating every row made the whole tape blink to opacity 0 each print. Only the newest print fades in. */
.lab-tape li:not(:first-child) { animation: none; }
.lab-controls { gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.lab-q h2 { margin: 6px 0 12px; }
.lab-opts { display: grid; gap: 8px; }
.lab-opt { position: relative; cursor: pointer; }
.lab-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lab-opt span { display: block; padding: 11px 14px 11px 40px; border-radius: 14px; border: 1px solid rgba(227,183,74,.2); background: rgba(255,255,255,.025); color: var(--text-2); font-size: 14px; line-height: 1.45; position: relative; }
.lab-opt span::before { content: ""; position: absolute; left: 14px; top: 14px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(227,183,74,.6); }
.lab-opt input:checked + span { border-color: rgba(246,215,126,.75); color: var(--text); background: rgba(227,183,74,.08); }
.lab-opt input:checked + span::before { background: var(--gold-grad); border-color: transparent; box-shadow: inset 0 0 0 3px #1a1205; }
.lab-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.lab-opt.is-right span { border-color: #3fc58a; background: rgba(63,197,138,.1); color: var(--text); }
.lab-opt.is-wrong span { border-color: #e0605a; background: rgba(224,96,90,.1); }
.lab-opts .btn { justify-self: start; margin-top: 4px; }
.lab-fb { margin-top: 16px; padding: 16px; border-radius: 16px; border: 1px solid rgba(227,183,74,.22); background: rgba(0,0,0,.3); display: grid; gap: 10px; }
.lab-fb.ok { border-color: rgba(63,197,138,.45); } .lab-fb.bad { border-color: rgba(224,96,90,.45); }
.lab-fb h3 { margin: 0; font-size: 17px; } .lab-fb h3 em { font-style: normal; color: var(--gold-hi); }
.lab-fb p { margin: 0; }
.lab-fb .btn { justify-self: start; }
.lab-ev { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lab-ev li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: start; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.lab-tag { justify-self: start; font: 700 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; padding: 5px 7px; border-radius: 6px; border: 1px solid; }
.lab-tag-executed { color: #f6d77e; border-color: rgba(246,215,126,.6); } .lab-tag-depth { color: #c9c2b2; border-style: dashed; border-color: #8f8a7d; }
.lab-tag-delta { color: #9db7ff; border-color: rgba(157,183,255,.6); } .lab-tag-inferred { color: #d7b2ff; border-style: dotted; border-color: #c38bff; }
/* risk */
.lab-risk-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.lab-slider { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.lab-slider b { color: #ff9e98; font-family: ui-monospace, Menlo, monospace; margin-left: 6px; }
.lab-slider input { width: 100%; accent-color: #e3b74a; height: 28px; }
.lab-verdict { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; border: 1px solid rgba(227,183,74,.2); background: rgba(255,255,255,.02); }
.lab-verdict.v-beyond { border-color: rgba(63,197,138,.5); color: #c9ffe4; } .lab-verdict.v-inside { border-color: rgba(227,183,74,.55); color: var(--gold-hi); } .lab-verdict.v-wrong { border-color: #e0605a; color: #ffd6d3; }
.lab-calc { display: grid; gap: 12px; }
.lab-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lab-fields label { display: grid; gap: 4px; font-size: 12px; color: var(--text-3); min-width: 0; }
.lab-fields input, .lab-fields select { width: 100%; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(227,183,74,.28); background: rgba(0,0,0,.45); color: var(--text); font: 600 14px ui-monospace, Menlo, monospace; }
.lab-fields input:focus, .lab-fields select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227,183,74,.2); }
.lab-out { display: grid; gap: 10px; }
.lab-big { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-radius: 16px; background: radial-gradient(120% 140% at 0 0, rgba(227,183,74,.2), transparent 60%), rgba(0,0,0,.35); border: 1px solid rgba(227,183,74,.4); }
.lab-big b { font-family: var(--display); font-size: 44px; line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lab-big span { color: var(--text-2); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.lab-dlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lab-drill { padding: 14px; border-radius: 16px; border: 1px solid rgba(227,183,74,.14); background: rgba(255,255,255,.02); display: grid; gap: 10px; }
.lab-drill p { margin: 0; }
.lab-chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; font: 600 13px var(--font); cursor: pointer; border: 1px solid rgba(227,183,74,.3); background: rgba(255,255,255,.03); color: var(--text); }
.lab-chip:hover:not(:disabled) { border-color: var(--gold); }
.lab-chip.is-right { background: rgba(63,197,138,.18); border-color: #3fc58a; } .lab-chip.is-wrong { background: rgba(224,96,90,.18); border-color: #e0605a; }
.lab-chip:disabled { cursor: default; }
.lab-why { font-size: 13.5px; color: var(--text-2); padding: 10px 12px; border-radius: 12px; border-left: 3px solid; background: rgba(0,0,0,.25); }
.lab-why.ok { border-left-color: #3fc58a; } .lab-why.bad { border-left-color: #e0605a; }
/* decision challenge */
.lab-dc-dots { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.lab-dc-dots span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 ui-monospace, Menlo, monospace; border: 1px solid rgba(227,183,74,.25); color: var(--text-3); }
.lab-dc-dots .now { border-color: var(--gold-hi); color: var(--gold-hi); box-shadow: 0 0 14px rgba(227,183,74,.5); }
.lab-dc-dots .ok { background: rgba(63,197,138,.2); border-color: #3fc58a; color: #c9ffe4; } .lab-dc-dots .bad { background: rgba(224,96,90,.18); border-color: #e0605a; color: #ffd6d3; }
.lab-dc-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lab-dc-facts li { grid-template-columns: 96px 1fr; }
.lab-dc-facts small { display: block; margin-top: 2px; font-size: 11.5px; }
.lab-dc-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.lab-act { min-height: 52px; border-radius: 14px; font: 700 15px var(--font); letter-spacing: .04em; cursor: pointer; color: var(--text); border: 1px solid rgba(227,183,74,.32); background: linear-gradient(180deg, rgba(30,26,18,.9), rgba(12,11,9,.9)); box-shadow: inset 0 1px 0 rgba(255,236,180,.08); }
.lab-act:hover:not(:disabled) { border-color: var(--gold-hi); box-shadow: 0 10px 30px -16px rgba(227,183,74,.9); }
.lab-act.is-right { background: var(--gold-grad); color: #1a1205; border-color: transparent; } .lab-act.is-wrong { border-color: #e0605a; background: rgba(224,96,90,.18); }
.lab-act:disabled { cursor: default; }
.br-checklist li.is-first { box-shadow: 0 0 0 1px #e0605a, 0 10px 30px -18px rgba(224,96,90,.9); }
.lab-recap { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lab-recap li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; padding: 10px; border-radius: 12px; border: 1px solid rgba(227,183,74,.14); background: rgba(255,255,255,.02); }
.lab-recap li span { grid-row: span 2; font: 700 12px ui-monospace, Menlo, monospace; color: var(--text-3); }
.lab-recap li.ok { border-color: rgba(63,197,138,.4); } .lab-recap li.bad { border-color: rgba(224,96,90,.4); }
.lab-recap small { color: var(--text-3); font-size: 11.5px; }
@media (max-width: 1100px) { .lab-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab-scen { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lab-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab-of-grid, .lab-risk-grid, .lab-dc-body { grid-template-columns: minmax(0, 1fr); } .lab-recap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .lab-doors, .lab-legend { grid-template-columns: minmax(0, 1fr); }
  .lab-scen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-scen-b small { display: none; } .lab-scen-b span { grid-row: auto; }
  .lab-lr { grid-template-columns: 1fr 54px 1fr 1.25fr 38px; font-size: 10.5px; }
  .lab-lr > span { padding: 0 3px; }
  .lab-ev li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lab-dc-acts { grid-template-columns: minmax(0, 1fr); }
  .lab-dc-facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lab-recap { grid-template-columns: minmax(0, 1fr); }
  .lab-tape li { grid-template-columns: 56px 40px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lab-tape li { animation: none; } .lab-door, .lab-door:hover { transition: none; transform: none; } }

/* ── Founder concept art (Grok canon) as real environments ───────── */
.art-credit{position:absolute;right:12px;bottom:10px;z-index:2;font-size:11px;letter-spacing:.06em;color:rgba(240,214,144,.92);background:rgba(0,0,0,.6);padding:3px 8px;border-radius:999px;pointer-events:none}
.ac-hero-photo{isolation:isolate}
.ac-photo{position:absolute;inset:0;z-index:-1;background:url(/academy-art/campus.jpg?v=2) center 60%/cover no-repeat;opacity:.5;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,#000 55%);mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,#000 55%)}
.ac-hero-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,7,6,.92) 0%,rgba(8,7,6,.55) 52%,rgba(8,7,6,.15) 100%),linear-gradient(0deg,rgba(8,7,6,.85),transparent 60%)}
@media (max-width:700px){.ac-photo{opacity:.4;background-position:70% 30%}}
.vl-tower{display:flex;justify-content:flex-end;background:#05060c}
.vl-tower img{height:100%;width:auto;max-width:72%;object-fit:cover;object-position:center top;display:block;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%)}
.vl-hero:has(.vl-tower){min-height:clamp(380px,42vw,560px)}
.vl-title{font-size:clamp(38px,6.4vw,74px);line-height:1;background:linear-gradient(180deg,#fff3cf 0%,#f0c560 50%,#a87b22 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:700px){.vl-tower img{max-width:100%;opacity:.55}}
.pg-atlas-hall{position:relative;isolation:isolate;overflow:hidden}
.pg-atlas-hall::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,5,4,.78),rgba(6,5,4,.93) 55%),url(/academy-art/tower-hall.jpg) center top/cover no-repeat}
.campus-card .campus-art{overflow:hidden;border-radius:inherit}
.campus-card.art-sg .campus-art{background:linear-gradient(0deg,rgba(5,5,4,.85),rgba(5,5,4,.05) 60%),url(/academy-art/school-aplus.jpg) center/cover no-repeat}
.campus-card.art-vl .campus-art{background:linear-gradient(0deg,rgba(5,5,4,.85),rgba(5,5,4,.05) 60%),url(/academy-art/school-polyglot.jpg) center 40%/cover no-repeat}
.campus-card.art-lib .campus-art{background:linear-gradient(0deg,rgba(5,5,4,.85),rgba(5,5,4,.05) 60%),url(/academy-art/school-books.jpg) center/cover no-repeat}
.campus-card.art-create .campus-art{background:linear-gradient(0deg,rgba(5,5,4,.8),rgba(5,5,4,.05) 60%),url(/academy-art/school-create.jpg) center 30%/cover no-repeat}
.campus-card .campus-art{transition:transform .4s ease}
@media (prefers-reduced-motion:no-preference){.campus-card:hover .campus-art{transform:scale(1.02)}}
@media (min-width:701px){.campus:has(.art-create){grid-template-columns:repeat(2,minmax(0,1fr))}}
.campus-card.art-vl .campus-art{background-position:center 18%}

/* ── The Living Learning Engine (le-) ─────────────────────────── */
.le-page{display:grid;gap:18px}
.le-hero{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(227,183,74,.35);min-height:260px;display:grid;align-items:end;isolation:isolate}
.le-hero-art{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,5,4,.95) 0%,rgba(6,5,4,.7) 50%,rgba(6,5,4,.35) 100%),url(/academy-art/tower-hall.jpg) center 30%/cover no-repeat}
.le-hero-body{padding:28px clamp(18px,4vw,40px);display:grid;gap:6px;max-width:720px}
.le-hero .display{margin:0;font-size:clamp(34px,5.6vw,64px);line-height:1;background:linear-gradient(180deg,#fff3cf,#f0c560 50%,#a87b22);-webkit-background-clip:text;background-clip:text;color:transparent}
.le-count{color:#d8cfbb;margin:4px 0 0}.le-count b{color:#f6d77e}
.le-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media (max-width:1000px){.le-grid{grid-template-columns:1fr}}
.le-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.le-tile{display:grid;gap:6px;align-content:start;padding:14px 16px;border-radius:16px;border:1px solid rgba(227,183,74,.25);color:inherit;text-decoration:none;position:relative}
.le-tile:hover,.le-tile:focus-visible{border-color:#e3b74a;outline:none;box-shadow:0 0 0 1px rgba(227,183,74,.4),0 18px 40px -24px rgba(227,183,74,.6)}
.le-tile.is-dev{opacity:.72;border-style:dashed}
.le-tile-h{display:flex;justify-content:space-between;gap:8px;align-items:center}.le-tile-h b{color:#f3e2b0;font-size:15px}
.le-tile p{margin:0;color:#d4cab4;font-size:13.5px}.le-tile small{color:#9b927e;font-size:12px}
.le-go{font-size:12px;color:#e3b74a;font-weight:600}
.le-pill{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 8px;border:1px solid currentColor;white-space:nowrap}
.le-live{color:#7fd4a4}.le-part{color:#e5be6a}.le-dev{color:#9aa6b8}
.le-schools{display:grid;gap:10px}
.le-school{display:grid;gap:4px;padding:14px 16px;border-radius:16px;border:1px solid rgba(227,183,74,.3);color:inherit;text-decoration:none}
.le-school b{color:#f6d77e}.le-school small{color:#a99f88}
.le-uses{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.le-uses i{font-style:normal;font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(227,183,74,.1);color:#e9d79f}
.le-law{margin-top:12px;padding:14px 16px;border-radius:16px;border:1px solid rgba(227,183,74,.22)}.le-law h3{margin:0 0 6px;color:#f0d690;font-size:15px}.le-law ul{margin:0;padding-left:18px;color:#d4cab4;font-size:13.5px;display:grid;gap:4px}
.le-journey{padding:16px;border-radius:18px;border:1px solid rgba(227,183,74,.3)}
.le-steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.le-step{display:grid;justify-items:center;gap:2px;min-width:104px;padding:12px 10px;border-radius:14px;background:#120d05;border:1px solid rgba(227,183,74,.35);color:inherit;text-decoration:none;text-align:center}
.le-step b{color:#f6d77e}.le-step small{color:#a99f88;font-size:11.5px}
.le-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid #e3b74a;color:#e3b74a;font-size:12px}
.le-arrow{color:#e3b74a}
@media (max-width:700px){.le-arrow{display:none}.le-step{flex:1 1 40%}}

/* ── Wave Interpretation (wv-) ─────────────────────────────────── */
.wv-page{display:grid;gap:18px}
.wv-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0;border-radius:22px;overflow:hidden;border:1px solid rgba(227,183,74,.35)}
@media (max-width:900px){.wv-hero{grid-template-columns:1fr}}
.wv-stage{position:relative;background:#000}.wv-svg{display:block;width:100%;height:auto}
.wv-caption{position:absolute;left:12px;right:12px;bottom:12px;text-align:center;font-size:18px;color:#fff;text-shadow:0 2px 6px #000;background:rgba(0,0,0,.35);border-radius:12px;padding:6px 10px}
.wv-hero-copy{padding:24px clamp(16px,3vw,32px);display:grid;gap:10px;align-content:center}
.wv-hero-copy h1{margin:0;color:#f6d77e;font-size:clamp(26px,3.4vw,40px)}
.wv-cap{display:flex;gap:6px;align-items:center;color:#d8cfbb;font-size:14px}
.wv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.wv-card{border-radius:18px;padding:16px;border:1px solid rgba(227,183,74,.25);display:grid;gap:10px;align-content:start}
.wv-card h2{margin:0;font-size:19px;color:#f3e2b0}.wv-card h3{margin:0;color:#f0d690}
.wv-card textarea{width:100%;box-sizing:border-box;background:#0d0a06;color:#f6efdc;border:1px solid rgba(227,183,74,.4);border-radius:12px;padding:10px;font:inherit;font-size:16px}
.wv-model{margin:0;padding-left:20px;display:grid;gap:6px;color:#f6efdc}.wv-model small{display:block;color:#a99f88}.wv-model[hidden]{display:none}
.wv-bank{display:flex;flex-wrap:wrap;gap:8px}
.wv-chip,.wv-opt{background:#120d05;border:1px solid rgba(227,183,74,.4);color:#f3e2b0;border-radius:12px;padding:9px 12px;font:inherit;font-size:14px;cursor:pointer;text-align:left}
.wv-chip:disabled{opacity:.35;cursor:default}
.wv-order{margin:0;padding-left:22px;display:grid;gap:4px;color:#f6efdc;min-height:20px}
.wv-result b,.wv-why b{color:#f6d77e}
.wv-opts{display:grid;gap:8px}.wv-opt small{display:block;color:#a99f88}.wv-opt.is-picked{border-color:#e3b74a;box-shadow:0 0 0 1px #e3b74a}
.wv-rec{margin:6px 0 0;padding-left:18px;color:#cbbf9f;font-size:13px}
/* scene beats */
/* Six photo frames of one street; each beat class fades in the next frame on top. */
.wv-frame{opacity:0;transition:opacity 1.4s ease}
.wv-f0{opacity:1}
.wv-stage.s-open .wv-f1,.wv-stage.s-clouds .wv-f2,.wv-stage.s-rain .wv-f3,.wv-stage.s-umb .wv-f4,.wv-stage.s-sun .wv-f5{opacity:1}
.wv-rain{opacity:0;transition:opacity 1s ease;pointer-events:none}
.wv-stage.s-rain .wv-rain{opacity:.7}.wv-stage.s-sun .wv-rain{opacity:0}
.wv-frames{transform-box:view-box;transform-origin:50% 55%}
@media (prefers-reduced-motion:no-preference){.wv-stage.s-open .wv-frames{animation:wv-drift 14s ease-out forwards}@keyframes wv-drift{from{transform:scale(1)}to{transform:scale(1.06)}}.wv-stage.s-rain .wv-rainl{animation:wv-fall .45s linear infinite}@keyframes wv-fall{from{transform:translateY(0)}to{transform:translateY(120px)}}}
.pg-status.talk{color:#7fd4a4;border-color:rgba(127,212,164,.5)}

/* ── Living Parable (pb-) ─────────────────────────────────────── */
.pb-page{display:grid;gap:18px}
.pb-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border-radius:22px;overflow:hidden;border:1px solid rgba(227,183,74,.35)}
@media (max-width:900px){.pb-hero{grid-template-columns:1fr}}
.pb-scene{position:relative}.pb-scene svg{display:block;width:100%;height:auto}
.pb-scene .vl-obj{cursor:pointer}.pb-scene .vl-obj:hover,.pb-scene .vl-obj:focus-visible{filter:drop-shadow(0 0 8px #f6d77e);outline:none}
.pb-tag{position:absolute;left:12px;bottom:12px;pointer-events:none;background:rgba(0,0,0,.6);color:#fff;border-radius:12px;padding:6px 12px;font-size:16px}.pb-tag b{color:#f6d77e}
.pb-copy{padding:24px clamp(16px,3vw,32px);display:grid;gap:10px;align-content:center}
.pb-copy h1{margin:0;color:#f6d77e;font-size:clamp(28px,3.6vw,44px)}
.pb-depths{display:flex;gap:8px;margin:0;padding:0;list-style:none}.pb-depths li{padding:6px 12px;border-radius:999px;border:1px solid rgba(227,183,74,.3);color:#8f8676;font-size:13px}.pb-depths li.is-on{color:#1a1206;background:linear-gradient(180deg,#f0cf74,#c99a35);border-color:transparent;font-weight:700}
.pb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.pb-card{border-radius:18px;padding:16px;border:1px solid rgba(227,183,74,.25);display:grid;gap:10px;align-content:start}
.pb-card h2{margin:0;font-size:19px;color:#f3e2b0}.pb-card h3{margin:0;color:#f0d690}
.pb-names{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pb-names li{padding:6px 10px;border-radius:10px;background:#120d05;border:1px solid rgba(227,183,74,.3)}.pb-names li b{color:#f6efdc;display:block}.pb-names small{color:#a99f88}
.pb-names li.pb-hidden{opacity:.25;filter:blur(3px)}
.pb-fill{border:0;margin:0;padding:0;display:grid;gap:6px}.pb-fill p{margin:0;font-size:17px;color:#f6efdc}.pb-fill small{color:#a99f88}
.pb-blank{display:inline-block;min-width:60px;text-align:center;border-bottom:2px solid #e3b74a;color:#f6d77e}.pb-blank.ok{color:#7fd4a4;border-color:#7fd4a4}.pb-blank.no{color:#e2806f;border-color:#e2806f}
.pb-opts,.pb-mopts{display:flex;flex-wrap:wrap;gap:6px}.pb-mopts{display:grid}
.pb-opt,.pb-mopt{background:#120d05;border:1px solid rgba(227,183,74,.4);color:#f3e2b0;border-radius:10px;padding:7px 11px;font:inherit;font-size:14px;cursor:pointer;text-align:left}
.pb-opt:disabled{opacity:.5}.pb-mopt small{display:block;color:#a99f88}.pb-mopt.is-picked{border-color:#e3b74a;box-shadow:0 0 0 1px #e3b74a}
.pb-score b,.pb-why b{color:#f6d77e}
.pb-saying{margin:0;padding:12px 14px;border-left:3px solid #e3b74a;background:rgba(227,183,74,.06);border-radius:0 12px 12px 0}.pb-saying p{margin:0 0 4px;color:#f6efdc;font-style:italic}.pb-saying small{display:block;color:#bfb49c}
.pb-own-l{color:#f0d690;font-weight:600}
.pb-card textarea{width:100%;box-sizing:border-box;background:#0d0a06;color:#f6efdc;border:1px solid rgba(227,183,74,.4);border-radius:12px;padding:10px;font:inherit;font-size:16px}
.pb-g{font-style:normal;font-size:11px;color:#c9a54c;margin-left:4px}
.pb-pick{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}.pb-pick::-webkit-scrollbar{display:none}
.pb-pick a{flex:0 0 auto;display:grid;gap:1px;padding:7px 14px;border-radius:14px;border:1px solid rgba(227,183,74,.3);background:#120d05;color:#f3e2b0;text-decoration:none;min-width:76px;text-align:center}
.pb-pick a b{font-size:16px}.pb-pick a small{font-size:11px;color:#a99f88}.pb-pick a.is-on{border-color:#e3b74a;box-shadow:0 0 0 1px #e3b74a;background:rgba(227,183,74,.12)}
.pb-sub{margin:0;color:#d8c9a2}.pb-sub i{color:#f0d690}
.pb-review{margin:0;font-size:13px;color:#bfb49c;border-left:2px solid rgba(227,183,74,.5);padding-left:10px}.pb-review b{color:#f0d690}
.pb-tr{display:block;color:#d9c58f;font-style:italic}.pb-tr[hidden]{display:none}.pb-opt .pb-tr{font-size:11px;color:#a99f88}
.pb-page [dir=rtl]{text-align:right}.pb-fill:has(p[dir=rtl]) .pb-opts{direction:rtl}.pb-names li:has(b[dir=rtl]){text-align:right}.pb-names li:has(b[dir=rtl]) small{direction:ltr}
.pb-page [lang=zh] , .pb-page [lang=zh-CN]{font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif}
/* ── Living Civilizations (lc-) — Kemet · Timbuktu ───────────────── */
.lc-page { --lc-arch:#e3b74a; --lc-acct:#7fb8e6; --lc-trad:#c99adf; --lc-intp:#e08a6a; display:grid; gap:16px; min-width:0; max-width:1320px }
.lc-page .glass { border-radius:20px; background:linear-gradient(160deg,rgba(32,26,18,.82),rgba(8,8,10,.9)); box-shadow:inset 0 1px 0 rgba(246,215,126,.14), 0 18px 50px rgba(0,0,0,.55); backdrop-filter:blur(10px) }
.lc-crumb { margin:0; font-size:13px; display:flex; flex-wrap:wrap; gap:6px }
.lc-hero { padding:6px 2px 0 }
.lc-hero .display { margin:6px 0; font-family:var(--display); font-size:clamp(26px,4.4vw,48px); line-height:1.05; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.lc-hero .lead { max-width:72ch; color:var(--text-2) }
.lc-steps { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px }
.lc-rung { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(10,10,10,.6); color:var(--text); font-weight:600; cursor:pointer }
.lc-rung small { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#1b160c; color:var(--gold-hi); font-size:12px }
.lc-rung.on { background:var(--gold-grad); color:#1a1205; border-color:transparent }
.lc-rung.on small { background:#1a1205; }
.lc-arrow { color:var(--gold-lo) }
.lc-progress { margin-left:auto }
.lc-lensbar { display:grid; gap:8px; padding:12px 14px }
.lc-legend { display:flex; flex-wrap:wrap; gap:8px }
.lc-lens { --c:var(--gold); display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; border:1px solid var(--c); background:rgba(0,0,0,.45); color:var(--text); font-size:13px; font-weight:600; cursor:pointer }
.lc-lens i, .lc-tag i, .lc-legend-d dt i { width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); flex:none; display:inline-block }
.lc-lens[aria-pressed="false"] { opacity:.45; border-style:dashed }
.lc-lens[aria-pressed="false"] i { background:transparent; box-shadow:none; border:1px solid var(--c) }
.lc-t-arch { --c:var(--lc-arch) } .lc-t-acct { --c:var(--lc-acct) } .lc-t-trad { --c:var(--lc-trad) } .lc-t-intp { --c:var(--lc-intp) }
.lc-legend-d summary { cursor:pointer; color:var(--gold-hi); font-size:13px }
.lc-legend-d dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 16px; margin:8px 0 0 }
.lc-legend-d dt { font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--c); display:flex; align-items:center; gap:6px }
.lc-legend-d dd { margin:2px 0 0; color:var(--text-2); font-size:13px }
.lc-explore { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:16px; align-items:start }
.lc-scene { position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line-strong); box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04); background:#050505 }
.lc-scene::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55)); }
.lc-svg { display:block; width:100%; height:auto; aspect-ratio:16/9 }
.lc-obj { cursor:pointer; outline:none }
.lc-obj .lc-hit { fill:transparent; stroke:transparent; stroke-width:2; transition:stroke .2s, fill .2s }
.lc-obj:hover .lc-hit, .lc-obj:focus-visible .lc-hit { stroke:rgba(246,215,126,.7); fill:rgba(246,215,126,.06) }
.lc-obj.on .lc-hit { stroke:#f6d77e; stroke-width:3; fill:rgba(246,215,126,.1) }
.lc-obj.on { filter:drop-shadow(0 0 10px rgba(255,210,122,.65)) }
.lc-obj:not(.seen) .lc-hit { stroke:rgba(246,215,126,.22); stroke-dasharray:4 6 }
.lc-hint { position:absolute; left:12px; top:10px; right:12px; pointer-events:none; margin:0; z-index:1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 12px; border-radius:999px; width:max-content; max-width:calc(100% - 24px); background:rgba(5,5,5,.72); border:1px solid var(--line); font-size:13px; color:var(--gold-hi) }
.lc-hint .btn { pointer-events:auto }
.lc-card { padding:18px 18px 14px; min-height:240px; position:sticky; top:calc(var(--top-h) + 12px) }
.lc-card-h { margin:4px 0 10px; font-family:var(--display); font-size:24px; color:var(--gold-hi) }
.lc-word { display:flex; gap:14px; align-items:center; padding:12px 14px; border-radius:16px; background:linear-gradient(180deg,rgba(227,183,74,.12),rgba(227,183,74,.03)); border:1px solid var(--line) }
.lc-word > div { display:grid; gap:2px; min-width:0 }
.lc-tr { font-size:30px; font-family:"Noto Serif","Gentium Plus","Charis SIL",Georgia,serif; font-style:italic; color:var(--gold-hi); overflow-wrap:anywhere }
.lc-say { font-size:13px; color:var(--text-2) }
.lc-en { font-size:15px; color:var(--text) }
.lc-glyph { width:46px; height:80px; flex:none }
.lc-vowel { font-size:12px; margin:6px 2px 0 }
.lc-facts { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px }
.lc-facts li { padding:10px 12px; border-radius:14px; border-left:3px solid var(--c); background:rgba(255,255,255,.025) }
.lc-facts p { margin:4px 0 0; font-size:14.5px; line-height:1.5 }
.lc-tag { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.12em; font-weight:700; text-transform:uppercase; color:var(--c) }
.lc-step-h h2 { font-family:var(--display); color:var(--gold-hi); margin:4px 0 }
.lc-step-h p { color:var(--text-2); max-width:70ch }
.lc-quiz { list-style:none; padding:0; margin:12px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px }
.lc-q { padding:14px; display:grid; gap:8px; align-content:start }
.lc-q.ok { box-shadow:inset 0 0 0 2px rgba(70,167,88,.7) } .lc-q.no { box-shadow:inset 0 0 0 2px rgba(224,87,74,.6) }
.lc-ask { margin:0; font-size:15px; line-height:1.45 }
.lc-ask-w { font-size:30px; font-style:italic; color:var(--gold-hi); font-family:"Noto Serif",Georgia,serif }
.lc-opts { display:grid; gap:6px }
.lc-opt { text-align:left; padding:9px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.4); color:var(--text); cursor:pointer; font-size:14px }
.lc-opt.on { border-color:var(--gold-hi); background:rgba(227,183,74,.16) }
.lc-opt:disabled { cursor:default; opacity:.85 }
.lc-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0 }
.lc-score { margin:0 }
.lc-recon { border-radius:20px; overflow:hidden }
.lc-foot { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px }
.lc-box { padding:14px 16px } .lc-box h3 { margin:0 0 8px; color:var(--gold-hi); font-size:15px }
.lc-box ul { margin:0; padding-left:18px; display:grid; gap:6px; font-size:14px; color:var(--text-2) }
.lc-src li { font-style:italic }
.lc-rec { list-style:none; padding:0 !important }
.lc-rec li { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap }
.lc-entry-art svg { width:100%; height:100%; min-height:220px; display:block }
.lc-worlds { margin-top:-6px }
.lc-worldnav { display:flex; flex-wrap:wrap; gap:6px; min-width:0 }
.lc-worldnav a { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text-2); font-size:13px; text-decoration:none; white-space:nowrap }
.lc-worldnav a:hover { border-color:var(--line-strong); color:var(--text) }
.lc-worldnav a[aria-current="page"] { border-color:var(--gold-hi); color:var(--gold-hi); background:rgba(227,183,74,.1) }
.lc-lang { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2) }
.lc-nat { font-size:34px; line-height:1.15; color:var(--gold-hi); font-weight:600; overflow-wrap:anywhere }
.lc-ask-n { font-style:normal }
@media (max-width:900px) {
  .lc-explore { grid-template-columns:minmax(0,1fr) }
  .lc-card { position:static; min-height:0 }
  .lc-progress { margin-left:0; width:100% }
  .lc-arrow { display:none }
  .lc-entry-art svg { min-height:150px; max-height:190px }
}
@media (max-width:520px) {
  .lc-scene { border-radius:16px; margin:0 -4px }
  .lc-hint { font-size:12px; top:6px; left:6px; padding:5px 10px }
  .lc-tr { font-size:26px }
  .lc-quiz { grid-template-columns:minmax(0,1fr) }
}
/* ── Language Escape · The Ancient Library (lx-) ─────────────── */
.lx-page{display:grid;gap:18px;min-width:0}
.lx-hero{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(227,183,74,.4);min-height:clamp(280px,40vw,500px);display:grid;box-shadow:0 0 0 1px rgba(227,183,74,.1),0 30px 60px -36px rgba(227,183,74,.5)}
.lx-hero-art{position:absolute;inset:0}.lx-hero-art .lx-svg{width:100%;height:100%;object-fit:cover}
.lx-hero-copy{position:relative;align-self:end;padding:26px clamp(16px,4vw,36px);background:linear-gradient(180deg,rgba(5,4,3,0),rgba(5,4,3,.86) 42%,rgba(5,4,3,.96));display:grid;gap:8px}
.lx-hero-copy h1,.lx-head h1{margin:0;font-family:var(--display);font-size:clamp(30px,6vw,50px);line-height:1.05;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lx-hero-copy .lead{margin:0;max-width:62ch;color:#e9e1cf}
.lx-room-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:20px 22px;border-radius:22px;text-decoration:none;color:var(--text);border:1px solid var(--line-strong);background:linear-gradient(120deg,#140e06,#070605 70%);box-shadow:inset 0 1px 0 rgba(255,220,140,.12),0 24px 50px -34px rgba(227,183,74,.55)}
.lx-room-card:hover{border-color:var(--gold-hi)}
.lx-room-glyphs{display:grid;grid-template-columns:repeat(2,44px);gap:8px}
.lx-room-glyphs i{font-style:normal;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid #e3b74a;color:#f6d77e;background:#1a1206;font-size:18px;box-shadow:0 0 14px rgba(227,183,74,.3)}
.lx-room-body{display:grid;gap:8px}.lx-room-body b{font-family:var(--display);font-size:clamp(22px,3vw,30px);color:#f6d77e}.lx-room-body>span:not(.eyebrow):not(.btn){color:var(--text-2);font-size:14.5px}.lx-room-body .btn{justify-self:start}
.lx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.lx-facts section{border-radius:18px;padding:16px 18px}.lx-facts h2{margin:0 0 6px;font-size:17px;color:#f6d77e}.lx-facts p{margin:0;color:var(--text-2);font-size:14px}
.lx-head{display:grid;gap:6px}
.lx-hud{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:8px}
.lx-hud-l{font-size:13px;color:#c9bfa8;margin-right:4px}
.lx-pip{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(227,183,74,.45);color:#8a7a55;background:#100c06;font-size:14px}
.lx-pip.is-now{border-color:#f6d77e;color:#f6d77e;box-shadow:0 0 0 3px rgba(246,215,126,.15)}
.lx-pip.is-lit{background:linear-gradient(180deg,#f0cf74,#c99a35);color:#1a1206;border-color:#f6d77e}
.lx-clock{margin-left:auto;font-variant-numeric:tabular-nums;font-size:15px;color:#f6d77e;border:1px solid rgba(227,183,74,.4);border-radius:999px;padding:5px 12px}
.lx-play{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:18px;align-items:start}
.lx-stage{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-strong);background:#05040a;box-shadow:0 30px 60px -30px rgba(255,180,80,.3),inset 0 0 0 1px rgba(255,220,140,.06);position:sticky;top:calc(var(--top-h, 64px) + 12px)}
.lx-svg{width:100%;height:auto;display:block;aspect-ratio:16/9}
.lx-hit{fill:transparent}
.lx-obj{cursor:pointer;outline:none;transition:filter .2s,opacity .6s}
.lx-obj:hover,.lx-obj:focus-visible{filter:drop-shadow(0 0 6px #ffd27a) brightness(1.15)}
.lx-obj:focus-visible .lx-hit{stroke:#f6d77e;stroke-width:2;stroke-dasharray:6 4}
.lx-obj.on{filter:drop-shadow(0 0 14px #ffd27a) drop-shadow(0 0 3px #fff) brightness(1.3);animation:lx-pulse 1.6s ease-in-out infinite}
@keyframes lx-pulse{50%{filter:drop-shadow(0 0 22px #ffd27a) brightness(1.45)}}
.lx-flame{transform-box:fill-box;transform-origin:50% 100%;animation:lx-flick 2.4s ease-in-out infinite}
@keyframes lx-flick{0%,100%{transform:scale(1,1)}40%{transform:scale(.92,1.08)}70%{transform:scale(1.05,.95)}}
.lx-tag rect{fill:rgba(20,14,6,.92);stroke:#e3b74a}.lx-tag text{fill:#f6d77e;font-size:15px;font-family:'Noto Sans Hebrew',Georgia,serif}
.lx-dark{opacity:0;pointer-events:none;transition:opacity 1.2s}
.lx-stage.is-dim .lx-dark{opacity:.84}
.lx-stage.is-dim .lx-obj{pointer-events:none}
.lx-glyph circle{transition:fill .5s}.lx-glyph.is-lit circle{fill:#f0c35a}.lx-glyph.is-lit text{fill:#1a1206}.lx-glyph.is-lit{filter:drop-shadow(0 0 6px #ffd27a)}
.lx-beyond{opacity:0;transition:opacity 1.2s}
.lx-leaf{transform-box:fill-box;transition:transform 1.6s cubic-bezier(.3,.7,.2,1)}
.lx-leaf-l{transform-origin:0 50%}.lx-leaf-r{transform-origin:100% 50%}
.lx-stage.is-open .lx-beyond{opacity:1}
.lx-stage.is-open .lx-leaf-l{transform:perspective(600px) rotateY(70deg) scaleX(.35)}
.lx-stage.is-open .lx-leaf-r{transform:perspective(600px) rotateY(-70deg) scaleX(.35)}
.lx-stage.is-open .lx-door{filter:drop-shadow(0 0 30px #ffd27a)}
.lx-panel{border-radius:22px;padding:18px;display:grid;gap:12px;border:1px solid rgba(227,183,74,.3);background:linear-gradient(180deg,#120d07,#080706);box-shadow:inset 0 1px 0 rgba(255,220,140,.1),0 24px 50px -36px rgba(227,183,74,.45);min-width:0}
.lx-panel:focus{outline:none}
.lx-panel h2{margin:0;font-family:var(--display);color:#f6d77e;font-size:24px}.lx-panel h3{margin:10px 0 4px;color:#f0d690;font-size:16px}.lx-panel p{margin:0;color:#e9e1cf}
.lx-setup{display:grid;gap:14px}.lx-setup fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}.lx-setup legend{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c9a54c;margin-bottom:6px}
.lx-seg{display:flex;flex-wrap:wrap;border:1px solid rgba(227,183,74,.45);border-radius:16px;overflow:hidden}
.lx-seg button{flex:1 1 auto;background:transparent;color:#d8cfbb;border:0;padding:12px 14px;min-height:48px;font:inherit;font-size:14px;cursor:pointer}
.lx-seg button[aria-pressed="true"]{background:linear-gradient(180deg,#f0cf74,#c99a35);color:#1a1206;font-weight:700}
.lx-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}
.lx-names label,.lx-write label{display:grid;gap:4px;font-size:13px;color:#c9bfa8}
.lx-page input:not([type=checkbox]){background:#0c0905;color:#f6efdc;border:1px solid rgba(227,183,74,.45);border-radius:12px;padding:12px 14px;font:inherit;font-size:18px;min-height:48px;width:100%;box-sizing:border-box}
.lx-page input:focus-visible,.lx-page button:focus-visible{outline:2px solid #f6d77e;outline-offset:2px}
.lx-check{display:flex;gap:10px;align-items:center;font-size:14px;color:#e9e1cf;min-height:44px}.lx-check input{width:22px;height:22px;accent-color:#e3b74a}
.lx-big{min-height:52px;font-size:16px;width:100%}
.lx-note{font-size:13px;color:#a99f88!important}
.lx-lockhead{display:flex;gap:12px;align-items:center}
.lx-g{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2px solid #e3b74a;color:#f6d77e;font-size:20px;background:#1a1206;box-shadow:0 0 18px rgba(227,183,74,.3);flex:none}
.lx-pass{border-radius:14px;padding:12px 14px;background:rgba(184,69,44,.14);border:1px solid rgba(214,120,90,.5);color:#ffe6d6;font-size:15px}
.lx-card{border-radius:18px;padding:16px;display:grid;gap:8px;background:linear-gradient(160deg,#2a1e0c,#120d06);border:1px solid #e3b74a;box-shadow:inset 0 0 0 4px rgba(227,183,74,.08)}
.lx-word{font-size:clamp(28px,6vw,40px);color:#f6d77e!important;font-family:'Noto Sans Hebrew',Georgia,serif;line-height:1.2}
.lx-scr{letter-spacing:.18em}
.lx-tr{color:#c9bfa8!important;font-style:italic}
.lx-icon{font-size:56px;line-height:1}.lx-icons{display:flex;gap:12px;font-size:40px;flex-wrap:wrap}
.lx-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.lx-chip{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:8px 12px;border-radius:14px;background:#140f07;border:1px solid rgba(227,183,74,.4);color:#f3e8cc;font:inherit;font-size:15px;cursor:pointer;text-decoration:none;text-align:center}
.lx-chip:hover{border-color:#f6d77e;background:#1d150a}.lx-chip.is-done{opacity:.55}
.lx-scrolls{display:grid;gap:8px}
.lx-scroll{display:grid;gap:2px;justify-items:center;min-height:60px;padding:10px 14px;border-radius:12px;cursor:pointer;font:inherit;font-size:22px;color:#2a1a08;background:linear-gradient(180deg,#f1e4bf,#d9c592);border:2px solid #b8862a;box-shadow:inset 0 0 0 3px rgba(122,74,38,.18)}
.lx-scroll[aria-pressed="true"]{outline:3px solid #f6d77e;outline-offset:2px;box-shadow:0 0 18px rgba(246,215,126,.6)}
.lx-scroll small{font-size:12px;color:#5a3a1c}.lx-scroll.is-done{opacity:.6;cursor:default}
.lx-write,.lx-recall{display:grid;gap:10px}
.lx-recall{grid-template-columns:repeat(2,minmax(0,1fr))}.lx-recall .lx-big{grid-column:1/-1}
.lx-msg{border-left:3px solid #e3b74a;padding:6px 10px;background:rgba(227,183,74,.07);border-radius:0 10px 10px 0}
.lx-hintrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid rgba(227,183,74,.18);padding-top:10px}
.lx-hint{min-height:44px;padding:8px 16px;border-radius:999px;background:rgba(227,183,74,.08);border:1px solid rgba(227,183,74,.45);color:#f0d690;font:inherit;font-size:14px;cursor:pointer}
.lx-hintline{font-size:14px;color:#f0d690!important}
.lx-results{width:100%;border-collapse:collapse;font-size:14px}.lx-results th,.lx-results td{text-align:start;padding:8px 6px;border-bottom:1px solid rgba(227,183,74,.16);vertical-align:top}
.lx-results thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9a54c}
.lx-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}
.lx-independent{background:linear-gradient(180deg,#f0cf74,#c99a35);color:#1a1206}.lx-guided{border:1px solid #e3b74a;color:#f0d690}
.lx-na{color:#d6a08a;font-size:13px}
.lx-list{margin:0;padding-inline-start:20px;color:#e9e1cf;display:grid;gap:4px}
.lx-done{display:grid;gap:10px}.lx-time{font-size:16px}
.lx-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:8px}
.lx-again{display:flex;flex-wrap:wrap;gap:10px}.lx-again .btn{min-height:48px}
.lx-entry-art{font-size:34px;letter-spacing:.2em;color:#f6d77e}
@media (max-width:900px){.lx-play{grid-template-columns:minmax(0,1fr)}.lx-stage{position:relative;top:auto}}
@media (max-width:520px){.lx-room-card{grid-template-columns:minmax(0,1fr)}.lx-room-glyphs{grid-template-columns:repeat(4,44px)}.lx-results{font-size:13px}.lx-results td:last-child{font-size:12px}.lx-panel{padding:14px}}
@media (prefers-reduced-motion: reduce){.lx-flame,.lx-obj.on{animation:none}.lx-leaf,.lx-dark,.lx-beyond,.lx-obj{transition:none}.lx-stage.is-open .lx-leaf-l,.lx-stage.is-open .lx-leaf-r{transform:none;opacity:0;transition:opacity .4s}}
.lx-panel>*{min-width:0}.lx-big,.lx-hint,.lx-again .btn{white-space:normal;height:auto;line-height:1.25;text-align:center}

/* ── Mastery & Flow Observatory + Passport/Learning Genome (ob-) ── */
.ob-page { display: grid; gap: 16px; min-width: 0; }
.ob-page * { min-width: 0; }
.ob-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 22px 22px 18px; border-radius: 20px; border: 1px solid #3a2f17; background: radial-gradient(120% 140% at 0% 0%, rgba(227,183,74,.16), transparent 55%), linear-gradient(180deg, #0f0d09, #070707); box-shadow: inset 0 1px 0 rgba(246,215,126,.12), 0 18px 40px rgba(0,0,0,.45); }
.ob-hero h1 { margin: 6px 0 4px; font-size: clamp(28px, 4.2vw, 44px); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-hero .lead { margin: 0; color: var(--text-2); }
.ob-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-tabs a { padding: 7px 12px; border-radius: 999px; border: 1px solid #3a2f17; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); }
.ob-tabs a[aria-current="page"] { background: var(--gold-grad); color: #1a1205; font-weight: 700; }
.ob-source { margin: 0; font-size: 13px; color: var(--text-2); }
.ob-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ob-card { position: relative; padding: 18px; border-radius: 18px; border: 1px solid #33291a; background: linear-gradient(180deg, rgba(22,19,13,.96), rgba(8,8,7,.98)); box-shadow: inset 0 1px 0 rgba(246,215,126,.10), 0 1px 0 rgba(0,0,0,.6), 0 14px 32px rgba(0,0,0,.42); display: grid; align-content: start; gap: 12px; color: var(--text); }
.ob-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(246,215,126,.08), transparent 40%); }
.ob-h { margin: 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); font-weight: 700; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ob-h small { font-size: 10.5px; letter-spacing: .1em; color: var(--gold); opacity: .8; }
.ob-tl-card { grid-column: span 2; }
.ob-growth, .ob-sketch { grid-column: 1 / -1; }
.ob-wide { grid-column: 1 / -1; }
.ob-quiet { margin: 0; font-size: 12.5px; color: var(--text-2); }
.ob-more { font-size: 12.5px; color: var(--gold); font-weight: 600; letter-spacing: .06em; }
.ob-empty { padding: 14px; border-radius: 14px; border: 1px dashed #4a3c1e; background: rgba(227,183,74,.04); display: grid; gap: 10px; }
.ob-empty p { margin: 0; font-size: 14px; }
.ob-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-links a { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--gold-lo); color: var(--gold-hi); font-size: 13px; }
.ob-tl { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 8px; border-left: 1px solid rgba(227,183,74,.35); }
.ob-tl li { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid #241f16; }
.ob-dot { position: absolute; left: -20px; top: 14px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, #fff3c4, #e3b74a 60%, #8a6418); box-shadow: 0 0 10px rgba(246,215,126,.7); }
.ob-tl a { display: grid; color: var(--text); }
.ob-tl a small, .ob-cap-r small, .ob-hist small, .ob-stamps small { color: var(--text-2); font-size: 12px; }
.ob-tl-m { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.ob-score { color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.ob-help { padding: 2px 8px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; border: 1px solid #3a3326; color: #cfc6b2; }
.ob-help.ob-independent { border-color: var(--gold); color: #1a1205; background: var(--gold-grad); font-weight: 700; }
.ob-help.ob-reduced { border-color: #6b5626; color: var(--gold-hi); }
.ob-bars { width: 100%; height: auto; display: block; }
.ob-bars text { fill: #f6d77e; font-size: 9px; }
.ob-ax { fill: #a9a291 !important; font-size: 9px; }
.ob-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ob-stats div { padding: 10px; border-radius: 12px; border: 1px solid #2a2418; background: rgba(0,0,0,.35); display: grid; }
.ob-stats span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.ob-stats b { font-size: 24px; color: var(--gold-hi); font-family: var(--display); font-variant-numeric: tabular-nums; }
.ob-stats small { font-size: 11px; color: var(--text-2); }
.ob-cal-wrap { display: grid; gap: 10px; }
.ob-cal { width: 100%; max-width: 300px; height: auto; justify-self: center; }
.ob-cal-bg { fill: rgba(227,183,74,.03); stroke: #3a2f17; }
.ob-ideal { stroke: #e3b74a; stroke-dasharray: 4 4; opacity: .6; }
.ob-pt { fill: #f6d77e; stroke: #fff3c4; stroke-width: 1.5; filter: drop-shadow(0 0 5px rgba(246,215,126,.9)); }
.ob-cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.ob-cal-list li { display: grid; }
.ob-cal-list span { color: var(--text-2); font-size: 12px; }
.ob-rate { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid #2a2418; font-size: 13px; }
.ob-rate label { display: grid; gap: 6px; }
.ob-rate select { max-width: 100%; padding: 8px; border-radius: 10px; background: #0d0c0a; color: var(--text); border: 1px solid #3a2f17; }
.ob-rate fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-rate legend { padding: 0; margin-bottom: 6px; }
.ob-five { display: flex; gap: 6px; }
.ob-five label { flex: 1; }
.ob-five input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ob-five span { display: grid; place-items: center; height: 40px; border-radius: 10px; border: 1px solid #3a2f17; color: var(--gold-hi); font-weight: 700; cursor: pointer; }
.ob-five input:checked + span { background: var(--gold-grad); color: #1a1205; }
.ob-five input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.ob-chal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ob-chal-c { padding: 12px 10px; border-radius: 14px; border: 1px solid #33291a; background: rgba(0,0,0,.35); display: grid; align-content: start; gap: 4px; text-align: center; }
.ob-chal-1 { border-color: var(--gold-lo); background: linear-gradient(180deg, rgba(227,183,74,.14), rgba(0,0,0,.35)); }
.ob-chal-2 { border-color: var(--gold); }
.ob-chal-ic { color: var(--gold); letter-spacing: .1em; font-size: 12px; }
.ob-chal-c b { color: var(--gold-hi); }
.ob-chal-c small { color: var(--text-2); font-size: 11.5px; }
.ob-chal-c ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.ob-chal-c a { font-size: 12.5px; color: var(--text); text-decoration: underline; text-decoration-color: rgba(227,183,74,.4); }
.ob-path { list-style: none; margin: 0; padding: 4px 0 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; position: relative; }
.ob-path::before { content: ""; position: absolute; left: 3%; right: 3%; top: 21px; height: 1px; background: linear-gradient(90deg, #e3b74a, rgba(227,183,74,.2)); }
.ob-path li { position: relative; }
.ob-stage { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 6px; width: 100%; text-align: center; }
.ob-stage:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; border-radius: 8px; }
.ob-node { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid #4a3c1e; background: #0d0c0a; color: #8f8775; }
.ob-path li.on .ob-node { background: radial-gradient(circle at 35% 30%, #fff3c4, #e3b74a 55%, #8a6418); color: #1a1205; border-color: #f6d77e; box-shadow: 0 0 14px rgba(246,215,126,.6); }
.ob-stage b { font-size: 10.5px; line-height: 1.2; color: #8f8775; font-weight: 600; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; word-break: normal; }
.ob-path li.on .ob-stage b { color: var(--gold-hi); }
.ob-flow .ob-node { border-style: dashed; }
.ob-rule { display: none; position: absolute; z-index: 5; top: 100%; left: 50%; transform: translateX(-50%); width: 200px; margin-top: 6px; padding: 10px; border-radius: 10px; background: #15120c; border: 1px solid var(--gold-lo); font-size: 12px; color: var(--text); box-shadow: 0 10px 24px rgba(0,0,0,.6); }
.ob-path li:first-child .ob-rule { left: 0; transform: none; }
.ob-path li:last-child .ob-rule, .ob-path li:nth-last-child(2) .ob-rule { left: auto; right: 0; transform: none; }
.ob-path li:hover .ob-rule, .ob-path li:focus-within .ob-rule { display: block; }
.ob-path-sum { margin: 0; font-size: 13px; }
.ob-path-sum b { color: var(--gold-hi); }
.ob-door { grid-template-columns: auto minmax(0, 1fr); align-items: center; text-decoration: none; border-color: #5a461c; }
.ob-door:hover { border-color: var(--gold); }
.ob-door-art svg { width: 84px; height: 84px; display: block; filter: drop-shadow(0 0 12px rgba(227,183,74,.35)); }
.ob-door > span:nth-child(2) { display: grid; gap: 4px; }
.ob-door b { font-family: var(--display); font-size: 20px; color: var(--gold-hi); }
.ob-door small { color: var(--text-2); font-size: 12.5px; }
.ob-door .btn { grid-column: 1 / -1; justify-self: start; }
.ob-law { max-width: none; }
.ob-cap header { display: grid; gap: 2px; }
.ob-cap-n { font-size: 12.5px; color: var(--text-2); }
.ob-cap-n b { color: var(--gold-hi); font-size: 16px; }
.ob-cap-t { display: grid; gap: 4px; }
.ob-cap-r { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border-radius: 10px; border: 1px solid #221d14; font-size: 13px; }
.ob-cap-r > a { display: grid; color: var(--text); }
.ob-cap-r > span { display: grid; }
.ob-cap-th { border: 0; padding: 0 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.ob-ind.on b { color: var(--gold-hi); }
.ob-none { color: #6d6758; }
.ob-pat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ob-pat li { display: grid; gap: 2px; padding: 10px; border-radius: 12px; border: 1px solid #2a2418; background: rgba(0,0,0,.3); }
.ob-pat li > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ob-pat a { color: var(--text); font-weight: 600; }
.ob-pat small { font-size: 12px; color: var(--text-2); }
.ob-stamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.ob-stamps li { display: grid; justify-items: center; text-align: center; gap: 4px; }
.ob-seal { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #1a1205; background: radial-gradient(circle at 35% 30%, #fff3c4, #e3b74a 55%, #8a6418); box-shadow: 0 0 0 3px #15120c, 0 0 0 4px #b8862a, 0 6px 16px rgba(0,0,0,.6); }
.ob-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-hist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 8px 0; border-bottom: 1px solid #221d14; font-size: 13px; }
.ob-hist li > span:first-child { display: grid; }
@media (max-width: 1100px) { .ob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ob-door { grid-column: 1 / -1; } .ob-path { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 14px; } .ob-path::before { display: none; } }
@media (max-width: 700px) {
  .ob-grid { grid-template-columns: minmax(0, 1fr); }
  .ob-tl-card, .ob-growth, .ob-sketch, .ob-door { grid-column: auto; }
  .ob-hero { padding: 18px 16px; }
  .ob-chal { grid-template-columns: minmax(0, 1fr); }
  .ob-path { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ob-rule { width: 170px; }
  .ob-path li:nth-child(4n+1) .ob-rule { left: 0; transform: none; }
  .ob-path li:nth-child(4n) .ob-rule { left: auto; right: 0; transform: none; }
  .ob-cap-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ob-cap-r > a { grid-column: 1 / -1; }
  .ob-cap-th > span:first-child { display: none; }
  .ob-door-art svg { width: 64px; height: 64px; }
}

/* ── Living Ocean (oc-) ── */
.oc-page *{min-width:0}
.oc-hero .lx-hero-art .oc-svg{width:100%;height:100%}
.oc-lang .lx-seg{max-width:560px}
.oc-stage{background:#03101c}
.oc-obj{cursor:pointer;outline:none;transition:filter .2s}
.oc-obj:hover,.oc-obj:focus-visible{filter:drop-shadow(0 0 6px #ffe6a0) brightness(1.15)}
.oc-obj:focus-visible .lx-hit{stroke:#f6d77e;stroke-width:2;stroke-dasharray:6 4}
.oc-obj.on{filter:drop-shadow(0 0 12px #ffe6a0) drop-shadow(0 0 2px #fff) brightness(1.25)}
.oc-far{opacity:.55;filter:blur(.6px)}
.oc-shaft,.oc-school,.oc-whale,.oc-turtle,.oc-kelp,.oc-bub,.oc-shark,.oc-octo,.oc-flip,.oc-fish{transform-box:fill-box}
.oc-kelp{transform-origin:50% 100%}.oc-flip{transform-origin:0 100%}
.oc-card-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.oc-depth button{font-size:13px}
.oc-body{display:grid;gap:6px;min-height:120px}
.oc-sent{font-size:clamp(22px,4.5vw,30px);color:#f6d77e!important;font-family:'Noto Sans Hebrew',Georgia,serif;line-height:1.3}
.oc-sent-s{display:block;color:#f6d77e;font-size:17px}
.oc-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.oc-links li{display:grid;gap:3px;padding:10px 12px;border-radius:14px;background:rgba(63,150,198,.08);border:1px solid rgba(120,190,230,.28)}
.oc-web{font-size:19px;color:#f3e8cc;font-family:'Noto Sans Hebrew',Georgia,serif}.oc-web i{font-style:normal;color:#8fd3ff;margin:0 6px}
.oc-links small{color:#a9c8dc;font-size:12.5px}
.oc-sci{border-radius:16px;padding:12px 14px;background:linear-gradient(160deg,rgba(40,110,150,.22),rgba(10,30,45,.5));border:1px solid rgba(143,211,255,.4)}
.oc-sci .eyebrow{color:#8fd3ff}.oc-sci p{margin:4px 0 0;font-size:14.5px}
.oc-chips{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}.oc-chips .lx-chip{min-height:46px;font-size:14px}.lx-chip.is-on{border-color:#f6d77e;background:#2a1e0c;color:#f6d77e}
.oc-round h2{margin:0}
.oc-ladder{display:flex;flex-wrap:wrap;gap:8px}.oc-ladder .hu-rung{min-height:44px;padding:6px 14px;border-radius:999px;cursor:pointer;display:flex;gap:6px;align-items:center}
.oc-quiz{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.oc-q{border:1px solid rgba(227,183,74,.3);border-radius:16px;padding:10px;margin:0;display:grid;gap:8px;background:#0b0906}
.oc-q.ok{border-color:#3fc6b8}.oc-q.no{border-color:#e0574a}
.oc-q small{color:#f0a49b}.oc-q input{font-size:18px}
.oc-thumb{display:block;border-radius:12px;overflow:hidden;background:#03101c;aspect-ratio:16/9}.oc-thumb svg{width:100%;height:100%;display:block}
.oc-hint{margin:0;font-size:13.5px;color:#d8cfbb}
.oc-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}.oc-opts .hu-opt{min-height:48px}
.oc-evidence{border-radius:20px;padding:16px 18px;display:grid;gap:8px}.oc-evidence h2{margin:0;font-size:20px;color:#f6d77e}.oc-evidence p{margin:0}
.oc-ev{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:10px}.oc-ev h3{margin:0 0 4px;font-size:15px;color:#f0d690}.oc-ev ul{margin:0;padding-inline-start:18px}
@media (prefers-reduced-motion: no-preference){
  .oc-shaft{animation:oc-shaft 7s ease-in-out infinite}
  .oc-school{animation:oc-school 14s ease-in-out infinite}
  .oc-fish{animation:oc-bob 2.2s ease-in-out infinite}
  .oc-whale{animation:oc-whale 22s ease-in-out infinite}
  .oc-turtle{animation:oc-turtle 12s ease-in-out infinite}.oc-flip{animation:oc-flip 2.6s ease-in-out infinite}
  .oc-kelp{animation:oc-kelp 5s ease-in-out infinite}
  .oc-bub{animation:oc-bub 5s linear infinite}
  .oc-shark{animation:oc-shark 26s ease-in-out infinite}
  .oc-octo{animation:oc-bob 4s ease-in-out infinite}
}
@keyframes oc-shaft{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes oc-school{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-10px)}}
@keyframes oc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes oc-whale{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,6px)}}
@keyframes oc-turtle{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-18px,-8px) rotate(-3deg)}}
@keyframes oc-flip{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes oc-kelp{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes oc-bub{0%{transform:translateY(20px);opacity:0}15%{opacity:1}100%{transform:translateY(-120px);opacity:0}}
@keyframes oc-shark{0%,100%{transform:translateX(0)}50%{transform:translateX(60px)}}

/* ── Café After Dark (cn-) ── */
.cn-room *{min-width:0}
.cn-card{background:linear-gradient(120deg,#1a0d10,#070605 70%)}
.cn-glyphs i{font-size:20px}
.cn-pics{margin:0;padding-inline-start:22px;display:grid;gap:8px}.cn-pics li{display:flex;gap:10px;align-items:center;font-size:16px}
.cn-pic{font-size:34px;line-height:1}.cn-pic-xl{font-size:60px}
.cn-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));gap:8px}
.cn-slot{display:grid;gap:4px;justify-items:center;text-align:center;min-height:96px;padding:10px;border-radius:16px;background:#140f07;border:1px solid rgba(227,183,74,.4);color:#f3e8cc;font:inherit;font-size:13.5px;cursor:pointer}
.cn-slot b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2a1e0c;color:#f6d77e;border:1px solid #e3b74a}
.cn-slot.is-sel{outline:3px solid #f6d77e;outline-offset:2px;box-shadow:0 0 18px rgba(246,215,126,.5)}.cn-slot.is-done{opacity:.65;cursor:default}.cn-slot small{color:#8fe7dc;font-size:14px}
.cn-words .lx-chip{flex-direction:column;gap:2px;font-size:16px}.cn-words small{font-size:12px;color:#c9bfa8}
.cn-compl{display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;background:#140f07;border:1px solid rgba(227,183,74,.3)}
.cn-opts{display:grid;gap:8px}
.cn-opt{display:grid;gap:2px;text-align:start;min-height:56px;padding:12px 16px;border-radius:14px;background:#140f07;border:1px solid rgba(227,183,74,.4);color:#f3e8cc;font:inherit;font-size:17px;cursor:pointer}
.cn-opt small{font-size:12.5px;color:#c9bfa8}.cn-opt.ok{border-color:#3fc6b8;color:#8fe7dc}.cn-opt.no{border-color:#e0574a;color:#f0a49b}
.cn-story{margin:0;padding-inline-start:24px;display:grid;gap:8px}.cn-story li{display:grid;gap:2px;font-size:17px;color:#f3e8cc}.cn-story small{font-size:12.5px;color:#c9bfa8}
.cn-reveal li.ok{color:#8fe7dc}.cn-reveal li.no{color:#f0a49b}
.cn-tiles{display:grid;gap:8px}
.cn-tile{display:grid;gap:2px;text-align:start;min-height:56px;padding:10px 14px;border-radius:12px;cursor:pointer;font:inherit;font-size:16px;color:#2a1a08;background:linear-gradient(180deg,#f1e4bf,#d9c592);border:2px solid #b8862a}
.cn-tile[aria-pressed="true"]{outline:3px solid #f6d77e;outline-offset:2px}.cn-tile small{font-size:12px;color:#5a3a1c}
.cn-moments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cn-moment{display:grid;gap:4px;justify-items:start;text-align:start;min-height:72px;padding:10px 12px;border-radius:14px;background:#0c0905;border:1px dashed rgba(227,183,74,.5);color:#d8cfbb;font:inherit;font-size:14px;cursor:pointer}
.cn-moment b{color:#f6d77e}.cn-moment.is-set{border-style:solid;background:#1a1309;color:#f3e8cc}
.cn-warm{font-size:17px}
.cn-beyond{opacity:0;transition:opacity 1.4s}.cn-leaf{transform-box:fill-box;transform-origin:0 50%;transition:transform 1.6s cubic-bezier(.3,.7,.2,1)}
.lx-stage.is-open .cn-beyond{opacity:1}.lx-stage.is-open .cn-leaf{transform:perspective(600px) rotateY(70deg) scaleX(.4)}
.cn-hearts path{opacity:0;transform-box:fill-box}
.lx-stage.is-open .cn-hearts path{opacity:.9}
@media (prefers-reduced-motion: no-preference){
  .cn-bulb{animation:cn-twinkle 3s ease-in-out infinite}
  .cn-steam path{animation:cn-steam 3s ease-in-out infinite}
  .lx-stage.is-open .cn-hearts path{animation:cn-rise 4s ease-in infinite}
}
@keyframes cn-twinkle{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes cn-steam{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.8;transform:translateY(-4px)}}
@keyframes cn-rise{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-140px);opacity:0}}
@media (prefers-reduced-motion: reduce){.cn-leaf,.cn-beyond{transition:none}}

/* ══ WOW TV Current-Gen (tv2-) — mockups 07 + 12 ═══════════════════════ */
.tv2 { display: grid; gap: 18px; min-width: 0; }
.tv2-top { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: stretch; }
.tv2-stage { position: relative; min-height: 470px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(227,183,74,0.38); box-shadow: 0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,230,160,0.12); display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto 1fr auto auto; isolation: isolate; background: #05060c; }
.tv2-stage-art { position: absolute; inset: 0; z-index: -1; background: var(--art) center right / cover no-repeat; }
.tv2-stage-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,3,8,0.92) 0%, rgba(3,3,8,0.55) 45%, rgba(3,3,8,0.12) 75%), linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.9) 100%); }
.tv2-stage-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px 0; }
.tv2-state { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 10px; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #d9d4c8; background: rgba(20,20,26,0.82); border: 1px solid rgba(255,255,255,0.14); }
.tv2-state svg { width: 16px; height: 16px; color: var(--gold); }
.tv2-credit { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(243,239,230,0.88); background: rgba(0,0,0,0.6); padding: 3px 8px; border-radius: 6px; }
.tv2-mark { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; margin: 8px 0 0 clamp(18px, 6%, 70px); padding: 18px 22px; border-radius: 12px; border: 1px solid rgba(227,183,74,0.35); background: linear-gradient(160deg, rgba(14,18,48,0.78), rgba(6,6,16,0.78)); box-shadow: 0 0 40px rgba(80,90,255,0.18); display: grid; justify-items: center; text-align: center; gap: 4px; backdrop-filter: blur(6px); }
.tv2-mark-w { font-family: var(--display); font-size: 44px; line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv2-mark b { font-family: var(--display); font-size: 28px; letter-spacing: .04em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv2-mark small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #e8e2d4; line-height: 1.5; }
.tv2-next { grid-column: 2; grid-row: 2 / 4; margin: 10px 14px 10px 0; border-radius: 14px; background: rgba(8,8,14,0.74); border: 1px solid rgba(227,183,74,0.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 12px; align-self: start; }
.tv2-next h2 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
.tv2-next h2 svg { width: 14px; height: 14px; color: var(--violet); }
.tv2-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tv2-next-i { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); color: inherit; text-decoration: none; }
.tv2-next-i:hover { border-color: var(--line-strong); }
.tv2-next-i b { display: block; font-size: 13px; }
.tv2-next-i small { display: block; font-size: 11px; color: var(--text-3); }
.tv2-gold { color: var(--gold) !important; }
.tv2-next-th { width: 56px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, hsl(var(--h) 55% 28%), hsl(calc(var(--h) + 40) 60% 14%)); }
.tv2-next-th svg { width: 20px; height: 20px; color: var(--gold-hi); }
.tv2-next-empty { font-size: 13px; color: var(--text-2); padding: 12px; border-radius: 10px; border: 1px dashed rgba(227,183,74,0.3); line-height: 1.5; }
.tv2-cap { grid-column: 1; grid-row: 3; padding: 14px 22px 10px; display: grid; gap: 8px; max-width: 680px; }
.tv2-cap h1 { margin: 0; font-family: var(--display); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.02; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.8); }
.tv2-lead { margin: 0; font-size: 17px; color: #ece7db; }
.tv2-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tv2-tags span { font-size: 12px; padding: 4px 11px; border-radius: 7px; border: 1px solid rgba(227,183,74,0.45); background: rgba(0,0,0,0.45); color: #f1e6c6; }
.tv2-honest { margin: 0; font-size: 13px; color: var(--text-2); max-width: 560px; }
.tv2-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.tv2-bar { grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; gap: 14px; padding: 10px 18px 14px; }
.tv2-ctl { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; flex: none; }
.tv2-ctl svg { width: 18px; height: 18px; }
.tv2-ctl:hover { border-color: var(--gold); color: var(--gold-hi); }
.tv2-track { flex: 1; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.16); overflow: hidden; }
.tv2-track i { display: block; width: 0; height: 100%; background: var(--live); }
.tv2-off { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-3); }
.tv2-off i { width: 8px; height: 8px; border-radius: 50%; background: var(--unk); }
.tv2-badges { display: flex; gap: 8px; }
.tv2-badges span { font-size: 11px; font-weight: 800; padding: 2px 6px; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 5px; color: rgba(255,255,255,0.55); }

.tv2-side { border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tv2-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.tv2-tabs .tab { min-height: 40px; }
.tv2-pane { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tv2-pane[hidden] { display: none; }
.tv2-pane h3 { margin: 4px 0 0; }
.tv2-pane p { margin: 0; color: var(--text-2); font-size: 14px; }
.tv2-chat-state { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.tv2-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--unk); }
.tv2-chat-empty { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; padding: 22px 10px; border-radius: 14px; border: 1px dashed rgba(227,183,74,0.28); background: radial-gradient(ellipse at 50% 0%, rgba(227,183,74,0.08), transparent 70%); min-height: 220px; }
.tv2-chat-empty > svg { width: 34px; height: 34px; color: var(--gold); }
.tv2-chat-input { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.35); color: var(--text-3); font-size: 13px; }
.tv2-chat-input b { width: 38px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(227,183,74,0.25); color: rgba(0,0,0,0.6); }
.tv2-chat-input svg { width: 16px; height: 16px; color: rgba(255,255,255,0.4); }
.tv2-facts, .tv2-rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tv2-facts li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 13px; }
.tv2-facts span { color: var(--text-3); }
.tv2-facts b { text-align: right; }
.tv2-rel a { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); color: inherit; text-decoration: none; min-height: 52px; }
.tv2-rel a:hover { border-color: var(--line-strong); }
.tv2-rel svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.tv2-rel b, .tv2-rel small { display: block; }
.tv2-rel small { color: var(--text-3); font-size: 12px; }

.tv2-sec { min-width: 0; border-radius: 18px; padding: 14px 16px 16px; background: var(--glass); border: 1px solid rgba(227,183,74,0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tv2-sec-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tv2-sec-h h2 { margin: 0; font-size: 22px; font-family: var(--display); color: var(--gold-hi); display: flex; align-items: center; gap: 8px; }
.tv2-sec-h h2 svg { width: 20px; height: 20px; color: var(--gold); }
.tv2-live-ic svg { color: var(--live) !important; }
.tv2-sub { font-size: 13px; color: var(--text-2); }
.tv2-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 260px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(227,183,74,0.35) transparent; -webkit-mask-image: none; }
.tv2-rail.tv2-more { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.tv2-rail > * { scroll-snap-align: start; }
.tv2-card { display: grid; gap: 4px; align-content: start; padding: 8px 8px 12px; border-radius: 14px; border: 1px solid rgba(227,183,74,0.24); background: linear-gradient(180deg, rgba(22,20,30,0.9), rgba(8,8,12,0.92)); color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,230,160,0.08); transition: transform .18s ease, border-color .18s ease; }
.tv2-card:hover, .tv2-card:focus-visible { transform: translateY(-2px); border-color: var(--line-strong); }
.tv2-card b { font-size: 15px; margin-top: 6px; }
.tv2-card small { font-size: 12px; color: var(--text-3); }
.tv2-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.6)), var(--art, none) center / cover, linear-gradient(135deg, hsl(var(--h, 260) 55% 30%), hsl(calc(var(--h, 260) + 50) 60% 12%)); }
.tv2-track-card .tv2-thumb { background: radial-gradient(circle at 30% 30%, hsl(var(--h) 70% 45% / .55), transparent 60%), linear-gradient(135deg, hsl(var(--h) 55% 24%), hsl(calc(var(--h) + 60) 60% 10%)); }
.tv2-pill { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.72); color: #e8e2d4; }
.tv2-pill-live { background: var(--live); color: #fff; }
.tv2-count, .tv2-dur { position: absolute; bottom: 8px; font-size: 11px; padding: 2px 7px; border-radius: 5px; background: rgba(0,0,0,0.7); }
.tv2-count { left: 8px; } .tv2-dur { right: 8px; }
.tv2-play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.35); }
.tv2-play svg { width: 18px; height: 18px; }
.tv2-thumb-t { position: absolute; left: 10px; right: 10px; bottom: 10px; font-family: var(--display); font-size: 15px; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 56px; }
.tv2-empty-card { cursor: default; border-style: dashed; }
.tv2-empty-card:hover { transform: none; }
.tv2-empty-card .tv2-thumb { filter: saturate(0.6) brightness(0.7); }
.tv2-chan { grid-auto-columns: minmax(132px, 1fr); }
.tv2-ch { position: relative; min-height: 112px; display: grid; align-content: end; gap: 1px; padding: 10px 12px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(227,183,74,0.24); background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.85) 78%), linear-gradient(135deg, hsl(var(--h) 60% 32% / .55), transparent 70%), var(--art) center / cover; text-align: center; }
.tv2-ch b { font-size: 14px; }
.tv2-ch small { font-size: 11px; color: var(--text-2); }
.tv2-ch em { font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
.tv2-split { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.tv2-split > div { display: grid; gap: 16px; min-width: 0; }
.tv2-cw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tv2-cw-list li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; }
.tv2-cw-th { width: 64px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.1)), url('/tv-art/skyline.jpg') center / cover; }
.tv2-cw-th svg { width: 20px; height: 20px; color: var(--gold-hi); }
.tv2-cw-t b, .tv2-cw-t small { display: block; }
.tv2-cw-t small { color: var(--text-3); font-size: 12px; }
.tv2-empty { padding: 18px; border-radius: 12px; border: 1px dashed rgba(227,183,74,0.28); color: var(--text-2); font-size: 14px; background: linear-gradient(0deg, rgba(5,5,10,0.82), rgba(5,5,10,0.6)), url('/tv-art/lounge.jpg') center / cover; min-height: 120px; display: grid; align-content: end; }
.tv2-foot { margin: 0; font-size: 11px; color: var(--text-3); text-align: center; }

@media (max-width: 1280px) {
  .tv2-top, .tv2-split { grid-template-columns: 1fr; }
  .tv2-side { min-height: 0; }
  .tv2-chat-empty { min-height: 150px; }
}
@media (max-width: 900px) {
  .tv2-stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; min-height: 0; }
  .tv2-mark { grid-row: 2; margin: 14px auto 6px; }
  .tv2-cap { grid-row: 3; }
  .tv2-bar { grid-row: 4; }
  .tv2-next { grid-column: 1; grid-row: 5; margin: 0 12px 12px; }
}
@media (max-width: 600px) {
  .tv2 { gap: 14px; }
  .tv2-stage { border-radius: 16px; }
  .tv2-stage-art { background-position: 78% center; }
  .tv2-stage-art::after { background: linear-gradient(180deg, rgba(3,3,8,0.25) 0%, rgba(3,3,8,0.55) 40%, rgba(3,3,8,0.95) 100%); }
  .tv2-mark { padding: 12px 16px; }
  .tv2-mark-w { font-size: 34px; } .tv2-mark b { font-size: 22px; }
  .tv2-cap { padding: 8px 16px 6px; }
  .tv2-lead { font-size: 15px; }
  .tv2-ctas .btn { flex: 1 1 100%; min-height: 48px; justify-content: center; }
  .tv2-bar { padding: 8px 14px 12px; }
  .tv2-badges { display: none; }
  .tv2-sec { padding: 12px 12px 14px; border-radius: 16px; }
  .tv2-sec-h h2 { font-size: 19px; }
  .tv2-rail { grid-auto-columns: 78%; margin: 0 -12px; padding: 0 12px 6px; scroll-padding-inline: 12px; }
  .tv2-chan { grid-auto-columns: 42%; }
  .tv2-tabs .tab { flex: 1; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .tv2-card { transition: none; } .tv2-card:hover { transform: none; } }
.tv2-live-empty { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; border-radius: 14px; overflow: hidden; border: 1px dashed rgba(227,183,74,0.3); background: rgba(6,6,10,0.7); }
.tv2-live-empty-art { position: relative; min-height: 190px; background: linear-gradient(90deg, rgba(0,0,0,0) 55%, rgba(6,6,10,0.95)), var(--art) center 35% / cover; filter: saturate(0.75); }
.tv2-live-empty-t { display: grid; align-content: center; gap: 8px; padding: 18px 22px; }
.tv2-live-empty-t b { font-size: 20px; font-family: var(--display); color: #fff; }
.tv2-live-empty-t small { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.tv2-live-empty-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tv2-ch { min-height: 132px; }
@media (max-width: 600px) {
  .tv2-live-empty { grid-template-columns: 1fr; }
  .tv2-live-empty-art { min-height: 150px; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(6,6,10,0.95)), var(--art) center 35% / cover; }
  .tv2-live-empty-t { padding: 4px 14px 16px; }
  .tv2-live-empty-a .btn { flex: 1; min-height: 44px; justify-content: center; }
}
@media (max-width: 900px) {
  .tv2-stage-art::after { background: linear-gradient(180deg, rgba(3,3,8,0.2) 0%, rgba(3,3,8,0.5) 35%, rgba(3,3,8,0.93) 62%, rgba(3,3,8,0.96) 100%); }
  .tv2-cap h1, .tv2-lead { text-shadow: 0 2px 12px rgba(0,0,0,0.9); }
}
/* ══ WOW Music + WOW Radio — Current-Gen (mockups 14, 13, 08) ═══════════════
   mu2- = Music room + shared media pieces · ra2- = Radio room.
   Black-and-gold atmospheric glass, rounded dimensional panels. */
body[data-room="music"]::before, body[data-room="radio"]::before { background: radial-gradient(ellipse at 70% 0%, rgba(155,107,255,.20), transparent 55%), radial-gradient(ellipse at 15% 100%, rgba(227,183,74,.20), transparent 60%), linear-gradient(180deg, rgba(6,5,16,.35), rgba(3,3,8,.82)); }
body.mu2-docked #playerbar { display: none !important; }
body.mu2-docked main { padding-bottom: 116px; }
.mu2-page { --mu2-glass: linear-gradient(160deg, rgba(30,24,16,.78), rgba(8,8,12,.88)); --mu2-edge: rgba(232,193,90,.26); display: grid; grid-template-columns: 208px minmax(0, 1fr) 300px; gap: 14px; align-items: start; max-width: 100%; }
.mu2-page *, .mu2-page *::before { box-sizing: border-box; }
.mu2-panel, .mu2-rail, .mu2-np, .mu2-hero, .mu2-tile, .ra2-stage, .ra2-upnext, .ra2-station, .mu2-honest {
  background: var(--mu2-glass); border: 1px solid var(--mu2-edge); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(246,215,126,.12), 0 18px 44px rgba(0,0,0,.5); backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); }
.mu2-panel { padding: 16px 18px; min-width: 0; }
.mu2-panel h3 { margin: 0 0 6px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.mu2-panel h3 svg { width: 18px; height: 18px; color: var(--gold); }
.mu2-panel p { margin: 0 0 10px; color: var(--text-2); font-size: 13px; }
.mu2-note { color: var(--text-3); font-size: 12px; margin: 10px 0 0; }
.mu2-credit { position: absolute; right: 12px; bottom: 6px; margin: 0; font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.9); z-index: 2; }
.mu2-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--mu2-edge, rgba(232,193,90,.26)); font-size: 11px; color: var(--text-2); background: rgba(0,0,0,.35); white-space: nowrap; }

/* buttons */
.mu2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 700; font-size: 14px; border: 1px solid transparent; white-space: nowrap; }
.mu2-btn svg { width: 16px; height: 16px; }
.mu2-btn.gold { background: var(--gold-grad); color: #1a1206; box-shadow: 0 8px 26px rgba(227,183,74,.32), inset 0 1px 0 rgba(255,255,255,.4); }
.mu2-btn.line { border-color: var(--gold); color: var(--gold-hi); background: rgba(0,0,0,.35); }
.mu2-btn.sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.mu2-btn.block { width: 100%; }
.mu2-btn[disabled] { opacity: .45; cursor: not-allowed; }
.mu2-ib { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.35); color: var(--text); flex: none; }
.mu2-ib svg { width: 18px; height: 18px; }
.mu2-ib.sm { width: 34px; height: 34px; }
.mu2-ib[disabled] { opacity: .35; }
.mu2-play { width: 58px; height: 58px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; border: 2px solid var(--gold); color: var(--gold-hi); background: radial-gradient(circle at 50% 35%, rgba(246,215,126,.22), rgba(0,0,0,.6)); box-shadow: 0 0 26px rgba(227,183,74,.35); }
.mu2-play svg { width: 24px; height: 24px; }
.mu2-play.sm { width: 46px; height: 46px; }
.mu2-play[disabled] { opacity: .4; }

/* covers (no artwork field exists — generated colour field + real title) */
.mu2-cover { --h: 40; position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; display: grid; place-items: end start; padding: 10px;
  background: radial-gradient(circle at 75% 20%, hsla(calc(var(--h) + 40), 90%, 65%, .85), transparent 55%), radial-gradient(circle at 15% 90%, hsla(var(--h), 85%, 45%, .9), transparent 60%), linear-gradient(160deg, hsl(calc(var(--h) + 200), 50%, 14%), #07060c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mu2-cover span { font-family: var(--display); font-size: 15px; line-height: 1.1; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); overflow-wrap: anywhere; }
.mu2-cover.lg span { font-size: 22px; }
.mu2-cover.sm { width: 64px; flex: none; padding: 6px; } .mu2-cover.sm span { font-size: 9px; }
.mu2-cover.xs { width: 44px; flex: none; padding: 4px; border-radius: 9px; } .mu2-cover.xs span { font-size: 7px; }
.mu2-cover.idle { place-items: center; background: rgba(0,0,0,.4); border: 1px solid var(--mu2-edge, rgba(232,193,90,.26)); color: var(--gold); }
.mu2-cover.idle svg { width: 20px; height: 20px; }

/* left music rail */
.mu2-rail { position: sticky; top: calc(var(--top-h) + 12px); padding: 14px 10px; max-height: calc(100vh - var(--top-h) - 130px); overflow-y: auto; scrollbar-width: thin; }
.mu2-brand { display: flex; gap: 10px; align-items: center; padding: 4px 8px 12px; }
.mu2-brand > svg { width: 30px; height: 30px; color: var(--gold); flex: none; }
.mu2-brand b { display: block; font-family: var(--display); font-size: 18px; letter-spacing: .04em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mu2-brand small { font-size: 10px; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; }
.mu2-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mu2-rail a { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 11px; color: var(--text-2); font-size: 14px; }
.mu2-rail a svg { width: 18px; height: 18px; flex: none; }
.mu2-rail a:hover { background: rgba(255,255,255,.05); color: var(--text); }
.mu2-rail a.on { background: var(--gold-grad); color: #1a1206; font-weight: 700; box-shadow: 0 6px 20px rgba(227,183,74,.3); }
.mu2-sep { height: 1px; margin: 8px 10px; background: var(--mu2-edge); }
.mu2-release-card { margin-top: 14px; padding: 14px; border-radius: 14px; background: linear-gradient(160deg, rgba(227,183,74,.16), rgba(0,0,0,.4)); border: 1px solid var(--mu2-edge); display: grid; gap: 6px; }
.mu2-release-card b { font-size: 14px; } .mu2-release-card small { color: var(--text-3); font-size: 11px; margin-bottom: 4px; }

/* main column */
.mu2-main, .ra2-main { min-width: 0; display: grid; gap: 14px; }
.mu2-hero { position: relative; overflow: hidden; min-height: 330px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: end; }
.mu2-hero-art { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.1); }
.mu2-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,3,8,.92) 0%, rgba(4,3,8,.55) 52%, rgba(4,3,8,.35) 70%, rgba(4,3,8,.82) 100%), linear-gradient(0deg, rgba(4,3,8,.85), transparent 55%); }
.mu2-hero-body { position: relative; padding: 30px 28px; min-width: 0; }
.mu2-hero h1 { margin: 0; font-family: var(--display); font-size: clamp(30px, 3.3vw, 50px); line-height: 1; letter-spacing: .02em; white-space: nowrap; display: flex; gap: 12px; align-items: center; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mu2-crown svg { width: .9em; height: .9em; color: var(--gold); display: block; }
.mu2-lead { margin: 12px 0 4px; font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.mu2-sub { margin: 0 0 18px; color: var(--text-2); font-size: 16px; }
.mu2-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.mu2-facts { position: relative; list-style: none; margin: 18px 18px 26px 0; padding: 16px; border-radius: 14px; background: rgba(0,0,0,.55); border: 1px solid var(--mu2-edge); display: grid; gap: 9px; font-size: 13px; color: var(--text-2); }
.mu2-facts li { display: flex; gap: 9px; align-items: center; }
.mu2-facts svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.mu2-facts-h { color: var(--gold-hi); font-weight: 800; letter-spacing: .06em; font-size: 12px; }

.mu2-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.mu2-tile { scroll-snap-align: start; }
.mu2-tile { display: flex; gap: 10px; align-items: center; padding: 12px; min-width: 0; border-radius: 16px; }
.mu2-tile:hover { border-color: var(--line-strong); }
.mu2-tile-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 70% 25%, hsla(calc(var(--h) + 40), 90%, 65%, .9), transparent 60%), linear-gradient(150deg, hsl(var(--h), 70%, 38%), hsl(calc(var(--h) + 220), 55%, 14%)); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.mu2-tile-ic svg { width: 20px; height: 20px; }
.mu2-tile b { display: block; font-size: 13px; }
.mu2-tile small { display: block; font-size: 11px; color: var(--text-3); line-height: 1.25; }

.mu2-sec-h { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 0 0 10px; }
.mu2-sec-h h2 { margin: 0; font-size: 20px; display: flex; gap: 8px; align-items: center; }
.mu2-sec-h h2 svg { width: 20px; height: 20px; color: var(--gold); }
.mu2-sec-h > span { color: var(--text-3); font-size: 12px; }
.mu2-rail-x { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.mu2-card { position: relative; scroll-snap-align: start; text-align: left; background: none; border: 0; padding: 0; display: grid; gap: 3px; min-width: 0; }
.mu2-card .mu2-cover { margin-bottom: 6px; transition: transform .2s; }
.mu2-card:hover .mu2-cover { transform: translateY(-3px); }
.mu2-card b { font-size: 14px; } .mu2-card > span:not(.mu2-card-play) { font-size: 12px; color: var(--text-2); } .mu2-card small { font-size: 11px; color: var(--text-3); }
.mu2-card-play { position: absolute; right: 10px; top: 118px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: #1a1206; box-shadow: 0 6px 18px rgba(0,0,0,.55); }
.mu2-card-play svg { width: 16px; height: 16px; }
.mu2-card.is-playing .mu2-cover, .mu2-mixcard.is-playing { box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(227,183,74,.4); }

.mu2-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mu2-mix { display: grid; gap: 10px; }
.mu2-mixcard { display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.mu2-mixcard b { display: block; font-size: 14px; } .mu2-mixcard small { color: var(--text-3); font-size: 12px; }
.mu2-mixart { --h: 40; width: 64px; height: 64px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 70% 25%, hsla(calc(var(--h) + 40), 90%, 65%, .9), transparent 60%), linear-gradient(150deg, hsl(var(--h), 70%, 38%), #0a0812); }
.mu2-mixart svg { width: 24px; height: 24px; }
.mu2-artists { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.mu2-artist { scroll-snap-align: start; text-align: center; display: grid; gap: 2px; justify-items: center; }
.mu2-ring { --h: 40; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; padding: 3px; background: conic-gradient(from 200deg, #9b6bff, var(--gold), #4fd1ff, #9b6bff); box-shadow: 0 0 22px rgba(155,107,255,.35); }
.mu2-ring span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 30px; color: #fff; background: radial-gradient(circle at 50% 30%, hsl(var(--h), 55%, 34%), #0a0812); }
.mu2-artist b { font-size: 13px; margin-top: 6px; } .mu2-artist small { font-size: 11px; color: var(--text-3); }

.mu2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mu2-row { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.05); min-width: 0; }
.mu2-row:has(.is-playing) { border-color: var(--gold); background: rgba(227,183,74,.08); }
.mu2-n { width: 18px; text-align: right; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.mu2-rowplay { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--gold); background: rgba(0,0,0,.4); color: var(--gold-hi); display: grid; place-items: center; }
.mu2-rowplay svg { width: 14px; height: 14px; }
.mu2-row-t { flex: 1; min-width: 0; } .mu2-row-t b, .mu2-row-t span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu2-row-t b { font-size: 14px; } .mu2-row-t span { font-size: 12px; color: var(--text-3); }
.mu2-dur { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; }

.mu2-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.mu2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mu2-steps li { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 14px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.07); }
.mu2-steps b { color: var(--gold-hi); font-size: 14px; } .mu2-steps span { font-size: 12px; color: var(--text-2); } .mu2-steps small { font-size: 11px; color: var(--text-3); }
.mu2-steps .mu2-btn { justify-self: start; margin-top: 4px; }
.mu2-honest { display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
.mu2-honest-ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; color: var(--gold); background: rgba(227,183,74,.1); border: 1px solid var(--mu2-edge, rgba(232,193,90,.26)); }
.mu2-honest-ic svg { width: 22px; height: 22px; }
.mu2-honest b { font-size: 15px; } .mu2-honest p { margin: 4px 0 0; color: var(--text-2); font-size: 13px; }

/* Now Playing card */
.mu2-side, .ra2-side { position: sticky; top: calc(var(--top-h) + 12px); display: grid; gap: 14px; min-width: 0; }
.mu2-np { padding: 16px; display: grid; gap: 12px; }
.mu2-np h3 { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--text-2); }
.mu2-np-top { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mu2-np-top .mu2-cover.lg { width: 100%; max-width: 268px; }
.mu2-np-meta b { display: block; font-size: 19px; } .mu2-np-meta span { display: block; color: var(--text-2); }
.mu2-np-meta small { display: block; font-size: 12px; color: var(--text-3); margin-top: 4px; }
.mu2-rights { color: var(--gold) !important; }
.mu2-np-idle { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 8px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px dashed var(--mu2-edge); }
.mu2-np-idle svg { width: 34px; height: 34px; color: var(--gold); } .mu2-np-idle p { margin: 0; font-size: 12px; color: var(--text-3); }
.mu2-wave { width: 100%; height: 54px; display: block; }
.mu2-time { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mu2-time input { flex: 1; accent-color: var(--gold); min-width: 0; }
.mu2-ctl { display: flex; gap: 18px; justify-content: center; align-items: center; }
.mu2-owner { margin: 0; font-size: 11px; color: var(--text-3); }

/* persistent dock (bottom player bar) */
#mu2-dock { position: fixed; z-index: 36; left: calc(var(--rail-w) + 16px); right: 16px; bottom: 12px; display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr) minmax(0, 220px) auto; gap: 16px; align-items: center; padding: 10px 16px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(26,20,12,.94), rgba(6,6,10,.96)); border: 1px solid var(--line-strong); box-shadow: 0 -6px 40px rgba(0,0,0,.55), 0 0 30px rgba(227,183,74,.12), inset 0 1px 0 rgba(246,215,126,.15); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.mu2-dock-id { display: flex; gap: 12px; align-items: center; min-width: 0; }
.mu2-dock-meta { min-width: 0; } .mu2-dock-meta b, .mu2-dock-meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu2-dock-meta b { font-size: 14px; } .mu2-dock-meta span { font-size: 12px; color: var(--text-3); }
.mu2-dock-mid { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.mu2-dock-ctl { display: flex; gap: 16px; align-items: center; }
.mu2-dock-prog { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 520px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mu2-dock-prog i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.mu2-dock-prog em { display: block; height: 100%; width: 0; background: var(--gold-grad); box-shadow: 0 0 10px rgba(227,183,74,.6); }
.mu2-dock-wave { width: 100%; height: 36px; display: block; }
@media (max-width: 760px) { #mu2-dock { left: 50%; right: auto; transform: translateX(-50%); } }

/* ── WOW Radio ── */
.ra2-page { grid-template-columns: minmax(0, 1fr) 320px; }
.ra2-stage { position: relative; overflow: hidden; padding: 20px 22px 18px; }
.ra2-stage-art { position: absolute; inset: 0; background-size: cover; background-position: center 40%; opacity: .9; }
.ra2-stage-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,3,8,.88), rgba(4,3,8,.55) 55%, rgba(4,3,8,.8)), linear-gradient(0deg, rgba(4,3,8,.92), rgba(4,3,8,.2) 60%); }
.ra2-head { position: relative; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.ra2-mic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 2px solid var(--gold); box-shadow: 0 0 22px rgba(227,183,74,.35); flex: none; }
.ra2-mic svg { width: 26px; height: 26px; }
.ra2-head h1 { margin: 0; font-family: var(--display); font-size: clamp(28px, 3.6vw, 44px); line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ra2-head p { margin: 4px 0 0; font-size: 12px; letter-spacing: .08em; color: var(--text-2); }
.ra2-src { margin-left: auto; font-size: 11px; color: var(--text-3); padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1); }
.ra2-stage-grid { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.ra2-poster { position: relative; min-height: 320px; border-radius: 16px; background-size: cover; background-position: center; border: 1px solid var(--line-strong); box-shadow: 0 0 34px rgba(227,183,74,.22), inset 0 0 0 1px rgba(255,255,255,.06); display: grid; align-content: space-between; padding: 18px; overflow: hidden; }
.ra2-poster-mark { display: grid; gap: 4px; justify-items: start; }
.ra2-poster-mark svg { width: 34px; height: 34px; color: var(--gold); }
.ra2-poster-mark b { font-family: var(--display); font-size: 26px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ra2-poster-mark small { font-size: 11px; letter-spacing: .14em; color: var(--text); }
.ra2-poster-foot { display: grid; gap: 2px; padding-bottom: 12px; } .ra2-poster-foot small { font-size: 11px; color: var(--text-3); } .ra2-poster-foot b { font-size: 20px; } .ra2-poster-foot span { font-size: 12px; color: var(--text-2); }
.ra2-now { min-width: 0; display: grid; gap: 8px; align-content: start; }
.ra2-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ra2-onair, .ra2-ready, .ra2-paused, .ra2-nohost { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 6px 12px; border-radius: 8px; }
.ra2-onair { color: #fff; background: rgba(229,72,77,.22); border: 1px solid var(--live); }
.ra2-onair i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px var(--live); animation: ra2-pulse 1.4s infinite; }
@keyframes ra2-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ra2-onair i { animation: none; } }
.ra2-ready, .ra2-paused { color: var(--gold-hi); background: rgba(227,183,74,.12); border: 1px solid var(--mu2-edge); }
.ra2-nohost { color: var(--text-3); font-weight: 600; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1); }
.ra2-show { margin: 6px 0 0; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.05; font-weight: 800; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ra2-with { margin: 0; font-size: 17px; color: var(--text); }
.ra2-desc { margin: 0; color: var(--text-2); font-size: 14px; max-width: 520px; }
.ra2-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ra2-console { margin-top: 8px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: rgba(0,0,0,.55); border: 1px solid var(--mu2-edge); }
.ra2-console-meta { flex: 1 1 160px; min-width: 0; } .ra2-console-meta small { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .08em; } .ra2-console-meta b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ra2-console-meta span { font-size: 12px; color: var(--text-2); }
.ra2-console-ctl { display: flex; gap: 14px; align-items: center; }
.ra2-console-time { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ra2-wave { width: 100%; height: 64px; display: block; }
.ra2-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); display: inline-block; }
.ra2-stations { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ra2-station { display: flex; gap: 12px; align-items: center; padding: 14px; flex-wrap: wrap; }
.ra2-station > div { flex: 1 1 120px; min-width: 0; } .ra2-station b { display: block; font-size: 14px; } .ra2-station small { color: var(--text-3); font-size: 12px; }
.ra2-station.on { border-color: var(--gold); box-shadow: 0 0 28px rgba(227,183,74,.22), inset 0 1px 0 rgba(246,215,126,.2); }
.ra2-station.ghost { border-style: dashed; opacity: .85; }
.ra2-st-ic { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--mu2-edge); background: radial-gradient(circle, rgba(227,183,74,.16), rgba(0,0,0,.4)); }
.ra2-st-ic svg { width: 24px; height: 24px; }
.ra2-who { display: inline-flex; gap: 6px; align-items: center; margin-right: 6px; color: var(--text); }
.ra2-who i { --h: 40; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 12px; background: radial-gradient(circle at 50% 30%, hsl(var(--h), 55%, 38%), #0a0812); box-shadow: 0 0 0 2px var(--gold); }
.ra2-upnext { padding: 16px; }
.ra2-next { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ra2-next li { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); }
.ra2-next li:first-child { border-color: var(--gold); }
.ra2-next li > div { flex: 1; min-width: 0; } .ra2-next b, .ra2-next span:not(.ra2-pos) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra2-next b { font-size: 13px; } .ra2-next li > div span { font-size: 11px; color: var(--text-3); }
.ra2-pos { width: 22px; font-size: 11px; color: var(--gold); text-align: center; flex: none; }

/* ── responsive: iPad / phone ── */
@media (max-width: 1360px) {
  .mu2-page:not(.ra2-page) { grid-template-columns: 190px minmax(0, 1fr) 270px; }
  .mu2-hero { grid-template-columns: 1fr; } .mu2-facts { margin: 0 18px 26px; }
  .mu2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .mu2-page:not(.ra2-page) { grid-template-columns: minmax(0, 1fr) 280px; }
  .mu2-rail { grid-column: 1 / -1; position: static; max-height: none; padding: 8px; display: flex; gap: 10px; align-items: center; overflow-x: auto; scroll-snap-type: x proximity; }
  .mu2-rail .mu2-brand, .mu2-rail .mu2-release-card, .mu2-sep { display: none; }
  .mu2-rail ol { display: flex; gap: 6px; }
  .mu2-rail li { scroll-snap-align: start; } .mu2-rail a { white-space: nowrap; padding: 8px 12px; }
  .mu2-split { grid-template-columns: 1fr; }
  .ra2-page { grid-template-columns: minmax(0, 1fr) 280px; }
  .ra2-stage-grid { grid-template-columns: 1fr; } .ra2-poster { min-height: 190px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .ra2-poster-foot { text-align: right; padding-bottom: 14px; }
  #mu2-dock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; } .mu2-dock-wave { display: none; }
}
@media (max-width: 900px) {
  .mu2-page:not(.ra2-page), .ra2-page { grid-template-columns: minmax(0, 1fr); }
  .mu2-side, .ra2-side { position: static; }
  .mu2-side { display: none; } /* the dock carries playback on narrow glass */
  .ra2-side .mu2-np { display: none; }
}
@media (max-width: 760px) {
  body.mu2-docked main { padding-bottom: 190px; }
  #mu2-dock { bottom: calc(70px + env(safe-area-inset-bottom)); width: calc(100% - 16px); grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; border-radius: 16px; }
  .mu2-dock-wave, #mu2-dock > a { display: none; }
  .mu2-dock-mid { display: contents; }
  .mu2-dock-prog { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .mu2-dock-ctl { gap: 8px; } .mu2-dock-ctl .mu2-ib { width: 36px; height: 36px; }
  .mu2-hero { min-height: 0; } .mu2-hero-body { padding: 22px 18px 8px; }
  .mu2-lead { font-size: 14px; } .mu2-sub { font-size: 14px; }
  .mu2-cta .mu2-btn { flex: 1 1 140px; }
  .mu2-tiles { grid-auto-columns: 74%; }
  .mu2-hero h1 { white-space: normal; }
  .ra2-poster-foot { text-align: left; }
  .mu2-rail-x { grid-auto-columns: 46%; }
  .mu2-card-play { top: auto; bottom: 74px; }
  .mu2-steps { grid-template-columns: 1fr; }
  .mu2-row .mu2-chip { display: none; }
  .ra2-stage { padding: 16px 14px; }
  .ra2-src { margin-left: 0; }
  .ra2-console { gap: 10px; } .ra2-console-ctl { margin-left: auto; }
  .ra2-poster { min-height: 140px; }
}
/* ══ WOW Lounge — social gravity (plates 09/11/15) · public/lounge.js ══ */
.lg2 { --lg2-glass: linear-gradient(180deg, rgba(28, 24, 18, 0.72), rgba(10, 10, 12, 0.86)); --lg2-r: 18px; display: grid; gap: 16px; min-width: 0; }
.lg2 h1, .lg2 h2, .lg2 h3, .lg2 h4 { margin: 0; }
.lg2-muted { color: var(--text-3); font-size: 13px; margin: 0; }
.lg2-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: end; min-height: 300px; padding: 28px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 220, 140, 0.18); isolation: isolate; }
.lg2-hero-bg, .lg2-hero-room { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; }
.lg2-hero-room { z-index: -1; opacity: 0.85; mix-blend-mode: screen; background-position: center bottom; }
.lg2-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.55) 45%, rgba(5, 5, 5, 0.15) 100%), linear-gradient(0deg, rgba(5, 5, 5, 0.85), transparent 55%); }
.lg2-hero h1 { font-family: var(--display); font-size: clamp(34px, 5.2vw, 64px); line-height: 1; letter-spacing: 0.02em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(227, 183, 74, 0.35)); }
.lg2-lead { font-size: clamp(16px, 1.8vw, 21px); margin: 10px 0 4px; color: var(--text); }
.lg2-sub { color: var(--text-2); margin: 0 0 18px; }
.lg2-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.lg2-hero-cta .btn { min-height: 46px; padding-inline: 22px; border-radius: 12px; }
.lg2-pulse { background: rgba(8, 8, 10, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.lg2-pulse h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 8px; }
.lg2-pulse ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lg2-pulse li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.lg2-pulse li b { font-size: 24px; color: var(--gold-hi); grid-row: span 2; min-width: 34px; }
.lg2-pulse li small { color: var(--text-3); font-size: 11px; }
.lg2-credit { display: block; margin-top: 10px; font-size: 11px; color: var(--text-3); }
.lg2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.lg2-main { display: grid; gap: 16px; min-width: 0; }
.lg2-side { display: grid; gap: 14px; position: sticky; top: calc(var(--top-h) + 12px); min-width: 0; }
.lg2-sec, .lg2-panel { min-width: 0; }
.lg2-sec-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.lg2-sec-h h2 { font-size: 22px; }
.lg2-sec-h h3 { font-size: 17px; color: var(--gold-hi); }
.lg2-arrows { margin-left: auto; display: flex; gap: 6px; }
.lg2-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(20, 18, 14, 0.8); color: var(--gold-hi); font-size: 20px; cursor: pointer; }
.lg2-stories { display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.lg2-story { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 236px; padding: 14px; border-radius: var(--lg2-r); border: 1px solid var(--line); color: var(--text); text-align: left; font: inherit; cursor: pointer; overflow: hidden; isolation: isolate; text-decoration: none;
  background: radial-gradient(120% 80% at 30% 10%, hsl(var(--h, 42) 70% 38% / 0.75), transparent 60%), linear-gradient(180deg, rgba(24, 20, 14, 0.4), rgba(6, 6, 8, 0.95)), url('/lounge-art/city-glass.jpg') center / cover; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5); transition: transform 0.18s, border-color 0.18s; }
.lg2-story:hover, .lg2-story:focus-visible { transform: translateY(-3px); border-color: var(--line-strong); }
.lg2-story.has-img { background: #0b0b0c; }
.lg2-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0.9; }
.lg2-story.has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(5, 5, 5, 0.95)); }
.lg2-story b { font-size: 15px; line-height: 1.25; }
.lg2-story small { color: var(--text-2); font-size: 12px; }
.lg2-story.is-live { border-color: rgba(229, 72, 77, 0.6); }
.lg2-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--line-strong); color: var(--gold-hi); }
.lg2-badge svg { width: 12px; height: 12px; }
.lg2-badge.live { background: var(--live); border-color: transparent; color: #fff; }
.lg2-composer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--lg2-r); background: var(--lg2-glass); border: 1px solid var(--line); }
.lg2-compose-field { display: flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.45); color: var(--text-2); font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.lg2-compose-field:hover { border-color: var(--line-strong); color: var(--text); }
.lg2-compose-kinds { grid-column: 2; display: flex; gap: 16px; flex-wrap: wrap; color: var(--text-3); font-size: 12.5px; }
.lg2-compose-kinds span { display: inline-flex; gap: 5px; align-items: center; }
.lg2-compose-kinds svg { width: 15px; height: 15px; color: var(--gold); }
.lg2-av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 800; font-size: 17px; color: #fff; background: radial-gradient(circle at 30% 25%, hsl(var(--h, 42) 70% 60%), hsl(var(--h, 42) 60% 26%)); box-shadow: 0 0 0 2px rgba(227, 183, 74, 0.55); }
.lg2-av.is-guest, .lg2-av.lg2-room { background: radial-gradient(circle at 30% 25%, #3a2f17, #0d0b07); color: var(--gold-hi); }
.lg2-av svg { width: 20px; height: 20px; }
.lg2-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 16px; background: rgba(12, 11, 9, 0.8); border: 1px solid var(--line); scroll-snap-type: x proximity; }
.lg2-tabs::-webkit-scrollbar { display: none; }
.lg2-tab { flex: none; scroll-snap-align: start; min-height: 42px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; }
.lg2-tab[aria-selected="true"] { background: var(--gold-grad); color: #160f02; border-color: transparent; box-shadow: 0 4px 18px rgba(227, 183, 74, 0.35); }
.lg2-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.lg2-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--lg2-r); background: var(--lg2-glass); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 220, 140, 0.08); min-width: 0; }
.lg2-card header { display: flex; gap: 10px; align-items: center; min-width: 0; }
.lg2-card header .grow { min-width: 0; }
.lg2-card header b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg2-card header small { display: block; color: var(--text-3); font-size: 12px; }
.lg2-card h4 { font-size: 16px; line-height: 1.3; }
.lg2-body { margin: 0; color: var(--text-2); font-size: 14px; overflow-wrap: anywhere; }
.lg2-post .lg2-body { color: var(--text); font-size: 15px; white-space: pre-wrap; }
.lg2-type { margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--gold); }
.lg2-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lg2-tags span { font-size: 12px; color: var(--gold-hi); }
.lg2-card footer { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg2-card footer .btn { min-height: 40px; }
.lg2-note { font-size: 11.5px; color: var(--text-3); }
.lg2-disc { border-style: dashed; }
.lg2-media { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #0b0b0c; }
.lg2-photo { aspect-ratio: 4 / 3; background: #f4f1ea; }
.lg2-photo img { width: 100%; height: 100%; object-fit: contain; }
.lg2-livebox { background: linear-gradient(180deg, rgba(5, 5, 5, 0.1), rgba(5, 5, 5, 0.8)), url('/lounge-art/city-glass.jpg') center / cover; }
.lg2-wave { display: flex; align-items: center; justify-content: center; gap: 5px; background: radial-gradient(90% 90% at 50% 50%, hsl(var(--h) 60% 28% / 0.9), #0b0b0c); }
.lg2-wave i { width: 6px; border-radius: 3px; background: var(--gold-grad); height: 30%; }
.lg2-wave i:nth-child(3n) { height: 62%; } .lg2-wave i:nth-child(4n) { height: 44%; } .lg2-wave i:nth-child(5n) { height: 78%; }
.lg2-disc-h { margin-top: 18px; }
.lg2-empty { position: relative; display: grid; justify-items: center; text-align: center; gap: 10px; padding: 36px 22px; border-radius: 22px; border: 1px solid var(--line-strong); background-size: cover; background-position: center; box-shadow: var(--shadow); }
.lg2-empty h3 { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); color: var(--gold-hi); }
.lg2-empty p { max-width: 560px; margin: 0; color: var(--text-2); }
.lg2-empty-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line-strong); color: var(--gold-hi); }
.lg2-empty-mark svg { width: 26px; height: 26px; }
.lg2-empty-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.lg2-empty-cta .btn { min-height: 46px; }
.lg2-panel-empty { display: grid; gap: 12px; padding: 20px; border-radius: var(--lg2-r); background: var(--lg2-glass); border: 1px solid var(--line); }
.lg2-panel-empty h3 { font-size: 20px; color: var(--gold-hi); }
.lg2-panel-empty p { margin: 0; color: var(--text-2); }
.lg2-panel-empty .btn { justify-self: start; }
.lg2-box { padding: 14px; border-radius: var(--lg2-r); background: var(--lg2-glass); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); display: grid; gap: 10px; min-width: 0; }
.lg2-box-h { display: flex; align-items: center; gap: 8px; }
.lg2-box-h h3 { font-size: 16px; display: inline-flex; gap: 8px; align-items: center; }
.lg2-box-h h3 svg { width: 17px; height: 17px; color: var(--gold); }
.lg2-box-h a { margin-left: auto; font-size: 12.5px; color: var(--gold); }
.lg2-rooms, .lg2-people, .lg2-events, .lg2-qa { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lg2-room-row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--text); text-decoration: none; }
.lg2-room-row:hover { border-color: var(--line-strong); }
.lg2-room-art { position: relative; flex: none; width: 84px; height: 60px; border-radius: 10px; background: linear-gradient(180deg, hsl(var(--h) 60% 30% / 0.5), rgba(0, 0, 0, 0.6)), url('/lounge-art/city-glass.jpg') center / cover; }
.lg2-room-art .lg2-badge { top: 6px; left: 6px; font-size: 9.5px; padding: 2px 6px; }
.lg2-room-row .grow, .lg2-people .grow, .lg2-events .grow { min-width: 0; display: grid; }
.lg2-room-row small, .lg2-people small, .lg2-events small { color: var(--text-3); font-size: 12px; }
.lg2-people li, .lg2-events li { display: flex; gap: 10px; align-items: center; }
.lg2-people .lg2-av { width: 38px; height: 38px; font-size: 15px; }
.lg2-date { flex: none; display: grid; place-items: center; width: 48px; height: 52px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, 0.4); line-height: 1.05; }
.lg2-date small { text-transform: uppercase; font-size: 10px; color: var(--gold); }
.lg2-date b { font-size: 20px; }
.lg2-trend { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.lg2-trend li::marker { color: var(--gold); font-weight: 700; }
.lg2-trend small { display: block; color: var(--text-3); }
.lg2-qa-btn { width: 100%; display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--text); font: inherit; cursor: pointer; }
.lg2-qa-btn:hover { border-color: var(--line-strong); }
.lg2-qa-btn svg { width: 17px; height: 17px; color: var(--gold); }
.lg2-fab { display: none; }
@media (max-width: 1180px) {
  .lg2-grid { grid-template-columns: minmax(0, 1fr); }
  .lg2-side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}
@media (max-width: 900px) {
  .lg2-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 22px; }
  .lg2-pulse ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg2-pulse li { grid-template-columns: 1fr; }
  .lg2-pulse li b { grid-row: auto; }
}
@media (max-width: 760px) {
  .lg2 { gap: 12px; }
  .lg2-hero { padding: 18px 16px; border-radius: 18px; }
  .lg2-sub { display: none; }
  .lg2-hero-cta .btn { flex: 1 1 140px; justify-content: center; }
  .lg2-pulse { padding: 10px 12px; }
  .lg2-pulse li b { font-size: 20px; }
  .lg2-arrows { display: none; }
  .lg2-stories { grid-auto-columns: 150px; margin-inline: -4px; padding-inline: 4px; }
  .lg2-story { min-height: 190px; }
  .lg2-compose-kinds { display: none; }
  .lg2-feed { grid-template-columns: minmax(0, 1fr); }
  .lg2-tab { padding: 0 16px; min-height: 44px; }
  .lg2-fab { display: inline-flex; align-items: center; gap: 6px; position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 31; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--gold-grad); color: #160f02; font: inherit; font-weight: 800; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 230, 160, 0.5); cursor: pointer; }
  .lg2-fab svg { width: 20px; height: 20px; }
}
.lg2-story.has-img::before { background: linear-gradient(180deg, transparent 20%, rgba(5, 5, 5, 0.75) 50%, rgba(5, 5, 5, 0.97)); }
.lg2-compose-field { padding-block: 8px; line-height: 1.3; border-radius: 24px; }
@media (max-width: 760px) {
  .lg2-pulse li span { font-size: 12.5px; line-height: 1.25; }
  .lg2-pulse h2 { font-size: 11px; }
  .lg2-compose-field { font-size: 14px; }
}

/* ══ Home command center (WOW World App 2 · APP Visual Canon) — prefix hm2- ══ */
.hm2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; min-width: 0; }
.hm2-main, .hm2-side { display: grid; gap: 16px; min-width: 0; }
.hm2-card { background: var(--glass); border: 1px solid rgba(227, 183, 74, 0.22); border-radius: 14px; padding: 16px; min-width: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hm2-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hm2-h h2 { margin: 0; font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-hi); font-weight: 600; }
.hm2-h a, .hm2-sub { font-size: 0.78rem; color: var(--text-3); text-decoration: none; }
.hm2-h a { color: var(--gold); }
.hm2-muted { color: var(--text-3); font-size: 0.85rem; margin: 0; list-style: none; }
.hm2-empty { margin: 0 0 4px; color: var(--text); font-weight: 600; }
.hm2-note { display: block; color: var(--text-3); font-size: 0.78rem; margin: 6px 0 10px; }

/* Hero over the night city */
.hm2-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; min-height: 340px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(227, 183, 74, 0.35); padding: 22px; box-shadow: var(--shadow); }
.hm2-hero-art { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(3,3,6,0.92) 0%, rgba(3,3,6,0.55) 40%, rgba(3,3,6,0.15) 70%, rgba(3,3,6,0.55) 100%), url("/home-art/spire-city.jpg") 70% 35% / auto 150% no-repeat, #05050a; }
.hm2-hero-body { position: relative; z-index: 1; align-self: center; max-width: 440px; }
.hm2-eyebrow { font-family: var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi); font-size: 0.9rem; }
.hm2-hero h1 { margin: 4px 0 10px; font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.05; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.hm2-hero p { margin: 0 0 16px; color: var(--text); font-size: 1rem; }
.hm2-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hm2-credit { display: block; margin-top: 14px; font-size: 0.75rem; color: rgba(243,239,230,0.78); }
.hm2-activity { position: relative; z-index: 1; align-self: stretch; background: rgba(6,6,10,0.78); border: 1px solid rgba(227,183,74,0.28); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hm2-activity h2 { margin: 0 0 10px; font-family: var(--display); font-size: 0.9rem; color: var(--gold-hi); letter-spacing: 0.06em; }
.hm2-activity ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.hm2-activity li > a, .hm2-activity li > div { display: flex; gap: 10px; align-items: flex-start; color: inherit; text-decoration: none; }
.hm2-activity b { display: block; font-size: 0.84rem; font-weight: 600; line-height: 1.25; }
.hm2-activity small { color: var(--text-3); font-size: 0.74rem; }
.hm2-act-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(227,183,74,0.35); color: var(--gold); }
.hm2-act-ic svg, .hm2-door-glyph svg, .hm2-pass-ic svg, .hm2-play-sw svg { width: 16px; height: 16px; }

/* Ecosystem doors */
.hm2-doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hm2-door { position: relative; display: flex; flex-direction: column; min-height: 196px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(227,183,74,0.25); background: #08080b; color: var(--text); text-decoration: none; text-align: left; padding: 0; font: inherit; cursor: pointer; transition: border-color .2s, transform .2s; }
.hm2-door:hover, .hm2-door:focus-visible { border-color: var(--line-strong); transform: translateY(-2px); }
.hm2-door-art { position: relative; height: 92px; display: grid; place-items: center; overflow: hidden; }
.hm2-door-art img { width: 100%; height: 100%; object-fit: cover; }
.hm2-door-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, #08080b 100%); }
.hm2-door-glyph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--gold-hi); background: radial-gradient(circle at 50% 60%, hsla(var(--h), 70%, 45%, 0.45), rgba(0,0,0,0) 65%), linear-gradient(160deg, hsla(var(--h), 40%, 14%, 1), #050507); }
.hm2-door-glyph svg { width: 34px; height: 34px; }
.hm2-door-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 12px; flex: 1; }
.hm2-door-body b { font-family: var(--display); font-size: 1rem; color: var(--gold-hi); }
.hm2-door-body small { color: var(--text-2); font-size: 0.74rem; }
.hm2-door-fact { margin-top: auto; padding-top: 6px; font-size: 0.78rem; color: var(--text); }
.hm2-door-owner { font-size: 0.66rem; color: var(--text-3); }

/* Journey + play */
.hm2-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hm2-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.hm2-rail:has(.hm2-empty), .hm2-rail:has(.hm2-muted) { display: block; }
.hm2-step { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; border: 1px solid rgba(227,183,74,0.22); background: linear-gradient(160deg, hsla(var(--h), 45%, 18%, 0.9), #07070a); }
.hm2-step b { font-family: var(--display); color: var(--gold-hi); }
.hm2-step small { color: var(--text-3); font-size: 0.74rem; }
.hm2-step-a { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.hm2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hm2-chips a { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(227,183,74,0.35); color: var(--gold-hi); text-decoration: none; font-size: 0.8rem; }
.hm2-play { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hm2-play a { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; padding: 6px; border-radius: 10px; }
.hm2-play a:hover { background: rgba(227,183,74,0.08); }
.hm2-play b { display: block; font-size: 0.86rem; }
.hm2-play small { color: var(--text-3); font-size: 0.74rem; }
.hm2-play-sw { flex: none; width: 46px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--gold-hi); background: linear-gradient(150deg, hsla(var(--h), 70%, 38%, 0.9), #07070a); border: 1px solid rgba(227,183,74,0.25); }

/* World status */
.hm2-status dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; }
.hm2-status dl > div { border-left: 1px solid rgba(227,183,74,0.2); padding-left: 12px; }
.hm2-status dt { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hm2-status dd { margin: 2px 0 0; font-size: 1.15rem; color: var(--gold-hi); font-variant-numeric: tabular-nums; }

/* Right column */
.hm2-live-hero { display: block; padding: 14px; border-radius: 10px; margin-bottom: 8px; color: var(--text); text-decoration: none; background: linear-gradient(160deg, rgba(229,72,77,0.22), rgba(6,6,10,0.9)); border: 1px solid rgba(229,72,77,0.4); }
.hm2-live-hero b { display: block; font-family: var(--display); color: var(--gold-hi); margin-top: 6px; }
.hm2-live-hero small, .hm2-live-row small { color: var(--text-3); font-size: 0.74rem; }
.hm2-live-badge { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--live); color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hm2-live-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; color: var(--text); text-decoration: none; font-size: 0.84rem; }
.hm2-live-row small { margin-left: auto; }
.hm2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; }
.hm2-live .btn, .hm2-event .btn, .hm2-radio .btn { margin-top: 10px; }
.hm2-wave { display: flex; align-items: center; gap: 3px; height: 54px; margin-bottom: 8px; }
.hm2-wave i { flex: 1; height: calc(14% + var(--d) * 0.8%); border-radius: 2px; background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); opacity: 0.85; }
.hm2-radio-t { display: block; font-family: var(--display); font-size: 1.2rem; color: var(--gold-hi); }
.hm2-radio small, .hm2-event small { display: block; color: var(--text-2); font-size: 0.78rem; }
.hm2-ev-t { display: block; font-family: var(--display); font-size: 1.1rem; color: var(--gold-hi); margin-bottom: 4px; }
.hm2-event { background: linear-gradient(180deg, rgba(6,6,10,0.95) 0%, rgba(6,6,10,0.8) 45%, rgba(6,6,10,0.92) 100%), url("/home-art/spire-tower.jpg") center 75% / cover no-repeat; }
.hm2-pass-id { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; border: 1px solid rgba(227,183,74,0.3); background: rgba(227,183,74,0.05); }
.hm2-pass-id b { display: block; overflow-wrap: anywhere; }
.hm2-pass-id small { display: block; color: var(--text-3); font-size: 0.74rem; }
.hm2-pass-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi); border: 1px solid var(--line-strong); }
.hm2-caps { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.hm2-caps li { display: flex; gap: 10px; align-items: center; color: var(--text-3); font-size: 0.82rem; }
.hm2-caps li svg { width: 16px; height: 16px; flex: none; }
.hm2-caps li.on { color: var(--text); }
.hm2-caps li.on svg { color: var(--ok); }
.hm2-caps small { display: block; color: var(--text-3); font-size: 0.72rem; }

/* iPad: right column drops beneath, in a row */
@media (max-width: 1180px) {
  .hm2 { display: flex; flex-direction: column; align-items: stretch; }
  .hm2-main, .hm2-side { display: contents; }
  .hm2-hero { order: 1; } .hm2-eco { order: 2; } .hm2-live { order: 3; } .hm2-split { order: 4; }
  .hm2-radio { order: 5; } .hm2-event { order: 6; } .hm2-pass { order: 7; } .hm2-status { order: 8; }
  .hm2-doors { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .hm2-doors { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 31%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .hm2-door { scroll-snap-align: start; }
}
@media (max-width: 900px) {
  .hm2-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hm2-hero-art { background: linear-gradient(90deg, rgba(3,3,6,0.9) 0%, rgba(3,3,6,0.5) 60%, rgba(3,3,6,0.3) 100%), url("/home-art/spire-city.jpg") 50% 35% / cover no-repeat; }
  .hm2-split { grid-template-columns: minmax(0, 1fr); }
  .hm2-status dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phone: the mirrored command center — same family, stacked */
@media (max-width: 600px) {
  .hm2, .hm2-main, .hm2-side { gap: 12px; }
  .hm2-side { grid-template-columns: minmax(0, 1fr); }
  .hm2-hero { padding: 18px 16px; border-radius: 14px; }
  .hm2-hero-art { background: linear-gradient(180deg, rgba(3,3,6,0.25) 0%, rgba(3,3,6,0.7) 55%, rgba(3,3,6,0.95) 100%), url("/home-art/spire-tower.jpg") 30% 0% / cover no-repeat; }
  .hm2-hero-body { padding-top: 190px; }
  .hm2-card { padding: 14px; border-radius: 12px; }
  .hm2-doors { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .hm2-door { scroll-snap-align: start; min-height: 184px; }
  .hm2-status dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── WOW Marketplace · Current-Gen (plate 10) — public/market.js ─────────── */
.mk2 { --mk2-glass: linear-gradient(180deg, rgba(28, 22, 12, 0.72), rgba(8, 7, 5, 0.82)); --mk2-edge: rgba(232, 193, 90, 0.28); --mk2-r: 18px; display: grid; gap: 18px; min-width: 0; }
.mk2 .eyebrow { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.mk2-hero { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--mk2-edge); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); grid-template-areas: "search search" "body card"; gap: 18px 28px; padding: 18px 26px 30px; min-height: 440px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 230, 160, 0.12); isolation: isolate; }
.mk2-hero-art { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: 60% 40%; filter: saturate(1.08) brightness(1.08); }
.mk2-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 4, 2, 0.86) 0%, rgba(5, 4, 2, 0.5) 38%, rgba(5, 4, 2, 0.05) 70%, rgba(5, 4, 2, 0.2) 100%), linear-gradient(180deg, rgba(5, 4, 2, 0.25) 0%, transparent 28%, transparent 62%, rgba(5, 4, 2, 0.8) 100%); }
@media (max-width: 900px) { .mk2-hero-art::after { background: linear-gradient(180deg, rgba(5, 4, 2, 0.45) 0%, rgba(5, 4, 2, 0.72) 45%, rgba(5, 4, 2, 0.9) 100%); } }
.mk2-search { grid-area: search; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; background: rgba(8, 7, 5, 0.66); border: 1px solid var(--mk2-edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 760px; min-width: 0; }
.mk2-search svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.mk2-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; height: 40px; outline: none; }
.mk2-search select { background: rgba(255, 255, 255, 0.05); color: var(--text); border: 1px solid var(--line); border-radius: 10px; height: 40px; padding: 0 10px; font: inherit; font-size: 13px; max-width: 170px; }
.mk2-hero-body { grid-area: body; align-self: center; max-width: 560px; }
.mk2-hero-body h1 { font-family: var(--display); font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; margin: 8px 0 14px; font-weight: 700; letter-spacing: -0.01em; }
.mk2-hero-body h1 em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk2-hero-body > p { color: var(--text-2); font-size: 16px; max-width: 470px; margin: 0 0 20px; }
.mk2-pillars { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk2-pillars li { display: flex; gap: 10px; align-items: flex-start; }
.mk2-pillars svg { width: 30px; height: 30px; padding: 6px; flex: none; color: var(--gold-hi); border: 1px solid var(--mk2-edge); border-radius: 50%; background: rgba(0, 0, 0, 0.4); }
.mk2-pillars b { display: block; font-size: 13px; }
.mk2-pillars small { color: var(--text-3); font-size: 11.5px; }
.mk2-hero-card { grid-area: card; align-self: end; display: grid; gap: 8px; padding: 14px; border-radius: var(--mk2-r); background: var(--mk2-glass); border: 1px solid var(--line-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 230, 160, 0.16); }
.mk2-hero-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.mk2-hero-card h2 { font-size: 18px; margin: 2px 0 0; line-height: 1.25; }
.mk2-hero-empty h2 { font-size: 16px; font-weight: 500; color: var(--text-2); }
.mk2-credit { position: absolute; right: 14px; bottom: 8px; font-size: 11px; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 3px rgba(0,0,0,.9); letter-spacing: 0.04em; }
.mk2-maker { color: var(--text-3); font-size: 12.5px; margin: 0; }
.mk2-maker a { color: var(--gold-hi); }
.mk2-buyrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mk2-price { font-size: 20px; color: var(--text); font-weight: 700; }
.mk2-price small { font-size: 12px; color: var(--text-3); font-weight: 500; }
.mk2-stock { font-size: 11.5px; color: #8fd19e; }
.mk2-stock.out { color: var(--text-3); }
.mk2-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk2-actions .btn { flex: 1 1 130px; }
.mk2-tap { min-height: 46px; border-radius: 12px; }
.mk2-details { font-size: 12.5px; color: var(--gold-hi); display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.mk2-details svg { width: 13px; height: 13px; }
.mk2-cols { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.mk2-col { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 16px 8px 8px; border-radius: 16px; background: var(--mk2-glass); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.08); }
.mk2-col i { width: 48px; height: 48px; border-radius: 12px; background-size: cover; background-position: center; flex: none; display: grid; place-items: center; background-color: rgba(227, 183, 74, 0.08); }
.mk2-col i svg { width: 22px; height: 22px; color: var(--gold); }
.mk2-col > svg { width: 22px; height: 22px; color: var(--gold); margin-left: 8px; }
.mk2-col span { display: grid; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mk2-col small { font-size: 11px; color: var(--text-3); font-weight: 400; }
.mk2-col.on, .mk2-col:hover { border-color: var(--gold); background: linear-gradient(180deg, rgba(227, 183, 74, 0.2), rgba(20, 15, 6, 0.85)); }
.mk2-col.sell { border-style: dashed; border-color: var(--line-strong); }
.mk2-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.mk2-main { display: grid; gap: 22px; min-width: 0; }
.mk2-sec { min-width: 0; }
.mk2-sec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mk2-sec-h h2 { margin: 2px 0 0; font-size: 22px; font-family: var(--display); }
.mk2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.mk2-card { display: flex; flex-direction: column; border-radius: var(--mk2-r); overflow: hidden; background: var(--mk2-glass); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 230, 160, 0.1); transition: transform 0.18s ease, border-color 0.18s ease; min-width: 0; }
.mk2-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.mk2-card-img { position: relative; display: block; aspect-ratio: 1; background: #0d0b07; }
.mk2-card-img img { width: 100%; height: 100%; object-fit: cover; }
.mk2-noimg { display: grid; place-items: center; height: 100%; color: var(--gold); }
.mk2-chip { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(8, 7, 5, 0.78); border: 1px solid var(--mk2-edge); color: var(--gold-hi); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mk2-chip.static { position: static; align-self: flex-start; }
.mk2-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; flex: 1; }
.mk2-card-body h3 { margin: 0; font-size: 15.5px; line-height: 1.3; }
.mk2-card-body .mk2-actions { margin-top: auto; }
.mk2-desc { font-size: 13px; color: var(--text-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mk2-terms { font-size: 12px; color: var(--text-2); display: block; margin-bottom: 8px; }
.mk2-coming { position: relative; min-height: 300px; border-style: dashed; border-color: var(--line-strong); justify-content: flex-end; }
.mk2-coming-art { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 4, 2, 0.25), rgba(5, 4, 2, 0.92)), url('/market-art/vista.jpg') 75% 50% / cover; opacity: 0.85; }
.mk2-coming-body { position: relative; display: grid; gap: 8px; padding: 16px; }
.mk2-coming-body b { font-size: 16px; line-height: 1.3; }
.mk2-coming-body .btn { justify-self: start; }
.mk2-empty { padding: 18px; border-radius: 14px; border: 1px dashed var(--line-strong); background: rgba(10, 8, 4, 0.6); color: var(--text-2); }
.mk2-empty a { color: var(--gold-hi); text-decoration: underline; }
.mk2-nova { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: var(--mk2-r); background: var(--mk2-glass); border: 1px solid var(--line); }
.mk2-nova-face { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); flex: none; }
.mk2-nova h2 { margin: 4px 0 6px; font-size: 18px; }
.mk2-nova p { margin: 0 0 10px; color: var(--text-2); font-size: 13px; }
.mk2-films { display: flex; gap: 10px; flex-wrap: wrap; }
.mk2-film { display: grid; gap: 4px; width: 150px; font-size: 12px; }
.mk2-film img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.mk2-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mk2-door { display: flex; gap: 12px; align-items: center; min-height: 76px; padding: 10px; border-radius: 16px; background: var(--mk2-glass); border: 1px solid var(--line); }
.mk2-door:hover { border-color: var(--gold); }
.mk2-door.open { border-style: dashed; border-color: var(--line-strong); }
.mk2-door-art { width: 56px; height: 56px; border-radius: 12px; flex: none; background-size: cover; background-position: 80% 50%; display: grid; place-items: center; background-color: rgba(227, 183, 74, 0.08); border: 1px solid var(--mk2-edge); }
.mk2-door-art svg { width: 24px; height: 24px; color: var(--gold); }
.mk2-door b { display: block; font-size: 14.5px; }
.mk2-door small { color: var(--text-3); font-size: 12px; }
.mk2-sell { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); padding: 26px; border-radius: 22px; border: 1px solid var(--line-strong); isolation: isolate; }
.mk2-sell-art { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: 20% 70%; }
.mk2-sell-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 4, 2, 0.95) 0%, rgba(5, 4, 2, 0.8) 55%, rgba(5, 4, 2, 0.4) 100%); }
.mk2-sell-body { max-width: 560px; }
.mk2-sell-body h2 { font-family: var(--display); font-size: 26px; margin: 6px 0 8px; }
.mk2-sell-body p { color: var(--text-2); }
.mk2-side { display: grid; gap: 14px; position: sticky; top: calc(var(--top-h) + 14px); min-width: 0; }
.mk2-panel { padding: 16px; border-radius: var(--mk2-r); background: var(--mk2-glass); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 230, 160, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); min-width: 0; }
.mk2-panel h3 { margin: 0 0 10px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.mk2-panel h3 svg { width: 20px; height: 20px; color: var(--gold); }
.mk2-panel p { font-size: 13px; color: var(--text-2); }
.mk2-bag { border-color: var(--line-strong); }
.mk2-bag-h { display: flex; justify-content: space-between; align-items: center; }
.mk2-bag-h h3 { margin: 0; }
.mk2-count { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px; display: grid; place-items: center; background: var(--gold-grad); color: #1a1205; font-weight: 700; }
.mk2-bag-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.mk2-bag-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.mk2-bag-list img, .mk2-bag-noimg { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; grid-row: span 2; background: #0d0b07; }
.mk2-bag-item { display: grid; font-size: 13px; min-width: 0; }
.mk2-bag-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk2-bag-item small { color: var(--text-3); font-size: 11px; }
.mk2-qty { display: inline-flex; align-items: center; justify-self: start; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mk2-qty button { width: 38px; height: 34px; background: rgba(255, 255, 255, 0.04); border: 0; font-size: 16px; }
.mk2-qty output { min-width: 28px; text-align: center; font-size: 13px; }
.mk2-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; padding-top: 4px; }
.mk2-total b { font-size: 20px; color: var(--gold-hi); }
.mk2-bag .owner svg { width: 12px; height: 12px; vertical-align: -2px; }
.mk2-bag .btn svg { width: 14px; height: 14px; }
.mk2-impact h3 svg { color: #8fd19e; }
.mk2-bagbar { display: none; }
@media (max-width: 1180px) {
  .mk2-layout { grid-template-columns: minmax(0, 1fr); }
  .mk2-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}
@media (max-width: 900px) {
  .mk2-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "body" "card"; padding: 14px 16px 28px; min-height: 0; }
  .mk2-hero-card { grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .mk2-hero-card img { grid-row: span 4; aspect-ratio: 1; }
  .mk2-hero-card .eyebrow, .mk2-hero-card .mk2-actions { grid-column: 1 / -1; }
  .mk2-hero-card.mk2-hero-empty { grid-template-columns: minmax(0, 1fr); }
  .mk2-bagbar:not([hidden]) { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 32; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 0 16px; border-radius: 16px; background: var(--gold-grad); color: #1a1205; font-weight: 700; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7); }
  .mk2-bagbar svg { width: 18px; height: 18px; vertical-align: -3px; }
  .mk2-bagbar .go { font-size: 13px; text-decoration: underline; }
  .mk2:has(.mk2-bagbar:not([hidden])) { padding-bottom: 76px; }
}
@media (max-width: 760px) {
  .mk2-bagbar:not([hidden]) { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .mk2-search select { display: none; }
  .mk2-pillars { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mk2-hero-body h1 { font-size: 34px; }
  .mk2-hero-body > p { font-size: 14.5px; }
  .mk2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mk2-card-body { padding: 10px; }
  .mk2-card-body h3 { font-size: 14px; }
  .mk2-price { font-size: 17px; }
  .mk2-actions .btn { flex-basis: 100%; }
  .mk2-coming { min-height: 220px; grid-column: 1 / -1; }
  .mk2-nova { flex-direction: column; }
  .mk2-sell { padding: 18px; }
  .mk2-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) { .mk2-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 761px) and (max-width: 1180px) { .mk2-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); } }

/* ── Pro Gear · authorized retailers (public/pro-gear.js) — mk2 canon, prefix pg- ── */
.pg-door-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: var(--mk2-r); background: radial-gradient(120% 140% at 0% 0%, rgba(227, 183, 74, 0.16), transparent 55%), var(--mk2-glass); border: 1px solid var(--line-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 230, 160, 0.12); }
.pg-door-card:hover { border-color: var(--gold); }
.pg-door-mono { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: 0.04em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; border: 1px solid var(--mk2-edge); box-shadow: inset 0 0 0 6px rgba(8, 7, 5, 0.6), inset 0 0 40px rgba(227, 183, 74, 0.14); }
.pg-door-body { display: grid; gap: 8px; min-width: 0; }
.pg-door-body b { font-size: 17px; line-height: 1.3; }
.pg-door-body small { color: var(--text-2); font-size: 13px; line-height: 1.45; }
.pg-door-body .btn { justify-self: start; display: inline-flex; align-items: center; padding: 0 20px; }
.pg-cats { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 6px; scrollbar-width: thin; }
.pg-cats a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: rgba(8, 7, 5, 0.7); border: 1px solid var(--line); color: var(--text); }
.pg-cats a:hover, .pg-cats a:focus-visible { border-color: var(--gold); color: var(--gold-hi); }
.pg-cats-sticky { position: sticky; top: var(--top-h, 64px); z-index: 5; margin: 0 -4px; padding: 8px 4px; background: linear-gradient(180deg, rgba(5, 4, 2, 0.94), rgba(5, 4, 2, 0.8)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pg-studio { margin-top: 14px; padding: 16px; border-radius: var(--mk2-r); border: 1px dashed var(--line-strong); background: rgba(10, 8, 4, 0.6); display: grid; gap: 8px; }
.pg-studio h3 { margin: 0; font-size: 17px; }
.pg-studio p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.pg-studio-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pg-studio-list li { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); background: rgba(255, 255, 255, 0.03); }
.pg-studio .btn { justify-self: start; display: inline-flex; align-items: center; padding: 0 18px; }
.pg-hero { position: relative; overflow: hidden; display: grid; gap: 12px; padding: 22px 26px 26px; border-radius: 22px; border: 1px solid var(--mk2-edge); background: radial-gradient(90% 120% at 100% 0%, rgba(227, 183, 74, 0.2), transparent 55%), radial-gradient(70% 90% at 0% 100%, rgba(120, 80, 20, 0.22), transparent 60%), linear-gradient(180deg, #120e07, #070604); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 230, 160, 0.12); }
.pg-back { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--gold-hi); }
.pg-hero h1 { margin: 0; font-family: var(--display); font-size: clamp(32px, 5vw, 54px); line-height: 1.05; }
.pg-hero h1 em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-hero > p { margin: 0; max-width: 640px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.pg-ladder { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pg-ladder li { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); }
.pg-disclose { margin: 0; font-size: 12.5px; color: var(--text-3); }
.pg-tier { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--mk2-edge); color: var(--gold-hi); background: rgba(8, 7, 5, 0.7); }
.pg-tier-starter { color: #cfe6c9; border-color: rgba(160, 210, 150, 0.35); }
.pg-tier-pro { color: #1a1205; background: var(--gold-grad); border-color: transparent; }
.pg-sec { min-width: 0; scroll-margin-top: calc(var(--top-h, 64px) + 70px); }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pg-card { display: flex; flex-direction: column; border-radius: var(--mk2-r); overflow: hidden; background: var(--mk2-glass); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 230, 160, 0.1); }
.pg-card:hover { border-color: var(--line-strong); }
.pg-mono { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; height: 112px; background: radial-gradient(80% 120% at 50% 0%, rgba(227, 183, 74, 0.18), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 230, 160, 0.035) 0 1px, transparent 1px 9px), #0b0905; border-bottom: 1px solid var(--mk2-edge); }
.pg-mono span { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: 0.06em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-mono small { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); }
.pg-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; flex: 1; }
.pg-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pg-brand { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.pg-body h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.pg-why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.pg-buys { display: grid; gap: 8px; margin-top: auto; padding-top: 4px; }
.pg-buy { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--gold-hi); background: rgba(10, 10, 10, 0.6); border: 1px solid var(--line-strong); text-align: center; }
.pg-buy:first-child { color: #1a1205; background: var(--gold-grad); border-color: transparent; }
.pg-buy:hover, .pg-buy:focus-visible { border-color: var(--gold); filter: brightness(1.06); }
.pg-fine { margin: 0; font-size: 11.5px; color: var(--text-3); }
.pg-foot { margin: 6px 0 0; font-size: 12px; }
@media (max-width: 760px) {
  .pg-door-card { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .pg-door-mono { font-size: 22px; border-radius: 12px; }
  .pg-door-body .btn { justify-self: stretch; justify-content: center; }
  .pg-hero { padding: 16px 16px 20px; }
  .pg-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pg-card { flex-direction: row; }
  .pg-mono { flex: none; width: 76px; height: auto; border-bottom: 0; border-right: 1px solid var(--mk2-edge); }
  .pg-mono span { font-size: 20px; }
  .pg-mono small { display: none; }
  .pg-body { padding: 12px; min-width: 0; }
}

/* ══ WOW OS rooms · Passport / Realms / Journey / Events / Games (App 2 canon) — public/rooms.js · prefix rm2- (reuses hm2-) ══ */
.rm2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; min-width: 0; }
.rm2-main, .rm2-side { display: grid; gap: 16px; min-width: 0; }
.rm2-p { margin: 0 0 10px; color: var(--text-2); font-size: 0.86rem; }
.rm2-hero { min-height: 300px; }
.rm2-art-tower .hm2-hero-art { background: linear-gradient(90deg, rgba(3,3,6,0.94) 0%, rgba(3,3,6,0.6) 45%, rgba(3,3,6,0.2) 75%, rgba(3,3,6,0.6) 100%), url("/home-art/spire-tower.jpg") 70% 30% / cover no-repeat, #05050a; }
.rm2-art-stage .hm2-hero-art { background: linear-gradient(90deg, rgba(3,3,6,0.94) 0%, rgba(3,3,6,0.6) 45%, rgba(3,3,6,0.25) 75%, rgba(3,3,6,0.6) 100%), url("/tv-art/stage.jpg") 60% 40% / cover no-repeat, #05050a; }
.rm2-games-hero canvas.hm2-hero-art { display: block; }
.rm2-num { font-family: ui-monospace, Menlo, monospace; font-size: clamp(1.05rem, 2.2vw, 1.4rem); letter-spacing: 0.12em; color: var(--gold-hi); margin: 0 0 8px; overflow-wrap: anywhere; }
.rm2-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 0.78rem; }
.rm2-kv dt { color: var(--text-3); } .rm2-kv dd { margin: 0; overflow-wrap: anywhere; }
.rm2-idcard .hm2-caps { margin-top: 0; flex: 1; }

/* Passport card (guest example) */
.rm2-pcard { position: relative; z-index: 1; align-self: center; display: grid; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid var(--line-strong); background: linear-gradient(150deg, rgba(227,183,74,0.18), rgba(6,6,10,0.88) 55%); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rm2-pcard .truth { justify-self: start; }
.rm2-pcard-top { display: flex; gap: 12px; align-items: center; }
.rm2-pcard-top svg { width: 44px; height: 44px; flex: none; }
.rm2-pcard-qr { width: 84px; height: 84px; border-radius: 10px; display: grid; place-items: center; background: rgba(243,239,230,0.08); border: 1px dashed var(--line-strong); color: var(--gold-hi); }
.rm2-pcard-qr svg { width: 44px; height: 44px; }
.rm2-pcard small { color: var(--text-3); font-size: 0.74rem; }
.rm2-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rm2-benefits li { display: flex; gap: 10px; align-items: flex-start; }
.rm2-benefits b { display: block; font-size: 0.86rem; }
.rm2-benefits small { display: block; color: var(--text-3); font-size: 0.74rem; }

/* Lists, stats, chips */
.rm2-perms { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rm2-perms li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(227,183,74,0.12); font-size: 0.84rem; text-transform: none; }
.rm2-perms li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.rm2-perms li:last-child { border-bottom: 0; }
.rm2-perms b { display: block; font-weight: 600; }
.rm2-perms small { display: block; color: var(--text-3); font-size: 0.74rem; }
.rm2-perms .truth { flex: none; }
.rm2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin: 0; }
.rm2-stats > div { border-left: 1px solid rgba(227,183,74,0.22); padding-left: 10px; }
.rm2-stats dt { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.rm2-stats dd { margin: 2px 0 0; font-size: 1.15rem; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.rm2-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(227,183,74,0.35); color: var(--gold-hi); font-size: 0.76rem; }
.rm2-qr .qr { width: 160px; height: 160px; margin: 0 auto; }
.rm2-qr a { color: var(--gold); }
.rm2-wp > .panel { margin: 0; border-radius: 14px; border-color: rgba(227,183,74,0.22); }
.rm2-wp > .panel h3 { font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--gold-hi); }
.rm2 [data-vl-passport] h3 { margin: 0 0 10px; font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-hi); font-weight: 600; }
.rm2-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Realm doors at gateway size */
.rm2-doors-lg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rm2-doors-lg .hm2-door { min-height: 224px; }
.rm2-doors-lg .hm2-door-art { height: 116px; }
.rm2-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: rm2s; }
.rm2-steps li { position: relative; padding-left: 34px; counter-increment: rm2s; }
.rm2-steps li::before { content: counter(rm2s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.74rem; color: var(--gold-hi); border: 1px solid var(--line-strong); }
.rm2-steps b { display: block; font-size: 0.86rem; } .rm2-steps small { color: var(--text-3); font-size: 0.74rem; }

/* Journey path + ring */
.rm2-path { list-style: none; margin: 0; padding: 6px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; }
.rm2-path-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rm2-path::before { content: ""; position: absolute; left: 12%; right: 12%; top: 25px; height: 2px; background: linear-gradient(90deg, var(--gold-lo), rgba(227,183,74,0.15)); }
.rm2-path li { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; }
.rm2-path b { font-family: var(--display); font-size: 0.9rem; color: var(--text-2); }
.rm2-path small { color: var(--text-3); font-size: 0.74rem; }
.rm2-node { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #08080b; border: 1px solid rgba(227,183,74,0.3); color: var(--text-3); font-weight: 700; position: relative; z-index: 1; }
.rm2-path li.done .rm2-node { border-color: var(--gold); color: #1a1405; background: var(--gold-grad); box-shadow: 0 0 18px rgba(227,183,74,0.45); }
.rm2-path li.done b { color: var(--gold-hi); }
.rm2-ring { align-items: center; justify-content: center; text-align: center; }
.rm2-ring-dial { --p: 0; width: 150px; height: 150px; border-radius: 50%; margin: 6px auto; display: grid; place-content: center; background: radial-gradient(closest-side, #07070a 82%, transparent 83%), conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(227,183,74,0.14) 0); }
.rm2-ring-dial b { font-family: var(--display); font-size: 2.6rem; color: var(--gold-hi); line-height: 1; }
.rm2-ring-dial b small { font-size: 1rem; color: var(--text-3); }
.rm2-ring-dial span { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.rm2-rail .hm2-step { min-height: 140px; }

/* Events */
.rm2-feat small { display: block; color: var(--text-2); font-size: 0.78rem; }
.rm2-feat .btn { margin-top: auto; }
.rm2-feat .hm2-ev-t { margin-top: 4px; }
.rm2-evts { display: grid; gap: 10px; }
.rm2-evt { display: flex; gap: 14px; padding: 12px; border-radius: 12px; border: 1px solid rgba(227,183,74,0.2); background: rgba(6,6,10,0.55); min-width: 0; }
.rm2-evt-date { flex: none; width: 56px; height: 62px; border-radius: 10px; display: grid; place-content: center; text-align: center; border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(227,183,74,0.2), #07070a); }
.rm2-evt-date b { font-size: 0.68rem; letter-spacing: 0.12em; color: var(--gold); }
.rm2-evt-date span { font-family: var(--display); font-size: 1.5rem; color: var(--gold-hi); line-height: 1; }
.rm2-evt-body { min-width: 0; flex: 1; }
.rm2-evt-body h3 { margin: 0; font-family: var(--display); font-size: 1.05rem; color: var(--gold-hi); overflow-wrap: anywhere; }
.rm2-evt-body > small { display: block; color: var(--text-3); font-size: 0.76rem; margin-top: 2px; }
.rm2-evt-body p { margin: 6px 0 8px; color: var(--text-2); font-size: 0.86rem; overflow-wrap: anywhere; }
.rm2-evt-a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rm2-side .form .field input, .rm2-side .form .field textarea { width: 100%; min-width: 0; box-sizing: border-box; }

/* Games */
.rm2-games { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rm2-game .hm2-door-art { height: 110px; }
.rm2-tag { position: absolute; z-index: 1; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(6,6,10,0.8); border: 1px solid var(--line-strong); color: var(--gold-hi); }
.rm2-keys { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rm2-keys li { display: grid; justify-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-2); }

/* iPad: side column drops beneath as a two-up row */
@media (max-width: 1180px) {
  .rm2 { grid-template-columns: minmax(0, 1fr); }
  .rm2-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .rm2-doors-lg, .rm2-games { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .rm2-doors-lg, .rm2-games { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 31%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .rm2-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rm2-hero .rm2-pcard, .rm2-hero .hm2-activity { max-width: 420px; }
  .rm2-art-tower .hm2-hero-art, .rm2-art-stage .hm2-hero-art { background-size: cover; background-position: 50% 30%; }
  .rm2-split { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: the mirrored command center — same rooms, stacked */
@media (max-width: 600px) {
  .rm2, .rm2-main, .rm2-side { gap: 12px; }
  .rm2-side { grid-template-columns: minmax(0, 1fr); }
  .rm2-hero .hm2-hero-body { padding-top: 120px; }
  .rm2-hero .rm2-pcard, .rm2-hero .hm2-activity { max-width: none; }
  .rm2-doors-lg, .rm2-games { grid-auto-columns: 46%; }
  .rm2-benefits { grid-template-columns: minmax(0, 1fr); }
  .rm2-path { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .rm2-path::before { display: none; }
  .rm2-path-3 { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .rm2-evt { gap: 10px; padding: 10px; }
  .rm2-evt-date { width: 48px; height: 54px; }
}
/* rm2: the Home iPad re-ordering (hm2 order:N) must not reorder these rooms */
.rm2 .hm2-hero, .rm2 .hm2-card, .rm2 .hm2-pass, .rm2 .hm2-event { order: 0; }
.rm2-art-city .hm2-hero-art { background-size: auto, cover; background-position: 0 0, 60% 35%; }
.rm2-pcard .rm2-num { white-space: nowrap; font-size: 1.1rem; }
@media (max-width: 600px) { .rm2-ring-dial { width: 148px; height: 148px; } .rm2-ring-dial span { letter-spacing: 0.06em; } }

/* ── Guest-ready legibility floor (2026-10-17) ───────────────
   Phone/iPad pass before the campaign: no reading text under 11px on a phone,
   every tap target ≥ 44px tall, disabled/secondary states still legible.
   Size and contrast only — no layout, copy or colour-family changes. */
@media (max-width: 760px) {
  /* tap targets */
  .btn, .btn-sm, .door .btn, .hero .ctas .btn { height: auto; min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .brand { min-height: 44px; }
  .tabs .tab, .mc-b, .mc-pchip, .bs-chip, .cv-seg button, .cv-mini, .lx-seg button, .fc-len,
  .campus-map a, .ob-links a, .ob-tabs a, .lc-worldnav a, .hm2-chips a, .mk2-details, .bc-rail-foot a { min-height: 44px; display: inline-flex; align-items: center; }
  .hu-tracebox .mc-b { min-height: 44px; }
  .mu2-rowplay, .mu2-ib, .mu2-ib.sm { min-width: 44px; min-height: 44px; }
  .pg-go, .hm2-h a, .lg2-box-h a, .lc-crumb a, .back-link { display: inline-flex; align-items: center; min-height: 44px; }
  main select, main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), main summary { min-height: 44px; }
  main summary { display: flex; align-items: center; }

  /* 11px reading floor */
  .m-tabs a, .m-tabs button { font-size: 11.5px; }
  .eyebrow, .truth, .gl-need, .pg-status, .le-pill, .lab-door-tag, .lab-simtag, .br-pill, .rm2-tag,
  .lab-lh, .lab-lr, .lab-px, .lab-dl, .lab-dask em, .lab-dbid em, .lab-fp b, .lab-lg b,
  .vl-loop li, .hu-loop li, .ob-stage b, .classroom .eyebrow, .tv2-ch em, .mu2-brand small,
  .art-facts li span, .campus-facts span, .caps small, .ident .who small { font-size: 11px; }
  .hm2-door-owner, .hm2-status dt, .rm2-stats dt, .hm2-credit, .rm2-ring-dial span { font-size: 0.75rem; }
  .bs-screen-v sup, .bs-v sup { font-size: 11px; }
  .lg2-room-art .lg2-badge, .lg2-date small { font-size: 11px; }
  .hm2-caps small, .rm2-keys li span, .ob-h small, .fc-label small { font-size: 11px; }
  .br-chip, .br-check, .lc-lens, .fc-switch, .fc-vol { min-height: 44px; }
  .br-check, .fc-vol { display: flex; align-items: center; }
  .mu2-btn, .mu2-btn.sm { min-height: 44px; }
  .ob-more { display: inline-flex; align-items: center; min-height: 44px; }
  .mc-pen { width: 40px; height: 40px; }
  .mu2-rail a { min-height: 44px; }
  .lab-lh small { font-size: 11px; }
}

/* Guest-ready: owner lines that sit on hero photos read at full secondary ink. */
.ac-hero-photo .owner { color: var(--text-2); font-size: 12px; }

/* ── Photo scenes (shared): a photoreal scene image is the base layer of a scene SVG;
   each tappable object is an invisible hit shape (.ph-hit) placed over the real object
   in the photo. Hover/focus/on draws a gold outline instead of glowing a drawing. */
.ph-img { pointer-events: none; }
.ph-hit { fill: transparent; stroke: transparent; stroke-width: 2.5; vector-effect: non-scaling-stroke; transition: stroke .2s, fill .2s; }
:is(.vl-obj, .hu-obj, .lc-obj, .oc-obj, .lx-obj, .ph-obj):has(.ph-hit) { filter: none !important; }
:is(.vl-obj, .hu-obj, .lc-obj, .oc-obj, .lx-obj, .ph-obj):hover .ph-hit,
:is(.vl-obj, .hu-obj, .lc-obj, .oc-obj, .lx-obj, .ph-obj):focus-visible .ph-hit { stroke: rgba(246,215,126,.85); fill: rgba(246,215,126,.08); }
:is(.vl-obj, .hu-obj, .lc-obj, .oc-obj, .lx-obj, .ph-obj).on .ph-hit { stroke: #f6d77e; stroke-width: 3.5; fill: rgba(246,215,126,.14); }
.ph-credit { font-size: 11px; color: var(--text-2); opacity: .85; margin: 6px 2px 0; }

/* Guest gate — a lesson's front step: the real scene first, then the Passport offer. */
.gg-gate { overflow: hidden; border-radius: 22px; border: 1px solid rgba(227,183,74,.28); background: #07070a; margin-top: 8px; display: grid; grid-template-columns: 1fr; }
.gg-art { aspect-ratio: 16 / 9; max-width: 100%; background-size: cover; background-position: center; position: relative; }
.gg-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(180deg, transparent, #07070a); }
.gg-body { padding: clamp(18px, 4vw, 40px); padding-top: 6px; display: grid; gap: 12px; max-width: 760px; }
.gg-body h1 { margin: 0; font-size: clamp(1.9rem, 5.5vw, 3.2rem); text-wrap: balance; }
.gg-body .lead { color: var(--text-1, #f3ecda); margin: 0; font-weight: 500; letter-spacing: 0; }
.gg-why { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 6px; color: var(--text-2); }
.gg-why b { color: var(--gold-hi, #f6d77e); }
@media (min-width: 1000px) { .gg-gate { grid-template-columns: 1.25fr 1fr; align-items: center; } .gg-art { aspect-ratio: auto; height: 100%; min-height: 460px; } .gg-art::after { inset: 0 0 0 auto; width: 30%; height: auto; background: linear-gradient(90deg, transparent, #07070a); } .gg-body { padding-top: clamp(18px, 4vw, 40px); } }
@media (max-width: 600px) { .gg-gate { border-radius: 16px; } .gg-body .btn { width: 100%; justify-content: center; } }
.ph-credit-in { margin: 0; padding: 6px 12px 8px; }

/* Photoreal school heroes: A+ trading hall, live classrooms (AI-generated environments). */
.ap-hero[aria-labelledby="ap-h"], .ap-hero.cr-hero { min-height: clamp(340px, 46vw, 520px); background: #07070a url("/academy-art/hero-aplus-hall.jpg") center / cover no-repeat; }
.ap-hero.cr-hero { background-image: url("/academy-art/hero-classrooms.jpg"); }
.ap-hero[aria-labelledby="ap-h"]::before, .ap-hero.cr-hero::before { content: ""; position: absolute; inset: 0; opacity: 1; background: linear-gradient(180deg, rgba(5,5,8,.1) 0%, rgba(5,5,8,.45) 45%, rgba(5,5,8,.92) 100%); pointer-events: none; z-index: 0; }
.ap-hero.cr-hero::after { display: none; }
/* ── Bible Study: every language, word by word, the Scroll (public/scripture.js) ── */
.sx { display: grid; gap: 14px; }
.sx > * { margin: 0; }
.sx-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: end; }
.sx-head h2 { margin: 0; }
.sx .sx-count { margin: 4px 0 0; max-width: 62ch; }
.sx-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px; border: 1px solid var(--line-strong); background: rgba(10,8,5,.7); }
.sx-mode { border: 0; background: transparent; padding: 8px 14px; border-radius: 99px; color: var(--text-2); font-weight: 600; font-size: 13px; min-height: 40px; }
.sx-mode[aria-selected="true"] { background: var(--gold-grad); color: #1a1205; }
.sx-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sx-bar select { max-width: 100%; }
.sx-cols { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.sx-colchip { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 99px; background: rgba(20,15,8,.85); max-width: 100%; }
.sx-colbtn { border: 0; background: transparent; padding: 8px 12px; font-weight: 600; font-size: 13px; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.sx-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c); }
.sx-dot.d0, .sx-lab.d0 { --c: #e3b74a; }
.sx-dot.d1, .sx-lab.d1 { --c: #9fd4c0; }
.sx-dot.d2, .sx-lab.d2 { --c: #c9b8ff; }
.sx-x { border: 0; background: transparent; color: var(--text-2); min-width: 44px; min-height: 44px; border-radius: 99px; font-size: 18px; line-height: 1; }
.sx-x:hover { color: var(--gold-hi); background: rgba(227,183,74,.1); }
.sx-sugg { border-style: dashed; }
.sx-text { max-height: 720px; }
.sx-par .sx-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 10px 8px; font-family: inherit; }
.sx-vn { color: var(--gold); font-size: 12px; font-weight: 700; padding-top: 6px; }
.sx-cells { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 18px; }
.sx-cell { font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.65; min-width: 0; }
.sx-cell.is-none { color: var(--text-3); }
.sx-lab { display: none; font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); margin-bottom: 2px; }
.sx-cell:lang(hbo), .sx-cell:lang(he), .sx-cols-text.heb, .sx-big:lang(hbo), .sx-big:lang(arc), .sx-ilw b:lang(hbo), .sx-ilw b:lang(arc), .sx-myw-list b:lang(hbo) { font-family: "Frank Ruhl Libre", "Noto Serif Hebrew", "Times New Roman", serif; }
.sx-cell:lang(grc), .sx-cols-text.grk, .sx-big:lang(grc), .sx-ilw b:lang(grc), .sx-myw-list b:lang(grc) { font-family: "GFS Didot", "Noto Serif", Georgia, serif; }
.sx-cell.is-orig { font-size: 21px; line-height: 1.8; }
.sx-cell[dir="rtl"] { text-align: right; }
.sx .sx-hd { margin: 16px 8px 4px; font-family: var(--display); color: var(--gold-hi); font-size: 14px; letter-spacing: .06em; }
.sx .sx-miss { padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.sx-w { cursor: pointer; border-radius: 6px; padding: 0 1px; transition: background .15s, color .15s; }
.sx-w:hover, .sx-w:focus-visible { background: rgba(227,183,74,.16); color: var(--gold-hi); outline: none; }
.sx-w.on { background: rgba(227,183,74,.32); color: #fff3cf; box-shadow: 0 0 0 1px rgba(246,215,126,.6); }
/* Word by word */
.sx-ilv { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 12px 8px; }
.sx .sx-ilv .sx-ileng { grid-column: 2; margin: 2px 0 0; color: var(--text-2); font-family: Georgia, serif; font-size: 15px; }
.sx-ilw-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-ilw { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(227,183,74,.25); background: linear-gradient(180deg, rgba(36,26,12,.9), rgba(14,10,5,.92)); text-align: center; }
.sx-ilw:hover, .sx-ilw.on { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(227,183,74,.45), 0 8px 24px -12px rgba(255,190,90,.5); }
.sx-ilw b { font-size: 24px; font-weight: 500; color: #f8ecd0; line-height: 1.3; }
.sx-ilw i { font-size: 12px; color: var(--gold-hi); font-style: normal; }
.sx-ilw span { font-size: 12.5px; color: var(--text); max-width: 120px; }
.sx-ilw small { font-size: 10px; color: var(--text-3); letter-spacing: .04em; }
/* See the passage */
.sx-scene { margin: 0; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); }
.sx-scene img { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: min(52vh, 440px); object-fit: cover; }
.sx-scene figcaption { position: absolute; inset: auto 0 0 0; display: grid; gap: 4px; padding: 40px clamp(14px, 3vw, 28px) 16px; background: linear-gradient(180deg, transparent, rgba(5,4,2,.92) 60%); }
.sx-scene figcaption span:not(.eyebrow) { font-family: Georgia, serif; font-size: clamp(15px, 1.8vw, 19px); color: #f6ecd6; }
.sx-scene figcaption small { color: var(--text-2); font-size: 11.5px; }
/* Phones: the caption sits under the picture so the scene itself stays visible. */
@media (max-width: 640px) { .sx-scene img { max-height: none; } .sx-scene figcaption { position: static; padding: 12px 14px 14px; background: rgba(5,4,2,.92); } .sx-scene figcaption span:not(.eyebrow) { font-size: 15px; } }
.sx-gallery { display: grid; gap: 8px; }
.sx-gallery p { margin: 0; }
.sx-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.sx-chip { flex: none; display: grid; gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(14,10,5,.8); scroll-snap-align: start; font-size: 11.5px; color: var(--text-2); }
.sx-chip img { width: 96px; height: 54px; object-fit: cover; border-radius: 7px; }
.sx-chip:hover { border-color: var(--gold); color: var(--gold-hi); }
/* The Scroll */
.sx-scroll-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; }
.sx-scroll-top .bs-ch-h { margin: 0; }
.sx-scroll-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-scroll-opts [aria-pressed="true"] { border-color: var(--gold); color: var(--gold-hi); background: rgba(227,183,74,.12); }
.sx-scroll { --h: clamp(420px, 62vh, 600px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; height: var(--h); border-radius: 16px; overflow: hidden; background: #0c0805; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(227,183,74,.18); }
.sx-roller { height: var(--h); width: clamp(70px, 12vw, 190px); max-width: none; object-fit: cover; object-position: center; position: relative; z-index: 2; }
.sx-roller.l { margin-right: -2px; }
.sx-roller.r { margin-left: -2px; }
.sx-sheet { position: relative; overflow-x: auto; overflow-y: hidden; background: url("/academy-art/bible/scroll-mid.jpg") center / 100% 100% no-repeat, #2a1a0c; scrollbar-color: rgba(120,80,30,.6) transparent; -webkit-overflow-scrolling: touch; }
.sx-cols-text { height: calc(var(--h) * .47); margin-top: calc(var(--h) * .335); padding: 0 34px; column-width: 10.5em; column-gap: 44px; column-fill: auto; color: #22160a; font-size: 21px; line-height: 1.55; text-align: justify; width: max-content; min-width: 100%; }
.sx-cols-text.heb { font-size: 23px; line-height: 1.48; }
.sx-cols-text .sx-w { color: #22160a; }
.sx-cols-text .sx-w:hover, .sx-cols-text .sx-w:focus-visible { background: rgba(140,90,20,.18); color: #000; }
.sx-cols-text .sx-w.on { background: rgba(196,140,40,.38); color: #000; box-shadow: none; }
/* The word */
.sx-side { max-height: calc(100vh - var(--top-h) - 30px); overflow: auto; }
.sx-word { display: grid; gap: 10px; }
.sx-word > * { margin: 0; }
.sx-word-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.sx .sx-big { font-size: clamp(54px, 7vw, 84px); line-height: 1.2; text-align: center; padding: 18px 10px; border-radius: 16px; color: #fbeec9; background: radial-gradient(ellipse at 50% 40%, rgba(227,183,74,.18), rgba(10,7,3,.2) 70%); border: 1px solid rgba(227,183,74,.3); text-shadow: 0 2px 30px rgba(255,200,110,.35); }
.sx .sx-tl { text-align: center; font-size: 18px; }
.sx-tl b { color: var(--gold-hi); font-weight: 600; }
.sx-tl small { display: block; font-size: 11px; }
.sx-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.sx-dl dt { color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.sx-dl dd { margin: 0; font-size: 15px; }
.sx-word-acts { flex-wrap: wrap; gap: 6px; }
.sx-lex { padding: 10px 12px; border-left: 3px solid #c9b8ff; background: rgba(201,184,255,.06); border-radius: 0 10px 10px 0; margin-bottom: 8px; }
.sx-lex p { margin: 0 0 4px; }
.sx .sx-def { white-space: pre-line; font-size: 13px; color: var(--text-2); max-height: 220px; overflow: auto; }
.sx-trace { display: grid; gap: 8px; }
.sx-trace p { margin: 0; }
.sx-myw h3 { margin: 6px 0; font-size: 15px; }
.sx-myw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sx-myw-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 2px 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(227,183,74,.05); }
.sx-myw-list b { font-size: 22px; font-weight: 500; }
.sx-myw-list small { grid-column: 2; }
.sx-myw-list .sx-x { grid-row: 1 / span 2; }
/* A fixed word sheet must not be trapped by the panel's backdrop blur (it creates a containing block). */
.sx.sx-sheet-open { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Choose a Bible */
.sx-pick { width: min(920px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border-radius: 20px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, #15100a, #070605); color: var(--text); box-shadow: 0 40px 120px rgba(0,0,0,.8); }
.sx-pick::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.sx-pick-in { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: calc(100dvh - 26px); }
.sx-pick-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding: 18px 20px 8px; }
.sx-pick-head h2 { margin: 2px 0; font-family: var(--display); color: var(--gold-hi); }
.sx-pick-head p { margin: 0; }
.sx-search { padding: 0 20px 10px; }
.sx-search input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: #0b0906; color: var(--text); font-size: 16px; }
.sx-pick-body { overflow: auto; padding: 0 20px 20px; display: grid; gap: 10px; align-content: start; }
.sx-pick-body h3 { margin: 8px 0 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.sx-pick-body.is-searching > :not(.sx-langs):not(.sx-h-all) { display: none; }
.sx-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sx-feat { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(24,18,9,.9); }
.sx-feat:hover { border-color: var(--gold); }
.sx-feat b { color: var(--gold-hi); }
.sx-feat span { font-size: 16px; font-family: "Frank Ruhl Libre", "GFS Didot", Georgia, serif; }
.sx-feat small { color: var(--text-3); font-size: 12px; }
.sx-feat-orig { border-color: var(--gold); background: linear-gradient(180deg, rgba(60,42,12,.9), rgba(24,18,9,.9)); }
.sx-lic { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.sx-lic.pd { color: #9fd4c0; }
.sx-langchips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-lchip { display: grid; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(16,12,6,.9); text-align: left; }
.sx-lchip b { font-weight: 600; }
.sx-lchip small { color: var(--text-3); font-size: 11px; }
.sx-langs { display: grid; gap: 2px; }
.sx-lang summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; list-style: none; }
.sx-lang summary::-webkit-details-marker { display: none; }
.sx-lang summary:hover, .sx-lang[open] summary { background: rgba(227,183,74,.08); }
.sx-lang summary b { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.sx-lang summary span { color: var(--text-2); overflow-wrap: anywhere; }
.sx-lang summary small { color: var(--gold); font-size: 12px; }
.sx-trs { display: grid; gap: 6px; padding: 6px 0 10px 14px; }
.sx-tr { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(12,9,5,.9); }
.sx-tr:hover { border-color: var(--gold); }
.sx-tr b { font-size: 15px; }
.sx-tr span { font-size: 13px; color: var(--text-2); }
.sx-tr i { font-style: normal; color: var(--gold); }
.sx-tr small { font-size: 11.5px; color: var(--text-3); }
.sx-tr small a, .sx-src a { color: var(--gold-hi); text-decoration: underline; }
@media (min-width: 861px) {
  .sx[data-mode="scroll"] .sx-body { grid-template-columns: 1fr; }
  .sx[data-mode="scroll"] .sx-side { position: static; }
  .sx[data-mode="scroll"].sx-sheet-open .sx-side { position: fixed; right: 24px; bottom: 24px; top: auto; width: min(440px, 40vw); max-height: calc(100vh - var(--top-h) - 48px); z-index: 80; background: linear-gradient(180deg, #1a130a, #090705); box-shadow: 0 30px 90px rgba(0,0,0,.85); }
}
@media (max-width: 860px) {
  .sx-text { max-height: 70vh; }
  .sx-side { max-height: none; }
  .sx.sx-sheet-open .sx-side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 80; max-height: 78dvh; overflow: auto; border-radius: 20px 20px 0 0; background: linear-gradient(180deg, #1a130a, #090705); box-shadow: 0 -30px 80px rgba(0,0,0,.85); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .sx-cells { grid-template-columns: 1fr; gap: 8px; }
  .sx-lab { display: block; }
  .sx-par .sx-row { grid-template-columns: 22px minmax(0, 1fr); }
  .sx-cell[dir="rtl"] .sx-lab { text-align: right; }
}
@media (max-width: 600px) {
  .sx-bar label { flex: 1 1 0; min-width: 0; }
  .sx-bar label select { width: 100%; }
  .sx-bar > .btn { flex: none; padding-left: 12px; padding-right: 12px; }
  .sx-cols { flex-basis: 100%; }
  .sx-modes { width: 100%; justify-content: space-between; }
  .sx-mode { flex: 1; padding: 8px 6px; }
  .sx-scroll { --h: 440px; }
  .sx-roller { width: 46px; }
  .sx-sheet { background-size: cover; }
  .sx-cols-text { column-width: 9em; font-size: 19px; padding: 0 20px; column-gap: 28px; }
  .sx-cols-text.heb { font-size: 20px; }
  .sx-lang summary { grid-template-columns: minmax(0, 1fr) auto; }
  .sx-lang summary span { grid-row: 2; font-size: 12.5px; }
  .sx-pick { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .sx-pick-in { max-height: 100dvh; }
  .sx-colbtn { max-width: 210px; }
}
/* ── Photo scenes: Living Civilizations (lc-), Living Conversation (cv-) ── */
.lc-dot { pointer-events:none; animation:lc-dot 2.6s ease-in-out infinite }
.lc-dot circle:first-child { fill:rgba(246,215,126,.14); stroke:rgba(246,215,126,.8); stroke-width:1.2; vector-effect:non-scaling-stroke }
.lc-dot circle:last-child { fill:#f6d77e }
.lc-obj.seen .lc-dot, .lc-obj.on .lc-dot { display:none }
@keyframes lc-dot { 0%,100% { opacity:.5 } 50% { opacity:1 } }
@media (prefers-reduced-motion:reduce) { .lc-dot { animation:none; opacity:.85 } }
.lc-ink { pointer-events:none }
.lc-svg .ph-credit { font:500 11px Inter,system-ui,sans-serif; fill:rgba(255,255,255,.7); paint-order:stroke; stroke:rgba(0,0,0,.6); stroke-width:3px; pointer-events:none }
.lc-navph { width:40px; height:22px; object-fit:cover; border-radius:6px; display:block }
.cv-scene-img { width:100%; height:100%; object-fit:cover; display:block }
.cv-credit { position:absolute; right:12px; top:8px; margin:0; color:rgba(243,226,176,.85); text-shadow:0 1px 3px #000 }
.ph-art { display:block; background:#0b0806 }
.ph-art img { width:100%; height:100%; min-height:220px; object-fit:cover; display:block }
.cv-world:has(.cv-world-ph) { grid-template-columns:64px 1fr }
.cv-world-ph { grid-row:1/3; width:64px; height:36px; object-fit:cover; border-radius:8px; border:1px solid rgba(227,183,74,.3); display:block }
@media (max-width:640px) { .ph-art img { min-height:150px; max-height:190px } }

/* Guest-ready taps: Bible bar buttons and empty-shop links reach the 44px phone floor. */
.sx-bar .btn { min-width: 44px; min-height: 44px; }
.mk2-empty a { display: inline-flex; align-items: center; min-height: 44px; }
/* Scripture words stay inline (word-by-word study); a taller line gives each word a bigger target. */
@media (max-width: 760px) { .sx-t { line-height: 2.1; } .sx-w { padding: 6px 1px; } }

/* WOW TV thumbnails: the title sits above the count/duration badges instead of sharing their strip. */
.tv2-thumb:has(.tv2-dur, .tv2-count) .tv2-thumb-t { bottom: 34px; }
/* Journey ring: the count and label sit on the dial's dark centre — give them that same ground explicitly. */
.rm2-ring-dial b, .rm2-ring-dial span { background: #07070a; border-radius: 6px; padding: 0 4px; }

/* School Directory cards: photoreal school art with no baked-in mockup lettering. */
.campus-card.art-sg .campus-art { background: linear-gradient(0deg, rgba(5,5,4,.88), rgba(5,5,4,.05) 62%), url(/academy-art/card-sg.jpg) center / cover no-repeat; }
.campus-card.art-vl .campus-art { background: linear-gradient(0deg, rgba(5,5,4,.88), rgba(5,5,4,.05) 62%), url(/academy-art/card-vl.jpg) center 30% / cover no-repeat; }
.campus-card.art-lib .campus-art { background: linear-gradient(0deg, rgba(5,5,4,.88), rgba(5,5,4,.05) 62%), url(/academy-art/card-lib.jpg) center / cover no-repeat; }
.campus-card.art-create .campus-art { background: linear-gradient(0deg, rgba(5,5,4,.88), rgba(5,5,4,.05) 62%), url(/academy-art/card-create.jpg) center 40% / cover no-repeat; }
/* Founder's voice: names the voice that will play (only shown once the clone is switched on). */
.fv-tag { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: .82rem; color: var(--gold-hi); margin: 6px 0; }
.fv-tag[hidden] { display: none; }
.fv-switch { background: transparent; border: 1px solid var(--gold-lo); color: inherit; border-radius: 999px; padding: 6px 12px; min-height: 44px; font: inherit; cursor: pointer; }
.fv-switch:hover, .fv-switch:focus-visible { border-color: var(--gold); }
/* WOW Shop: the ATH Store shelf says it is live, with a green dot */
.mk2-live { display: inline-flex; align-items: center; gap: 6px; color: #8fd19e; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.mk2-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ecf6b; box-shadow: 0 0 0 3px rgba(62,207,107,.18); }
/* Play together (/play) + Language Escape online rooms */
.pt-page { max-width: 880px; margin: 0 auto; display: grid; gap: 22px; padding-block: 8px 40px; }
.pt-sec { display: grid; gap: 10px; }
.pt-sec.glass { padding: 18px; border-radius: 18px; }
.pt-me { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-num { font-variant-numeric: tabular-nums; letter-spacing: .06em; font-weight: 700; }
.pt-me .pt-num { font-size: clamp(22px, 6vw, 30px); color: var(--gold, #d8b45a); }
.pt-add .row { display: flex; gap: 10px; flex-wrap: wrap; }
.pt-add input { flex: 1 1 200px; min-height: 48px; font-size: 17px; text-transform: uppercase; letter-spacing: .06em; }
.pt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pt-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.pt-list .row { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-invites li { border-color: rgba(62,207,107,.35); }
.pt-games { display: grid; gap: 12px; }
.pt-game { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: inherit; text-decoration: none; }
.pt-game-art { aspect-ratio: 16/10; border-radius: 12px; background-size: cover; background-position: center; }
.pt-game small { display: block; opacity: .8; margin-top: 4px; }
.pass-play { margin-top: 8px; }
.lx-online { display: grid; gap: 14px; }
.lx-online label { display: grid; gap: 6px; }
.lx-online input, .lx-online select { min-height: 46px; font-size: 16px; }
.lx-online-two { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lx-online-two > div { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.lx-online h3 { margin: 0; }
.lx-code { font-size: 18px; } .lx-code b { font-size: clamp(28px, 8vw, 40px); letter-spacing: .18em; color: var(--gold, #d8b45a); font-variant-numeric: tabular-nums; }
.lx-live { display: flex; gap: 8px; align-items: center; }
.ac-together { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; padding: 12px; margin: 6px 0 18px; border-radius: 18px; color: inherit; text-decoration: none; border: 1px solid rgba(62,207,107,.3); }
.ac-together-art { aspect-ratio: 16/10; border-radius: 12px; background-size: cover; background-position: center; }
.ac-together b { display: block; font-size: 17px; margin-top: 2px; }
.ac-together small { display: block; opacity: .82; margin-top: 4px; }
.hu-board { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.hu-board li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.hu-sc { font-size: 12.5px; padding: 3px 8px; border-radius: 999px; background: rgba(216,180,90,.14); font-variant-numeric: tabular-nums; }
.pass-play { position: relative; }
.pass-play.has-invite::after { content: ""; position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: #3ecf6b; box-shadow: 0 0 0 3px rgba(62,207,107,.25); }