*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#f8fafc;--bg-card:#fff;--bg-card-subtle:#f1f5f9;--text-main:#0f172a;--text-muted:#64748b;--border-color:#e2e8f0;--primary:#2563eb;--primary-hover:#1d4ed8;--success:#10b981;--success-bg:#ecfdf5;--warning:#f59e0b;--warning-bg:#fffbeb;--error:#ef4444;--error-bg:#fef2f2;--code-bg:#0f172a;--code-text:#38bdf8;--font-sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", Menlo, monospace}.dark-theme{--bg-primary:#0b0f19;--bg-card:#131b2e;--bg-card-subtle:#1e293b;--text-main:#f8fafc;--text-muted:#94a3b8;--border-color:#243049;--primary:#3b82f6;--primary-hover:#60a5fa;--success-bg:#10b98126;--warning-bg:#f59e0b26;--error-bg:#ef444426;--code-bg:#050811;--code-text:#7dd3fc}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-main);-webkit-font-smoothing:antialiased;line-height:1.5}.app-wrapper{background-color:var(--bg-primary);min-height:100vh;color:var(--text-main);padding:24px 16px 60px;transition:background-color .2s,color .2s}.container{max-width:980px;margin:0 auto}.navbar{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:24px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-icon{font-size:26px}.brand-title{letter-spacing:-.5px;margin-right:8px;font-size:20px;font-weight:800}.btn-theme{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-main);cursor:pointer;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .2s}.btn-theme:hover{background:var(--bg-card-subtle)}.hero-banner{text-align:center;margin-bottom:40px}.pill-badge{background:var(--success-bg);color:var(--success);border:1px solid #10b9814d;border-radius:9999px;align-items:center;gap:8px;margin-bottom:16px;padding:6px 14px;font-size:13px;font-weight:700;display:inline-flex}.pulse-dot{background-color:var(--success);border-radius:50%;width:8px;height:8px;animation:1.8s infinite pulse;box-shadow:0 0 #10b981b3}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1);box-shadow:0 0 0 8px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}.hero-banner h1{letter-spacing:-.8px;margin-bottom:12px;font-size:34px;font-weight:800}.hero-subtitle{color:var(--text-muted);max-width:660px;margin:0 auto;font-size:16px}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:24px;box-shadow:0 1px 3px #00000008}.grid-cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:40px;display:grid}.card-header{align-items:center;gap:10px;margin-bottom:16px;display:flex}.card-icon{font-size:20px}.card-header h3{font-size:16px;font-weight:700}.metric-row{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:8px 0;font-size:14px;display:flex}.metric-row:last-child{border-bottom:none}.metric-label{color:var(--text-muted)}.metric-val{font-size:13px}.badge{border-radius:6px;padding:3px 8px;font-size:12px;font-weight:700;display:inline-block}.badge-success{background:var(--success-bg);color:var(--success)}.badge-warning{background:var(--warning-bg);color:var(--warning)}.section-container{margin-bottom:40px}.section-header{margin-bottom:20px}.section-header h2{letter-spacing:-.4px;font-size:22px;font-weight:800}.section-header p{color:var(--text-muted);font-size:14px}.two-col-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;display:grid}.interactive-card h3{margin-bottom:4px;font-size:17px;font-weight:700}.card-desc{color:var(--text-muted);margin-bottom:20px;font-size:13px}.counter-display{background:var(--bg-card-subtle);text-align:center;border-radius:12px;margin-bottom:20px;padding:24px}.counter-number{font-size:48px;font-weight:800;font-family:var(--font-mono);color:var(--primary)}.button-group{flex-wrap:wrap;gap:10px;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:var(--bg-card-subtle);color:var(--text-main);border:1px solid var(--border-color)}.btn-secondary:hover{filter:brightness(.95)}.btn-outline{color:var(--text-muted);border:1px solid var(--border-color);background:0 0}.btn-outline:hover{color:var(--text-main);border-color:var(--text-muted)}.input-group{gap:8px;margin-bottom:16px;display:flex}.form-control{border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-main);font-size:13px;font-family:var(--font-mono);border-radius:8px;flex:1;padding:10px 14px}.form-control:focus{border-color:var(--primary);outline:none}.ping-box{border-radius:8px;margin-top:12px;padding:12px;font-size:12px}.ping-success{background:var(--success-bg);border:1px solid #10b98166}.ping-error{background:var(--error-bg);border:1px solid #ef444466}.ping-header{justify-content:space-between;margin-bottom:6px;font-weight:700;display:flex}.latency-badge{font-family:var(--font-mono);background:#0000001a;border-radius:4px;padding:2px 6px}.ping-output{font-family:var(--font-mono);white-space:pre-wrap;word-break:break-all;max-height:120px;font-size:11px;overflow-y:auto}.tab-nav{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.tab-btn{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .2s}.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.tab-content{padding:28px}.step-list{flex-direction:column;gap:24px;display:flex}.step-item{align-items:flex-start;gap:16px;display:flex}.step-num{background:var(--bg-card-subtle);border:2px solid var(--primary);width:32px;height:32px;color:var(--primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;font-weight:800;display:flex}.step-body{flex:1}.step-body h4{margin-bottom:8px;font-size:15px;font-weight:700}.code-box{background:var(--code-bg);border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:6px;padding:12px 16px;display:flex;overflow-x:auto}.code-box.pre-wrap{align-items:flex-start}.code-box code,.code-box pre{color:var(--code-text);font-family:var(--font-mono);font-size:13px;line-height:1.4}.btn-copy{color:#fff;cursor:pointer;white-space:nowrap;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;margin-left:12px;padding:4px 10px;font-size:11px;font-weight:600;transition:background .2s}.btn-copy:hover{background:#ffffff40}.hint{color:var(--text-muted);font-size:12px}.checklist{flex-direction:column;gap:14px;display:flex}.check-item{cursor:pointer;align-items:flex-start;gap:12px;display:flex}.check-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary);margin-top:2px}.check-text{color:var(--text-main);font-size:14px}.done-text{color:var(--text-muted);text-decoration:line-through}.footer{text-align:center;border-top:1px solid var(--border-color);color:var(--text-muted);padding-top:40px;font-size:13px}.footer-sub{opacity:.8;margin-top:4px;font-size:12px}.mono{font-family:var(--font-mono)}.font-semibold{font-weight:600}