/* Theme variables and sizes */
:root {
  /* Sizes */
  --track-w: 340px;
  --track-h: 150px;
  --knob: 120px;
  --gap: 12px; /* horizontal padding inside track */

  /* Colors (light by default) */
  --bg-color: #f5f6fa;
  --fg-color: #111827;
  --track-off: #e5e7eb;
  --track-on: #34c759;
  --knob-bg: #f9fafb;
  --shadow-strong: rgba(0,0,0,0.18);
  --shadow-soft: rgba(0,0,0,0.10);

  /* Track artwork */
  --track-img-light: url('assets/light-bg.jpg');
  --track-img-dark: url('assets/dark-bg.jpg');

  /* Motion tuning */
  --surface-speed: 820ms;           /* base transition speed */
  --surface-speed-slow: 1100ms;     /* slower layers */
  --surface-curve: cubic-bezier(0.22, 0.68, 0, 1);
  --knob-speed: 1200ms;             /* slower knob slide */
  --fade-speed: 900ms;              /* smoother crossfades */
  --shine-speed: 7s;   /* slower inner sweep */
  --knob-ring: 8px;    /* white ring thickness around knob */

  /* Social icons defaults (adjust anytime) */
  --icon-size: clamp(36px, 4.5vmin, 46px);
  --icon-gap: 12px;
  --icon-border: 1px;
  --icon-radius: 999px;
  --icon-border-color: rgba(0,0,0,0.15);
  --icon-bg: rgba(0,0,0,0.04);
  --icon-hover-bg: rgba(0,0,0,0.07);
  --icon-color: inherit;

  /* Star Wars accents */
  --light-accent: #3b82f6; /* blue */
  --dark-accent: #ef4444;  /* red */
  --saber-color: var(--light-accent);

  /* Holo card */
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(0,0,0,0.2);
  --card-glow: rgba(59,130,246,0.45);

  /* Glass toggle surfaces */
  --glass-track-bg: linear-gradient(140deg, rgba(255,255,255,0.72), rgba(226,232,240,0.25));
  --glass-track-bg-active: linear-gradient(150deg, rgba(255,255,255,0.82), rgba(226,232,240,0.32));
  --glass-track-border: rgba(148,163,184,0.45);
  --glass-track-shadow: 0 24px 48px rgba(148,163,184,0.28), 0 12px 26px rgba(148,163,184,0.18);
  --glass-track-shadow-active: 0 28px 56px rgba(59,130,246,0.24), 0 14px 32px rgba(148,163,184,0.22);
  --glass-sheen: rgba(255,255,255,0.45);
  --glass-sheen-soft: rgba(255,255,255,0.3);
  --glass-sheen-strong: rgba(255,255,255,0.85);
  --glass-knob-bg: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(226,232,240,0.55));
  --glass-knob-border: rgba(255,255,255,0.6);
  --glass-knob-shadow: 0 20px 30px rgba(148,163,184,0.24), 0 36px 50px rgba(148,163,184,0.18);
  --glass-knob-shadow-active: 0 24px 40px rgba(96,165,250,0.28), 0 36px 60px rgba(148,163,184,0.2);
  --glass-knob-checked-bg: linear-gradient(150deg, rgba(255,255,255,0.98), rgba(209,213,219,0.64));
}

