@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2?v=2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.woff2?v=2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.woff2?v=2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Bold.woff2?v=2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, dt, li,
figure, blockquote, pre, fieldset {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

:root {

  color-scheme: light dark;

  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --line-height: 1.55;

  --phi: 1.618;
  --border-radius:    6px;
  --border-radius-lg: 12px;
  --border-width:     0.5px;

  --red-base-light:    hsl(6   90%  49%);
  --red-base-dark:     oklch(from var(--red-base-light) calc(l + 0.05) c h);
  --green-base-light:  hsl(120 100% 22%);
  --green-base-dark:   hsl(120 100% 27%);
  --yellow-base-light: hsl(41  100% 50%);
  --yellow-base-dark:  hsl(41  100% 55%);
  --blue-base-light:   hsl(202 100% 50%);
  --blue-base-dark:    hsl(202 100% 55%);

  --red:    light-dark(var(--red-base-light),    var(--red-base-dark));
  --green:  light-dark(var(--green-base-light),  var(--green-base-dark));
  --yellow: light-dark(var(--yellow-base-light), var(--yellow-base-dark));
  --blue:   light-dark(var(--blue-base-light),   var(--blue-base-dark));

  --red-hover:    light-dark(oklch(from var(--red-base-light)    calc(l - 0.05) c h),
                              oklch(from var(--red-base-dark)     calc(l + 0.05) c h));
  --green-hover:  light-dark(oklch(from var(--green-base-light)  calc(l - 0.05) c h),
                              oklch(from var(--green-base-dark)   calc(l + 0.05) c h));
  --yellow-hover: light-dark(oklch(from var(--yellow-base-light) calc(l - 0.05) c h),
                              oklch(from var(--yellow-base-dark)  calc(l + 0.05) c h));
  --blue-hover:   light-dark(oklch(from var(--blue-base-light)   calc(l - 0.05) c h),
                              oklch(from var(--blue-base-dark)    calc(l + 0.05) c h));

  --red-fg:    #FFFFFF;
  --green-fg:  #FFFFFF;
  --yellow-fg: #4A3200;
  --blue-fg:   #003857;

  --bg:      light-dark(#F4F4F5, #18181B);
  --surface: light-dark(#FFFFFF, #27272A);
  --border:  light-dark(#E4E4E7, #3F3F46);
  --text:    light-dark(#18181B, #FAFAFA);
  --muted:   light-dark(#52525B, #A1A1AA);
  --faint:   light-dark(#A1A1AA, #71717A);

  --title:    light-dark(var(--red),    var(--yellow));
  --title-fg: light-dark(var(--red-fg), var(--yellow-fg));

  --brand:    light-dark(var(--red),    #FFFFFF);
  --brand-fg: light-dark(var(--red-fg), #18181B);

  --red-accent:    light-dark(var(--red),    oklch(from var(--red-base-light) 0.72 0.17 h));
  --red-accent-fg: light-dark(var(--red-fg), #18181B);

  --emb-tag-color: var(--muted);
}

[data-theme="dark"]  { color-scheme: dark;  }
[data-theme="light"] { color-scheme: light; }

:root { --section-accent: var(--title); --section-accent-fg: var(--title-fg); }
body[data-page="home"]                { --section-accent: var(--red-accent); --section-accent-fg: var(--red-accent-fg); }
body[data-page="projects"]            { --section-accent: var(--green);  --section-accent-fg: var(--green-fg);  }
body[data-page="art-and-photography"] { --section-accent: var(--yellow); --section-accent-fg: var(--yellow-fg); }
body[data-page="favorite-things"]     { --section-accent: var(--blue);   --section-accent-fg: var(--blue-fg);   }
body[data-page="git"]                 { --section-accent: var(--text);   --section-accent-fg: var(--bg);        }
body[data-page="about"]               { --section-accent: var(--text);   --section-accent-fg: var(--bg);        }

::selection {
  background-color: color-mix(in srgb, var(--section-accent) 25%, transparent);
}

html {
  font-size: clamp(16px, calc(16px + (100vw - 320px) * 5 / 1216), 21px);
}

body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01';
  line-height: var(--line-height);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.emb-title {
  font-size: 2rem;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--title);
  margin-block-start: 0;
}

body[data-page="about"] .emb-title { color: var(--section-accent); }

.emb-eyebrow.emb-made { margin-block-end: 1rem; }
:is(p, time).emb-eyebrow.emb-written { float: inline-end; margin-inline-start: 1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.75rem; }

p, ul, ol, dl, figure, blockquote, pre { margin-block-end: 1rem; }
h1, h2, h3, h4, h5, h6                  { margin-block-end: 0.5rem; }
h2, h3, h4, h5, h6                      { margin-block-start: 1.5rem; }
:where(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):last-child { margin-block-end: 0; }

.emb-lead { margin-block-end: 1rem; }
.emb-lead blockquote { display: flow-root; }
.emb-lead blockquote > p:has(> img) {
  float: inline-end;
  inline-size: calc(100% / var(--phi) / var(--phi));
  margin: 0 0 0 1.25rem;
}
.emb-lead > :last-child { margin-block-end: 0; }
.emb-lead img {
  display: block;
  border: var(--border-width) solid var(--border);
  border-radius: var(--border-radius-lg);
}
@media (max-width: 40rem) {
  .emb-lead blockquote > p:has(> img) { float: none; inline-size: auto; margin: 0 0 1rem; }
}

blockquote {
  padding-inline-start: 1rem;
  border-inline-start: var(--border-width) solid var(--muted);
  color: var(--muted);
}

ul, ol { padding-inline-start: 1.5rem; list-style: revert; }

a:hover { text-decoration: underline; }

main p a, main li a, main dd a, main td a, main figcaption a { color: var(--blue); }
main p a:hover, main li a:hover, main dd a:hover, main td a:hover, main figcaption a:hover { color: var(--blue-hover); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:root {
  --emb-scale: 1;
  --emb-fluid: 2.2vw;
  --emb-min:   1.75rem;
  --emb-max:   3rem;

  --emb-brand-x-ratio:      0.546;
  --emb-brand-ascent-ratio: 0.7275;
  --emb-brand-stem-ratio:   0.127;

  --emb-pill-text-x-fill:    0.33;
  --emb-pill-pad-x-ratio:    0.90;
  --emb-pill-gap-ratio:      1.5;
  --emb-nav-group-gap-ratio: 2;
  --emb-nav-row-gap-ratio:   0.30;

  --emb-toggle-text-x-fill: 0.45;
  --emb-toggle-pad-x-ratio: 0.60;

  --emb-micro-x-fill:   0.39;
  --emb-micro-ratio:    1.18;
  --emb-micro-tracking: 0.07em;
  --emb-micro-weight:   600;
  --emb-micro-pad-y-ratio: 0.15;
  --emb-micro-pad-y:    calc(var(--emb-micro-pad-y-ratio) * 1em);
  --emb-micro-pad-x:    0.55em;

  --emb-pill-wrap-bp: 1280px;
}

:root {
  --emb-brand-size:
    calc(var(--emb-scale)
         * clamp(var(--emb-min), 1.1rem + var(--emb-fluid), var(--emb-max)));

  --emb-brand-x-height: calc(var(--emb-brand-size) * var(--emb-brand-x-ratio));

  --emb-stem: calc(var(--emb-brand-size) * var(--emb-brand-stem-ratio));

  --emb-pill-size:     calc(var(--emb-brand-x-height) * var(--emb-pill-text-x-fill) / var(--emb-brand-x-ratio));
  --emb-pill-pad-x:    calc(var(--emb-pill-size)      * var(--emb-pill-pad-x-ratio));
  --emb-pill-gap:      calc(var(--emb-pill-pad-x)     * var(--emb-pill-gap-ratio));
  --emb-nav-group-gap: calc(var(--emb-pill-gap)       * var(--emb-nav-group-gap-ratio));

  --emb-header-gap: calc(var(--emb-brand-x-height) / 2);
  --emb-filter-gap: calc(var(--emb-header-gap) / 2);

  --emb-toggle-size:   calc(var(--emb-brand-x-height) * var(--emb-toggle-text-x-fill) / var(--emb-brand-x-ratio));
  --emb-toggle-pad-x:  calc(var(--emb-toggle-size)    * var(--emb-toggle-pad-x-ratio));

  --emb-toggle-reserve:
    calc(3 * (var(--emb-toggle-size) + 2 * var(--emb-toggle-pad-x))
         + var(--emb-nav-group-gap));

  --emb-brand-baseline: calc(var(--emb-brand-size) * var(--emb-brand-ascent-ratio));
  --emb-nav-baseline:   calc(var(--emb-pill-size)  * var(--emb-brand-ascent-ratio));

  --emb-nav-row-gap:
    calc(var(--emb-stem) + var(--emb-brand-x-height)
         - (var(--emb-brand-size) - var(--emb-brand-baseline))
         - var(--emb-nav-baseline));

  --emb-nav-label-shift:
    calc((var(--emb-pill-size) * var(--emb-brand-x-ratio) - var(--emb-brand-x-height)) / 2);

  --emb-micro-size:       calc(var(--emb-brand-x-height) * var(--emb-micro-x-fill) / var(--emb-brand-x-ratio));
  --emb-micro-large-size: calc(var(--emb-micro-size) * var(--emb-micro-ratio));
}

.container {

  max-width: min(calc(100% - 2rem), 75rem);
  margin-inline: auto;
}

body > main { padding-block: 0; }

main > section {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--border-radius-lg);

  padding: var(--emb-filter-gap) var(--emb-pill-pad-x) var(--emb-pill-pad-x);
}

main > section + section {
  margin-top: var(--emb-brand-x-height);
}

:root {
  --title-size:    var(--emb-brand-size);
  --nav-size:      clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  --pill-pad:      clamp(0.55em, 0.5em + 0.4vw, 0.95em);
  --pill-bg:       var(--section-accent);
  --pill-fg:       var(--section-accent-fg);
  --pill-bg-hover: color-mix(in srgb, var(--section-accent) 10%, transparent);

  --pill-rest-bg: light-dark(#FAFAFA, #141417);
  --fg:            var(--text);
  --line:          var(--border);

  --bar-pad: var(--emb-header-gap);
}

.bar {
  position: relative;
  display: flex;
  align-items: start;
  flex-wrap: wrap;

  gap: var(--emb-header-gap) clamp(18px, 3vw, 40px);

  padding: var(--bar-pad) var(--emb-toggle-reserve) var(--emb-header-gap) 0;
}

nav { flex: 1; min-width: max-content; }

.title {
  display: inline;
  font-size: var(--title-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin: 0;

  color: var(--brand);
  text-box-trim: trim-both;
  text-box-edge: ex alphabetic;
}

nav > ul {
  display: flex;

  flex-wrap: nowrap;
  align-items: start;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item[data-section="home"]                { --c: var(--red);    --cfg: var(--red-fg);    }
.nav-item[data-section="projects"]            { --c: var(--green);  --cfg: var(--green-fg);  }
.nav-item[data-section="art-and-photography"] { --c: var(--yellow); --cfg: var(--yellow-fg); }
.nav-item[data-section="favorite-things"]     { --c: var(--blue);   --cfg: var(--blue-fg);   }

.nav-item[data-section="git"]                 { --c: var(--text);   --cfg: var(--bg);        }
.nav-item[data-section="about"]               { --c: var(--text);   --cfg: var(--bg);        }

.nav-item {
  display: flex;
  align-items: center;
  height: var(--emb-brand-x-height);
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  background: var(--pill-rest-bg);

  border: 1px solid color-mix(in srgb, var(--section-accent) 60%, transparent);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-item a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: var(--pill-pad);
  height: 100%;
  font-size: var(--nav-size);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: color 0.15s ease;
}

.nav-item a span {
  text-box-trim: trim-both;
  text-box-edge: ex alphabetic;
}

.nav-item:hover:not(.selected) {
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
}
.nav-item:hover:not(.selected) a {
  color: var(--c);

  text-decoration: underline;
}

.nav-item.selected   { background: var(--c); border-color: var(--c); }
.nav-item.selected a { color:      var(--cfg); text-decoration: underline; }

.toggle {
  position: absolute;
  top: var(--bar-pad);
  right: 0;
  display: flex;
  align-items: stretch;
  height: var(--emb-brand-x-height);

  box-shadow: inset 0 0 0 var(--border-width) var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  line-height: 1;

  font-size: var(--emb-toggle-size);
  padding: 0 var(--emb-toggle-pad-x);
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.toggle button > span {
  display: block;
  transform: translateY(0.12em);
}

.toggle button:hover { background: var(--pill-bg-hover); }

.toggle button[data-theme="light"].active { background: var(--yellow); color: var(--yellow-fg); }
.toggle button[data-theme="dark"].active  { background: var(--brand);  color: var(--brand-fg);  }
.toggle button[data-theme="auto"].active {
  background: light-dark(var(--yellow),    var(--brand));
  color:      light-dark(var(--yellow-fg), var(--brand-fg));
}

.emb-eyebrow {
  font-size: var(--emb-micro-size);
  font-weight: var(--emb-micro-weight);
  text-transform: uppercase;
  letter-spacing: var(--emb-micro-tracking);
  color: var(--emb-tag-color);

  margin: 0;
}

.emb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.emb-cards-list {
  grid-template-columns: 1fr;
}

.emb-cards article {
  margin: 0;
  border-radius: var(--border-radius-lg);
  border: var(--border-width) solid var(--border);
  background: var(--bg);
  padding: 1.25rem;
}

.emb-cards article h3 {
  font-size: 1.05rem;
  margin: 0.5rem 0 0.4rem;
}

.emb-cards article p {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

.emb-cards article { position: relative; }
.emb-card-target { color: inherit; }
.emb-card-target:hover { color: var(--section-accent); }
.emb-card-target::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--border-radius-lg);
}
.emb-card-target:focus-visible { outline: none; }
.emb-card-target:focus-visible::after {
  outline: var(--border-width) solid var(--section-accent);
  outline-offset: 2px;
}
.emb-cards article a:not(.emb-card-target) {
  position: relative;
  z-index: 2;
}
.emb-card { transition: border-color 0.15s; }
.emb-card:hover { border-color: var(--section-accent); }

.emb-card-rich {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.15s;
}

.emb-card-rich:hover { border-color: var(--section-accent); }

.emb-card-rich .emb-eyebrow { margin: 0; }

.emb-cards article.emb-card-pictured {
  --emb-card-pad: 1.25rem;
  display: grid;
  grid-template-columns: 1fr calc(100% / var(--phi) / var(--phi));
  column-gap: var(--emb-card-pad);
  row-gap: 0;
}
.emb-card-rich > .emb-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.emb-card-picture {
  position: relative;
  align-self: center;
  inline-size: 100%;
  aspect-ratio: var(--phi) / 1;
}
.emb-card-picture img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: right center;
}
.emb-card-strip {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-start: var(--emb-card-pad);
  padding-block-start: 0.75rem;
  border-block-start: var(--border-width) solid var(--border);
}

[data-theme="dark"] .emb-card-picture img[src$=".svg"] { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .emb-card-picture img[src$=".svg"] { filter: invert(1); }
}
@media (max-width: 40rem) {
  .emb-cards article.emb-card-pictured {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
  .emb-card-picture { grid-row: 1; }
  .emb-card-picture img { object-position: center; }
}

.emb-cards-gallery article.emb-card-pictured {
  --emb-gallery-label: calc(var(--emb-micro-large-size) * var(--phi));
  grid-template-columns: 1fr;
  row-gap: var(--emb-card-pad);
  justify-self: center;
  inline-size: fit-content;
  max-inline-size: 100%;
}
.emb-cards-gallery .emb-card-text {
  inline-size: 0;
  min-inline-size: 100%;
  display: block;
  block-size: var(--emb-gallery-label);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: var(--emb-micro-large-size);
  line-height: var(--emb-gallery-label);
}
.emb-cards-gallery .emb-card-text h3,
.emb-cards-gallery .emb-card-text p {
  display: inline;
  margin: 0;
  font-size: inherit;
}
.emb-cards-gallery .emb-card-text h3 { margin-inline-end: 1ch; }

.emb-cards-gallery .emb-card-text { grid-row: 1; }
.emb-cards-gallery .emb-media-downloads { grid-row: 3; justify-content: flex-end; margin-block-start: 0; }
.emb-cards-gallery .emb-card-picture {
  grid-row: 2;
  aspect-ratio: auto;
}
.emb-cards-gallery .emb-card:hover { border-color: var(--border); }
.emb-cards-gallery .emb-card-picture img {
  position: static;
  inline-size: auto;
  block-size: auto;
  max-block-size: calc(100svh - 4 * var(--emb-card-pad) - var(--emb-gallery-label) - var(--emb-brand-x-height)
                       - 2 * var(--border-width));
  margin-inline: auto;
  object-position: center;
}

.emb-card-updates {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.emb-card-updates li { font-size: var(--emb-micro-large-size); }

.emb-card-updates a {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--muted);
  padding: 0.2rem 0;
}

.emb-card-updates a:hover { color: var(--section-accent); }

.emb-card-updates time {
  font-family: var(--font-mono);
  font-size: var(--emb-micro-size);
  color: var(--muted);
  flex: 0 0 auto;
}

.emb-status,
.emb-type {
  display: inline-block;
  font-size: var(--emb-micro-size);
  font-weight: var(--emb-micro-weight);
  text-transform: uppercase;
  letter-spacing: var(--emb-micro-tracking);
  padding: var(--emb-micro-pad-y) var(--emb-micro-pad-x);
  border-radius: 999px;
  vertical-align: middle;

  margin-left: var(--emb-micro-pad-x);
  line-height: 1.5;

  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.emb-status { border: var(--border-width) solid currentColor; background: transparent; }
.emb-type   { background: var(--border); color: var(--muted); }

.emb-card-rich h3 {
  --emb-title-pill-box: calc(var(--emb-micro-size) * (var(--emb-brand-ascent-ratio) + 2 * var(--emb-micro-pad-y-ratio))
                             + 2 * var(--border-width));
  font-size: calc(var(--emb-title-pill-box) / var(--emb-brand-ascent-ratio));
}
.emb-card-rich h3 :is(.emb-status, .emb-type) {
  vertical-align: calc(var(--emb-micro-pad-y) + var(--border-width));
}

.emb-status-feasibility-study { color: var(--muted); }
.emb-status-planning          { color: var(--blue);  }
.emb-status-in-progress       { color: var(--green); }
.emb-status-paused            { color: var(--yellow);}
.emb-status-complete          { color: var(--muted); }
.emb-status-failed            { color: var(--red);   }

.emb-pill,
.emb-filter-chip,
.emb-filter select,
.emb-sort-dir {

  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--emb-brand-x-height);
  line-height: 1;
  padding: 0 var(--emb-pill-pad-x);
  font: inherit;
  font-size: var(--emb-pill-size);
  font-weight: 500;
  border-radius: 999px;
  border: var(--border-width) solid var(--border);
  background: transparent;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.15s ease;
}

.emb-pill:focus-visible,
.emb-filter-chip:focus-visible,
.emb-filter select:focus-visible,
.emb-sort-dir:focus-visible {
  outline: var(--border-width) solid var(--section-accent);
  outline-offset: 2px;
}

.emb-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--emb-pill-gap);
  margin-bottom: var(--emb-filter-gap);
}

.emb-filter-facets,
.emb-filter-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--emb-pill-gap);
}

.emb-filter-facets { flex: 1 1 auto; min-width: 0; }
.emb-filter-sort   { flex: 0 0 auto; }

.emb-filter-chips,
.emb-filter-selects { display: contents; }

.emb-filter-chip {
  gap: calc(var(--emb-pill-pad-x) / 2);
}

.emb-filter-chip span {
  text-box-trim: trim-both;
  text-box-edge: ex alphabetic;
}

.emb-filter-chip input[type="checkbox"] {

  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  flex-shrink: 0;
  width:  calc(var(--emb-pill-size) * var(--emb-brand-x-ratio));
  height: calc(var(--emb-pill-size) * var(--emb-brand-x-ratio));
  border: var(--border-width) solid var(--muted);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.emb-filter-chip input[type="checkbox"]:checked {
  background: var(--section-accent);
  border-color: var(--section-accent);
}

.emb-filter select {
  padding-inline: var(--emb-pill-pad-x) calc(var(--emb-pill-pad-x) + 1em);

  padding-top: calc(var(--emb-pill-size) * (1 - var(--emb-brand-ascent-ratio)));
  line-height: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--emb-pill-pad-x) center;
  background-size: 0.65em auto;

  width: auto;
  min-width: max-content;
}

.emb-sort-dir {
  width: var(--emb-brand-x-height);
  padding: 0;
  color: var(--muted);
}

.emb-sort-dir span {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.emb-sort-dir:hover { color: var(--section-accent); }

.emb-cards > .hidden { display: none; }

.emb-design dl {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.75rem 1.5rem;
  margin: 0;
}

.emb-design dt {
  font-family: var(--font-mono);
  font-size: var(--emb-micro-size);
  color: var(--muted);
  align-self: baseline;
}

.emb-design dd { margin: 0; }

.emb-design dl + p { margin-top: var(--emb-brand-x-height); }

.emb-color-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.emb-color-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: var(--border-width) solid var(--border);
  background: var(--bg);
}

.emb-color-list .swatch {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 6px;
  flex-shrink: 0;
}

.emb-color-list .text {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0 0 0.15rem;
}

.emb-color-list .hex {
  font-family: var(--font-mono);
  font-size: var(--emb-micro-size);
  color: var(--muted);
  margin: 0;
}

footer.emb-footer {
  --emb-footer-gap: 1.5rem;
  margin-top: var(--emb-footer-gap);
  padding-top: var(--emb-footer-gap);
  border-top: var(--border-width) solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--muted);
  font-size: var(--emb-micro-large-size);
}

figure.emb-media {
  margin-block: 1.5rem;
}
figure.emb-media :is(img, video, model-viewer, svg, canvas) {
  width: 100%;
  height: auto;
  border: var(--border-width) solid var(--border);
  border-radius: var(--border-radius-lg);
  background: var(--surface);
}

figure.laser-screen canvas {
  display: block;
  aspect-ratio: 1;
  background: black;
}
figure.emb-media figcaption {
  margin-block-start: 0.5rem;
  color: var(--muted);
  font-size: var(--emb-micro-large-size);
  text-align: center;
  text-wrap: balance;
}
.emb-media-downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--emb-pill-gap);
  margin-block-start: 0.5rem;
}
.emb-media-file {
  display: inline-block;
  margin-block: 1.5rem;
}

.scad-live-tool {

  --scad-live-panel-max: calc(100svh / var(--phi));

  padding: 0.5rem;

  background: var(--bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--border-radius-lg);
}

.scad-live-panels img {
  max-block-size: var(--scad-live-panel-max);
  object-fit: contain;
}

figure.scad-live:not([data-mesh]) .scad-live-panels > :first-child {
  border: var(--border-width) solid var(--border);
  border-radius: var(--border-radius-lg);
  background: var(--surface);
  overflow: hidden;
}
figure.scad-live:not([data-mesh]) .scad-live-panels img {
  border: 0;
  border-radius: 0;
  background: none;
}
[data-theme="dark"] figure.scad-live:not([data-mesh]) .scad-live-panels img { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] figure.scad-live:not([data-mesh]) .scad-live-panels img { filter: invert(1); }
}

.scad-live-panels > div > canvas {
  --scad-live-still-ratio: 8 / 5;
  inline-size: 100%;
  aspect-ratio: var(--scad-live-still-ratio);
  max-block-size: var(--scad-live-panel-max);
  border: var(--border-width) solid var(--border);
  border-radius: var(--border-radius-lg);
  background: var(--surface);
  color: var(--yellow);
  cursor: grab;
  touch-action: pan-y;
}
.scad-live-panels > div > canvas:active { cursor: grabbing; }
.scad-live-panels [hidden] { display: none; }

.scripted figure.scad-live[data-mesh]:not(.still) .scad-live-panels img { visibility: hidden; }

.scad-live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--emb-pill-gap);
  margin-block-end: 0.5rem;
}
.scad-live-head output {
  flex: 1;
  min-inline-size: 0;
  text-align: end;
}
.scad-live-head button[hidden] { display: none; }

.scad-live-head .scad-live-render {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--yellow-fg);
}
.scad-live-head .scad-live-render:hover:not(:disabled) {
  background: var(--yellow-hover);
  border-color: var(--yellow-hover);
}
.scad-live-head .scad-live-render:disabled {
  background: color-mix(in srgb, var(--yellow) 15%, transparent);
  border-color: color-mix(in srgb, var(--yellow) 35%, transparent);
  color: var(--faint);
  cursor: default;
}

.scad-live-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--emb-pill-gap);
  margin-inline-start: auto;
}
.scad-live-export:disabled {
  color: var(--faint);
  border-color: color-mix(in srgb, var(--border) 60%, transparent);
  cursor: default;
}
.scad-live-tabs {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
}

