:root{--bg1:#3a9bdc;--bg2:#1c3f78;--gold:#d4a700;--yellow:#ffcc00;--muted:rgba(255,255,255,.78);--card:rgba(255,255,255,.05);--line:rgba(255,255,255,.14);--gap:16px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;min-height:100vh;color:#fff;font-family:'Space Grotesk',system-ui,sans-serif;line-height:1.6;background:linear-gradient(180deg,var(--bg1),var(--bg2)) fixed #1c3f78}
a{color:var(--yellow)}
a:focus-visible,.btn:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;z-index:10}
.skip:focus{left:8px}
h1,h2,h3{font-family:'Bungee',cursive;font-weight:400;line-height:1.15;margin:0}
.top,.foot{display:flex;align-items:center;justify-content:space-between;padding:16px max(16px,4vw);max-width:1200px;margin:0 auto}
.top a{color:#fff;text-decoration:none}
.brand{font-family:'Bungee',cursive;font-size:1.2rem}
.top a:hover{color:var(--yellow)}
main{max-width:1200px;margin:0 auto;padding:0 max(16px,4vw) 48px}
.hero{display:grid;justify-items:center;text-align:center;padding:32px 0 56px}
.hero-text{max-width:34rem}.hero h1{margin-bottom:16px}.hero h1 img{display:block;width:100%;max-width:30rem;height:auto;margin-inline:auto}
.tagline{font-size:1.4rem;font-weight:500;margin:0 0 28px}
.btn{display:inline-block;background:var(--gold);color:#fff;font-weight:700;font-size:1.25rem;padding:16px 44px;border-radius:12px;text-decoration:none;transition:transform .15s,background .15s}
.btn:hover{background:var(--yellow);transform:translateY(-2px)}
.fine{margin:16px 0 0;font-size:.9rem;color:var(--muted)}

.carousel{margin:0 calc(-1*max(16px,4vw));display:grid;gap:var(--gap);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;width:max-content;animation:drift var(--dur) linear infinite}
.rev .track{animation-direction:reverse}
.row:hover .track{animation-play-state:paused}
.set{display:flex;gap:var(--gap);padding-right:var(--gap)}
@keyframes drift{to{transform:translateX(-50%)}}
.card{display:flex;gap:14px;align-items:flex-start;width:300px;height:104px;flex:none;overflow:hidden;padding:16px;background:rgba(10,25,55,.45);border:1px solid var(--line);border-radius:12px}
.card svg{flex:none;color:var(--yellow);margin-top:2px}
.card>div{min-width:0}.card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem;line-height:1.4;color:var(--muted)}

.highlights{padding-top:72px}
.highlights h2{font-size:2rem;text-align:center;margin-bottom:40px;color:var(--yellow)}
.feature{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;margin-bottom:56px}
.feature.flip{grid-template-columns:1fr 1.3fr}
.feature.flip img{order:2}
.feature img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.feature h3{font-size:1.5rem;margin-bottom:10px}
.feature p{margin:0;color:var(--muted);font-size:1.05rem}

.legal{max-width:760px}
.legal h1,.legal h2{color:var(--yellow);margin:2em 0 .5em}
.legal h1{font-size:2rem;margin-top:.5em}
.legal h2{font-size:1.3rem}
.legal hr{border:0;border-top:1px solid var(--line)}
.legal li{margin:.3em 0}

.foot{flex-direction:column;gap:6px;border-top:1px solid rgba(255,255,255,.2);padding-top:1rem;padding-bottom:1rem;text-align:center;font-size:.9rem;color:#fff}
.foot p{margin:0}
.foot nav{display:flex;gap:24px;margin-bottom:8px}
.legalline{font-size:.8rem;color:var(--muted)}

.cta{text-align:center;padding:56px 0 8px}
.cta h2{font-size:2rem;color:var(--yellow);margin-bottom:12px}
.cta p{margin:0 0 24px;color:var(--muted);font-size:1.05rem}
.ss .docs{max-width:860px}
.ss h1{font-size:2rem;color:var(--yellow);margin:.5em 0 .3em}
.ss h2{font-size:1.4rem;color:var(--yellow);margin:2em 0 .5em}
.ss h3{font-size:1.1rem;margin:1.6em 0 .5em}
.ss code,.ss pre{background:rgba(10,25,55,.55);border-radius:6px}
.ss code{padding:1px 6px}
.ss pre{padding:12px 16px;overflow-x:auto;white-space:pre}
.ss pre code{padding:0}
.pk{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;margin-top:8px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.pk.sub{margin-left:28px;padding:6px 14px}
.pk span{color:var(--muted);font-size:.9rem;display:block}
.pk select{flex:none;font:inherit;color:#fff;background:rgba(10,25,55,.7);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.ssgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;margin-top:16px}
.panel{margin-bottom:20px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.ss .panel>summary{margin:0;padding:10px 16px;font-family:Bungee,cursive;font-size:1.2rem;color:var(--yellow);background:rgba(10,25,55,.55);border-bottom:1px solid var(--line);cursor:pointer;user-select:none;-webkit-user-select:none}
.ss .panel:not([open])>summary{border-bottom:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:12px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 10px;text-align:center;background:rgba(10,25,55,.65);border:2px solid var(--line);border-radius:10px;--st:#3fb950}
.tile[data-state=operator]{--st:var(--yellow)}.tile[data-state=disabled]{--st:#e5534b}
.tile{border-color:var(--st)}
.tile>svg{color:var(--st);background:rgba(255,255,255,.06);border-radius:10px;padding:14px;width:72px;height:72px}
.tile strong{font-size:.95rem;line-height:1.25}
.tile .dd{width:100%}.tile .dd>button{width:100%;min-width:0}.tile .dd ul{left:0}
.tile .dd{margin-top:auto}
.gear{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:3px;padding:4px 6px;font:inherit;font-size:.75rem;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;cursor:pointer}
.gear:hover,.gear:focus-visible{color:var(--yellow);border-color:var(--gold);outline:0}
.sets{width:min(440px,calc(100vw - 32px));padding:20px;color:#fff;background:#1c3f78;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.5);overflow:visible}
.sets::backdrop{background:rgba(5,15,35,.6)}
.sets h3{margin:0 0 8px;font-size:1.1rem;color:var(--yellow)}
.sets .pk{flex-direction:row;align-items:center}
.sets .done{display:block;margin:16px 0 0 auto;font-size:1rem;padding:10px 28px}
.side{position:sticky;top:16px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;max-height:calc(100vh - 32px);overflow-y:auto}
.ss .side h2{margin:0 0 8px;font-size:1.3rem}
#sum summary{margin:14px 0 4px;font-weight:700;font-size:.95rem;color:var(--st);cursor:pointer;user-select:none;-webkit-user-select:none}
#sum details[data-state=enabled]{--st:#7ee787}#sum details[data-state=operator]{--st:var(--yellow)}#sum details[data-state=disabled]{--st:#ff8a82}
.side ul{margin:0;padding-left:18px;font-size:.9rem}
.side small{display:block;color:var(--muted);font-size:.78rem}
.side .btn{width:100%;margin-top:16px;padding:12px;text-align:center}
.sponsor{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px;padding:10px;text-align:center;font-size:.8rem;color:var(--muted);text-decoration:none;background:rgba(10,25,55,.65);border:1px solid var(--line);border-radius:10px}
.sponsor:hover{border-color:var(--gold)}
.sponsor img{width:70%;height:auto}
.sponsor b{background:var(--gold);color:#fff;border-radius:999px;padding:2px 12px}
.pk-done{margin-top:20px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.pk-done[hidden]{display:none}
button.btn{border:0;cursor:pointer;font-family:inherit}

@media(max-width:760px){
  .tiles{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;padding:8px}.tile{padding:34px 8px 8px}.tile>svg{width:56px;height:56px;padding:10px}.tile strong{font-size:.85rem}.tile .dd>button{font-size:.85rem;padding:6px 24px 6px 8px}.tile .dd>button::after{right:8px}.dd li{white-space:normal}.sets .pk{flex-direction:column;align-items:stretch}.sets .dd>button{width:100%}
  .ssgrid{grid-template-columns:1fr}.side{position:static;max-height:none}
  .pk{flex-direction:column;align-items:stretch}.pk.sub{margin-left:14px}
  .hero{grid-template-columns:1fr;gap:28px;text-align:center;justify-items:center}
  .tagline{margin-inline:auto}
  .feature{grid-template-columns:1fr;gap:16px}
  .feature.flip{grid-template-columns:1fr}
  .feature.flip img{order:0}
  .card{width:260px}.hero-text{max-width:none}.hero h1 img{margin-inline:auto}
}
/* Server settings polish: hovers and small motion (off with reduced motion below). */
.tile{padding-top:38px;transition:border-color .2s,transform .15s,box-shadow .15s}
.tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.tile>svg{transition:color .2s}
.dd li{transition:background .12s,color .12s}
.dd li:hover{background:rgba(255,255,255,.1);color:var(--yellow)}
.dd>button{transition:border-color .15s,background .15s}
.dd>button:hover{background:rgba(20,45,90,.9)}
.dd>button::after{transition:transform .15s}
.dd>button[aria-expanded=true]::after{transform:rotate(225deg);margin-top:-1px}
.dd ul:not([hidden]){animation:ddin .14s ease-out}
@keyframes ddin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sets[open]{animation:dlgin .18s ease-out}
.sets[open]::backdrop{animation:fadein .18s ease-out}
@keyframes dlgin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.gear{transition:color .15s,border-color .15s,transform .2s}
.gear:hover svg{transform:rotate(45deg)}.gear svg{transition:transform .3s}
.side .btn{transition:transform .15s,filter .15s}.side .btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.sponsor{transition:transform .15s,border-color .15s}.sponsor:hover{transform:translateY(-1px);border-color:var(--gold)}
#sum li{transition:color .2s}
@media(prefers-reduced-motion:reduce){
  .tile,.tile:hover,.dd ul,.sets[open],.sets[open]::backdrop,.gear svg,.side .btn,.sponsor{animation:none;transition:none;transform:none}
  .row{overflow-x:auto}
  .track{animation:none}
  .set[aria-hidden]{display:none}
  html{scroll-behavior:auto}
}



.fold{margin-top:20px}
.fold>summary{cursor:pointer;user-select:none;-webkit-user-select:none;list-style:none;font-size:1.4rem;font-weight:700;color:var(--yellow);padding:6px 0;border-bottom:1px solid var(--line)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"";display:inline-block;width:.45em;height:.45em;margin-right:.7em;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);transition:transform .15s}
.fold[open]>summary::before{transform:rotate(45deg)}
.dd{position:relative;flex:none}
.dd>button{font:inherit;color:#fff;background:rgba(10,25,55,.7);border:1px solid var(--line);border-radius:8px;padding:6px 32px 6px 12px;cursor:pointer;min-width:150px;text-align:left;position:relative}
.dd>button::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg)}
.dd>button:hover,.dd>button:focus-visible{border-color:var(--gold);outline:0}
.dd ul{position:absolute;right:0;top:calc(100% + 4px);z-index:5;min-width:100%;margin:0;padding:4px;list-style:none;background:#14305e;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.dd ul[hidden]{display:none}
.dd li{padding:6px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.dd li.act{background:var(--card);color:var(--yellow)}
.dd li[aria-selected=true]{color:var(--yellow);font-weight:700}
#sum{margin-top:16px}
pre code{background:none;padding:0;border:0}
.side::-webkit-scrollbar{width:8px}.side::-webkit-scrollbar-thumb{background:var(--gold);border-radius:8px}.side::-webkit-scrollbar-track{background:transparent}
.sets{text-align:left}.sets .pk>div:first-child{flex:1;min-width:0}.sets .dd{width:auto;margin-top:0}.sets .dd>button{width:auto;min-width:170px}
.tile .dd>button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}pre{overflow-x:auto;max-width:100%}
.ss .panel>summary{border-radius:11px 11px 0 0}.ss .panel:not([open])>summary{border-radius:11px}.tile:has(.dd ul:not([hidden])){z-index:20;transform:none}.tile .dd ul{z-index:30}
