
:root{--black:#000;--white:#f7f7f7;--muted:#999;--line:#292929}
*{box-sizing:border-box}html{min-height:100%;background:#000;scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--white);background:radial-gradient(ellipse at 50% -20%,#202020 0%,#080808 38%,#000 72%);font-family:"Courier New",monospace;overflow-x:hidden;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' stroke='black' stroke-width='1.5' d='M4 2v17l5-5 3 7 3-1-3-7h7z'/%3E%3C/svg%3E") 4 2,auto}
a,button{cursor:pointer}#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.28}.scanlines{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;background:repeating-linear-gradient(to bottom,transparent 0 3px,#fff 4px 5px)}
.site{position:relative;z-index:2;width:min(1040px,calc(100% - 40px));margin:auto;padding:24px 0 70px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;margin-bottom:34px;border-bottom:1px solid var(--line);animation:dropIn .7s ease both}
.brand{font-weight:900;letter-spacing:3px;color:#fff;text-decoration:none;font-size:14px}.brand:before{content:"";display:inline-block;width:7px;height:7px;background:#fff;margin:0 10px 1px 0;box-shadow:0 0 14px #fff;animation:pulse 2s infinite}
nav{display:flex;flex-wrap:wrap;gap:7px}nav a,.button{display:inline-block;padding:10px 13px;background:transparent;border:1px solid #333;color:#cfcfcf;text-decoration:none;font-size:10px;font-weight:bold;letter-spacing:1px;transition:.25s}
nav a:hover,nav a[aria-current=page]{background:#fff;color:#000;border-color:#fff}nav a:hover{transform:translateY(-2px)}
.hero{position:relative;overflow:hidden;text-align:center;padding:58px 22px;margin-bottom:24px;background:linear-gradient(145deg,#101010,#050505);border:1px solid #303030;box-shadow:0 18px 70px #ffffff09;animation:heroIn .85s ease both}
.hero:before,.hero:after{content:"";position:absolute;width:90px;height:1px;background:#fff;opacity:.6}.hero:before{top:0;left:0}.hero:after{right:0;bottom:0}
.kicker{font-size:9px;letter-spacing:5px;color:#999;text-transform:uppercase}h1{font-size:clamp(24px,5vw,42px);line-height:1.35;letter-spacing:4px;margin:20px 0;color:#fff;text-shadow:0 0 28px #ffffff26}.hero p{color:#aaa;line-height:1.8;margin:0;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card,.section{min-width:0;padding:23px;background:linear-gradient(145deg,#101010,#070707);border:1px solid #292929;box-shadow:0 10px 35px #0008;transition:transform .35s,border-color .35s,background .35s,box-shadow .35s}
.card:hover,.section:hover{transform:translateY(-4px);border-color:#777;background:#111;box-shadow:0 16px 45px #ffffff0e}
.card h2,.section h2{font-size:14px;letter-spacing:2px;margin:0 0 13px;color:#fff;line-height:1.7}.card p,.section p{color:#aaa;line-height:1.8;font-size:12px}
.card .button{display:block;text-align:center;margin-top:20px;background:#fff;color:#000;border:1px solid #fff;padding:14px;font-size:10px;letter-spacing:2px;font-weight:900}.card .button:hover{background:#000;color:#fff;transform:translateY(-2px);box-shadow:0 0 24px #ffffff22}
.notice{padding:16px 18px;margin:18px 0;background:#0b0b0b;border:1px solid #3b3b3b;color:#ccc;line-height:1.8;font-size:12px}
.server-fields{display:grid;gap:13px;max-width:620px;margin:24px auto}.server-field{padding:19px;background:#090909;border:1px solid #303030;transition:border-color .25s,transform .25s}.server-field:focus-within{border-color:#aaa;transform:translateY(-2px)}
.server-field label{display:block;margin-bottom:10px;color:#aaa;font-size:9px;letter-spacing:3px}.copy-row{display:flex;gap:8px}.copy-row input{min-width:0;flex:1;padding:13px;background:#000;color:#fff;border:1px solid #333;font:bold 13px "Courier New",monospace}.copy-row button{padding:0 16px;background:#fff;color:#000;border:1px solid #fff;font:bold 10px "Courier New",monospace;letter-spacing:1px;transition:all .2s}.copy-row button:hover{background:#000;color:#fff}#copyStatus{text-align:center;color:#888;font-size:10px;min-height:16px}
ul{padding-left:21px;color:#bbb;font-size:12px;line-height:1.85}li{margin:4px 0}li::marker{color:#fff}a.inline{color:#fff;text-decoration-thickness:1px;text-underline-offset:3px}.footer{text-align:center;color:#666;margin-top:35px;font-size:9px;letter-spacing:3px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:translateY(0)}
.discord-shade{position:fixed;inset:0;z-index:40;background:#0009;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);animation:fadeIn .35s ease both}.discord-shade[hidden],.discord-popup[hidden]{display:none}
.discord-popup{position:fixed;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);z-index:41;width:min(390px,calc(100vw - 34px));padding:26px;background:linear-gradient(145deg,#151515,#050505);border:1px solid #666;box-shadow:0 25px 100px #000,0 0 45px #ffffff12;color:#fff;text-align:center;animation:modalIn .45s cubic-bezier(.2,.8,.2,1) both}
.discord-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:13px}.discord-logo{width:42px;height:34px;flex:none;color:#fff}.discord-popup strong{font-size:12px;letter-spacing:2px}.discord-popup p{font-size:12px;line-height:1.8;color:#aaa;margin:10px 0 22px}
.discord-actions{display:flex;gap:9px}.discord-join{flex:1;text-align:center;padding:14px 10px;background:#fff;border:1px solid #fff;color:#000;text-decoration:none;font-weight:bold;font-size:10px;letter-spacing:1px;transition:all .2s}.discord-join:hover{background:#000;color:#fff}.discord-close{width:46px;background:#111;border:1px solid #444;color:#fff;cursor:pointer;font:bold 13px "Courier New",monospace;transition:all .2s}.discord-close:hover{background:#fff;color:#000}
@keyframes dropIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}@keyframes heroIn{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}@keyframes modalIn{from{opacity:0;transform:translate(-50%,-44%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:680px){header.top{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:1fr}.site{padding-top:12px}.hero{padding:38px 14px}.copy-row button{padding:0 10px;font-size:9px}.discord-popup{padding:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}


/* Rounded, cleaner interface */
:root{--round:18px;--round-small:12px}
.hero,.card,.section,.notice,.server-field,.discord-popup{border-radius:var(--round)}
nav a,.button,.card .button,.copy-row button,.discord-join,.discord-close{border-radius:999px}
.copy-row input{border-radius:var(--round-small)}
.hero{border-color:#242424;box-shadow:0 22px 80px #fff08}
.card,.section{border-color:#222;border-radius:20px}
.card:hover,.section:hover{border-color:#666;transform:translateY(-5px)}
nav{gap:9px}
nav a{padding:11px 16px;border-color:#292929}
.card .button{padding:15px 20px}
.copy-row{gap:10px}
.copy-row button{padding:0 20px}
.discord-popup{padding:30px;border-color:#383838}
.discord-actions{gap:12px}
.discord-close{width:48px}
.notice{border-color:#252525}
.server-field{border-radius:16px}
.footer{letter-spacing:2px}
a,button,input{ -webkit-tap-highlight-color:transparent }
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button,input{cursor:none}
  .custom-cursor{position:fixed;left:0;top:0;width:22px;height:22px;border:1.5px solid #fff;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .18s ease,height .18s ease,background .18s ease,border-color .18s ease;will-change:transform}
  .custom-cursor:after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
  .custom-cursor.is-hover{width:38px;height:38px;background:#fff3;border-color:#fff}
}
@media(hover:none),(pointer:coarse){.custom-cursor{display:none}}