body.theme-dark {
  --bg-color: #0b1020;
  --fg-color: #e5e7eb;
  --track-off: #3b3f46;
  --track-on: #2ecc71;
  --knob-bg: #1a1f2e;
  --shadow-strong: rgba(0,0,0,0.55);
  --shadow-soft: rgba(0,0,0,0.35);

  /* Social icon colors in dark */
  --icon-border-color: rgba(255,255,255,0.2);
  --icon-bg: rgba(255,255,255,0.06);
  --icon-hover-bg: rgba(255,255,255,0.1);
  --icon-color: rgba(255,255,255,0.92);

  --saber-color: var(--dark-accent);

  --card-bg: rgba(17,24,39,0.55);
  --card-border: rgba(255,255,255,0.18);
  --card-glow: rgba(239,68,68,0.45);

  --glass-track-bg: linear-gradient(140deg, rgba(15,23,42,0.72), rgba(17,24,39,0.52));
  --glass-track-bg-active: linear-gradient(150deg, rgba(31,41,59,0.74), rgba(17,24,39,0.46));
  --glass-track-border: rgba(148,163,184,0.28);
  --glass-track-shadow: 0 30px 55px rgba(2,6,23,0.6), 0 16px 30px rgba(8,11,24,0.45);
  --glass-track-shadow-active: 0 35px 60px rgba(239,68,68,0.32), 0 20px 38px rgba(8,11,24,0.5);
  --glass-sheen: rgba(255,255,255,0.25);
  --glass-sheen-soft: rgba(255,255,255,0.18);
  --glass-sheen-strong: rgba(255,255,255,0.65);
  --glass-knob-bg: linear-gradient(150deg, rgba(30,41,59,0.9), rgba(17,24,39,0.6));
  --glass-knob-border: rgba(148,163,184,0.35);
  --glass-knob-shadow: 0 26px 42px rgba(2,6,23,0.6), 0 18px 34px rgba(2,6,23,0.45);
  --glass-knob-shadow-active: 0 28px 48px rgba(239,68,68,0.32), 0 38px 64px rgba(2,6,23,0.5);
  --glass-knob-checked-bg: linear-gradient(150deg, rgba(226,232,240,0.95), rgba(148,163,184,0.58));
}

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--fg-color);
  background-color: var(--bg-color);
  transition: background-color var(--surface-speed-slow) var(--surface-curve),
              color var(--surface-speed) var(--surface-curve);
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: 'Teko', 'Share Tech Mono', ui-sans-serif, system-ui;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

/* Remove blue tap highlight on mobile browsers (iOS/Android) */
/* Keep focus-visible outlines for accessibility */
a, label, .toggle, .icon-btn, .site-header, .site-footer {
  -webkit-tap-highlight-color: transparent;
}

/* Layout helpers */
.content { flex: 1; width: 100%; display: grid; place-items: center; }

.site-header { width: 100%; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }
.brand { margin: 0; font-size: 20px; opacity: 0.9; }
.brand { font-family: 'Teko', system-ui, sans-serif; letter-spacing: 0.8px; text-transform: uppercase; }
.header-toggle { display: none; }

.site-footer { width: 100%; padding: 20px 24px 28px; text-align: center; box-sizing: border-box; opacity: 0.9; transition: color var(--surface-speed) var(--surface-curve), opacity var(--surface-speed) var(--surface-curve); }
.site-footer .credit { margin-bottom: 10px; font-size: 14px; opacity: 0.9; transition: color var(--surface-speed) var(--surface-curve), opacity var(--surface-speed) var(--surface-curve); }
.site-footer .credit .heart { color: #ff4d6d; }
.site-footer a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,0.25); transition: color var(--surface-speed) var(--surface-curve), border-color var(--surface-speed) var(--surface-curve); }
body.theme-dark .site-footer a { border-color: rgba(255,255,255,0.35); }
.site-footer a:hover { border-bottom-style: solid; }
.socials { display: flex; gap: var(--icon-gap); flex-wrap: nowrap; justify-content: center; font-size: 14px; }

/* Icon-only buttons for socials */
.socials a { border-bottom: none !important; }
.icon-btn {
  width: var(--icon-size); height: var(--icon-size); border-radius: var(--icon-radius);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--icon-color);
  border: var(--icon-border) solid var(--icon-border-color);
  background: var(--icon-bg);
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.icon-btn:hover { transform: translateY(-2px); background: var(--icon-hover-bg); }
.icon-btn i { font-size: calc(var(--icon-size) * 0.42); line-height: 1; }

/* Size variants via data attribute */
.socials[data-size="sm"] { --icon-size: 36px; --icon-gap: 10px; }
.socials[data-size="md"] { --icon-size: 44px; --icon-gap: 12px; }
.socials[data-size="lg"] { --icon-size: 54px; --icon-gap: 16px; }

/* Alignment variants */
.socials[data-align="left"] { justify-content: flex-start; }
.socials[data-align="right"] { justify-content: flex-end; }

/* Background style variants */
.socials[data-variant="ghost"] .icon-btn { background: transparent; }
.socials[data-variant="solid"] .icon-btn { background: var(--icon-hover-bg); }

/* Ambient background animation (outside) */
.ambient {
  position: fixed;
  inset: -20vmax;
  z-index: -3;
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity var(--surface-speed-slow) var(--surface-curve);
  filter: saturate(1.05);
}

