/* ===== Variables ===== */
:root{
  --bg:#2b2e34;
  --bg2:#202329;
  --fg:#e8eaef;
  --muted:#aeb4c1;
  --pill-dark:#15171b;
  --pill-light:#cdd1d8;
  --drop: 0 30px 60px rgba(0,0,0,.45);
  --glass-fill: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.55);
}

html[data-theme="light"]{
  --bg:#bec3c9;
  --bg2:#d6d9de;
  --fg:#1a1c20;
  --muted:#5b616e;
  --pill-dark:#aeb3bb;
  --pill-light:#e5e7eb;
  --drop: 0 40px 70px rgba(0,0,0,.18);
  --glass-fill: rgba(255,255,255,.55);
  --glass-border: rgba(255,255,255,.85);
}

*{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% 10%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(750px 450px at 20% 90%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  display:grid;
  place-items:center;
}

.page{ text-align:center; }

.caption{ margin:18px 0 0; color:var(--muted); font-weight:600; }

/* ===== Glass Toggle ===== */
.glass-toggle{
  --w: 460px;
  --h: 120px;
  position:relative; border:0; background:transparent; padding:0; cursor:pointer;
  width:var(--w); height:var(--h);
  border-radius: calc(var(--h)/2);
  isolation:isolate;
  /* allow overflow so the knob can sit above/over the track */
  overflow: visible;
}

/* pill / track */
.track{
  position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  box-shadow:
    inset 0 10px 18px rgba(255,255,255,.1),
    inset 0 -18px 32px rgba(0,0,0,.55),
    var(--drop);
}
html[data-theme="light"] .track{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.65));
  box-shadow:
    inset 0 16px 28px rgba(255,255,255,.95),
    inset 0 -18px 28px rgba(0,0,0,.1),
    var(--drop);
}

/* track labels */
.label{
  position:absolute; top:50%; transform:translateY(-50%);
  font-weight:800; font-size:44px; letter-spacing:.2px; user-select:none;
  color:rgba(255,255,255,.55);
}
html[data-theme="light"] .label{ color:rgba(0,0,0,.45); }
.label--left{ left:42px; }
.label--right{ right:42px; }

.glass-toggle[aria-pressed="true"] .label--left{ color:rgba(255,255,255,.78); }
.glass-toggle[aria-pressed="false"] .label--right{ color:rgba(0,0,0,.65); }

/* ===== Overlapping glass knob ===== */
.knob{
  position:absolute;
  /* make knob LARGER than the height, so it sits above the track */
  width: calc(var(--h) * 1.35);
  height: calc(var(--h) * 1.35);
  top: 50%;
  left: calc(0% - (var(--h) * 0.18)); /* overlaps left side */
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: 5;
  /* frosted glass */
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 20px 50px rgba(0,0,0,.45),
    inset 0 2px 0 rgba(255,255,255,.6);
  display:grid; place-items:center;
  transition: left .6s cubic-bezier(.2,.9,.2,1);
}

/* move knob to the right so it overflows the right side too */
.glass-toggle[aria-pressed="false"] .knob{
  left: calc(100% - (var(--h) * 1.17));
}

/* bright rim to simulate refraction when overlapping the pill edge */
.rim{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(80% 50% at 25% 25%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(70% 50% at 70% 75%, rgba(255,255,255,.25), transparent 70%);
  mix-blend-mode:screen; pointer-events:none;
  opacity:.7; filter: blur(.6px);
}

/* glossy streak */
.shine{
  position:absolute; left:8%; right:8%; top:15%; height:25%;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.15));
  filter: blur(1.2px);
  opacity:.65; pointer-events:none;
}

/* icons */
.icon{ width:46px; height:46px; fill:#fff; opacity:.95;
  filter: drop-shadow(0 3px 10px rgba(255,255,255,.6)); }
.icon--sun{ opacity:0; }
html[data-theme="light"] .icon--moon{ opacity:0; }
html[data-theme="light"] .icon--sun{ opacity:.95; }

/* smooth theme bg */
html{ transition: background .45s ease, color .35s ease; }

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