:root{--device-cyan:#67d2d5;--device-purple:#8c72ea;--device-coral:#ff716b;--device-green:#83dcb9}
.device-page{overflow-x:hidden}.device-shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}.device-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,8vw,110px);align-items:center;padding:clamp(70px,9vw,125px) 0}.device-kicker{display:block;margin-bottom:17px;color:#657580;font-size:11px;font-weight:750;letter-spacing:.21em}.device-hero h1{margin:0;color:var(--ink);font:700 clamp(48px,7vw,92px)/.92 var(--display,system-ui);letter-spacing:-.055em}.device-hero h1 em{color:var(--device-cyan);font-style:normal}.device-hero p{max-width:650px;margin:27px 0 0;color:var(--muted);font-size:clamp(17px,2vw,21px);line-height:1.7}.device-hero-visual{position:relative;min-height:390px;border:1px solid var(--line);border-radius:48px 24px 60px 32px;background:radial-gradient(circle at 30% 25%,rgba(103,210,213,.2),transparent 30%),var(--paper-2);overflow:hidden}.device-hero-visual:before,.device-hero-visual:after{content:'';position:absolute;left:12%;right:12%;height:1px;background:var(--line)}.device-hero-visual:before{top:34%}.device-hero-visual:after{bottom:34%}.hero-device{position:absolute;display:grid;place-items:center;width:110px;height:82px;padding:12px;border:1px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);font-weight:700;text-align:center}.hero-device small{display:block;color:var(--muted);font-size:9px}.hero-device.internet{left:calc(50% - 55px);top:28px}.hero-device.router{left:calc(50% - 55px);top:154px;border-color:var(--device-cyan)}.hero-device.switch{left:34px;bottom:28px}.hero-device.ap{right:34px;bottom:28px}.hero-line{position:absolute;left:50%;top:110px;bottom:100px;width:2px;background:linear-gradient(var(--device-cyan),var(--device-purple))}
.device-section{padding:clamp(72px,9vw,120px) 0;border-top:1px solid var(--line)}.device-section.alt{background:var(--paper-2)}.device-section-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,7vw,90px);align-items:end;margin-bottom:42px}.device-section-head h2{margin:0;color:var(--ink);font:700 clamp(36px,5vw,66px)/1 var(--display,system-ui);letter-spacing:-.045em}.device-section-head h2 em{color:var(--device-purple);font-style:normal}.device-section-head p{margin:0;color:var(--muted);font-size:18px;line-height:1.7}
.builder{overflow:hidden;background:linear-gradient(145deg,#071827,#06111e 72%,#0a2130);color:#edf7f8;border:1px solid #2b495e;border-radius:34px 50px 38px 56px;box-shadow:0 32px 90px rgba(3,19,32,.18)}.builder-head{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;padding:38px 42px;border-bottom:1px solid #29475b}.builder-head>div>span{display:block;margin-bottom:12px;color:var(--device-cyan);font:700 11px system-ui;letter-spacing:.18em}.builder-head h2{margin:0;font-size:clamp(27px,3vw,42px)}.builder-head p{margin:0;color:#a0b2be;line-height:1.65}.profile-buttons,.path-buttons{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.profile-buttons button,.path-buttons button,.network-device{min-height:44px;padding:10px 15px;color:#c4d1d9;background:#102638;border:1px solid #36556b;border-radius:999px;font:700 13px system-ui;cursor:pointer}.profile-buttons button.active,.path-buttons button.active{color:#09212b;background:var(--device-cyan);border-color:var(--device-cyan)}.builder-config{display:grid;grid-template-columns:.7fr 1.3fr}.role-toggles{padding:36px 38px;background:rgba(4,16,27,.42);border-right:1px solid #29475b}.role-toggles h3{margin:0 0 18px}.role-toggles label{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #213d51;color:#c7d4da}.role-toggles input{width:19px;height:19px;accent-color:var(--device-cyan)}.role-toggles small{display:block;margin-top:20px;color:#849aa7;line-height:1.55}.network-canvas{min-width:0;padding:36px 38px}.network-path{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;align-items:center}.network-device{position:relative;min-width:0;min-height:104px;padding:14px 8px;border-radius:17px;text-align:center;opacity:.42;transition:.2s}.network-device:after{content:'→';position:absolute;right:-10px;top:42%;z-index:2;color:#547386}.network-device:last-child:after{display:none}.network-device b,.network-device small{display:block}.network-device b{font-size:12px}.network-device small{margin-top:7px;color:#8299a6;font-size:9px;line-height:1.35}.network-device.enabled{opacity:1}.network-device.selected{border-color:var(--device-purple);box-shadow:0 0 0 2px rgba(140,114,234,.2)}.network-device.in-path{opacity:1;color:#071822;background:var(--device-cyan);border-color:var(--device-cyan)}.network-device.in-path small{color:#31575f}.network-device.missing{opacity:.25;border-style:dashed}.builder-message{margin:24px 0 0;padding:17px 19px;color:#c7d7df;background:rgba(103,210,213,.07);border-left:3px solid var(--device-cyan);line-height:1.6}.builder-message.warn{border-color:#ffc56d;background:rgba(255,197,109,.07)}.builder-message.bad{border-color:var(--device-coral);background:rgba(255,113,107,.08)}.device-detail{display:grid;grid-template-columns:.65fr 1.35fr;gap:25px;margin-top:20px;padding:24px;border:1px solid #2f4d61;border-radius:20px;background:#091927}.device-detail span{color:#879da9;font-size:10px;letter-spacing:.14em}.device-detail h3{margin:10px 0 0;color:#f1f8f8;font-size:23px}.device-detail p{margin:0;color:#a2b4bd;line-height:1.6}.device-detail ul{margin:15px 0 0;padding-left:18px;color:#9eb0b9;line-height:1.7}
.role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.role-card{min-width:0;padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:24px 44px 27px 36px}.role-card:nth-child(2n){border-radius:43px 23px 39px 28px}.role-card>span{color:var(--device-purple);font:700 11px monospace;letter-spacing:.15em}.role-card h3{margin:16px 0 10px;color:var(--ink);font-size:23px}.role-card p{margin:0;color:var(--muted);line-height:1.65}.role-card code{display:inline-block;margin-top:16px;padding:7px 10px;border-radius:8px;background:rgba(140,114,234,.1);color:#6b55c4;white-space:normal}.combo-note{display:grid;grid-template-columns:.7fr 1.3fr;gap:50px;padding:42px;background:var(--paper);border:1px solid var(--line);border-radius:28px 48px 32px 56px}.combo-note h2{margin:0;color:var(--ink);font-size:clamp(30px,4vw,50px)}.combo-note p{margin:0;color:var(--muted);font-size:18px;line-height:1.7}.device-table{width:100%;border-collapse:collapse}.device-table th,.device-table td{padding:17px 13px;border-bottom:1px solid var(--line);text-align:left}.device-table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.device-table td{color:var(--ink);line-height:1.5}.device-table td:first-child{font-weight:700}.device-table-wrap{overflow-x:auto}.next-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.next-topics a{padding:27px;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:22px}.next-topics span{color:var(--device-cyan);font-size:11px;font-weight:700}.next-topics h3{margin:13px 0 8px;color:var(--ink)}.next-topics p{margin:0;color:var(--muted);line-height:1.55}
html[data-theme=dark] .device-hero-visual,html[data-theme=dark] .hero-device,html[data-theme=dark] .role-card,html[data-theme=dark] .combo-note,html[data-theme=dark] .next-topics a{background:#0b1b2b}html[data-theme=dark] .role-card code{color:#b6a6f4}
@media(max-width:950px){.device-hero,.device-section-head,.builder-head,.combo-note{grid-template-columns:1fr}.role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.builder-config{grid-template-columns:1fr}.role-toggles{border-right:0;border-bottom:1px solid #29475b}.network-path{grid-template-columns:1fr}.network-device{display:grid;grid-template-columns:1fr 2fr;align-items:center;min-height:65px;text-align:left}.network-device:after{content:'↓';right:50%;top:auto;bottom:-16px}.next-topics{grid-template-columns:1fr}}
@media(max-width:620px){.device-shell{width:min(100% - 28px,1180px)}.device-hero{padding-top:45px}.device-hero-visual{min-height:320px}.hero-device{width:94px;height:72px}.hero-device.internet,.hero-device.router{left:calc(50% - 47px)}.hero-device.switch{left:18px}.hero-device.ap{right:18px}.builder{border-radius:24px}.builder-head,.role-toggles,.network-canvas{padding:27px 20px}.profile-buttons{flex-wrap:nowrap;overflow-x:auto}.profile-buttons button{flex:0 0 auto}.device-detail{grid-template-columns:1fr}.role-grid{grid-template-columns:1fr}.combo-note{padding:27px 22px}.device-table{min-width:620px}}
@media(prefers-reduced-motion:reduce){.network-device{transition:none}}