:root {
      --off-bg:    #1c1c1e;
      --off-track: #3a3a3c;
      --off-thumb: #8e8e93;
      --off-glow:  rgba(142,142,147,0.2);
      --off-label: #8e8e93;

      --on-bg:    #363FBF;
      --on-track: #363FBF;
      --on-thumb: #3f49d4;
      --on-glow:  #363FBF;
      --on-label: #a5acf8;

      --muted: #555;
    }

   
    .toggle-group {
      display: flex; flex-direction: column; align-items: center; gap: 16px;
    }
    .toggle-wrapper {
      display: flex; align-items: center; gap: 14px;
      cursor: pointer; user-select: none;
    }

    .toggle-label {
      min-width: 36px; text-align: right;
    }
    .toggle-label.right { color: var(--muted); text-align: left; }


    #toggle { display: none; }

    /* ── BASE TRACK ── */
    .track {
      position: relative; border-radius: 999px;
      background: #adadaf;
      border: 1.5px solid rgba(255,255,255,0.08);
      transition: background 0.45s cubic-bezier(.4,0,.2,1), border-color 0.45s, box-shadow 0.45s;
      box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
      overflow: visible; cursor: pointer;
    }
    .track.on {
      background: var(--on-track);
      border-color: rgba(245, 246, 255, 0.35);
      box-shadow: inset 0 1px 4px rgba(0,0,0,0.3), 0 0 8px 2px var(--on-glow);
    }

    /* ── BASE THUMB ── */
    .thumb {
      position: absolute;
	  border-radius: 50%;
      background: #f1f1f2;
      box-shadow: 0 1px 6px rgba(0,0,0,0.4);
      transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), background 0.45s, box-shadow 0.45s;
      display: flex; align-items: center; justify-content: center;
    }
    .thumb::after {
      
      background: rgba(255,255,255,0.35);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .track.on .thumb {
     
      box-shadow: 0 1px 6px rgba(0,0,0,0.4), 0 0 8px 2px var(--on-glow);
    }
    .track.on .thumb::after { transform: scale(1.3); opacity: 0.7; }

    /* ── XS ── */
    .track.xs        { width: 32px;  height: 16px; }
    .track.xs .thumb { width: 10px;  height: 10px; top: 2px; left: 2px; }
    .track.xs .thumb::after { width: 3px; height: 3px; }
    .track.xs.on .thumb { transform: translateX(16px); }

    /* ── SM (Standard) ── */
    .track.sm        { width: 37px;  height: 17px; }
    .track.sm .thumb { width: 13px;  height: 13px; top: 2px; left: 2px;  right: 2px; }
    .track.sm .thumb::after { width: 5px; height: 5px; }
    .track.sm.on .thumb { transform: translateX(20px); }

    /* ── MD ── */
    .track.md        { width: 80px;  height: 40px; }
    .track.md .thumb { width: 30px;  height: 30px; top: 4px; left: 4px; }
    .track.md .thumb::after { width: 8px; height: 8px; }
    .track.md.on .thumb { transform: translateX(40px); }

    
    .variants { display: flex; flex-direction: column; gap: 14px; width: 100%; }
    .variant-row {
      display: flex; align-items: center; justify-content: space-between; gap: 24px;
    }
    .variant-name { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; min-width: 80px; }

    /* ── RIPPLE ── */
    @keyframes ripple {
      0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.5; }
      100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }
    }
    .ripple-dot {
      position: absolute; border-radius: 50%;
      background: var(--off-glow); pointer-events: none;
      animation: ripple 0.5s ease-out forwards;
    }
    .track.on .ripple-dot { background: var(--on-glow); }