.osi-page{--osi-cyan:#69d6d8;--osi-blue:#5ca6d8;--osi-violet:#8b79d8;--osi-coral:#ff7d72;--osi-green:#70d6aa}
.osi-hero{align-items:stretch}.osi-hero-stack{display:flex;min-height:390px;flex-direction:column;justify-content:center;padding:38px;border:1px solid var(--line);border-radius:48px 24px 58px 30px;background:radial-gradient(circle at 75% 18%,rgba(105,214,216,.24),transparent 32%),var(--paper-2);overflow:hidden}.osi-hero-stack i{display:grid;grid-template-columns:38px 1fr;align-items:center;min-height:42px;margin-top:-1px;padding:0 16px;border:1px solid color-mix(in srgb,var(--line) 75%,var(--osi-cyan));background:color-mix(in srgb,var(--paper) 88%,var(--osi-cyan));transform:translateX(var(--shift,0));font-style:normal}.osi-hero-stack i:first-child{border-radius:14px 14px 5px 5px}.osi-hero-stack i:last-child{border-radius:5px 5px 14px 14px}.osi-hero-stack i:nth-child(1){--shift:0}.osi-hero-stack i:nth-child(2){--shift:5px}.osi-hero-stack i:nth-child(3){--shift:10px}.osi-hero-stack i:nth-child(4){--shift:15px}.osi-hero-stack i:nth-child(5){--shift:20px}.osi-hero-stack i:nth-child(6){--shift:25px}.osi-hero-stack i:nth-child(7){--shift:30px}.osi-hero-stack span{color:#398b92;font:700 12px monospace}.osi-hero-stack b{color:var(--ink);font-size:14px;font-weight:750}
.osi-lab{overflow:hidden;border:1px solid #2d4d62;border-radius:30px 44px 32px 48px;background:linear-gradient(145deg,#091c2d,#06121f 72%);color:#edf7f7;box-shadow:0 30px 90px rgba(4,20,34,.2)}.osi-lab-head{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px 38px;border-bottom:1px solid #28465a}.osi-lab-head span{display:block;margin-bottom:9px;color:#6fd7d9;font:700 10px monospace;letter-spacing:.18em}.osi-lab-head h3{margin:0;font-size:clamp(21px,3vw,31px)}.osi-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.osi-controls button{padding:11px 14px;border:1px solid #35566b;border-radius:11px;background:#0e2638;color:#c0d0d7;font-weight:700;cursor:pointer}.osi-controls button.primary{border-color:var(--osi-cyan);background:var(--osi-cyan);color:#071821}.osi-controls button:focus-visible,.osi-layer:focus-visible{outline:3px solid #fff;outline-offset:3px}
.osi-map{position:relative;display:grid;grid-template-columns:minmax(190px,.82fr) minmax(250px,1.25fr) minmax(190px,.82fr);gap:30px;min-height:570px;padding:34px 38px 24px}.osi-side{display:grid;align-content:start;gap:7px}.osi-side-label{display:flex;justify-content:space-between;align-items:end;height:38px;margin-bottom:4px;color:#8aa1ae}.osi-side-label b{color:#eff8f8;font-size:14px}.osi-side-label span{font-size:10px;text-transform:uppercase;letter-spacing:.12em}.osi-layer{position:relative;display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;min-height:58px;padding:9px 12px;border:1px solid #29475c;border-radius:12px;background:#0b2031;color:#bfd0d7;text-align:left;cursor:pointer;transition:border-color .25s,background .25s,transform .25s,opacity .25s}.osi-layer:hover{transform:translateX(3px);border-color:#4b8293}.osi-side[data-osi-side=receiver] .osi-layer:hover{transform:translateX(-3px)}.osi-layer>i{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#142e40;color:#73d8da;font:700 11px monospace;font-style:normal}.osi-layer b,.osi-layer small{display:block}.osi-layer b{font-size:12px}.osi-layer small{margin-top:3px;color:#718d9d;font-size:9px}.osi-layer>em{color:#607e8e;font:700 9px monospace;font-style:normal}.osi-layer.selected{border-color:#5caab3;background:#102c3d}.osi-layer.current{border-color:var(--osi-cyan);background:#143746;box-shadow:0 0 0 2px rgba(105,214,216,.08),0 0 24px rgba(105,214,216,.12)}.osi-layer.current>i{background:var(--osi-cyan);color:#07202a}
.osi-center{position:relative;display:grid;align-content:start;justify-items:center;min-width:0;padding-top:52px}.osi-stage-label{min-height:20px;color:#85a5b3;font:700 10px monospace;letter-spacing:.1em;text-align:center;text-transform:uppercase}.osi-envelope{display:flex;min-height:94px;align-items:stretch;justify-content:center;width:100%;margin-top:16px;overflow:hidden;border:1px solid #31536a;border-radius:15px;background:#071522;box-shadow:0 16px 35px rgba(0,0,0,.18)}.osi-envelope i{display:grid;place-items:center;min-width:46px;padding:8px;border-right:1px solid rgba(255,255,255,.12);color:#071722;font:800 9px monospace;font-style:normal;text-align:center;animation:osiPartIn .28s ease both}.osi-envelope i:last-child{flex:1;border-right:0}.osi-envelope .part-data{background:#d9f3f2}.osi-envelope .part-tcp{background:#98dadd}.osi-envelope .part-ip{background:#82b9dd}.osi-envelope .part-eth{background:#a69bdd}.osi-envelope .part-bits{color:#d9faf9;background:#123646;letter-spacing:.12em}.osi-medium{position:absolute;left:5%;right:5%;bottom:66px;display:grid;place-items:center;height:80px;border-block:1px solid #28485b;color:#9db2bc}.osi-medium:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,#68d3d6 20% 80%,transparent)}.osi-medium i{position:relative;width:14px;height:14px;border:2px solid #6dd7da;border-radius:50%;background:#0b2132;box-shadow:0 0 20px rgba(105,214,216,.45)}.osi-medium span,.osi-medium small{position:relative;background:#071522;padding-inline:8px}.osi-medium span{margin-top:7px;color:#c7d7dc;font-size:11px}.osi-medium small{color:#668594;font-size:9px}.osi-moving-packet{position:absolute;z-index:8;display:flex;align-items:center;justify-content:center;width:52px;height:25px;border:1px solid #ff948b;border-radius:7px;background:linear-gradient(135deg,#ff8379,#e75e58);box-shadow:0 0 0 5px rgba(255,125,114,.08),0 0 24px rgba(255,125,114,.38);pointer-events:none;transition:left .48s cubic-bezier(.2,.75,.3,1),top .48s cubic-bezier(.2,.75,.3,1),background .25s,border-color .25s}.osi-moving-packet i{position:absolute;left:7px;width:13px;height:7px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 2px,transparent 2px 4px)}.osi-moving-packet span{margin-left:17px;color:#fff;font:800 7px monospace}.osi-moving-packet.protected{border-color:#70d8d9;background:linear-gradient(135deg,#74dcde,#35aab2);box-shadow:0 0 0 5px rgba(105,214,216,.08),0 0 24px rgba(105,214,216,.4)}
.osi-status{margin:0;padding:14px 38px;border-top:1px solid #27465a;border-bottom:1px solid #27465a;background:#0a1b29;color:#a9bec7;font-size:12px;line-height:1.55}.osi-detail{display:grid;grid-template-columns:1.15fr 1fr 1.2fr;gap:34px;padding:31px 38px}.osi-detail-title>span,.osi-examples>span{display:block;color:#70d7d9;font:700 9px monospace;letter-spacing:.16em}.osi-detail-title h3{margin:9px 0 10px;font-size:25px}.osi-detail-title p,.osi-examples p{margin:0;color:#9db1bb;font-size:12px;line-height:1.6}.osi-detail dl{display:grid;gap:10px;margin:0}.osi-detail dl div{padding-bottom:9px;border-bottom:1px solid #233f52}.osi-detail dt{color:#6f8d9d;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.osi-detail dd{margin:5px 0 0;color:#d8e6e9;font-size:12px}.osi-examples>div{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 14px}.osi-examples i{padding:6px 8px;border:1px solid #34556a;border-radius:8px;background:#0d2435;color:#b9d1d6;font:700 9px monospace;font-style:normal}
.osi-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:24px;background:var(--paper)}.osi-table{width:100%;border-collapse:collapse}.osi-table th,.osi-table td{padding:17px 18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px;text-align:left;vertical-align:top}.osi-table th{color:var(--ink);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.osi-table td:first-child{min-width:150px;color:var(--ink);font-weight:700}.osi-table td:first-child b{display:inline-grid;place-items:center;width:27px;height:27px;margin-right:7px;border-radius:8px;background:color-mix(in srgb,var(--paper-2) 80%,var(--osi-cyan));color:#3b8d93}.osi-table tr:last-child td{border-bottom:0}
.model-compare{display:grid;grid-template-columns:.9fr 70px .9fr 1.3fr;gap:20px;align-items:stretch}.model-column{display:grid;gap:7px}.model-column>span{margin-bottom:5px;color:#577581;font:700 10px monospace;letter-spacing:.15em}.model-column i{display:grid;place-items:center;min-height:60px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink);font-style:normal;text-align:center;line-height:1.55}.osi-model-column i:first-of-type{min-height:144px}.osi-model-column i:last-child{min-height:102px}.tcp-model-column i:first-of-type{min-height:144px}.tcp-model-column i:last-child{min-height:102px}.model-links{display:grid;grid-template-rows:144px 60px 60px 102px;gap:7px;padding-top:27px}.model-links i{position:relative}.model-links i:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,var(--line),var(--osi-cyan),var(--line))}.model-notes{display:grid;gap:7px;padding-top:27px}.model-notes p{min-height:60px;margin:0;padding:14px 16px;border-left:3px solid var(--osi-cyan);background:var(--paper);color:var(--muted);font-size:12px;line-height:1.55}.model-notes p:first-child{min-height:144px}.model-notes p:last-child{min-height:102px}.model-notes b{color:var(--ink)}
.osi-troubleshooting{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.osi-troubleshooting article{display:flex;min-height:220px;flex-direction:column;padding:23px;border:1px solid var(--line);border-radius:20px 34px 22px 28px;background:var(--paper-2)}.osi-troubleshooting span{color:#3e9299;font:700 11px monospace}.osi-troubleshooting b{margin-top:17px;color:var(--ink);line-height:1.35}.osi-troubleshooting p{color:var(--muted);font-size:13px;line-height:1.55}.osi-troubleshooting code{align-self:flex-start;margin-top:auto;padding:7px 9px;border-radius:8px;background:color-mix(in srgb,var(--paper) 78%,var(--osi-cyan));color:#327e85;font-size:11px}
html[data-theme=dark] .osi-hero-stack{background:radial-gradient(circle at 75% 18%,rgba(105,214,216,.16),transparent 32%),#0b1b2b}html[data-theme=dark] .osi-hero-stack i{background:#102536}html[data-theme=dark] .osi-table-wrap,html[data-theme=dark] .model-column i,html[data-theme=dark] .model-notes p{background:#0d2031}html[data-theme=dark] .osi-troubleshooting article{background:#102131}html[data-theme=dark] .osi-hero-stack b,html[data-theme=dark] .osi-table th,html[data-theme=dark] .osi-table td:first-child,html[data-theme=dark] .model-column i,html[data-theme=dark] .model-notes b,html[data-theme=dark] .osi-troubleshooting b{color:#f1f7f8}html[data-theme=dark] .osi-hero-stack span{color:#7edcdf}html[data-theme=dark] .osi-table td,html[data-theme=dark] .model-notes p,html[data-theme=dark] .osi-troubleshooting p{color:#b2c2ca}html[data-theme=dark] .model-column>span{color:#9bb1ba}html[data-theme=dark] .osi-troubleshooting span{color:#72d5d8}html[data-theme=dark] .osi-troubleshooting code{color:#8edfe1;background:#132f3a}
@keyframes osiPartIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media(max-width:980px){.osi-map{grid-template-columns:1fr .95fr 1fr;gap:16px;padding-inline:24px}.osi-layer{grid-template-columns:28px 1fr}.osi-layer>em{display:none}.osi-detail{grid-template-columns:1fr 1fr}.osi-examples{grid-column:1/-1}.model-compare{grid-template-columns:1fr 50px 1fr}.model-notes{grid-column:1/-1;grid-template-columns:repeat(2,1fr);padding-top:10px}.model-notes p,.model-notes p:first-child,.model-notes p:last-child{min-height:0}.osi-troubleshooting{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.osi-lab-head{display:grid;padding:26px 20px}.osi-controls{justify-content:flex-start}.osi-map{grid-template-columns:1fr;gap:24px;min-height:0;padding:28px 20px}.osi-center{grid-row:2;min-height:270px;padding-top:10px}.osi-side[data-osi-side=receiver]{grid-row:3}.osi-side{gap:6px}.osi-layer{min-height:52px}.osi-moving-packet{display:none}.osi-medium{bottom:25px}.osi-status{padding-inline:20px}.osi-detail{grid-template-columns:1fr;padding:26px 20px}.osi-examples{grid-column:auto}.model-compare{grid-template-columns:1fr 34px 1fr}.model-notes{grid-template-columns:1fr}.osi-troubleshooting{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.osi-hero-stack{min-height:330px;padding:24px 18px}.osi-hero-stack i{transform:none}.osi-controls{display:grid;grid-template-columns:1fr}.osi-controls button{width:100%}.osi-table th,.osi-table td{padding:14px 12px}.model-compare{grid-template-columns:1fr 24px 1fr;gap:8px}.model-column i{font-size:11px}.osi-troubleshooting{grid-template-columns:1fr}.osi-troubleshooting article{min-height:180px}}
@media(prefers-reduced-motion:reduce){.osi-moving-packet,.osi-layer,.osi-controls button{transition:none}.osi-envelope i{animation:none}}
.osi-hardware-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.osi-hardware-map article{display:flex;min-height:245px;flex-direction:column;padding:25px;border:1px solid var(--line);border-radius:22px 38px 24px 30px;background:var(--paper-2)}.osi-hardware-map article:nth-child(2n){border-radius:36px 22px 34px 24px}.osi-hardware-map span{color:#4b9299;font:700 10px monospace;letter-spacing:.12em}.osi-hardware-map h3{margin:18px 0 10px;color:var(--ink);font-size:20px;line-height:1.25}.osi-hardware-map p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.osi-hardware-map b{margin-top:auto;padding-top:18px;color:#3b8d93;font-size:11px}.osi-hardware-note{display:grid;grid-template-columns:190px 1fr;gap:28px;margin-top:16px;padding:24px 27px;border-left:4px solid var(--osi-cyan);background:color-mix(in srgb,var(--paper-2) 84%,var(--osi-cyan))}.osi-hardware-note>span{color:#478b92;font:700 10px monospace;letter-spacing:.13em}.osi-hardware-note p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.osi-hardware-note b{color:var(--ink)}html[data-theme=dark] .osi-hardware-map article{background:#102131}html[data-theme=dark] .osi-hardware-map h3,html[data-theme=dark] .osi-hardware-note b{color:#f1f7f8}html[data-theme=dark] .osi-hardware-map p,html[data-theme=dark] .osi-hardware-note p{color:#b2c2ca}html[data-theme=dark] .osi-hardware-map span,html[data-theme=dark] .osi-hardware-map b,html[data-theme=dark] .osi-hardware-note>span{color:#78d5d8}html[data-theme=dark] .osi-hardware-note{background:#102532}
@media(max-width:980px){.osi-hardware-map{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.osi-hardware-map{grid-template-columns:1fr}.osi-hardware-map article{min-height:205px}.osi-hardware-note{grid-template-columns:1fr;gap:10px}}