/* Solid colours remain readable where color-mix/backdrop-filter are absent. */
@supports not (background:color-mix(in srgb,white,black)){
  .bar{background:var(--surface)}
  .nav .ecosystem-nav{border:1px solid var(--plum)}
  .shot .slot,.fab-list a{background:var(--tint)}
  .shot-gallery .gallery-tabs button[aria-pressed="true"]{background:var(--tint)}
}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
@supports not (width:min(100px,100%)){
  .player-box{width:100%;max-width:1240px;height:86vh}
  .hero h1{font-size:54px}
  .wrap{padding-left:20px;padding-right:20px}
  .player{padding:20px}
  .hero-logo{width:100%;max-width:430px}
  .drawer{width:100%;max-width:440px;padding:26px 24px}
  .sec-head h2{font-size:36px}
  .mod-top h2{font-size:38px}
  .ecosystem-head h2{font-size:42px}
}
/* Older engines do not understand inset, logical padding or aspect-ratio. */
.player,.drawer-wrap{top:0;right:0;bottom:0;left:0}
.image-zoom-dialog{top:0;right:0;bottom:0;left:0}
.fab-menu-btn::before{top:4px;right:4px;bottom:4px;left:4px}
@supports not (font-size:1cqi){.st{font-size:18px}}
@supports not (padding-block:1px){
  .hero{padding-top:64px;padding-bottom:40px}
  .ecosystem,.module,.videos{padding-top:56px;padding-bottom:56px}
  .mega .wrap{padding-top:22px;padding-bottom:26px}
}
@supports not (aspect-ratio:16/9){
  .shot img,.eco-shot,.gallery-image{height:auto}
  .shot .slot{min-height:280px}
}
/* TV overrides are device-scoped, not applied to ordinary large desktops.
   ?tv=1 enables the same layout for manual preview on another browser. */
.tv-mode{scroll-behavior:auto}
.tv-mode body{font-size:20px}
.tv-mode .wrap{max-width:1640px;padding-left:4vw;padding-right:4vw}
.tv-mode .bar{top:0;background:var(--surface);backdrop-filter:none}
.tv-mode .bar>.wrap{height:96px}
.tv-mode .brand img{width:154px;height:80px;max-width:none;image-rendering:auto;transform:none;filter:none}
.tv-mode .nav a,.tv-mode .nav button{font-size:20px;min-height:52px}
.tv-mode .interest-tab{font-size:20px;min-height:52px}
.tv-mode .hero p.lead{font-size:23px}
.tv-mode .btn,.tv-mode .gallery-tabs button{font-size:20px;min-height:52px}
.tv-mode .feat p,.tv-mode .eco-copy p{font-size:20px}
.tv-mode .hero-grid{gap:40px}
.tv-mode .nav>*{margin-left:4px}
.tv-mode .btns>*{margin:0 12px 12px 0}
.tv-mode .st i{margin-right:10px}
.tv-mode .phone-qr{left:24px;bottom:24px;width:210px}
.tv-mode .phone-qr img{width:184px;height:184px}
.tv-mode .phone-qr summary,.tv-mode .phone-qr a{font-size:17px}
.tv-mode .phone-qr p{font-size:15px}
.tv-mode .image-zoom-close,.tv-mode .player-head button{min-width:56px;min-height:52px}
.tv-mode .mega{max-height:75vh;overflow:auto}
.tv-mode a:focus,.tv-mode button:focus,.tv-mode summary:focus,.tv-mode input:focus{
  outline:4px solid #f7a600!important;outline-offset:4px;box-shadow:0 0 0 7px var(--surface);
}
.tv-mode *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
@media(max-width:1280px){
  .tv-mode .nav a,.tv-mode .nav button{font-size:16px;padding:10px}
  .tv-mode .hero h1{font-size:48px}
  .tv-mode .hero p.lead{font-size:21px}
}