:root {
  color-scheme: light;
  --bdw-bg: #f7f5ef;
  --bdw-surface: #ffffff;
  --bdw-text: #374550;
  --bdw-muted: #65727d;
  --bdw-accent: #b2e0d6;
  --bdw-line: rgba(55, 69, 80, .14);
  --bdw-radius: 28px;
}
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bdw-bg); color: var(--bdw-text); }
body { margin: 0; min-height: 100vh; }
button, code, pre { font: inherit; }
.bdw-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.bdw-hero { width: min(760px, 100%); padding: clamp(28px, 6vw, 64px); background: var(--bdw-surface); border: 1px solid var(--bdw-line); border-radius: var(--bdw-radius); box-shadow: 0 24px 80px rgba(55, 69, 80, .08); }
.bdw-eyebrow { margin: 0 0 16px; color: var(--bdw-muted); font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(3rem, 10vw, 6.5rem); line-height: .95; letter-spacing: -.06em; }
.bdw-copy { margin: 24px 0 0; max-width: 62ch; color: var(--bdw-muted); font-size: 1.05rem; line-height: 1.7; }
code { padding: .18em .42em; background: #f0e6da; border-radius: 8px; color: var(--bdw-text); }
.bdw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
button { border: 0; border-radius: 999px; padding: 13px 18px; background: var(--bdw-text); color: #fff; font-weight: 800; cursor: pointer; }
button:hover { opacity: .9; }
button:focus-visible { outline: 3px solid var(--bdw-accent); outline-offset: 3px; }
#bdw-status { color: var(--bdw-muted); font-size: .95rem; }
pre { margin: 24px 0 0; padding: 18px; overflow: auto; border: 1px solid var(--bdw-line); border-radius: 18px; background: #fbfaf6; line-height: 1.55; }