: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; }
html.overlay-scroll-locked, body.overlay-scroll-locked{ overflow:hidden; overscroll-behavior:none; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial; background:var(--bg); color:var(--text); }
body.overlay-scroll-locked{ position:fixed; left:0; right:0; width:100%; }
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(240px, 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; padding:16px 12px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.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)); max-height:calc(100dvh - 32px); margin: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; display:flex; flex-direction:column; }
.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; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.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: 1 / 1; max-height:none; }
.bunnyCard .photo img{ object-position:center center; }
.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%; }


/* Identity split 1185: Sanctuary = live / real / dark */
:root{
  --bg:#081016;
  --panel:#0f1820;
  --card:#121e27;
  --muted:#95a7b4;
  --text:#ebf2f7;
  --line:#1d2a36;
  --accent:#78d7d8;
  --accent2:#84a7ff;
}
body{
  background:
    radial-gradient(circle at 12% -8%, rgba(255,255,255,.82), transparent 30%),
    radial-gradient(circle at 88% 110%, rgba(206,173,107,.22), transparent 28%),
    linear-gradient(180deg, #f7f0e2 0%, #f1e7d4 55%, #eadfc8 100%);
}
.heroCard, .heroMedia, .panel, .controlsPanel, .platformCard, .card{
  background:linear-gradient(180deg, rgba(14,22,29,.97), rgba(10,17,23,.99));
}
.logo{ background:linear-gradient(145deg, rgba(120,215,216,.16), rgba(132,167,255,.14)); border-color:rgba(120,215,216,.28); }


/* Public sanctuary refresh 1035: light sanctuary field with subtle loose-hay texture */
:root{
  --bg:#f3ead9;
  --panel:#fffaf1;
  --card:#fff8ef;
  --muted:#6e6152;
  --text:#2e261f;
  --line:#d8c7a9;
  --accent:#6d8555;
  --accent2:#b78546;
  --memory:#edd7df;
  --memory2:#e5d9ee;
  --memoryText:#513a45;
}
body{
  position:relative;
  isolation:isolate;
  background:transparent;
  color:var(--text);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.76), transparent 0 32%),
    radial-gradient(circle at 84% 16%, rgba(228,201,145,.22), transparent 0 26%),
    radial-gradient(circle at 72% 100%, rgba(181,128,62,.10), transparent 0 28%),
    linear-gradient(180deg, #f7f0e2 0%, #f1e7d4 56%, #eadfc8 100%);
}
body::after{
  content:"";
  position:fixed;
  inset:-2%;
  z-index:-2;
  pointer-events:none;
  opacity:.56;
  background-image:
    repeating-linear-gradient(24deg, transparent 0 20px, rgba(178,144,73,.14) 20px 22px, transparent 22px 70px),
    repeating-linear-gradient(116deg, transparent 0 28px, rgba(140,110,48,.10) 28px 29.5px, transparent 29.5px 96px),
    repeating-linear-gradient(62deg, transparent 0 36px, rgba(208,171,92,.08) 36px 38px, transparent 38px 114px),
    repeating-linear-gradient(84deg, transparent 0 42px, rgba(112,134,95,.05) 42px 43.5px, transparent 43.5px 132px);
}
.top{
  background:linear-gradient(180deg, rgba(252,247,238,.94), rgba(248,240,226,.88));
  border-bottom:1px solid rgba(126,97,52,.16);
  box-shadow:0 12px 28px rgba(83,61,33,.08);
}
.top::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background:
    repeating-linear-gradient(104deg, transparent 0 44px, rgba(179,135,68,.070) 44px 45.5px, transparent 45.5px 116px),
    repeating-linear-gradient(84deg, transparent 0 62px, rgba(113,136,95,.045) 62px 63.5px, transparent 63.5px 156px);
}
.logo{
  background:linear-gradient(145deg, rgba(109,133,85,.16), rgba(183,133,70,.14));
  border-color:rgba(109,133,85,.26);
}
.h1,.sectionTitle,.rabbitHoleTitle,.trailStop b,.wanderName,.platformHeadline,.platformName,.journeyTitle,.heroTitle,.heartTitle{ color:#2c241d; }
.h2,.featured,.glabel,.sel span,.platformKind,.sectionLabel,.statLabel,.miniFactLabel,.mcTitle,.watchNote,.sub,.galleryMeta,.platformFactLabel,.crumbLink,.crumbMeta,.modalCrumbs,.profilePeek,.k,.journeyPreview,.foot{ color:var(--muted); }
.sectionKicker,.heartKicker{ color:#9a6d32; }
.heroCard, .heroMedia, .panel, .controlsPanel, .platformCard, .card, .platformFact, .watchStep, .rabbitHoleCard, .wanderCard, .highlightCard, .storyPanel, .statCard, .infoPanel, .miniFact, .miniCard, .journeyCard, .heartCard, .messageCard{
  background:linear-gradient(180deg, rgba(255,251,244,.96), rgba(248,241,229,.98));
  border-color:rgba(136,110,72,.14);
  box-shadow:0 16px 36px rgba(89,64,32,.08);
}
.heroCard::before{
  background:
    radial-gradient(720px 240px at 12% -10%, rgba(184,135,70,.16), transparent 60%),
    radial-gradient(720px 240px at 96% 112%, rgba(109,133,85,.13), transparent 58%);
}
.featured,.navLink,.chip,.sel,.search,.platformPill,.crumbMeta,.pill{
  background:rgba(255,251,244,.86);
  border-color:rgba(136,110,72,.16);
  color:var(--text);
}
.navLink:hover,.chip.active,.btn:hover,.search:focus,.platformPill.active{
  border-color:rgba(109,133,85,.44);
}
.featured{ box-shadow:0 8px 20px rgba(89,64,32,.06); }
.heroKicker,.statusPill,.todayLabel,.journeyPhase,.journeySummaryChip,.pathLensChip{
  background:rgba(109,133,85,.10);
  border-color:rgba(109,133,85,.22);
  color:#4d6540;
}
.heroText,.heroQuote,.watchSubtitle,.watchStepText,.watchNote,.platformDescription,.heartIntro,.heartCardText,.storyLead,.mcText,.highlightValue,.storyTease,.rabbitHoleText,.trailStop small,.wanderText,.pathLensText,.funFactList,.memoryNote{
  color:#4d4033;
}
.heroQuote,.heartQuote,.privacy .heartQuote{ color:#7a5933; }
.btn{
  background:rgba(255,248,238,.88);
  border-color:rgba(126,97,52,.16);
  color:var(--text);
}
.btn.primary, .miniCardAction{
  background:linear-gradient(135deg, rgba(109,133,85,.16), rgba(183,133,70,.16));
  border-color:rgba(109,133,85,.28);
  color:#2e261f;
}
.btn.ghost, .miniCardAction.altAction, .modalActionBtn{
  background:rgba(123,100,68,.08);
  border-color:rgba(123,100,68,.16);
  color:#2e261f;
}
.pathwayCard, .message{
  background:linear-gradient(135deg, rgba(109,133,85,.09), rgba(183,133,70,.08), rgba(255,250,241,.94));
  border-color:rgba(109,133,85,.16);
}
.heart{
  background:linear-gradient(135deg, rgba(193,179,126,.14), rgba(255,251,241,.92), rgba(109,133,85,.07));
  border-color:rgba(160,136,86,.22);
}
.privacy{
  background:linear-gradient(135deg, rgba(214,184,122,.18), rgba(255,250,241,.94), rgba(181,150,112,.07));
  border-color:rgba(181,140,74,.20);
}
.messageLine,.trailStop,.todayBubble,.memoryBubble{
  background:rgba(109,133,85,.08);
  border-color:rgba(109,133,85,.16);
  color:#3e352c;
}
.timelineCard{ background:rgba(255,251,243,.84); border-color:rgba(136,110,72,.14); }
.timelineMetaChip{ background:rgba(183,133,70,.08); border-color:rgba(183,133,70,.16); color:#6a4c29; }
.platformBannerWrap,.photo,.platformAvatar{ background:#efe7d7; border-color:rgba(136,110,72,.14); }
.platformBanner.placeholder{ background:linear-gradient(145deg, rgba(109,133,85,.10), rgba(183,133,70,.10)); color:#4b4034; }
.quickLinkCard,.rabbitHoleCard{ color:var(--text); }
.rabbitHoleCard.primary{ background:linear-gradient(180deg, rgba(183,133,70,.13), rgba(109,133,85,.07)); border-color:rgba(183,133,70,.24); }
.trailArrow,.wanderReason,.message .heartKicker{ color:#8c6534; }
.foot{ background:rgba(247,240,227,.92); border-top:1px solid rgba(126,97,52,.12); position:relative; overflow:hidden; }
.foot::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    repeating-linear-gradient(108deg, transparent 0 48px, rgba(179,135,68,.060) 48px 49.5px, transparent 49.5px 118px),
    repeating-linear-gradient(90deg, transparent 0 76px, rgba(95,125,94,.038) 76px 77.5px, transparent 77.5px 168px);
}
.modal-backdrop{ background:rgba(74,55,31,.26); backdrop-filter:blur(6px); }
.modal-card{
  background:linear-gradient(180deg, rgba(255,251,244,.99), rgba(247,240,228,.99));
  border-color:rgba(136,110,72,.16);
  box-shadow:0 28px 80px rgba(69,49,26,.18);
}
.modal-head,.platformBannerWrap{ border-bottom-color:rgba(136,110,72,.14); }
.modal-title,.modalKickerStatic,.crumbCurrent,.name,.statValue,.miniFactValue,.v,.platformName,.rabbitHoleTitle,.wanderName,.journeyTitle,.platformHeadline,.heroTitle,.heartTitle,.heartCardTitle,.messageCardTitle{ color:#2d251e; }
.modal-x{ background:rgba(123,100,68,.08); color:#2d251e; }
.photoScrim{ background:linear-gradient(180deg, rgba(255,255,255,0), rgba(77,55,30,.18)); }
.card{ background:linear-gradient(180deg, rgba(255,251,244,.97), rgba(248,241,230,.98)); }
.card::before{
  background:
    radial-gradient(720px 220px at 18% -10%, rgba(183,133,70,.12), transparent 60%),
    radial-gradient(720px 220px at 92% 120%, rgba(109,133,85,.10), transparent 55%);
}
.cardTopPill,.cardTopPill.malePill,.cardTopPill.femalePill,.cardTopPill.unknownPill,.cardTopPill.memoryPill{
  background:rgba(255,250,242,.88);
  border-color:rgba(136,110,72,.16);
  color:#514336;
}
.badge{ background:rgba(255,250,242,.82); color:#5c4d40; border-color:rgba(136,110,72,.16); }
.badge.resident,.badge.resident.male,.badge.resident.female,.badge.resident.unknown{ background:rgba(109,133,85,.10); border-color:rgba(109,133,85,.16); color:#4d6540; }
.badge.memory{ background:rgba(177,128,154,.10); border-color:rgba(177,128,154,.16); color:#775265; }
.cardKicker,.card.maleCard .cardKicker{ color:#5b7247; }
.card.femaleCard .cardKicker{ color:#8a5d68; }
.card.unknownCard .cardKicker{ color:#69588c; }
.card.memoryCard .cardKicker,.memoryLabel{ color:#7a5264; }
.card.maleCard{ background:linear-gradient(180deg, rgba(243,248,239,.98), rgba(236,244,232,.98)); border-color:rgba(109,133,85,.18); }
.card.maleCard::before{ background: radial-gradient(700px 220px at 20% -10%, rgba(109,133,85,.14), transparent 60%), radial-gradient(700px 220px at 90% 120%, rgba(183,133,70,.08), transparent 55%); }
.card.femaleCard{ background:linear-gradient(180deg, rgba(251,243,244,.98), rgba(248,236,238,.98)); border-color:rgba(176,128,145,.18); }
.card.femaleCard::before{ background: radial-gradient(700px 220px at 20% -10%, rgba(195,140,156,.14), transparent 60%), radial-gradient(700px 220px at 90% 120%, rgba(183,133,70,.08), transparent 55%); }
.card.unknownCard{ background:linear-gradient(180deg, rgba(246,242,251,.98), rgba(240,236,248,.98)); border-color:rgba(133,112,170,.18); }
.card.unknownCard::before{ background: radial-gradient(700px 220px at 20% -10%, rgba(133,112,170,.14), transparent 60%), radial-gradient(700px 220px at 90% 120%, rgba(183,133,70,.08), transparent 55%); }
.card.memoryCard{ background:linear-gradient(180deg, rgba(250,244,247,.98), rgba(246,236,241,.98)); border-color:rgba(177,128,154,.18); }
.card.memoryCard::before{ background: radial-gradient(700px 220px at 20% -10%, rgba(177,128,154,.14), transparent 60%), radial-gradient(700px 220px at 90% 120%, rgba(140,124,167,.10), transparent 55%); }
.card.maleCard .todayBubble, .card.maleCard .miniFact, .malePanelSoft,
.card.femaleCard .todayBubble, .card.femaleCard .miniFact, .femalePanelSoft,
.card.unknownCard .todayBubble, .card.unknownCard .miniFact, .unknownPanelSoft,
.card.memoryCard .miniFact, .card.memoryCard .storyPanel, .card.memoryCard .statCard, .card.memoryCard .infoPanel, .memoryPanelSoft{
  background:rgba(255,250,242,.70);
  border-color:rgba(136,110,72,.14);
}
.pathLensPanel{ background:linear-gradient(180deg, rgba(255,250,242,.94), rgba(245,236,221,.92)); border-color:rgba(136,110,72,.14); }
.partnerJumpBtn{ background:rgba(109,133,85,.10); border-color:rgba(109,133,85,.18); color:#3d5132; }
.modalPartnerLine{ color:#4d4033; }
.crumbLink:hover{ color:#3a3028; }
#filters.controlsPanel{ background:rgba(252,247,238,.90); }
@media (max-width: 760px){
  .top{ background:linear-gradient(180deg, rgba(252,247,238,.98), rgba(248,240,226,.94)); }
}


/* Sanctuary public light polish 1036 */
:root{
  --bg:#f4eddc;
  --panel:rgba(255,249,240,.86);
  --card:rgba(255,250,244,.94);
  --muted:#6d5c4b;
  --text:#2d241d;
  --line:rgba(98,73,41,.16);
  --accent:#5f7d5e;
  --accent2:#b38744;
  --memory:#edd3dc;
  --memory2:#d9c6ed;
  --memoryText:#533343;
  --paper:#fffaf3;
  --paper2:#f8efdf;
  --shadow:0 18px 42px rgba(71,46,22,.10);
  --shadow-soft:0 10px 24px rgba(71,46,22,.08);
}
body{
  position:relative;
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(255,251,245,.92), transparent 62%),
    radial-gradient(920px 460px at 100% 0%, rgba(240,227,196,.55), transparent 54%),
    linear-gradient(180deg, #f7f0e4 0%, #f4eddc 44%, #efe4d0 100%);
  color:var(--text);
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}
body::before{
  z-index:0;
  opacity:.96;
  background:
    repeating-linear-gradient(106deg, transparent 0 18px, rgba(184,145,72,.120) 18px 20.5px, transparent 20.5px 62px),
    repeating-linear-gradient(97deg, transparent 0 28px, rgba(127,97,46,.090) 28px 30px, transparent 30px 94px),
    repeating-linear-gradient(118deg, transparent 0 42px, rgba(205,168,96,.075) 42px 44px, transparent 44px 118px),
    repeating-linear-gradient(74deg, transparent 0 36px, rgba(156,122,67,.055) 36px 37.5px, transparent 37.5px 102px),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  background-size:540px 320px, 460px 300px, 620px 360px, 520px 320px, 100% 100%;
  background-position:0 28px, 72px 0, 24px 92px, 160px 40px, 0 0;
}
body::after{
  z-index:0;
  opacity:.62;
  background:
    radial-gradient(720px 260px at 18% 10%, rgba(255,255,255,.36), transparent 68%),
    radial-gradient(860px 320px at 88% 24%, rgba(190,160,101,.18), transparent 74%),
    radial-gradient(760px 280px at 50% 100%, rgba(131,158,117,.11), transparent 74%),
    radial-gradient(980px 420px at 8% 72%, rgba(201,170,112,.12), transparent 76%);
}
main,.top,.foot{ position:relative; z-index:1; }
.modal{ z-index:50; }
a{ color:#4f694f; }
a:hover{ color:#3e5640; }
.top{
  background:linear-gradient(180deg, rgba(252,246,238,.95), rgba(248,241,231,.88));
  border-bottom:1px solid rgba(105,82,51,.12);
  box-shadow:0 10px 30px rgba(69,44,24,.08);
}
.top::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background:
    repeating-linear-gradient(104deg, transparent 0 44px, rgba(179,135,68,.070) 44px 45.5px, transparent 45.5px 116px),
    repeating-linear-gradient(84deg, transparent 0 62px, rgba(113,136,95,.045) 62px 63.5px, transparent 63.5px 156px);
}
.brand .h1{ color:#2f261f; }
.logo{
  background:linear-gradient(145deg, rgba(95,125,94,.14), rgba(179,135,68,.14));
  border:1px solid rgba(95,125,94,.20);
  box-shadow:0 8px 18px rgba(71,46,22,.08);
}
.h2,.featured,.glabel,.sub,.watchNote,.platformKind,.galleryMeta,.profilePeek{ color:var(--muted); }
.navLink,.sel,.search,.chip,.pill,.modal-x{
  background:rgba(255,251,246,.84);
  color:var(--text);
  border-color:rgba(97,73,42,.14);
}
.navLink:hover,.chip:hover,.modal-x:hover{ border-color:rgba(95,125,94,.30); background:#fffdfa; }
.featured{
  background:rgba(255,248,236,.84);
  color:#7a654f;
  border-color:rgba(107,84,53,.12);
}
.sectionKicker,.mcTitle,.miniFactLabel,.sectionLabel,.statLabel,.miniCardEyebrow,.todayLabel,.memoryLabel{
  color:#7a6236;
}
.sectionTitle,.heartTitle,.platformName,.modal-title,.heroTitle{
  color:#2a211a;
  font-family:Georgia, "Times New Roman", serif;
  letter-spacing:-.01em;
}
.sectionTitle{ text-wrap:balance; }
.heroCard,.heroMedia,.panel,.controlsPanel,.platformCard,.card,.storyPanel,.statCard,.infoPanel,.miniFact,.miniCard,.timelineCard,.highlightCard,.modal-card{
  background:linear-gradient(180deg, rgba(255,250,244,.95), rgba(251,244,235,.97));
  border-color:rgba(100,75,44,.14);
  box-shadow:var(--shadow-soft);
}
.heroCard,.heroMedia,.platformCard,.modal-card{ box-shadow:var(--shadow); }
.heroCard::before{
  background:
    radial-gradient(800px 250px at 12% -10%, rgba(95,125,94,.14), transparent 58%),
    radial-gradient(950px 280px at 100% 120%, rgba(179,135,68,.13), transparent 56%);
}
.heroCard::after,
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(108deg, transparent 0 42px, rgba(176,138,76,.082) 42px 44px, transparent 44px 116px),
    repeating-linear-gradient(96deg, transparent 0 62px, rgba(129,101,55,.052) 62px 63.5px, transparent 63.5px 148px),
    repeating-linear-gradient(70deg, transparent 0 74px, rgba(205,168,96,.040) 74px 75.5px, transparent 75.5px 182px);
  opacity:.56;
}
.heroCard > *, .card > *{ position:relative; }
.heroKicker{
  background:rgba(179,135,68,.10);
  color:#6f5526;
  border-color:rgba(179,135,68,.22);
}
.heroTitle{ font-size:46px; max-width:13ch; }
.heroText,.watchSubtitle,.platformDescription,.heartIntro,.heartCardText,.mcText,.storyLead,.highlightValue,.timelineText,.storyTease,.funFactList,.platformHeadline,.heartCardText,.messageCardTitle + .heartCardText{
  color:#4c3f33;
}
.heroQuote,.heartQuote,.privacy .heartQuote,.memoryNote{ color:#6b5236; }
.btn,.miniCardAction{
  background:rgba(255,250,244,.86);
  color:#2d241d;
  border-color:rgba(97,73,42,.14);
}
.btn:hover,.miniCardAction:hover{ border-color:rgba(95,125,94,.30); }
.btn.primary{
  background:linear-gradient(145deg, #7d6741, #b28a4d);
  border-color:rgba(123,95,45,.40);
  color:#fffaf2;
  box-shadow:0 10px 24px rgba(123,95,45,.16);
}
.btn.ghost,.miniCardAction.altAction{
  background:rgba(255,246,231,.82);
  border-color:rgba(176,138,76,.16);
}
.statusPill,.messageRepeatLine,.todayBubble{
  background:rgba(95,125,94,.08);
  border-color:rgba(95,125,94,.16);
  color:#415842;
}
.todayLabel,.memoryLabel{
  background:rgba(125,103,65,.10);
  color:#6a542f;
}
.chip.active{
  background:rgba(95,125,94,.10);
  border-color:rgba(95,125,94,.26);
  color:#304330;
}
.search:focus{
  border-color:rgba(95,125,94,.44);
  box-shadow:0 0 0 3px rgba(95,125,94,.10);
}
.platformBannerWrap,.platformAvatar,.photo{ background:#eadfc8; border-color:rgba(97,73,42,.12); }
.platformBanner.placeholder{
  background:linear-gradient(145deg, rgba(95,125,94,.10), rgba(179,135,68,.12));
  color:#473a2f;
}
.photoScrim{ background:linear-gradient(180deg, rgba(78,58,34,0), rgba(78,58,34,.24)); }
.cardTopPill{
  background:rgba(255,250,244,.84);
  color:#56432f;
  border-color:rgba(97,73,42,.12);
  backdrop-filter:blur(6px);
}
.cardKicker,.modalKickerStatic{ color:#715938; }
.badge{
  background:rgba(255,249,240,.92);
  color:#6c5948;
  border-color:rgba(97,73,42,.12);
}
.badge.resident{ background:rgba(95,125,94,.10); color:#4f694f; border-color:rgba(95,125,94,.22); }
.badge.memory{ background:rgba(205,155,177,.10); color:#7a5160; border-color:rgba(205,155,177,.22); }
.storyPanel,.statCard,.infoPanel,.miniFact,.miniCard,.timelineCard,.highlightCard{
  background:rgba(255,253,248,.68);
  border-color:rgba(100,75,44,.10);
}
.heart{
  border-color:rgba(111,145,101,.18);
  background:linear-gradient(135deg, rgba(111,145,101,.14), rgba(255,251,244,.84), rgba(174,145,84,.12));
}
.privacy{
  border-color:rgba(171,136,74,.20);
  background:linear-gradient(135deg, rgba(189,156,91,.16), rgba(255,251,244,.88), rgba(197,145,126,.10));
}
.message{
  border-color:rgba(95,125,94,.20);
  background:linear-gradient(135deg, rgba(95,125,94,.10), rgba(255,250,244,.88), rgba(160,130,82,.10));
}
.heart .heartKicker{ color:#59745a; }
.message .heartKicker{ color:#4f694f; }
.privacy .heartKicker{ color:#8c6d34; }
.heartCard,.messageCard{
  background:rgba(255,255,255,.54);
  border-color:rgba(97,73,42,.10);
}
.messageLine{
  background:rgba(179,135,68,.08);
  border-color:rgba(179,135,68,.12);
  color:#6c5230;
}
.frontDoorCard,.pathwayCard{
  border-color:rgba(95,125,94,.16);
  background:linear-gradient(135deg, rgba(95,125,94,.10), rgba(255,250,244,.92), rgba(179,135,68,.10));
}
.rabbitHoleCard{
  background:rgba(255,252,247,.82);
  border-color:rgba(100,75,44,.10);
  color:#2d241d;
}
.rabbitHoleCard.primary{
  background:linear-gradient(135deg, rgba(95,125,94,.12), rgba(255,251,246,.94), rgba(179,135,68,.12));
  border-color:rgba(95,125,94,.18);
}
.platformPill,.featuredPill{
  background:rgba(255,250,244,.86);
  color:#574531;
  border-color:rgba(97,73,42,.12);
}
.platformPill.active,.featuredPill.active{
  background:rgba(95,125,94,.12);
  color:#314431;
  border-color:rgba(95,125,94,.24);
}
.foot{
  background:rgba(251,246,239,.94);
  color:#7b6754;
  border-top:1px solid rgba(104,79,49,.12);
}
.modal-backdrop{ background:rgba(62,43,24,.24); }
.modal-card{
  background:linear-gradient(180deg, rgba(255,249,243,.98), rgba(249,241,230,.98));
  border-color:rgba(100,75,44,.14);
}
.modal-head{ border-bottom-color:rgba(100,75,44,.12); }
.modal-body .photo{ box-shadow:none; }
.card.maleCard{
  border-color:rgba(95,125,94,.18);
  background:linear-gradient(180deg, rgba(248,243,234,.96), rgba(241,236,226,.98));
}
.card.maleCard:hover{ border-color:rgba(95,125,94,.30); }
.card.maleCard::before{ background:radial-gradient(800px 240px at 20% -10%, rgba(95,125,94,.12), transparent 60%), radial-gradient(800px 240px at 90% 120%, rgba(179,135,68,.08), transparent 55%); }
.card.maleCard .cardKicker{ color:#567056; }
.card.maleCard .todayBubble, .card.maleCard .miniFact, .malePanelSoft{ border-color:rgba(95,125,94,.16); background:rgba(95,125,94,.08); }
.card.maleCard .miniFactValue{ color:#2f3f2f; }
.card.maleCard .miniFactLabel{ color:#5a725a; }
.cardTopPill.malePill{ background:rgba(244,250,244,.84); border-color:rgba(95,125,94,.20); color:#466046; }
.badge.resident.male{ border-color:rgba(95,125,94,.24); color:#456045; background:rgba(95,125,94,.08); }
.card.femaleCard{
  border-color:rgba(186,141,157,.20);
  background:linear-gradient(180deg, rgba(251,243,244,.96), rgba(247,237,239,.98));
}
.card.femaleCard:hover{ border-color:rgba(186,141,157,.30); }
.card.femaleCard::before{ background:radial-gradient(800px 240px at 20% -10%, rgba(210,165,181,.13), transparent 60%), radial-gradient(800px 240px at 90% 120%, rgba(179,135,68,.08), transparent 55%); }
.card.femaleCard .cardKicker{ color:#8a5f6d; }
.card.femaleCard .todayBubble, .card.femaleCard .miniFact, .femalePanelSoft{ border-color:rgba(186,141,157,.16); background:rgba(210,165,181,.08); }
.card.femaleCard .miniFactValue{ color:#5f3d49; }
.card.femaleCard .miniFactLabel{ color:#8a5f6d; }
.cardTopPill.femalePill{ background:rgba(255,247,249,.84); border-color:rgba(186,141,157,.20); color:#7b5561; }
.badge.resident.female{ border-color:rgba(186,141,157,.22); color:#7b5561; background:rgba(210,165,181,.08); }
.card.unknownCard{
  border-color:rgba(171,147,110,.20);
  background:linear-gradient(180deg, rgba(250,245,237,.96), rgba(244,238,228,.98));
}
.card.unknownCard:hover{ border-color:rgba(171,147,110,.30); }
.card.unknownCard::before{ background:radial-gradient(800px 240px at 20% -10%, rgba(179,135,68,.12), transparent 60%), radial-gradient(800px 240px at 90% 120%, rgba(126,116,84,.08), transparent 55%); }
.card.unknownCard .cardKicker{ color:#775d32; }
.card.unknownCard .todayBubble, .card.unknownCard .miniFact, .unknownPanelSoft{ border-color:rgba(171,147,110,.16); background:rgba(179,135,68,.08); }
.card.unknownCard .miniFactValue{ color:#5b4929; }
.card.unknownCard .miniFactLabel{ color:#7a6236; }
.cardTopPill.unknownPill{ background:rgba(255,250,242,.84); border-color:rgba(171,147,110,.20); color:#6c5731; }
.badge.resident.unknown{ border-color:rgba(171,147,110,.22); color:#6c5731; background:rgba(179,135,68,.08); }
.card.memoryCard{
  border-color:rgba(205,155,177,.22);
  background:linear-gradient(180deg, rgba(251,245,247,.97), rgba(246,237,241,.99));
}
.card.memoryCard:hover{ border-color:rgba(205,155,177,.32); }
.card.memoryCard::before{ background:radial-gradient(800px 240px at 20% -10%, rgba(205,155,177,.15), transparent 60%), radial-gradient(800px 240px at 90% 120%, rgba(217,198,237,.12), transparent 55%); }
.card.memoryCard .cardKicker{ color:#8b5f70; }
.card.memoryCard .storyTease{ color:#654652; }
.card.memoryCard .photo{ border-color:rgba(205,155,177,.18); }
.card.memoryCard .pill{ background:rgba(255,255,255,.56); color:#7f5664; border-color:rgba(205,155,177,.18); }
.card.memoryCard .miniFact, .card.memoryCard .storyPanel, .card.memoryCard .statCard, .card.memoryCard .infoPanel{ background:rgba(255,255,255,.48); border-color:rgba(205,155,177,.14); }
.card.memoryCard .miniFactLabel, .memoryLabel{ color:#8a5f6d; }
.card.memoryCard .miniFactValue{ color:#5e3d4a; }
.cardTopPill.memoryPill{ background:rgba(255,247,250,.86); border-color:rgba(205,155,177,.22); color:#7b5561; }
.memoryBubble,.modalMemoryHero{
  background:rgba(205,155,177,.11);
  border-color:rgba(205,155,177,.20);
  color:#654652;
}
.memoryPanelSoft{ border-color:rgba(205,155,177,.14); background:rgba(255,255,255,.44); }
.modal-card.memoryModal{ border-color:rgba(205,155,177,.22); background:linear-gradient(180deg, rgba(252,246,248,.99), rgba(246,236,241,.99)); }
.modal-card.memoryModal .modal-head{ border-bottom-color:rgba(205,155,177,.16); }
.modal-card.memoryModal .modal-title{ color:#6d4c5c; }
.highlightCard,.thumbBtn{ background:rgba(255,252,248,.74); border-color:rgba(100,75,44,.10); }
.thumbBtn.active{ border-color:rgba(95,125,94,.34); box-shadow:0 0 0 2px rgba(95,125,94,.10); }
.platformCard.primaryPlatform{ border-color:rgba(95,125,94,.24); box-shadow:0 0 0 1px rgba(95,125,94,.08), var(--shadow-soft); }
@media (max-width: 980px){
  .heroTitle{ font-size:40px; }
}
@media (max-width: 640px){
  .heroTitle{ font-size:34px; }
  .top{ box-shadow:0 6px 18px rgba(69,44,24,.07); }
  body::before{ opacity:.55; }
}