:root{--primary:oklch(92.51% .0071 88.65);--secondary:oklch(87.09% .0159 86.43);--text:oklch(20.42% .0076 48.33);--subtle:oklch(50.53% .0201 248.23);--accent:oklch(64.65% .1874 39.11)}@media (prefers-color-scheme:dark){:root{--primary:oklch(20.42% .0076 48.33);--secondary:oklch(37.68% .0193 54.46);--text:oklch(92.51% .0071 88.65);--subtle:oklch(62.35% .0115 67.62);--accent:oklch(59.48% .1687 45.48)}}*{box-sizing:border-box}html,body{background:var(--primary);color:var(--text);font:16px/1.5;margin:0;font-family:ui-monospace,monospace}main{max-width:32rem;margin:0 auto;padding:4rem 1.25rem 6rem}h1{letter-spacing:-.01em;margin:0 0 1.5rem;font-size:1.25rem;font-weight:600}input{width:100%;font:inherit;background:var(--secondary);color:var(--text);border:1px solid var(--secondary);outline:none;padding:.65rem .85rem}input.invalid{border-color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}dl{grid-template-columns:max-content 1fr;gap:1rem 1.5rem;margin:2rem 0 0;font-size:.9375rem;display:grid}dt{color:var(--subtle);margin:0}dd{color:var(--text);word-break:break-all;margin:0}#viz{flex-wrap:wrap;gap:.5rem;margin-top:2rem;font-size:.8125rem;line-height:1;display:flex}#viz .octet{gap:1px;display:inline-flex}#viz .bit{text-align:center;width:.9ch}#viz .bit.network{color:var(--accent)}#viz .bit.host{color:var(--subtle)}