@layer base,layout,effects,responsive;
@layer base {
:root{color-scheme:dark;--bg:#080e0b;--text:#edf2ef;--muted:#a0ada5;--accent:#28734d;--line:#ffffff12;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;min-width:280px;overflow-x:clip}a{color:inherit;text-decoration:none}button{font:inherit}svg{display:block;width:24px;height:24px}a:focus-visible,button:focus-visible{outline:2px solid #79c79b;outline-offset:6px;border-radius:5px}::selection{background:#276d49;color:#fff}.skip{position:fixed;top:10px;left:10px;z-index:10;padding:12px;background:#28734d;transform:translateY(-160%)}.skip:focus{transform:translateY(0)}
}
@layer layout {
.page{position:relative;z-index:1;max-width:1440px;padding:0 5.5%;margin:0 auto}main{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,3svh,32px) 0}.hero{text-align:center;position:relative;padding:0 0 clamp(24px,5svh,48px)}.title-wrap{position:relative;margin:12px 0 10px}h1{font-size:clamp(92px,min(18.6vw,29svh),256px);font-weight:900;line-height:1.14;letter-spacing:-.075em;margin:0;padding-right:.065em;background:linear-gradient(155deg,var(--title-light) 2%,var(--title-main) 35%,var(--title-dark) 65%,var(--title-end) 100%);background-size:170% 170%;background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 6px 40px #235e3c30)}.tagline{font-size:clamp(22px,2.8vw,36px);font-weight:600;letter-spacing:-1px;margin:12px 0 14px}.tagline span{color:#8fa698}.intro{font-size:16px;color:var(--muted);margin:0}.social{padding-bottom:0;scroll-margin-top:24px}.section-label{display:flex;align-items:center;gap:22px;margin-bottom:22px}.section-label h2{font-size:12px;font-weight:500;letter-spacing:2.2px;white-space:nowrap;margin:0;color:#a8bbb0}.section-line{height:1px;background:var(--line);flex:1}.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.card{--platform:#ff454e;--tint:255,45,60;position:relative;display:block;overflow:hidden;min-width:0;padding:24px 20px 18px;background:linear-gradient(145deg,rgba(var(--tint),.095),rgba(var(--tint),.015) 70%),#0d1210;border:1px solid rgba(var(--tint),.20);border-radius:12px;transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.icon{color:var(--platform);height:30px;display:flex;align-items:center}.icon svg{width:28px;height:28px;fill:currentColor}.outward{font-size:24px;color:#85968c;transition:color .2s,transform .2s}.card h3{font-size:20px;margin:0 0 10px;letter-spacing:-.5px;font-weight:700}.card p{font-size:14px;margin:0;color:#a3aea7;line-height:1.5}.card-bottom{border-top:1px solid #ffffff0d;margin-top:24px;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;color:#9dabA2;min-height:32px}.action{color:var(--platform);white-space:nowrap}.action span{display:inline-block;transition:transform .2s}.twitch{--platform:#b78aff;--tint:145,70,255}.kick{--platform:#70ef39;--tint:83,252,24}.twitter{--platform:#e8e8ed;--tint:188,188,203}.discord{--platform:#939bff;--tint:88,101,242}
}
@layer effects {
.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 24%,#1b45201c,transparent 62%)}.hero h1{animation:sheen 4s ease-in-out both}.hero{animation:enter .8s ease-out both}.social{animation:enter .8s .12s ease-out both}.card:hover{transform:translateY(-7px);border-color:rgba(var(--tint),.6);box-shadow:0 16px 42px rgba(var(--tint),.09);background:linear-gradient(145deg,rgba(var(--tint),.14),rgba(var(--tint),.035) 80%),#0d1210}.card:hover .outward{color:var(--platform);transform:translate(2px,-2px)}.card:hover .action span{transform:translate(2px,-2px)}@keyframes sheen{to{background-position:100% 80%}}@keyframes enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.card:hover{transform:none}}
}
@layer responsive {
@media(min-width:1500px){.page{padding:0 72px}.hero{padding-bottom:clamp(24px,5svh,48px)}.card{padding:28px 24px 20px}}
@media(max-width:1100px){.card{padding:22px 14px 16px}.cards{gap:10px}.card-bottom{align-items:flex-start;flex-direction:column;gap:10px}.card h3{font-size:19px}}
@media(max-width:760px){.page{padding:0 6%}main{padding:24px 0}.hero{padding:0 0 32px}h1{font-size:clamp(80px,20vw,154px)}.tagline{margin-top:18px}.intro{font-size:15px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:22px 20px 18px}.card-top{margin-bottom:24px}.card-bottom{flex-direction:row;align-items:center;gap:4px}.discord{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.discord .card-top{grid-row:1/3;margin:0;padding-right:30px}.discord h3{grid-column:2;grid-row:1}.discord p{grid-column:2;grid-row:2}.discord .card-bottom{grid-column:1/-1;margin-top:18px}.section-label{gap:14px}.section-label h2{letter-spacing:1.5px}}
@media(max-width:360px){.card{padding:18px 12px}.card-bottom{flex-direction:column;align-items:flex-start}.tagline{font-size:22px}.section-label{gap:8px}.section-label h2{letter-spacing:.7px}}
}

.site-surface{min-height:100svh;background:var(--bg);color:var(--text)}.no-motion *, .no-motion *::before,.no-motion *::after{animation:none!important;transition:none!important}

@media(min-width:761px) and (max-height:800px){main{padding:16px 0}.hero{padding-bottom:24px}.title-wrap{margin:0 0 8px}h1{font-size:clamp(84px,min(16vw,24svh),210px)}.card-top{margin-bottom:20px}.card-bottom{margin-top:18px}}