:root {
  color-scheme: light dark;
  --ink: #15263a;
  --muted: #52657b;
  --paper: #fff;
  --back: #f0f4f8;
  --border: #c7d3df;
  --action: #1658a1;
  font: 16px/1.5 Inter, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8f0fa;
    --muted: #acbcd0;
    --paper: #152334;
    --back: #0d1724;
    --border: #43566c;
    --action: #2066b4;
  }
}

body { margin: 0; color: var(--ink); background: var(--back); }
main { max-width: 42rem; margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem); }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
section { background: var(--paper); padding: clamp(1rem, 4vw, 1.5rem); margin: 1rem 0; border: 1px solid var(--border); border-radius: 0.75rem; }
h1, h2 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.15rem; margin-bottom: 0.9rem; }
.muted, dt { color: var(--muted); }
dl { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 1rem 0; }
dd { margin: 0; font-size: 1.3rem; font-weight: 650; }
progress { width: 100%; accent-color: var(--action); }
.stack { display: grid; gap: 0.75rem; }
label { display: grid; gap: 0.25rem; }
details label { margin-top: 0.75rem; }
summary { cursor: pointer; }
input, button { font: inherit; border: 1px solid var(--border); border-radius: 0.4rem; min-height: 2.75rem; box-sizing: border-box; padding: 0.35rem 0.65rem; }
input { min-width: 0; width: 100%; background: var(--back); color: var(--ink); }
button { justify-self: start; color: #fff; background: var(--action); border-color: var(--action); cursor: pointer; }
button.secondary { background: var(--paper); color: var(--ink); border-color: var(--border); }
.copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem; }
#copy-status:empty { display: none; }