:root {
  color-scheme: light dark;
  --page: #efefeb;
  --surface: #ffffff;
  --face: #d9d9d4;
  --face-soft: #e8e8e4;
  --highlight: #ffffff;
  --border: #8a8a86;
  --shadow: #666662;
  --deep-shadow: #353532;
  --field: #ffffff;
  --text: #181816;
  --muted: #52524e;
  --link: #0000cc;
  --visited: #551a8b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #41413f;
    --surface: #383836;
    --face: #555552;
    --face-soft: #494947;
    --highlight: #9a9a96;
    --border: #70706d;
    --shadow: #2c2c2a;
    --deep-shadow: #1d1d1b;
    --field: #30302e;
    --text: #f0f0ec;
    --muted: #d0d0ca;
    --link: #83b8ff;
    --visited: #d4b4ff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1rem;
  background: var(--page);
  color: var(--text);
  font: 1rem/1.6 Tahoma, Verdana, Arial, sans-serif;
}

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--visited); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

::selection { color: var(--surface); background: var(--text); }

.site-frame {
  max-width: 60rem;
  margin: 0 auto;
  background: var(--surface);
  border: 2px solid;
  border-color: var(--highlight) var(--deep-shadow) var(--deep-shadow) var(--highlight);
  box-shadow: 1px 1px 0 var(--shadow);
}

.site-header, .site-footer {
  padding: 0.6rem 1.25rem;
  background: var(--face);
}

.site-header { border-bottom: 2px solid var(--shadow); }
.site-header p, .site-footer p { margin: 0; }
.site-header p { font-weight: bold; }
.site-footer { border-top: 1px solid var(--border); }
.site-footer p { color: var(--muted); }

main { padding: 1.25rem; }
h1 { margin: 0 0 0.35rem; font-size: 1.75rem; line-height: 1.3; }
h2 { font-size: 1.15rem; line-height: 1.4; }
p { margin: 0 0 1rem; }
.intro { margin-bottom: 1.5rem; }
.breadcrumb { margin-bottom: 1rem; overflow-wrap: anywhere; }
.breadcrumb a { display: inline-block; min-height: 1.5rem; }

.section-bar {
  margin: 0;
  padding: 0.4rem 0.65rem;
  background: var(--face);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--shadow);
}

.directory { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); border-top: 0; }
.directory li { padding: 0.75rem; border-bottom: 1px dotted var(--border); }
.directory li:last-child { border-bottom: 0; }
.directory a { display: inline-block; min-height: 2rem; font-weight: bold; }
.directory p { margin: 0; }

.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 1;
  padding: 0.4rem 0.75rem;
  background: var(--surface);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

button, input, textarea { font: inherit; }
button {
  min-height: 2.5rem;
  padding: 0.35rem 0.75rem;
  color: var(--text);
  background: var(--face);
  border: 2px solid;
  border-color: var(--highlight) var(--deep-shadow) var(--deep-shadow) var(--highlight);
  border-radius: 0;
  box-shadow: 1px 1px 0 var(--shadow);
  font-weight: bold;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--face-soft); }
button:active:not(:disabled) {
  border-color: var(--deep-shadow) var(--highlight) var(--highlight) var(--deep-shadow);
  box-shadow: inset 1px 1px 0 var(--shadow);
}
button:disabled { color: var(--muted); cursor: not-allowed; box-shadow: none; }

textarea {
  display: block;
  width: 100%;
  min-height: 12rem;
  padding: 0.6rem;
  resize: vertical;
  color: var(--text);
  background: var(--field);
  border: 2px solid;
  border-color: var(--shadow) var(--highlight) var(--highlight) var(--shadow);
  border-radius: 0;
  font-family: Consolas, "Courier New", monospace;
  line-height: 1.5;
}
textarea[aria-invalid="true"] { outline: 2px dashed var(--text); outline-offset: 2px; }
label { display: block; }
fieldset { min-width: 0; margin: 0 0 1rem; padding: 0.75rem; border: 1px solid var(--border); }
legend { padding: 0 0.35rem; font-weight: bold; }

.check { display: flex; align-items: center; gap: 0.65rem; min-height: 2.5rem; cursor: pointer; }
.check input {
  appearance: none;
  position: relative;
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  color: var(--text);
  background: var(--field);
  border: 2px solid;
  border-color: var(--shadow) var(--highlight) var(--highlight) var(--shadow);
  border-radius: 0;
}
.check input:checked::after {
  position: absolute;
  top: -0.4rem;
  left: 0;
  content: "\2713";
  font: bold 1.4rem/1.5 Tahoma, Arial, sans-serif;
}

.message { margin: 1rem 0; padding: 0.75rem; border: 1px solid var(--border); background: var(--face-soft); }
.message p:last-child { margin-bottom: 0; }
.status { min-height: 3rem; margin: 1rem 0; padding: 0.65rem; border: 1px solid var(--border); background: var(--face-soft); }
.help { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
code { font-family: Consolas, "Courier New", monospace; overflow-wrap: anywhere; }

@media (max-width: 40rem) {
  body { padding: 0.5rem; }
  main, .site-header, .site-footer { padding: 0.85rem; }
  h1 { font-size: 1.5rem; }
}

@media (forced-colors: active) {
  .check input { appearance: auto; }
  .check input:checked::after { content: none; }
  button, textarea, .site-frame { border: 2px solid ButtonText; }
}

@media print {
  body { padding: 0; }
  .site-frame { max-width: none; box-shadow: none; }
  .skip-link { display: none; }
}