:root {
  






  --band:       clamp(44px, 5.0vw, 84px);
  --band-tight: clamp(26px, 3.0vw, 44px);
  --head-air:   clamp(16px, 1.6vw, 26px);

  








  --rule-hair:      color-mix(in srgb, var(--edge) 66%, transparent);
  --rule-hair-soft: color-mix(in srgb, var(--edge) 34%, transparent);

  




  --bezel: 0 0 0 1px var(--edge-hair) inset,
           0 1px 0 var(--edge-top) inset,
           0 -1px 0 var(--edge-sink) inset;

  



  --lift-3: 0 1px 0 var(--edge-top) inset,
            0 -1px 0 var(--edge-sink) inset,
            0 2px 6px var(--edge-sink),
            0 54px 96px -38px var(--veil-deep),
            0 0 0 1px var(--edge-hair);

  


  --measure-lede: 44ch;
  --measure-body: 58ch;
}































.hero {
  











  min-height: clamp(340px, 52vh, 520px);
  display: flex;
  





  align-items: center;
  padding-block: clamp(18px, 2vw, 32px) clamp(30px, 3.6vw, 60px);
  






}







.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 0;
  width: 100%;
}









.hero-copy,
.hero-grid > :not(.hero-art) {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  




















  max-width: min(66%, 760px);
}










.hero h1 {
  font-size: clamp(38px, 6.9vw, calc(var(--fs-6) * 1.26));
  line-height: .94;
  letter-spacing: -.035em;
  text-wrap: balance;
}







.hero .kicker {
  gap: 14px;
  margin-bottom: clamp(14px, 1.8vw, 24px);
}
.hero .kicker::before { width: clamp(28px, 4vw, 54px); }
.hero .kicker::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  min-width: 0;
  background: linear-gradient(90deg, var(--rule-hair), transparent);
}

.hero .lede {
  margin-top: clamp(16px, 1.6vw, 24px);
  max-width: var(--measure-lede);
  font-size: clamp(16px, 1.12vw, 18.5px);
  line-height: 1.6;
  color: var(--ink-2);
}




.hero-cta {
  margin-top: clamp(22px, 2.6vw, 38px);
  padding-top: clamp(20px, 2.2vw, 32px);
  border-top: 1px solid var(--rule-hair-soft);
  gap: 12px;
}






.hero-art {
  

















































  







  --plate-mask:
    linear-gradient(90deg, transparent 0%, black 9%, black 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, black 7%, black 93%, transparent 100%);

  grid-area: 1 / 1;
  position: relative;
  z-index: 0;
  justify-self: end;
  align-self: center;
  






  width: clamp(330px, 43vw, 700px);
  max-width: none;

  






















  margin-right: 0;
  pointer-events: none;

  
















































  display: var(--hero-art-display, block);
}









.hero-art img {
  width: 100%;
  height: auto;
  border-radius: 0;
  -webkit-mask-image: var(--plate-mask);
          mask-image: var(--plate-mask);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}





.hero-art::before {
  inset: -22% -14% -18% -6%;
  filter: blur(46px);
  opacity: .8;
}











.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--veil-strong) 11%,
    var(--veil-mid) 26%,
    var(--veil-soft) 40%,
    transparent 56%);
  pointer-events: none;
  





  -webkit-mask-image: var(--plate-mask);
          mask-image: var(--plate-mask);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

















.hero h1,
.hero .lede {
  text-shadow: 0 1px 2px var(--veil-deep), 0 0 12px var(--veil-strong);
}







































:is(.page-head, .sec-head:has(> .page-h1)) {
  position: relative;
  padding-top: var(--head-air);
  padding-bottom: clamp(13px, 1.4vw, 18px);
  margin-bottom: clamp(16px, 1.8vw, 24px);
  



  border-bottom: 1px solid var(--rule-hair);
}
:is(.page-head, .sec-head:has(> .page-h1))::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: clamp(56px, 7vw, 96px);
  height: 2px;
  border-radius: var(--r-xs);
  background: var(--rule-accent);
}








:is(.page-head, .sec-head:has(> .page-h1))::before {
  content: "";
  position: absolute;
  z-index: -1;
  









  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: 0;
  bottom: 0;
  background: radial-gradient(40% 72% at 15% 50%,
    var(--accent-wash) 0%, transparent 66%);
  pointer-events: none;
}



