*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:#eee9f6;font:15px/1.45 "IBM Plex Sans",ui-sans-serif,system-ui,sans-serif}
body{
  min-height:100vh;display:grid;grid-template-columns:minmax(400px,.9fr) minmax(0,1.1fr);
  background:#030308;
}
.gridfx{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 8% -10%,rgba(124,92,191,.3),transparent 56%),
    radial-gradient(700px 380px at 100% 110%,rgba(192,38,211,.12),transparent 52%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
}
.pane{
  position:relative;z-index:1;padding:52px 56px;grid-column:1;grid-row:1;
  border-right:1px solid rgba(183,148,246,.16);
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg,rgba(124,92,191,.14),transparent 36%),#07060e;
  overflow:hidden;
}
.pane:after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,#b794f6,#e879f9,transparent);
  opacity:.75;animation:sideShine 5.5s ease-in-out infinite;
}
.mark{width:78px;height:78px;margin-bottom:30px}
.mark img{width:78px;height:78px;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 22px rgba(192,38,211,.6))}
.kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#6a6478;margin-bottom:14px;font-family:"IBM Plex Mono",monospace}
h1{
  margin:0;font-size:56px;letter-spacing:.16em;font-weight:700;
  background:linear-gradient(90deg,#fff,#d8b4fe,#e879f9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tag{margin-top:16px;color:#9a93a8;max-width:340px;line-height:1.6}
.list{margin:40px 0 0;padding:0;list-style:none;display:grid;gap:14px;color:#9a93a8;font-size:13px}
.list li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both}
.list li:nth-child(2){animation-delay:.08s}
.list li:nth-child(3){animation-delay:.16s}
.list i{width:8px;height:8px;border-radius:50%;background:#c084fc;margin-top:6px;box-shadow:0 0 10px #c084fc}
.list b{color:#eee9f6;font-weight:650}
.meta{color:#5c5866;font-size:12px;letter-spacing:.16em;font-family:"IBM Plex Mono",monospace;position:relative}
.stage{position:relative;z-index:1;display:grid;place-items:center;padding:36px 20px;grid-column:2;grid-row:1}
.card{
  width:min(460px,100%);border:1px solid rgba(139,108,201,.32);
  background:rgba(8,7,13,.92);padding:36px 32px 28px;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4);
  position:relative;border-radius:22px;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both;
}
.frame:before,.frame:after{content:"";position:absolute;width:18px;height:18px;border:1px solid #c084fc;pointer-events:none;border-radius:6px}
.frame:before{left:10px;top:10px;border-right:0;border-bottom:0}
.frame:after{right:10px;bottom:10px;border-left:0;border-top:0}
.card h2{margin:0 0 8px;font-size:26px;letter-spacing:-.03em}
.card p{color:#9a93a8;margin:0 0 24px}
.discord{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#5865F2;color:#fff;text-decoration:none;padding:15px 16px;font-weight:700;
  box-shadow:0 10px 28px rgba(88,101,242,.28);border-radius:14px;
  transition:transform .25s cubic-bezier(.22,1,.36,1),filter .25s;
}
.discord:hover{filter:brightness(1.07);transform:translateY(-1px)}
.err{background:#14080c;border:1px solid rgba(212,106,122,.35);color:#d46a7a;padding:10px 12px;margin:0 0 16px;font-size:13px;border-radius:12px}
.note{margin-top:16px;color:#5c5866;font-size:12px;line-height:1.55}
.note b{color:#cfc8dc}
.note a{color:#b794f6}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.row div{border:1px solid rgba(255,255,255,.06);background:#09090c;padding:12px;border-radius:12px}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sideShine{0%,100%{opacity:.35}50%{opacity:.95}}
.row b{display:block;color:#cfc8dc;margin-bottom:4px;font-weight:650;font-size:12px}
.row span{color:#6a6478;font-size:11px;font-family:"IBM Plex Mono",monospace}
@media(max-width:860px){body{grid-template-columns:1fr}.pane{display:none}.stage{grid-column:1}.row{grid-template-columns:1fr}}