/* ===== Base / Theme ===== */
* { box-sizing: border-box; }
:root{
  --bg:#0e1624;        /* dark navy */
  --panel:#0b1320;
  --fg:#f2f5ff;        /* text */
  --muted:#a8b1c7;
  --card:#121c2e;
  --ring:#1f2d4a;      /* avatar ring */
  --accent:#7aa2ff;
  --radius:22px;
}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--fg);
}
body:not(.dark){
  --bg:#ffffff; --panel:#f6f7fb; --fg:#111; --muted:#555;
  --card:#ffffff; --ring:#e6e8ef; --accent:#0b63ff;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ opacity:.9; }

/* Smooth theme transition */
html, body, .hero, .card, .footer {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ===== Layout ===== */
.site-wrap{ max-width:1000px; margin:0 auto; padding:20px; }

/* ===== Top bar (fixed, centered links) ===== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:center;       /* center link group */
  gap:28px;
  padding:14px 0;
  background:var(--bg);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  z-index:5000;
}
.topbar .spacer{ flex:0; }      /* no pushing */
.topbar .links{
  display:flex;
  gap:24px;
}
.topbar .links a{
  color:var(--fg);
  font-weight:500;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.topbar .links a:hover{ border-bottom-color:currentColor; }
body:not(.dark) .topbar .links a{ color:#111; }

/* Pin home icon left */
.topbar .home{
  position:absolute;
  left:20px;
  font-size:26px;
  color:var(--fg);
}

/* Theme button pinned right */
#theme-toggle{
  position:absolute;
  right:20px;
  top:10px;
  font-size:22px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px;
  padding:8px 12px;
  background:transparent;
  color:var(--fg);
  cursor:pointer;
  z-index:6000;
}
body:not(.dark) #theme-toggle{
  border-color:#ddd;
  color:#333;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
#theme-toggle:hover{ opacity:.9; }

/* ===== Hero ===== */
.hero{
  position:relative;
  height:340px;
  margin:88px 20px 18px;          /* top margin makes room below fixed bar */
  border-radius:28px;
  background:linear-gradient(180deg,#0b1320 0%, #0e1624 100%);
  overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}
body:not(.dark) .hero{
  background:linear-gradient(180deg,#f6f7fb,#ffffff);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}
.hero #stars{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding-top:30px;
}

/* Avatar (big circle) */
.avatar{
  width:180px; height:180px;
  border-radius:50%; object-fit:cover;
  border:6px solid var(--panel);
  outline:6px solid var(--ring);
  box-shadow:0 14px 36px rgba(0,0,0,.35);
  margin-bottom:6px;
}

/* Title + subtitle */
.title{
  letter-spacing:normal;
  margin:0;
  font-size:32px;
  font-weight:700;
}
.tag{ margin:0; color:var(--muted); }

/* ===== Content ===== */
h2{ margin:28px 0 12px; }
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}
.card{
  display:block; padding:16px; background:var(--card); border-radius:14px;
  border:1px solid rgba(255,255,255,.08); color:inherit;
}
body:not(.dark) .card{ border-color:#e6e7ef; }
.card h3{ margin:0 0 6px; }
.card p{ margin:0; color:var(--muted); }

.footer{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:36px; padding:16px 0; color:var(--muted);
}
body:not(.dark) .footer{ border-color:#eee; }

/* ===== Small screens ===== */
@media (max-width: 520px){
  .topbar .links{ gap:16px; flex-wrap:wrap; }
  .hero{ height:360px; margin:96px 12px 18px; }
  .avatar{ width:150px; height:150px; }
  .title{ font-size:28px; }
}

/* Culinary gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
  margin-top:20px;
}
.gallery-grid img{
  width:100%;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:transform .2s ease, box-shadow .2s ease;
}
.gallery-grid img:hover{
  transform:scale(1.02);
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}

/* --- Culinary Page Header Layout --- */
.culinary-header {
  position: relative;
  padding-top: 60px;          /* pushes title down from very top */
  margin-bottom: 28px;
}

.home-icon {
  position: absolute;
  top: 16px;                  /* places icon near top-left corner */
  left: 16px;
  color: var(--fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;                /* smaller icon circle */
  height: 28px;
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.15s ease;
}
.home-icon:hover {
  background: rgba(255,255,255,0.1);
  transform: scale(1.05);
}

/* Title and subtitle styling */
.header-text {
  text-align: center;
}
.header-text h1 {
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.2;
}
.header-text .sub {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}
/* --- Song Covers grid/cards --- */
.track-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
  margin-top:20px;
}

.track-card{
  background: var(--card);
  border: 1px solid #e6e7ef;
  border-radius:12px;
  padding:14px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.track-card audio{
  width:100%;
  display:block;
  margin-bottom:10px;
  border-radius:8px;
}

.track-title{
  font-weight:700;
  margin-bottom:6px;
}

.track-desc{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

/* Optional: if you use an external link instead of audio */
.track-link{
  display:inline-block;
  margin-bottom:10px;
  text-decoration:none;
  font-weight:600;
  border-bottom:1px solid currentColor;
}
.track-link:hover{ opacity:.9; }

/* ===== ECON SCENARIOS (scoped under .econ-page) ===== */
.econ-page .page{ max-width:1200px; margin:100px auto 48px; padding:0 20px; }
.econ-page h1{ margin-bottom:6px; }
.econ-page .sub{ color:var(--muted); margin:0 0 16px; }

/* Mode tabs */
.econ-page .modes{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 16px; }
.econ-page .modes label{
  padding:8px 12px; border:1px solid rgba(255,255,255,.15);
  border-radius:10px; cursor:pointer;
}

/* Hide radios (page-only) */
.econ-page input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }

/* Shells */
.econ-page .single, .econ-page .compare{ display:none; }
#mode-single:checked ~ .single  { display:block; }
#mode-compare:checked ~ .compare { display:block; }

/* Mode tab highlight */
#mode-single:checked ~ .modes label[for="mode-single"],
#mode-compare:checked ~ .modes label[for="mode-compare"]{ border-color:var(--accent); }

/* Single layout */
.econ-page .single-wrap{ display:grid; grid-template-columns: 320px 1fr; gap:16px; }
.econ-page .panel{
  background:var(--card); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:14px;
}
.econ-page .sidebar h3{ margin:0 0 8px; }
.econ-page .sidebar .group{ margin-bottom:16px; }
.econ-page .sidebar .opts{ display:grid; gap:8px; }
.econ-page .sidebar .opts label{
  display:block; padding:8px 10px; border:1px solid rgba(255,255,255,.14);
  border-radius:10px; cursor:pointer;
}
.econ-page .sidebar small{ color:var(--muted); display:block; margin-top:8px; }

/* Horizon chips */
.econ-page .horizon{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.econ-page .horizon label{
  padding:6px 10px; border:1px solid rgba(255,255,255,.14);
  border-radius:10px; cursor:pointer;
}

/* Content grid */
.econ-page .content{ display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); }
.econ-page .card{
  background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:14px;
}
.econ-page .card h4{ margin:0 0 8px; }

/* KPI */
.econ-page .kpi{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; grid-column:1/ -1; }
.econ-page .kpi .box{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:12px; }
.econ-page .k-title{ color:var(--muted); font-size:14px; margin:0 0 6px; }
.econ-page .k-val{ font-weight:700; font-size:22px; margin:0; }
.econ-page .spark{ margin-top:8px; height:42px; }
.econ-page .chart{ grid-column:1/ span 6; }
.econ-page .chart.wide{ grid-column:1/ -1; }
.econ-page .chart svg{ width:100%; height:auto; display:block; }

/* Columns */
.econ-page .dist{  grid-column:7/ -1; }
.econ-page .risks{ grid-column:1/ span 6; }
.econ-page .notes{ grid-column:7/ -1; }

/* Compare */
.econ-page .compare .wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.econ-page .compare .col{ display:grid; gap:16px; }
.econ-page .selector{ display:grid; gap:10px; }
.econ-page .selector .row{ display:flex; gap:8px; flex-wrap:wrap; }
.econ-page .selector label{
  padding:6px 10px; border:1px solid rgba(255,255,255,.14);
  border-radius:10px; cursor:pointer;
}
.econ-page .selector small{ color:var(--muted); }

/* Risk heat tiles */
.econ-page .tiles{ display:grid; grid-template-columns: repeat(6,1fr); gap:6px; }
.econ-page .tile{ text-align:center; font-size:12px; padding:6px; border-radius:8px; border:1px solid rgba(255,255,255,.1); }
.econ-page .low{  background: rgba(56,211,159,.18); }
.econ-page .med{  background: rgba(255,200,80,.18); }
.econ-page .high{ background: rgba(255,107,107,.22); }

/* Distribution bars */
.econ-page .dist-bars{ display:grid; grid-template-columns: 120px 1fr; gap:8px; align-items:center; }
.econ-page .bar{ height:10px; border-radius:6px; background: rgba(255,255,255,.06); position:relative; overflow:hidden; }
.econ-page .bar > span{ position:absolute; inset:0; width:var(--w,50%); background:linear-gradient(90deg, var(--accent), rgba(122,162,255,.2)); }

/* Helpers */
.econ-page .muted{ color:var(--muted); margin:0; }
.econ-page ul.tight{ margin:8px 0 0 18px; }
.econ-page ul.tight li{ margin:4px 0; }

/* ===== RADIO-DRIVEN TOGGLING (route through .single / .compare) ===== */

/* Sidebar active states */
#s1:checked ~ .single .sidebar label[for="s1"],
#s2:checked ~ .single .sidebar label[for="s2"],
#s3:checked ~ .single .sidebar label[for="s3"],
#s4:checked ~ .single .sidebar label[for="s4"],
#s5:checked ~ .single .sidebar label[for="s5"],
#s6:checked ~ .single .sidebar label[for="s6"],
#s7:checked ~ .single .sidebar label[for="s7"],
#s8:checked ~ .single .sidebar label[for="s8"]{ border-color:var(--accent); }

#h-short:checked ~ .single .horizon label[for="h-short"],
#h-long:checked  ~ .single .horizon label[for="h-long"]{ border-color:var(--accent); }

/* Show/Hide: Single */
.econ-page .view{ display:none; }
#s1:checked ~ #h-short:checked ~ .single .content .s1.short,
#s1:checked ~ #h-long:checked  ~ .single .content .s1.long,
#s2:checked ~ #h-short:checked ~ .single .content .s2.short,
#s2:checked ~ #h-long:checked  ~ .single .content .s2.long,
#s3:checked ~ #h-short:checked ~ .single .content .s3.short,
#s3:checked ~ #h-long:checked  ~ .single .content .s3.long,
#s4:checked ~ #h-short:checked ~ .single .content .s4.short,
#s4:checked ~ #h-long:checked  ~ .single .content .s4.long,
#s5:checked ~ #h-short:checked ~ .single .content .s5.short,
#s5:checked ~ #h-long:checked  ~ .single .content .s5.long,
#s6:checked ~ #h-short:checked ~ .single .content .s6.short,
#s6:checked ~ #h-long:checked  ~ .single .content .s6.long,
#s7:checked ~ #h-short:checked ~ .single .content .s7.short,
#s7:checked ~ #h-long:checked  ~ .single .content .s7.long,
#s8:checked ~ #h-short:checked ~ .single .content .s8.short,
#s8:checked ~ #h-long:checked  ~ .single .content .s8.long{ display:block; }

/* Compare: A column */
.econ-page .viewA, .econ-page .viewB{ display:none; }

#a1:checked ~ .compare .colA .viewA.a1,
#a2:checked ~ .compare .colA .viewA.a2,
#a3:checked ~ .compare .colA .viewA.a3,
#a4:checked ~ .compare .colA .viewA.a4,
#a5:checked ~ .compare .colA .viewA.a5,
#a6:checked ~ .compare .colA .viewA.a6,
#a7:checked ~ .compare .colA .viewA.a7,
#a8:checked ~ .compare .colA .viewA.a8{ display:block; }

/* Compare: B column */
#b1:checked ~ .compare .colB .viewB.b1,
#b2:checked ~ .compare .colB .viewB.b2,
#b3:checked ~ .compare .colB .viewB.b3,
#b4:checked ~ .compare .colB .viewB.b4,
#b5:checked ~ .compare .colB .viewB.b5,
#b6:checked ~ .compare .colB .viewB.b6,
#b7:checked ~ .compare .colB .viewB.b7,
#b8:checked ~ .compare .colB .viewB.b8{ display:block; }

/* Compare tab highlights */
#a1:checked ~ .compare .colA label[for="a1"],
#a2:checked ~ .compare .colA label[for="a2"],
#a3:checked ~ .compare .colA label[for="a3"],
#a4:checked ~ .compare .colA label[for="a4"],
#a5:checked ~ .compare .colA label[for="a5"],
#a6:checked ~ .compare .colA label[for="a6"],
#a7:checked ~ .compare .colA label[for="a7"],
#a8:checked ~ .compare .colA label[for="a8"]{ border-color:var(--accent); }

#b1:checked ~ .compare .colB label[for="b1"],
#b2:checked ~ .compare .colB label[for="b2"],
#b3:checked ~ .compare .colB label[for="b3"],
#b4:checked ~ .compare .colB label[for="b4"],
#b5:checked ~ .compare .colB label[for="b5"],
#b6:checked ~ .compare .colB label[for="b6"],
#b7:checked ~ .compare .colB label[for="b7"],
#b8:checked ~ .compare .colB label[for="b8"]{ border-color:var(--accent); }

/* Responsive */
@media (max-width: 980px){
  .econ-page .single-wrap{ grid-template-columns: 1fr; }
  .econ-page .dist, .econ-page .risks, .econ-page .notes, .econ-page .chart{ grid-column: 1 / -1; }
  .econ-page .compare .wrap{ grid-template-columns: 1fr; }
}

/* subtle glow on the home icon when hovering on this page */
.econ-page .home-icon:hover{ box-shadow:0 0 0 6px rgba(122,162,255,0.16); }

/* ===== LYRIC MEMORY PAGE ===== */
body .culinary-header .home-icon { color: var(--fg); }
.lyric-page .home-icon:hover{ box-shadow:0 0 0 6px rgba(122,162,255,0.16); }

/* Recipe Finder: subtle hover on home icon (reuses existing vars) */
.home-icon:hover{ background: rgba(255,255,255,0.08); border-radius:50%; }

/* Buttons in cards: match your site aesthetic a bit closer */
.rf-btn:hover{ opacity:.92 }
.rf-fav{ font-size:18px; user-select:none }
.rf-fav:hover{ opacity:.85 }

/* Make tab buttons & inputs feel consistent */
.btn:hover{ opacity:.92 }
.input:focus, .select:focus{ outline:2px solid var(--accent); outline-offset:2px }

/* Keep meal-plan horizontally scrollable on small screens */
.plan-wrap{ scrollbar-width: thin; }

/* =================== Organized Infinite Horizon (CSS-only) =================== */
/* ── Panel + cards reuse your design language */
.hzn-panel{ display:grid; gap:14px; }
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:14px;
}
body:not(.dark) .card{ border-color:#e6e7ef; }

/* Controls */
.hzn-controls .row{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.hzn-controls .group{ display:flex; flex-direction:column; gap:6px; }
.hzn-controls .label{ font-weight:600; font-size:14px; color:var(--muted); }
.hzn-controls .pills{ display:flex; gap:8px; }
.hzn-controls .pills label{
  padding:8px 12px; border:1px solid rgba(255,255,255,.14);
  border-radius:999px; cursor:pointer; user-select:none;
}
body:not(.dark) .hzn-controls .pills label{ border-color:#e6e7ef; }
.hzn-controls .hint{ margin:6px 0 0; color:var(--muted); }

/* Active highlight via radios */
input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
#scene-neon:checked ~ .hzn-panel .hzn-controls label[for="scene-neon"],
#scene-dusk:checked ~ .hzn-panel .hzn-controls label[for="scene-dusk"],
#scene-night:checked ~ .hzn-panel .hzn-controls label[for="scene-night"],
#speed-slow:checked ~ .hzn-panel .hzn-controls label[for="speed-slow"],
#speed-normal:checked ~ .hzn-panel .hzn-controls label[for="speed-normal"],
#speed-fast:checked ~ .hzn-panel .hzn-controls label[for="speed-fast"]{
  border-color:var(--accent);
}

/* Stage card sizing */
.hzn-stage{ padding:0; overflow:hidden; }
.hzn{ position:relative; height:min(62vh,640px); }

/* ---------- Variables for look & speed ---------- */
:root{
  /* default palette (Neon) */
  --hzn-sky-1:#061225;
  --hzn-sky-2:#221a4a;
  --hzn-sky-3:#6a2d8f;
  --hzn-sun:#ffd07a;
  --hzn-grid:#86a9ff;
  --hzn-mtn:#1b1835;
  --hzn-aurora-1:#6fffc7;
  --hzn-aurora-2:#8ac8ff;
  --hzn-speed:1; /* 0.8 slow / 1 normal / 1.4 fast (overridden by radios) */
}
body:not(.dark){
  --hzn-sky-1:#cfe2ff; --hzn-sky-2:#f7e4ff; --hzn-sky-3:#ffe1b7;
  --hzn-sun:#ff9f4d;  --hzn-grid:#0b63ff;  --hzn-mtn:#dad6ef;
  --hzn-aurora-1:#7ef3c7; --hzn-aurora-2:#9fd6ff;
}

/* Scene profiles (CSS-only via radio → sibling) */
#scene-neon:checked ~ .hzn-panel .hzn{
  --hzn-sky-1:#061225; --hzn-sky-2:#221a4a; --hzn-sky-3:#6a2d8f;
  --hzn-sun:#ffd07a; --hzn-grid:#86a9ff; --hzn-mtn:#1b1835;
  --hzn-aurora-1:#6fffc7; --hzn-aurora-2:#8ac8ff;
}
#scene-dusk:checked ~ .hzn-panel .hzn{
  --hzn-sky-1:#1a0f1a; --hzn-sky-2:#53233e; --hzn-sky-3:#e27d60;
  --hzn-sun:#ffb36b; --hzn-grid:#f2a65a; --hzn-mtn:#2a1b2a;
  --hzn-aurora-1:#ffa9a3; --hzn-aurora-2:#ffd08a;
}
#scene-night:checked ~ .hzn-panel .hzn{
  --hzn-sky-1:#030913; --hzn-sky-2:#0b1430; --hzn-sky-3:#1b2a4a;
  --hzn-sun:#aecbfa; --hzn-grid:#7aa2ff; --hzn-mtn:#0f1327;
  --hzn-aurora-1:#3de0c1; --hzn-aurora-2:#68a7ff;
}

/* Speed presets */
#speed-slow:checked   ~ .hzn-panel .hzn{ --hzn-speed:.8; }
#speed-normal:checked ~ .hzn-panel .hzn{ --hzn-speed:1; }
#speed-fast:checked   ~ .hzn-panel .hzn{ --hzn-speed:1.4; }

/* ---------- SKY ---------- */
.hzn__sky{ position:absolute; inset:0;
  background: linear-gradient(180deg,var(--hzn-sky-1),var(--hzn-sky-2) 55%,var(--hzn-sky-3) 100%);
}
.hzn__grad{ position:absolute; inset:0;
  background: radial-gradient(90% 60% at 50% 10%, rgba(255,255,255,.10), transparent 60%);
}

/* subtle starfield */
.hzn__stars{ position:absolute; inset:0;
  background:
    radial-gradient(1px 1px at 8% 12%, #fff 98%, transparent),
    radial-gradient(1px 1px at 16% 32%, #fff 98%, transparent),
    radial-gradient(1px 1px at 28% 22%, #fff 98%, transparent),
    radial-gradient(1px 1px at 42% 8%,  #fff 98%, transparent),
    radial-gradient(1px 1px at 58% 26%, #fff 98%, transparent),
    radial-gradient(1px 1px at 72% 16%, #fff 98%, transparent),
    radial-gradient(1px 1px at 86% 30%, #fff 98%, transparent),
    radial-gradient(1px 1px at 92% 12%, #fff 98%, transparent);
  opacity:.55; filter: blur(.2px);
  animation: hznTwinkle calc(6s/var(--hzn-speed)) linear infinite;
}
@keyframes hznTwinkle{0%,100%{opacity:.55}50%{opacity:.35}}

/* aurora */
.hzn__aurora{ position:absolute; left:-20%; right:-20%; top:-10%; height:55%;
  background:
    radial-gradient(60% 120% at 20% 50%, color-mix(in oklab, var(--hzn-aurora-1), transparent 60%), transparent 70%),
    radial-gradient(60% 120% at 70% 35%, color-mix(in oklab, var(--hzn-aurora-2), transparent 55%), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(12px) saturate(120%);
  animation: hznAurora calc(22s/var(--hzn-speed)) ease-in-out infinite alternate;
}
@keyframes hznAurora{
  from{ transform: translateX(-3%) translateY(2%) }
  to  { transform: translateX(3%)  translateY(-2%) }
}

/* sun */
.hzn__sun{ position:absolute; left:50%; top:42%; width: 300px; aspect-ratio:1/1; transform: translateX(-50%); }
@media (max-width:520px){ .hzn__sun{ width:210px; top:46%; } }
.hzn__sun-core{ position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--hzn-sun) 0 52%, rgba(255,255,255,0) 60%),
    radial-gradient(circle at 50% 50%, rgba(255,195,90,.45), rgba(255,195,90,0) 66%);
  filter: drop-shadow(0 0 24px rgba(255,195,90,.6));
}
.hzn__sun-rays{ position:absolute; inset:-6%; border-radius:50%;
  background: repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.16) 0 6deg,
      rgba(255,255,255,0)   6deg 14deg);
  mask: radial-gradient(circle at 50% 50%, black 62%, transparent 63%);
  -webkit-mask: radial-gradient(circle at 50% 50%, black 62%, transparent 63%);
  mix-blend-mode: screen; opacity:.7;
  animation: hznRays calc(24s/var(--hzn-speed)) linear infinite;
}
@keyframes hznRays{ to { transform: rotate(360deg); } }
.hzn__sun-scan{ position:absolute; inset:0; border-radius:50%;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 6px, rgba(0,0,0,.22) 6px 8px);
  mix-blend-mode: overlay; pointer-events:none;
  animation: hznScan calc(3.6s/var(--hzn-speed)) linear infinite;
}
@keyframes hznScan{ from{ transform: translateY(-6px)} to{ transform: translateY(6px)} }

/* mountains */
.hzn__mtn{ position:absolute; left:-5%; right:-5%; bottom:42%; height:26%; filter: blur(.2px); }
.hzn__mtn--far{
  background:
    linear-gradient(to top, transparent 0 60%, rgba(0,0,0,.24) 100%),
    radial-gradient(120% 120% at 10% 100%,  transparent 52%, var(--hzn-mtn) 53% 60%, transparent 61%),
    radial-gradient(120% 120% at 40% 100%,  transparent 50%, var(--hzn-mtn) 51% 60%, transparent 61%),
    radial-gradient(120% 120% at 80% 100%,  transparent 50%, var(--hzn-mtn) 51% 60%, transparent 61%);
  animation: hznParallaxFar calc(32s/var(--hzn-speed)) linear infinite;
  opacity:.95;
}
.hzn__mtn--near{
  bottom:38%; height:30%;
  background:
    radial-gradient(120% 120% at 25% 120%, transparent 48%, color-mix(in oklab, var(--hzn-mtn), #000 12%) 49% 58%, transparent 59%),
    radial-gradient(120% 120% at 70% 120%, transparent 47%, color-mix(in oklab, var(--hzn-mtn), #000 12%) 48% 58%, transparent 59%);
  animation: hznParallaxNear calc(22s/var(--hzn-speed)) linear infinite reverse;
}
@keyframes hznParallaxFar{ from{ background-position:0 0 } to{ background-position:200px 0 } }
@keyframes hznParallaxNear{ from{ background-position:0 0 } to{ background-position:-300px 0 } }

/* ---------- GROUND ---------- */
.hzn__ground{ position:absolute; left:0; right:0; bottom:0; height:58%;
  transform-origin: top center; transform: perspective(900px) rotateX(65deg);
}
.hzn__grid{ position:absolute; inset:0; color:var(--hzn-grid);
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 96%, currentColor 97%, rgba(255,255,255,0) 100%),
    linear-gradient(to right,  rgba(255,255,255,0) 96%, currentColor 97%, rgba(255,255,255,0) 100%);
  background-size: 100% 44px, 80px 100%;
  background-position: 0 0, 0 0;
  animation: hznScrollY calc(3.1s/var(--hzn-speed)) linear infinite,
             hznScrollX calc(12s/var(--hzn-speed)) linear infinite;
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--hzn-grid), #fff 25%));
  mask: radial-gradient(150% 80% at 50% 0%,
        rgba(0,0,0,0) 0 12%, rgba(0,0,0,1) 22% 85%, rgba(0,0,0,0) 100%);
  -webkit-mask: radial-gradient(150% 80% at 50% 0%,
        rgba(0,0,0,0) 0 12%, rgba(0,0,0,1) 22% 85%, rgba(0,0,0,0) 100%);
}
@keyframes hznScrollY{ from{ background-position: 0 0, 0 0 } to{ background-position: 0 440px, 0 0 } }
@keyframes hznScrollX{ from{ background-position: 0 0, 0 0 } to{ background-position: 0 0, -80px 0 } }
.hzn__road{ position:absolute; left:50%; top:0; bottom:0; width: 12%; transform: translateX(-50%);
  background:
    linear-gradient(to bottom, transparent 0 10%, rgba(0,0,0,.25) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.85) 0 26px, transparent 26px 52px);
  mix-blend-mode: screen; filter: blur(.5px);
}
.hzn__glow{ position:absolute; left:0; right:0; top:-8%; height: 26%;
  background: radial-gradient(120% 80% at 50% 0%, rgba(143,211,255,.7), transparent 70%);
  pointer-events:none;
}
.hzn__vignette{ position:absolute; inset:0;
  background: radial-gradient(120% 85% at 50% 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* Caption */
.hzn-caption{ margin:8px 0 0; color:var(--muted); }