@font-face{font-family:"SlipCond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/BarlowCondensed-Regular.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/BarlowCondensed-Medium.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/BarlowCondensed-Bold.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/BarlowCondensed-Black.ttf") format("truetype")}
@font-face{font-family:"SlipSans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Inter-Regular.ttf") format("truetype")}
:root{
  --bg:#06080c; --panel:#101820; --line:#243244; --text:#f7fafc; --muted:#d5deea;
  --amber:#ffc633; --green:#22e06b; --red:#ff3b3b; --blue:#5ec4ff;
  --cond:"SlipCond","Arial Narrow","Roboto Condensed",Impact,system-ui,sans-serif;
  --ui:"SlipSans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:#06080c;color:var(--text)}
body{
  min-height:100vh; font-family:var(--ui); font-weight:400; font-synthesis:none;
  background:
    radial-gradient(90% 50% at 50% -10%, #1a2433 0%, transparent 55%),
    #06080c;
}
b,strong{font-weight:400}
a,a:link,a:visited,a:hover,a:focus,a:active,a *,a:link *,a:visited *{text-decoration:none;-webkit-text-decoration:none}
.sample{
  position:sticky; top:0; z-index:5; margin:0; padding:.55rem .8rem; text-align:center;
  background:#2a2108; color:var(--amber); border-bottom:2px dashed #ffb400;
  font-family:var(--cond); font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem;
}
.atmosphere{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.streaks{
  position:absolute; inset:-20% -10%;
  background:
    repeating-linear-gradient(100deg, transparent 0 70px, rgba(94,196,255,.05) 70px 72px, transparent 72px 140px),
    repeating-linear-gradient(100deg, transparent 0 28px, rgba(255,198,51,.035) 28px 29px);
  animation:streaks 7s linear infinite;
}
.smoke{position:absolute; left:0; right:0; bottom:0; width:100%; height:28vh; opacity:.55}
.lanes{
  position:absolute; left:0; right:0; bottom:0; height:18vh;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.04) 8% 8.3%, transparent 8.3% 49%, rgba(255,198,51,.16) 49% 51%, transparent 51% 91.7%, rgba(255,255,255,.04) 91.7% 92%, transparent 92%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.015) 18px 19px);
  mask-image:linear-gradient(180deg, transparent, #000 40%);
}
@keyframes streaks{to{transform:translate3d(-8%,0,0)}}
.top,main{position:relative; z-index:1}
.top{display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:1.4rem 1.2rem .4rem; text-align:center}
.tree{display:flex; flex-direction:column; align-items:center; gap:.28rem; height:7.2rem; margin-bottom:.2rem}
.pole{width:.18rem; flex:1; background:linear-gradient(#3a4658,#1c2633); border-radius:1rem}
.bulb{width:.72rem; height:.72rem; border-radius:50%; background:#1a222e; box-shadow:inset 0 0 0 1px #2c3a4c}
.bulb.stage{width:.5rem; height:.5rem}
.bulb.stage.s1{animation:stage .4s ease .15s forwards}
.bulb.stage.s2{animation:stage .4s ease .4s forwards}
.bulb.amber{animation:amber .35s ease .85s forwards}
.bulb.green{width:.9rem; height:.9rem; animation:green .4s ease 1.35s forwards}
@keyframes stage{to{background:#ffc633; box-shadow:0 0 .7rem #ffc633}}
@keyframes amber{to{background:#ffb400; box-shadow:0 0 .9rem #ffb400}}
@keyframes green{to{background:#22e06b; box-shadow:0 0 1.1rem #22e06b}}
.brand{display:flex; justify-content:center; max-width:100%}
.logo{width:min(52rem, 94vw); height:auto; display:block}
.lede{margin:.35rem 0 .2rem; max-width:36rem; color:var(--muted); font-size:1.05rem; font-weight:400}
main{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem;
  width:min(72rem, calc(100% - 2rem)); margin:1rem auto 2.5rem;
}
.gate{
  display:flex; flex-direction:column; gap:.7rem; min-height:100%;
  padding:1rem 1rem 1.05rem; border:1px solid var(--line); border-radius:1rem;
  background:linear-gradient(180deg, rgba(16,24,32,.92), rgba(10,14,20,.92));
  color:var(--text); box-shadow:0 0 0 1px #000 inset;
}
.gate:hover,.gate:focus-visible{background:#162433; border-color:#3a4d66; outline:none}
.gate:focus-visible{box-shadow:0 0 0 2px var(--blue)}
.ico{width:2.6rem; height:2.6rem}
.ico svg{width:100%; height:100%; display:block}
.copy{display:flex; flex-direction:column; gap:.3rem}
.name{font-family:var(--cond); font-weight:500; font-size:2rem; letter-spacing:.04em; text-transform:uppercase; line-height:.95}
.desc{color:var(--muted); font-size:1rem; font-weight:400; line-height:1.35}
.preview{margin-top:auto; border:1px solid #1d2735; border-radius:.7rem; background:#0b1016; padding:.55rem .65rem}
.leadbar{display:grid; gap:.35rem}
.leadbar .lane{display:grid; grid-template-columns:1fr auto auto; gap:.4rem; align-items:center; font-family:var(--cond); font-weight:400}
.leadbar i{display:block; height:.45rem; border-radius:1rem; background:#243044}
.leadbar .ahead i{width:86%; background:#22e06b}
.leadbar .behind i{width:62%; background:#ff3b3b}
.leadbar .leadtag{font-size:.72rem; letter-spacing:.08em; color:#22e06b; font-weight:400; min-width:2.2rem}
.leadbar em{font-style:normal; font-size:1.15rem; color:#f7fafc}
.slip{display:grid; grid-template-columns:1fr auto 1fr; gap:.2rem .4rem; text-align:center; font-family:var(--cond); font-weight:400; font-size:1.15rem}
.slip span:nth-child(3n+2){color:var(--muted); font-family:var(--ui); font-size:.75rem; letter-spacing:.04em}
.slip .win{color:var(--green)}
.trace{position:relative; padding:.4rem .4rem .2rem}
.trace svg{width:100%; height:3.2rem; display:block}
.trace span{position:absolute; left:.55rem; top:.35rem; font-family:var(--cond); font-size:.75rem; letter-spacing:.12em; color:var(--amber); font-weight:400}
@media (max-width: 1024px){
  main{width:min(100% - 1.4rem, 72rem); gap:.75rem}
  .name{font-size:1.7rem}
  .logo{width:min(44rem, 94vw)}
}
@media (max-width: 820px){
  main{grid-template-columns:1fr; width:min(36rem, calc(100% - 1.2rem))}
  .top{padding-top:1rem}
  .tree{height:5.6rem}
  .lede{font-size:1rem}
}
@media (prefers-reduced-motion: reduce){
  .streaks{animation:none}
  .bulb.stage,.bulb.amber{background:#ffc633; animation:none}
  .bulb.green{background:#22e06b; box-shadow:0 0 .8rem #22e06b; animation:none}
}