:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif;color:#f3f7f6;background:#10151c}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 12% 0%,#223f4a80,transparent 35%),#10151c}.response-demo{padding:clamp(14px,3vh,42px) 18px;min-height:100svh;align-items:center}.response-screen{height:100%;background:#f7f9fc;color:#172333;overflow:hidden}.phone-head{height:64px;padding:20px 28px 10px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:#1c2733}.response-scroll{height:calc(100% - 64px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:13px 19px 30px;outline-offset:-2px}.response-scroll::-webkit-scrollbar,.response-sidebar::-webkit-scrollbar{display:none}.response-brand{display:flex;align-items:center;gap:9px;color:#526176;font-size:10px;font-weight:700;letter-spacing:.04em}.brand-mark{background:#13212a;border-radius:11px;color:#c1f0e2;display:grid;place-items:center;width:28px;height:28px;font-size:18px}.brand-kind{margin-left:auto;color:#8a9aa9;font-size:8px}.response-scroll h1{font-size:25px;line-height:1.3;letter-spacing:-.7px;margin:19px 0 8px;color:#16212b}.response-intro,.scene>p{color:#647385;font-size:12px;line-height:1.8;margin:0 0 14px}.phone-switch{display:flex;gap:5px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:none}.phone-switch::-webkit-scrollbar{display:none}.phone-switch button{border:1px solid #d9e1eb;background:white;border-radius:20px;padding:7px 9px;white-space:nowrap;color:#516277;font-size:10px;font-weight:650;cursor:pointer}.phone-switch button.active{background:#182a33;color:#fff;border-color:#182a33}.scene{padding-bottom:18px}.scene[hidden]{display:none}.section-kicker{font-size:9px;font-weight:750;letter-spacing:1.2px;color:#1c9c83;margin:6px 0 10px}.scene h2{font-size:19px;line-height:1.4;letter-spacing:-.3px;margin:0 0 8px}.scene p code{background:#e9eef2;padding:1px 3px;border-radius:4px}.diagram-card{border:1px solid #e1e6ee;border-radius:18px;padding:16px 13px;background:#fff;box-shadow:0 10px 26px #172e4910;display:flex;align-items:center;flex-direction:column;gap:3px}.node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:11px 16px;border-radius:12px;text-align:center;width:100%;font-size:12px}.node strong{font-size:12px}.node small{font-size:10px;opacity:.77}.node-icon{font-size:17px}.node.neutral{background:#eff2f7;color:#35465c;width:80%}.node.blue{background:#e4f1ff;color:#1c65a7;width:80%}.node.amber{background:#fff3d9;color:#986b1d;width:80%}.node.green{background:#e5f8ef;color:#196e50}.node.violet{background:#f1eafb;color:#7950aa}.arrow{color:#74889b;font-size:19px;text-align:center;line-height:1.5}.arrow small{font-size:9px}.branches{width:75%;display:flex;justify-content:space-around;line-height:1.5;color:#738b9e;font-size:21px}.node-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.node-pair .node{padding:12px 7px}.diagram-foot{margin-top:12px;color:#8b98a7;font-size:10px}.takeaway{display:flex;gap:10px;background:#e8f5ef;border:1px solid #cfe9da;padding:13px;border-radius:13px;margin:13px 0;color:#276146;line-height:1.65}.takeaway strong{font-size:11px;white-space:nowrap}.takeaway span{font-size:11px}.code-panel{background:#182431;color:#d3e9ee;border-radius:14px;overflow:hidden;margin-top:13px}.code-head{padding:10px 13px;background:#233545;color:#8bd3d3;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;font-weight:700}.code-head span+span{color:#9baebb}.code-panel pre{overflow:auto;margin:0;padding:14px 12px;font-size:10px;line-height:1.7;white-space:pre;scrollbar-width:none}.compare-label{font-size:11px;font-weight:750;color:#46596b;margin:15px 0 7px}.diagram-card.compact{gap:2px}.diagram-card.compact .node{padding:10px;width:100%}.result-table{border-collapse:collapse;background:white;border-radius:12px;overflow:hidden;width:100%;margin-top:14px;font-size:10px}.result-table th,.result-table td{padding:9px 8px;text-align:left;border-bottom:1px solid #e8edf3}.result-table th{background:#eaf0f6;color:#385164}.result-table td:first-child{font-weight:700}.osi-stack{display:flex;flex-direction:column;gap:6px}.osi-layer{border:1px solid #e0e6ed;background:#f0f4f8;border-radius:10px;padding:9px;display:flex;align-items:center;gap:12px}.osi-layer>b{min-width:37px;height:35px;display:grid;place-items:center;background:#e1e8f1;color:#435e7c;border-radius:9px}.osi-layer span{display:flex;flex-direction:column;gap:3px;flex:1}.osi-layer strong{font-size:12px}.osi-layer small{font-size:9px;color:#6b7b8a}.osi-layer em{font-style:normal;font-size:9px;color:#748499}.osi-layer.tone-amber{background:#fff6e6;border-color:#f6dfb0}.osi-layer.tone-amber>b{background:#ffe8b7;color:#8e691d}.osi-layer.tone-green{background:#e9f8f0;border-color:#d1ecdc}.osi-layer.tone-green>b{background:#ccebd9;color:#2c7d5a}.osi-layer.tone-blue{background:#eaf2fe;border-color:#d0e3fa}.osi-layer.tone-blue>b{background:#cee3fa;color:#2769a9}.packet-step>span{font-size:10px;color:#58718a;font-weight:750;display:block;margin-bottom:7px}.packet-bar{display:flex;gap:2px;min-height:49px;overflow:hidden;border-radius:10px}.segment{display:flex;align-items:center;justify-content:center;padding:5px 2px;flex:1;font-style:normal;font-size:10px;font-weight:700;text-align:center}.segment.payload{background:#d9eaff;color:#246098;flex:2}.segment.tcp{background:#fff0cd;color:#916819}.segment.ip{background:#d9f2e3;color:#2a7752}.segment.eth{background:#ebdffa;color:#7653a9}.packet-down{font-size:10px;color:#8190a2;text-align:center;margin:12px 0}.response-end{font-size:9px;color:#9bacb9;text-align:center;padding:19px 0 6px}.scene.play-once>*:not(.section-kicker){animation:reveal .5s ease-out both}.scene.play-once>*:nth-child(2){animation-delay:.06s}.scene.play-once>*:nth-child(3){animation-delay:.12s}.scene.play-once>*:nth-child(4){animation-delay:.18s}.scene.interrupted *{animation:none!important;transition:none!important}@keyframes reveal{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}.response-sidebar{background:#1b252d;border:1px solid #ffffff1c;padding:27px;align-self:center;scrollbar-width:none;color:#f1f5f5}.detail-panel-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:19px}.back-link{font-size:12px;color:#82e1d4;text-decoration:none}.back-link:focus-visible,.case-tabs a:focus-visible,button:focus-visible{outline:2px solid #7de7d7;outline-offset:3px}.detail-panel-nav>span{font-size:11px;color:#91a6b0}.case-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:28px}.case-tabs a{color:#aebec4;text-decoration:none;border:1px solid #ffffff24;border-radius:11px;padding:10px;font-size:11px;font-weight:650}.case-tabs a.active{background:#69d2c219;color:#91f1da;border-color:#87e5d58c}.eyebrow{font-size:10px;color:#8ee2ce;letter-spacing:1.5px;font-weight:750;margin-bottom:12px}.response-sidebar h1{font-size:clamp(23px,2.2vw,34px);letter-spacing:-.7px;line-height:1.28;margin:0 0 12px}.lede,.detail-card p,.footer-note{font-size:13px;line-height:1.85;color:#a3b4bd}.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:24px 0}.note-grid>div{background:#ffffff0a;border:1px solid #ffffff13;border-radius:12px;padding:13px;display:flex;flex-direction:column;gap:8px}.note-grid span{font-size:10px;color:#92a3ad}.note-grid strong{font-size:12px}.detail-card{padding:17px 0;border-top:1px solid #ffffff1c}.detail-card h2{font-size:14px;margin:0 0 8px}.detail-card p{margin:0}.copy-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.copy-row button{font:inherit;border:1px solid #7adac65b;background:#24493f;color:#9de9d3;border-radius:12px;padding:12px 9px;font-weight:750;font-size:12px;cursor:pointer}.copy-row button:hover{background:#315a50}.skill-box label{display:block;font-size:12px;font-weight:750;margin-bottom:12px}.skill-box textarea{width:100%;color:#b9c9d0;background:#121b22;border:1px solid #35444e;border-radius:12px;padding:13px;font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-word;white-space:pre-wrap;resize:none}.footer-note{font-size:11px;margin:22px 0 0}@media(max-width:960px){.response-demo{align-items:start}.response-sidebar{height:auto;max-height:none}}@media(max-width:600px){.response-demo{padding:18px 12px;gap:25px}.response-sidebar{padding:20px}.response-scroll{padding:13px 16px 26px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

@media(min-width:961px){body{height:100svh;overflow:hidden}.response-demo{height:100svh;min-height:0;padding-top:0;padding-bottom:0}}