:root{--navy:#06151e;--teal:#2fd7c3;--gold:#c5a36a;--cream:#f4f1ea;--ink:#132a32;--muted:#607078;--line:#d9dedb}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Tahoma,Arial,sans-serif}header{height:70px;background:var(--navy);color:#fff;padding:0 clamp(18px,4vw,60px);display:flex;align-items:center;justify-content:space-between}header a{color:#b9c9ce;text-decoration:none;font-size:12px}header b{text-align:center}header small{display:block;color:var(--gold);font:8px Arial}header button,.tools button,.tools select{border:1px solid #38515b;background:#102a34;color:#fff;padding:9px 13px;font:inherit;cursor:pointer}.tools{display:flex;justify-content:space-between;gap:12px;padding:14px clamp(15px,3vw,35px);background:#0b202a}.tools>div{display:flex;gap:8px}.workspace{height:calc(100vh - 180px);min-height:590px;display:grid;grid-template-columns:1fr 290px}.workspace aside{background:#fff;border-right:1px solid var(--line);padding:26px}.workspace aside>span{color:#168d80;font-size:12px;font-weight:800}.workspace h2{font-size:26px}.workspace dl div{border-bottom:1px solid var(--line);padding:12px 0}.workspace dt{color:var(--muted);font-size:11px}.workspace dd{margin:5px 0 0;font-weight:800}.workspace #viewport{overflow:hidden;position:relative;background-color:#e7ebe8;background-image:linear-gradient(#cfd7d4 1px,transparent 1px),linear-gradient(90deg,#cfd7d4 1px,transparent 1px);background-size:28px 28px;cursor:grab}.workspace #viewport:active{cursor:grabbing}#canvas,#links{position:absolute;width:1500px;height:900px;transform-origin:0 0}#links{overflow:visible;pointer-events:none}.device{position:absolute;width:150px;min-height:92px;background:#fff;border:1px solid #bcc9c5;padding:13px;box-shadow:0 12px 28px #15333e16;cursor:move;user-select:none}.device.selected{border-color:#138e80;box-shadow:0 0 0 2px #2fd7c355,0 14px 30px #15333e25}.device i{font-style:normal;font-size:24px}.device b,.device small{display:block}.device b{margin-top:6px}.device small{color:var(--muted);font-size:9px;margin-top:4px}.device .port{position:absolute;width:9px;height:9px;border-radius:50%;background:#159889;left:-5px;top:50%}.legend{min-height:40px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;background:#fff;border-top:1px solid var(--line);font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:24px;height:3px}.ethernet{background:#527079}.poe{background:#168d80}.wifi{background:#c59e5e}.thread{background:#7959c7}.zigbee{background:#3d9f64}@media(max-width:800px){header b{font-size:14px}.workspace{grid-template-columns:1fr;height:auto}.workspace #viewport{height:620px}.workspace aside{border:0;border-top:1px solid var(--line)}.tools{flex-direction:column}.tools>div{flex-wrap:wrap}.legend{padding:10px}}