:root{
  --text:rgba(233,237,246,.96);
  --muted:rgba(233,237,246,.70);
  --muted2:rgba(233,237,246,.56);
  --line:rgba(255,255,255,.10);
  --glass:rgba(12,14,20,.58);
  --glass2:rgba(10,12,18,.34);
  --shadow:0 26px 86px rgba(0,0,0,.50);
  --shadow2:0 18px 56px rgba(0,0,0,.38);
  --r:14px;
  --r2:12px;
  --pad:clamp(22px,3.2vw,48px);
  --edge:clamp(18px,2.4vw,28px);
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0; overflow:hidden; overscroll-behavior:none}
body{
  margin:0;
  min-height:100dvh; min-height:100svh;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  overflow:hidden;
  background:#070a10;
}

.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.bg::before{
  content:"";
  position:absolute;
  inset:-70px;
  background:url("assets/bg.png") center/cover no-repeat;
  filter:saturate(1.03) contrast(1.02) brightness(1.02);
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.03);
  transition:transform 220ms ease-out;
  will-change:transform;
}

.app{
  position:relative;
  z-index:1;
  height:100dvh; height:100svh;
  min-height:0;
  padding:var(--pad);
  display:grid;
  grid-template-rows:auto 1fr;
  gap:clamp(16px,2.1vw,26px);
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:44px;
}

.topLeft{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(10,12,18,.18);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  flex:0 0 auto;
}

.mark{
  width:22px;height:22px;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(115,211,155,.52), rgba(106,167,255,.46));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}

.brandText{
  font-size:12.5px;
  letter-spacing:.2px;
  color:rgba(233,237,246,.86);
  font-weight:600;
}

.tabs{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.tab{
  text-decoration:none;
  font-size:12px;
  line-height:1;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(10,12,18,.16);
  color:rgba(233,237,246,.74);
  backdrop-filter:blur(10px) saturate(130%);
  white-space:nowrap;
}
.tab.isActive{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.10);
  color:rgba(233,237,246,.92);
}
.tab.isDisabled{
  opacity:.55;
  pointer-events:none;
}

.topRight{display:flex; align-items:center; justify-content:flex-end}
.ver{
  font-size:12px;
  font-weight:650;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(10,12,18,.18);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(10px) saturate(130%);
  color:rgba(233,237,246,.82);
}

.layout{
  height:100%;
  min-height:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:space-between;
  gap:clamp(22px,4vw,56px);
  overflow:hidden;
}

.hero{
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:clamp(4px,.6vw,12px);
  flex:1 1 0;
  min-width:0;
}

.kicker{
  margin:0 0 14px;
  font-size:14px;
  font-weight:650;
  color:rgba(233,237,246,.72);
  letter-spacing:.2px;
}

.h1{
  margin:0;
  font-size:clamp(46px,5.2vw,72px);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:800;
  color:rgba(233,237,246,.96);
  text-shadow:0 16px 56px rgba(0,0,0,.36);
}

.sub{
  margin:12px 0 0;
  max-width:560px;
  font-size:14px;
  line-height:1.55;
  color:rgba(233,237,246,.70);
}
.sub2{
  display:inline-block;
  margin-left:6px;
  color:rgba(233,237,246,.58);
}

.foot{
  margin-top:auto;
  padding-top:22px;
  font-size:12px;
  color:rgba(233,237,246,.52);
}

.drawer{
  min-height:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 1 clamp(320px,40vw,560px);
  max-width:90vw;
}

