:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #101914;
  color: #eaf2e9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { width: min(100% - 32px, 760px); margin: 48px auto; padding: 28px; border: 1px solid #334437; border-radius: 16px; background: #17231b; }
h1 { margin: 8px 0 12px; font-size: clamp(30px, 6vw, 44px); }
h2 { font-size: 20px; }
p { line-height: 1.55; }
.eyebrow { margin: 0; color: #c2ec76; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
label { display: block; margin: 24px 0 9px; font-weight: 700; }
textarea { width: 100%; min-height: 220px; padding: 14px; border: 1px solid #415346; border-radius: 9px; background: #111c15; color: #f5faf4; font: 16px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; }
.guidance, #practice-status { color: #becdbf; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
button { padding: 12px 18px; border: 1px solid #c2ec76; border-radius: 9px; background: #c2ec76; color: #142011; font: inherit; font-weight: 700; cursor: pointer; }
button.secondary { border-color: #415346; background: transparent; color: #eaf2e9; }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #c2ec76; outline-offset: 3px; }
#practice-error, #practice-stderr { color: #ffb6a9; }
pre { max-height: 360px; overflow: auto; padding: 14px; border: 1px solid #415346; border-radius: 9px; background: #111c15; font: 15px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
a { color: #c2ec76; }
details { margin-top: 24px; color: #becdbf; }
details ul { padding-left: 22px; }

@media (max-width: 600px) {
  main { width: calc(100% - 20px); margin: 10px auto; padding: 20px 16px; }
  .actions { display: grid; }
  .actions button { width: 100%; }
}