.scad-live-tool.scad-live-below {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--emb-pill-gap);
  row-gap: 0.5rem;
}
.scad-live-below .scad-live-head { display: contents; }
.scad-live-below .scad-live-tabs { grid-row: 1; grid-column: 1 / -1; }
.scad-live-below .scad-live-panels { grid-row: 2; grid-column: 1 / -1; min-inline-size: 0; }
.scad-live-below .scad-live-head output { grid-row: 3; grid-column: 1; }
.scad-live-below .scad-live-actions { grid-row: 3; grid-column: 2; }

.scad-live-tool.scad-live-view-below { position: relative; }
.scad-live-view-below .scad-live-tabs > :first-child {
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-end: 0.5rem;
}
.scad-live-view-below .scad-live-head output {
  padding-inline-start: calc(var(--scad-live-view-tab, 0px) + var(--emb-pill-gap));
}
.scad-live-tabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.scad-live-tabs label:has(input:checked) {
  background: var(--section-accent);
  border-color: var(--section-accent);
  color: var(--section-accent-fg);
}
.scad-live-tabs label:has(input:focus-visible) {
  outline: var(--border-width) solid var(--section-accent);
  outline-offset: 2px;
}
@supports selector(:has(*)) {
  @media screen {
    .scad-live-tabs { display: flex; }
    .scad-live-panels > * { display: none; }
    figure.scad-live:has(.scad-live-tabs > :nth-child(1) input:checked) .scad-live-panels > :nth-child(1),
    figure.scad-live:has(.scad-live-tabs > :nth-child(2) input:checked) .scad-live-panels > :nth-child(2),
    figure.scad-live:has(.scad-live-tabs > :nth-child(3) input:checked) .scad-live-panels > :nth-child(3),
    figure.scad-live:has(.scad-live-tabs > :nth-child(4) input:checked) .scad-live-panels > :nth-child(4),
    figure.scad-live:has(.scad-live-tabs > :nth-child(5) input:checked) .scad-live-panels > :nth-child(5),
    figure.scad-live:has(.scad-live-tabs > :nth-child(6) input:checked) .scad-live-panels > :nth-child(6),
    figure.scad-live:has(.scad-live-tabs > :nth-child(7) input:checked) .scad-live-panels > :nth-child(7),
    figure.scad-live:has(.scad-live-tabs > :nth-child(8) input:checked) .scad-live-panels > :nth-child(8) {
      display: block;
    }
    .scad-live-panels .scad-editor { margin-block-start: 0; }
  }
}

