.theme-toggle{
    display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:18px;padding:0;
    border:0;background:transparent;color:var(--text-2);font:500 12px var(--sans);line-height:1.2;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .theme-toggle:hover{color:var(--text)}
  .theme-track{
    display:flex;align-items:center;width:70px;height:38px;padding:4px;border-radius:15px;
    background:linear-gradient(145deg,#0b0c11,#191b24);
    box-shadow:inset 2px 3px 7px rgba(0,0,0,.72),inset -1px -1px 2px rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.06);
    transition:background .45s ease,box-shadow .45s ease;
  }
  .theme-knob{
    position:relative;isolation:isolate;display:grid;place-items:center;width:30px;height:30px;border-radius:11px;
    color:#e4e1ff;background:linear-gradient(145deg,#555667 0%,#242633 76%);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.22),0 3px 6px rgba(0,0,0,.5),0 3px 12px rgba(134,133,255,.55),0 1px 3px rgba(190,187,255,.55);
    transition:transform .45s cubic-bezier(.2,.8,.2,1),background .45s ease,box-shadow .45s ease,color .45s ease,border-color .45s ease;
  }
  /* A masked rotating highlight follows the knob; it only runs on deliberate hover or keyboard focus. */
  .theme-orbit{
    position:absolute;inset:-4px;z-index:1;overflow:hidden;border-radius:15px;padding:3px;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
  }
  .theme-orbit > span{
    position:absolute;inset:-55%;
    background:conic-gradient(from 0deg,transparent 0 64%,rgba(133,129,255,.1) 68%,#a9a4ff 75%,#f5f1ff 78%,#8a86ff 81%,transparent 88%);
  }
  :root[data-theme="light"] .theme-orbit > span{
    background:conic-gradient(from 0deg,transparent 0 64%,rgba(255,192,74,.1) 68%,#ffb83d 75%,#fff7dc 78%,#ffc55c 81%,transparent 88%);
  }
  .theme-knob::before{
    content:"";position:absolute;inset:-8px;z-index:-1;border-radius:50%;pointer-events:none;opacity:0;
    background:radial-gradient(ellipse at 50% 5%,rgba(149,139,255,.85),transparent 50%);
    filter:blur(4px);transition:opacity .2s ease;
  }
  :root[data-theme="light"] .theme-knob::before{background:radial-gradient(ellipse at 50% 5%,rgba(255,186,63,.75),transparent 50%)}
  @keyframes theme-orbit-spin{to{transform:rotate(1turn)}}
  @media (prefers-reduced-motion:no-preference){
    .theme-toggle:focus-visible .theme-orbit,.theme-toggle:focus-visible .theme-knob::before{opacity:1}
    .theme-toggle:focus-visible .theme-orbit > span,.theme-toggle:focus-visible .theme-knob::before{animation:theme-orbit-spin 2.4s linear infinite}
    @media (hover:hover){
      .theme-toggle:hover .theme-orbit,.theme-toggle:hover .theme-knob::before{opacity:1}
      .theme-toggle:hover .theme-orbit > span,.theme-toggle:hover .theme-knob::before{animation:theme-orbit-spin 2.4s linear infinite}
    }
  }
  .theme-knob svg{grid-area:1/1;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s ease,transform .35s ease}
  .theme-knob .icon-moon{opacity:1;transform:scale(1)}
  .theme-knob .icon-sun{opacity:0;transform:scale(.65) rotate(-30deg)}
  .theme-label{display:none}
  :root[data-theme="light"] .theme-track{
    background:linear-gradient(145deg,#d5d6d6,#edece8);
    box-shadow:inset 2px 3px 7px rgba(70,70,64,.24),inset -1px -1px 2px rgba(255,255,255,.75),0 1px 0 rgba(255,255,255,.8);
  }
  :root[data-theme="light"] .theme-knob{
    transform:translateX(32px);color:#9a671e;border-color:rgba(255,255,255,.85);
    background:linear-gradient(145deg,#fffefa 0%,#e7e4dc 100%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.95),0 3px 7px rgba(79,69,53,.25),0 -2px 13px rgba(255,188,66,.55),0 0 5px rgba(255,202,102,.75);
  }
  :root[data-theme="light"] .theme-knob .icon-moon{opacity:0;transform:scale(.65) rotate(30deg)}
  :root[data-theme="light"] .theme-knob .icon-sun{opacity:1;transform:scale(1) rotate(0)}