/* Visitor layout switch: Modern (torn colour / b&w) ⇄ Retro (phosphor CRT). Own palette so it reads on light and dark themes. */
.style-switch{
  --w:5.9rem;--pad:3px;
  position:relative;isolation:isolate;flex-shrink:0;display:inline-grid;grid-template-columns:var(--w) var(--w);
  height:40px;padding:var(--pad);border-radius:999px;text-decoration:none;color:#9b9b9b;
  font:700 .66rem/1 'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(180deg,#0c0c0c,#1d1d1d);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.1),0 8px 20px -10px rgba(0,0,0,.7);
  -webkit-tap-highlight-color:transparent;
}
.style-switch__opt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.42rem;transition:color .3s,text-shadow .3s}
.style-switch__opt svg{flex-shrink:0}
.style-switch__knob{
  position:absolute;z-index:0;top:var(--pad);bottom:var(--pad);left:var(--pad);width:var(--w);border-radius:999px;overflow:hidden;
  transition:transform .5s cubic-bezier(.55,-.25,.25,1.35),box-shadow .35s;
}
.style-switch__knob::before,.style-switch__knob::after{content:"";position:absolute;inset:0;transition:opacity .35s}

/* Modern knob: colour half + black-and-white half joined by a torn edge */
.style-switch__knob{background:linear-gradient(120deg,#ffb347,#ff5e62 45%,#3a8dff)}
.style-switch__knob::before{
  left:46%;background:linear-gradient(180deg,#f4f4f4,#8c8c8c);
  clip-path:polygon(9% 0,100% 0,100% 100%,7% 100%,0 88%,10% 74%,2% 60%,11% 46%,3% 32%,10% 18%,1% 8%);
  filter:drop-shadow(-1px 0 0 #fff);
}
/* Retro knob: phosphor screen with scanlines */
.style-switch__knob::after{
  opacity:0;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.38) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%,#12402a,#061a10 70%);
  box-shadow:inset 0 0 10px rgba(90,255,170,.35);
}

.style-switch[data-state="modern"] .style-switch__opt--modern{color:#111;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.style-switch[data-state="retro"] .style-switch__knob{transform:translateX(100%);box-shadow:0 0 14px rgba(90,255,170,.35)}
.style-switch[data-state="retro"] .style-switch__knob::before{opacity:0}
.style-switch[data-state="retro"] .style-switch__knob::after{opacity:1}
.style-switch[data-state="retro"] .style-switch__opt--retro{color:#8dffbe;text-shadow:0 0 6px rgba(120,255,180,.85)}

/* Invite the switch: knob leans toward the other option */
@media (hover:hover){
  .style-switch:hover .style-switch__opt{color:#e8e8e8}
  .style-switch[data-state="modern"]:hover .style-switch__opt--modern{color:#111}
  .style-switch[data-state="retro"]:hover .style-switch__opt--retro{color:#8dffbe}
  .style-switch[data-state="modern"]:hover .style-switch__knob{transform:translateX(6px)}
  .style-switch[data-state="retro"]:hover .style-switch__knob{transform:translateX(calc(100% - 6px))}
}
.style-switch:focus-visible{outline:3px solid #3a8dff;outline-offset:3px}

@media (max-width:899px){.style-switch{order:1}}
@media (max-width:600px){
  .style-switch{--w:2.7rem;height:38px}
  .style-switch__label{display:none}
}

/* Transition played before the page reloads in the other layout */
.style-fx{position:fixed;inset:0;z-index:9999;pointer-events:none;background:#000;opacity:0;animation:style-fx-fade .5s ease forwards}
.style-fx::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;translate:-50% -50%;background:#fff;border-radius:2px}
.style-fx--on::after{animation:style-fx-on .5s cubic-bezier(.2,.8,.2,1) forwards}
.style-fx--off::after{animation:style-fx-off .5s cubic-bezier(.6,0,.4,1) forwards}
@keyframes style-fx-fade{to{opacity:1}}
@keyframes style-fx-on{
  0%{width:0;height:2px;opacity:1;box-shadow:0 0 30px 8px rgba(140,255,200,.8)}
  55%{width:100%;height:2px;opacity:1;box-shadow:0 0 30px 8px rgba(140,255,200,.8)}
  100%{width:100%;height:100%;opacity:0}
}
@keyframes style-fx-off{
  0%{width:100%;height:100%;opacity:0}
  35%{width:100%;height:3px;opacity:1;box-shadow:0 0 24px 6px rgba(255,255,255,.7)}
  75%{width:6px;height:3px;opacity:1}
  100%{width:0;height:0;opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .style-switch__knob,.style-switch__knob::before,.style-switch__knob::after,.style-switch__opt{transition:none}
}