.ambient-light {
  background:
    repeating-linear-gradient(-35deg, rgba(59,130,246,0.12) 0 2px, transparent 2px 20px),
    linear-gradient(120deg, rgba(96,165,250,0.28), rgba(255,255,255,0) 45%),
    radial-gradient(120vmax 60vmax at 120% -10%, rgba(191,219,254,0.45), rgba(255,255,255,0) 70%),
    radial-gradient(70vmax 55vmax at -20% 110%, rgba(167,243,208,0.35), rgba(255,255,255,0) 60%),
    linear-gradient(#eef2ff, #dbeafe);
  animation: floatLight 16s ease-in-out infinite alternate;
  opacity: 1;
}

.ambient-dark {
  background:
    repeating-linear-gradient(-35deg, rgba(255,0,32,0.08) 0 2px, transparent 2px 18px),
    linear-gradient(120deg, rgba(255,0,32,0.16), rgba(0,0,0,0) 40%),
    radial-gradient(110vmax 60vmax at -10% 10%, rgba(255,0,32,0.22), rgba(0,0,0,0) 70%),
    linear-gradient(#08090f, #03040a);
  animation: floatDark 18s ease-in-out infinite alternate;
  opacity: 0;
}

body.theme-dark .ambient-light { opacity: 0; }
body.theme-dark .ambient-dark { opacity: 0.9; }
body:not(.theme-ready) .ambient { transition: none; }
body:not(.theme-ready) .toggle,
body:not(.theme-ready) .track,
body:not(.theme-ready) .track-layer,
body:not(.theme-ready) .knob,
body:not(.theme-ready) .sw-title,
body:not(.theme-ready) .sw-body,
body:not(.theme-ready) .hint,
body:not(.theme-ready) .site-footer,
body:not(.theme-ready) .icon-btn {
  transition: none !important;
}

/* HUD grid overlay */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  --grid: 48px;
  --line: rgba(0,10,30,0.12);
  --diag: rgba(0,10,30,0.08);
  background:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px var(--grid)),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px var(--grid)),
    repeating-linear-gradient(45deg, var(--diag) 0 1px, transparent 1px calc(var(--grid) / 2));
  mix-blend-mode: overlay;
}
body.theme-dark::after { --line: rgba(255,0,32,0.12); --diag: rgba(255,0,32,0.06); }

@keyframes floatLight {
  from { transform: translate(-2%, -2%) scale(1); }
  to   { transform: translate(2%, 1%) scale(1.05); }
}

@keyframes floatDark {
  from { transform: translate(1%, 2%) scale(1.02); }
  to   { transform: translate(-1%, -1%) scale(1.06); }
}

/* Visually hidden but accessible checkbox */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.wrap { text-align: center; }

/* Title and description blocks */
.sw-text { max-width: min(980px, 92vw); margin-inline: auto; }
.sw-top { margin-bottom: 24px; }
.sw-bottom { margin-top: 16px; }
.sw-title { font-family: 'Teko', system-ui, sans-serif; font-size: clamp(28px, 5vw, 48px); letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 18px rgba(255,255,255,0.1); margin: 0; transition: color var(--surface-speed) var(--surface-curve), text-shadow var(--surface-speed-slow) var(--surface-curve); }
.sw-body { font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; font-size: clamp(14px, 2.2vw, 18px); line-height: 1.6; opacity: 0.92; text-align: center; transition: color var(--surface-speed) var(--surface-curve), opacity var(--surface-speed-slow) var(--surface-curve); }

/* Legend above the toggle */
.legend { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; opacity: 0.95; }
.legend .vs { opacity: 0.6; font-size: 13px; }
.pill { padding: 6px 12px; border-radius: 999px; font-size: 13px; line-height: 1; border: 1px solid transparent; user-select: none; font-family: 'Orbitron', system-ui, sans-serif; letter-spacing: 0.6px; }
.pill-light { color: #1d4ed8; border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.08); }
.pill-dark  { color: #b91c1c; border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.pill.active { box-shadow: 0 0 0 1px currentColor inset; filter: saturate(1.1); }

/* Saber line under the toggle */
.saber { margin-top: 16px; height: 10px; display: flex; justify-content: center; }
.saber .blade {
  width: 170px; height: 6px; border-radius: 6px;
  background: radial-gradient(closest-side, #fff 0 34%, var(--saber-color) 35% 100%);
  box-shadow: 0 0 12px var(--saber-color), 0 0 24px var(--saber-color), inset 0 0 2px #fff;
  animation: hum 1.6s ease-in-out infinite alternate;
}
@keyframes hum { from { filter: brightness(1); } to { filter: brightness(1.25); } }

.sw-quote { margin-top: 10px; font-size: 16px; opacity: 0.85; }

/* Lore panels */
.lore { margin-top: 26px; max-width: min(980px, 92vw); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.panel { position: relative; border: 1px solid var(--card-border); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)), var(--card-bg); padding: 16px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 12px 40px rgba(0,0,0,0.16); backdrop-filter: blur(2px); }
.panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 40% at 0% 0%, var(--card-glow), transparent 40%); opacity: 0.55; filter: blur(14px); }
.panel h3 { margin: 0 0 6px; font-family: 'Teko', system-ui, sans-serif; letter-spacing: 1px; font-size: 22px; text-transform: uppercase; }
.panel p { margin: 0 0 8px; opacity: 0.9; }
.panel ul { margin: 4px 0 0 18px; padding: 0; }
.panel li { margin: 4px 0; }

