:root {
  color-scheme: light dark;
  --background: #f8fafc;
  --panel: #ffffff;
  --foreground: #172033;
  --muted: #526077;
  --border: #cbd5e1;
}

* {
  box-sizing: border-box;
}

body {
  font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: clamp(0.75rem, 3vw, 2rem);
  color: var(--foreground);
  background: var(--background);
}

.mono {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.ip, .host, .user-agent {
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}

.ip {
  font-size: clamp(2.25rem, 12vw, 3.5rem);
  line-height: 1.1;
  margin: 0.25em 0;
}

.ip#ipv6 {
  color: var(--muted);
  font-size: clamp(1rem, 4.2vw, 2rem);
}

.user-agent {
  color: var(--muted);
  font-weight: normal;
}

.headers {
  margin: 2em auto;
  max-width: 600px;
  table-layout: fixed;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
}

.headers tr:not(:last-child) td {
  border-bottom: 1px solid var(--border);
}

.headers .key, .headers .value {
  vertical-align: top;
  padding: 0.5em;
}

.headers .key {
  width: 28%;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.headers .value {
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0f172a;
    --panel: #172033;
    --foreground: #f1f5f9;
    --muted: #cbd5e1;
    --border: #334155;
  }
}