:root{--ink: #061a2c;--panel: #08233a;--panel-2: #0a2b46;--line: #1fc5ff;--muted: #83abc3;--text: #e6f6ff;--green: #4df0a4;--grid: rgba(29, 166, 218, .08);--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace}*{box-sizing:border-box}html{background:var(--ink)}body{margin:0;color:var(--text);background:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),radial-gradient(circle at 80% 0%,#0b3552 0,transparent 34%),var(--ink);background-size:24px 24px,24px 24px,auto,auto;font-family:var(--font-sans)}button,input,select{font:inherit}.topbar{height:64px;padding:0 32px;border-bottom:1px solid rgba(31,197,255,.75);display:flex;align-items:center;justify-content:space-between;background:#041727e6}.brand{color:var(--line);text-decoration:none;font-family:var(--font-mono);font-weight:700;letter-spacing:.06em}.brand span{color:#a5cee2;font-weight:500}.circuit-mark{display:flex;align-items:center;gap:8px}.circuit-mark i{width:34px;height:1px;background:#21799d;position:relative}.circuit-mark i:after{content:"";position:absolute;right:0;top:-3px;width:5px;height:5px;border:1px solid #21799d;border-radius:50%}.workspace{min-height:calc(100vh - 64px);display:grid;grid-template-columns:minmax(350px,440px) 1fr}.controls{padding:34px 32px 40px;border-right:1px solid rgba(31,197,255,.32);background:linear-gradient(90deg,#051c2ff7,#051c2fd1)}.eyebrow{margin:0 0 8px;color:var(--line);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}h1{margin:0;font-size:clamp(28px,3vw,38px);line-height:1.06;letter-spacing:-.04em}.intro{margin:14px 0 26px;color:#a3c2d4;line-height:1.55;font-size:14px}label{display:block}label>span,legend,.test-inputs div>span{display:block;margin-bottom:7px;color:#74cce9;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}input,select{width:100%;min-height:44px;padding:0 13px;border:1px solid #2d89b1;border-radius:3px;outline:none;color:var(--text);background:#072238e6}input:focus,select:focus,button:focus-visible{border-color:var(--green);box-shadow:0 0 0 2px #4df0a42e;outline:none}.two-up{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px;margin-bottom:15px}fieldset{margin:24px 0 0;padding:0;border:0}.counter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:9px}.wide{width:100%}.ipsec-options{padding:15px;border:1px dashed #2a6989}.field-note{margin:10px 0 0;color:#7699ad;font-size:12px;line-height:1.45}.encap-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.encap{min-height:42px;padding:0 10px;border:1px solid #285975;border-radius:2px;color:#9ab9cb;background:#061f33cc;display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left;font-size:12px}.encap b{color:#588ba5;font-family:var(--font-mono);font-size:11px}.encap.active{color:#fff;border-color:var(--line);background:linear-gradient(90deg,#1572996b,#082a45cc)}.encap.active b{color:var(--line)}.results{margin-top:25px;padding-top:18px;border-top:1px dashed #2a6989;display:grid;grid-template-columns:1fr 1fr;gap:17px}.results div:last-child{grid-column:1 / -1}.results span{display:block;color:#72a6c0;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.results strong{display:block;margin-top:3px;color:var(--green);font-family:var(--font-mono);font-size:36px;font-weight:500}.diagram-panel{min-width:0;padding:34px clamp(24px,4vw,58px) 70px}.panel-heading,.test-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}h2{margin:0;font-size:22px;letter-spacing:-.02em}.formula{padding:9px 13px;border:1px solid #285f7d;color:#90d7f0;background:#051d30b3;font-family:var(--font-mono);font-size:13px}.ruler{margin:28px 0 14px;display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:9px;color:#57b6da;font-family:var(--font-mono);font-size:10px}.ruler i{height:1px;background:var(--line)}.ruler b{color:var(--line);letter-spacing:.09em;font-size:11px}.packet-stack{min-height:300px;border-left:2px solid var(--line);border-right:2px solid var(--line);padding:0 18px 18px;position:relative}.packet-stack:before,.packet-stack:after{content:"";position:absolute;top:0;width:22px;height:2px;background:var(--line)}.packet-stack:before{left:0}.packet-stack:after{right:0}.header-layer{min-height:58px;padding:8px 15px;border:1px solid #1aaee7;border-top:0;background:#072b46d1;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px}.layer-index{color:#4d97b7;font-family:var(--font-mono);font-size:12px}.header-layer b{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.04em}.header-layer small{display:block;margin-top:3px;color:#729cb2;font-size:11px}.header-layer strong{color:var(--line);font-family:var(--font-mono);font-size:13px}.payload-layer{min-height:120px;margin:18px;border:2px solid var(--green);background:repeating-linear-gradient(135deg,rgba(77,240,164,.04),rgba(77,240,164,.04) 8px,transparent 8px,transparent 16px);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.payload-layer span{color:#d9f8e9;font-size:13px}.payload-layer strong{margin-top:10px;color:var(--green);font-size:20px}.empty-stack{padding:22px;border-bottom:1px dashed #2d7594;color:#7ea9be;text-align:center;font-family:var(--font-mono);font-size:12px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border:1px solid #267b9e}.summary-grid article{min-height:70px;padding:12px;border-right:1px solid #267b9e;background:#061e31cc}.summary-grid article:last-child{border-right:0}.summary-grid span{display:block;color:#75a8c0;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.summary-grid b{display:block;margin-top:8px;font-family:var(--font-mono);font-size:18px}.green{color:var(--green)}.test-panel{margin-top:38px;padding:24px;border:1px dashed #2c7698;background:#051b2db8}.copy-button{min-width:110px;height:40px;border:1px solid var(--line);border-radius:2px;color:var(--line);background:transparent;cursor:pointer}.copy-button:hover{color:var(--ink);background:var(--line)}.test-inputs{margin-top:20px;display:grid;grid-template-columns:130px 1fr 130px;gap:12px;align-items:end}.test-inputs div{min-height:44px;padding:6px 12px;border:1px solid #2d89b1;background:#072238e6}.test-inputs div>span{margin:0}.test-inputs div strong{color:var(--green);font-family:var(--font-mono);font-size:16px}.commands{margin-top:18px;border:1px solid #244e66}.commands div{display:grid;grid-template-columns:170px 1fr;border-bottom:1px solid #244e66}.commands div:last-child{border-bottom:0}.commands span{padding:10px 12px;color:#71bad7;background:#092943;font-size:12px}.commands code{padding:10px 12px;overflow-x:auto;color:#d9f1fc;background:#051b2d;font-family:var(--font-mono);font-size:12px;white-space:nowrap}.footnote{margin:16px 0 0;color:#7699ad;font-size:12px;line-height:1.55}@media(max-width:980px){.workspace{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid rgba(31,197,255,.32)}}@media(max-width:640px){.topbar{padding:0 18px}.circuit-mark{display:none}.controls,.diagram-panel{padding:26px 18px 42px}.two-up,.encap-grid,.counter-grid,.summary-grid,.test-inputs{grid-template-columns:1fr}.results div:last-child{grid-column:auto}.summary-grid article{border-right:0;border-bottom:1px solid #267b9e}.summary-grid article:last-child{border-bottom:0}.panel-heading,.test-heading{align-items:flex-start;flex-direction:column}.formula{width:100%}.header-layer{grid-template-columns:28px 1fr auto;gap:8px;padding-inline:9px}.header-layer small{display:none}.commands div{grid-template-columns:1fr}}@media(prefers-reduced-motion:no-preference){.header-layer,.payload-layer{animation:rise .28s ease-out both}@keyframes rise{0%{opacity:.2;transform:translateY(5px)}}}