:root{
  --bg0:#05070c;
  --bg1:#070c14;
  --card:rgba(10,16,28,.72);
  --card2:rgba(10,16,28,.86);
  --stroke:rgba(92, 255, 188, .18);
  --stroke2:rgba(92, 176, 255, .18);
  --text:#d7fbe9;
  --muted:#8bd9bb;
  --accent:#35ff9b;
  --accent2:#4db8ff;
  --warn:#ffd95a;
  --danger:#ff4d6d;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius:16px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Segoe UI Emoji";
  font-size: 17px;
  line-height: 1.55;
  color:var(--text);
  background: radial-gradient(1200px 700px at 20% -10%, rgba(53,255,155,.12), transparent 55%),
              radial-gradient(900px 600px at 85% 10%, rgba(77,184,255,.10), transparent 52%),
              linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
}


.bg{position:fixed; inset:0; z-index:-1;}
.grid{
  position:absolute; inset:-2px;
  background:
    linear-gradient(rgba(53,255,155,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,184,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 30% 10%, black 20%, transparent 70%);
  opacity:.7;
}
.glow{
  position:absolute; inset:-120px;
  background: radial-gradient(circle at 25% 15%, rgba(53,255,155,.18), transparent 45%),
              radial-gradient(circle at 78% 20%, rgba(77,184,255,.14), transparent 45%),
              radial-gradient(circle at 50% 85%, rgba(53,255,155,.08), transparent 45%);
  filter: blur(18px);
}
.rain{position:absolute; inset:0; opacity:.25;}


.topbar{
  position:sticky; top:0; z-index:20;
  padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(5,7,12,.85), rgba(5,7,12,.50));
  border-bottom:1px solid rgba(92,255,188,.12);
}
.brand{display:flex; align-items:center; gap:12px; min-width:260px;}
.brand__logo{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(53,255,155,.18), rgba(77,184,255,.14));
  border:1px solid rgba(92,255,188,.20);
  box-shadow: 0 0 40px rgba(53,255,155,.10);
}
.brand__logo i{color:var(--accent); text-shadow: 0 0 18px rgba(53,255,155,.35);}
.brand__title{font-weight:800; letter-spacing:.6px;}
.brand__meta{font-size:12px; color:rgba(215,251,233,.72); line-height:1.3; padding-top:1px}