.page-h1 {
  font-size: clamp(31px, 4.6vw, calc(var(--fs-6) * .72));
  line-height: 1.02;
  letter-spacing: -.028em;
  text-wrap: balance;
}
:is(.page-head, .sec-head:has(> .page-h1)) .eyebrow { margin-bottom: clamp(11px, 1.3vw, 16px); }



:is(.page-head, .sec-head:has(> .page-h1)) > p:not(.eyebrow) {
  max-width: var(--measure-body);
  margin-top: clamp(10px, 1.2vw, 15px);
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--ink-2);
}




















.sec-head:not(.page-head):not(:has(> .page-h1)) {
  padding-bottom: clamp(12px, 1.4vw, 18px);
  border-bottom: 1px solid var(--rule-hair-soft);
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.sec-head:not(.page-head):not(:has(> .page-h1)) > p:not(.eyebrow) { max-width: var(--measure-body); }






.card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
  box-shadow: var(--lift-2);
}
.card::before { transition: opacity .18s ease; opacity: .75; }
.card:hover::before { opacity: 1; }




.card:focus-within {
  border-color: var(--border-2);
  box-shadow: var(--lift-2);
}



.grid { gap: clamp(13px, 1.3vw, 22px); }

























.status {
  --instr: var(--accent);
  --instr-glow: var(--accent-glow);
  --instr-halo: var(--accent-wash-2);

  padding: 0;                       
  overflow: hidden;                 
  box-shadow: var(--lift-3), var(--bezel);
  border-color: var(--edge);
}
.status:has(.dot.on)   { --instr: var(--ok);   --instr-glow: var(--ok-glow);   --instr-halo: var(--ok-halo); }
.status:has(.dot.off)  { --instr: var(--bad);  --instr-glow: var(--bad-glow);  --instr-halo: var(--bad-halo); }
.status:has(.dot.wait) { --instr: var(--warn); --instr-glow: var(--warn-glow); --instr-halo: var(--warn-halo); }




.status::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--instr), color-mix(in srgb, var(--instr) 30%, transparent) 62%, transparent);
  box-shadow: 0 0 12px var(--instr-glow);
}


.status-top {
  margin: 0;
  padding: clamp(15px, 1.5vw, 19px) clamp(17px, 1.7vw, 23px);
  background: var(--surface-sink);
  border-bottom: 1px solid var(--edge-hair);
  gap: 11px;
}
.status .dot {
  width: 10px; height: 10px;
  box-shadow: 0 0 0 4px var(--instr-halo), 0 0 14px var(--instr-glow);
}
.status-label {
  font-size: 14px;
  letter-spacing: .03em;
}



.status-src {
  color: var(--instr);
  border-color: color-mix(in srgb, var(--instr) 42%, transparent);
  background: color-mix(in srgb, var(--instr) 9%, transparent);
  border-radius: var(--r-xs);
  padding: 5px 9px;
}





.status-figs {
  gap: 0;
  padding: 0;
}
.status .fig {
  padding: clamp(17px, 2vw, 26px) clamp(16px, 1.7vw, 22px);
  border-left: 1px solid var(--edge-hair);
}
.status .fig:first-child { border-left: 0; }








.status .fig[hidden] { display: none; }





.status .fig b {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink-1);
}
.status .fig span {
  margin-top: 9px;
  color: var(--ink-3);
  letter-spacing: .15em;
}



.status-note {
  margin: 0;
  padding: clamp(13px, 1.3vw, 16px) clamp(17px, 1.7vw, 23px);
  background: var(--surface-sink);
  border-top: 1px solid var(--edge-hair);
  color: var(--ink-3);
  font-size: 13px;
}





.section { padding-block: var(--band); }
.section + .section { padding-top: 0; }
















main.section:has(> .page-head),
main.section:has(> .sec-head > .page-h1) { padding-top: 0; }























.wrap.section { padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)); }
.hero.wrap { padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)); }




.mt-l { margin-top: var(--band-tight); }
.mt-m { margin-top: clamp(20px, 2.2vw, 30px); }






.foot {
  position: relative;
  padding-block: clamp(34px, 4.4vw, 66px) clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--rule-hair);
}
.foot::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
  width: min(100% - var(--gut) * 2, var(--maxw));
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--accent) 0, var(--accent-hi) clamp(56px, 7vw, 96px),
    transparent clamp(56px, 7vw, 96px));
}
.foot-in {
  padding-bottom: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--rule-hair-soft);
  gap: 26px;
}
.foot-brand img { width: 44px; height: 44px; }
.foot-brand b { font-size: 17px; }
.foot-links { gap: 9px 26px; }
.foot-legal { padding-top: clamp(16px, 1.8vw, 22px); }

















