.cl{display:flex;flex-direction:column;gap:20px}.cl__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}.cl__inputs{gap:24px;padding:24px}.cl__mono{font-family:var(--font-mono);font-size:var(--text-lg,18px)}.cl__result{display:flex;flex-direction:column;gap:16px;min-width:0;position:sticky;top:80px;transition:opacity .16s ease}.is-stale{opacity:.45}.cl__lower{display:flex;flex-direction:column;gap:20px;transition:opacity .16s ease}.cl__hint{font-size:11px;color:var(--fg-faint)}.cl__note{font-size:var(--text-sm);line-height:1.6;color:var(--fg-muted)}.cl__hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px 28px;align-items:end;padding:4px 2px 8px}.cl__big{display:flex;flex-direction:column;gap:4px;min-width:0;container-type:inline-size}.cl__biglabel{font-size:var(--text-xs);color:var(--fg-faint)}.cl__bigvalue{font-family:var(--font-mono);font-size:clamp(14px,calc(100cqi / (var(--chars, 12) * .66)),44px);font-weight:700;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fg)}.cl__big:first-child .cl__bigvalue{color:var(--accent-fg)}.cl__bigsub{font-size:var(--text-xs);color:var(--fg-muted);font-variant-numeric:tabular-nums}.cl__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.cl__meta>*{max-width:100%;white-space:normal}.cl__octets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.cl__octet{display:flex;flex-direction:column;gap:6px;min-width:0}.cl__octval{font-family:var(--font-mono);font-size:var(--text-lg,18px);font-weight:700;font-variant-numeric:tabular-nums;text-align:center}.cl__cells{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}.cl__bit{display:grid;place-items:center;aspect-ratio:1;min-height:28px;padding:0;border-radius:6px;border:1px solid var(--line-strong);font-family:var(--font-mono);font-size:13px;font-weight:700;cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s var(--ease-spring,ease)}.cl__bit.is-net{background:var(--accent);border-color:transparent;color:var(--accent-ink)}.cl__bit.is-host{background:var(--surface-2);color:var(--fg-muted)}.cl__bit:hover{transform:translateY(-2px)}.cl__bit.is-edge{box-shadow:3px 0 0 -1px var(--bg),5px 0 0 -1px var(--accent-fg)}.cl__split{display:flex;gap:4px;margin-top:12px;font-size:var(--text-xs);font-weight:600;flex-wrap:wrap}.cl__splithost,.cl__splitnet{min-width:max-content;padding:6px 10px;border-radius:8px;white-space:nowrap;text-align:center;flex-basis:auto}.cl__splitnet{background:color-mix(in oklab,var(--accent) 22%,transparent);color:var(--accent-fg)}.cl__splithost{background:var(--surface-2);color:var(--fg-muted)}.cl__splithost:empty,.cl__splitnet:empty{display:none}.cl__range{display:flex;flex-direction:column;gap:8px;padding-top:26px}.cl__bar{position:relative;display:flex;gap:3px;height:46px}.cl__seg{display:grid;place-items:center;border-radius:8px;font-size:var(--text-xs);font-weight:600;white-space:nowrap;overflow:hidden}.cl__seg--res{flex:0 0 5%;background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 4px,var(--line-strong) 4px,var(--line-strong) 5px)}.cl__seg--use{flex:1 1 0;background:color-mix(in oklab,var(--accent) 26%,var(--surface));color:var(--fg);padding-inline:8px;text-overflow:ellipsis}.cl__pin{position:absolute;top:-26px;bottom:0;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);pointer-events:none;font-size:10px;font-weight:700;color:var(--accent-fg);white-space:nowrap}.cl__pin--start{transform:none;align-items:flex-start}.cl__pin--end{transform:translateX(-100%);align-items:flex-end}[dir=rtl] .cl__pin--end{transform:translateX(100%)}.cl__pin i{flex:1;width:2px;margin-top:2px;background:var(--accent-fg);border-radius:2px}.cl__ends{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:12px;color:var(--fg-muted)}.cl__details,.cl__table{display:flex;flex-direction:column}.cl__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.cl__tr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 24px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.cl__tr--head{border-top:0;padding-top:0;font-size:var(--text-xs);color:var(--fg-faint);font-weight:600}.cl__cell{display:flex;flex-direction:column;gap:2px;min-width:0}.cl__label{font-size:var(--text-xs);color:var(--fg-muted)}.cl__val{display:flex;align-items:center;gap:4px;font-size:var(--text-lg,18px);font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.cl__bin,.cl__val{font-family:var(--font-mono)}.cl__bin{display:inline-flex;flex-wrap:wrap;gap:0 8px;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.02em}.cl__oct{white-space:nowrap}.cl__net{color:var(--accent-fg);font-weight:700}.cl__host{color:var(--fg-faint)}.cl__splitsel{max-width:420px;margin-bottom:14px}.cl__tablewrap{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}.cl__list{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}.cl__list th{position:sticky;top:0;z-index:1;text-align:start;padding:8px 12px;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;color:var(--fg-muted);background:var(--surface-2)}.cl__list td{padding:8px 12px;border-top:1px solid var(--line);white-space:nowrap}.cl__cidr{display:flex;align-items:center;gap:8px}.cl__list td:last-child,.cl__list th:last-child{text-align:end}.cl__list tr.is-here td{background:var(--accent-soft)}@media (max-width:960px){.cl__grid{grid-template-columns:minmax(0,1fr)}.cl__result{position:static}.cl__octets{grid-template-columns:minmax(0,1fr);gap:10px}.cl__bit{min-height:44px;aspect-ratio:auto}}@media (max-width:720px){.cl__tr{grid-template-columns:minmax(0,1fr)}.cl__tr--head{display:none}.cl__hero{grid-template-columns:minmax(0,1fr)}.cl__list td,.cl__list th{padding:8px}}@media (max-width:520px){.cl__inputs{padding:16px}}@media (pointer:coarse) and (max-width:520px){.cl__cells{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.cl__bit{border-radius:0}}