.only-dark { display: none; }
body.theme-dark .only-dark { display: block; }
body.theme-dark .only-light { display: none; }

/* Track (the switch background) */
.toggle {
  position: relative;
  width: var(--track-w);
  height: var(--track-h);
  border-radius: calc(var(--track-h) / 2);
  background: var(--glass-track-bg);
  border: 1px solid var(--glass-track-border);
  cursor: pointer;
  display: inline-block;
  box-shadow:
    var(--glass-track-shadow),
    inset 0 1px 1px rgba(255,255,255,0.55),
    inset 0 -1px 1px rgba(15,23,42,0.25);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  transition:
    background var(--surface-speed-slow) var(--surface-curve),
    border-color var(--surface-speed) var(--surface-curve),
    box-shadow var(--surface-speed-slow) var(--surface-curve),
    transform 320ms cubic-bezier(.16,1,.3,1);
  overflow: hidden; /* clip background to rounded track */
  will-change: transform;
}

.toggle .track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04));
  transition:
    background var(--surface-speed) var(--surface-curve),
    opacity var(--surface-speed-slow) var(--surface-curve),
    box-shadow var(--surface-speed-slow) var(--surface-curve);
  z-index: 1;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 18px 32px rgba(255,255,255,0.22),
    inset 0 -22px 36px rgba(15,23,42,0.42);
}

.toggle .track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(255,255,255,0.08) 42%, rgba(0,0,0,0.24));
  pointer-events: none;
  z-index: 1;
  transition: background var(--surface-speed) var(--surface-curve),
              opacity var(--surface-speed) var(--surface-curve);
}

.toggle .track::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--glass-sheen), transparent 46%),
              radial-gradient(120% 140% at 0% 0%, var(--glass-sheen-soft), transparent 60%);
  opacity: 0.85;
  mix-blend-mode: screen;
  filter: blur(1px);
  transition:
    opacity var(--surface-speed) var(--surface-curve),
    filter var(--surface-speed) var(--surface-curve);
  z-index: 2;
}
body.theme-dark .toggle .track::before { opacity: 0.55; filter: blur(0.8px); }
body.theme-dark .toggle .track {
  background: linear-gradient(150deg, rgba(30,41,59,0.34), rgba(17,24,39,0.12));
  box-shadow:
    inset 0 20px 36px rgba(148,163,184,0.16),
    inset 0 -24px 40px rgba(2,6,23,0.55);
}

.track-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition:
    opacity var(--fade-speed) var(--surface-curve),
    filter calc(var(--fade-speed) * 1.05) var(--surface-curve);
  filter: saturate(115%) contrast(1.05);
}

.track-layer-light { background-image: var(--track-img-light); opacity: 0.85; }
.track-layer-dark { background-image: var(--track-img-dark); }
body.theme-dark .track-layer-dark { opacity: 0.88; filter: saturate(125%) contrast(1.08); }
body.theme-dark .track-layer-light { opacity: 0; }
body:not(.theme-dark) .track-layer-dark { opacity: 0; }
body:not(.theme-dark) .track-layer-light { filter: saturate(115%) contrast(1.04); }

/* Removed mini header toggle */

/* Moving shine inside the track (inside animation) */
.toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0) 60%);
  background-size: 200% 100%;
  animation: sweep var(--shine-speed) linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
  transition: opacity var(--surface-speed) var(--surface-curve);
}

@keyframes sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Outer glow pulse (outside animation) */
.toggle::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit;
  background: radial-gradient(80% 80% at 50% 50%, rgba(52,199,89,0.35), rgba(52,199,89,0) 70%);
  opacity: 0;
  transform: scale(0.98);
  filter: blur(6px);
  transition:
    opacity var(--surface-speed) var(--surface-curve),
    transform 420ms cubic-bezier(.22,.68,0,1);
  pointer-events: none;
  z-index: 0;
}

