:root{--violet-200:#e9d5ff;--violet-300:#d8b4fe;--violet-500:#a855f7;--grad:linear-gradient(135deg,#2e0e5e 0%,#6d28d9 25%,#a855f7 55%,#d946ef 80%,#ec4899 100%);--bg-0:#000;--bg-1:#0a0612;--bg-2:#14101f;--bg-3:#1d1830;--line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.20);--text-1:#fff;--text-2:#d6d0e2;--text-3:#9892a8;--text-4:#65607a;--r-md:1rem;--r-lg:1.4rem;--r-full:99.9rem;--font-display:'Manrope',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif}
html{font-size:10px}@media (max-width:600px){html{font-size:9px}}
html,body{margin:0;padding:0}body{background:var(--bg-0);color:var(--text-1);font-family:var(--font-body);font-size:1.6rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--violet-300);text-decoration:none}a:hover{color:var(--violet-200)}
.wrap{max-width:110rem;margin:0 auto;padding:0 2.4rem}
.top{position:sticky;top:0;z-index:5;background:rgba(10,6,18,.88);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:6.4rem}
.logo img{display:block;height:4.2rem;width:auto}
.btn-sm{padding:.9rem 1.8rem;border-radius:var(--r-full);background:var(--grad);color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.4rem}.btn-sm:hover{color:#fff;filter:brightness(1.1)}
.hero{padding:7rem 0 5rem;text-align:center;background:radial-gradient(60% 70% at 50% 0%,rgba(168,85,247,.22) 0%,transparent 70%),var(--bg-1);border-bottom:1px solid var(--line)}
.eyebrow{margin:0;font-size:1.3rem;letter-spacing:.3em;text-transform:uppercase;color:var(--violet-300);font-weight:600}
.hero h1{margin:1.2rem 0 0;font-family:var(--font-display);font-weight:800;font-size:8rem;letter-spacing:-.04em;line-height:1.15;padding-bottom:.08em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lead{max-width:66rem;margin:2rem auto 0;color:var(--text-2);font-size:1.9rem;line-height:1.6}
.cta{display:inline-block;margin-top:3.2rem;padding:1.7rem 3.2rem;border-radius:var(--r-full);background:var(--grad);color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.9rem;box-shadow:0 1.2rem 3rem -1rem rgba(217,70,239,.6)}.cta:hover{color:#fff;filter:brightness(1.08)}
.dir{max-width:62rem;margin:4.4rem auto 0;text-align:left}
.dir-title{margin:0 0 1.2rem;text-align:center;font-family:var(--font-display);font-size:1.3rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.dir-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);overflow:hidden}
.dir-list li+li{border-top:1px solid var(--line)}
.dom{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.8rem;color:var(--text-1)}a.dom:hover{background:rgba(168,85,247,.1);color:var(--text-1)}
.dom.main{background:rgba(168,85,247,.09)}
.host{font-family:var(--font-display);font-weight:700;font-size:1.7rem}
.badge{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:1.6rem;padding:.5rem 1.1rem;border-radius:var(--r-full);border:1px solid var(--line-2);font-size:1.25rem;font-weight:600;color:var(--text-3);white-space:nowrap}
.badge.main{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12);color:#86efac}.badge.main i{width:.8rem;height:.8rem;margin-right:.7rem;border-radius:50%;background:#22c55e}
.badge.gate{border-color:rgba(168,85,247,.45);background:rgba(168,85,247,.12);color:var(--violet-200)}
.dom.dead .host{color:var(--text-4);text-decoration:line-through}.badge.dead{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:#fca5a5}
.dir-note{margin:1.4rem 0 0;text-align:center;font-size:1.4rem;color:var(--text-3)}
.content{display:grid;grid-template-columns:24rem 1fr;align-items:start;padding-top:5rem;padding-bottom:4rem}
.toc{position:sticky;top:8.4rem;display:flex;flex-direction:column;margin-right:4rem;padding:1.6rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1)}
.toc-label{margin-bottom:.8rem;font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);font-weight:600}
.toc a{padding:.5rem 0;color:var(--text-3);font-size:1.4rem;font-weight:500}.toc a:hover{color:var(--text-1)}
.guide-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:3.8rem;letter-spacing:-.025em;line-height:1.1}
.sec{padding-top:4rem;scroll-margin-top:8rem}
.sec h2{margin:0 0 1.4rem;font-family:var(--font-display);font-weight:700;font-size:2.6rem;letter-spacing:-.015em;line-height:1.2}
.sec h3{margin:2.2rem 0 .6rem;font-family:var(--font-display);font-weight:700;font-size:1.8rem}
.sec p,.steps,.list{margin:0 0 1.4rem;color:var(--text-3);font-size:1.65rem;line-height:1.75}
.sec strong,.sec b{color:var(--text-1);font-weight:600}
.steps,.list{padding-left:2.4rem}.steps li,.list li{margin-bottom:.8rem}
.sec a{font-weight:600}
.qa{padding:1.8rem 0;border-bottom:1px solid var(--line)}.qa:last-child{border-bottom:0}.qa h3{margin:0 0 .6rem}.qa p{margin:0}
.end-cta{margin:5rem 0 1rem;padding:3.2rem;text-align:center;border:1px solid var(--line);border-radius:var(--r-lg);background:radial-gradient(70% 90% at 50% 0%,rgba(168,85,247,.18) 0%,transparent 70%),var(--bg-1)}
.end-cta p{margin:0;color:var(--text-2);font-size:1.8rem}.end-cta .cta{margin-top:2rem}
.foot{padding:2.6rem 0;border-top:1px solid var(--line);text-align:center;color:var(--text-4);font-size:1.35rem}.foot a{color:var(--text-3)}
@media (max-width:900px){.content{grid-template-columns:1fr}.toc{position:static;margin:0 0 1rem;flex-direction:row;flex-wrap:wrap}.toc-label{width:100%}.toc a{margin-right:1.6rem}.hero h1{font-size:6rem}}
@media (max-width:600px){.hero{padding:5rem 0 4rem}.hero h1{font-size:5rem}.lead{font-size:1.7rem}.cta{display:block;padding:1.6rem 2rem}.dom{padding:1.3rem 1.4rem}.badge{font-size:1.15rem;margin-left:1rem}.guide-title{font-size:3rem}.sec h2{font-size:2.3rem}}