.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.nav__btn{
  border:1px solid rgba(92,255,188,.18);
  background: rgba(10,16,28,.35);
  color: rgba(215,251,233,.88);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  display:flex; align-items:center; gap:10px;
  letter-spacing:.6px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.nav__btn i{color:var(--accent2)}
.nav__btn:hover{transform: translateY(-2px); border-color: rgba(53,255,155,.35); box-shadow: 0 12px 25px rgba(0,0,0,.30)}
.nav__btn.is-active{
  background: linear-gradient(135deg, rgba(53,255,155,.18), rgba(77,184,255,.14));
  border-color: rgba(53,255,155,.45);
  box-shadow: 0 0 40px rgba(53,255,155,.14);
}


.pages{padding: 28px 20px 90px; display:grid; place-items:start center;}
.page{display:none; width:min(1320px, 100%); animation: in .35s ease;}
.page.is-active{display:block;}
@keyframes in{from{opacity:0; transform: translateY(10px) scale(.99);}to{opacity:1; transform: translateY(0) scale(1);}}

.card{
  background: var(--card);
  border: 1px solid rgba(92,255,188,.10);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 32px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(520px 190px at 100% 10%, rgba(77,184,255,.08), transparent 62%);
  pointer-events:none;
  border-radius: inherit;
}

h1{
  margin:0 0 12px;
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.28;
  letter-spacing:.8px;
  padding-top: 12px;
  padding-bottom: 4px;
  display: inline-block;
  overflow: visible;
  background: linear-gradient(90deg, #d7fbe9, #9ef3ce, #77d6ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 24px rgba(53,255,155,.10);
}
.lead{margin: 10px 0 20px; color: rgba(215,251,233,.78); font-size: 20px;}

.split{display:grid; grid-template-columns: 1fr; gap:16px; margin-top: 14px;}
@media (max-width: 900px){ .brand{min-width:auto;} }

.panel--tracks{}

.panel{
  background: rgba(10,16,28,.40);
  border: 1px solid rgba(92,255,188,.10);
  border-radius: 16px;
  padding: 16px;
}
.panel h2{margin:0 0 10px; font-size:18px; letter-spacing:.8px; color: rgba(215,251,233,.92);}
.panel h2 i{color: var(--accent); margin-right:8px;}

.list{margin:0; padding-left: 18px; color: rgba(215,251,233,.80);}
.list li{margin: 8px 0;}

.accent{color: var(--accent); font-weight:800;}

.inline-link{
  color: rgba(77,184,255,.95);
  text-decoration: none;
  border-bottom: 1px dashed rgba(77,184,255,.45);
  padding-bottom: 1px;
}
.inline-link:hover{border-bottom-color: rgba(77,184,255,.90)}


.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(53,255,155,.30);
  background: linear-gradient(135deg, rgba(53,255,155,.18), rgba(77,184,255,.14));
  color: rgba(215,251,233,.96);
  box-shadow: 0 16px 35px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cta:hover{transform: translateY(-2px); border-color: rgba(53,255,155,.55); box-shadow: 0 22px 55px rgba(0,0,0,.45)}
.cta--ghost{
  background: rgba(10,16,28,.30);
  border-color: rgba(77,184,255,.25);
}

.hint{margin-top: 16px; color: rgba(215,251,233,.65); font-size: 13px;}
.kbd{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(10,16,28,.55);
  border: 1px solid rgba(92,255,188,.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


.codebox{
  background: rgba(6, 10, 18, .70);
  border: 1px solid rgba(92,255,188,.14);
  border-radius: 14px;
  overflow:hidden;
}
.codebox__header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(215,251,233,.76);
  background: linear-gradient(180deg, rgba(10,16,28,.72), rgba(10,16,28,.40));
  border-bottom: 1px solid rgba(92,255,188,.12);
}
.codebox__body{
  margin:0;
  padding: 12px;
  color: rgba(215,251,233,.82);
  font-size: 13px;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}
.copy{
  cursor:pointer;
  padding:6px 10px;
  border-radius: 10px;
  border:1px solid rgba(77,184,255,.20);
  background: rgba(10,16,28,.35);
  color: rgba(215,251,233,.85);
}
.copy:hover{border-color: rgba(77,184,255,.45)}


.track-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
@media (max-width: 800px){.track-grid{grid-template-columns:1fr;}}
.track{
  padding: 14px;
  border-radius: 14px;
  background: rgba(10,16,28,.36);
  border: 1px solid rgba(92,255,188,.12);
}
.track__top{display:flex; align-items:center; gap:12px; margin-bottom: 8px;}
.track__icon{
  width:42px; height:42px; border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(53,255,155,.10);
  border: 1px solid rgba(53,255,155,.18);
}
.track__icon i{color: var(--accent); font-size: 18px;}
.track__title{font-weight: 950; letter-spacing:.6px;}
.track__meta{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; width:100%; flex-wrap:wrap;}
.track__text{color: rgba(215,251,233,.74); font-size: 15px; line-height:1.6;}
.track__tag{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(92,255,188,.18);
  color: rgba(215,251,233,.85);
  letter-spacing: .6px;
  margin-left:auto;
  text-align:left;
  align-self:flex-start;
}
.track__tag--live{background: rgba(53,255,155,.10); border-color: rgba(53,255,155,.28);}
.track__tag--soon{background: rgba(255,217,90,.10); border-color: rgba(255,217,90,.25); color: rgba(255,217,90,.92);}
.track__tag--off{background: rgba(255,77,109,.10); border-color: rgba(255,77,109,.22); color: rgba(255,77,109,.92);}


.pill-row{display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 12px;}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(10,16,28,.38);
  border: 1px solid rgba(92,255,188,.12);
  color: rgba(215,251,233,.78);
  font-size: 12px;
  letter-spacing: .4px;
}
.pill i{color: rgba(255,217,90,.95)}
.pill--soon{border-color: rgba(255,217,90,.22); background: rgba(255,217,90,.06);}


.learn-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top: 12px;}
@media (max-width: 800px){.learn-grid{grid-template-columns:1fr;}}
.learn-item{
  display:flex; gap:12px; align-items:flex-start;
  padding: 14px;
  border-radius: 14px;
  background: rgba(10,16,28,.36);
  border: 1px solid rgba(92,255,188,.12);
}
.learn-item__icon{
  width:40px; height:40px; border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(53,255,155,.10);
  border: 1px solid rgba(53,255,155,.16);
}
.learn-item__icon i{color: var(--accent)}
.learn-item__title{font-weight: 950; letter-spacing:.5px; margin-bottom: 4px;}
.learn-item__text{color: rgba(215,251,233,.74); font-size: 15px; line-height: 1.6;}


.note{
  margin-top: 12px;
  display:flex; gap:12px; align-items:flex-start;
  padding: 14px;
  border-radius: 14px;
  background: rgba(10,16,28,.36);
  border: 1px solid rgba(77,184,255,.14);
}
.note__icon{
  width:40px; height:40px; border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(77,184,255,.10);
  border: 1px solid rgba(77,184,255,.18);
}
.note__icon i{color: #9ad0ff;}
.note__title{font-weight:900; letter-spacing:.5px; margin-bottom: 4px;}
.note__text{color: rgba(215,251,233,.74);}


.rules{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top: 14px;}
@media (max-width: 800px){.rules{grid-template-columns:1fr;}}
.rule{
  display:flex; gap:12px; align-items:flex-start;
  padding: 14px;
  border-radius: 14px;
  background: rgba(10,16,28,.36);
  border: 1px solid rgba(92,255,188,.12);
}
.rule__icon{
  width:40px; height:40px; border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(53,255,155,.12);
  border: 1px solid rgba(53,255,155,.18);
}
.rule__icon i{color: var(--accent)}
.rule__title{font-weight:800; letter-spacing:.5px; margin-bottom: 4px;}
.rule__text{color: rgba(215,251,233,.76); font-size: 15px; line-height: 1.6;}


.discord-card{
  margin-top: 12px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(10,16,28,.36);
  border: 1px solid rgba(92,255,188,.12);
}
.discord-card__left{display:flex; align-items:center; gap:12px;}
.discord-badge{
  width:46px; height:46px; border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(77,184,255,.12);
  border: 1px solid rgba(77,184,255,.20);
}
.discord-badge i{color: #9ad0ff; font-size: 20px;}
.discord-card__title{font-weight:900; letter-spacing:.6px;}
.discord-card__meta{color: rgba(215,251,233,.72)}


.footer{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; gap:12px;
  padding: 14px 18px;
  color: rgba(215,251,233,.55);
  background: linear-gradient(180deg, rgba(5,7,12,0), rgba(5,7,12,.88));
  border-top: 1px solid rgba(92,255,188,.10);
  backdrop-filter: blur(10px);
}
.footer__right{color: rgba(215,251,233,.40)}


#loading{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(1200px 800px at 30% 0%, rgba(53,255,155,.10), transparent 55%),
              radial-gradient(800px 600px at 85% 10%, rgba(77,184,255,.10), transparent 50%),
              linear-gradient(180deg, #05070c, #04050a);
  z-index:1000;
  transition: opacity .35s ease, transform .35s ease;
}
#loading.is-hidden{opacity:0; pointer-events:none; transform: scale(1.01);}
.loading-card{
  width: min(560px, calc(100% - 34px));
  padding: 26px;
  border-radius: 18px;
  background: var(--card2);
  border: 1px solid rgba(92,255,188,.18);
  box-shadow: var(--shadow);
}
.loading-icon{
  width:66px; height:66px; border-radius: 18px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(53,255,155,.20), rgba(77,184,255,.18));
  border: 1px solid rgba(92,255,188,.22);
  box-shadow: 0 0 70px rgba(53,255,155,.14);
  margin-bottom: 14px;
}
.loading-icon i{font-size: 28px; color: var(--accent); text-shadow: 0 0 22px rgba(53,255,155,.45)}
.loading-title{font-weight: 1000; letter-spacing: 2px; font-size: 18px; line-height: 1.35; padding-top: 2px;}
.loading-sub{margin-top: 6px; color: rgba(215,251,233,.72); line-height: 1.35; padding-top: 1px;}

.hex-stream{
  margin-top: 16px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(92,255,188,.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(160, 255, 210, .85);
  overflow:hidden;
}
.hex-line{
  white-space: nowrap;
  animation: ticker 2.2s linear infinite;
  text-shadow: 0 0 14px rgba(53,255,155,.12);
}
@keyframes ticker{
  from{transform: translateX(0);} to{transform: translateX(-35%);} 
}

.loading-bar{
  margin-top: 14px;
  height: 10px;
  border-radius: 999px;
  background: rgba(92,255,188,.10);
  overflow:hidden;
  border: 1px solid rgba(92,255,188,.14);
}
.loading-bar__fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, rgba(53,255,155,.95), rgba(77,184,255,.85));
  box-shadow: 0 0 25px rgba(53,255,155,.20);
}
.loading-status{margin-top: 10px; color: rgba(215,251,233,.66); font-size: 13px;}