:root{--bg-0:#060912;--bg-1:#0b0f1e;--bg-2:#0f1628;--bg-card:#131b2e;--bg-card-2:#182035;--bg-overlay:rgba(11,15,30,0.88);--border-0:rgba(255,255,255,0.04);--border-1:rgba(255,255,255,0.08);--border-2:rgba(255,255,255,0.14);--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#4f8ef7;--blue-600:#2563eb;--blue-glow:rgba(79,142,247,0.25);--blue-subtle:rgba(79,142,247,0.08);--cyan-400:#22d3ee;--cyan-500:#06b6d4;--cyan-glow:rgba(34,211,238,0.2);--cyan-subtle:rgba(34,211,238,0.07);--purple-400:#a78bfa;--purple-500:#8b5cf6;--purple-glow:rgba(139,92,246,0.2);--purple-subtle:rgba(139,92,246,0.07);--green-400:#34d399;--green-500:#10b981;--green-subtle:rgba(16,185,129,0.07);--orange-400:#fbbf24;--orange-500:#f59e0b;--orange-subtle:rgba(245,158,11,0.07);--red-400:#f87171;--red-500:#ef4444;--red-subtle:rgba(239,68,68,0.07);--text-0:#ffffff;--text-1:#e8edf8;--text-2:#a0aec0;--text-3:#64748b;--text-4:#3d4f66;--font-sans:'Inter','Segoe UI','SF Pro Display','PingFang SC','Noto Sans SC','Microsoft YaHei UI',system-ui,sans-serif;--font-mono:'JetBrains Mono','Fira Code','Cascadia Code','Consolas','Monaco',monospace;--r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-2xl:28px;--shadow-sm:0 1px 3px rgba(0,0,0,0.4);--shadow-md:0 4px 16px rgba(0,0,0,0.5);--shadow-lg:0 8px 32px rgba(0,0,0,0.6);--shadow-blue:0 0 24px rgba(79,142,247,0.3);--shadow-cyan:0 0 16px rgba(34,211,238,0.25);--ease-out:cubic-bezier(0.0,0.0,0.2,1);--ease-in-out:cubic-bezier(0.4,0.0,0.2,1);--t-fast:150ms;--t-normal:250ms;--t-slow:400ms;}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}body{font-family:var(--font-sans);background:var(--bg-1);color:var(--text-1);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;line-height:1.5;}.page{display:none;}.page.active{display:block;}.nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:56px;background:var(--bg-overlay);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border-1);}.nav-logo{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:-0.01em;cursor:pointer;color:var(--text-1);text-decoration:none;user-select:none;}.nav-logo-icon{width:30px;height:30px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,var(--blue-500),var(--cyan-400));display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 8px var(--blue-glow);}.nav-logo-text{color:var(--text-0);}.nav-logo-accent{color:var(--cyan-400);}.nav-links{display:flex;gap:2px;}.nav-link{padding:5px 13px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--text-3);cursor:pointer;transition:color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);border:none;background:none;font-family:var(--font-sans);}.nav-link:hover{color:var(--text-1);background:var(--border-0);}.nav-link.active{color:var(--text-1);background:var(--bg-card);}.nav-right{display:flex;gap:8px;align-items:center;}.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;cursor:pointer;border:none;font-family:var(--font-sans);transition:all var(--t-normal) var(--ease-in-out);text-decoration:none;white-space:nowrap;user-select:none;outline:none;}.btn:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px;}.btn-primary{background:var(--blue-500);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1);}.btn-primary:hover{background:var(--blue-600);box-shadow:var(--shadow-blue),0 1px 2px rgba(0,0,0,0.3);transform:translateY(-1px);}.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border-1);}.btn-ghost:hover{color:var(--text-1);border-color:var(--border-2);background:var(--bg-card);}.btn-lg{padding:11px 26px;font-size:15px;border-radius:var(--r-md);}.hero{position:relative;overflow:hidden;padding:96px 28px 72px;text-align:center;}.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}.hero-bg::before{content:'';position:absolute;left:50%;top:-20%;transform:translateX(-50%);width:900px;height:700px;background:radial-gradient(ellipse at 50% 0%,rgba(79,142,247,0.18) 0%,rgba(79,142,247,0.06) 40%,transparent 70%);}.hero-bg::after{content:'';position:absolute;right:-10%;top:30%;width:500px;height:400px;background:radial-gradient(ellipse,rgba(139,92,246,0.1) 0%,transparent 65%);}.hero-bg-left{position:absolute;left:-5%;top:50%;width:400px;height:350px;background:radial-gradient(ellipse,rgba(34,211,238,0.07) 0%,transparent 65%);pointer-events:none;}.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--border-0) 1px,transparent 1px),linear-gradient(90deg,var(--border-0) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 70%);}.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 14px 5px 10px;border-radius:20px;background:rgba(79,142,247,0.09);border:1px solid rgba(79,142,247,0.22);font-size:12.5px;color:var(--cyan-400);margin-bottom:28px;position:relative;backdrop-filter:blur(8px);}.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 6px var(--cyan-400);animation:badge-pulse 2.4s ease-in-out infinite;}@keyframes badge-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.75);}}.hero h1{font-size:clamp(34px,5.5vw,62px);font-weight:800;line-height:1.12;letter-spacing:-0.035em;margin-bottom:20px;color:var(--text-1);}.hero h1 .line-muted{color:var(--text-2);font-weight:700;}.hero h1 .highlight{background:linear-gradient(135deg,var(--blue-400) 0%,var(--cyan-400) 55%,var(--blue-300) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px rgba(79,142,247,0.4));}.hero-desc{font-size:17px;color:var(--text-2);line-height:1.75;max-width:520px;margin:0 auto 40px;font-weight:400;}.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}.stats-bar{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg-card) 100%);border-top:1px solid var(--border-1);border-bottom:1px solid var(--border-1);padding:28px 28px;}.stats-inner{display:flex;justify-content:center;gap:0;flex-wrap:wrap;max-width:860px;margin:0 auto;}.stat-item{text-align:center;padding:8px 48px;position:relative;}.stat-item+.stat-item::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:var(--border-1);}.stat-num{font-size:32px;font-weight:800;line-height:1;letter-spacing:-0.02em;margin-bottom:5px;background:linear-gradient(135deg,var(--blue-400),var(--cyan-400));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.stat-label{font-size:12.5px;color:var(--text-3);font-weight:500;}.section{padding:60px 28px;max-width:1200px;margin:0 auto;}.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;}.section-title{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--text-0);}.section-subtitle{font-size:13.5px;color:var(--text-3);margin-top:5px;}.section-link{font-size:13.5px;color:var(--blue-400);cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:4px;transition:color var(--t-fast);}.section-link:hover{color:var(--cyan-400);}.protocol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px;}.protocol-card{background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-lg);padding:22px;cursor:pointer;transition:transform var(--t-normal) var(--ease-out),border-color var(--t-normal) var(--ease-out),box-shadow var(--t-normal) var(--ease-out),background var(--t-normal) var(--ease-out);position:relative;overflow:hidden;}.protocol-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--card-color,var(--blue-500));opacity:0;transition:opacity var(--t-normal) var(--ease-out);box-shadow:0 0 12px var(--card-color,var(--blue-500));}.protocol-card::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(79,142,247,0.06) 0%,transparent 70%);opacity:0;pointer-events:none;transition:opacity var(--t-normal);}.protocol-card:hover{border-color:rgba(79,142,247,0.3);background:var(--bg-card-2);transform:translateY(-4px);box-shadow:var(--shadow-md),0 0 0 1px rgba(79,142,247,0.1);}.protocol-card:hover::before{opacity:1;}.protocol-card:hover::after{opacity:1;}.protocol-card.coming-soon{opacity:0.55;cursor:not-allowed;pointer-events:none;}.protocol-card.coming-soon:hover{transform:none;box-shadow:none;border-color:var(--border-1);background:var(--bg-card);}.card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}.card-icon{width:42px;height:42px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}.card-badges{display:flex;gap:5px;flex-wrap:wrap;}.badge{padding:3px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:0.01em;}.badge-layer{background:var(--blue-subtle);color:var(--blue-400);border:1px solid rgba(79,142,247,0.2);}.badge-easy{background:var(--green-subtle);color:var(--green-400);border:1px solid rgba(52,211,153,0.2);}.badge-medium{background:var(--orange-subtle);color:var(--orange-400);border:1px solid rgba(251,191,36,0.2);}.badge-hard{background:var(--red-subtle);color:var(--red-400);border:1px solid rgba(248,113,113,0.2);}.card-title{font-size:16px;font-weight:700;margin-bottom:7px;color:var(--text-0);letter-spacing:-0.01em;}.card-desc{font-size:12.5px;color:var(--text-3);line-height:1.65;margin-bottom:16px;}.card-meta{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border-0);}.card-steps{font-size:11.5px;color:var(--text-4);display:flex;align-items:center;gap:4px;}.card-cta{font-size:12.5px;color:var(--blue-400);font-weight:600;display:flex;align-items:center;gap:3px;transition:color var(--t-fast),gap var(--t-fast);}.protocol-card:hover .card-cta{color:var(--cyan-400);gap:6px;}.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}.feature-card{background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-lg);padding:22px;transition:border-color var(--t-normal),background var(--t-normal),transform var(--t-normal);}.feature-card:hover{border-color:var(--border-2);background:var(--bg-card-2);transform:translateY(-2px);}.feature-icon{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:13px;}.feature-title{font-size:14.5px;font-weight:600;margin-bottom:7px;color:var(--text-0);}.feature-desc{font-size:12.5px;color:var(--text-3);line-height:1.65;}.footer{padding:36px 28px;border-top:1px solid var(--border-1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--text-4);max-width:1200px;margin:0 auto;}.footer a{color:var(--text-3);text-decoration:none;transition:color var(--t-fast);}.footer a:hover{color:var(--text-1);}.footer a{cursor:pointer;}#congestionDiagram{position:absolute;inset:0;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:16px 20px 20px;gap:0;overflow-y:auto;z-index:2;}.cong-chart-wrap{width:100%;position:relative;background:var(--bg-hover);border:1px solid var(--border-1);border-radius:10px;padding:10px 8px 6px;overflow:hidden;flex-shrink:0;}.cong-chart-wrap svg{display:block;width:100%;height:auto;max-height:180px;}.cong-phase-label{font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;}.cong-line-slow{stroke:var(--accent-cyan);}.cong-line-avoid{stroke:var(--green-400);}.cong-line-loss{stroke:var(--red-400);}.cong-line-recov{stroke:var(--orange-400);}.cong-dot{transition:r .25s,opacity .25s;}.cong-dot.active{r:5;opacity:1;}.cong-dot.passed{r:3.5;opacity:.85;}.cong-dot.upcoming{r:2.5;opacity:.35;}.cong-vline{stroke:rgba(255,255,255,0.18);stroke-dasharray:4 3;transition:x1 .25s,x2 .25s;}.cong-zone-slow{fill:rgba(34,211,238,.06);}.cong-zone-avoid{fill:rgba(52,211,153,.06);}.cong-zone-loss{fill:rgba(248,113,113,.10);}.cong-zone-recov{fill:rgba(251,191,36,.07);}.cong-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:10px;padding:0 4px;}.cong-legend-item{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-3);}.cong-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}.cong-narration{margin-top:14px;padding:12px 16px;background:var(--bg-hover);border-left:3px solid var(--accent-cyan);border-radius:0 8px 8px 0;font-size:13px;color:var(--text-2);line-height:1.75;}.info-modal-backdrop{position:fixed;inset:0;z-index:9000;background:rgba(6,9,20,0.82);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.18s ease;}.info-modal-backdrop.open{opacity:1;pointer-events:auto;}.info-modal{background:var(--bg-card);border:1px solid var(--border-1);border-radius:16px;padding:32px 36px;max-width:440px;width:90%;position:relative;transform:translateY(12px);transition:transform 0.18s ease;box-shadow:0 24px 64px rgba(0,0,0,0.55);}.info-modal-backdrop.open .info-modal{transform:translateY(0);}.info-modal-close{position:absolute;top:14px;right:16px;background:none;border:none;cursor:pointer;color:var(--text-4);font-size:18px;line-height:1;padding:4px 6px;border-radius:6px;transition:color var(--t-fast),background var(--t-fast);}.info-modal-close:hover{color:var(--text-1);background:var(--bg-hover);}.info-modal h2{font-size:17px;font-weight:700;color:var(--text-1);margin:0 0 18px;display:flex;align-items:center;gap:8px;}.info-modal p{font-size:13.5px;color:var(--text-2);line-height:1.75;margin:0 0 12px;}.info-modal .info-meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-1);font-size:12.5px;color:var(--text-4);display:flex;flex-direction:column;gap:5px;}.info-modal .info-meta span{display:flex;align-items:center;gap:6px;}.info-modal .info-email-row{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 14px;background:var(--bg-hover);border-radius:8px;border:1px solid var(--border-1);}.info-modal .info-email-row code{flex:1;font-size:13px;color:var(--accent-cyan);font-family:var(--font-mono,monospace);word-break:break-all;}.info-modal .copy-btn{background:var(--bg-card);border:1px solid var(--border-1);border-radius:6px;padding:4px 10px;font-size:12px;color:var(--text-2);cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast);white-space:nowrap;}.info-modal .copy-btn:hover{color:var(--accent-cyan);border-color:var(--accent-cyan);}.info-modal blockquote{margin:14px 0 0;padding:10px 14px;border-left:3px solid var(--accent-cyan);background:rgba(0,200,200,0.05);border-radius:0 6px 6px 0;font-size:13px;color:var(--text-3);font-style:italic;line-height:1.7;}.list-page-header{padding:44px 28px 0;max-width:1200px;margin:0 auto;}.list-page-title{font-size:30px;font-weight:800;letter-spacing:-0.03em;color:var(--text-0);margin-bottom:7px;}.list-page-desc{font-size:14px;color:var(--text-3);}.filter-bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:20px 28px;max-width:1200px;margin:0 auto;border-bottom:1px solid var(--border-1);}.filter-sep{width:1px;height:20px;background:var(--border-1);margin:0 2px;flex-shrink:0;}.filter-tag{padding:5px 13px;border-radius:18px;font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid var(--border-1);color:var(--text-3);background:transparent;font-family:var(--font-sans);transition:all var(--t-fast);}.filter-tag:hover{border-color:var(--border-2);color:var(--text-1);}.filter-tag.active{border-color:rgba(79,142,247,0.4);color:var(--blue-400);background:var(--blue-subtle);}.filter-search{margin-left:auto;display:flex;align-items:center;gap:7px;background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-sm);padding:6px 13px;transition:border-color var(--t-fast);}.filter-search:focus-within{border-color:var(--border-2);}.filter-search input{background:none;border:none;outline:none;font-family:var(--font-sans);font-size:13px;color:var(--text-1);width:180px;}.filter-search input::placeholder{color:var(--text-4);}.list-content{padding:28px 28px 48px;max-width:1200px;margin:0 auto;}.list-section-title{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-4);margin:32px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border-1);display:flex;align-items:center;gap:8px;}.list-section-dot{width:6px;height:6px;border-radius:50%;}.layer-badge{font-size:10px;font-weight:500;letter-spacing:0.04em;padding:2px 7px;border-radius:4px;text-transform:none;}.card-badge-slot{display:inline-flex;align-items:center;font-size:12px;margin-left:2px;transition:opacity 0.2s;}.card-badge-slot.unlocked::after{content:'✅';}.progress-bar-wrap{max-width:1200px;margin:0 auto 4px;padding:14px 28px 0;display:none;}.progress-bar-inner{display:flex;align-items:center;gap:12px;}.progress-bar-track{flex:1;height:5px;background:var(--border-1);border-radius:99px;overflow:hidden;}.progress-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-cyan),var(--blue-400));transition:width 0.5s cubic-bezier(0.4,0,0.2,1);width:0%;}.progress-bar-text{font-size:12px;color:var(--text-3);white-space:nowrap;flex-shrink:0;}.progress-bar-text strong{color:var(--accent-cyan);}.badge-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--bg-card);border:1px solid var(--accent-cyan);border-radius:12px;padding:12px 20px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 0 1px rgba(34,211,238,0.15);z-index:9999;pointer-events:none;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),opacity 0.4s;opacity:0;min-width:220px;max-width:340px;}.badge-toast.show{transform:translateX(-50%) translateY(0);opacity:1;}.badge-toast-icon{font-size:22px;flex-shrink:0;}.badge-toast-text{font-size:13px;line-height:1.4;}.badge-toast-title{font-weight:600;color:var(--text-1);}.badge-toast-sub{color:var(--text-3);font-size:12px;}.list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}.player-layout{display:grid;grid-template-columns:1fr 348px;height:calc(100vh - 56px);overflow:hidden;}.player-main{display:flex;flex-direction:column;border-right:1px solid var(--border-1);overflow:hidden;min-width:0;}.player-topbar{display:flex;align-items:center;gap:10px;padding:13px 20px;border-bottom:1px solid var(--border-1);flex-shrink:0;min-width:0;background:var(--bg-2);}.player-breadcrumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-3);flex-shrink:0;}.player-breadcrumb-link{color:var(--blue-400);cursor:pointer;transition:color var(--t-fast);}.player-breadcrumb-link:hover{color:var(--cyan-400);}.player-breadcrumb-sep{color:var(--text-4);}.player-title{font-size:15px;font-weight:700;color:var(--text-0);letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.player-actions{margin-left:auto;display:flex;gap:7px;flex-shrink:0;}.animation-canvas{flex:1;overflow:hidden;position:relative;background:var(--bg-0);}.animation-canvas::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:40px 40px;}.animation-canvas::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(79,142,247,0.06) 0%,transparent 65%);}.canvas-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:36px;position:relative;z-index:1;}.tcp-diagram{width:100%;max-width:680px;display:grid;grid-template-columns:172px 1fr 172px;align-items:start;gap:0;}.node-box{background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-lg);padding:18px 16px;text-align:center;position:relative;z-index:2;box-shadow:var(--shadow-md);}.node-box-client{border-color:rgba(79,142,247,0.25);}.node-box-server{border-color:rgba(167,139,250,0.25);}.node-icon{width:52px;height:52px;border-radius:14px;margin:0 auto 11px;display:flex;align-items:center;justify-content:center;font-size:24px;}.node-icon-client{background:rgba(79,142,247,0.12);border:1px solid rgba(79,142,247,0.25);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);}.node-icon-server{background:rgba(167,139,250,0.12);border:1px solid rgba(167,139,250,0.25);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);}.node-name{font-size:13.5px;font-weight:700;color:var(--text-0);margin-bottom:3px;}.node-ip{font-size:10.5px;color:var(--text-4);font-family:var(--font-mono);margin-bottom:6px;}.node-state{font-size:10px;font-family:var(--font-mono);font-weight:500;padding:3px 8px;border-radius:5px;display:inline-block;}.state-listen{background:var(--green-subtle);color:var(--green-400);border:1px solid rgba(52,211,153,0.2);}.state-synsent{background:var(--blue-subtle);color:var(--blue-400);border:1px solid rgba(79,142,247,0.2);}.state-synrcvd{background:var(--orange-subtle);color:var(--orange-400);border:1px solid rgba(251,191,36,0.2);}.state-established{background:var(--cyan-subtle);color:var(--cyan-400);border:1px solid rgba(34,211,238,0.2);}.state-closed{background:rgba(100,116,139,0.08);color:var(--text-4);border:1px solid rgba(100,116,139,0.15);}.packet-lane{position:relative;padding:16px 4px;min-height:320px;display:flex;flex-direction:column;justify-content:center;gap:24px;}.packet-row{position:relative;height:44px;display:flex;align-items:center;transition:opacity var(--t-normal) var(--ease-out);}.packet-row.upcoming{opacity:0.22;}.arrow-line{position:absolute;top:50%;width:100%;height:1px;transform:translateY(-50%);}.arrow-line-c2s{background:linear-gradient(90deg,var(--blue-500),rgba(79,142,247,0.15));box-shadow:none;}.arrow-line-s2c{background:linear-gradient(270deg,var(--purple-500),rgba(139,92,246,0.15));}.packet-row.active .arrow-line-c2s{background:linear-gradient(90deg,var(--blue-400),rgba(79,142,247,0.3));box-shadow:0 0 8px rgba(79,142,247,0.4);}.packet-row.active .arrow-line-s2c{background:linear-gradient(270deg,var(--purple-400),rgba(167,139,250,0.3));box-shadow:0 0 8px rgba(167,139,250,0.4);}.arrow-tip{position:absolute;top:50%;transform:translateY(-50%);width:0;height:0;}.arrow-tip-right{right:-1px;border:5px solid transparent;border-left:8px solid var(--blue-500);}.arrow-tip-left{left:-1px;border:5px solid transparent;border-right:8px solid var(--purple-500);}.packet-row.active .arrow-tip-right{border-left-color:var(--blue-400);}.packet-row.active .arrow-tip-left{border-right-color:var(--purple-400);}.packet-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg-1);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:4px 10px;font-size:11.5px;font-family:var(--font-mono);font-weight:500;white-space:nowrap;z-index:3;box-shadow:var(--shadow-sm);}.packet-label-blue{border-color:rgba(79,142,247,0.4);color:var(--blue-400);}.packet-label-purple{border-color:rgba(167,139,250,0.4);color:var(--purple-400);}.packet-label-cyan{border-color:rgba(34,211,238,0.4);color:var(--cyan-400);}.packet-label-green{border-color:rgba(52,211,153,0.4);color:#34d399;}.packet-fly{position:absolute;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;z-index:10;pointer-events:none;}.packet-fly.fly-right{left:2%;background:var(--blue-400);box-shadow:0 0 8px var(--blue-400),0 0 18px rgba(79,142,247,0.6),6px 0 12px rgba(79,142,247,0.3);animation:fly-right 0.72s cubic-bezier(0.4,0,0.2,1) forwards;}.packet-fly.fly-left{right:2%;background:var(--purple-400);box-shadow:0 0 8px var(--purple-400),0 0 18px rgba(167,139,250,0.6),-6px 0 12px rgba(167,139,250,0.3);animation:fly-left 0.72s cubic-bezier(0.4,0,0.2,1) forwards;}.packet-fly.fly-right.fly-cyan{background:var(--cyan-400);box-shadow:0 0 8px var(--cyan-400),0 0 18px rgba(34,211,238,0.6);}.packet-fly.fly-left.fly-cyan{background:var(--cyan-400);box-shadow:0 0 8px var(--cyan-400),0 0 18px rgba(34,211,238,0.6);}@keyframes fly-right{0%{left:2%;opacity:0;}6%{opacity:1;}90%{opacity:1;}100%{left:96%;opacity:0;}}@keyframes fly-left{0%{right:2%;opacity:0;}6%{opacity:1;}90%{opacity:1;}100%{right:96%;opacity:0;}}@keyframes node-pulse{0%{box-shadow:var(--shadow-md);}40%{box-shadow:0 0 0 6px rgba(79,142,247,0.25),0 0 20px rgba(79,142,247,0.4);}100%{box-shadow:var(--shadow-md);}}@keyframes node-pulse-purple{0%{box-shadow:var(--shadow-md);}40%{box-shadow:0 0 0 6px rgba(167,139,250,0.25),0 0 20px rgba(167,139,250,0.4);}100%{box-shadow:var(--shadow-md);}}.node-receiving-right{animation:node-pulse 0.5s ease-out 0.68s 1;}.node-receiving-left{animation:node-pulse-purple 0.5s ease-out 0.68s 1;}.packet-dot{display:none;}.conn-banner{text-align:center;padding:9px 16px;background:var(--cyan-subtle);border:1px solid rgba(34,211,238,0.18);border-radius:var(--r-md);font-size:11.5px;color:var(--cyan-400);margin-top:10px;}.player-controls{display:flex;align-items:center;gap:6px;padding:13px 20px;border-top:1px solid var(--border-1);flex-shrink:0;background:var(--bg-2);}.ctrl-btn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--border-1);background:var(--bg-card);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--t-fast);font-family:var(--font-sans);flex-shrink:0;}.ctrl-btn:hover{border-color:rgba(79,142,247,0.4);color:var(--blue-400);background:var(--blue-subtle);}.ctrl-btn.play-btn{width:40px;height:40px;background:var(--blue-500);border-color:var(--blue-500);color:#fff;border-radius:var(--r-md);}.ctrl-btn.play-btn:hover{background:var(--blue-600);box-shadow:var(--shadow-blue);}.icon{width:14px;height:14px;fill:currentColor;pointer-events:none;}.icon-lg{width:16px;height:16px;}.progress-area{flex:1;padding:0 10px;}.progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text-4);margin-bottom:5px;font-weight:500;}.progress-track{height:3px;background:var(--border-1);border-radius:2px;position:relative;cursor:pointer;overflow:visible;}.progress-fill{height:100%;background:linear-gradient(90deg,var(--blue-500),var(--cyan-400));border-radius:2px;width:33%;transition:width var(--t-normal) var(--ease-in-out);position:relative;}.progress-fill::after{content:'';position:absolute;right:-5px;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--blue-400);box-shadow:0 0 10px var(--blue-400);border:2px solid var(--bg-2);transition:box-shadow var(--t-fast);}.progress-track:hover .progress-fill::after{box-shadow:0 0 16px var(--blue-400);}.progress-steps{display:flex;gap:5px;margin-top:7px;}.step-dot{width:7px;height:7px;border-radius:50%;background:var(--border-1);transition:all var(--t-normal);cursor:pointer;}.step-dot:hover{background:var(--text-4);transform:scale(1.3);}.step-dot.done{background:var(--blue-500);}.step-dot.current{background:var(--cyan-400);box-shadow:0 0 8px var(--cyan-400);transform:scale(1.2);}.speed-select{background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-sm);padding:5px 9px;font-size:12px;color:var(--text-3);cursor:pointer;font-family:var(--font-sans);flex-shrink:0;transition:border-color var(--t-fast);}.speed-select:hover{border-color:var(--border-2);color:var(--text-1);}.player-panel{display:flex;flex-direction:column;overflow:hidden;}.panel-tabs{display:flex;border-bottom:1px solid var(--border-1);flex-shrink:0;background:var(--bg-2);padding:0 4px;}.panel-tab{flex:1;padding:13px 6px;text-align:center;font-size:12.5px;font-weight:500;cursor:pointer;color:var(--text-3);border:none;background:none;font-family:var(--font-sans);transition:color var(--t-fast),border-color var(--t-fast);border-bottom:2px solid transparent;margin-bottom:-1px;}.panel-tab:hover{color:var(--text-1);}.panel-tab.active{color:var(--blue-400);border-bottom-color:var(--blue-500);}.panel-body{flex:1;overflow-y:auto;padding:18px 16px;}.panel-body::-webkit-scrollbar{width:3px;}.panel-body::-webkit-scrollbar-track{background:transparent;}.panel-body::-webkit-scrollbar-thumb{background:var(--border-1);border-radius:2px;}.step-card{background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-md);padding:13px;margin-bottom:8px;cursor:pointer;transition:all var(--t-fast);display:flex;gap:11px;align-items:flex-start;}.step-card:hover{border-color:var(--border-2);background:var(--bg-card-2);}.step-card.active{border-color:rgba(79,142,247,0.35);background:rgba(79,142,247,0.05);box-shadow:0 0 0 1px rgba(79,142,247,0.15);}.step-num{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;background:var(--border-1);color:var(--text-4);}.step-card.active .step-num{background:var(--blue-500);color:#fff;}.step-card.done .step-num{background:var(--green-500);color:#fff;}.step-title{font-size:12.5px;font-weight:600;margin-bottom:4px;color:var(--text-1);}.step-desc{font-size:12px;color:var(--text-3);line-height:1.6;}.step-packet{margin-top:7px;padding:5px 9px;background:var(--bg-0);border-radius:var(--r-xs);font-size:10.5px;font-family:var(--font-mono);color:var(--cyan-400);border:1px solid var(--border-1);}.knowledge-block{margin-top:18px;padding:13px 14px;background:rgba(79,142,247,0.05);border:1px solid rgba(79,142,247,0.14);border-radius:var(--r-md);font-size:12px;color:var(--text-3);line-height:1.7;}.knowledge-block-title{font-weight:700;color:var(--blue-400);margin-bottom:5px;font-size:12.5px;}.field-panel-title{font-size:12.5px;font-weight:600;margin-bottom:12px;color:var(--text-2);}.field-table{width:100%;border-collapse:collapse;}.field-table th,.field-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border-1);font-size:12px;}.field-table th{color:var(--text-4);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:0.07em;}.field-table tr:last-child td{border-bottom:none;}.field-table td{color:var(--text-2);}.field-name{font-family:var(--font-mono);color:var(--cyan-400) !important;font-weight:500;}.field-val{color:var(--orange-400) !important;font-family:var(--font-mono) !important;font-weight:500;}.field-layer-header td{border-bottom:none !important;padding-top:8px !important;}.field-layer-header:first-child td{padding-top:4px !important;}.seq-derive-panel{margin:0 0 0;padding:10px 16px 12px;background:rgba(96,165,250,0.06);border-top:1px solid rgba(96,165,250,0.2);border-bottom:1px solid rgba(96,165,250,0.2);}.seq-derive-title{font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-4);margin-bottom:8px;}.seq-derive-steps{display:flex;flex-direction:column;gap:5px;}.seq-derive-item{display:grid;grid-template-columns:32px 14px 70px 1fr;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,0.03);transition:background 0.2s;}.seq-derive-item.seq-derive-highlight{background:rgba(96,165,250,0.12);box-shadow:0 0 0 1px rgba(96,165,250,0.25);}.seq-derive-name{font-family:var(--font-mono);font-size:12px;font-weight:700;}.seq-derive-eq{font-family:var(--font-mono);font-size:13px;color:var(--text-4);text-align:center;}.seq-derive-val{font-family:var(--font-mono);font-size:13px;font-weight:700;}.seq-derive-formula{font-size:11px;color:var(--text-3);padding-left:4px;}.related-list{display:flex;flex-direction:column;gap:8px;}.related-item{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast);}.related-item:hover{border-color:rgba(79,142,247,0.3);background:var(--bg-card-2);}.related-icon{font-size:18px;flex-shrink:0;}.related-name{font-size:13px;font-weight:600;margin-bottom:2px;color:var(--text-0);}.related-hint{font-size:11.5px;color:var(--text-3);}.related-arrow{margin-left:auto;color:var(--text-4);flex-shrink:0;}.related-item:hover .related-arrow{color:var(--blue-400);}@media (max-width:960px){.player-layout{display:flex;flex-direction:column;height:auto;min-height:calc(100vh - 56px);overflow:visible;}.player-main{flex:none;border-right:none;border-bottom:1px solid var(--border-1);overflow:visible;}.animation-canvas{height:380px;min-height:280px;overflow-x:auto;overflow-y:hidden;}.player-panel{display:flex;flex:none;width:100%;max-height:60vh;overflow-y:auto;border-top:1px solid var(--border-1);}.protocol-switcher{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}.protocol-switcher::-webkit-scrollbar{display:none;}}@media (max-width:640px){.nav{padding:0 16px;}.hero{padding:56px 16px 48px;}.section{padding:40px 16px;}.hero h1{font-size:30px;}.stats-inner{gap:0;}.stat-item{padding:8px 24px;}.stat-num{font-size:26px;}.filter-bar{padding:16px;}.list-content{padding:20px 16px 40px;}.player-controls{padding:9px 10px;gap:4px;flex-wrap:wrap;}.animation-canvas{height:320px;}.player-actions .btn-ghost:not(#abnormalBtn){display:none;}.progress-area{min-width:0;}.speed-select{padding:4px 6px;font-size:11px;}.step-dot{width:9px;height:9px;}.player-panel{max-height:50vh;}.player-topbar{padding:10px 12px;gap:8px;}.player-title{font-size:13px;}.custom-seq-bar{flex-wrap:wrap;gap:6px;padding:8px 12px;}.custom-seq-hint{display:none;}}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}.step-narration{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(11,15,30,0.92);border:1px solid rgba(79,142,247,0.3);border-radius:var(--r-md);padding:10px 18px;max-width:520px;width:calc(100% - 48px);font-size:13px;color:var(--text-1);line-height:1.6;backdrop-filter:blur(12px);z-index:10;box-shadow:0 4px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(79,142,247,0.1);animation:narration-in 0.3s var(--ease-out);}@keyframes narration-in{from{opacity:0;transform:translateX(-50%) translateY(8px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}.narration-label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue-400);margin-bottom:4px;display:flex;align-items:center;gap:5px;}.narration-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue-400);box-shadow:0 0 6px var(--blue-400);flex-shrink:0;}.narration-text{color:var(--text-1);}.derive-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);border-radius:4px;padding:2px 7px;font-size:11px;font-family:var(--font-mono);color:var(--orange-400);margin-left:6px;vertical-align:middle;}.derive-badge::before{content:'= ';opacity:0.6;}.field-derive{font-size:10.5px;color:var(--orange-400);font-family:var(--font-mono);margin-top:3px;opacity:0.85;}.field-table tr.field-highlight td{background:rgba(79,142,247,0.08);animation:field-flash 0.6s var(--ease-out);}@keyframes field-flash{0%{background:rgba(79,142,247,0.25);}100%{background:rgba(79,142,247,0.08);}}.quiz-block{margin-top:14px;padding:13px 14px;background:rgba(139,92,246,0.06);border:1px solid rgba(139,92,246,0.2);border-radius:var(--r-md);font-size:12px;}.quiz-block-title{font-weight:700;color:var(--purple-400);margin-bottom:8px;font-size:12.5px;display:flex;align-items:center;gap:6px;}.quiz-question{color:var(--text-2);line-height:1.65;margin-bottom:8px;}.quiz-toggle{background:none;border:1px solid rgba(139,92,246,0.3);border-radius:var(--r-sm);padding:5px 12px;font-size:11.5px;color:var(--purple-400);cursor:pointer;font-family:var(--font-sans);transition:all var(--t-fast);}.quiz-toggle:hover{background:rgba(139,92,246,0.1);}.quiz-answer{display:none;margin-top:9px;padding:9px 11px;background:rgba(139,92,246,0.05);border-radius:var(--r-sm);color:var(--text-3);line-height:1.7;font-size:12px;border-left:2px solid rgba(139,92,246,0.4);}.quiz-answer.open{display:block;animation:narration-in 0.25s var(--ease-out);}.abnormal-overlay{position:absolute;inset:0;z-index:20;background:rgba(6,9,18,0.93);display:none;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:28px;}.abnormal-overlay.open{display:flex;}.abnormal-title{font-size:17px;font-weight:700;color:var(--red-400);margin-bottom:8px;display:flex;align-items:center;gap:8px;}.abnormal-desc{font-size:13px;color:var(--text-3);text-align:center;line-height:1.7;max-width:420px;margin-bottom:20px;}.abnormal-steps{display:flex;flex-direction:column;gap:10px;width:100%;max-width:480px;margin-bottom:20px;}.abnormal-step{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;border-radius:var(--r-md);font-size:12px;line-height:1.6;}.abnormal-step.lost{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25);color:var(--red-400);}.abnormal-step.retransmit{background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);color:var(--orange-400);}.abnormal-step.normal{background:rgba(52,211,153,0.07);border:1px solid rgba(52,211,153,0.2);color:var(--green-400);}.ab-step-icon{font-size:16px;flex-shrink:0;margin-top:1px;}.ab-step-body .ab-step-title{font-weight:700;margin-bottom:2px;}.ab-step-body .ab-step-detail{color:var(--text-3);font-size:11.5px;}.abnormal-close{background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:8px 22px;font-size:13px;color:var(--text-2);cursor:pointer;font-family:var(--font-sans);transition:all var(--t-fast);}.abnormal-close:hover{color:var(--text-0);border-color:rgba(79,142,247,0.4);}.compare-bar{display:flex;gap:8px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--border-1);background:var(--bg-2);flex-shrink:0;}.compare-label{font-size:11.5px;color:var(--text-4);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;}.compare-btn{padding:4px 12px;border-radius:14px;font-size:12px;font-weight:600;border:1px solid var(--border-1);background:none;cursor:pointer;font-family:var(--font-sans);color:var(--text-3);transition:all var(--t-fast);}.compare-btn.active{background:var(--blue-subtle);border-color:rgba(79,142,247,0.4);color:var(--blue-400);}.compare-btn:hover:not(.active){border-color:var(--border-2);color:var(--text-1);}.udp-diagram{display:none;width:100%;max-width:680px;flex-direction:column;align-items:center;gap:18px;}.udp-diagram.visible{display:flex;}.udp-row{display:grid;grid-template-columns:172px 1fr 172px;align-items:center;width:100%;}.udp-fire-row{position:relative;height:44px;display:flex;align-items:center;}.udp-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg-1);border:1px solid rgba(52,211,153,0.35);border-radius:var(--r-sm);padding:4px 10px;font-size:11.5px;font-family:var(--font-mono);color:var(--green-400);white-space:nowrap;z-index:3;}.udp-note{text-align:center;padding:11px 18px;background:rgba(52,211,153,0.06);border:1px solid rgba(52,211,153,0.18);border-radius:var(--r-md);font-size:12px;color:var(--green-400);line-height:1.65;max-width:480px;}.compare-table{width:100%;max-width:480px;border-collapse:collapse;font-size:12px;}.compare-table th{padding:8px 12px;background:var(--bg-card);color:var(--text-3);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;border-bottom:1px solid var(--border-1);}.compare-table th:nth-child(2){color:var(--blue-400);}.compare-table th:nth-child(3){color:var(--green-400);}.compare-table td{padding:8px 12px;border-bottom:1px solid var(--border-0);color:var(--text-2);}.compare-table td:first-child{color:var(--text-4);font-weight:600;font-size:11px;}.compare-table tr:last-child td{border-bottom:none;}.custom-seq-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 20px;border-top:1px solid var(--border-1);background:var(--bg-2);flex-shrink:0;font-size:12px;}.custom-seq-label{color:var(--text-4);font-weight:600;white-space:nowrap;}.custom-seq-input{width:72px;padding:4px 9px;background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-sm);font-size:12px;font-family:var(--font-mono);color:var(--cyan-400);outline:none;transition:border-color var(--t-fast);}.custom-seq-input:focus{border-color:rgba(79,142,247,0.5);}.custom-seq-apply{padding:4px 12px;border-radius:var(--r-sm);background:var(--blue-subtle);border:1px solid rgba(79,142,247,0.35);color:var(--blue-400);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:all var(--t-fast);}.custom-seq-apply:hover{background:rgba(79,142,247,0.15);}.custom-seq-hint{color:var(--text-4);font-size:11.5px;}.custom-seq-derived{color:var(--orange-400);font-family:var(--font-mono);font-size:11.5px;}.multi-diagram{display:none;width:100%;max-width:840px;flex-direction:column;align-items:center;gap:0;}.multi-diagram.visible{display:flex;}.dns-diagram{width:100%;max-width:900px;display:flex;flex-direction:column;gap:0;}.dns-nodes-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:16px;flex-wrap:nowrap;}.dns-node{background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-md);padding:12px 10px;text-align:center;flex:1;min-width:0;position:relative;z-index:2;box-shadow:var(--shadow-sm);}.dns-node-icon{font-size:20px;margin-bottom:5px;}.dns-node-name{font-size:11px;font-weight:700;color:var(--text-0);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.dns-node-sub{font-size:9.5px;color:var(--text-4);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.dns-node-state{font-size:9px;font-family:var(--font-mono);font-weight:500;padding:2px 6px;border-radius:4px;display:inline-block;margin-top:4px;}.dns-lanes{position:relative;width:100%;min-height:260px;}.dns-lane-row{position:relative;height:40px;display:flex;align-items:center;margin-bottom:4px;transition:opacity var(--t-normal);}.dns-lane-row.upcoming{opacity:0.22;}.dns-arrow{position:absolute;height:1px;top:50%;transform:translateY(-50%);}.dns-arrow-label{position:absolute;top:50%;transform:translate(-50%,-50%);background:var(--bg-1);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:3px 8px;font-size:10.5px;font-family:var(--font-mono);font-weight:500;white-space:nowrap;z-index:3;}.dns-arrow-tip-r{position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border:4px solid transparent;}.dns-arrow-tip-l{position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border:4px solid transparent;}.dns-fly{top:50% !important;transform:translateY(-50%) !important;width:9px;height:9px;}@keyframes dns-node-pulse{0%{box-shadow:var(--shadow-sm);transform:scale(1);}40%{box-shadow:0 0 0 5px rgba(79,142,247,0.2),0 0 16px rgba(79,142,247,0.35);transform:scale(1.04);}100%{box-shadow:var(--shadow-sm);transform:scale(1);}}.dns-node-pulse{animation:dns-node-pulse 0.45s ease-out 0.66s 1;}.dns-mode-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}.dns-mode-label{font-size:11.5px;color:var(--text-4);font-weight:600;letter-spacing:0.04em;flex-shrink:0;}.dns-mode-btn{padding:4px 14px;border-radius:20px;border:1px solid var(--border-2);background:var(--bg-2);color:var(--text-3);font-size:12px;cursor:pointer;transition:all var(--t-fast);white-space:nowrap;}.dns-mode-btn:hover:not(.active){border-color:var(--border-3);color:var(--text-1);}.dns-mode-btn.active{background:rgba(79,142,247,0.12);border-color:rgba(79,142,247,0.4);color:var(--blue-400);font-weight:600;}.dns-mode-hint{font-size:11px;color:var(--text-4);margin-left:4px;padding:3px 10px;background:var(--bg-2);border-radius:10px;border:1px solid var(--border-1);}.http-diagram{width:100%;max-width:680px;display:grid;grid-template-columns:172px 1fr 172px;align-items:start;gap:0;}.http-node-browser{border-color:rgba(52,211,153,0.25) !important;}.http-node-server{border-color:rgba(251,191,36,0.25) !important;}.node-icon-browser{background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.25);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);}.node-icon-httpserver{background:rgba(251,191,36,0.12);border:1px solid rgba(251,191,36,0.25);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);}.state-httpready{background:rgba(52,211,153,0.08);color:var(--green-400);border:1px solid rgba(52,211,153,0.2);}.state-processing{background:rgba(245,158,11,0.08);color:var(--orange-400);border:1px solid rgba(245,158,11,0.2);}.state-responding{background:rgba(167,139,250,0.08);color:var(--purple-400);border:1px solid rgba(167,139,250,0.2);}.node-icon-tls{background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.25);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);}.state-tls{background:rgba(139,92,246,0.08);color:var(--purple-400);border:1px solid rgba(139,92,246,0.2);}.state-tlsdone{background:rgba(52,211,153,0.08);color:var(--green-400);border:1px solid rgba(52,211,153,0.2);}.state-finwait1{background:rgba(248,113,113,0.08);color:var(--red-400);border:1px solid rgba(248,113,113,0.2);}.state-finwait2{background:rgba(248,113,113,0.06);color:var(--red-400);border:1px solid rgba(248,113,113,0.15);}.state-closewait{background:rgba(245,158,11,0.08);color:var(--orange-400);border:1px solid rgba(245,158,11,0.2);}.state-lastack{background:rgba(245,158,11,0.06);color:var(--orange-400);border:1px solid rgba(245,158,11,0.15);}.state-timewait{background:rgba(167,139,250,0.08);color:var(--purple-400);border:1px solid rgba(167,139,250,0.2);}.protocol-switcher{display:flex;gap:6px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--border-1);background:var(--bg-2);flex-shrink:0;overflow-x:auto;}.proto-tab{padding:4px 12px;border-radius:14px;font-size:12px;font-weight:600;border:1px solid var(--border-1);background:none;cursor:pointer;font-family:var(--font-sans);color:var(--text-3);white-space:nowrap;transition:all var(--t-fast);flex-shrink:0;}.proto-tab.active{background:var(--blue-subtle);border-color:rgba(79,142,247,0.4);color:var(--blue-400);}.proto-tab:hover:not(.active){border-color:var(--border-2);color:var(--text-1);}.proto-tab-compare{border-color:rgba(167,139,250,0.35);color:var(--purple-400);}.proto-tab-compare.active{background:rgba(139,92,246,0.12);border-color:rgba(167,139,250,0.5);color:var(--purple-400);}.compare-panel{background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;}.compare-panel-header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border-1);}.cmp-blue{background:rgba(79,142,247,0.07);}.cmp-green{background:rgba(52,211,153,0.07);}.cmp-red{background:rgba(239,68,68,0.07);}.compare-panel-icon{font-size:16px;}.compare-panel-name{font-size:13px;font-weight:700;color:var(--text-0);}.compare-panel-badge{margin-left:auto;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--bg-2);color:var(--text-3);border:1px solid var(--border-1);}.compare-lanes{flex:1;padding:10px 12px;display:flex;flex-direction:column;gap:5px;min-height:100px;}.cmp-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--r-xs);font-size:12px;color:var(--text-3);transition:all var(--t-fast);position:relative;}.cmp-row.active{background:var(--bg-2);color:var(--text-1);border:1px solid var(--border-2);}.cmp-row.upcoming{opacity:0.28;}.cmp-row-arrow{width:28px;height:1px;position:relative;flex-shrink:0;}.cmp-row-arrow.right{background:linear-gradient(90deg,var(--blue-400),rgba(79,142,247,0.2));}.cmp-row-arrow.left{background:linear-gradient(270deg,var(--green-400),rgba(52,211,153,0.2));}.cmp-row-arrow.right::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border:3px solid transparent;border-left:5px solid var(--blue-400);}.cmp-row-arrow.left::before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border:3px solid transparent;border-right:5px solid var(--green-400);}.cmp-row-label{flex:1;font-family:var(--font-mono);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.cmp-row-arrow .packet-fly{width:8px;height:8px;}.compare-state-row{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--border-1);background:var(--bg-2);}.compare-state-item{flex:1;text-align:center;}.compare-state-label{font-size:10px;color:var(--text-4);margin-bottom:2px;}.compare-state-val{font-size:11.5px;font-weight:600;color:var(--text-2);font-family:var(--font-mono);}.cmp-step-label{color:var(--blue-400);}.compare-diff-bar{margin-top:12px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-md);}.compare-diff-title{font-size:11.5px;font-weight:700;color:var(--text-2);margin-bottom:8px;}.compare-diff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;}.compare-diff-item{padding:7px 10px;background:var(--bg-2);border-radius:var(--r-xs);border:1px solid var(--border-1);}.compare-diff-key{font-size:10.5px;color:var(--text-4);margin-bottom:4px;}.compare-diff-vals{display:flex;gap:6px;align-items:center;font-size:11px;font-family:var(--font-mono);}.compare-diff-l{color:var(--blue-400);font-weight:600;}.compare-diff-sep{color:var(--text-4);}.compare-diff-r{color:var(--green-400);font-weight:600;}.compare-desc-row{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:0 2px;}.compare-desc-item{flex:1;font-size:12px;color:var(--text-3);line-height:1.6;padding:8px 12px;background:var(--bg-card);border-radius:var(--r-xs);border:1px solid var(--border-1);}.compare-desc-sep{font-size:11px;color:var(--text-4);font-weight:700;align-self:center;flex-shrink:0;}@media (max-width:768px){body{font-size:14px;}.hero h1{font-size:1.8rem !important;}.hero p{font-size:0.95rem !important;}.protocol-grid,.list-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;}.protocol-card{padding:14px 10px !important;}.protocol-card .protocol-icon{font-size:1.6rem !important;}.protocol-card h3{font-size:0.85rem !important;}.modal-content{width:100vw !important;max-width:100vw !important;height:100vh !important;max-height:100vh !important;border-radius:0 !important;margin:0 !important;top:0 !important;left:0 !important;transform:none !important;}.modal-header{padding:12px 16px !important;}.modal-body{padding:10px !important;overflow-y:auto;}.animation-canvas{overflow-x:auto !important;overflow-y:hidden;}#tcpDiagram,#tcp4Diagram,#httpDiagram,#tlsDiagram,#udpDiagram,#compareCanvas{min-width:480px;overflow-x:auto;}#genericDiagram{min-width:420px;overflow-x:auto;}#dnsCanvas{overflow-x:auto;min-width:460px;}.dns-nodes-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}.dns-node{min-width:72px;}.fields-table-wrap,.packet-fields{overflow-x:auto !important;}.fields-table{min-width:360px;}.steps-list{grid-template-columns:1fr !important;}.knowledge-cards{grid-template-columns:1fr !important;}.quiz-option{padding:8px 12px !important;font-size:0.85rem !important;}nav .nav-links{display:none !important;}}@media (max-width:480px){.protocol-grid,.list-grid{grid-template-columns:1fr !important;}.hero h1{font-size:1.4rem !important;}.hero p{font-size:0.88rem !important;}.protocol-card h3{font-size:0.8rem !important;}}.learning-path-section{padding-top:0;}.lp-progress-wrap{display:flex;align-items:center;gap:10px;flex-shrink:0;}.lp-progress-bar{width:140px;height:7px;background:var(--border-1);border-radius:99px;overflow:hidden;}.lp-progress-fill{height:100%;background:linear-gradient(90deg,var(--blue-500),var(--cyan-400));border-radius:99px;transition:width 0.7s cubic-bezier(.4,0,.2,1);min-width:4px;position:relative;}.lp-progress-fill::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 8px var(--cyan-400);border:2px solid var(--bg-1);}.lp-progress-label{font-size:13px;font-weight:700;color:var(--cyan-400);min-width:38px;text-align:right;font-variant-numeric:tabular-nums;}.lp-rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}.lp-card{background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-lg);padding:20px 18px 16px;cursor:pointer;transition:transform var(--t-normal) var(--ease-out),border-color var(--t-normal),box-shadow var(--t-normal),background var(--t-normal);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:0;}.lp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--lp-color,var(--blue-400));opacity:0;transition:opacity var(--t-normal);box-shadow:0 0 8px var(--lp-color,var(--blue-400));}.lp-card::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(79,142,247,.05) 0%,transparent 70%);opacity:0;pointer-events:none;transition:opacity var(--t-normal);}.lp-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--lp-color,var(--blue-400)) 50%,transparent);background:var(--bg-card-2);box-shadow:var(--shadow-md),0 0 0 1px color-mix(in srgb,var(--lp-color,var(--blue-400)) 20%,transparent);}.lp-card:hover::before{opacity:1;}.lp-card:hover::after{opacity:1;}.lp-card:focus-visible{outline:2px solid var(--lp-color,var(--blue-400));outline-offset:2px;}.lp-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}.lp-icon-wrap{width:40px;height:40px;border-radius:var(--r-md);background:color-mix(in srgb,var(--lp-color,var(--blue-400)) 12%,transparent);border:1px solid color-mix(in srgb,var(--lp-color,var(--blue-400)) 25%,transparent);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:transform var(--t-fast);}.lp-card:hover .lp-icon-wrap{transform:scale(1.08);}.lp-difficulty{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;letter-spacing:.01em;}.lp-name{font-size:15px;font-weight:700;color:var(--text-0);margin-bottom:8px;letter-spacing:-.01em;line-height:1.3;}.lp-prereq{font-size:11.5px;color:var(--text-4);margin-bottom:14px;line-height:1.5;flex:1;}.lp-prereq-done{color:var(--green-400);font-weight:600;}.lp-prereq-todo{color:var(--text-3);}.lp-cta{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--lp-color,var(--blue-400));padding-top:12px;border-top:1px solid var(--border-0);transition:gap var(--t-fast);}.lp-card:hover .lp-cta{gap:8px;}.lp-all-done{text-align:center;padding:36px 0;color:var(--text-2);font-size:1.1rem;background:var(--bg-card);border:1px solid var(--border-1);border-radius:var(--r-lg);}@media (max-width:768px){.lp-rec-grid{grid-template-columns:repeat(2,1fr);gap:10px;}.lp-progress-bar{width:90px;}}@media (max-width:480px){.lp-rec-grid{grid-template-columns:1fr;}.lp-progress-wrap{display:none;}}#completion-banner{display:flex;align-items:center;gap:10px;padding:11px 18px;background:linear-gradient(90deg,rgba(16,185,129,.15),rgba(79,142,247,.12));border:1px solid rgba(16,185,129,.35);border-radius:10px;margin:10px 12px 4px;font-size:13.5px;color:var(--text-1);opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;z-index:10;}#completion-banner.cb-visible{opacity:1;transform:translateY(0);}.cb-icon{font-size:18px;flex-shrink:0;}.cb-text strong{color:var(--green-400);}#iprouteDiagram .dns-nodes-row{gap:6px;}.iproute-node{flex:1;min-width:80px;text-align:center;}.iproute-node.active-node{border-color:var(--blue-400) !important;box-shadow:0 0 0 2px rgba(79,142,247,0.25),var(--shadow-sm);transition:border-color 0.25s,box-shadow 0.25s;}.iproute-track-wrap{position:relative;height:32px;margin:4px 0 6px;display:flex;align-items:center;}.iproute-track-line{position:absolute;top:50%;left:12.5%;right:12.5%;height:3px;background:var(--border-1);border-radius:2px;transform:translateY(-50%);}.iproute-seg{position:absolute;top:50%;height:3px;border-radius:2px;transform:translateY(-50%);background:transparent;transition:background 0.3s;}#iproute-seg-0-1{left:12.5%;width:25%;}#iproute-seg-1-2{left:37.5%;width:25%;}#iproute-seg-2-3{left:62.5%;width:25%;}.iproute-seg.seg-active{background:var(--blue-400);}.iproute-seg.seg-done{background:var(--green-400);}.iproute-packet{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:left 0.55s cubic-bezier(0.4,0,0.2,1);}.iproute-packet-dot{width:12px;height:12px;border-radius:50%;background:var(--blue-400);box-shadow:0 0 8px var(--blue-400);}.iproute-packet-label{position:absolute;bottom:14px;font-size:9px;font-family:var(--font-mono);color:var(--blue-300);white-space:nowrap;background:var(--bg-1);padding:1px 4px;border-radius:3px;}.iproute-ttl-bar{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);font-family:var(--font-mono);margin-bottom:4px;}.iproute-ttl-label{color:var(--text-4);}.iproute-ttl-val{color:var(--orange-400);font-weight:700;font-size:13px;}.iproute-ttl-hint{color:var(--text-4);font-size:10.5px;}.iproute-mac-bar{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-3);background:rgba(79,142,247,0.06);border:1px solid rgba(79,142,247,0.15);border-radius:6px;padding:5px 10px;margin-bottom:4px;}.iproute-mac-icon{font-size:13px;}@media (max-width:600px){#iprouteDiagram .dns-nodes-row{overflow-x:auto;-webkit-overflow-scrolling:touch;}.iproute-node{min-width:68px;}}.stp-diagram,.ospf-diagram,.bgp-diagram,.arp-diagram{display:flex;flex-direction:column;align-items:center;padding:10px 12px 8px;width:100%;box-sizing:border-box;}.stp-status-bar{font-size:11.5px;color:var(--text-3);margin-top:4px;padding:4px 12px;background:rgba(34,211,238,0.05);border:1px solid rgba(34,211,238,0.12);border-radius:6px;text-align:center;}@keyframes field-flash{0%{background:rgba(245,158,11,0.22);}60%{background:rgba(245,158,11,0.10);}100%{background:transparent;}}.field-table tbody tr.field-changed{animation:field-flash 1.2s ease forwards;}.field-table tbody tr.field-changed .field-val{color:var(--orange-400);font-weight:600;}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;padding:8px 0 48px;max-width:1100px;margin:0 auto;padding-left:24px;padding-right:24px;}.tool-card{display:flex;flex-direction:column;gap:0;background:var(--bg-card);border:1px solid var(--border-1);border-radius:16px;padding:24px;cursor:pointer;transition:background 0.18s,border-color 0.18s,transform 0.15s,box-shadow 0.18s;position:relative;overflow:hidden;}.tool-card::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity 0.18s;background:linear-gradient(135deg,rgba(79,142,247,0.04),transparent);}.tool-card:hover{background:var(--bg-card-2);border-color:var(--border-2);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.25);}.tool-card:hover::before{opacity:1;}.tool-card:active{transform:translateY(0);}.tool-card-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;flex-shrink:0;}.tool-card-body{flex:1;}.tool-card-title{font-size:17px;font-weight:700;color:var(--text-1);margin-bottom:8px;letter-spacing:-0.01em;}.tool-card-desc{font-size:13.5px;color:var(--text-3);line-height:1.65;margin-bottom:14px;}.tool-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}.tool-tag{font-size:11px;color:var(--text-4);background:var(--bg-2);border:1px solid var(--border-1);border-radius:20px;padding:3px 9px;letter-spacing:0.02em;}.tool-card-cta{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--blue-400);margin-top:auto;transition:gap 0.15s;}.tool-card:hover .tool-card-cta{gap:8px;}@media (max-width:600px){.tools-grid{grid-template-columns:1fr;padding-left:14px;padding-right:14px;}}.hcia-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;max-width:1100px;margin:0 auto;padding:8px 24px 48px;}.hcia-module{background:var(--bg-card);border:1px solid var(--border-1);border-radius:14px;padding:20px;}.hcia-module-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.01em;}.hcia-module-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}.hcia-items{display:flex;flex-direction:column;gap:6px;}.hcia-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;border:1px solid transparent;transition:background 0.15s,border-color 0.15s;}.hcia-has-anim,.hcia-has-tool{cursor:pointer;}.hcia-has-anim:hover{background:rgba(79,142,247,0.07);border-color:rgba(79,142,247,0.2);}.hcia-has-tool:hover{background:rgba(52,211,153,0.07);border-color:rgba(52,211,153,0.2);}.hcia-badge{font-size:11px;font-weight:600;border-radius:20px;padding:2px 8px;white-space:nowrap;flex-shrink:0;}.hcia-yes{background:rgba(52,211,153,0.12);color:var(--green-400);border:1px solid rgba(52,211,153,0.25);}.hcia-tool{background:rgba(79,142,247,0.12);color:var(--blue-400);border:1px solid rgba(79,142,247,0.25);}.hcia-no{background:var(--bg-2);color:var(--text-4);border:1px solid var(--border-1);}.hcia-name{flex:1;font-size:13.5px;color:var(--text-2);}.hcia-hint{font-size:11.5px;color:var(--text-4);white-space:nowrap;}.hcia-has-anim:hover .hcia-hint,.hcia-has-tool:hover .hcia-hint{color:var(--blue-400);}.hcia-tip{max-width:1100px;margin:0 auto 40px;padding:14px 20px;background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.2);border-radius:10px;font-size:13.5px;color:var(--text-3);line-height:1.6;margin-left:24px;margin-right:24px;}@media (max-width:600px){.hcia-grid{grid-template-columns:1fr;padding-left:14px;padding-right:14px;}.hcia-tip{margin-left:14px;margin-right:14px;}}.subnet-calc-wrap{max-width:760px;margin:0 auto;padding:8px 24px 48px;}.subnet-input-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:24px;}.subnet-field{display:flex;flex-direction:column;gap:6px;}.subnet-field label{font-size:12px;color:var(--text-4);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;}.subnet-field input,.subnet-field select{background:var(--bg-2);border:1px solid var(--border-2);border-radius:9px;color:var(--text-1);font-size:15px;padding:10px 14px;outline:none;transition:border-color 0.15s;font-family:var(--font-mono,monospace);}.subnet-field input:focus,.subnet-field select:focus{border-color:var(--blue-400);}.subnet-field input.input-ip{width:190px;}.subnet-field select.select-prefix{width:110px;}.subnet-calc-btn{padding:10px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;align-self:flex-end;}.subnet-result{display:none;background:var(--bg-card);border:1px solid var(--border-1);border-radius:14px;overflow:hidden;}.subnet-result.visible{display:block;}.subnet-result-title{font-size:13px;font-weight:700;color:var(--text-4);text-transform:uppercase;letter-spacing:0.05em;padding:14px 20px 10px;border-bottom:1px solid var(--border-1);}.subnet-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}.subnet-result-item{padding:14px 20px;border-bottom:1px solid var(--border-1);border-right:1px solid var(--border-1);}.subnet-result-item:nth-child(even){border-right:none;}.subnet-result-label{font-size:11.5px;color:var(--text-4);margin-bottom:4px;}.subnet-result-val{font-size:15px;font-weight:600;color:var(--text-1);font-family:var(--font-mono,monospace);}.subnet-binary-section{padding:16px 20px;}.subnet-binary-title{font-size:12px;color:var(--text-4);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px;}.subnet-binary-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:13px;}.subnet-binary-label{color:var(--text-4);width:90px;flex-shrink:0;font-size:12px;}.subnet-binary-bits{display:flex;gap:2px;flex-wrap:wrap;}.subnet-bit{width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:var(--font-mono,monospace);}.subnet-bit-net{background:rgba(79,142,247,0.2);color:var(--blue-400);border:1px solid rgba(79,142,247,0.3);}.subnet-bit-host{background:rgba(52,211,153,0.15);color:var(--green-400);border:1px solid rgba(52,211,153,0.25);}.subnet-bit-sep{width:4px;flex-shrink:0;}.subnet-error{display:none;color:var(--red-400);font-size:13px;padding:10px 0;}.subnet-error.visible{display:block;}@media (max-width:600px){.subnet-calc-wrap{padding-left:14px;padding-right:14px;}.subnet-result-grid{grid-template-columns:1fr;}.subnet-result-item{border-right:none;}.subnet-field input.input-ip{width:150px;}}.audience-section{padding:48px 0 40px;background:var(--bg-secondary);border-top:1px solid var(--border-color);}.audience-section h2{text-align:center;font-size:22px;font-weight:700;color:var(--text-primary);margin:0 0 8px;}.audience-section .audience-subtitle{text-align:center;font-size:14px;color:var(--text-secondary);margin:0 0 28px;}.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:960px;margin:0 auto;padding:0 20px;}.audience-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:20px 16px;text-align:center;transition:transform 0.2s,box-shadow 0.2s;}.audience-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.12);}.audience-card-icon,.audience-icon{font-size:32px;margin-bottom:10px;display:block;}.audience-card h3,.audience-title{font-size:15px;font-weight:600;color:var(--text-primary);margin:0 0 6px;}.audience-card p,.audience-desc{font-size:13px;color:var(--text-secondary);line-height:1.5;margin:0 0 10px;}.audience-cta{font-size:13px;color:var(--primary);font-weight:500;}@media (max-width:768px){.audience-grid{grid-template-columns:repeat(2,1fr);}}@media (max-width:480px){.audience-grid{grid-template-columns:1fr;}}