@media (max-width: 1080px) {
  .hero { min-height: clamp(340px, 50vh, 470px); }
  





  .hero-copy, .hero-grid > :not(.hero-art) { max-width: min(78%, 620px); }
  


  .hero-art { width: clamp(320px, 52vw, 520px); margin-right: 0; }
}





@media (max-width: 820px) {
  










  .hero {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(26px, 6vw, 40px);
    padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 5vw, 30px);
  }

  


  .hero-art {
    order: -1;
    width: auto;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    align-self: stretch;
    justify-self: stretch;
  }
  .hero-art img {
    width: 100%;
    height: clamp(230px, 46vh, 340px);
    




    object-fit: contain;
    object-position: center 46%;
    

    -webkit-mask-image: linear-gradient(180deg, black 0%, black 52%, transparent 100%);
            mask-image: linear-gradient(180deg, black 0%, black 52%, transparent 100%);
  }
  

  .hero-art::after { display: none; }
  .hero-art::before { inset: -10% -20% 0 -20%; filter: blur(38px); opacity: .55; }

  .hero-copy, .hero-grid > :not(.hero-art) { max-width: none; }
  .hero .kicker::after { display: none; }
  .hero .lede { max-width: none; }
  

  .hero-cta { padding-top: clamp(16px, 4vw, 22px); }

  :is(.page-head, .sec-head:has(> .page-h1)) { padding-top: clamp(22px, 5vw, 34px); }
  :is(.page-head, .sec-head:has(> .page-h1))::before { display: none; }

  

  .status .fig { border-left: 0; border-top: 1px solid var(--edge-hair); }
  .status .fig:first-child { border-top: 0; }

  .foot-in { gap: 18px; }
}






@media (min-width: 1600px) {
  

  .hero-art { width: clamp(560px, 40vw, 780px); margin-right: 0; }
  .hero-copy, .hero-grid > :not(.hero-art) { max-width: min(64%, 820px); }
}




















































@property --lava-mid {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 44%;
}
@property --lava-far {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 86%;
}

:root {
  

  --heat-hi:  color-mix(in srgb, var(--accent-hi) 34%, var(--fg));
  --heat-mid: color-mix(in srgb, var(--accent-hi) 74%, var(--fg));
  --heat-far: color-mix(in srgb, var(--accent) 72%, var(--fg));

  





  --crust: color-mix(in srgb, var(--bg-deep) 46%, transparent);

  
  --lava: repeating-linear-gradient(104deg,
            transparent 0 7px, var(--crust) 7px 8px, transparent 8px 19px),
          linear-gradient(177deg,
            var(--fg) 0%,
            var(--fg) 12%,
            var(--heat-hi) 34%,
            var(--heat-mid) var(--lava-mid),
            var(--heat-far) var(--lava-far),
            var(--heat-mid) 100%);
}

@keyframes lava-flow {
  0%   { --lava-mid: 38%; --lava-far: 80%; }
  50%  { --lava-mid: 56%; --lava-far: 96%; }
  100% { --lava-mid: 38%; --lava-far: 80%; }
}


@keyframes lava-bloom {
  0%, 100% { filter: drop-shadow(0 0 10px var(--accent-glow)); }
  50%      { filter: drop-shadow(0 0 22px var(--accent-glow)); }
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1,
  .page-h1,
  .sec-head h2 {
    background-image: var(--lava);
    background-size: auto, 100% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    

    -webkit-text-fill-color: transparent;
    

    text-shadow: none;
  }

  .hero h1 {
    animation: lava-flow 11s ease-in-out infinite,
               lava-bloom 7s ease-in-out infinite;
  }
  


  .page-h1 {
    animation: lava-flow 17s ease-in-out infinite;
    filter: drop-shadow(0 0 10px var(--accent-glow));
  }
  .sec-head h2 {
    animation: lava-flow 23s ease-in-out infinite;
  }

  





  .status .fig b {
    background-image: linear-gradient(176deg,
      var(--fg) 0%, var(--heat-hi) 62%, var(--heat-mid) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 9px var(--accent-glow));
  }
}








@media (prefers-reduced-motion: reduce) {
  .hero h1, .page-h1, .sec-head h2 {
    animation: none;
    --lava-mid: 48%;
    --lava-far: 88%;
    filter: drop-shadow(0 0 14px var(--accent-glow));
  }
}













































