:root {
  --font-reading: "Margin NewCM", Georgia, serif;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-code: "Departure Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --word-spacing: -0.03em;
  /* IBM Carbon: fast-01 duration and standard productive easing. */
  --duration-fast-01: 70ms;
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --color-page: #fff;
  --color-surface: #f5f4f1;
  --color-ink: #2c2925;
  --color-secondary: #625c55;
  --color-caption: #746c63;
  --color-rule: #dedad4;
  --color-control-border: #8c8276;
  --color-accent: #3f6651;
  --color-accent-soft: #edf3ee;
  --color-label: #8c8276;
  --color-grid: rgb(56 95 120 / .035);
}
* { box-sizing: border-box; }
html { color-scheme: only light; background: var(--color-page); }
body { position: relative; min-height: 100dvh; overflow-x: clip; margin: 0; isolation: isolate; background: var(--color-page); color: var(--color-ink); font: 400 1.0625rem/1.6 var(--font-reading); word-spacing: var(--word-spacing); }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, .ui { font-family: var(--font-ui); }
button { word-spacing: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 24px; z-index: 10; padding: 8px 16px; background: var(--color-accent-soft); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
/* Continue the grid above the document without adding scroll space.
   The 400px extension is a multiple of the 40px grid size. */
html::before {
  content: "";
  position: fixed;
  inset: -400px 0 0;
  z-index: -1;
  pointer-events: none;
}
html::before, #hero-background {
  background-color: var(--color-page);
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
#wave-background { position: fixed; z-index: -1; top: 60vh; left: 0; width: 100%; height: 90vh; pointer-events: none; opacity: 1; image-rendering: pixelated; }
.page { position: relative; min-height: 100dvh; padding-block: 72px 64px; display: flex; flex-direction: column; }
.site-header, .site-footer { position: fixed; inset-inline: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: 32px; font-family: var(--font-ui); flex-shrink: 0; pointer-events: none; }
.site-header a, .site-footer a { pointer-events: auto; }
.site-header { top: 0; min-height: 72px; }
.brand { display: inline-flex; gap: 12px; min-height: 44px; align-items: center; text-decoration: none; font-size: .875rem; font-weight: 500; }
.brand svg { width: 24px; height: 24px; fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.edition { font-size: .8125rem; color: var(--color-caption); }
main { flex-shrink: 0; position: relative; isolation: isolate; width: min(100% - 48px, 680px); margin: auto; padding-block: 64px 80px; }
main::before { content: ""; position: absolute; inset: 32px -24px 48px; z-index: -1; border-radius: 48px; background: var(--color-page); opacity: .5; filter: blur(28px); pointer-events: none; }
h1 { font-size: 2rem; line-height: 1.25; font-weight: 700; margin: 0 0 32px; }
.section { position: relative; }
.section-label { color: var(--color-label); font: 400 .6875rem/1.5 var(--font-code); text-transform: uppercase; margin: 0; }
.about { margin-bottom: 40px; }
.about p { margin: 0; }
.about a { color: var(--color-secondary); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.about a:hover { color: var(--color-ink); text-decoration-color: currentColor; }
.projects { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 28px; column-gap: 24px; }
.projects li { min-width: 0; }
.project-link { display: flex; align-items: baseline; gap: 10px; min-height: 28px; height: 100%; padding: 3px 8px; margin-inline: -8px; border-radius: 8px; text-decoration: none; font: 400 .875rem/1.5 var(--font-ui); }
.project-number { flex-shrink: 0; color: var(--color-caption); font-family: var(--font-code); font-size: .75rem; font-variant-numeric: tabular-nums; }
.project-name { min-width: 0; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--duration-fast-01) var(--ease-productive); }
.project-link:hover .project-name, .project-link:focus-visible .project-name { text-decoration-color: currentColor; }
.site-footer { bottom: 0; min-height: 64px; font-size: .8125rem; color: var(--color-secondary); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-footer a:hover { color: var(--color-ink); text-decoration: underline; }
.social { display: flex; gap: 24px; }
.email-label { color: var(--color-caption); margin-right: 8px; }
.project-dialog { padding: 0; width: min(1040px, calc(100% - 48px)); max-height: calc(100svh - 48px); border: 1px solid var(--color-rule); border-radius: 12px; color: var(--color-ink); background: var(--color-page); box-shadow: 0 8px 24px -8px rgb(44 41 37 / 16%); }
.project-dialog::backdrop { background: rgb(44 41 37 / 40%); }
.viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 24px; }
.viewer-heading { display: flex; align-items: baseline; gap: 12px; }
.viewer-heading h2 { margin: 0; font: 700 1.5rem/1.4 var(--font-reading); }
.icon-button { min-width: 44px; min-height: 44px; padding: 8px; display: inline-grid; place-items: center; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-page); color: var(--color-ink); font-size: 1.25rem; }
.icon-button:hover { background: var(--color-surface); }
.icon-button:disabled { cursor: default; color: var(--color-caption); background: var(--color-surface); }
.viewer-stage { position: relative; aspect-ratio: 8 / 5; background: var(--color-surface); overflow: hidden; }
.viewer-stage img, .viewer-stage iframe { width: 100%; height: 100%; display: block; object-fit: cover; border: 0; }
.viewer-stage iframe { position: absolute; inset: 0; background: var(--color-surface); }
.preview-fallback { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; color: var(--color-secondary); }
.viewer-footer { padding: 24px; }
.viewer-footer p { margin: 0 0 16px; }
.viewer-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.run-button { background: var(--color-ink); color: white; border: 1px solid var(--color-ink); border-radius: 999px; padding: 10px 20px; min-height: 44px; font-size: .9375rem; font-weight: 500; }
.run-button:hover { background: var(--color-secondary); }
.source-link { padding: 10px 0; font: 400 .875rem/1.5 var(--font-ui); color: var(--color-secondary); }
.viewer-pagination { display: flex; gap: 8px; margin-left: auto; }
.viewer-status { color: var(--color-caption); font: 400 .8125rem/1.5 var(--font-ui); margin: 12px 0 0 !important; }
[hidden] { display: none !important; }
@media (min-width: 960px) { .section-label { position: absolute; right: calc(100% + 32px); top: 8px; } }
@media (max-width: 959px) { .section-label { margin-bottom: 16px; } }
@media (max-width: 720px) { .projects { grid-template-columns: minmax(0, 1fr); } .project-link { border-bottom: 1px solid var(--color-rule); border-radius: 0; } .project-number { width: 28px; } .project-name { flex: 1; } .project-link::after { content: '↗'; color: var(--color-caption); } .site-header, .site-footer { padding-inline: 24px; } main { padding-block: 48px; } main::before { inset: 24px -12px; } .site-footer { gap: 16px; padding-bottom: 16px; } }
@media (max-width: 450px) { .edition { font-size: .75rem; } .brand { gap: 8px; } .social { gap: 16px; } .project-dialog { width: calc(100% - 24px); max-height: calc(100svh - 24px); } .viewer-header, .viewer-footer { padding: 16px; } .viewer-heading { gap: 8px; } .viewer-heading h2 { font-size: 1.25rem; } .viewer-stage { aspect-ratio: 1; } .viewer-pagination { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

.page.navigation-in-flow { padding-block: 0; }
.navigation-in-flow .site-header, .navigation-in-flow .site-footer { position: relative; inset: auto; }