/* One switch for the two ways to read the site: Simple · Studio. (One Deal lives inside Studio.)
   Same shape, type and motion on every page. A dark pill slides to the page you're on.
   Doubled class names so page header styles (e.g. Studio's header nav rules) never restyle it. */
.modes.modes{--modes-ink:#26272c;position:relative;display:inline-grid!important;gap:0;margin:0;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;padding:3px;border-radius:999px;
  background:rgba(120,120,128,.13);font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:-.005em;isolation:isolate;flex:none}
.modes.modes a{position:relative;font:inherit;letter-spacing:inherit;text-transform:none;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:999px;color:#5b5c63;text-decoration:none;white-space:nowrap;transition:color .3s}
.modes.modes a:hover{color:var(--modes-ink);text-decoration:none}
.modes.modes a[aria-current]{color:#fff}
.modes.modes a:focus-visible{outline:2px solid var(--modes-ink);outline-offset:2px}
.modes.modes .modes-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n,2));border-radius:999px;background:var(--modes-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.08);transform:translateX(calc(var(--i,0) * 100%));transition:transform .45s cubic-bezier(.22,1,.36,1)}
@media (max-width:600px){.modes.modes{font-size:12px}.modes.modes a{padding:7px 9px;gap:5px}}
@media (max-width:400px){.modes.modes{font-size:11.5px}.modes.modes a{padding:7px 9px}}
@media (prefers-reduced-motion:reduce){.modes-thumb,.modes.modes a{transition:none}}

/* page-to-page: the pill glides, the rest cross-fades (browsers without support just load the page) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .modes-thumb{view-transition-name:modes-thumb}
  ::view-transition-group(modes-thumb){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
}