@property --scad-editor-line {
  syntax: "<length>";
  inherits: true;
  initial-value: 16px;
}
@property --scad-editor-wave {
  syntax: "<length>";
  inherits: true;
  initial-value: 3px;
}

@property --scad-editor-ch {
  syntax: "<length>";
  inherits: true;
  initial-value: 8px;
}
.scad-editor {
  --scad-editor-ascent: 0.928;
  --scad-editor-descent: 0.236;
  --scad-editor-gutter-ratio: calc(11 / 13);

  --scad-editor-line: round(calc(1em * (var(--scad-editor-ascent) + var(--scad-editor-descent)) + 2px), 1px);
  --scad-editor-wave: calc(1em * var(--scad-editor-descent));
  --scad-editor-ch: 1ch;
  --scad-editor-rows: 24;

  display: grid;
  grid-template-columns: auto 1fr;
  max-block-size: min(calc(var(--scad-editor-rows) * var(--scad-editor-line)), var(--scad-live-panel-max, 100svh));
  margin-block-start: 0.5rem;
  overflow: auto;
  border: var(--border-width) solid var(--border);
  border-radius: var(--border-radius-lg);
  background: var(--surface);
  font-family: Menlo, var(--font-mono);
  font-size: var(--emb-micro-large-size);
  line-height: var(--scad-editor-line);
  text-align: start;
}
.scad-editor:focus-within {
  outline: var(--border-width) solid var(--section-accent);
  outline-offset: 2px;
}
.scad-editor pre,
.scad-editor textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
  tab-size: 4;
}
.scad-editor-gutter {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  padding-inline: 1ch;
  border-inline-end: var(--border-width) solid var(--border);
  background: var(--surface);
  color: var(--faint);
  font-size: calc(1em * var(--scad-editor-gutter-ratio));
  text-align: end;
  user-select: none;
}
.scad-editor-page {
  position: relative;
  background-image: linear-gradient(to top, var(--border) 1px, transparent 1px);
  background-size: 100% var(--scad-editor-line);
}
.scad-editor-ink,
.scad-editor textarea {
  padding-inline: 1ch;
  color: var(--text);
}
.scad-editor-ink {
  position: relative;
  z-index: 1;
  min-inline-size: 100%;
  inline-size: max-content;
  pointer-events: none;
}
.scad-editor textarea {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;

  padding-block: 0;
  border: 0;
  outline: 0;
  background: transparent;
  caret-color: var(--title);
  overflow: hidden;
  resize: none;
}
.scad-editor textarea::selection {
  background: light-dark(#CCEBFF, #003857);
}
figure.scad-live:not(.live) .scad-editor-ink { visibility: hidden; }
figure.scad-live.live textarea,
figure.scad-live.live textarea::selection { color: transparent; }

.scad-editor-ink .function { color: var(--green); }
.scad-editor-ink .module   { color: var(--yellow); }
.scad-editor-ink .variable { color: var(--blue); }
.scad-editor-ink .literal  { color: var(--red); }
.scad-editor-ink .keyword  { color: var(--muted); }
.scad-editor-ink .operator { color: light-dark(#71717A, #8A8A93); }
.scad-editor-ink .comment  { color: var(--faint); }

.scad-editor-ink mark {
  display: inline-block;
  min-inline-size: calc(100% + 2ch);
  margin-inline: -1ch;
  padding-inline: 1ch;
  background: color-mix(in srgb, #FF3B30 12%, transparent);
  color: #FF3B30;
}

.scad-editor-ink mark button {
  pointer-events: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: calc(var(--scad-editor-wave) / 2);
  cursor: pointer;
}
.scad-editor-gutter mark {
  background: none;
  color: #FF3B30;
}
.scad-live-tabs label.noted span::after {
  content: " !";
  color: #FF3B30;
  font-weight: 700;
}
.scad-live-tabs label.noted:has(input:checked) span::after { color: inherit; }
figure.scad-live output {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--emb-micro-large-size);
  white-space: pre-wrap;
}

@media print {
  @page { margin: 1in; }

  :root {
    color-scheme: light;
    --bg:      #FFFFFF;
    --surface: #FFFFFF;
    --border:  #BBBBBB;
    --text:    #000000;
    --muted:   #444444;
    --faint:   #888888;
    --title:   #000000;
  }

  .bar,
  .emb-filter,
  footer.emb-footer
    { display: none !important; }

  main > section,
  .emb-cards > article,
  .emb-cards > a,
  .emb-card-rich,
  .emb-color-list li {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 1.5rem;
  }

  .emb-cards { display: block; }

  .emb-status,
  .emb-type {
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 0.5em;
    color: #444;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }
  a[href^="http"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
    word-break: break-all;
  }

  h1, h2, h3, h4, h5, h6 {
    break-after: avoid;
    page-break-after: avoid;
  }
  .emb-cards > *,
  .emb-card-updates li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}