.panel{
  width:100%;
  max-width:none;
  max-height:100%;
  border-radius:var(--r);
  background:var(--glass);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px) saturate(135%);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.panelHead{
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.panelTitle{
  font-size:14px;
  font-weight:650;
  color:rgba(233,237,246,.92);
}

.panelBody{
  flex:1;
  min-height:0;
  overflow:auto;
}

.view{height:100%; min-height:0}
.view.isHidden{display:none}

.viewChangelog{height:100%;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px; overflow:auto;}

.chgHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.chgLabel{
  font-size:12.5px;
  font-weight:750;
  color:rgba(233,237,246,.88);
}
.chgHint{
  font-size:11.5px;
  font-weight:650;
  color:rgba(233,237,246,.52);
  white-space:nowrap;
}

.chgStack{
  flex:1;
  min-height:0;
  max-height:360px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto; scrollbar-width:thin; -ms-overflow-style:none;
}
.chgStack::-webkit-scrollbar{width:6px;height:6px}

.chgRel{
  padding:14px;
  border-radius:var(--r2);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.chgRelTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.chgRelVer{font-size:12.8px; font-weight:800; color:rgba(233,237,246,.92)}
.chgRelDate{font-size:11.2px; color:rgba(233,237,246,.50); white-space:nowrap}

.chgRelList{
  margin:10px 0 0;
  padding:0 0 0 18px;
  list-style:disc;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.chgRelList li{
  font-size:12px;
  line-height:1.35;
  color:rgba(233,237,246,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chgRelList li.isMore{
  list-style:none;
  margin-left:-18px;
  color:rgba(233,237,246,.52);
}

.chgTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.chgNav{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:rgba(233,237,246,.86);
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.chgNav:disabled{opacity:.45; cursor:default}
.chgNav:hover{background:rgba(255,255,255,.10)}

.chgCount{
  font-size:12px;
  color:rgba(233,237,246,.60);
  font-weight:650;
  letter-spacing:.2px;
  white-space:nowrap;
}

.chgMain{
  flex:1;
  min-height:0;
  padding:14px;
  border-radius:var(--r2);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.chgVer{font-size:14px; font-weight:800; color:rgba(233,237,246,.92)}
.chgDate{font-size:11.5px; color:rgba(233,237,246,.52)}

.chgList{
  margin:0;
  padding:0 0 0 18px;
  list-style:disc;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  overflow:hidden;
}
.chgList li{
  font-size:12px;
  line-height:1.35;
  color:rgba(233,237,246,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.viewFaq{height:100%; padding:16px;  display:flex; flex-direction:column overflow:auto;}
.faq{
  flex:1;
  min-height:0;
  max-height:360px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  scrollbar-width:thin;
  -ms-overflow-style:none;
}
.faq::-webkit-scrollbar{width:6px;height:6px}
.faqItem{
  padding:14px;
  border-radius:var(--r2);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow2);
  cursor:pointer;
  user-select:none;
}
.faqTop{display:flex; align-items:center; justify-content:space-between; gap:12px}
.faqLeft{display:flex; align-items:center; gap:10px; min-width:0}
.faqTag{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.18px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,12,18,.22);
  color:rgba(233,237,246,.74);
}
.faqQ{
  font-size:12.5px;
  font-weight:780;
  color:rgba(233,237,246,.90);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.faqChevron{
  flex:0 0 auto;
  width:26px; height:26px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center;
  color:rgba(233,237,246,.72);
  transition:transform 160ms ease, background 160ms ease;
}
.faqA{
  margin-top:0;
  font-size:12px;
  line-height:1.5;
  color:rgba(233,237,246,.62);
  max-height:0;
  overflow:hidden;
  transition:max-height 220ms ease, margin-top 220ms ease;
}
.faqItem:hover{background:rgba(255,255,255,.055)}
.faqItem.isOpen .faqA{max-height:160px; margin-top:8px}
.faqItem.isOpen .faqChevron{transform:rotate(180deg); background:rgba(255,255,255,.07)}

.cards{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:visible;
  min-height:0;
}


.card{
  border-radius:var(--r2);
  background:var(--glass2);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow2);
}

.cardTop{
  padding:14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.cardLeft{
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-width:0;
}

.osIcon{
  width:34px;height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  flex:0 0 auto;
}
.osIcon.isWin{color:rgba(106,167,255,.95)}
.osIcon.isAnd{color:rgba(115,211,155,.95)}

.cardText{min-width:0}
.cardName{
  font-size:13.5px;
  font-weight:650;
  color:rgba(233,237,246,.92);
}
.cardMeta{
  margin-top:4px;
  font-size:12px;
  color:rgba(233,237,246,.58);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:360px;
}

.dlBtn{
  flex:0 0 auto;
  height:32px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  text-decoration:none;
  font-size:12.5px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.10);
  color:rgba(10,12,18,.92);
  background:rgba(233,237,246,.86);
}
.dlBtn.isWin{background:rgba(106,167,255,.92)}
.dlBtn.isAnd{background:rgba(115,211,155,.92)}
.dlBtn:hover{filter:brightness(1.03)}
.dlBtn:active{transform:translateY(1px)}

.cardBody{
  padding:0 14px 14px;
  border-top:1px solid rgba(255,255,255,.06);
}

.file{
  padding-top:12px;
  font-size:12.5px;
  color:rgba(233,237,246,.84);
}

.metaRow{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  color:rgba(233,237,246,.72);
  background:rgba(255,255,255,.04);
}

.hash{
  font-size:11px;
  color:rgba(233,237,246,.50);
}

.card.isNote{
  background:rgba(255,255,255,.04);
}

.note{
  padding:14px;
}
.noteTitle{
  font-size:12.5px;
  font-weight:700;
  color:rgba(233,237,246,.86);
}
.noteText{
  margin-top:6px;
  font-size:11.5px;
  line-height:1.45;
  color:rgba(233,237,246,.58);
}

.panelFooter{
  flex:0 0 auto;
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.noteLine{
  font-size:11.5px;
  line-height:1.2;
  color:rgba(233,237,246,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.legal{
  font-size:11px;
  color:rgba(233,237,246,.46);
  white-space:nowrap;
}

.discordTab{
  position:fixed;
  right:var(--edge);
  bottom:var(--edge);
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  color:rgba(233,237,246,.92);
  background:rgba(10,12,18,.20);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 18px 60px rgba(0,0,0,.42);
}
.discordTab:hover{background:rgba(255,255,255,.10)}
.discordIcon{
  width:30px;height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
}
.discordText{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.2px;
}

@media (max-width:1180px){
  .drawer{flex-basis:clamp(320px,44vw,520px); max-width:88vw;}
  .cardMeta{max-width:320px}
}

@media (max-width:980px){
  html,body{overflow-y:auto;overflow-x:hidden;}
  .app{height:auto;min-height:100dvh;grid-template-rows:auto auto;gap:18px;}
  .layout{
    height:auto;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    overflow:visible;
    gap:22px;
  }
  .hero{
    width:100%;
    order:1;
    padding-left:0;
  }
  .drawer{
    order:2;
    width:100%;
    flex:0 0 100%;
    max-width:100%;
    justify-content:stretch;
    align-items:stretch;
  }
  .panel{max-height:none}
  .panelBody{overflow:visible}
  .top{flex-wrap:wrap}
  .tabs{flex-wrap:wrap;white-space:normal}
}

@media (max-height:820px){
  .app{gap:clamp(14px,1.8vw,22px)}
  .h1{font-size:clamp(40px,5vw,64px)}
  .sub{font-size:13px}
  .panelHead{padding:16px 16px 12px}
  .cards{padding:14px; gap:12px}
  .cardTop{padding:12px}
  .cardBody{padding:0 12px 12px}
  .panelFooter{padding:10px 12px 12px}
}

@media (max-height:720px){
  .sub{display:none}
  .cardBody{display:none}
  .panelFooter{padding:10px 12px 12px}
}

@media (prefers-reduced-motion:reduce){
  .bg::before{transition:none}
  .dlBtn:active{transform:none}
}

/* v12 minimal fixes */
.topRight{position:fixed; top:var(--edge); right:var(--edge); z-index:6; pointer-events:none}
.topRight .ver{pointer-events:auto}
.discordTab{right:var(--edge); bottom:var(--edge)}
.layout{min-height:0}
.foot{position:relative; z-index:1}
@media (max-height:720px){.foot{display:none}}
.dlBtn,.tab,.card,.discordTab{transition:transform 140ms ease, filter 140ms ease, background 140ms ease}
.dlBtn:hover,.tab:hover,.card:hover,.discordTab:hover{transform:translateY(-1px) scale(1.01)  animation:pop 220ms ease-out 1;
}
.dlBtn:active,.tab:active,.discordTab:active{transform:translateY(0) scale(.99)}
@media (prefers-reduced-motion:reduce){.dlBtn,.tab,.card,.discordTab,.faqItem,.faqChevron,.faqA{transition:none!important}}
.mark{background:url('assets/eggnet.png') center/contain no-repeat; border-radius:8px; border:1px solid rgba(255,255,255,.10)}

.tab:focus-visible,.dlBtn:focus-visible,.discordTab:focus-visible,.chgNav:focus-visible,.faqItem:focus-visible{outline:2px solid rgba(233,237,246,.55); outline-offset:2px}


@keyframes pop{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.012)}100%{transform:translateY(-1px) scale(1.01)}}

/* --- Eggnet: force changelog to show ~3 cards with internal scroll --- */
.viewChangelog{
  height:100%;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chgStack{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  overflow-x:hidden;
  max-height:260px;
  scrollbar-width:thin;
  -ms-overflow-style:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.chgStack::-webkit-scrollbar{
  width:6px;
}
.chgStack::-webkit-scrollbar-track{
  background:transparent;
}
.chgStack::-webkit-scrollbar-thumb{
  background:rgba(236,239,244,.58);
  border-radius:999px;
}
.chgStack::-webkit-scrollbar-thumb:hover{
  background:rgba(248,250,252,.9);
}


.chgRel{
  padding:16px 16px 14px;
  min-height:72px;
}
.chgItems,
.chgRelList,
.chgList{
  gap:10px;
}
.chgStack{
  overflow-y:auto;
  overflow-x:hidden;
  max-height:220px;
}
.chgStack::-webkit-scrollbar{
  width:6px;
}
.chgStack::-webkit-scrollbar-track{
  background:transparent;
}
.chgStack::-webkit-scrollbar-thumb{
  background:rgba(236,239,244,.58);
  border-radius:999px;
}
.chgStack::-webkit-scrollbar-thumb:hover{
  background:rgba(248,250,252,.9);
}

/* --- Eggnet: Changelog uses exact same skeleton as QnA --- */
.viewChangelog{
  height:100%;
  padding:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chgStack{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  max-height:260px;
}
.chgStack::-webkit-scrollbar{width:0;height:0}

/* --- Eggnet: Final override — unify QnA / Changelog skeleton --- */
.viewChangelog{height:100%;padding:16px;overflow:hidden;display:flex;flex-direction:column;}
.chgStack{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}
.chgStack::-webkit-scrollbar{width:0;height:0}
.chgRel{padding:16px 16px 14px;min-height:112px;}

/* --- Eggnet: HARD override — make chgStack skeleton identical to .faq --- */
.viewChangelog{
  height:100%;
  padding:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chgStack{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  max-height:none;
}
.chgStack::-webkit-scrollbar{width:0;height:0}

/* Eggnet: make FAQ / Changelog stacks visibly scrollable */
.faq,
.chgStack{
  scrollbar-width:thin;
}
.faq::-webkit-scrollbar,
.chgStack::-webkit-scrollbar{
  width:6px;
}
.faq::-webkit-scrollbar-thumb,
.chgStack::-webkit-scrollbar-thumb{
  background:rgba(233,237,246,.25);
  border-radius:999px;
}
.faq::-webkit-scrollbar-track,
.chgStack::-webkit-scrollbar-track{
  background:transparent;
}


/* Eggnet: hide note line under download cards (no extra caption) */
.noteLine{
  display:none;
}


/* Eggnet: allow window scroll and hide footer legal text */
html,body{
  overflow-y:auto;
  overscroll-behavior:auto;
}
.legal{
  display:none;
}

/* Eggnet: lock window scroll, only panel lists scroll */
html,body{
  overflow:hidden;
}
.app{
  height:100dvh;
}


/* Eggnet: hide download note line and footer legal text (no layout change) */
.noteLine{
  display:none;
}
.legal{
  display:none;
}
/* responsive (keep original look) */
@media (max-width: 900px){
  .app{height:auto;min-height:100dvh}
  .layout{height:auto;gap:18px;overflow:visible}
  .drawer{height:auto;justify-content:flex-end;align-items:stretch;flex-basis:clamp(280px,48vw,420px);max-width:88vw;}
  .panel{max-height:none}
  .panelBody{overflow:visible}
  .top{flex-wrap:wrap}
  .tabs{flex-wrap:wrap;white-space:normal}
}
@media (max-width: 540px){
  .layout{flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}
  .hero{order:1;width:100%}
  .drawer{order:2;width:100%;flex:0 0 100%;max-width:100%}
  .panel{max-height:none}
  .panelBody{overflow:visible}
  .cardTop{flex-direction:column;align-items:stretch}
  .dlBtn{width:100%}
  .cardMeta{max-width:none}
}