.sn-diagram{margin-block:var(--sp-7);padding:var(--sp-6);background-color:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--rad-md);overflow-x:auto}.sn-diagram__caption{font-size:var(--size-2xs);color:var(--text-subtle);margin-block-start:var(--sp-3)}.sn-layers{margin-block:var(--sp-7);flex-direction:column;max-width:44rem;display:flex}.sn-layer{align-items:baseline;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);background-color:var(--surface-raised);border:1px solid var(--border);display:flex}.sn-layer+.sn-layer{border-block-start:none}.sn-layer:first-child{border-start-start-radius:var(--rad-sm);border-start-end-radius:var(--rad-sm)}.sn-layer:last-child{border-end-end-radius:var(--rad-sm);border-end-start-radius:var(--rad-sm)}.sn-layer__num{width:2ch;font-family:var(--font-mono);font-size:var(--size-2xs);color:var(--text-subtle);font-variant-numeric:tabular-nums;flex:none}.sn-layer__name{width:11rem;color:var(--text-accent);flex:none;font-weight:600}.sn-layer__pdu{width:8rem;font-size:var(--size-2xs);color:var(--text-subtle);flex:none}.sn-layer__protocols{font-size:var(--size-2xs);color:var(--text-muted)}.sn-encap{margin-block:var(--sp-7);flex-direction:column;align-items:center;display:flex}.sn-encap__layer{width:100%;max-width:40rem;padding:var(--sp-3) var(--sp-5);text-align:center;font-weight:600;font-size:var(--size-sm);color:var(--text-accent);background-color:var(--surface-sunken);border:1px solid var(--border-strong)}.sn-encap__layer+.sn-encap__layer{border-block-start:none}.sn-encap__layer:first-child{border-start-start-radius:var(--rad-sm);border-start-end-radius:var(--rad-sm)}.sn-encap__layer:last-child{border-end-end-radius:var(--rad-sm);border-end-start-radius:var(--rad-sm)}.sn-encap__layer:nth-child(2){max-width:34rem}.sn-encap__layer:nth-child(3){max-width:28rem}.sn-encap__layer:nth-child(4){max-width:22rem}.sn-encap__layer:nth-child(5){max-width:16rem}.sn-packet{margin-block:var(--sp-7);border:1px solid var(--border-strong);border-radius:var(--rad-sm);flex-wrap:wrap;display:flex;overflow:hidden}.sn-packet__field{min-width:5rem;padding:var(--sp-3) var(--sp-4);text-align:center;border:1px solid var(--border);background-color:var(--surface-raised);flex:auto}.sn-packet__field--wide{flex-grow:4}.sn-packet__name{font-weight:600;font-size:var(--size-2xs);color:var(--text-accent);display:block}.sn-packet__size{font-size:var(--size-3xs);color:var(--text-subtle);font-family:var(--font-mono)}.sn-seq{margin-block:var(--sp-7);padding:var(--sp-6);background-color:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--rad-md);max-width:40rem}.sn-seq__header{border-block-end:1px solid var(--border-strong);justify-content:space-between;margin-block-end:var(--sp-4);padding-block-end:var(--sp-4);display:flex}.sn-seq__entity{color:var(--text-accent);font-weight:600;font-size:var(--size-sm)}.sn-seq__row{padding-block:var(--sp-3);align-items:center;display:flex}.sn-seq__arrow{padding-inline:var(--sp-5);flex:1;align-items:center;display:flex}.sn-seq__line{border-block-start:2px solid var(--accent-nontext);flex:1;position:relative}.sn-seq__line--dashed{border-block-start-style:dashed}.sn-seq__arrow--right .sn-seq__line:after{content:"▶";color:var(--accent-nontext);font-size:var(--size-2xs);position:absolute;top:-.7em;right:-2px}.sn-seq__arrow--left .sn-seq__line:before{content:"◀";color:var(--accent-nontext);font-size:var(--size-2xs);position:absolute;top:-.7em;left:-2px}.sn-seq__label{white-space:nowrap;font-size:var(--size-3xs);font-family:var(--font-mono);color:var(--text-muted);background-color:var(--surface-raised);padding-inline:var(--sp-2);position:absolute;top:-1.5em;left:50%;transform:translate(-50%)}.sn-states{justify-content:center;align-items:center;gap:var(--sp-3);margin-block:var(--sp-7);padding:var(--sp-6);background-color:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--rad-md);flex-wrap:wrap;display:flex}.sn-state{padding:var(--sp-2) var(--sp-4);border:2px solid var(--border-strong);border-radius:var(--rad-pill,999px);font-size:var(--size-2xs);color:var(--text-accent);background-color:var(--surface);font-weight:600}.sn-state--active{border-color:var(--success-border)}.sn-state--waiting{border-color:var(--warning-border)}.sn-state--closed{border-color:var(--danger-border)}.sn-state--initial{border-color:var(--info-border)}.sn-state__arrow{color:var(--text-subtle);font-size:var(--size-sm)}.sn-topo{justify-content:center;align-items:center;gap:var(--sp-4);margin-block:var(--sp-7);padding:var(--sp-7);background-color:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--rad-md);flex-wrap:wrap;display:flex}.sn-topo__node{align-items:center;gap:var(--sp-1);min-width:6rem;padding:var(--sp-3) var(--sp-4);text-align:center;background-color:var(--surface);border:2px solid var(--border-strong);border-radius:var(--rad-sm);flex-direction:column;display:flex}.sn-topo__icon{font-size:var(--size-lg);line-height:1}.sn-topo__label{font-size:var(--size-2xs);color:var(--text-accent);font-weight:600}.sn-topo__detail{font-size:var(--size-3xs);color:var(--text-subtle)}.sn-topo__link{color:var(--text-subtle);font-size:var(--size-md);padding-inline:var(--sp-1)}.sn-topo__node--router{border-color:var(--success-border)}.sn-topo__node--switch{border-color:var(--warning-border)}.sn-topo__node--host{border-color:var(--info-border)}.sn-topo__node--server{border-color:var(--border-strong)}.sn-topo__node--cloud{border-color:var(--info-border)}.sn-topo__node--firewall{border-color:var(--danger-border)}.sn-nest{margin-block:var(--sp-5);padding:var(--sp-5) var(--sp-4) var(--sp-4);border:2px solid var(--border-strong);border-radius:var(--rad-md);background-color:color-mix(in srgb, var(--surface-raised) 60%, transparent);position:relative}.sn-nest__label{top:calc(-.7em - 1px);left:var(--sp-4);padding-inline:var(--sp-2);font-size:var(--size-3xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-accent);background-color:var(--surface);font-weight:700;position:absolute}.sn-compare{margin-block:var(--sp-7)}.sn-compare__side{background-color:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--rad-md);overflow:hidden}.sn-compare__head{padding:var(--sp-2) var(--sp-4);font-size:var(--size-2xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-accent);background-color:var(--surface-sunken);border-block-end:1px solid var(--border-strong);font-weight:700}.sn-compare__head--good{color:var(--success);border-block-end-color:var(--success-border)}.sn-compare__head--bad{color:var(--danger);border-block-end-color:var(--danger-border)}.sn-compare__head--before{color:var(--warning);border-block-end-color:var(--warning-border)}.sn-compare__head--after{color:var(--success);border-block-end-color:var(--success-border)}.sn-compare__body{padding:var(--sp-4)}.sn-compare__body>:first-child{margin-block-start:0}.sn-compare__body>:last-child{margin-block-end:0}.sn-mapping{gap:var(--sp-4);margin-block:var(--sp-3);padding:var(--sp-3) var(--sp-4);background-color:var(--surface-raised);border:1px solid var(--border);border-radius:var(--rad-sm);font-size:var(--size-sm);grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.sn-mapping__arrow{color:var(--accent-nontext);font-weight:700}@media (width>=80rem){.sn-learn-layout.sn-container{max-width:var(--container-wide)}.sn-learn-layout .sn-with-rail{grid-template-columns:minmax(0,60rem) 15rem}}.sn-learn-layout .sn-prose{max-width:none}.sn-learn-layout .sn-prose>:is(p,ul,ol,dl,blockquote,h2,h3,h4,.sn-lead,.sn-callout){max-width:var(--measure-prose)}