:root {
  color-scheme: light dark;
  --page-fg: #1f2328;
  --page-bg: #fafbf8;
  --page-muted: #59636e;
  --page-border: #d1d9e0;
  --page-surface: #eef3ec;
  --page-accent: #246b43;
  --page-on-accent: #ffffff;
  --page-max: 60rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page-fg: #e6edf3;
    --page-bg: #0d1117;
    --page-muted: #9198a1;
    --page-border: #3d444d;
    --page-surface: #161b22;
    --page-accent: #8ed5a2;
    --page-on-accent: #102a1b;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 1rem 5rem;
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--page-fg);
  background: var(--page-bg);
}
main, .page-header { max-width: var(--page-max); margin: 0 auto; }

.page-header { padding: 1.5rem 0 2rem; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.masthead img { display: block; width: 180px; max-width: 40vw; height: auto; }
.masthead nav { display: flex; gap: 1.25rem; font-size: .9rem; }
.masthead a { text-underline-offset: .25em; }
.hero { padding-top: 2.5rem; }
.eyebrow { color: var(--page-accent); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .75rem; }
.hero h1 { font: 500 clamp(2.6rem, 6vw, 4.5rem)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.045em; margin: 0; }
.hero h1 span { color: var(--page-accent); }
.hero .subtitle { margin: 1rem 0; max-width: 39rem; font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.25rem 0; }
.hero-actions a { padding: .65rem 1.1rem; border: 1px solid var(--page-border); border-radius: 6px; text-decoration: none; font-weight: 600; }
.hero-actions .primary { background: var(--page-accent); color: var(--page-on-accent); border-color: var(--page-accent); }
.hero-actions a:hover { text-decoration: underline; text-underline-offset: .2em; }
.subtitle { color: var(--page-muted); margin: .5rem auto 1.5rem; max-width: 38rem; }

.badges { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-start; margin: 1.25rem 0 0; }
.badge {
  font-size: .8rem; padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid var(--page-border); color: var(--page-muted);
}

.alert {
  border: 1px solid var(--page-border);
  border-inline-start: 4px solid #d1a00a;
  border-radius: 6px;
  background: var(--page-surface);
  padding: .75rem 1rem;
  font-size: .875rem;
  margin: 0 0 1.5rem;
}
.alert p { margin: .4rem 0 0; }
.alert summary { cursor: pointer; font-weight: 650; }

main > h2 { margin: 3.5rem 0 .5rem; padding-top: 1.5rem; border-top: 1px solid var(--page-border); font-size: 1.6rem; letter-spacing: -.025em; scroll-margin-top: 1.5rem; }
main > h2#try { margin-top: 0; border-top: 0; padding-top: 0; }
h2 + .lede { margin-top: 0; color: var(--page-muted); }
h3 { margin: 2rem 0 .5rem; font-size: 1.05rem; }

/* Full width of the prose column, and 16:9 without a wrapper: the intrinsic
   aspect ratio of the file is what reserves the space, so nothing reflows
   when the poster loads. */
.promo {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--page-border);
  border-radius: 8px;
  background: #0b0f14;
}

.panel {
  border: 1px solid var(--page-border);
  border-radius: 8px;
  background: var(--page-surface);
  padding: 1rem;
}

/* Scoped OUT of the editor. Without Shadow DOM a page's own `pre` rules reach
   into the content area -- which is the point (the editor should look like the
   site it publishes to) and also a hazard: this page's dark code background was
   landing under the editor's light-mode syntax colours. */
pre:not(.ol-editor pre), code:not(.ol-editor code), .out {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
}
pre:not(.ol-editor pre), .out {
  margin: 0;
  padding: .75rem;
  border: 1px solid var(--page-border);
  border-radius: 6px;
  background: var(--page-bg);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 15rem;
  overflow-y: auto;
}
.out:empty::before { content: "(empty)"; color: var(--page-muted); }

.row { display: grid; gap: 1rem; }
@media (min-width: 56rem) { .row.two { grid-template-columns: 1fr 1fr; } }

button.action {
  font: inherit; font-size: .9rem;
  padding: .45rem .9rem;
  border: 1px solid var(--page-border);
  border-radius: 6px;
  background: var(--page-bg);
  color: inherit;
  cursor: pointer;
}
button.action:hover { background: var(--page-surface); }
button.action:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 2px; }
button.action[aria-pressed="true"] { border-color: var(--page-accent); font-weight: 600; }
.controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }

table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: start; padding: .4rem .6rem; border-bottom: 1px solid var(--page-border); }
kbd {
  font-family: inherit; font-size: .82em; padding: .1rem .35rem;
  border: 1px solid var(--page-border); border-bottom-width: 2px; border-radius: 4px;
  background: var(--page-bg);
}

footer {
  max-width: var(--page-max); margin: 4rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid var(--page-border); color: var(--page-muted); font-size: .9rem;
}
a { color: inherit; }

      .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Page navigation remains outside the editor's stacking contexts, so a sticky
   page bar cannot cover floating toolbars, menus, or the author's selection. */
.demo-nav { max-width: var(--page-max); margin: 0 auto 2rem; border-block: 1px solid var(--page-border); padding: 1rem 0; }
.demo-nav summary { font-weight: 650; cursor: pointer; }
.demo-nav .nav-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-top: 1rem; }
.demo-nav .nav-group strong { display: block; color: var(--page-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.demo-nav a { display: block; width: fit-content; padding: .2rem 0; font-size: .9rem; text-decoration: none; }
.demo-nav a:hover { color: var(--page-accent); text-decoration: underline; text-underline-offset: .2em; }
.page-notes { margin: 1rem 0; border: 1px solid var(--page-border); border-radius: 8px; padding: .8rem 1rem; background: var(--page-surface); }
.page-notes > summary { cursor: pointer; font-weight: 600; }
.page-notes > p { max-width: 48rem; }
.agent-note { border-inline-start: 3px solid var(--page-accent); padding: .15rem 0 .15rem 1rem; color: var(--page-muted); font-size: .9rem; }
#editor-wrap { border-radius: 8px; box-shadow: 0 8px 30px rgb(20 50 30 / 7%); }
.row > * { min-width: 0; }
.skip-link { position: absolute; top: .5rem; left: 1rem; transform: translateY(-200%); padding: .65rem 1rem; background: var(--page-bg); border: 2px solid var(--page-accent); z-index: 100; }
.skip-link:focus { transform: translateY(0); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 40rem) {
  .page-header { padding-top: 1rem; }
  .hero { padding-top: 2rem; }
  .masthead nav { gap: .75rem; font-size: .8rem; }
  .demo-nav .nav-groups { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .hero-actions a { text-align: center; }
  main > h2 { font-size: 1.4rem; }
}

@media (min-width: 56rem) {
  .hero { display: grid; grid-template-columns: 1fr 1.15fr; column-gap: 2rem; align-items: start; }
  .hero .eyebrow { grid-column: 1 / -1; }
  .hero h1 { grid-column: 1; grid-row: 2 / 4; font-size: 4rem; }
  .hero .subtitle { grid-column: 2; margin: .25rem 0 .75rem; }
  .hero-actions { grid-column: 2; margin: 0; gap: .5rem; }
  .hero-actions a { font-size: .875rem; padding: .55rem .8rem; }
  .hero .badges { grid-column: 1 / -1; margin-top: 1.5rem; }
}