:root{--sdn-dark: #001b33;--sdn-navy: #003256;--sdn-body: #003968;--sdn-primary: #5aaae2;--sdn-primary-soft: #62b6f3;--sdn-success: #40d294;--sdn-border: rgba(255, 255, 255, .1);--sdn-border-strong: rgba(255, 255, 255, .18);--bg: var(--sdn-dark);--bg-card: var(--sdn-navy);--bg-card-2: var(--sdn-body);--fg: #ffffff;--fg-dim: rgba(255, 255, 255, .7);--fg-muted: rgba(255, 255, 255, .5);--accent: var(--sdn-primary);--accent-2: var(--sdn-primary-soft);--ok: var(--sdn-success);--warn: #fbbf24;--err: #f87171;--border: var(--sdn-border);--mono: ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, monospace;--text-base: 14px;--text-small: 12px;--text-title: 16px}*{box-sizing:border-box}html,body{margin:0;padding:0;-webkit-text-size-adjust:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:var(--text-base);line-height:1.5}.topbar{background:var(--sdn-dark);border-bottom:1px solid var(--sdn-border-strong);padding:14px 28px;display:flex;align-items:center;flex-wrap:wrap;gap:16px;box-shadow:0 1px #00000040}.topbar>nav.tabs{margin-left:auto}.topbar h1{color:#fff}.brand{display:flex;align-items:center;gap:18px}.brand h1{font-size:var(--text-title);font-weight:500;margin:0;letter-spacing:.3px;padding-left:18px;border-left:1px solid var(--sdn-border-strong);color:#ffffffeb}.sdn-logo{display:inline-flex;align-items:center;line-height:0;transition:opacity .15s}.sdn-logo img{height:36px;width:auto;display:block}.sdn-logo:hover img{opacity:.85}.tabs{display:flex;flex-wrap:wrap;gap:4px}.tabs a.tab-btn{text-decoration:none}.tab-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;color:#ffffffb3;padding:7px 16px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:var(--text-base);font-weight:500;line-height:1.4;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:36px;padding:0;background:transparent;border:1px solid var(--sdn-border-strong);border-radius:6px;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.nav-toggle:hover,.tab-btn:hover{background:#ffffff0f;color:#fff}.tab-btn.active{background:#5aaae226;color:var(--sdn-primary);border-color:#5aaae259}main{padding:24px;max-width:1400px;margin:0 auto}.tab-pane{display:none}.tab-pane.active{display:block}.grid{display:grid;grid-template-columns:minmax(340px,1fr) minmax(340px,1fr);gap:24px}@media(max-width:1000px){.grid{grid-template-columns:1fr}}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:20px}.card.wide{grid-column:1 / -1}#parser-anatomy-card{margin-top:24px}.card h2{margin:0 0 16px;font-size:var(--text-title);font-weight:600;color:var(--accent);letter-spacing:.5px;text-transform:uppercase}.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.card-head h2{margin:0}.ghost-btn{background:transparent;border:1px solid var(--border);color:var(--fg-dim);padding:5px 12px;border-radius:4px;font-size:var(--text-small);font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.ghost-btn:hover{background:#f871711a;color:var(--err);border-color:#f8717166}.card h3{margin:0 0 6px;font-size:var(--text-small);font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.8px}label{display:block;margin-bottom:14px;font-size:var(--text-base);color:var(--fg-dim)}label.check{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;color:var(--fg)}label.check input[type=checkbox]{flex:none}.hint{color:var(--fg-dim);font-size:var(--text-small)}input[type=text],input[type=number],input[type=datetime-local],select,textarea{display:block;width:100%;margin-top:4px;padding:7px 9px;background:var(--bg-card-2);border:1px solid var(--border);border-radius:4px;color:var(--fg);font-size:var(--text-base);font-family:inherit}textarea{font-family:var(--mono);font-size:var(--text-small);resize:vertical}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid>*,.row>*,.key-row>*,.addn-row>*,.gallery>*{min-width:0}code{overflow-wrap:anywhere}.block-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.block-head h3{margin:0}.copy-actions{display:inline-flex;flex-wrap:wrap;gap:6px;flex-shrink:0}.copy-btn{background:transparent;border:1px solid var(--border);color:var(--fg-dim);padding:3px 9px;border-radius:4px;font-size:var(--text-small);font-weight:600;letter-spacing:.3px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}.copy-btn:hover{border-color:var(--accent);color:var(--accent)}.copy-btn.copied{border-color:var(--ok);color:var(--ok)}.copy-btn.copy-failed{border-color:var(--err);color:var(--err)}button[type=submit],#addn-add,.parser-anatomy-btn,#send-btn,.gallery-item button{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);color:#0f172a;border:none;padding:8px 16px;border-radius:4px;font-weight:600;font-size:var(--text-base);cursor:pointer}button[type=submit]:hover,#addn-add:hover,.parser-anatomy-btn:hover,#send-btn:hover,.gallery-item button:hover{filter:brightness(1.1)}.parser-anatomy-btn{margin-top:12px}#addn-add{background:var(--bg-card-2);color:var(--accent);border:1px dashed var(--border);margin-top:8px}fieldset{min-inline-size:0;border:1px solid var(--border);border-radius:4px;padding:12px;margin-bottom:14px}fieldset legend{color:var(--accent);font-size:var(--text-small);padding:0 6px;text-transform:uppercase;letter-spacing:.8px}fieldset.sub-builder{border-color:#5aaae259;background:#5aaae20d}fieldset.sub-builder legend{color:var(--sdn-primary)}.is-disabled{opacity:.5;pointer-events:none}.is-disabled input,.is-disabled select{cursor:not-allowed}.icon{display:inline-block;vertical-align:-.15em;flex:none;pointer-events:none}.spec-ref .icon{vertical-align:0}button .icon,.copy-btn .icon,.tab-btn .icon{vertical-align:-.15em}.spec-ref{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;font-family:var(--mono);font-size:11px;font-weight:700;font-style:normal;line-height:1;color:var(--sdn-primary);background:#5aaae226;border:1px solid rgba(90,170,226,.4);border-radius:50%;cursor:default;vertical-align:middle;transition:background .15s,color .15s,transform .15s;-webkit-user-select:none;user-select:none}.spec-ref:hover{background:var(--sdn-primary);color:var(--sdn-dark);transform:scale(1.1)}.spec-tip{position:fixed;pointer-events:none;z-index:9999;max-width:360px;padding:10px 14px;background:var(--sdn-dark);color:#fff;border:1px solid var(--sdn-primary);border-radius:6px;font-size:var(--text-small);font-weight:500;letter-spacing:.2px;line-height:1.5;white-space:normal;box-shadow:0 8px 28px #00000073;opacity:0;transform:translateY(-4px);transition:opacity .12s ease-out,transform .12s ease-out}.spec-tip.visible{opacity:1;transform:translateY(0)}.spec-tip:after{content:"";position:absolute;left:50%;bottom:-6px;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--sdn-primary);border-bottom-width:0}.pretty-block{margin-top:16px}.pretty-block h3{margin:0 0 8px;color:var(--sdn-primary);font-size:var(--text-small);text-transform:uppercase;letter-spacing:.6px}.pretty-card{background:#5aaae20f;border:1px solid rgba(90,170,226,.25);border-radius:5px;padding:10px 14px;margin-bottom:8px}.pretty-card .info{margin:0}.pretty-card .info dt{margin-top:6px}.key-row{display:grid;grid-template-columns:1fr auto auto;gap:6px;margin-top:4px}.key-row input{margin-top:0}.key-row .key-gen-bits{margin-top:0;min-width:80px}.key-row .key-gen-btn{margin-top:0;padding:7px 12px;background:var(--sdn-body);color:var(--sdn-primary);border:1px solid rgba(90,170,226,.4);border-radius:4px;font-size:var(--text-small);cursor:pointer;white-space:nowrap}.key-row .key-gen-btn:hover{background:#5aaae226}.anatomy-deciphered header{background:#4ade8014;color:var(--sdn-success);border-bottom:1px solid rgba(74,222,128,.25)}.anatomy-section{border-left:6px solid var(--border);transition:border-left-color .15s}.kind-delimiter{--zone: #94a3b8}.kind-crc{--zone: #5aaae2}.kind-length{--zone: #06b6d4}.kind-id{--zone: #c084fc}.kind-seq{--zone: #4ade80}.kind-receiver{--zone: #2dd4bf}.kind-prefix{--zone: #fb923c}.kind-account{--zone: #f97316}.kind-data{--zone: #60a5fa}.kind-xdata{--zone: #f472b6}.kind-timestamp{--zone: #facc15}.kind-cipher{--zone: #f87171}.kind-padding{--zone: #eab308}.anatomy-section[class*=kind-]{border-left-color:var(--zone)}.anatomy-section[class*=kind-]{background:color-mix(in srgb,var(--zone) 5%,transparent)}.anatomy-section[class*=kind-]>header{background:color-mix(in srgb,var(--zone) 22%,transparent);border-bottom-color:color-mix(in srgb,var(--zone) 35%,var(--border));color:color-mix(in srgb,var(--zone) 80%,#ffffff)}.anatomy-section[class*=kind-]>header span:last-child{color:color-mix(in srgb,var(--zone) 60%,var(--fg-dim))}.anatomy-section[class*=kind-] .byte{background:color-mix(in srgb,var(--zone) 12%,var(--bg-card-2));border-color:color-mix(in srgb,var(--zone) 40%,var(--border))}.anatomy-section[class*=kind-] .byte .hex{color:var(--zone)}.anatomy-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}@media(max-width:1100px){.anatomy-split{grid-template-columns:1fr}}.anatomy-col{display:flex;flex-direction:column;gap:12px}.anatomy-col-title{margin:0 0 4px;padding:8px 12px;font-size:var(--text-small);text-transform:uppercase;letter-spacing:.6px;border-radius:5px}.anatomy-col-wire .anatomy-col-title{background:#fbbf2414;color:var(--warn);border:1px solid rgba(251,191,36,.25)}.anatomy-col-clear .anatomy-col-title{background:#4ade8014;color:var(--sdn-success);border:1px solid rgba(74,222,128,.25)}.anatomy-col .anatomy-section{width:100%}.mono{font-family:var(--mono);font-size:var(--text-small);background:var(--bg-card-2);border:1px solid var(--border);border-radius:4px;padding:10px;white-space:pre-wrap;word-break:break-all;margin:0}.byte-tile,.ascii-tile{display:inline-block;font-family:var(--mono);font-size:var(--text-small);line-height:1.6}.byte-tile{padding:0 3px;border-radius:2px;color:var(--fg)}.ascii-tile{color:var(--fg)}.byte-tile.kind-delimiter,.ascii-tile.kind-delimiter{color:color-mix(in srgb,#94a3b8 90%,var(--fg))}.byte-tile.kind-crc,.ascii-tile.kind-crc{color:#5aaae2}.byte-tile.kind-length,.ascii-tile.kind-length{color:#06b6d4}.byte-tile.kind-id,.ascii-tile.kind-id{color:#c084fc}.byte-tile.kind-seq,.ascii-tile.kind-seq{color:#4ade80}.byte-tile.kind-receiver,.ascii-tile.kind-receiver{color:#2dd4bf}.byte-tile.kind-prefix,.ascii-tile.kind-prefix{color:#fb923c}.byte-tile.kind-account,.ascii-tile.kind-account{color:#f97316}.byte-tile.kind-data,.ascii-tile.kind-data{color:#60a5fa}.byte-tile.kind-xdata,.ascii-tile.kind-xdata{color:#f472b6}.byte-tile.kind-timestamp,.ascii-tile.kind-timestamp{color:#facc15}.byte-tile.kind-cipher,.ascii-tile.kind-cipher{color:#f87171}.byte-tile.kind-padding,.ascii-tile.kind-padding{color:#eab308}.byte-tile.kind-crc{background:#5aaae21f}.byte-tile.kind-length{background:#06b6d41f}.byte-tile.kind-id{background:#c084fc1f}.byte-tile.kind-seq{background:#4ade801f}.byte-tile.kind-receiver{background:#2dd4bf1f}.byte-tile.kind-prefix{background:#fb923c1f}.byte-tile.kind-account{background:#f973161f}.byte-tile.kind-data{background:#60a5fa1f}.byte-tile.kind-xdata{background:#f472b61f}.byte-tile.kind-timestamp{background:#facc151f}.byte-tile.kind-cipher{background:#f871711f}.byte-tile.kind-padding{background:#eab3081f}.output-block{margin-bottom:14px}.info{margin:0}.info dt{font-size:var(--text-small);text-transform:uppercase;letter-spacing:.6px;color:var(--fg-dim);margin-top:8px}.info dd{margin:2px 0 0;font-family:var(--mono);font-size:var(--text-small);color:var(--fg);word-break:break-all}.error{background:#f871711f;border:1px solid rgba(248,113,113,.35);color:var(--err);padding:10px 12px;border-radius:4px;margin-bottom:14px;font-family:var(--mono);font-size:var(--text-small);white-space:pre-wrap}.warning{background:#fbbf241f;border:1px solid rgba(251,191,36,.4);color:var(--warn);padding:10px 12px;border-radius:4px;margin-bottom:14px;font-size:var(--text-small);white-space:pre-wrap}.hidden{display:none}.addn-row{display:grid;grid-template-columns:160px 1fr 32px;gap:8px;margin-bottom:6px}.addn-row button{background:var(--bg-card-2);color:var(--err);border:1px solid var(--border);border-radius:4px;cursor:pointer}.anatomy{margin-top:16px;display:grid;gap:18px}.anatomy-desc{padding:10px 14px;color:var(--fg-dim);font-size:var(--text-small);line-height:1.5;border-bottom:1px solid var(--border)}.anatomy-details{margin:0;padding:10px 14px;border-bottom:1px solid var(--border);background:#ffffff05;display:grid;grid-template-columns:160px 1fr;gap:4px 16px;font-size:var(--text-small)}.anatomy-details dt{color:var(--fg-muted);font-size:var(--text-small);text-transform:uppercase;letter-spacing:.5px;align-self:center}.anatomy-details dd{margin:0;font-family:var(--mono);color:var(--fg);word-break:break-word}.anatomy-section{border:1px solid var(--border);border-radius:6px;overflow:hidden}.anatomy-section header{background:var(--bg-card-2);padding:8px 12px;font-size:var(--text-small);text-transform:uppercase;letter-spacing:.8px;color:var(--accent);display:flex;justify-content:space-between}.anatomy-section .bytes{display:flex;flex-wrap:wrap;gap:4px;padding:12px}.byte{background:var(--bg-card-2);border:1px solid var(--border);border-radius:3px;padding:4px 6px;font-family:var(--mono);font-size:var(--text-small);display:flex;flex-direction:column;align-items:center;min-width:38px}.byte .hex{color:var(--accent)}.byte .ch{color:var(--fg-dim);font-size:var(--text-small)}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.gallery-item{background:var(--bg-card-2);border:1px solid var(--border);border-radius:6px;padding:14px}.gallery-item h3{margin:0 0 6px;color:var(--fg);font-size:var(--text-base);text-transform:none;letter-spacing:0}.gallery-item p{margin:0 0 10px;color:var(--fg-dim);font-size:var(--text-small)}.gallery-item pre{font-family:var(--mono);font-size:var(--text-small);background:var(--bg-card);padding:6px 8px;border-radius:3px;margin:0 0 10px;white-space:pre-wrap;word-break:break-all;border:1px solid var(--border)}.gallery-item .actions{display:flex;gap:6px}.gallery-item .actions button{font-size:var(--text-small);padding:5px 10px}.tag{display:inline-block;padding:2px 6px;border-radius:3px;font-size:var(--text-small);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-right:4px}.tag.ciphered{background:#fbbf242e;color:var(--warn)}.tag.clear{background:#4ade802e;color:var(--ok)}.tag.standard{background:#38bdf82e;color:var(--accent)}.tag.binary{background:#818cf82e;color:var(--accent-2)}.footer{text-align:center;padding:24px;color:var(--fg-dim);font-size:var(--text-small);border-top:1px solid var(--border);margin-top:24px}.footer a{color:var(--accent);text-decoration:none}.footer a:hover{text-decoration:underline}.footer-note{max-width:760px;margin:8px auto 0;color:var(--fg-muted);line-height:1.6}.footer-build{margin:10px 0 0;color:var(--fg-muted);font-family:var(--mono);font-size:11px;letter-spacing:.3px}@media(max-width:640px){main{padding:14px 12px}.topbar{padding:12px 14px;gap:10px}.nav-toggle{display:inline-flex;order:3;margin-left:auto}.conn-status{order:2;margin-left:auto}.topbar>nav.tabs{display:none;order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;margin-left:0}.topbar>nav.tabs.open{display:flex}.tab-btn{justify-content:flex-start;padding:10px 14px}.brand{gap:12px}.brand h1{font-size:var(--text-base);padding-left:12px}.sdn-logo img{height:28px}.card{padding:14px}.footer{padding:18px 12px}input[type=text],input[type=number],input[type=datetime-local],select,textarea{font-size:16px}.row,.key-row,.gallery{grid-template-columns:1fr}.row>label.spacer{display:none}.addn-row{grid-template-columns:1fr 32px}.addn-row>:first-child{grid-column:1 / -1}.anatomy-details{grid-template-columns:1fr;gap:2px 0}.anatomy-details dd{margin-bottom:8px}.spec-tip{max-width:calc(100vw - 24px)}}