*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#080d14;--bg2:#0d1420;--bg3:#131d2e;--bg4:#1a2640;
  --border:#1e2d42;--border2:#243350;
  --text:#d4e8f0;--muted:#2a3f55;--muted2:#4a6880;--muted3:#7aaabb;
  --accent:#00c8ff;--accent2:#00a8d8;
  --mono:'Space Mono',monospace;
}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(#00c8ff06 1px,transparent 1px),linear-gradient(90deg,#00c8ff06 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0;}
nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:58px;background:#080d14dd;backdrop-filter:blur(20px);border-bottom:1px solid var(--border);}
.nav-logo{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--accent);letter-spacing:2px;text-decoration:none;text-shadow:0 0 16px #00c8ff50;}
.nav-logo span{color:#fff;}
.nav-back{font-size:13px;color:var(--muted2);text-decoration:none;transition:color .2s;font-family:var(--mono);}
.nav-back:hover{color:var(--accent);}
main{flex:1;max-width:720px;width:100%;margin:0 auto;padding:60px 24px 80px;position:relative;z-index:1;}
.guide-header{margin-bottom:40px;}
.guide-tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.gtag{font-family:var(--mono);font-size:10px;padding:4px 12px;border-radius:20px;background:#00c8ff12;border:1px solid #00c8ff30;color:var(--accent);letter-spacing:.08em;}
.guide-header h1{font-family:var(--mono);font-size:32px;font-weight:700;line-height:1.2;margin-bottom:12px;color:var(--text);}
.guide-header h1 span{color:var(--accent);}
.guide-meta{font-size:13px;color:var(--muted2);font-family:var(--mono);}
.guide-body{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:36px;}
.guide-body p{font-size:15px;color:var(--muted3);line-height:1.9;margin-bottom:20px;}
.guide-body h2{font-family:var(--mono);font-size:16px;color:var(--accent);margin:28px 0 14px;display:flex;align-items:center;gap:8px;}
.guide-body h2::before{content:'//';color:var(--muted2);}
.guide-body ul,.guide-body ol{padding-left:0;list-style:none;margin-bottom:20px;display:flex;flex-direction:column;gap:10px;}
.guide-body ul li,.guide-body ol li{font-size:15px;color:var(--muted3);line-height:1.7;display:flex;gap:10px;align-items:flex-start;}
.guide-body ul li::before{content:'→';color:var(--accent);flex-shrink:0;}
.guide-body ol{counter-reset:item;}
.guide-body ol li::before{counter-increment:item;content:counter(item)'.';color:var(--accent);flex-shrink:0;font-family:var(--mono);font-size:13px;}
.guide-body strong{color:var(--text);font-weight:600;}
.guide-body code{font-family:var(--mono);font-size:13px;background:var(--bg3);padding:2px 8px;border-radius:4px;color:var(--accent);}
.guide-body pre{background:var(--bg);border:1px solid var(--border2);border-radius:10px;padding:16px;margin:16px 0;overflow-x:auto;font-family:var(--mono);font-size:13px;color:var(--muted3);line-height:1.6;}
.cta-box{background:linear-gradient(135deg,#00c8ff12,#00c8ff05);border:1px solid #00c8ff30;border-radius:12px;padding:24px;text-align:center;margin-top:32px;}
.cta-box p{font-size:16px;color:var(--text);margin-bottom:14px;}
.cta-btn{display:inline-block;padding:11px 28px;background:var(--accent);border-radius:8px;color:#000;font-family:var(--mono);font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;letter-spacing:1px;}
.cta-btn:hover{background:var(--accent2);transform:translateY(-1px);}
.ad-slot{width:100%;background:var(--bg2);border:1px dashed var(--border);border-radius:8px;padding:16px;text-align:center;font-size:11px;color:var(--muted);font-family:var(--mono);margin:24px 0;}
footer{position:relative;z-index:1;padding:24px 48px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-l{font-family:var(--mono);font-size:12px;color:var(--muted2);}
.footer-l span{color:var(--accent);}
.footer-r{display:flex;gap:20px;}
.footer-r a{font-size:12px;color:var(--muted2);text-decoration:none;transition:color .2s;}
.footer-r a:hover{color:var(--accent);}
@media(max-width:600px){nav{padding:0 16px;}main{padding:40px 16px 60px;}.guide-body{padding:20px;}.guide-header h1{font-size:24px;}footer{padding:20px 16px;flex-direction:column;align-items:flex-start;}}