:root {
  --shrink-bg: #020708;
  --shrink-panel: #041014;
  --shrink-panel-2: #06171b;
  --shrink-line: rgba(80, 221, 234, 0.28);
  --shrink-line-soft: rgba(80, 221, 234, 0.12);
  --shrink-cyan: #77f3ff;
  --shrink-cyan-soft: rgba(119, 243, 255, 0.68);
  --shrink-text: #d6f4f6;
  --shrink-muted: #789196;
  --shrink-amber: #d8ae61;
  --shrink-green: #75d98c;
}

body[data-observer-id="internet-shrinkage-index"] {
  background: var(--shrink-bg);
}

.shrink-page {
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding-top: 34px;
}

.shrink-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.shrink-compact-title {
  margin: 0 0 12px;
  color: var(--shrink-cyan);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .34em;
}

.shrink-back,
.shrink-language a,
.shrink-source-link {
  color: var(--shrink-cyan);
  text-decoration: none;
}

.shrink-back {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--shrink-line);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.shrink-back:hover,
.shrink-language a:hover,
.shrink-source-link:hover {
  color: #fff;
  border-color: var(--shrink-cyan);
}

.shrink-language {
  display: flex;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--shrink-line);
  padding: 8px 10px;
  color: var(--shrink-muted);
  font-size: 10px;
  letter-spacing: .16em;
}

.shrink-language a[aria-current="page"] {
  color: #fff;
}

.shrink-loading {
  margin: 26px 0;
  padding: 16px 18px;
  border-left: 2px solid var(--shrink-cyan);
  color: var(--shrink-muted);
}

.shrink-shell {
  display: grid;
  gap: 22px;
}

.shrink-section {
  border: 1px solid var(--shrink-line);
  background: linear-gradient(180deg, rgba(6, 23, 27, .78), rgba(2, 8, 10, .94));
}

.shrink-section-inner {
  padding: 28px;
}

.shrink-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.shrink-section-head h2 {
  margin: 5px 0 0;
  color: var(--shrink-text);
  font-size: clamp(22px, 3vw, 31px);
  font-weight: 400;
  letter-spacing: .04em;
}

.shrink-section-head > p {
  max-width: 390px;
  margin: 0;
  color: var(--shrink-muted);
  font-size: 11px;
  line-height: 1.55;
  text-align: right;
}

.shrink-section-index {
  color: var(--shrink-cyan);
  font-size: 10px;
  letter-spacing: .18em;
}

.shrink-current-grid {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 18px;
}

.shrink-readout,
.shrink-aperture-panel,
.shrink-history-panel,
.shrink-history-stats > div,
.shrink-evidence-card,
.shrink-method-block {
  border: 1px solid var(--shrink-line-soft);
  background: rgba(1, 9, 11, .72);
}

.shrink-readout {
  padding: 18px;
}

.shrink-score-block {
  text-align: center;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--shrink-line-soft);
}

.shrink-score-block span,
.shrink-readout-meta span,
.shrink-console-head,
.shrink-metric-path > span,
.shrink-country-band > span,
.shrink-history-range,
.shrink-history-legend,
.shrink-history-stats span,
.shrink-break-note > span {
  color: var(--shrink-muted);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.shrink-score-block strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--shrink-text);
  font-size: clamp(52px, 7vw, 86px);
  line-height: .95;
  font-weight: 400;
  text-shadow: 0 0 20px rgba(119, 243, 255, .16);
}

.shrink-score-block small,
.shrink-country-band small,
.shrink-history-caption {
  color: var(--shrink-muted);
  font-size: 10px;
}

.shrink-readout-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--shrink-line-soft);
}

.shrink-readout-meta div {
  min-width: 0;
}

.shrink-readout-meta strong {
  display: block;
  margin-top: 7px;
  color: var(--shrink-cyan);
  font-size: 18px;
  font-weight: 400;
}

.shrink-updated {
  margin: 16px 0 0;
  color: #aec6ca;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.shrink-aperture-panel {
  padding: 16px;
}

.shrink-console-head {
  display: flex;
  justify-content: space-between;
  padding: 0 4px 10px;
  color: var(--shrink-muted);
}

.shrink-console-head span:last-child {
  color: var(--shrink-amber);
}

.shrink-aperture {
  --compression: 0%;
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--shrink-line-soft);
  background:
    linear-gradient(90deg, rgba(119, 243, 255, .025) 1px, transparent 1px),
    linear-gradient(rgba(119, 243, 255, .025) 1px, transparent 1px),
    #020a0c;
  background-size: 42px 42px;
}

.shrink-grid-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(119,243,255,.13) 50%, transparent 50.2%),
    linear-gradient(180deg, transparent 49.8%, rgba(119,243,255,.08) 50%, transparent 50.2%);
  pointer-events: none;
}

.shrink-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--compression);
  background:
    repeating-linear-gradient(135deg, rgba(216, 174, 97, .08) 0 8px, rgba(216, 174, 97, .015) 8px 16px),
    linear-gradient(180deg, rgba(216, 174, 97, .1), rgba(216, 174, 97, .035));
  border-color: rgba(216, 174, 97, .38);
  transition: width 700ms ease;
}

.shrink-mask-left {
  left: 0;
  border-right: 1px solid rgba(216, 174, 97, .48);
}

.shrink-mask-right {
  right: 0;
  border-left: 1px solid rgba(216, 174, 97, .48);
}

.shrink-aperture-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  min-width: 180px;
  text-align: center;
}

.shrink-aperture-core span,
.shrink-aperture-core small {
  display: block;
  color: var(--shrink-muted);
  font-size: 9px;
  letter-spacing: .1em;
}