/* Knob */
.knob {
  position: absolute;
  top: 50%; left: var(--gap);
  width: var(--knob);
  height: var(--knob);
  border-radius: 999px;
  background: var(--glass-knob-bg);
  border: var(--knob-ring) solid var(--glass-knob-border);
  transform: translate(0, -50%);
  box-shadow:
    var(--glass-knob-shadow),
    inset 0 2px 6px rgba(255,255,255,0.7),
    inset 0 -3px 8px rgba(15,23,42,0.25);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition:
    transform var(--knob-speed) cubic-bezier(.19,1,.22,1),
    background var(--surface-speed) var(--surface-curve),
    box-shadow var(--surface-speed-slow) var(--surface-curve),
    border-color var(--surface-speed) var(--surface-curve);
  will-change: transform;
  z-index: 3;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.knob::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 25%, var(--glass-sheen-strong, rgba(255,255,255,0.8)), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.75;
  filter: blur(0.4px);
  transition:
    opacity var(--surface-speed) var(--surface-curve),
    filter var(--surface-speed) var(--surface-curve);
}
body.theme-dark .knob::before { opacity: 0.55; }
#big-toggle:checked + .toggle .knob::before { opacity: 0.85; filter: blur(0.3px); }
body.theme-dark #big-toggle:checked + .toggle .knob::before { opacity: 0.65; }

/* Sun/Moon icons inside knob */
.icon {
  position: absolute;
  width: 82%;
  height: 82%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  transition:
    opacity var(--fade-speed) var(--surface-curve),
    transform calc(var(--fade-speed) + 150ms) var(--surface-curve);
  user-select: none;
  pointer-events: none;
}
.sun  { opacity: 1;  transform: translate(-50%, -50%) rotate(0deg) scale(1); }
.moon { opacity: 0;  transform: translate(-50%, -50%) rotate(-10deg) scale(0.9); }

/* Checked state */
#big-toggle:checked + .toggle {
  /* keep the image; just adjust shading when ON */
  background: var(--glass-track-bg-active);
  box-shadow:
    var(--glass-track-shadow-active),
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -1px 1px rgba(15,23,42,0.3);
  border-color: rgba(255,255,255,0.55);
}

body.theme-dark #big-toggle:checked + .toggle { border-color: rgba(148,163,184,0.4); }

/* Mini toggle styles removed */

#big-toggle:checked + .toggle::before { opacity: 1; transform: scale(1); }

#big-toggle:checked + .toggle .knob {
  transform: translate(calc(var(--track-w) - var(--knob) - var(--gap) * 2 - var(--knob-ring) * 2), -50%);
  background: var(--glass-knob-checked-bg);
  box-shadow:
    var(--glass-knob-shadow-active),
    inset 0 3px 8px rgba(255,255,255,0.85),
    inset 0 -4px 8px rgba(15,23,42,0.3);
  border-color: rgba(255,255,255,0.72);
}

body.theme-dark #big-toggle:checked + .toggle .knob { border-color: rgba(226,232,240,0.55); }

#big-toggle:checked + .toggle .sun  { opacity: 0; transform: translate(-50%, -50%) rotate(6deg) scale(0.94); }
#big-toggle:checked + .toggle .moon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg)  scale(1); }

/* Dark mode stars inside the track */
body.theme-dark #big-toggle:checked + .toggle::after {
  background:
    radial-gradient(1.5px 1.5px at 25% 30%, rgba(255,255,255,0.9) 1.5px, transparent 1.7px),
    radial-gradient(1.2px 1.2px at 55% 65%, rgba(255,255,255,0.7) 1.2px, transparent 1.4px),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.85) 1px, transparent 1.2px);
  animation: twinkle 2.2s ease-in-out infinite;
  mix-blend-mode: normal;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* Keyboard focus */
#big-toggle:focus-visible + .toggle { outline: 4px solid rgba(0, 120, 255, 0.6); outline-offset: 6px; }

/* Optional helper text */
.hint { margin-top: 20px; color: #e5e7eb; font-size: 16px; text-align: center; letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 12px rgba(255,255,255,0.15); transition: color var(--surface-speed) var(--surface-curve), text-shadow var(--surface-speed-slow) var(--surface-curve); }
body:not(.theme-dark) .hint { color: #1f2937; text-shadow: 0 2px 0 rgba(255,255,255,0.6), 0 0 10px rgba(59,130,246,0.35); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ambient, .toggle::after { animation: none !important; }
  .toggle, .knob { transition: none !important; }
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}