:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #100c08;
  color: #f5ead4;
  line-height: 1.5;
}

* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(#1d130b, #100c08 22rem); }
header, main, footer { width: min(68rem, calc(100% - 2rem)); margin-inline: auto; }
header { padding-block: 1.5rem .75rem; }
h1 { color: #f4c65d; margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: 1.2rem; color: #f4c65d; margin-bottom: .5rem; }
.tagline { margin-top: .25rem; }
.connection { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.connection p { margin-right: auto; font-weight: 700; }
button, input { font: inherit; }
button {
  border: 2px solid #d09b32; border-radius: .35rem; padding: .55rem .8rem;
  color: #fff5dc; background: #43270f; cursor: pointer;
}
button:hover { background: #603a18; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 4px solid #68d7ff; outline-offset: 3px;
}
.transcript {
  height: min(55vh, 32rem); overflow-y: auto; white-space: pre-wrap;
  background: #050403; border: 2px solid #795122; border-radius: .4rem;
  padding: .9rem; font: 1rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.transcript p { margin: 0 0 .2rem; }
form { margin-block: 1rem; }
label { display: block; font-weight: 700; margin-bottom: .25rem; }
input { width: 100%; border: 3px solid #b47b26; border-radius: .35rem; padding: .75rem; background: #fffdf7; color: #17100a; }
.palette { border: 2px solid #795122; border-radius: .4rem; padding: 1rem; background: #21150c; }
.palette h2 { margin-top: 0; }
kbd { border: 1px solid #d09b32; border-radius: .2rem; padding-inline: .3rem; background: #100c08; }
.button-grid { display: grid; grid-template-columns: repeat(3, minmax(5rem, 1fr)); gap: .5rem; max-width: 34rem; }
dialog { max-width: min(34rem, calc(100% - 2rem)); border: 2px solid #d09b32; border-radius: .4rem; padding: 1.25rem; background: #21150c; color: #f5ead4; }
dialog::backdrop { background: rgb(0 0 0 / 75%); }
details { margin-block: 1.25rem; }
summary { cursor: pointer; font-weight: 700; color: #f4c65d; }
footer { border-top: 1px solid #795122; margin-top: 2rem; padding-block: 1rem 2rem; font-size: .9rem; }
.skip-link { position: absolute; left: .5rem; top: -5rem; padding: .75rem; color: #000; background: #fff; z-index: 10; }
.skip-link:focus { top: .5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 36rem) { .button-grid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }