:root{
  --bg:#0b0d10; --panel:#12161c; --card:#151b23; --muted:#9aa4b2; --text:#e6edf3; --line:#232c37;
  --accent:#67e8f9; --accent2:#a78bfa;
  --memory:#f3c9dd; --memory2:#d8c4ff; --memoryText:#fff2f8;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial; background:var(--bg); color:var(--text); }
a{ color: var(--accent); text-decoration:none; }
.hidden{ display:none !important; }
.muted{ color:var(--muted); }

.top{ position:sticky; top:0; z-index:20; background:linear-gradient(180deg, rgba(11,13,16,.98), rgba(11,13,16,.86)); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); padding:14px 16px; display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.brand{ display:flex; gap:10px; align-items:center; }
.logo{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(145deg, rgba(103,232,249,.12), rgba(167,139,250,.10)); border:1px solid rgba(103,232,249,.25); }
.h1{ font-size:16px; font-weight:700; letter-spacing:.2px;}
.h2{ font-size:12px; color:var(--muted); margin-top:2px; }
.topNav{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.navLink{ padding:9px 12px; border-radius:999px; background:var(--panel); border:1px solid var(--line); color:var(--text); font-size:13px; }
.navLink:hover{ border-color:rgba(103,232,249,.4); }
.featured{ font-size:12px; color:var(--muted); border:1px solid var(--line); background:rgba(0,0,0,.10); padding:8px 10px; border-radius:999px; }

main{ padding:18px 16px 84px; max-width:1400px; margin:0 auto; }
.section{ margin-top:18px; }
.sectionHead{ display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.sectionKicker{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#bfefff; }
.sectionTitle{ font-size:26px; font-weight:800; color:#f6fbff; }
.sectionTitle.alt{ font-size:22px; }

.heroSection{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap:16px; align-items:stretch; }
.heroCard, .heroMedia, .panel, .controlsPanel{ border:1px solid var(--line); border-radius:24px; background:linear-gradient(180deg, rgba(21,27,35,.96), rgba(18,22,28,.98)); box-shadow:0 20px 50px rgba(0,0,0,.18); }
.heroCard{ padding:22px; position:relative; overflow:hidden; }
.heroCard::before{
  content:""; position:absolute; inset:-1px;
  background:
    radial-gradient(800px 260px at 18% -10%, rgba(103,232,249,.15), transparent 60%),
    radial-gradient(800px 260px at 95% 115%, rgba(167,139,250,.14), transparent 58%);
  pointer-events:none;
}
.heroCard > *{ position:relative; }
.heroKicker{ display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(103,232,249,.10); color:#cbf6fb; border:1px solid rgba(103,232,249,.26); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.heroTitle{ margin-top:14px; font-size:40px; line-height:1.05; font-weight:900; letter-spacing:-.02em; max-width:12ch; }
.heroText{ margin-top:14px; color:#d9e6ee; line-height:1.65; font-size:16px; max-width:70ch; }
.heroQuote{ margin-top:14px; color:#fff3da; font-style:italic; font-weight:700; }
.ctaRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 15px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text); font-weight:700; }
.btn:hover{ border-color:rgba(103,232,249,.38); }
.btn.primary{ background:linear-gradient(145deg, rgba(103,232,249,.16), rgba(167,139,250,.16)); border-color:rgba(103,232,249,.34); }
.btn.ghost{ background:rgba(0,0,0,.12); }
.btn.disabled{ opacity:.65; pointer-events:none; }
.heroMedia{ padding:14px; }

.watchGrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.95fr); gap:16px; }
.watchCopy{ display:flex; flex-direction:column; gap:10px; }
.watchSubtitle{ color:#d9e6ee; line-height:1.55; font-size:15px; }
.watchNote{ color:var(--muted); line-height:1.5; font-size:14px; }
.watchMedia{ min-width:0; }

.platformGrid{ margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:14px; }
.platformMiniGrid{ margin-top:10px; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
.platformCard{ overflow:hidden; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg, rgba(21,27,35,.97), rgba(18,22,28,.98)); }
.platformCard.primaryPlatform{ border-color:rgba(103,232,249,.38); box-shadow:0 0 0 1px rgba(103,232,249,.08); }
.platformBannerWrap{ aspect-ratio: 12 / 4.8; overflow:hidden; border-bottom:1px solid rgba(154,164,178,.16); background:#0f141a; }
.platformBanner{ width:100%; height:100%; display:block; object-fit:cover; }
.platformBanner.placeholder{ display:grid; place-items:center; color:#d9e6ee; font-weight:800; padding:16px; background:linear-gradient(145deg, rgba(103,232,249,.10), rgba(167,139,250,.10)); }
.platformRow{ display:flex; gap:14px; align-items:flex-start; padding:14px; }
.platformAvatar{ width:72px; height:72px; border-radius:18px; object-fit:cover; border:1px solid rgba(154,164,178,.16); flex:0 0 auto; background:#0f141a; }
.platformAvatar.placeholder{ display:grid; place-items:center; font-size:32px; }
.platformMeta{ min-width:0; flex:1; }
.platformNameRow{ display:flex; gap:10px; justify-content:space-between; align-items:start; }
.platformName{ font-size:20px; font-weight:900; }
.platformKind{ margin-top:2px; color:var(--muted); font-size:13px; }
.platformHeadline{ margin-top:10px; font-weight:800; color:#f6fbff; }
.platformDescription{ margin-top:8px; color:#d9e6ee; line-height:1.55; }
.platformFooterRow{ margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.statusPill{ display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(103,232,249,.10); border:1px solid rgba(103,232,249,.20); color:#dff8fd; font-size:12px; font-weight:700; }

.chipgroups{ display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.chipgroup{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.glabel{ font-size:12px; color:var(--muted); }
.controlsPanel{ padding:14px; display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.selects{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sel{ display:flex; gap:6px; align-items:center; padding:8px 10px; border:1px solid var(--line); background:var(--panel); border-radius:12px; }
.sel span{ font-size:12px; color:var(--muted); }
.sel select{ background:transparent; color:var(--text); border:none; outline:none; font-size:13px; }
.search{ width:min(520px, 100%); padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--text); outline:none; }
.search:focus{ border-color:rgba(103,232,249,.45); box-shadow: 0 0 0 3px rgba(103,232,249,.10); }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ cursor:pointer; padding:9px 10px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:12px; }
.chip.active{ border-color:rgba(103,232,249,.55); background:rgba(103,232,249,.10); }

.heart{ margin-top:12px; padding:16px; border-radius:22px; border:1px solid rgba(154,230,180,.18); background:linear-gradient(135deg, rgba(154,230,180,.12), rgba(167,139,250,.08), rgba(15,23,32,.72)); }
.heartKicker{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#b8f4ca; margin-bottom:6px; }
.heartTitle{ font-size:22px; font-weight:800; color:#f4fbf6; }
.heartIntro{ margin-top:8px; color:#d7e7dc; max-width:920px; line-height:1.55; }
.heartQuote{ margin-top:10px; color:#fff3da; font-style:italic; font-weight:700; }
.heartCards{ margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.heartCard{ padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(10,13,18,.32); }
.heartCardTitle{ font-weight:800; margin-bottom:6px; }
.heartCardText{ color:#d9e6ee; line-height:1.5; font-size:14px; }
.privacy{ border-color:rgba(255,226,165,.22); background:linear-gradient(135deg, rgba(255,226,165,.12), rgba(244,114,182,.08), rgba(15,23,32,.74)); }
.privacy .heartKicker{ color:#ffe7a8; }
.privacy .heartQuote{ color:#fff6e0; }
.message{ border-color:rgba(103,232,249,.20); background:linear-gradient(135deg, rgba(103,232,249,.10), rgba(167,139,250,.10), rgba(15,23,32,.76)); }
.message .heartKicker{ color:#bfefff; }
.messageSummary{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.messageLine{ padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(10,13,18,.34); color:#eef7fb; font-weight:700; }
.messagePrinciples, .messageArc{ margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.messageCard{ padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(10,13,18,.32); }
.messageCardTitle{ font-weight:800; margin-bottom:6px; }
.messageRepeat{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.messageRepeatLine{ padding:7px 10px; border-radius:999px; border:1px solid rgba(103,232,249,.18); background:rgba(103,232,249,.08); color:#dff8fd; font-size:12px; }

.aboutGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.timelineGrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.timelineCard{ padding:12px; border-radius:14px; border:1px solid rgba(154,164,178,.14); background:rgba(0,0,0,.12); }
.timelineDateRow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.timelineDateChip{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid rgba(103,232,249,.18); background:rgba(103,232,249,.10); color:#dff8fd; font-size:12px; font-weight:700; letter-spacing:.02em; white-space:normal; max-width:100%; }
.timelineDateMeta{ font-size:11px; color:#9fd8e6; text-transform:uppercase; letter-spacing:.08em; }
.timelineMetaRow{ display:flex; gap:8px; flex-wrap:wrap; margin:-2px 0 8px; }
.timelineMetaChip{ display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; border:1px solid rgba(191,219,254,.16); background:rgba(191,219,254,.08); color:#e8f2ff; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.timelineText{ margin-top:8px; color:#eef4fb; line-height:1.5; font-size:14px; }
.journeyPanel{ background:linear-gradient(180deg, rgba(14,20,28,.84), rgba(8,12,18,.72)); }
.journeySummary{ display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 12px; }
.journeySummaryChip{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:rgba(167,139,250,.10); border:1px solid rgba(167,139,250,.18); color:#efe7ff; font-size:12px; }
.journeyRail{ position:relative; display:grid; gap:12px; }
.journeyRail::before{ content:''; position:absolute; left:10px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg, rgba(167,139,250,.45), rgba(103,232,249,.18)); }
.journeyStep{ position:relative; display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:flex-start; }
.journeyDot{ width:10px; height:10px; border-radius:999px; background:#d8b4fe; margin-top:10px; box-shadow:0 0 0 4px rgba(167,139,250,.14); position:relative; z-index:1; }
.journeyCard{ padding:12px; border-radius:14px; border:1px solid rgba(167,139,250,.14); background:rgba(255,255,255,.03); }
.journeyHeader{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.journeyPhase{ display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px; border:1px solid rgba(167,139,250,.14); background:rgba(167,139,250,.08); color:#efe7ff; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.journeyTitle{ font-size:16px; font-weight:700; color:#f6fbff; margin-top:4px; }
.journeyPreview{ margin-top:8px; color:#d9ceff; font-size:12px; }

.card{ border:1px solid var(--line); background:linear-gradient(180deg, rgba(21,27,35,.95), rgba(18,22,28,.96)); border-radius:18px; padding:14px; position:relative; overflow:hidden; cursor:pointer; transition: transform .08s ease, border-color .08s ease; }
.card:hover{ transform: translateY(-1px); border-color: rgba(103,232,249,.35); }
.card::before{ content:""; position:absolute; inset:-1px; background: radial-gradient(800px 240px at 20% -10%, rgba(103,232,249,.14), transparent 60%), radial-gradient(800px 240px at 90% 120%, rgba(167,139,250,.12), transparent 55%); pointer-events:none; }
.card > * { position:relative; }
.photo{ width:100%; aspect-ratio: 4 / 3; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0f141a; margin-bottom:10px; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.name{ font-weight:800; font-size:16px; letter-spacing:.2px; }
.badge{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:rgba(0,0,0,.15); }
.badge.memory{ border-color:rgba(243,201,221,.42); color:#ffe7f0; background:rgba(243,201,221,.11); }
.badge.resident{ border-color:rgba(103,232,249,.45); color:#c9f6fb; background:rgba(103,232,249,.10); }
.sub{ margin-top:8px; color:var(--muted); font-size:12px; line-height:1.35; }
.kv{ margin-top:10px; display:grid; grid-template-columns: 1fr; gap:6px; }
.k{ color:var(--muted); }
.v{ color:var(--text); }
.storyPanel, .statCard, .infoPanel, .miniFact, .miniCard{ padding:12px; border:1px solid rgba(154,164,178,.14); background:rgba(0,0,0,.12); border-radius:14px; }
.mcTitle, .miniFactLabel, .sectionLabel, .statLabel{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:800; }
.mcText, .storyLead, .highlightValue{ margin-top:8px; color:#eef4fb; line-height:1.55; font-size:14px; }
.miniCardEyebrow{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.pathwayCard{ border-color:rgba(103,232,249,.18); background:linear-gradient(135deg, rgba(103,232,249,.10), rgba(167,139,250,.08), rgba(10,13,18,.34)); }

.linkButtons{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.miniCardAction{ display:inline-flex; align-items:center; justify-content:center; padding:9px 12px; border-radius:12px; text-decoration:none; color:var(--text); background:rgba(103,232,249,.12); border:1px solid rgba(103,232,249,.22); font-weight:700; }
.miniCardAction.altAction{ background:rgba(19,35,53,.72); border-color:rgba(154,164,178,.18); }

.mcIcon{ font-size:20px; }
.miniFactValue, .statValue{ margin-top:6px; font-weight:700; color:#eef4fb; line-height:1.35; }
.foot{ position:fixed; bottom:0; left:0; right:0; padding:10px 16px; border-top:1px solid var(--line); background:rgba(11,13,16,.92); color:var(--muted); font-size:12px; }
.modal.hidden{ display:none; }
.modal{ position:fixed; inset:0; z-index:50; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); }
.modal-card{ position:relative; width: min(980px, calc(100vw - 24px)); margin: 40px auto; border-radius:20px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(21,27,35,.98), rgba(18,22,28,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.45); overflow:hidden; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px; border-bottom:1px solid rgba(154,164,178,.18); }
.modal-title{ font-weight:800; font-size:16px; }
.modal-x{ cursor:pointer; border:1px solid var(--line); background: rgba(0,0,0,.15); color: var(--text); border-radius:12px; padding:6px 10px; }
.modal-body{ padding:14px; display:grid; grid-template-columns: 400px 1fr; gap:14px; }
.modal-body .photo{ margin:0; min-height:420px; }
.pill{ display:inline-block; margin:0 6px 8px 0; font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:rgba(0,0,0,.12); }
.bunnyCard{ overflow:hidden; }
.photoTall{ position:relative; aspect-ratio: 4 / 3; max-height: 156px; }
.photoScrim{ position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45)); pointer-events:none; }
.cardTopPill{ position:absolute; top:10px; right:10px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(11,13,16,.65); color:#eef7fb; font-size:11px; font-weight:700; }
.nameRowTop{ align-items:flex-start; }
.cardKicker{ margin-top:4px; color:#c9f6fb; font-size:13px; font-weight:700; }
.storyTease{ margin-top:10px; line-height:1.5; color:#dce8f6; font-size:14px; }
.todayBubble{ margin-top:12px; padding:10px 12px; border-radius:14px; border:1px solid rgba(103,232,249,.22); background:rgba(103,232,249,.08); color:#ebfafe; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.todayLabel{ display:inline-flex; align-items:center; justify-content:center; padding:3px 8px; border-radius:999px; background:rgba(0,0,0,.22); color:#c9f6fb; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.miniFacts{ margin-top:12px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.modalMain{ display:flex; flex-direction:column; gap:12px; }
.modalKickerStatic{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:#c9f6fb; font-weight:700; }
.statGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.funFactList{ margin:10px 0 0; padding-left:18px; color:#eef4fb; }
.funFactList li{ margin-bottom:8px; line-height:1.45; }
.modalToday{ margin-top:12px; }

.card.maleCard{ border-color: rgba(103,232,249,.28); background:linear-gradient(180deg, rgba(16,30,44,.96), rgba(15,23,32,.96)); }
.card.maleCard:hover{ border-color: rgba(103,232,249,.44); }
.card.maleCard::before{ background: radial-gradient(800px 240px at 20% -10%, rgba(103,232,249,.16), transparent 60%), radial-gradient(800px 240px at 90% 120%, rgba(125,211,252,.12), transparent 55%); }
.card.maleCard .cardKicker{ color:#8fe8ff; }
.card.maleCard .todayBubble, .card.maleCard .miniFact, .malePanelSoft{ border-color: rgba(103,232,249,.16); background: rgba(103,232,249,.08); }
.card.maleCard .miniFactValue{ color:#eefbff; }
.card.maleCard .miniFactLabel{ color:#c5f6ff; }
.cardTopPill.malePill{ background:rgba(13,28,40,.74); border-color:rgba(103,232,249,.25); color:#eefbff; }
.badge.resident.male{ border-color: rgba(103,232,249,.30); color:#dff8fd; background: rgba(103,232,249,.10); }

.card.femaleCard{ border-color: rgba(244,171,203,.28); background:linear-gradient(180deg, rgba(43,23,38,.96), rgba(22,18,30,.98)); }
.card.femaleCard:hover{ border-color: rgba(244,171,203,.44); }
.card.femaleCard::before{ background: radial-gradient(800px 240px at 20% -10%, rgba(244,171,203,.16), transparent 60%), radial-gradient(800px 240px at 90% 120%, rgba(216,180,254,.12), transparent 55%); }
.card.femaleCard .cardKicker{ color:#ffd1e4; }
.card.femaleCard .todayBubble, .card.femaleCard .miniFact, .femalePanelSoft{ border-color: rgba(244,171,203,.16); background: rgba(244,171,203,.08); }
.card.femaleCard .miniFactValue{ color:#fff4f8; }
.card.femaleCard .miniFactLabel{ color:#ffd7e8; }
.cardTopPill.femalePill{ background:rgba(41,21,35,.74); border-color:rgba(244,171,203,.25); color:#fff4f8; }
.badge.resident.female{ border-color: rgba(244,171,203,.30); color:#fff0f7; background: rgba(244,171,203,.10); }

.card.unknownCard{ border-color: rgba(167,139,250,.28); background:linear-gradient(180deg, rgba(28,24,43,.96), rgba(18,18,31,.98)); }
.card.unknownCard:hover{ border-color: rgba(167,139,250,.42); }
.card.unknownCard::before{ background: radial-gradient(800px 240px at 20% -10%, rgba(167,139,250,.16), transparent 60%), radial-gradient(800px 240px at 90% 120%, rgba(196,181,253,.12), transparent 55%); }
.card.unknownCard .cardKicker{ color:#ddd3ff; }
.card.unknownCard .todayBubble, .card.unknownCard .miniFact, .unknownPanelSoft{ border-color: rgba(167,139,250,.16); background: rgba(167,139,250,.08); }
.card.unknownCard .miniFactValue{ color:#f1eaff; }
.card.unknownCard .miniFactLabel{ color:#e5dcff; }
.cardTopPill.unknownPill{ background:rgba(28,22,42,.74); border-color:rgba(167,139,250,.25); color:#f1eaff; }
.badge.resident.unknown{ border-color: rgba(167,139,250,.30); color:#f1eaff; background: rgba(167,139,250,.10); }

.card.memoryCard{ border-color: rgba(243,201,221,.28); background:linear-gradient(180deg, rgba(31,20,28,.96), rgba(24,18,30,.98)); }
.card.memoryCard:hover{ border-color: rgba(243,201,221,.45); }
.card.memoryCard::before{ background: radial-gradient(800px 240px at 20% -10%, rgba(243,201,221,.16), transparent 60%), radial-gradient(800px 240px at 90% 120%, rgba(216,196,255,.14), transparent 55%); }
.card.memoryCard .cardKicker{ color:#ffdbe9; }
.card.memoryCard .storyTease{ color:#f7eaf0; }
.card.memoryCard .photo{ border-color: rgba(243,201,221,.18); }
.card.memoryCard .pill{ background:rgba(255,255,255,.05); color:#fdeaf1; border-color:rgba(243,201,221,.16); }
.card.memoryCard .miniFact, .card.memoryCard .storyPanel, .card.memoryCard .statCard, .card.memoryCard .infoPanel{ background:rgba(255,255,255,.04); border-color:rgba(243,201,221,.14); }
.card.memoryCard .miniFactLabel, .memoryLabel{ color:#ffd7e8; }
.card.memoryCard .miniFactValue{ color:#fff4f8; }
.cardTopPill.memoryPill{ background:rgba(38,24,34,.74); border-color:rgba(243,201,221,.25); color:#fff2f8; }
.memoryBubble{ margin-top:12px; padding:10px 12px; border-radius:14px; border:1px solid rgba(243,201,221,.26); background:rgba(243,201,221,.11); color:var(--memoryText); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.memoryLabel{ display:inline-flex; align-items:center; justify-content:center; padding:3px 8px; border-radius:999px; background:rgba(0,0,0,.22); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }

.showMoreBar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; margin:16px 0 4px; }
.modalNavRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modalNavBtn{ min-width:42px; }
.modalBrowseHint{ margin-top:8px; }

.modal-card.memoryModal{ border-color:rgba(243,201,221,.24); background:linear-gradient(180deg, rgba(29,20,30,.99), rgba(23,18,29,.99)); }
.modal-card.memoryModal .modal-head{ border-bottom-color:rgba(243,201,221,.16); }
.modal-card.memoryModal .modal-title{ color:#fff1f6; }
.modalMemoryHero{ margin-top:12px; padding:12px 14px; border-radius:14px; border:1px solid rgba(243,201,221,.26); background:rgba(243,201,221,.10); color:#fff2f8; }
.memoryNote{ margin-top:8px; color:#ffe7f0; line-height:1.55; }
.memoryPanelSoft{ border-color:rgba(243,201,221,.18); background:rgba(255,255,255,.05); }
.profilePeek{ margin-top:12px; color:#9fb8cc; font-size:12px; line-height:1.45; }
.highlightsGrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.highlightCard{ padding:12px; border:1px solid rgba(154,164,178,.14); background:rgba(0,0,0,.12); border-radius:14px; }
.modalHeroPhoto{ margin-bottom:10px; }
.thumbRail{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.thumbBtn{ width:64px; height:64px; padding:0; border-radius:12px; overflow:hidden; border:1px solid rgba(154,164,178,.18); background:rgba(0,0,0,.12); cursor:pointer; }
.thumbBtn img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumbBtn.active{ border-color:rgba(103,232,249,.45); box-shadow:0 0 0 2px rgba(103,232,249,.14); }
.galleryMeta{ margin:0 0 12px; color:var(--muted); font-size:12px; }

@media (max-width: 980px){
  .heroSection, .watchGrid{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .modal-body{ grid-template-columns: 1fr; }
  .miniFacts, .statGrid, .highlightsGrid, .timelineGrid{ grid-template-columns:1fr; }
  .platformRow{ flex-direction:column; }
  .platformAvatar{ width:84px; height:84px; }
  .heroTitle{ font-size:32px; }
}

.platformPillStrip{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.platformPill{ display:inline-flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:14px; border:1px solid rgba(159,176,196,.16); background:rgba(10,15,22,.34); color:var(--text); text-decoration:none; min-width:160px; }
.platformPill small{ color:var(--muted); font-size:11px; }
.platformPill.active{ border-color:rgba(154,230,180,.32); background:rgba(154,230,180,.08); }
.platformFacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-top:12px; }
.platformFact{ padding:10px 12px; border-radius:14px; border:1px solid rgba(159,176,196,.14); background:rgba(255,255,255,.03); display:flex; flex-direction:column; gap:6px; }
.platformFactLabel{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.platformActionRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.watchStepsWrap{ margin-top:14px; }
.watchSteps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:10px; }
.watchStep{ padding:12px; border-radius:14px; border:1px solid rgba(159,176,196,.14); background:rgba(0,0,0,.14); }
.watchStepTitle{ font-weight:800; }
.watchStepText{ margin-top:8px; color:#dce7f3; line-height:1.55; font-size:14px; }
.watchQuickLinks{ margin-top:14px; }
.watchQuickRow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:10px; }
.quickLinkCard{ text-decoration:none; display:block; }

.rabbitHolePanel{ display:grid; gap:14px; }
.rabbitHoleGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.rabbitHoleCard{ display:block; text-decoration:none; color:inherit; padding:14px; border-radius:18px; border:1px solid rgba(103,232,249,.16); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); box-shadow:0 8px 24px rgba(0,0,0,.16); }
.rabbitHoleCard.primary{ border-color:rgba(248,113,113,.28); background:linear-gradient(180deg, rgba(248,113,113,.13), rgba(103,232,249,.05)); }
.rabbitHoleTitle{ font-weight:900; color:#f8fafc; font-size:16px; }
.rabbitHoleText{ margin-top:6px; color:#c9dae6; line-height:1.5; }
.rabbitTrail{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.trailStop{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:rgba(103,232,249,.08); border:1px solid rgba(103,232,249,.14); }
.trailStop span{ width:28px; height:28px; border-radius:999px; display:grid; place-items:center; background:rgba(248,113,113,.18); color:#fff; font-weight:900; }
.trailStop b{ display:block; color:#f8fafc; }
.trailStop small{ display:block; color:#c9dae6; }
.trailArrow{ color:#9ddcf2; font-weight:900; }
.wanderGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.wanderCard{ text-align:left; cursor:pointer; padding:12px; border-radius:16px; border:1px solid rgba(103,232,249,.15); background:rgba(255,255,255,.03); color:inherit; }
.wanderReason{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8bd0ea; margin-bottom:6px; }
.wanderName{ font-weight:900; color:#f8fafc; }
.wanderText{ margin-top:6px; color:#c9dae6; line-height:1.45; font-size:13px; }


.browseGuidePanel{ margin-top:12px; }
.compactSectionHead{ margin-bottom:0; }
#filters.controlsPanel{ position: sticky; top: 16px; z-index: 12; backdrop-filter: blur(8px); }
.modalCrumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; color:var(--muted); font-size:12px; }
.crumbLink, .crumbCurrent, .crumbMeta{ color:var(--muted); text-decoration:none; }
.crumbLink:hover{ color:var(--text); }
.crumbCurrent{ color:var(--text); font-weight:700; }
.crumbSep{ opacity:.55; }
.crumbMeta{ margin-left:auto; padding:4px 8px; border-radius:999px; border:1px solid rgba(159,176,196,.14); background:rgba(11,15,20,.22); }
.modalHeaderActions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.modalActionBtn{ background: rgba(19,35,53,.62); }
.partnerJumpBtn{ border-color: rgba(103,232,249,.26); background: rgba(103,232,249,.10); }
.modalPartnerLine{ margin-top:8px; color:#dff8fd; font-size:13px; line-height:1.5; }
.modalPathChips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.modalPathPill{ text-decoration:none; }
@media (max-width: 720px){ #filters.controlsPanel{ top:10px; } .crumbMeta{ margin-left:0; } }

.pathLensPanel{ background:linear-gradient(180deg, rgba(19,24,35,.88), rgba(13,17,25,.76)); }
.pathLensText{ color:#edf4fb; line-height:1.6; font-size:15px; }
.pathLensChips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pathLensChip{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:rgba(96,165,250,.10); border:1px solid rgba(96,165,250,.18); color:#e7f2ff; font-size:12px; }

.frontDoorGrid{ margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.frontDoorCard{ min-height:100%; }