/* IP addressing: bits and blocks inside diagrams, the bit converter, subnet calculator and IPv6 helper */
.motion-svg .ipv{font-size:14.5px;fill:var(--ink);text-anchor:middle}
.motion-svg .ipbig{font-size:22px;font-weight:700;fill:var(--ink);text-anchor:middle;font-family:var(--font-heading)}
.motion-svg .ipmono{font-family:var(--font-mono);font-size:16px;fill:var(--ink);white-space:pre}
.motion-svg .ipv.start,.motion-svg .ipbig.start,.motion-svg .ipmono.start{text-anchor:start}
.motion-svg .ipv.end,.motion-svg .ipbig.end{text-anchor:end}
.motion-svg .ipv.c{fill:var(--cyan-strong)}
.motion-svg .ipv.o{fill:var(--orange-strong)}
.motion-svg .ipv.p{fill:var(--purple-strong)}
.ipbit rect{fill:#fff;stroke:var(--line-strong);stroke-width:1.5}
.motion-svg .ipbit text{font-family:var(--font-mono);font-size:20px;font-weight:600;fill:var(--muted);text-anchor:middle}
.motion-svg .ipbit.small text{font-size:13px}
.ipbit.on rect{fill:#FFF7ED;stroke:var(--orange)}
.motion-svg .ipbit.on text{fill:var(--orange-strong)}
.ipbit.net rect,.ipbit.mask rect{fill:var(--cyan-tint);stroke:var(--cyan)}
.motion-svg .ipbit.net text,.motion-svg .ipbit.mask text{fill:var(--cyan-strong)}
.ipbit.host rect{fill:#FFF7ED;stroke:var(--orange)}
.motion-svg .ipbit.host text{fill:var(--orange-strong)}
.hero-art .ipbit.net rect{fill:rgba(6,182,212,.16);stroke:var(--cyan)}
.hero-art .ipbit.host rect{fill:rgba(249,115,22,.16);stroke:var(--orange)}
.hero-art .motion-svg .ipbit text,.hero-art .ipbit text{fill:#fff}
.ippin{stroke:#fff;stroke-width:2}
.ippin.orange{fill:var(--orange)}.ippin.teal{fill:var(--teal)}.ippin.slate{fill:var(--subtle)}.ippin.red{fill:#E11D48}.ippin.purple{fill:var(--purple)}
.ipblk{stroke-width:1.5}
.ipblk.a{fill:#fff;stroke:var(--line-strong)}
.ipblk.b{fill:var(--surface-2);stroke:var(--line-strong)}
.ipblk.hit{fill:#FFEDD5;stroke:var(--orange)}
.ip-h{font-size:var(--fs-h4);margin:34px 0 12px}
.ip-note{max-width:75ch;margin:16px 0 0;color:var(--muted);font-size:.95rem}
.ip-tool{margin-top:24px}
.ip-sub{color:var(--muted);margin:4px 0 16px;max-width:75ch}
.ip-form{display:grid;grid-template-columns:minmax(9rem,auto) minmax(10rem,20rem);gap:10px 16px;align-items:center;max-width:36rem}
.ip-form-inline{margin-top:16px}
.ip-form label{font-weight:600;color:var(--ink);font-size:.92rem}
.ip-form input,.ip-form select{font:inherit;font-size:.95rem;padding:.5rem .7rem;border:1px solid var(--line-strong);border-radius:.6rem;background:var(--surface);color:var(--ink);width:100%}
.ip-form input[type=text]{font-family:var(--font-mono)}
.ip-out{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:18px 0 0;padding:14px 16px;background:var(--surface-2);border-radius:12px}
.ip-out dt{color:var(--muted);font-size:.92rem}
.ip-out dd{margin:0;font-weight:700;color:var(--ink);font-family:var(--font-mono);font-size:.95rem;overflow-wrap:anywhere}
.ip-out-grid{grid-template-columns:auto 1fr auto 1fr}
.ip-msg{margin:10px 0 0;color:var(--orange-strong);font-size:.92rem;min-height:1em}
.ip-msg:empty{display:none}
.ip-chip{font:inherit;font-family:var(--font-mono);font-size:.8rem;padding:4px 10px;margin:4px 4px 0 0;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);cursor:pointer}
.ip-chip:hover,.ip-chip:focus-visible{border-color:var(--orange-border);color:var(--orange-strong)}
.ip-binary{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:16px;font-family:var(--font-mono);font-size:1rem;align-items:center;overflow-x:auto}
.ipb-lab{font-family:var(--font-body);font-size:.85rem;color:var(--muted)}
.ipb-row{letter-spacing:.06em;white-space:nowrap}
.ipb-oct{display:inline-block}
.ipb-n{color:var(--cyan-strong);background:var(--cyan-tint)}
.ipb-h{color:var(--orange-strong);background:#FFF7ED}
.ipb-mask{color:var(--muted)}
.ipb-dot{color:var(--subtle);padding:0 2px}
.ip-key{margin:10px 0 0;font-size:.85rem}
.ip-key span{padding:2px 8px;border-radius:6px;margin-right:6px}
.ip-bitrow{display:flex;flex-wrap:wrap;gap:8px}
.ip-bitcell{display:flex;flex-direction:column;align-items:center;gap:4px}
.ip-pv{font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}
.ip-bitrow button{font:inherit;font-family:var(--font-mono);font-size:1.25rem;font-weight:700;width:3rem;height:3rem;border-radius:10px;border:1.5px solid var(--line-strong);background:#fff;color:var(--muted);cursor:pointer}
.ip-bitrow button[aria-pressed="true"]{background:#FFF7ED;border-color:var(--orange);color:var(--orange-strong)}
.no-js .ip-bitrow button{cursor:default}
.ip-table table{font-variant-numeric:tabular-nums}
.ip-table td:nth-child(1),.ip-table td:nth-child(2),.ip-table td:nth-child(3){font-family:var(--font-mono);font-size:.9rem;white-space:nowrap}
.ip-table tr.ip-common td{background:#FFF7ED}
.ip-table tr.ip-common td:first-child{font-weight:700;color:var(--orange-strong)}
@media (max-width:760px){.ip-binary{grid-template-columns:1fr;gap:2px 0}.ipb-row{white-space:normal;line-height:1.7}.ipb-oct{white-space:nowrap}.ip-form{grid-template-columns:1fr}.ip-out,.ip-out-grid{grid-template-columns:1fr;gap:2px}.ip-out dd{margin-bottom:8px}.ip-bitrow{gap:4px;flex-wrap:nowrap}.ip-bitcell{flex:1 1 0;min-width:0}.ip-bitrow button{width:100%;height:2.6rem;font-size:1.05rem}.ip-binary{font-size:.8rem}}