/* skin: colour, surface, border, glow and motion. Night-indigo canvas, one aqua glow. */
:root {
  --night: #14152E; --indigo-top: #2A2D5A; --indigo-mid: #3B4371; --card: #1E2046; --card-deep: #181A3D;
  --hair: #353974; --accent: #6C7BFF; --accent-deep: #3D4ABF; --aqua: #4FD1E6; --rose: #FF8FB1; --gold: #FFC56B;
  --ink: #F2F3FB; --muted: #A6A9D4; --soft: #D9DBF3;
  color-scheme: dark;
}
html { background-color: var(--night); color: var(--ink); }
body { background: transparent; color: var(--muted); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 60% at 50% -10%, rgba(59, 67, 113, .55), rgba(59, 67, 113, 0) 70%),
              linear-gradient(180deg, var(--indigo-top) 0%, #262955 30%, #1c1e44 62%, var(--night) 100%);
}
h1, h2, h3 { color: var(--ink); }
a { color: var(--aqua); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: #8fe6f3; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 6px; }

.homelink { color: var(--ink); text-decoration: none; }
.homelink::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(255, 197, 107, .7); }
.u-eyebrow { color: var(--aqua); }
.lead { color: var(--soft); }

.card { background: var(--card); border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 10px 28px rgba(8, 9, 26, .38); }
.card--hero, .card--graph { border-radius: 20px; }
.card--hero { border-color: #414690; box-shadow: 0 14px 36px rgba(8, 9, 26, .45), 0 0 0 1px rgba(79, 209, 230, .08) inset; }

.ring-track { fill: none; stroke: var(--hair); stroke-width: 10; }
.ring-arc { fill: none; stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 64px 64px; }
.ring-glint { fill: var(--gold); }
.ring--rose .ring-arc { stroke: var(--rose); }
.ring--indigo .ring-arc { stroke: var(--accent); }
.verdict-kicker { color: var(--aqua); }
.verdict--myth .verdict-word { color: var(--rose); }
.verdict--partly .verdict-word { color: #aab3ff; }
.myth-quote { color: var(--ink); }
.stat-num { color: var(--ink); text-shadow: 0 0 22px rgba(79, 209, 230, .28); }
.stat-cap { color: var(--muted); }

.points li { color: var(--soft); }
.points li::before { background: var(--aqua); border-radius: 50%; box-shadow: 0 0 8px rgba(79, 209, 230, .6); }
.points li strong { color: var(--ink); }
.checklist li::before { background: transparent; border: 2px solid var(--aqua); border-radius: 50%; box-shadow: none; }
.worksheet li::before { background: var(--gold); box-shadow: 0 0 8px rgba(255, 197, 107, .55); }
.stages li::before { border-radius: 3px; box-shadow: none; }
.stages li:nth-child(1)::before { background: var(--rose); }
.stages li:nth-child(2)::before { background: var(--accent); }
.stages li:nth-child(3)::before { background: #5a63b8; }
.stages li:nth-child(4)::before { background: var(--aqua); }

.place img { border-radius: 20px; border: 1px solid var(--hair); background: var(--card-deep); box-shadow: 0 12px 30px rgba(8, 9, 26, .45); }
figcaption { color: var(--muted); }

.compare-panel { background: var(--card-deep); border: 1px solid var(--hair); border-radius: 16px; }
.compare-panel--a { border-top: 3px solid var(--aqua); }
.compare-panel--b { border-top: 3px solid var(--rose); }
.pill { border-radius: 999px; border: 1px solid var(--hair); background: var(--night); color: var(--ink); cursor: pointer; }
.pill[aria-pressed="true"] { background: var(--aqua); border-color: var(--aqua); color: var(--night); box-shadow: 0 0 18px rgba(79, 209, 230, .35); }

.myth-card { background: var(--card-deep); border: 1px solid var(--hair); border-radius: 16px; text-decoration: none; transition: border-color .3s ease-out; }
.myth-card:hover { border-color: var(--aqua); }
.myth-card-title { color: var(--ink); }
.myth-card-blurb { color: var(--muted); }

.wave-band { opacity: .16; }
.wave-band--rose { fill: var(--rose); }
.wave-band--indigo { fill: var(--accent); }
.wave-band--deep { fill: #5a63b8; }
.wave-band--aqua { fill: var(--aqua); }
.wave-line { fill: none; stroke: var(--aqua); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wave-glow { fill: none; stroke: var(--aqua); stroke-width: 12; opacity: .22; filter: blur(4px); vector-effect: non-scaling-stroke; }
.wave { border-radius: 14px; background: var(--card-deep); }

.alarm { border-color: #4a3f6e; }
.alarm-tile { border-radius: 16px; background: linear-gradient(140deg, var(--rose), var(--accent)); box-shadow: 0 0 22px rgba(255, 143, 177, .35); }
.alarm-dot { border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px rgba(242, 243, 251, .25); }
.chip-link { border-radius: 999px; border: 1px solid var(--aqua); text-decoration: none; color: var(--aqua); }

.note-list li::before { color: var(--aqua); }
.note-link { color: var(--soft); text-decoration-color: rgba(79, 209, 230, .6); }
.note-link:hover { color: var(--ink); }
.note-list li:target .note-link { color: var(--ink); }
.ref { color: var(--aqua); text-decoration: none; }

.btn { color: #fff; text-decoration: none; border-radius: 16px; background: linear-gradient(135deg, #5563E0, var(--accent-deep)); box-shadow: 0 10px 28px rgba(108, 123, 255, .38); }
.btn:hover { color: #fff; box-shadow: 0 10px 34px rgba(108, 123, 255, .55); }
.inline-btn { color: var(--aqua); }

.site-foot { background: #17183a; border: 1px solid var(--hair); border-radius: 20px; }
.foot-title { color: var(--ink); }
.index-link { color: var(--ink); text-decoration: none; border: 1px solid var(--hair); border-radius: 14px; background: var(--card-deep); }
.index-link[aria-current="page"] { color: var(--aqua); }
.foot-line { color: var(--muted); }

.rail { background: rgba(20, 21, 46, .9); border-top: 1px solid var(--hair); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.rail-list a { color: var(--soft); text-decoration: none; border-radius: 999px; }
.rail-list a:hover, .rail-list a:focus-visible { color: var(--aqua); }
@media (min-width: 40em) {
  .rail { border: 1px solid var(--hair); border-radius: 999px; box-shadow: 0 12px 30px rgba(8, 9, 26, .5); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .wave-line, .wave-glow { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: wave-draw 900ms ease-out 120ms forwards; }
  .ring-arc { animation: ring-sweep 800ms ease-out both; }
}
@keyframes wave-draw { to { stroke-dashoffset: 0; } }
@keyframes ring-sweep { from { stroke-dasharray: 0 400; } }