:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07111f;
  color: #eaf2ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(61, 126, 255, 0.22), transparent 32rem),
    radial-gradient(circle at 90% 35%, rgba(58, 210, 159, 0.14), transparent 28rem),
    #07111f;
}

.demo-shell {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 5rem 0 3rem;
}

.hero { max-width: 49rem; margin-bottom: 2.5rem; }
.hero h1 { margin: 0; font-size: clamp(2.5rem, 7vw, 5rem); line-height: 0.98; letter-spacing: -0.055em; }
.hero > p:last-child { color: #aebed5; font-size: 1.15rem; line-height: 1.7; max-width: 42rem; }
.eyebrow { margin: 0 0 0.7rem; color: #6ee7bd; font: 700 0.75rem/1 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; }

.demo-card {
  margin-top: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(165, 190, 226, 0.2);
  border-radius: 1.4rem;
  background: rgba(12, 27, 47, 0.78);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-heading h2 { margin: 0; font-size: 1.55rem; }
.badge { padding: 0.45rem 0.7rem; border-radius: 999px; background: #253650; color: #c5d1e2; font: 700 0.72rem/1 ui-monospace, monospace; }
.badge.ready { background: rgba(50, 211, 153, 0.14); color: #7ef0c6; }

.counter-panel { display: grid; gap: 1.25rem; }
.metric { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(165, 190, 226, 0.16); }
.metric-label { color: #aebed5; }
.metric-value { color: #fff; font-size: 3rem; line-height: 0.9; }
.runtime-copy { margin: 0; color: #aebed5; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

button {
  border: 0;
  border-radius: 0.75rem;
  padding: 0.8rem 1rem;
  background: #4f7cff;
  color: white;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button:focus-visible { outline: 3px solid #7ef0c6; outline-offset: 3px; }
button:disabled { cursor: wait; opacity: 0.65; }
button.secondary { background: #233a58; }

.component-region { margin-top: 1rem; min-height: 1.5rem; }
.code-card pre { margin: 0; padding: 1.25rem; overflow-x: auto; border-radius: 0.9rem; background: #050b14; color: #c6d7f2; line-height: 1.65; }
footer { padding: 2rem 0 0.5rem; color: #8193ad; text-align: center; }
a { color: #7ef0c6; }

@media (max-width: 36rem) {
  .demo-shell { padding-top: 3rem; }
  .section-heading, .metric { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}