:root{--max:960px;--bg:#0b1020;--panel:#12182b;--border:#1f2540;--txt:#e5e7eb;--muted:#9aa3b2}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:var(--max);margin:0 auto;padding:20px}.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 6px 24px #00000040}.h1{font-size:clamp(24px,4.5vw,40px);font-weight:800;margin:0 0 8px}.sub{color:var(--muted);margin:0 0 20px}.section-title{font-weight:800;margin:20px 0 6px}.code{background:#0c1120;border:1px solid var(--border);border-radius:10px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{border:1px solid var(--border);background:#1a2340;color:var(--txt);padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer}.btn:active{transform:translateY(1px)}.footer{color:var(--muted);font-size:12px;margin-top:14px}