/* ===== Theme Vars (matte, darker) ===== */
:root{
  --bg:#181b1f;
  --bg2:#0f1114;
  --fg:#e9ecf2;
  --muted:#aeb4c1;
  --drop: 0 26px 60px rgba(0,0,0,.58);
  --pill-top: rgba(255,255,255,.035);
  --pill-bot: rgba(0,0,0,.78);
  --label-dim: rgba(255,255,255,.55);

  --glass-alpha:.012;
  --glass-border: rgba(255,255,255,.62);
  --spec-1: rgba(255,255,255,.9);
  --spec-2: rgba(255,255,255,.28);
}
html[data-theme="light"]{
  --bg:#c5cad0;
  --bg2:#e1e4e8;
  --fg:#1a1c20;
  --muted:#5b616e;
  --drop: 0 40px 70px rgba(0,0,0,.18);
  --pill-top: rgba(255,255,255,.96);
  --pill-bot: rgba(255,255,255,.68);
  --label-dim: rgba(0,0,0,.55);

  --glass-alpha:.16;
  --glass-border: rgba(255,255,255,.9);
  --spec-1: rgba(255,255,255,1);
  --spec-2: rgba(255,255,255,.45);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color:var(--fg);
  min-height:100dvh;
  background:
    radial-gradient(900px 500px at 70% 12%, rgba(255,255,255,.05), transparent 65%),
    radial-gradient(700px 420px at 20% 88%, rgba(255,255,255,.04), transparent 65%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  display:grid; place-items:center;
  transition: background .45s ease, color .35s ease;
}

.page{ text-align:center; }
.caption{ margin:18px 0 0; color:var(--muted); font-weight:600; letter-spacing:.2px; }

.glass-toggle{
  --w: 460px;
  --h: 116px;
  position:relative; border:0; background:transparent; padding:0; cursor:pointer;
  width:var(--w); height:var(--h);
  border-radius: calc(var(--h)/2);
  isolation:isolate;
  overflow: visible;
}

.track{
  position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, var(--pill-top), var(--pill-bot));
  box-shadow:
    inset 0 9px 18px rgba(255,255,255,.07),
    inset 0 -18px 30px rgba(0,0,0,.68),
    0 18px 34px rgba(0,0,0,.5);
}

.label{
  position:absolute; top:50%; transform:translateY(-50%);
  font-weight:800; font-size:44px; user-select:none;
  color:var(--label-dim);
}
.label--left{ left:44px; }
.label--right{ right:44px; }
.glass-toggle[aria-pressed="true"] .label--left{ color:rgba(255,255,255,.92); }
html[data-theme="light"] .glass-toggle[aria-pressed="false"] .label--right{ color:rgba(0,0,0,.78); }

.knob-shadow{
  position:absolute;
  width: calc(var(--h) * 1.22);
  height: calc(var(--h) * 0.88);
  top: calc(50% + 12px);
  left: calc(0% + 8px);
  transform: translateY(-50%);
  border-radius: 50%;
  filter: blur(16px);
  background: rgba(0,0,0,.68);
  opacity:.75;
  transition: left .6s cubic-bezier(.2,.9,.2,1);
  z-index: 2;
}
.glass-toggle[aria-pressed="false"] .knob-shadow{ left: calc(100% - (var(--h) * 1.0)); }

.knob{
  position:absolute;
  width: calc(var(--h) * 1.34);
  height: calc(var(--h) * 1.34);
  top: 50%;
  left: calc(0% - (var(--h) * 0.18));
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: 5;

  background: rgba(255,255,255,var(--glass-alpha));
  border: 1.2px solid var(--glass-border);
  backdrop-filter: saturate(120%) contrast(1.02);
  -webkit-backdrop-filter: saturate(120%) contrast(1.02);
  box-shadow: 0 28px 60px rgba(0,0,0,.6);
  transition: left .6s cubic-bezier(.2,.9,.2,1);
  overflow:hidden;
}
.glass-toggle[aria-pressed="false"] .knob{ left: calc(100% - (var(--h) * 1.19)); }

.edge-refraction{
  position:absolute; inset:-12%;
  backdrop-filter: blur(18px) brightness(1.06) saturate(130%);
  -webkit-backdrop-filter: blur(18px) brightness(1.06) saturate(130%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 64%, #000 100%);
          mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 64%, #000 100%);
  pointer-events:none;
}

.contact{
  position:absolute; inset:-6%;
  background: radial-gradient(75% 60% at 30% 30%, rgba(255,255,255,.9), transparent 70%);
  mix-blend-mode:screen; opacity:.35; filter: blur(1px); pointer-events:none;
}

.rim{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(60% 44% at 30% 25%, var(--spec-1), transparent 70%),
    radial-gradient(72% 56% at 72% 76%, var(--spec-2), transparent 70%);
  mix-blend-mode:screen; opacity:.85; filter: blur(.55px); pointer-events:none;
}
.spec--top{
  position:absolute; left:14%; right:14%; top:16%; height:20%;
  border-radius:999px;
  background: linear-gradient(180deg, var(--spec-1), rgba(255,255,255,0));
  filter: blur(.9px); opacity:.65; pointer-events:none;
}
.spec--curve{
  position:absolute; right:10%; top:12%; bottom:12%; width:28%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--spec-2), rgba(255,255,255,0));
  transform: rotate(-12deg);
  filter: blur(.7px); opacity:.42; pointer-events:none;
}

.icon{ width:40px; height:40px; fill:#fff; opacity:.96; filter: drop-shadow(0 3px 8px rgba(255,255,255,.6)); }
.icon--sun{ opacity:0; }
html[data-theme="light"] .icon--moon{ opacity:0; }
html[data-theme="light"] .icon--sun{ opacity:.96; }

@media (max-width:520px){
  .glass-toggle{ --w: 340px; --h: 88px; }
  .label{ font-size:32px; }
  .icon{ width:30px; height:30px; }
}