:root{
  --seed:#5935D5; --violet:#8E7BFF; --violet-2:#C6BBFF; --gold:#E7C77A;
  --bg:#0A0814; --panel:#14102A; --panel-2:#181330; --line:rgba(198,187,255,0.14);
  --ink:#F7F5FF; --dim:#B9B2D6; --dim-2:#8E86B8;
  --disp:'Space Grotesk',sans-serif; --body:'Noto Sans',sans-serif; --mono:'Roboto Mono',monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:clip; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16.5px; line-height:1.72; }
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--violet-2); text-decoration:none; }
a:hover{ color:#DAD2FF; text-decoration:underline; }
::selection{ background:rgba(142,123,255,0.35); color:var(--ink); }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--violet-2); color:#1B1240; padding:10px 18px; border-radius:0 0 10px 0; font-weight:700; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--violet-2); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:800px; margin:0 auto; padding:0 clamp(20px,5vw,32px); }
h1,h2,h3{ font-family:var(--disp); letter-spacing:-0.02em; line-height:1.14; margin:0; text-wrap:balance; }
h1{ font-size:clamp(30px,5.2vw,44px); }
h2{ font-size:clamp(22px,3.4vw,28px); margin:44px 0 14px; }
h3{ font-size:19px; margin:30px 0 10px; }
p{ margin:0 0 18px; text-wrap:pretty; }
.kicker{ font-size:12.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--violet); margin:0 0 14px; }

/* header */
.hd{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(10,8,20,0.8); border-bottom:1px solid var(--line); }
.hd-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:64px; max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,32px); }
.lockup{ display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:700; font-size:18px; color:var(--ink); }
.lockup:hover{ text-decoration:none; color:var(--ink); }
.lockup img{ width:26px; height:26px; }
.hd a.back{ font-size:14.5px; font-weight:600; }

/* breadcrumb */
.crumb{ font-size:13.5px; color:var(--dim-2); margin:26px 0 16px; }
.crumb a{ color:var(--dim); }
.crumb span{ padding:0 7px; }

/* article */
main{ padding-bottom:72px; }
.lede{ font-size:19px; color:#E4DFFA; border-left:3px solid var(--violet); padding-left:18px; margin:22px 0 30px; }
.meta{ font-size:13.5px; color:var(--dim-2); font-family:var(--mono); margin:0 0 8px; }
ul,ol{ margin:0 0 20px; padding-left:24px; }
li{ margin:0 0 9px; }
li::marker{ color:var(--violet); }
code{ font-family:var(--mono); font-size:0.9em; background:rgba(142,123,255,0.12); border:1px solid var(--line); border-radius:5px; padding:2px 6px; color:#DFD9F8; }
strong{ color:#FFFFFF; }
hr{ border:0; border-top:1px solid var(--line); margin:40px 0; }

.note{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:0 0 22px; }
.note p:last-child{ margin-bottom:0; }
.note .kicker{ margin-bottom:8px; }

.tablewrap{ overflow-x:auto; margin:0 0 22px; }
table{ border-collapse:collapse; width:100%; font-size:15px; }
th,td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-family:var(--disp); font-size:14px; color:var(--violet-2); white-space:nowrap; }

/* cta */
.cta{ display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px; border-radius:999px;
  background:var(--violet-2); color:#1B1240 !important; font-family:var(--disp); font-weight:700; font-size:16.5px;
  box-shadow:0 14px 40px -12px rgba(142,123,255,0.55); transition:transform 140ms ease; }
.cta:hover{ transform:translateY(-1px); text-decoration:none; }
.cta.ghost{ background:transparent; color:var(--ink) !important; border:1.5px solid rgba(198,187,255,0.35); box-shadow:none; }
.panel{ background:linear-gradient(180deg,#1A1438 0%,#110C24 100%); border:1px solid var(--line); border-radius:20px; padding:28px clamp(20px,4vw,32px); margin:40px 0; }
.panel h2{ margin-top:0; }
.panel .btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }

/* faq */
details{ border-bottom:1px solid var(--line); padding:14px 0; }
details summary{ font-family:var(--disp); font-weight:600; font-size:17px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; }
details summary::-webkit-details-marker{ display:none; }
details summary::after{ content:'+'; color:var(--violet); font-size:22px; line-height:1; }
details[open] summary::after{ content:'–'; }
details .body{ padding-top:12px; color:var(--dim); }
details .body p:last-child{ margin-bottom:0; }

/* guide cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin:28px 0 0; }
.card{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; transition:border-color 140ms ease, transform 140ms ease; }
.card:hover{ border-color:rgba(198,187,255,0.4); transform:translateY(-2px); text-decoration:none; }
.card h3{ margin:0 0 8px; font-size:17.5px; color:var(--ink); }
.card p{ margin:0; font-size:14.5px; color:var(--dim); }

/* footer */
footer{ border-top:1px solid var(--line); padding:30px 0 44px; color:var(--dim-2); font-size:14px; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between; }
footer a{ color:var(--dim); }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }