body[data-site="geertdegraaf"] {
  color-scheme: dark;
  --paper: #0c1115;
  --ink: #e2e9ec;
  --muted: #a7b8bf;
  --accent: #b7f582;
  --on-accent: #14200c;
  --surface: #141d23;
  --rule: #35454e;
  --night: #10181d;
  --on-night: #e2e9ec;
  --display: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
  --body: "Segoe UI Variable", "Segoe UI", sans-serif;
  --heading-weight: 600;
  --heading-tracking: -.04em;
  --demo-cyan: #86dfe5;
  --demo-amber: #f0c781;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

[data-site="geertdegraaf"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; box-shadow: none; }
[data-site="geertdegraaf"] .skip-link { background: var(--accent); color: var(--paper); }
[data-site="geertdegraaf"] .demo-preview-notice { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 1rem; padding: .55rem 1rem; border-bottom: 1px solid var(--rule); background: #18251c; color: var(--accent); font: .72rem/1.6 var(--display); }
[data-site="geertdegraaf"] .demo-preview-notice strong { font-weight: 600; }
[data-site="geertdegraaf"] .demo-preview-notice span { color: #c3d6c5; }
[data-site="geertdegraaf"] .demo-workstation { width: min(100% - 5rem, 1352px); margin-inline: auto; }
[data-site="geertdegraaf"] .demo-masthead { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 2.5rem 2rem; }
[data-site="geertdegraaf"] .demo-brand { display: inline-flex; align-items: center; gap: 1rem; color: var(--ink); font: 600 1.2rem/1.3 var(--display); letter-spacing: -.04em; text-decoration: none; }
[data-site="geertdegraaf"] .demo-mark { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; background: var(--accent); color: var(--on-accent); font-size: 1.3rem; letter-spacing: -.08em; }
[data-site="geertdegraaf"] .demo-domain { color: var(--accent); }
[data-site="geertdegraaf"] .demo-brand small { display: block; margin-top: .35rem; color: var(--muted); font: .7rem/1.5 var(--display); letter-spacing: 0; }
[data-site="geertdegraaf"] .demo-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
[data-site="geertdegraaf"] .demo-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .85rem; border: 1px solid transparent; color: var(--muted); font: .82rem/1.5 var(--display); text-decoration: none; }
[data-site="geertdegraaf"] .demo-tabs a > span { margin-right: .25rem; color: var(--accent); }
[data-site="geertdegraaf"] .demo-tabs a:hover { border-color: var(--rule); background: var(--surface); color: var(--ink); }
[data-site="geertdegraaf"] .demo-tabs a[aria-current="page"] { border-color: var(--rule); background: var(--surface); color: var(--ink); }
[data-site="geertdegraaf"] .demo-command { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem .7rem; padding: 1.05rem 1.25rem; border: 1px solid var(--rule); background: var(--night); font: .78rem/1.7 var(--display); }
[data-site="geertdegraaf"] .demo-prompt { color: var(--accent); white-space: nowrap; }
[data-site="geertdegraaf"] .demo-prompt span { color: var(--demo-cyan); }
[data-site="geertdegraaf"] .demo-command-verb { color: var(--demo-amber); }
[data-site="geertdegraaf"] .demo-command-path { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
[data-site="geertdegraaf"] .demo-cursor { display: inline-block; width: .5rem; height: .9rem; align-self: center; background: var(--accent); animation: demo-cursor 1.4s step-end 3; }
[data-site="geertdegraaf"] .demo-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 246px; align-items: start; gap: clamp(2rem, 4vw, 4rem); margin-block: 1.5rem 3rem; }
[data-site="geertdegraaf"] .demo-reader { min-width: 0; border: 1px solid var(--rule); background: #10171c; }
[data-site="geertdegraaf"] .demo-pane-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .3rem 1rem; padding: .85rem 1.5rem; border-bottom: 1px solid var(--rule); background: var(--surface); color: var(--muted); font: .72rem/1.6 var(--display); }
[data-site="geertdegraaf"] .demo-file-symbol { padding-right: .7rem; color: var(--demo-cyan); }
[data-site="geertdegraaf"] .demo-readonly { color: var(--demo-amber); }
[data-site="geertdegraaf"] .document-main { width: auto; max-width: none; margin: 0; padding: clamp(1.5rem, 4vw, 3.5rem); }
[data-site="geertdegraaf"] .document-heading { max-width: none; margin-bottom: 2.5rem; padding: 0 0 2.25rem; border-bottom: 1px solid var(--rule); }
[data-site="geertdegraaf"] h1 { max-width: 25ch; margin-top: 0; color: var(--ink); font: 600 clamp(2rem, 3.35vw, 3.25rem)/1.18 var(--display); letter-spacing: -.04em; }
[data-site="geertdegraaf"] .document-heading h1 { margin-top: 0; font-size: clamp(2rem, 3.35vw, 3.25rem); line-height: 1.18; letter-spacing: -.04em; }
[data-site="geertdegraaf"] h2 { color: var(--ink); font: 600 clamp(1.25rem, 2vw, 1.7rem)/1.4 var(--display); letter-spacing: -.035em; }
[data-site="geertdegraaf"] h3 { color: var(--ink); font: 600 1.15rem/1.55 var(--display); letter-spacing: -.025em; }
[data-site="geertdegraaf"] .document-intro { max-width: 65ch; margin-top: 1.25rem; color: var(--muted); font: 1.1rem/1.75 var(--body); }
[data-site="geertdegraaf"] .document-heading > p:not(.document-intro) { margin-top: 1.4rem; color: var(--muted); font-size: 1rem; }
[data-site="geertdegraaf"] .document-body { max-width: 70ch; color: #d3dee3; font: 1.0625rem/1.85 var(--body); }
[data-site="geertdegraaf"] .document-body > * + * { margin-top: 1.2rem; }
[data-site="geertdegraaf"] .document-body h2 { margin-top: 2.75rem; font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
[data-site="geertdegraaf"] .document-body h3 { margin-top: 2.2rem; font-size: 1.1rem; }
[data-site="geertdegraaf"] .document-body > :is(h2, h3):first-child { margin-top: 0; }
[data-site="geertdegraaf"] .document-body a, [data-site="geertdegraaf"] .demo-source-entry h3 a { color: var(--demo-cyan); text-decoration-thickness: 1px; }
[data-site="geertdegraaf"] .document-body a:hover, [data-site="geertdegraaf"] .demo-source-entry h3 a:hover { color: var(--accent); }
[data-site="geertdegraaf"] .document-body strong { color: var(--ink); font-weight: 650; }
[data-site="geertdegraaf"] .document-body li { padding-left: .4rem; }
[data-site="geertdegraaf"] .document-body li + li { margin-top: .85rem; }
[data-site="geertdegraaf"] .document-body code { border: 1px solid var(--rule); padding: .15rem .35rem; background: #1a272e; color: var(--demo-cyan); font-family: var(--display); font-size: .85em; }
[data-site="geertdegraaf"] .document-body pre { max-width: 100%; padding: 1.25rem; border: 1px solid var(--rule); background: var(--paper); overflow-x: auto; }
[data-site="geertdegraaf"] .document-body blockquote { margin-inline: 0; padding: 1rem 1.4rem; border: 1px solid var(--rule); color: var(--muted); background: var(--surface); font: 1.1rem/1.8 var(--body); }
[data-site="geertdegraaf"] .document-byline { gap: .8rem 2rem; margin-top: 1.6rem; padding: 1rem 0 0; border-top: 1px solid var(--rule); border-bottom: 0; font: .72rem/1.7 var(--display); }
[data-site="geertdegraaf"] .document-byline dt { color: var(--muted); font-size: inherit; }
[data-site="geertdegraaf"] .document-byline dd { color: var(--demo-amber); }
[data-site="geertdegraaf"] .demo-end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--rule); color: var(--muted); font: .73rem/1.7 var(--display); }
[data-site="geertdegraaf"] .demo-end > span { color: var(--accent); }
[data-site="geertdegraaf"] .demo-end a { display: inline-flex; align-items: center; gap: .8rem; min-height: 32px; color: var(--ink); }
[data-site="geertdegraaf"] .demo-rail { position: sticky; top: 1.5rem; min-width: 0; padding-top: .4rem; font: .75rem/1.75 var(--display); }
[data-site="geertdegraaf"] .demo-rail section { padding-bottom: 1.8rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--rule); }
[data-site="geertdegraaf"] .demo-rail section:last-child { border-bottom: 0; }
[data-site="geertdegraaf"] .demo-rail h2 { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; color: var(--ink); font: 600 .8rem/1.7 var(--display); letter-spacing: 0; }
[data-site="geertdegraaf"] .demo-rail p { color: var(--muted); }
[data-site="geertdegraaf"] .demo-status-dot { width: .45rem; height: .45rem; flex-shrink: 0; background: var(--accent); }
[data-site="geertdegraaf"] .demo-rail dl { margin: 1.2rem 0 0; }
[data-site="geertdegraaf"] .demo-rail dl div { display: flex; justify-content: space-between; gap: .7rem; padding-block: .3rem; }
[data-site="geertdegraaf"] .demo-rail dt { color: var(--muted); }
[data-site="geertdegraaf"] .demo-rail dd { margin: 0; color: var(--ink); text-align: right; }
[data-site="geertdegraaf"] .demo-rail .demo-held { color: var(--demo-amber); }
[data-site="geertdegraaf"] .demo-files > a { display: flex; align-items: baseline; gap: .65rem; padding: .65rem 0; color: var(--muted); text-decoration: none; line-height: 1.7; }
[data-site="geertdegraaf"] .demo-files > a > span:first-child { color: var(--demo-cyan); }
[data-site="geertdegraaf"] .demo-files > a:hover, [data-site="geertdegraaf"] .demo-files > a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
[data-site="geertdegraaf"] .demo-count { margin-left: auto; color: var(--ink); }
[data-site="geertdegraaf"] .demo-manifest p { margin-block: 1rem; }
[data-site="geertdegraaf"] .demo-manifest a { color: var(--demo-cyan); }
[data-site="geertdegraaf"] .demo-stack p + p { margin-top: .8rem; }
[data-site="geertdegraaf"] .demo-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem 2rem; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--rule); color: var(--muted); font: .7rem/1.8 var(--display); }
[data-site="geertdegraaf"] .demo-footer > span { max-width: 85ch; }
[data-site="geertdegraaf"] .demo-footer strong { color: var(--demo-amber); font-weight: 400; }
[data-site="geertdegraaf"] .demo-home-intro { color: var(--accent); }
[data-site="geertdegraaf"] .demo-home-intro span { color: var(--demo-cyan); }
[data-site="geertdegraaf"] .demo-home-section + .demo-home-section { margin-top: 3rem; }
[data-site="geertdegraaf"] .demo-home-section > h2 { margin-bottom: 1.4rem; font-size: 1rem; }
[data-site="geertdegraaf"] .demo-source-entry { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; gap: .8rem; padding-block: 1.5rem; border-block: 1px solid var(--rule); }
[data-site="geertdegraaf"] .demo-source-entry > span { color: var(--accent); font: 1.3rem/1.5 var(--display); }
[data-site="geertdegraaf"] .demo-source-entry h3 { font-size: clamp(1.1rem, 1.8vw, 1.45rem); }
[data-site="geertdegraaf"] .demo-source-entry p { margin-top: .75rem; color: var(--muted); font-size: .95rem; }
[data-site="geertdegraaf"] .demo-source-entry .demo-source-date { font: .7rem/1.8 var(--display); }
[data-site="geertdegraaf"] .demo-open-link { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; margin-top: 1rem; color: var(--accent); font: .8rem/1.6 var(--display); }
[data-site="geertdegraaf"] .demo-scope { scroll-margin-top: 2rem; }
[data-site="geertdegraaf"] .demo-scope p { color: var(--muted); font-size: .95rem; }
[data-site="geertdegraaf"] .demo-scope p + p { margin-top: 1rem; }
[data-site="geertdegraaf"] .document-body .block-gallery ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
[data-site="geertdegraaf"] .block-gallery li { min-width: 0; padding: 0; }
[data-site="geertdegraaf"] .block-gallery li + li { margin-top: 0; }
[data-site="geertdegraaf"] .block-gallery .block-picture { display: grid; place-items: center; height: 100%; min-height: 12rem; aspect-ratio: auto; border: 1px solid var(--rule); background: var(--paper); }
[data-site="geertdegraaf"] .block-gallery .block-picture img { width: 100%; height: auto; max-height: 32rem; object-fit: contain; }
[data-site="geertdegraaf"] .block-gallery figcaption { margin-top: 1rem; color: var(--muted); font: .72rem/1.7 var(--display); }
[data-site="geertdegraaf"] .block-pricing th { color: var(--demo-cyan); }
[data-site="geertdegraaf"] .block-pricing td { color: var(--ink); }

@keyframes demo-cursor {
  0%, 45%, 100% { opacity: 1; }
  50%, 95% { opacity: 0; }
}

@media (max-width: 1050px) {
  [data-site="geertdegraaf"] .demo-workstation { width: calc(100% - 3rem); }
  [data-site="geertdegraaf"] .demo-workspace { grid-template-columns: minmax(0, 1fr) 205px; gap: 1.5rem; }
  [data-site="geertdegraaf"] .document-main { padding: 2rem; }
  [data-site="geertdegraaf"] .document-heading h1 { font-size: 2rem; }
}

@media (max-width: 760px) {
  [data-site="geertdegraaf"] .demo-workstation { width: calc(100% - 2rem); }
  [data-site="geertdegraaf"] .demo-masthead { align-items: start; flex-direction: column; gap: 1.25rem; padding-block: 1.5rem 1.25rem; }
  [data-site="geertdegraaf"] .demo-tabs { width: 100%; }
  [data-site="geertdegraaf"] .demo-tabs a { flex: 1 1 auto; justify-content: center; padding-inline: .5rem; }
  [data-site="geertdegraaf"] .demo-command { padding: .9rem 1rem; font-size: .7rem; }
  [data-site="geertdegraaf"] .demo-command-path { flex-basis: 100%; }
  [data-site="geertdegraaf"] .demo-cursor { display: none; }
  [data-site="geertdegraaf"] .demo-workspace { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 1rem; }
  [data-site="geertdegraaf"] .document-main { padding: 1.5rem; }
  [data-site="geertdegraaf"] .demo-pane-bar { padding: .8rem 1rem; font-size: .65rem; }
  [data-site="geertdegraaf"] .document-heading h1 { font-size: 1.8rem; }
  [data-site="geertdegraaf"] .document-intro { font-size: 1rem; }
  [data-site="geertdegraaf"] .document-body { font-size: 1rem; line-height: 1.85; }
  [data-site="geertdegraaf"] .demo-rail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  [data-site="geertdegraaf"] .demo-rail section { margin: 0; padding-bottom: 1.5rem; }
  [data-site="geertdegraaf"] .demo-rail dl div { flex-wrap: wrap; gap: .1rem .5rem; }
  [data-site="geertdegraaf"] .demo-rail dl dd { text-align: left; }
  [data-site="geertdegraaf"] .demo-source-entry { grid-template-columns: 1rem minmax(0, 1fr); gap: .7rem; }
}

@media (max-width: 420px) {
  [data-site="geertdegraaf"] .document-main { padding: 1.25rem; }
  [data-site="geertdegraaf"] .demo-readonly { display: none; }
  [data-site="geertdegraaf"] .demo-rail { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  [data-site="geertdegraaf"] .document-body .block-gallery ul { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  [data-site="geertdegraaf"] .demo-cursor { animation: none; }
}