:root{
  --blue:#1400ff; --violet:#7b16ff; --mag:#db00ff; --mint:#00d98b; --red:#ff2a4a;
  --ink:#08041d; --panel:rgba(9,5,30,.84); --panel2:rgba(255,255,255,.06); --line:rgba(255,255,255,.14);
  --text:#f5f2ff; --muted:#c7c0ea; --frame:#ffffff;
  --display:'Rubik Mono One','Arial Black',system-ui,sans-serif;
  --body:'Mulish',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
html,body{margin:0}
body{background:var(--ink);color:var(--text);font-family:var(--body);font-weight:500;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* the background: our own screenshots in KHN blue and magenta, with the big glass shards from the old site */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:#1400ff url(/img/bg.webp) center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 520,0 300,520 0,380' fill='%23ffffff' fill-opacity='.10'/%3E%3Cpolygon points='980,0 1600,0 1600,420 1260,620' fill='%2300c8ff' fill-opacity='.10'/%3E%3Cpolygon points='520,1000 860,420 1300,1000' fill='%23ffffff' fill-opacity='.07'/%3E%3Cpolygon points='1600,560 1600,1000 1340,1000' fill='%23ff4dff' fill-opacity='.10'/%3E%3C/svg%3E") center/100% 100% no-repeat,
  linear-gradient(180deg,rgba(8,4,29,.15) 0%,rgba(8,4,29,.55) 70%,rgba(8,4,29,.75) 100%)}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px}.skip:focus{left:12px;z-index:20;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
header{position:sticky;top:0;z-index:10;background:rgba(8,4,29,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:17px;letter-spacing:.5px}
.brand img{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 2px #fff}
nav.main{margin-left:auto;display:flex;align-items:center;gap:2px}
nav.main a{text-decoration:none;font-weight:800;font-size:14.5px;padding:8px 11px;border-radius:10px;color:var(--muted)}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.08)}
.menu{display:none;margin-left:auto;background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;border-radius:10px;padding:8px 12px;font:800 14px var(--body);cursor:pointer}
@media (max-width:980px){
  .menu{display:inline-flex;align-items:center;gap:8px}
  nav.main{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;padding:10px 16px 16px;background:#0b0626;border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.5)}
  nav.main.open{display:flex}
  nav.main a{padding:12px;font-size:16px}
  nav.main .btn{margin-top:6px;justify-content:center}
}

/* buttons: the old site's gradient pills, letter-spaced */
.btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:900 14px var(--body);letter-spacing:.2em;text-transform:uppercase;color:#fff;padding:15px 24px;border-radius:12px;border:0;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn svg{width:22px;height:22px;flex:none}
.btn.games{background:linear-gradient(100deg,var(--blue) 0%,#0a55ff 45%,var(--mint) 100%)}
.btn.discord{background:linear-gradient(100deg,var(--blue) 0%,#7a12e8 55%,var(--red) 100%)}
.btn.yt{background:linear-gradient(100deg,var(--blue) 0%,var(--mag) 100%)}
.btn.light{background:#fff;color:#16083f}
.btn.small{padding:10px 16px;font-size:12.5px}

/* hero */
.hero{padding:56px 0 40px}
.welcome{font-family:var(--display);font-size:clamp(22px,3vw,34px);color:#f03cff;margin:0;transform:rotate(-2deg);transform-origin:left;display:inline-block;
  text-shadow:2px 2px 0 #14003d,-2px 2px 0 #14003d,2px -2px 0 #14003d,-2px -2px 0 #14003d,0 6px 18px rgba(0,0,0,.4)}
h1.title{font-family:var(--display);font-weight:400;margin:10px 0 0;font-size:clamp(36px,6.9vw,96px);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
h1.title span{display:inline-block;margin-right:.32em;-webkit-text-stroke:.07em #fff;paint-order:stroke fill;filter:drop-shadow(0 8px 0 rgba(10,0,60,.45))}
h1.title span:last-child{margin-right:0}
h1.title .w1{color:var(--blue)}h1.title .w2{color:var(--violet)}h1.title .w3{color:var(--mag)}
@media (prefers-reduced-motion:no-preference){
  h1.title span{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
  h1.title .w2{animation-delay:.08s}h1.title .w3{animation-delay:.16s}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;margin-top:38px;align-items:start}
.intro{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.intro p{margin:0 0 14px;font-size:19px;font-weight:700}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plist a{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:800;font-size:17.5px;padding:10px 12px;border-radius:12px;background:var(--panel2);border:1px solid transparent}
.plist a:hover{border-color:rgba(255,255,255,.3)}
.plist i{flex:none;width:12px;height:12px;border-radius:3px;transform:rotate(45deg);background:linear-gradient(135deg,var(--blue),var(--mag))}
.plist small{display:block;color:var(--muted);font-weight:600;font-size:14.5px}
.cta{display:grid;gap:14px}
.cta .btn{justify-content:space-between}
.logo-card{display:flex;align-items:center;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.logo-card img{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 4px #fff}
.logo-card p{margin:0;color:var(--muted);font-size:15.5px}
.logo-card b{color:#fff}
@media (max-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr)}.cta{order:-1}.intro{padding:20px 16px}.plist a{padding:10px}.hero{padding-top:34px}}

/* sections */
section{padding:30px 0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,4vw,44px)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.6vw,44px);line-height:1.08;margin:0 0 14px;text-transform:uppercase;text-shadow:3px 3px 0 var(--blue),6px 6px 0 rgba(219,0,255,.55)}
h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.2vw,24px);line-height:1.2;margin:0 0 12px;text-transform:uppercase}
.lead{font-size:clamp(17px,1.8vw,20px);font-weight:700;max-width:62ch;margin:0 0 26px}
.muted{color:var(--muted)}
p{max-width:70ch}

/* the white photo frames from the old site */
.frame{background:var(--frame);padding:8px;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.frame img{border-radius:15px;width:100%;height:100%;object-fit:cover}
.cap{font-size:14.5px;color:var(--muted);margin:10px 4px 0}

/* project cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{display:flex;flex-direction:column;text-decoration:none;transition:transform .18s}
.card:hover{transform:translateY(-4px)}
.card .frame{aspect-ratio:16/10}
.card b{font-family:var(--display);font-weight:400;font-size:18px;margin:14px 4px 4px;text-transform:uppercase}
.card span{color:var(--muted);font-size:15.5px;margin:0 4px}
.card .go{margin-top:8px;font-weight:900;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.card .go::after{content:" ›";color:var(--mag)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

.discord-band{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:30px;align-items:center;background:linear-gradient(120deg,rgba(20,0,255,.92),rgba(122,18,232,.9) 55%,rgba(255,42,74,.85));border-radius:28px;padding:clamp(22px,4vw,40px);border:1px solid rgba(255,255,255,.3)}
.discord-band h2{text-shadow:3px 3px 0 rgba(0,0,0,.35)}
.discord-band p{font-size:18px;font-weight:700;margin:0 0 20px}
.discord-band .frame{transform:rotate(2deg)}
@media (max-width:760px){.discord-band{grid-template-columns:1fr}.discord-band .frame{transform:none;max-width:420px}}

/* two-column blocks */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start}
.split.wide-left{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
@media (max-width:860px){.split,.split.wide-left{grid-template-columns:minmax(0,1fr)}}

/* numbered features: a real list, so the numbers mean something */
.features{list-style:none;counter-reset:f;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.features li{counter-increment:f;background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px}
.features li::before{flex:none;content:counter(f);font-family:var(--display);font-size:26px;line-height:1;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--mag));box-shadow:3px 3px 0 #fff}
.features li p{margin:0;font-weight:700;font-size:17px}
.features li .frame{margin-top:auto;padding:6px;border-radius:16px}
.features li .frame img{border-radius:11px;aspect-ratio:16/9}
.features li.short{flex-direction:row;align-items:center}
.features li.tall{grid-row:span 3}
@media (max-width:760px){.features li.tall{grid-row:auto}}
@media (max-width:760px){.features{grid-template-columns:1fr}}

/* video: a picture until someone presses play */
.video{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:15px;overflow:hidden;background:#000;cursor:pointer}
.video img{width:100%;height:100%;object-fit:cover;transition:opacity .2s;opacity:.92}
.video:hover img{opacity:1}
.video .play{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--mag));box-shadow:0 0 0 5px #fff,0 12px 30px rgba(0,0,0,.45);display:grid;place-items:center;transition:transform .15s}
.video:hover .play{transform:scale(1.07)}
.video .play::after{content:"";border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.warn{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;background:rgba(8,4,29,.94);color:#fff;font:600 16px var(--body);cursor:default}
.warn b{font-family:var(--display);font-weight:400;font-size:20px;color:#ffd84d}
.warn .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.flag{display:inline-flex;gap:8px;align-items:center;font-size:14px;font-weight:800;color:#ffd84d;background:rgba(255,216,77,.1);border:1px solid rgba(255,216,77,.45);border-radius:10px;padding:5px 10px}

/* Iron Eclipse */
.nations{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.nations li{font-weight:800;font-size:14.5px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--line)}
ol.ideas{margin:0 0 18px;padding-left:22px;display:grid;gap:12px}
ol.ideas li{font-weight:700;padding-left:6px}
ol.ideas li::marker{font-family:var(--display);color:#ff6bff}
.blogs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.blogs a{display:flex;align-items:center;gap:14px;text-decoration:none;font-weight:800;padding:12px 14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.blogs a:hover{border-color:rgba(255,255,255,.4)}
.blogs .n{font-family:var(--display);font-size:15px;min-width:46px;text-align:center;padding:6px 0;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--mag))}
.blogs .ext{margin-left:auto;color:var(--muted);font-size:13px;font-weight:700}

/* community */
.note{border-left:5px solid #ffd84d;background:rgba(255,216,77,.08);border-radius:0 16px 16px 0;padding:16px 20px;margin:0 0 26px;max-width:80ch}
.note b{color:#ffd84d}
.note p{margin:6px 0 0;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.chips a{text-decoration:none;font-weight:800;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--line)}
.chips a:hover{background:rgba(255,255,255,.18)}
.sub{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
blockquote{margin:0 0 22px;padding:20px 22px;border-radius:18px;background:var(--panel2);border:1px solid var(--line);font-size:17.5px;font-weight:700}
blockquote footer{margin-top:10px;font-size:14.5px;color:var(--muted);font-weight:700}
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin:0 0 26px}
.gallery .frame{padding:6px;border-radius:16px}.gallery .frame img{border-radius:11px;aspect-ratio:4/3}
.gallery .g1{grid-column:span 3}.gallery .g2{grid-column:span 3}.gallery .g3,.gallery .g4,.gallery .g5{grid-column:span 2}
@media (max-width:640px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery .g1,.gallery .g2,.gallery .g3,.gallery .g4,.gallery .g5{grid-column:span 1}.gallery .g5{grid-column:span 2}}
.mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 20px}
.mini div{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:16px}
.mini b{display:block;margin-bottom:4px}
.mini p{margin:0;font-size:15.5px;color:var(--muted)}
@media (max-width:640px){.mini{grid-template-columns:1fr}}
table.deps{width:100%;border-collapse:collapse;font-size:15.5px;margin:0 0 10px;background:var(--panel2);border-radius:14px;overflow:hidden}
.deps th,.deps td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.deps th{font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.deps td:last-child{text-align:right;font-family:ui-monospace,Consolas,monospace;white-space:nowrap}
.deps tr:last-child td{border-bottom:0}
@media (max-width:480px){.deps th,.deps td{padding:9px 10px;font-size:14px}.deps td:last-child{white-space:normal}.blogs .ext{display:none}.btn{letter-spacing:.14em;padding:14px 18px}}
.music-tile{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:15px;overflow:hidden;background:linear-gradient(135deg,var(--blue),var(--mag));cursor:pointer;border:0;width:100%;padding:0;color:#fff}
.music-tile img{width:34%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 5px #fff,0 16px 40px rgba(0,0,0,.4)}
.music-tile span{position:absolute;bottom:14px;left:0;right:0;font:900 13px var(--body);letter-spacing:.2em;text-transform:uppercase}
.music-tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* contact */
.contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.contacts a{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:20px;border-radius:20px;background:var(--panel2);border:1px solid var(--line)}
.contacts a:hover{border-color:rgba(255,255,255,.45)}
.contacts svg{width:30px;height:30px}
.contacts b{font-size:18px;font-weight:900}
.contacts span{color:var(--muted);font-size:15px;word-break:break-word}
@media (max-width:760px){.contacts{grid-template-columns:1fr}}

footer.site{padding:34px 0 50px;color:var(--muted);font-size:14.5px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
footer.site a{text-decoration:none;color:#fff;font-weight:700}
footer.site a:hover{text-decoration:underline}
footer.site .r{margin-left:auto;display:flex;flex-wrap:wrap;gap:16px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* language switch */
.lang{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-left:6px}
.lang button{background:transparent;border:0;color:var(--muted);font:900 12.5px var(--body);letter-spacing:.08em;padding:8px 10px;cursor:pointer}
.lang button[aria-pressed=true]{background:#fff;color:#16083f}
nav.main a[aria-current=true]{color:#fff;background:rgba(255,255,255,.12)}
@media (max-width:980px){.lang{margin:8px 0 0;align-self:flex-start}}

/* quick facts under the hero */
.facts{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.facts li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:14px 16px;font-weight:800;font-size:15px;line-height:1.35}
.facts b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.1;color:#fff;text-shadow:2px 2px 0 var(--blue)}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* browser games */
.featured{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.game{display:flex;flex-direction:column;text-decoration:none;border-radius:24px;padding:16px 16px 20px;background:var(--panel2);border:2px solid var(--line);transition:transform .18s,border-color .18s}
.game:hover{transform:translateY(-4px)}
.game .frame{aspect-ratio:16/10;padding:6px;border-radius:18px}
.game .frame img{border-radius:13px}
.game .tag{align-self:flex-start;margin:14px 0 8px;font-weight:900;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:8px;color:#06120b}
.game b{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.4vw,26px);line-height:1.15;text-transform:uppercase}
.game p{margin:8px 0 14px;color:var(--muted);font-size:16px}
.game .go{margin-top:auto;font-weight:900;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.game .go::after{content:" ›"}
.game.is{border-color:#2a7a4f;background:linear-gradient(160deg,rgba(47,214,119,.16),rgba(4,17,10,.5))}
.game.is:hover{border-color:#62ff9a}.game.is .tag{background:#62ff9a}.game.is .go::after{color:#62ff9a}
.game.mr{border-color:#9a6a1c;background:linear-gradient(160deg,rgba(255,179,71,.16),rgba(26,13,0,.5))}
.game.mr:hover{border-color:#ffb347}.game.mr .tag{background:#ffb347;color:#1a0d00}.game.mr .go::after{color:#ffb347}
.game.st{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;border:2px solid transparent;background:linear-gradient(#120a2e,#120a2e) padding-box,linear-gradient(120deg,#ff2e88,#a64dff 50%,#2de2e6) border-box;box-shadow:0 0 26px rgba(255,46,136,.25),0 0 50px rgba(45,226,230,.12)}
.game.st .tag{background:linear-gradient(120deg,#ff2e88,#7a3cff);color:#fff;margin-top:0}
.game.st .go::after{color:#2de2e6}
.game.st > div{display:flex;flex-direction:column}
@media (max-width:760px){.featured,.game.st{grid-template-columns:minmax(0,1fr)}}
.more{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:24px}
.more a{display:flex;flex-direction:column;text-decoration:none;transition:transform .18s}
.more a:hover{transform:translateY(-3px)}
.more .frame{padding:5px;border-radius:14px;aspect-ratio:16/10}.more .frame img{border-radius:10px}
.more b{font-weight:900;font-size:16px;margin:10px 2px 2px;line-height:1.25}
.more span{color:var(--muted);font-size:14.5px;margin:0 2px;line-height:1.4}
@media (max-width:1000px){.more{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.more{grid-template-columns:repeat(2,minmax(0,1fr))}}
.games-foot{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:30px}
.games-foot p{margin:0;color:var(--muted);font-weight:700}

/* pictures open bigger on click */
.zoom img{cursor:zoom-in}
dialog.lb{padding:0;border:0;background:transparent;max-width:min(1200px,94vw);max-height:92vh}
dialog.lb::backdrop{background:rgba(5,2,20,.88)}
dialog.lb img{max-width:100%;max-height:84vh;border-radius:14px;border:6px solid #fff;margin:0 auto}
dialog.lb p{color:#fff;text-align:center;margin:10px auto 0;font-weight:700;max-width:70ch}
dialog.lb button{position:fixed;top:14px;right:14px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#16083f;font:900 22px var(--body);cursor:pointer}
.totop{position:fixed;right:16px;bottom:16px;z-index:9;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-weight:900;font-size:20px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--mag));box-shadow:0 0 0 3px #fff,0 10px 24px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s}
.totop.on{opacity:1;pointer-events:auto}

/* ---- added with the multi-page version ---- */
/* sub-page heading */
.page-hero{padding:46px 0 10px}
.crumb{font-weight:800;font-size:14.5px;color:var(--muted);margin:0 0 12px}
.crumb a{color:#fff}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,5.6vw,72px);line-height:1.02;margin:0 0 14px;text-transform:uppercase;-webkit-text-stroke:.06em #fff;paint-order:stroke fill;color:var(--mag);filter:drop-shadow(0 6px 0 rgba(10,0,60,.45))}
.page-hero h1.blue{color:var(--blue)}.page-hero h1.violet{color:var(--violet)}
.page-hero .lead{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 20px;max-width:70ch}
.next{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}

/* news */
.news{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.news li{display:flex;gap:16px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:16px}
.news img{flex:none;align-self:flex-start;width:112px;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;box-shadow:0 0 0 4px #fff}
.news time,.news .when{display:block;font-weight:900;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#ff8bff}
.news b{display:block;font-size:17.5px;font-weight:900;line-height:1.3;margin:2px 0 4px}
.news p{margin:0;color:var(--muted);font-size:15.5px}
.news a{color:#fff;font-weight:800}
@media (max-width:760px){.news{grid-template-columns:minmax(0,1fr)}.news img{width:84px}}

/* live Discord numbers */
.live{display:inline-flex;align-items:center;gap:8px;font-weight:800}
.live::before{content:"";width:10px;height:10px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.25)}

/* screenshot gallery on the Minecraft page */
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.shots .frame{padding:6px;border-radius:16px}.shots .frame img{border-radius:11px;aspect-ratio:16/9}
.shots .wide{grid-column:span 2}
@media (max-width:860px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.shots{grid-template-columns:minmax(0,1fr)}.shots .wide{grid-column:auto}}

/* project teasers on the home page */
.teasers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.teaser{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:center;text-decoration:none;background:var(--panel2);border:1px solid var(--line);border-radius:22px;padding:16px;transition:transform .18s,border-color .18s}
.teaser:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.4)}
.teaser .frame{padding:5px;border-radius:15px;aspect-ratio:16/10}.teaser .frame img{border-radius:10px}
.teaser b{display:block;font-family:var(--display);font-weight:400;font-size:19px;text-transform:uppercase;line-height:1.15;margin-bottom:6px}
.teaser span{display:block;color:var(--muted);font-size:15.5px}
.teaser .go{margin-top:8px;color:#fff;font-weight:900;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.teaser .go::after{content:" ›";color:var(--mag)}
@media (max-width:900px){.teasers{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.teaser{grid-template-columns:minmax(0,1fr)}}

/* music player */
.player{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:start}
.screen{position:relative;aspect-ratio:16/9;border-radius:15px;overflow:hidden;background:linear-gradient(135deg,var(--blue),var(--mag));display:grid;place-items:center}
.screen img{width:32%;height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 5px #fff,0 16px 40px rgba(0,0,0,.4)}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tracks{list-style:none;counter-reset:t;margin:0;padding:0;display:grid;gap:8px}
.tracks button{counter-increment:t;width:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;font:800 16px var(--body);color:#fff;padding:11px 14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.tracks button::before{content:counter(t);font-family:var(--display);font-size:14px;min-width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.1)}
.tracks button:hover{border-color:rgba(255,255,255,.4)}
.tracks button[aria-current=true]{border-color:#fff;background:linear-gradient(100deg,rgba(20,0,255,.6),rgba(219,0,255,.5))}
.tracks button[aria-current=true]::before{content:"▶";background:#fff;color:var(--blue)}
@media (max-width:860px){.player{grid-template-columns:minmax(0,1fr)}}

/* privacy page */
.prose h2{font-size:clamp(22px,2.6vw,30px);margin-top:34px}
.prose p,.prose li{max-width:72ch}
.prose ul{padding-left:20px}

/* Discord announcements */
.ann{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:18px 20px;margin:0 0 16px}
.ann .ann-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ann .av{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.ann .ann-top b{display:block;font-weight:900;line-height:1.2}
.ann .ts{font-size:13.5px;color:var(--muted);font-weight:700}
.ann .ed{font-size:12.5px;color:var(--muted);margin-left:6px}
.ann .open{margin-left:auto;font-weight:800;font-size:13.5px;color:#fff;white-space:nowrap}
.ann .body{font-size:16.5px;line-height:1.55;overflow-wrap:anywhere}
.ann .body p{margin:0;max-width:none}.ann .body p.gap{height:.7em}
.ann .body .ah{font-family:var(--body);font-weight:900;margin:.5em 0 .2em;line-height:1.25;text-transform:none;text-shadow:none}
.ann .body h3.ah{font-size:24px}.ann .body h4.ah{font-size:20px}.ann .body h5.ah{font-size:17px}
.ann .body ul,.ann .body ol{margin:.2em 0;padding-left:24px}
.ann .body a{color:#9fd3ff;font-weight:700}
.ann blockquote{margin:.4em 0;padding:4px 0 4px 14px;border:0;border-left:4px solid rgba(255,255,255,.35);border-radius:0;background:none;font-weight:500;font-size:inherit}
.ann code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:rgba(0,0,0,.35);padding:1px 5px;border-radius:5px}
.ann pre{background:rgba(0,0,0,.4);padding:10px 12px;border-radius:10px;overflow:auto;margin:.4em 0}.ann pre code{background:none;padding:0}
.ann .subtext{font-size:13.5px;color:var(--muted)}
.ann .mention{background:rgba(88,101,242,.3);color:#dfe3ff;border-radius:5px;padding:0 3px;font-weight:700}
.ann .emoji{display:inline-block;width:22px;height:22px;vertical-align:-5px;object-fit:contain}
.ann .spoiler{background:#202225;color:transparent;border-radius:4px;cursor:pointer;padding:0 2px}
.ann .spoiler.shown{background:rgba(255,255,255,.12);color:inherit;cursor:auto}
.ann .att{display:grid;gap:8px;margin-top:12px;max-width:640px}
.ann .att.n2,.ann .att.n4{grid-template-columns:1fr 1fr}.ann .att.n3{grid-template-columns:1fr 1fr 1fr}
.ann .att img{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:12px;border:4px solid #fff}
.ann .files{list-style:none;padding:0;margin:10px 0 0}.ann .files a{color:#fff;font-weight:800}
.ann .emb{margin-top:12px;max-width:560px;background:rgba(0,0,0,.28);border-left:4px solid #5865f2;border-radius:8px;padding:10px 14px}
.ann .emb small{display:block;color:var(--muted);font-size:12.5px;font-weight:700}
.ann .emb b{display:block;margin:2px 0}.ann .emb b a{color:#9fd3ff}
.ann .emb img{margin-top:8px;border-radius:8px;max-height:300px;width:auto}
.ann .emb .fld{margin-top:6px}
.ann-empty{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--panel2);border:1px dashed var(--line);border-radius:18px;padding:18px 20px}
.ann-empty p{margin:0;font-weight:700}
[data-ann][aria-busy=true]:empty::before{content:"…";display:block;padding:18px;color:var(--muted);font-weight:900;font-size:24px}
.month{font-family:var(--display);font-weight:400;font-size:20px;text-transform:capitalize;margin:26px 0 12px;text-shadow:2px 2px 0 var(--blue)}
.month:first-child{margin-top:0}
.more-btn{margin-top:6px}
.ann-head{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-bottom:16px}
.ann-head h2{margin:0}
@media (max-width:560px){.ann{padding:14px}.ann .open{display:none}}