/* Light mode (html.lite): no blur layers, no 3D, fewer animations. Plus fallbacks for browsers older than Safari 16.2 (no color-mix). Loaded last. */
.lite{scroll-behavior:auto}
.lite body{transition:none}
.lite *,.lite *::before,.lite *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lite .orbs,.lite .rays{display:none}
.lite .glass{box-shadow:0 6px 16px rgba(0,0,0,.22),inset 0 1px 0 var(--glass-hi)}
.lite .logo *,.lite .dvr,.lite .lgA,.lite .lgB,.lite .lbub,.lite .pd .art,.lite .fab .main::before,.lite .low::before,.lite .surf .bub,.lite .lang,.lite .cur{animation:none!important}
.lite .lbub{opacity:0}
.lite .lang,.lite .cur{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.lite .btile,.lite .ctile,.lite .card{transform:none!important;transition:border-color .2s}
.lite .card::after,.lite .btile::before,.lite .ctile::after,.lite .stage::before{display:none}
.lite .art,.lite .card img,.lite .sc-img img{filter:none!important;transform:none!important}
.lite .sc{perspective:none}
.lite .sc-stage{transform:none!important;transform-style:flat}
.lite .sc-card{transform:none!important;box-shadow:0 10px 24px rgba(0,0,0,.3)!important;transition:opacity .35s,visibility .35s}
.lite .sc-card:not([data-a="0"]){opacity:0;visibility:hidden}
.lite .sc-img .art{transform:none!important}
.lite .sheet,.lite .chat.on{animation:none}
.lite .top{box-shadow:0 2px 12px rgba(0,0,0,.25)}
.lite .mega,.lite .menu.glass,.lite .hsearch.glass,.lite .chat,.lite .sheet,.lite .drawer,.lite .bar.glass{background:var(--bg)}
.lite .menu.glass{background-image:linear-gradient(var(--glass-hi),var(--glass-hi))}

/* no color-mix(): Safari before 16.2 drops the whole declaration, so give plain colors instead */
@supports not (background:color-mix(in srgb,red,blue)){
  body::after{background:radial-gradient(1200px 700px at 80% -10%,var(--bg2),transparent 70%),linear-gradient(180deg,var(--bg),var(--bg2) 120%)}
  .bk-ic{background:var(--glass-hi)}
  .card:hover .btn,.btn:hover{box-shadow:0 8px 20px rgba(0,0,0,.3)}
  .mega,.menu.glass,.chat,.sheet,.drawer{background:var(--bg)}
  .mi-art,.mf-img,.sc-img,.stage{background:radial-gradient(circle at 50% 40%,var(--glass-hi),transparent 70%)}
  .sc-card{background:var(--glass)}
  .sc-card[data-a="0"]{box-shadow:0 20px 50px rgba(0,0,0,.45)}
  .surf:hover .bub,.surf:focus-visible .bub{box-shadow:0 0 0 3px var(--accent),var(--shadow)}
  .carrier-opts label:has(input:checked){box-shadow:0 0 0 2px var(--accent)}
  html[data-tk][data-btn="solid"] .btn:not(.ghost):hover{background:var(--accent)}
  html[data-tk][data-card="bordered"] .glass{background:var(--glass)}
  html[data-tk][data-hdr="bar"] .top{background:var(--bg)}
  html[data-tk][data-bgs="gradient"] body::after{background:linear-gradient(160deg,var(--bg) 0%,var(--bg2) 100%)}
}
/* no @property (Safari before 16.4): the rotating border of the language and currency buttons becomes a plain gradient */
@supports not (background:paint(x)) and (not (selector(:popover-open))){
  .lang,.cur{background:linear-gradient(135deg,var(--accent),var(--accent2));animation:none}
}