.ptcl-ipv4 {
  --ptcl-ipv4-ink: #152843;
  --ptcl-ipv4-muted: #51637b;
  --ptcl-ipv4-blue: #1262b5;
  --ptcl-ipv4-teal: #087f83;
  --ptcl-ipv4-border: #d8e3ef;
  box-sizing: border-box;
  max-width: 1030px;
  margin: 24px auto;
  padding: clamp(20px, 4vw, 38px);
  color: var(--ptcl-ipv4-ink);
  background: #ffffff;
  border: 1px solid var(--ptcl-ipv4-border);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(20, 47, 78, .065);
  font-family: inherit;
  line-height: 1.6;
}
.ptcl-ipv4 *, .ptcl-ipv4 *::before, .ptcl-ipv4 *::after { box-sizing: border-box; }
.ptcl-ipv4 [hidden] { display: none !important; }
.ptcl-ipv4__eyebrow { margin: 0 0 6px; color: var(--ptcl-ipv4-teal); font-size: .78rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.ptcl-ipv4__title { margin: 0 0 8px; color: var(--ptcl-ipv4-ink); font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.25; font-weight: 750; }
.ptcl-ipv4__lead { margin: 0 0 25px; color: var(--ptcl-ipv4-muted); max-width: 74ch; }
.ptcl-ipv4__form { padding: 19px; border: 1px solid var(--ptcl-ipv4-border); border-radius: 13px; background: #f7faff; }
.ptcl-ipv4__form label { display: block; font-size: .96rem; font-weight: 700; margin: 0 0 8px; }
.ptcl-ipv4__input-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ptcl-ipv4__input-row input { min-width: 195px; flex: 1 1 270px; padding: 12px 13px; border: 1px solid #9fb4cf; background: #fff; border-radius: 9px; color: #152843; font: 500 1rem/1.4 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; letter-spacing: -.015em; }
.ptcl-ipv4__input-row input:focus, .ptcl-ipv4 button:focus-visible { outline: 3px solid #81c5ec; outline-offset: 2px; }
.ptcl-ipv4__input-row input[aria-invalid='true'] { border-color: #b52433; }
.ptcl-ipv4__button, .ptcl-ipv4__copy { padding: 11px 20px; border: 1px solid var(--ptcl-ipv4-blue); border-radius: 9px; color: #fff; background: var(--ptcl-ipv4-blue); font-family: inherit; font-size: .96rem; font-weight: 700; line-height: 1.5; cursor: pointer; transition: background .14s ease, border-color .14s ease; }
.ptcl-ipv4__button:hover, .ptcl-ipv4__copy:hover { background: #094a90; border-color: #094a90; }
.ptcl-ipv4__help { margin: 10px 0 0; color: var(--ptcl-ipv4-muted); font-size: .82rem; }
.ptcl-ipv4 code { padding: 0; color: inherit; background: transparent; font-size: .94em; overflow-wrap: anywhere; }
.ptcl-ipv4__error { margin: 13px 0 0; padding: 10px 12px; color: #962334; background: #fff0f1; border-radius: 8px; border: 1px solid #f2bfc6; font-size: .92rem; }
.ptcl-ipv4__examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 2px 18px; }
.ptcl-ipv4__examples span { margin-right: 4px; color: var(--ptcl-ipv4-muted); font-size: .84rem; }
.ptcl-ipv4__examples button { padding: 6px 11px; border: 1px solid var(--ptcl-ipv4-border); border-radius: 18px; background: #fff; color: var(--ptcl-ipv4-blue); font-family: inherit; font-size: .8rem; font-weight: 600; line-height: 1.45; cursor: pointer; }
.ptcl-ipv4__examples button:hover { background: #edf5fd; }
.ptcl-ipv4__results { padding-top: 1px; }
.ptcl-ipv4__results-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 4px 0 15px; }
.ptcl-ipv4__results-header h3 { margin: 0 0 3px; font-size: 1.2rem; font-weight: 750; color: var(--ptcl-ipv4-ink); }
.ptcl-ipv4__results-header p { margin: 0; font-size: .85rem; color: var(--ptcl-ipv4-muted); }
.ptcl-ipv4__copy { padding: 8px 13px; background: #fff; color: var(--ptcl-ipv4-blue); }
.ptcl-ipv4__copy:hover { color: #fff; }
.ptcl-ipv4__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 0; }
.ptcl-ipv4__field { min-width: 0; margin: 0; padding: 13px 15px; background: #f9fbfd; border: 1px solid var(--ptcl-ipv4-border); border-radius: 10px; }
.ptcl-ipv4__field dt { margin: 0 0 4px; color: var(--ptcl-ipv4-muted); font-size: .75rem; font-weight: 650; line-height: 1.45; }
.ptcl-ipv4__field dd { margin: 0; color: var(--ptcl-ipv4-ink); font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: clamp(.9rem, 1.7vw, 1.12rem); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.ptcl-ipv4__field--primary { background: #edf7fe; border-color: #c8e0f5; }
.ptcl-ipv4__field--primary dd { color: #075d9a; font-size: clamp(1.02rem, 2vw, 1.35rem); }
.ptcl-ipv4__field--wide { grid-column: 1 / -1; }
.ptcl-ipv4__binary { margin-top: 14px; padding: 13px 15px; border-radius: 10px; color: #d9edf9; background: #172c47; }
.ptcl-ipv4__binary p { margin: 0 0 7px; color: #bed3e7; font-size: .77rem; font-weight: 650; }
.ptcl-ipv4__binary code { display: block; font-size: clamp(.68rem, 1.6vw, .94rem); letter-spacing: .035em; overflow-wrap: anywhere; }
.ptcl-ipv4__explanation { margin: 15px 0 6px; color: var(--ptcl-ipv4-muted); font-size: .88rem; }
.ptcl-ipv4__copy-status { min-height: 1.2em; margin: 4px 0 0; font-size: .82rem; color: #096d65; }
.ptcl-ipv4__footer { margin: 23px 0 0; padding-top: 16px; border-top: 1px solid var(--ptcl-ipv4-border); color: var(--ptcl-ipv4-muted); font-size: .86rem; }
.ptcl-ipv4__footer p { margin: 0 0 10px; }
.ptcl-ipv4__footer p:last-child { margin-bottom: 0; }
.ptcl-ipv4__footer strong { color: var(--ptcl-ipv4-ink); }
.ptcl-ipv4__noscript { color: #972c2e; }
@media (max-width: 600px) {
  .ptcl-ipv4 { margin: 12px auto; padding: 17px; border-radius: 12px; }
  .ptcl-ipv4__form { padding: 13px; }
  .ptcl-ipv4__input-row { flex-direction: column; }
  .ptcl-ipv4__input-row input { width: 100%; min-width: 0; flex: auto; }
  .ptcl-ipv4__button { width: 100%; }
  .ptcl-ipv4__grid { grid-template-columns: minmax(0, 1fr); }
  .ptcl-ipv4__results-header { align-items: flex-start; }
}