.shrink-aperture-core strong {
  display: block;
  margin: 8px 0 10px;
  color: var(--shrink-cyan);
  font-size: 38px;
  font-weight: 400;
}

.shrink-aperture-axis {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  color: var(--shrink-muted);
  font-size: 9px;
}

.shrink-metric-path,
.shrink-country-band {
  display: grid;
  grid-template-columns: 130px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 4px 0;
}

.shrink-metric-path code {
  color: var(--shrink-cyan-soft);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.shrink-country-band {
  grid-template-columns: 130px auto minmax(0,1fr);
  padding-top: 10px;
}

.shrink-country-dots {
  display: flex;
  gap: 5px;
}

.shrink-country-dots i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--shrink-line);
  background: rgba(119,243,255,.14);
  box-shadow: 0 0 8px rgba(119,243,255,.12);
}

.shrink-history-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 16px;
}

.shrink-history-panel {
  padding: 16px;
}

.shrink-history-range {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.shrink-history-field {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 180px;
  padding: 12px 8px 8px;
  border: 1px solid var(--shrink-line-soft);
  background: linear-gradient(180deg, rgba(119,243,255,.018), transparent);
  overflow: hidden;
}

.shrink-history-bar {
  flex: 1 1 0;
  min-width: 2px;
  height: max(4px, var(--bar-height));
  background: rgba(119,243,255,.52);
  border-top: 1px solid rgba(119,243,255,.9);
}

.shrink-history-bar.is-legacy {
  height: 100%;
  background: repeating-linear-gradient(135deg, rgba(216,174,97,.62) 0 3px, rgba(216,174,97,.08) 3px 6px);
  border-top-color: var(--shrink-amber);
}

.shrink-history-bar.is-break {
  margin-left: 6px;
  border-left: 1px solid rgba(216,174,97,.8);
}

.shrink-history-bar[data-status="unavailable"] {
  opacity: .42;
}

.shrink-history-legend {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 10px;
}

.shrink-history-legend .is-legacy { color: var(--shrink-amber); }
.shrink-history-legend .is-current { color: var(--shrink-cyan); }

.shrink-history-caption,
.shrink-history-summary {
  line-height: 1.55;
}

.shrink-history-summary {
  margin: 16px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--shrink-cyan);
  color: #b6cdd0;
  font-size: 11px;
}

.shrink-history-stats {
  display: grid;
  gap: 8px;
}

.shrink-history-stats > div {
  padding: 11px 12px;
  text-align: center;
}

.shrink-history-stats strong {
  display: block;
  margin-top: 4px;
  color: var(--shrink-text);
  font-size: 20px;
  font-weight: 400;
}

.shrink-break-note {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 2px solid var(--shrink-amber);
  background: rgba(216,174,97,.04);
}

.shrink-break-note p {
  margin: 0;
  color: #c8b78f;
  font-size: 11px;
  line-height: 1.55;
}

.shrink-archive {
  margin-top: 16px;
  border-top: 1px solid var(--shrink-line-soft);
  padding-top: 12px;
}

.shrink-archive summary {
  color: var(--shrink-cyan);
  cursor: pointer;
  font-size: 10px;
  text-align: center;
}

.shrink-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

.shrink-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.shrink-history-table th,
.shrink-history-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--shrink-line-soft);
  text-align: left;
}

.shrink-history-table th {
  color: var(--shrink-muted);
  font-weight: 400;
}

.shrink-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.shrink-evidence-card {
  padding: 18px;
}

.shrink-evidence-card h2,
.shrink-method-block h2 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .08em;
}

.shrink-evidence-card[data-kind="observed"] h2 { color: var(--shrink-cyan); }
.shrink-evidence-card[data-kind="derived"] h2 { color: var(--shrink-green); }
.shrink-evidence-card[data-kind="unknown"] h2 { color: var(--shrink-amber); }

.shrink-evidence-card ul,
.shrink-method-block ul {
  margin: 0;
  padding-left: 18px;
}

.shrink-evidence-card li,
.shrink-method-block p,
.shrink-method-block li {
  color: #a9bec2;
  font-size: 11px;
  line-height: 1.6;
}

.shrink-method-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}

.shrink-method-block {
  padding: 18px;
}

.shrink-method-block h2 { color: var(--shrink-text); }
.shrink-method-block code { color: var(--shrink-cyan-soft); }

.shrink-footer-terminal {
  margin-top: 34px;
}

@media (max-width: 820px) {
  .shrink-current-grid,
  .shrink-history-grid,
  .shrink-method-grid {
    grid-template-columns: 1fr;
  }

  .shrink-evidence-grid {
    grid-template-columns: 1fr;
  }

  .shrink-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .shrink-section-head > p {
    max-width: none;
    text-align: left;
  }

  .shrink-readout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: center;
  }

  .shrink-updated {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .shrink-page {
    width: min(100% - 20px, 1160px);
    padding-top: 20px;
  }

  .shrink-topbar {
    gap: 14px;
  }

  .shrink-compact-title {
    font-size: 11px;
    letter-spacing: .22em;
  }

  .shrink-section-inner {
    padding: 18px 14px;
  }

  .shrink-readout {
    display: block;
  }

  .shrink-aperture {
    min-height: 230px;
  }

  .shrink-metric-path,
  .shrink-country-band,
  .shrink-break-note {
    grid-template-columns: 1fr;
  }

  .shrink-country-band {
    gap: 7px;
  }

  .shrink-history-field {
    min-height: 150px;
  }

  .shrink-history-legend {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shrink-mask {
    transition: none;
  }
}
