/* ============================================================================
   COSMIC THEME — loaded ONLY by tune.html.
   Restores the deep jewel base (phthalo · royal · violet) with gold starlight.
   Loads after styles.css, so it overrides the paper theme on this page alone.
   ============================================================================ */
:root {
  --alabaster: #0B1A1E; --marble: #10262A; --sandstone: #0E1F33;
  --travertine:#3A4C56; --stone-grey:#93A1A6; --stone-deep:#AEB8BB;
  --gold: #D9B978; --gold-deep: #E3C57E; --champagne: #F2E8CE;
  --ink: #F1EAD8; --obsidian: #0A1418; --obsidian-2:#122A3C;
  --grad-gold: linear-gradient(135deg, #F3E8C6 0%, #D9B978 50%, #C2A368 100%);
  --grad-warm: linear-gradient(135deg, #F3E8C6 0%, #D9B978 50%, #C2A368 100%);
  --grad-rule: linear-gradient(90deg, transparent, #D9B978 22%, #F3E8C6 50%, #C2A368 78%, transparent);
  --grad-jewel: linear-gradient(120deg, #1FA98A 0%, #3A6BE0 50%, #8B5CF6 100%);
  --bg: var(--alabaster); --bg-alt: #0E2126; --bg-deep: #102A40;
  --text: #E7DECB; --text-soft: #C4CBC8; --text-faint:#93A1A6;
  --rule: rgba(217,185,120,0.45);
  --shadow-soft: 0 30px 80px -36px rgba(0,0,0,0.7);
  --shadow-card: 0 18px 44px -26px rgba(0,0,0,0.65);
}
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 110% at 18% -8%, rgba(31,120,98,0.45), transparent 60%),
    radial-gradient(120% 110% at 92% 4%, rgba(38,70,170,0.40), transparent 58%),
    radial-gradient(140% 120% at 55% 120%, rgba(120,70,210,0.38), transparent 60%),
    linear-gradient(180deg, #0A1620, #0A1320) !important;
}
/* aurora drifting behind everything */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(44% 38% at 16% 6%, rgba(31,169,138,0.20), transparent 62%),
    radial-gradient(40% 36% at 86% 12%, rgba(58,107,224,0.20), transparent 58%),
    radial-gradient(60% 55% at 50% 118%, rgba(139,92,246,0.18), transparent 60%) !important;
}
/* twinkling gold starfield */
body::after {
  opacity: 1 !important; mix-blend-mode: normal !important;
  background-repeat: repeat !important; background-size: 340px 340px !important;
  filter: none !important;
  background-image:
    radial-gradient(1.5px 1.5px at 24% 28%, rgba(242,232,206,0.95), transparent),
    radial-gradient(1.4px 1.4px at 72% 18%, rgba(217,185,120,0.85), transparent),
    radial-gradient(1.6px 1.6px at 45% 62%, rgba(242,232,206,0.8), transparent),
    radial-gradient(1.3px 1.3px at 86% 70%, rgba(217,185,120,0.8), transparent),
    radial-gradient(1.5px 1.5px at 34% 86%, rgba(242,232,206,0.7), transparent),
    radial-gradient(1.2px 1.2px at 62% 46%, rgba(242,232,206,0.7), transparent),
    radial-gradient(1.5px 1.5px at 10% 58%, rgba(217,185,120,0.7), transparent),
    radial-gradient(1.3px 1.3px at 92% 40%, rgba(242,232,206,0.65), transparent) !important;
  animation: twinkle 6s ease-in-out infinite alternate !important;
}
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }

.site-header { background: rgba(10,20,24,0.72); border-bottom: 1px solid rgba(217,185,120,0.18); }
.mobile-nav  { background: rgba(10,20,24,0.96); }
.app-feature, .altar {
  background: radial-gradient(130% 120% at 50% -10%, #0F4A3A 0%, #0C2147 48%, #1C1147 100%);
  box-shadow: inset 0 0 0 1px rgba(217,185,120,0.32), 0 60px 120px -50px rgba(0,0,0,0.7);
  border: none;
}
.app-feature::before, .altar::before {
  background: radial-gradient(closest-side, rgba(217,185,120,0.25), transparent 70%);
}
.btn--primary { background: var(--grad-gold); color: #0A1418; border-color: transparent; }
.btn--primary:hover { background: linear-gradient(135deg,#FCEFCB,#E6C982 50%,#CBA75E); }
.btn--ghost { color: var(--gold-deep); border-color: rgba(217,185,120,.5); background: transparent; }
.btn--ghost:hover { background: rgba(217,185,120,0.08); color: var(--champagne); }
.card, .offer, .coherence-toggle, .tuner__state, .state-tiles li { background: rgba(255,255,255,0.05); }
.tuner__state { color: var(--text); }
.chip-link .dot { background:#4FD8B8; box-shadow:0 0 10px rgba(79,216,184,0.9); }
.grad-text {
  background: var(--grad-jewel) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.eyebrow { color: var(--gold-deep); font-family: var(--font-body); letter-spacing:.22em;
           text-transform: uppercase; font-variant: normal; font-size:.72rem; }
.eyebrow[data-num]::before { content: none; }
.rule { height:1px !important; max-width:none; border:0 !important; background: var(--grad-rule) !important; }
.hero__wave { filter:none !important; mix-blend-mode: normal !important; opacity:.9 !important; height:320px; }
.marginfig, .fleuron { display:none !important; }
h1,h2,h3 { font-variant-numeric: normal; font-feature-settings: normal; }
.prose > p:first-of-type::first-letter, .lead--drop::first-letter { float:none; font-size:inherit; margin:0; line-height:inherit; }


/* The paper theme sets .altar type to ink; on this page the panel is
   dark again, so the light type comes back. */
.altar h1, .altar h2, .altar h3, .altar .statement{ color:#F4EFE6 !important; }
.altar p{ color: rgba(232,228,219,0.88) !important; }
.altar .lead{ color: rgba(232,228,219,0.92) !important; }
.altar .small{ color: rgba(232,228,219,0.60) !important; }