@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500;700&family=Nunito:wght@400;600;800&display=swap');
:root{--ink:#1b1146;--violet:#7b4dff;--lav:#c9b8ff;--pink:#ff9ff3;--paper:#f6f2ff;--card:#ffffff;--text:#221a4d;--muted:#5d5490}
@media (prefers-color-scheme:dark){:root{--paper:#120a33;--card:#1e1450;--text:#f1ecff;--muted:#b9aee8}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 1.05rem/1.65 'Nunito',sans-serif;color:var(--text);background:var(--paper)}
h1,h2,h3,.px{font-family:'Pixelify Sans',monospace;line-height:1.15;margin:0 0 .5em}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}h3{font-size:1.35rem}
a{color:var(--violet)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
section{padding:64px 0}
p{max-width:68ch}
/* header */
header{background:var(--ink);position:sticky;top:0;z-index:9;border-bottom:4px solid var(--violet)}
header .wrap{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:700 1.25rem 'Pixelify Sans'}
.brand img{width:40px;height:40px;image-rendering:pixelated;border-radius:6px}
nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav a{color:#d8ccff;text-decoration:none;padding:8px 14px;font:500 1.05rem 'Pixelify Sans'}
nav a:hover,nav a[aria-current]{background:var(--violet);color:#fff}
/* hero */
.hero{background:linear-gradient(180deg,#5a35e0,#9b7bff 70%,var(--paper));text-align:center;padding:56px 0 96px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.35) 1.5px,transparent 1.5px) 0 0/16px 16px;mask-image:linear-gradient(#000,transparent 80%)}
.hero .wrap{position:relative}
.hero .logo{width:132px;image-rendering:pixelated;border-radius:14px;box-shadow:0 8px 0 var(--ink);margin-bottom:18px}
.hero .banner{display:block;width:min(100%,760px);margin:0 auto;border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);image-rendering:pixelated}
.hero p{color:#fff;font-size:1.2rem;margin:22px auto 26px;max-width:46ch}
.ip{display:inline-flex;border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);background:#fff;font:700 1.35rem 'Pixelify Sans'}
.ip span{padding:10px 20px;color:var(--ink)}
.ip button,.btn{font:700 1.1rem 'Pixelify Sans';background:var(--pink);color:var(--ink);border:0;padding:10px 20px;cursor:pointer;text-decoration:none;display:inline-block}
.ip button:hover,.btn:hover{background:#ffc4f7}
.ip button:active,.btn:active{transform:translateY(2px)}
.btn.alt{background:var(--violet);color:#fff;border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
/* cards */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--violet);padding:22px}
.card p{margin:0;color:var(--muted)}
.staff .card{text-align:center;padding:18px}
.avatar{width:96px;height:96px;margin:0 auto 12px;image-rendering:pixelated;background:var(--lav);border:3px solid var(--ink)}
.role{display:inline-block;padding:2px 12px;font:700 .95rem 'Pixelify Sans';color:#fff;background:var(--violet)}
.role.owner{background:#e0409c}.role.admin{background:#d13b3b}.role.mod{background:#2f8f5b}.role.helper{background:#2e7fd1}
.rank-h{margin:36px 0 14px}
/* pages */
.page-title{background:var(--ink);color:#fff;padding:48px 0;border-bottom:4px solid var(--violet)}
.page-title p{color:var(--lav);margin:0}
.page-title h1{font-size:clamp(2rem,5vw,3rem)}
ol.rules{padding-left:0;list-style:none;counter-reset:r;display:grid;gap:14px}
ol.rules li{counter-increment:r;background:var(--card);border-left:8px solid var(--violet);padding:14px 18px 14px 64px;position:relative}
ol.rules li::before{content:counter(r);position:absolute;left:18px;top:10px;font:700 1.6rem 'Pixelify Sans';color:var(--violet)}
ol.rules strong{display:block}
.steps{display:grid;gap:18px;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;background:var(--card);border:4px solid var(--ink);padding:18px 18px 18px 74px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:14px;top:14px;width:40px;height:40px;background:var(--violet);color:#fff;font:700 1.4rem/40px 'Pixelify Sans';text-align:center}
footer{background:var(--ink);color:#bfb2f5;padding:36px 0;text-align:center}
footer a{color:var(--pink)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 20px;border:3px solid var(--pink);font:500 1.05rem 'Pixelify Sans';opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.toc{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 36px;padding:0;list-style:none}
.toc a{display:block;padding:8px 16px;background:var(--card);border:3px solid var(--ink);color:var(--text);text-decoration:none;font:500 1.05rem 'Pixelify Sans'}
.toc a:hover{background:var(--violet);color:#fff}
.guide{margin-bottom:56px;scroll-margin-top:90px}
.guide ul{padding-left:1.2em}.guide li{margin:.35em 0}
.src{font-size:.95rem;color:var(--muted)}
.tip{background:var(--card);border-left:8px solid var(--pink);padding:12px 18px;margin:18px 0;max-width:68ch}
.tbl{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;background:var(--card);border:3px solid var(--ink);min-width:480px}
th,td{padding:8px 14px;text-align:left;border-bottom:1px solid var(--lav)}
th{background:var(--ink);color:#fff;font:500 1rem 'Pixelify Sans'}