:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #0a0d12;
  color: #e8edf5;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 30% 0, #17243a, transparent 40rem); }
main { width: min(960px, calc(100% - 2rem)); margin: 0 auto; padding: 4rem 0; }
.eyebrow { color: #70d6ff; font: 700 .75rem/1 monospace; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: .5rem 0; font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -.05em; }
.intro { color: #aab7cb; max-width: 42rem; }
.cpp-demo { margin-top: 2.5rem; overflow: hidden; border: 1px solid #344157; border-radius: 14px; background: #111720; box-shadow: 0 20px 80px #0008; }
.editor-shell { position: relative; height: 430px; background: #1f1f1f; }
.fallback-host, .monaco-host { position: absolute; inset: 0; }
/* Before fallback.js arrives, keep the initial HTML textarea usable and close
   to its enhanced appearance. The package supplies all highlighting styles. */
.fallback-host textarea { width: 100%; height: 100%; resize: none; border: 0; outline: 0; padding: 16px 12px 16px 31px; background: #1f1f1f; color: #d4d4d4; font: 14px/23px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.monaco-host { visibility: hidden; }
.monaco-host.is-ready { visibility: visible; }
.toolbar { min-height: 58px; display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-top: 1px solid #344157; }
button { border: 0; border-radius: 8px; padding: .65rem 1.25rem; background: #70d6ff; color: #071018; font-weight: 800; cursor: pointer; }
button.secondary { border: 1px solid #3b4a61; background: #1a2230; color: #c7d3e5; }
button:disabled { opacity: .65; cursor: wait; }
a { color: #b9c9df; text-decoration: none; }
a:hover { color: white; }
.status { margin-left: auto; color: #8190a6; font-size: .82rem; }
.output-drawer { border-top: 1px solid #344157; background: #080b10; }
.output-drawer header { padding: .75rem 1rem; color: #8190a6; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.output-drawer pre { min-height: 4rem; max-height: 20rem; overflow: auto; margin: 0; padding: 0 1rem 1rem; white-space: pre-wrap; color: #d7dee9; }
.output-drawer .stderr { color: #f48771; }
@media (max-width: 700px) {
  main { padding-top: 2rem; }
  .editor-shell { height: 360px; }
  .toolbar { flex-wrap: wrap; }
  .status { flex-basis: 100%; margin-left: 0; }
}