.card,
.gate,
.notice {
  background-color: color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
          backdrop-filter: blur(14px) saturate(112%);
}
.status {
  background-color: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
          backdrop-filter: blur(18px) saturate(115%);
}



.status-top,
.status-note {
  background-color: color-mix(in srgb, var(--surface-sink) 82%, transparent);
}




.foot {
  background-color: color-mix(in srgb, var(--bg-deep) 62%, transparent);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  





















  box-shadow: 0 50vh 0 50vh color-mix(in srgb, var(--bg-deep) 62%, transparent);
}



@media (forced-colors: active) {
  .card, .gate, .notice, .status, .status-top, .status-note, .foot {
    background-color: Canvas;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  main { background-image: none; }
  .hero h1, .page-h1, .sec-head h2, .status .fig b {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
    filter: none;
    animation: none;
  }
}
@media print {
  .card, .gate, .notice, .status, .foot {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .hero h1, .page-h1, .sec-head h2, .status .fig b {
    background-image: none;
    color: var(--fg);
    -webkit-text-fill-color: currentColor;
    filter: none;
    animation: none;
  }
}









@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}





@media (forced-colors: active) {
  .hero-art::after,
  :is(.page-head, .sec-head:has(> .page-h1))::before,
  .foot::after,
  .status::after { display: none; }
  .status, .card { box-shadow: none; }
  .foot, .sec-head { border-bottom-color: currentColor; }
}


@media print {
  .hero { min-height: 0; display: block; }
  .hero-art,
  :is(.page-head, .sec-head:has(> .page-h1))::before,
  :is(.page-head, .sec-head:has(> .page-h1))::after,
  .foot::after,
  .status::after { display: none; }
  .hero-copy, .hero-grid > :not(.hero-art) { max-width: none; }
  .status { box-shadow: none; }
}











































































.nav-in {
  flex-wrap: nowrap;
  gap: clamp(9px, .9vw, 15px);
  max-width: min(100%, calc(var(--maxw) + 320px));
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}




.nav { padding-top: env(safe-area-inset-top); }










.brand {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.brand-txt {
  min-width: 0;
  max-width: 100%;
}
.brand-txt b,
.brand-txt span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}















.nav-links {
  gap: 0;
  min-width: 0;
}
.nav-links a { padding: 9px 9px; }























@media (min-width: 821px) {
  .nav-links {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
}
























@media (max-width: 1299px) {
  .brand-txt span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
@media (max-width: 1229px) {
  

  .wc-aud-txt { display: none; }
  .nav-cta span.nav-cta-txt {
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .nav-cta { padding: 9px 11px; }
}
@media (max-width: 1064px) {
  .brand-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}






@media (max-width: 820px) {
  

  .brand { flex: none; }
  










  .brand img {
    width: 42px;
    height: 42px;
  }
}




@media (max-width: 400px) {
  .brand img {
    width: 42px;
    height: 42px;
  }
}
















@media (max-width: 460px) {
  .nav-auth-btn span.nav-auth-txt {
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}



























.wrap {
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}






#wc-livebar {
  padding-bottom: calc(9px + env(safe-area-inset-bottom));
  padding-left: calc(var(--gut) + 4px + env(safe-area-inset-left));
  padding-right: calc(var(--gut) + 4px + env(safe-area-inset-right));
}















.foot { margin-bottom: env(safe-area-inset-bottom); }


























@media (pointer: coarse) {
  


  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  

  .burger {
    width: 44px;
    height: 44px;
  }
  


  .tabs button::before,
  .nav-auth-btn::before,
  .nav-cta::before,
  .bd-win::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
    border-radius: inherit;
  }
  .tabs button,
  .nav-auth-btn,
  .nav-cta,
  .bd-win { position: relative; }
  



  .foot-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  



  .tabs button { min-height: 44px; }
}




































.hero + .section { padding-top: var(--band-tight); }


.hero + .section > .sec-head { margin-bottom: clamp(14px, 1.6vw, 20px); }






























.card {
  background-image:
    radial-gradient(120% 74% at 8% 0%, var(--accent-wash) 0%, transparent 58%),
    linear-gradient(180deg, var(--veil-soft) 0%, transparent 30%),
    var(--grain),
    var(--grad-card);
}
.card:hover,
.card:focus-within {
  background-image:
    radial-gradient(120% 74% at 8% 0%, var(--accent-wash-2) 0%, transparent 58%),
    linear-gradient(180deg, var(--veil-soft) 0%, transparent 30%),
    var(--grain),
    var(--grad-card);
}
.gate {
  background-image:
    radial-gradient(120% 74% at 8% 0%, var(--accent-wash) 0%, transparent 58%),
    linear-gradient(180deg, var(--veil-soft) 0%, transparent 30%),
    var(--grain);
}
.notice {
  background-image:
    radial-gradient(120% 74% at 8% 0%, var(--accent-wash) 0%, transparent 58%),
    var(--grain),
    var(--grad-notice);
}







.gate {
  box-shadow: var(--lift-1), var(--bezel);
}
.gate-ico {
  box-shadow: 0 0 0 1px var(--edge-hair) inset, 0 0 22px var(--accent-wash-2);
}



.notice {
  box-shadow: inset 2px 0 0 var(--accent), var(--lift-1);
}


.pill {
  box-shadow: 0 1px 0 var(--edge-top) inset, 0 1px 2px var(--edge-sink);
  background-image: linear-gradient(180deg, var(--veil-soft), transparent);
}
.pill.live {
  box-shadow: 0 1px 0 var(--edge-top) inset, 0 0 14px var(--ok-halo);
  background-image: linear-gradient(180deg, var(--ok-halo), transparent);
}


.tabs {
  background-image: var(--grain), linear-gradient(180deg, var(--veil-soft), transparent);
  box-shadow: 0 1px 0 var(--edge-top) inset, 0 -1px 0 var(--edge-sink) inset, 0 2px 8px -6px var(--veil-deep);
}
.tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tabs button[aria-selected="true"] {
  box-shadow: var(--lift-1);
  background-image: linear-gradient(180deg, var(--accent-wash-2), transparent);
}



















.tabs button[data-count]::before,
.bd-win[data-count]::before {
  content: attr(data-count);
  order: 2;
  min-width: 1.6em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--edge-hair);
  background: var(--surface-sink);
  color: var(--ink-3);
  font: 600 10.5px/1.35 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-align: center;
}
.tabs button[data-count=""]::before,
.bd-win[data-count=""]::before {
  content: "\2014";
  opacity: .6;
}
.tabs button[aria-selected="true"][data-count]::before {
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  background: var(--accent-wash-2);
  color: var(--ink-1);
}























#market-count,
#cards-status,
#pop-status,
#au-status,
#bd-note,
#poi-status {
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}








.vp-track,
.bd-track {
  box-shadow: 0 1px 2px var(--edge-sink) inset, 0 0 0 1px var(--edge-hair) inset;
  background-image: linear-gradient(180deg, var(--veil-strong), transparent);
}
.vp-track b,
.bd-fill {
  background-image: linear-gradient(90deg, var(--accent), var(--accent-hi));
  box-shadow: 0 0 10px var(--accent-glow);
}








#wc-livebar {
  box-shadow: 0 -1px 0 var(--edge-top) inset, 0 -18px 34px -24px var(--veil-deep), 0 0 0 1px var(--edge-hair) inset;
  background-image: linear-gradient(180deg, var(--veil-mid), var(--veil-strong)), var(--grain);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
          backdrop-filter: blur(14px) saturate(112%);
}
#wc-livebar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 24%, transparent) 46%, transparent 78%);
}
.lb-src {
  box-shadow: 0 0 0 1px var(--edge-hair) inset, 0 1px 2px var(--edge-sink);
}
.lb-src.on  { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent) inset, 0 0 12px var(--ok-halo); }
.lb-src.off { box-shadow: 0 0 0 1px color-mix(in srgb, var(--bad) 40%, transparent) inset, 0 0 12px var(--bad-halo); }


.nav {
  background-image: linear-gradient(180deg, var(--veil-strong), var(--veil-mid)), var(--grain);
  box-shadow: 0 1px 0 var(--edge-sink), 0 18px 34px -26px var(--veil-deep), 0 -1px 0 var(--edge-top) inset;
}





@media (forced-colors: active) {
  .tabs button[data-count]::before,
  .bd-win[data-count]::before,
  #wc-livebar::before { display: none; }
  .gate, .notice, .pill, .tabs, .tabs button[aria-selected="true"], #wc-livebar, .nav { box-shadow: none; }
  .nav, #wc-livebar, .tabs, .pill, .card, .card:hover, .gate, .notice { background-image: none; }
}
@media print {
  .card, .card:hover, .gate, .notice { background-image: none; }
  #wc-livebar,
  #wc-livebar::before { display: none; }
}