@font-face {
  font-family:Quicksand;
  src:url("/assets/quicksand-semibold-daa2955b.woff2") format("woff2");
  font-weight:600 900;
  font-display:swap
}
@font-face {
  font-family:"Open Sans";
  src:url("/assets/open-sans-semibold-270df7d8.woff2") format("woff2");
  font-weight:600 900;
  font-display:swap
}
@font-face {
  font-family:"JetBrains Mono";
  src:url("/assets/jetbrains-mono-semibold-c18b1085.woff2") format("woff2");
  font-weight:600 900;
  font-display:swap
}
@font-face {
  font-family:Quicksand;
  src:url("/assets/quicksand-eb0fa9fc.woff2") format("woff2");
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:"Open Sans";
  src:url("/assets/open-sans-b73bf2ee.woff2") format("woff2");
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:"JetBrains Mono";
  src:url("/assets/jetbrains-mono-30fee007.woff2") format("woff2");
  font-weight:400;
  font-display:swap
}
:root {
  --red:#CC3429;
  --yellow:#F2BE11;
  --green:#889E2F;
  --blue:#04458F;
  --cyan:#1F6F9C;
  --purple:#8D50A3;
  --gray:#656A6E;
  --black:#1C1C1C;
  --canvas:#1C1C1C;
  --surface:#262626;
  --text:#F5F5F5;
  --secondary:#bfc1c3;
  --border:#737373;
  --focus:#F2BE11;
  /* Brand hues adjusted to keep code legible on the dark surface. */
  --code-purple:#AE83BE;
  --code-yellow:var(--yellow);
  --code-green:var(--green);
  --code-cyan:#6099B9;
  --code-red:#DC736B;
  color-scheme:dark
}
@media(prefers-color-scheme:light) {
  :root:not([data-theme=dark]) {
    --canvas:#FAFAF8;
    --surface:#FFFFFF;
    --text:#1C1C1C;
    --secondary:#55595c;
    --border:#8A8D8A;
    --focus:#04458F;
    --code-purple:var(--purple);
    --code-yellow:#886A0A;
    --code-green:#667623;
    --code-cyan:var(--cyan);
    --code-red:var(--red);
    color-scheme:light
  }
}
:root[data-theme=light] {
  --canvas:#FAFAF8;
  --surface:#FFFFFF;
  --text:#1C1C1C;
  --secondary:#55595c;
  --border:#8A8D8A;
  --focus:#04458F;
  --code-purple:var(--purple);
  --code-yellow:#886A0A;
  --code-green:#667623;
  --code-cyan:var(--cyan);
  --code-red:var(--red);
  color-scheme:light
}
* {
  box-sizing:border-box
}
html {
  background:var(--canvas);
  color:var(--text)
}
body {
  margin:0;
  font:16px/1.7 "Open Sans",system-ui,sans-serif;
  min-width:0
}
h1,h2,h3,nav,.identity {
  font-family:Quicksand,system-ui,sans-serif
}
h1 {
  font-weight:600;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.18;
  letter-spacing:-.035em;
  margin:.3em 0 .6em;
  overflow-wrap:anywhere
}
h2 {
  font-size:1.5rem;
  line-height:1.3;
  font-weight:600;
  margin:0 0 .4em
}
p {
  margin:0 0 1.2em
}
a {
  color:inherit;
  text-underline-offset:.24em
}
a:hover {
  text-decoration-thickness:2px
}
button,input,textarea,select {
  font:inherit;
  color:inherit
}
button,.button,input[type=submit] {
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--surface);
  padding:.65rem 1rem;
  border-radius:10px;
  min-height:44px;
  text-decoration:none
}
button:hover,.button:hover {
  border-color:var(--text)
}
button[hidden],[hidden] {
  display:none!important
}
input:not([type=checkbox]),textarea,select {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.6rem .8rem;
  max-width:100%
}
input:not([type=checkbox]):not([type=submit]),textarea {
  width:100%
}
textarea.source-input {
  font-family:"JetBrains Mono",monospace
}
a,button,input,select,textarea,summary {
  touch-action:manipulation
}
:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:4px
}
input:not([type=submit]):focus-visible,
textarea:focus-visible,
select:focus-visible,
lexxy-editor [contenteditable]:focus-visible {
  outline:none;
  border-color:var(--text)
}
lexxy-editor:focus-within { border-color:var(--text) }
.skip-link {
  position:absolute;
  left:1rem;
  top:-100px;
  z-index:10;
  background:var(--surface);
  padding:1rem
}
.skip-link:focus {
  top:1rem
}
.site-header {
  max-width:1480px;
  margin:auto;
  padding:1.4rem clamp(1rem,4vw,4rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}
.identity {
  display:flex;
  gap:.8rem;
  align-items:center;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap
}
.brand-mark {
  font-size:2rem;
  font-weight:700;
  letter-spacing:-.25em;
  padding-right:.3em;
  position:relative;
  border-bottom:4px solid transparent
}
.brand-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  border-radius: 999px;
  background: var(--red);
}
.brand-mark span { vertical-align:4px; margin-left:-0.015em }
.site-header nav {
  display:flex;
  align-items:center;
  gap:1.5rem
}
.site-header nav>a {
  display:flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  position:relative;
  border-bottom:5px solid transparent
}
.site-header nav>.nav-sketches {
  --nav-accent:var(--cyan)
}
.site-header nav>.nav-about {
  --nav-accent:var(--yellow)
}
.site-header nav>.nav-contact {
  --nav-accent:var(--purple)
}
.site-header nav>.nav-carthage {
  --nav-accent:var(--red)
}
.site-header nav>a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:5px;
  border-radius:999px;
  background:var(--nav-accent,var(--green));
  opacity:0;
  pointer-events:none
}
.site-header nav>a:hover::after,.site-header nav>a[aria-current=page]::after { opacity:1 }
.appearance {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--secondary);
  flex-shrink:0
}
.appearance:hover {
  color:var(--text)
}
.menu-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border-color:transparent;
  border-radius:50%;
  background:transparent;
  color:var(--secondary)
}
.menu-toggle:hover {
  background:var(--surface);
  color:var(--text);
  border-color:transparent
}
.menu-toggle .menu-close,
.menu-toggle[aria-expanded=true] .menu-lines { display:none }
.menu-toggle[aria-expanded=true] .menu-close { display:block }
main {
  min-height:65dvh
}
.home {
  max-width:1480px;
  margin:auto;
  padding:1rem clamp(1rem,4vw,4rem)
}
.home-intro h1 {
  font-size:clamp(1.35rem,2.7vw,2.3rem);
  max-width:38ch;
  line-height:1.35;
  letter-spacing:-.025em
}
.runtime {
  --runtime-radius:18px;
  position:relative;
  min-height:420px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--runtime-radius);
  clip-path:inset(0 round var(--runtime-radius));
  overflow:hidden
}
.home-runtime {
  height:calc(100dvh - 270px - env(safe-area-inset-bottom));
  min-height:320px
}
.runtime-stage {
  position:absolute;
  inset:0
}
.runtime-stage iframe {
  border:0;
  width:100%;
  height:100%;
  display:block
}
.runtime-fallback {
  position:absolute;
  inset:0
}
.fallback-image {
  width:100%;
  height:100%;
  object-fit:cover
}
.calm-canvas {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:var(--surface);
  color:var(--secondary)
}
.calm-canvas span {
  font-family:"JetBrains Mono",monospace;
  letter-spacing:1.5rem;
  font-size:1.4rem
}
.runtime-controls {
  position:absolute;
  bottom:0;
  padding:.3rem .7rem;
  display:flex;
  gap:.5rem;
  align-items:center;
  font-size:.75rem;
  width:100%;
  background:var(--surface)
}
.editorial {
  max-width:calc(72ch + 3rem);
  margin:3rem auto 5rem;
  padding:0 1.5rem
}
.editorial.wide {
  max-width:1080px
}
.lede {
  color:var(--secondary);
  font-size:1.15rem;
  max-width:65ch
}
.tags {
  display:flex;
  gap:0 .35rem;
  flex-wrap:wrap;
  margin:1rem 0
}
.tags a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  max-width:100%;
  padding:0 .125rem;
  border-radius:3px;
  font-family:"JetBrains Mono",monospace;
  font-size:.85rem;
  line-height:1.4;
  text-decoration:none
}
.tags a span {
  padding:.1rem .4rem;
  border:1px solid var(--border);
  border-radius:3px;
  background:var(--surface);
  overflow-wrap:anywhere
}
.tags a:hover span,.tags a:focus-visible span {
  border-color:var(--text)
}
.tags a[aria-current=true] span {
  background:var(--text);
  color:var(--canvas);
  border-color:var(--text)
}
.row-arrow { width:24px; height:24px; align-self:start; margin-top:.3rem; filter:var(--icon-filter) }
.project-row { --row-accent:var(--green) }
.sketch-row { --row-accent:var(--cyan) }
.project-row,.sketch-row {
  position:relative;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 24px;
  gap:1rem;
  padding:2rem 0 2rem .8rem;
  border-top:1px solid var(--border);
  color:var(--text);
  text-decoration:none
}
.project-row::before,.sketch-row::before {
  content:"";
  position:absolute;
  left:0;
  top:2rem;
  bottom:2rem;
  width:5px;
  border-radius:999px;
  background:var(--row-accent);
  pointer-events:none
}
.project-row h2 a { text-decoration:none }
.project-row h2 a::after { content:""; position:absolute; inset:0 }
.project-row h2 a:hover,.sketch-row:hover h2 { text-decoration:underline }
.project-row h2 a:focus-visible { outline:none }
.project-row h2 a:focus-visible::after { outline:3px solid var(--focus); outline-offset:4px }
.project-row .tags a { position:relative; z-index:1 }
.project-row p,.sketch-row p { color:var(--secondary); margin-bottom:.5rem }
.project-icon,.sketch-icon { display:block }
.project-row .tags { margin:.5rem 0 0 }
.empty { padding:3rem 0; color:var(--secondary) }
.engine {
  font-family:"JetBrains Mono",monospace;
  text-transform:uppercase;
  min-width:60px;
  border-top:3px solid var(--cyan);
  padding-top:.5rem
}
.external-links { --project-link-color:color-mix(in srgb,var(--code-green) 80%,var(--text)) }
.external-links a span {
  color:var(--project-link-color);
  border-color:color-mix(in srgb,var(--project-link-color) 55%,var(--canvas));
  background:color-mix(in srgb,var(--project-link-color) 12%,var(--canvas));
  font-weight:600
}
.external-links a:hover span,.external-links a:focus-visible span { border-color:var(--project-link-color) }
.prose {
  overflow-wrap:anywhere
}
.prose p {
  margin-block:0 1em
}
.prose h1,.prose h2,.prose h3 {
  margin-top:1.5em
}
.prose img,.attachment img {
  max-width:100%;
  height:auto;
  border-radius:12px
}
.prose pre {
  overflow-x:auto;
  white-space:pre;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.5rem;
  font-family:"JetBrains Mono",monospace
}
.prose table {
  display:block;
  overflow-x:auto
}
.prose ul,.prose ol {
  padding-left:1.6rem
}
.prose blockquote {
  margin-left:0;
  padding-left:1.5rem;
  border-left:3px solid var(--yellow);
  color:var(--secondary)
}
.contact-actions {
  margin-top:3rem
}
.contact-actions a {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:1.3rem 0;
  border-top:1px solid var(--border);
  text-decoration:none;
  font-family:Quicksand;
  font-size:1.4rem
}
.contact-actions .row-arrow { align-self:center; margin-top:0 }
.contact-actions a:before {
  content:"";
  height:12px;
  width:12px;
  border-radius:4px;
  background:var(--purple);
  align-self:center
}
.contact-actions a:nth-child(4n+1):before { background:var(--red) }
.contact-actions a:nth-child(4n+2):before { background:var(--green) }
.contact-actions a:nth-child(4n+3):before { background:var(--yellow) }
.contact-actions a span:first-child {
  flex:1
}
.accent-projects {
  border-left:3px solid var(--green);
  padding-left:.7rem
}
.accent-contact {
  border-left:3px solid var(--purple);
  padding-left:.7rem
}
.accent-sketches {
  border-left:3px solid var(--cyan);
  padding-left:.7rem
}
.cms-shell {
  max-width:1100px;
  margin:2rem auto;
  padding:0 1.5rem
}
.cms-nav {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
  border-bottom:1px solid var(--border);
  padding-bottom:1rem;
  margin-bottom:2rem
}
.field {
  margin:1.3rem 0
}
.field label {
  display:block;
  font-weight:600;
  margin-bottom:.4rem
}
.cms-shell .bordered-checkbox {
  display:flex;
  align-items:center;
  gap:.75rem;
  width:100%;
  min-height:54px;
  padding:1rem;
  margin:.75rem 0;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  font-weight:500;
  cursor:pointer
}
.cms-shell .bordered-checkbox:hover { border-color:var(--secondary) }
.cms-shell .bordered-checkbox:focus-within {
  border-color:var(--text)
}
.cms-shell .bordered-checkbox input[type=checkbox] {
  width:16px;
  height:16px;
  margin:0;
  flex-shrink:0;
  accent-color:var(--cms-green);
  cursor:pointer
}
.field p {
  font-size:.85rem;
  color:var(--secondary)
}
.editor-status {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
  color:var(--secondary)
}
.editor-section {
  min-width:0;
  margin:2rem 0;
  padding:1rem 0 0;
  border:0;
  border-top:1px solid var(--border)
}
.editor-section legend {
  padding-right:.75rem;
  font-family:Quicksand,sans-serif;
  font-size:1.15rem;
  font-weight:600
}
.form-actions {
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:2rem
}
.editor-accordion {
  border:1px solid var(--border);
  border-radius:8px;
  margin:1.5rem 0;
}
.editor-pane + .editor-pane { border-top:1px solid var(--border) }
.editor-pane > summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  min-height:58px;
  font-weight:600;
  color:var(--secondary);
  list-style:none;
  cursor:pointer;
}
.editor-pane:first-child > summary { border-radius:8px 8px 0 0 }
.editor-pane:last-child:not([open]) > summary { border-radius:0 0 8px 8px }
.editor-pane > summary::-webkit-details-marker { display:none }
.editor-pane > summary::after {
  content:"";
  width:9px;
  height:9px;
  flex-shrink:0;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.editor-pane > summary:hover,
.editor-pane[open] > summary {
  color:var(--text);
  background:var(--surface);
}
.editor-pane[open] > summary::after { transform:rotate(225deg) }
.editor-pane > summary:focus-visible {
  outline:none;
  box-shadow:inset 0 0 0 1px var(--text);
}
.editor-pane-body {
  padding:1.25rem;
  border-top:1px solid var(--border);
}
@media (prefers-reduced-motion:reduce) {
  .editor-pane > summary::after { transition:none }
}
.media-picker {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));
  gap:1rem
}
.cms-shell .media-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  padding:.75rem;
  min-width:0;
  width:100%;
  aspect-ratio:1;
  min-height:180px;
  text-align:left;
  border-radius:8px
}
.media-card:hover { border-color:var(--cms-blue) }
.media-thumbnail {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  flex:1;
  min-height:64px;
  border-radius:6px;
  overflow:hidden;
  background:var(--surface);
  color:var(--secondary)
}
.media-thumbnail img { width:100%; height:100%; object-fit:cover }
.media-file-kind { font-size:.75rem; font-weight:600 }
.media-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 600;
  overflow-wrap: anywhere;
  flex-shrink: 0;
}
.media-filename {
  width: 100%;
  font-size: 0.75rem;
  color: var(--secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.settings-fields select { width:100% }
.flash {
  padding:1rem 2rem;
  border-left:4px solid var(--green);
  margin:1rem
}
.error {
  border-left:4px solid var(--red);
  padding:1rem
}
.standalone .runtime {
  --runtime-radius:0px;
  border:0;
  border-radius:0;
  height:100dvh;
  min-height:100dvh
}
.standalone .runtime-stage {
  inset:0
}
.standalone .runtime-controls {
  width:auto;
  opacity:.7
}
.standalone .runtime-controls:hover {
  opacity:1
}
lexxy-editor {
  --lexxy-color-code-token-att: var(--code-purple);
  --lexxy-color-code-token-comment: var(--secondary);
  --lexxy-color-code-token-function: var(--code-green);
  --lexxy-color-code-token-operator: var(--code-cyan);
  --lexxy-color-code-token-property: var(--code-green);
  --lexxy-color-code-token-punctuation: var(--text);
  --lexxy-color-code-token-selector: var(--code-yellow);
  --lexxy-color-code-token-variable: var(--code-red);
  --lexxy-color-canvas: var(--surface);
  --lexxy-color-text: var(--text);
  --lexxy-color-ink: var(--text);
  --lexxy-color-ink-medium: var(--secondary);
  --lexxy-color-ink-light: var(--secondary);
  --lexxy-color-ink-lighter: var(--border);
  --lexxy-color-ink-lightest: var(--surface);
  --lexxy-color-text-subtle: var(--secondary);
  --lexxy-color-code-bg: var(--bg);
  border:1px solid var(--border);
  min-width:0;
}
lexxy-editor .lexxy-editor__content {
  min-height:240px;
}
figcaption {
  color:var(--secondary);
  font-size:.85rem
}
@media(max-width:900px) {
  .site-header {
    gap:1rem;
    flex-wrap:wrap
  }
  .site-header nav {
    gap:1rem
  }
  .identity>span:last-child {
    font-size:.9rem
  }
}
@media(max-width:700px) {
  .identity>span:last-child {
    display:none
  }
  .menu-toggle {
    display:inline-flex
  }
  .site-header {
    padding:1rem;
    position:relative
  }
  .site-header nav {
    display:flex;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:.3rem
  }
  .site-header:has(.menu-toggle[data-enhanced]) nav:not(.open) {
    display:none
  }
  .site-header nav>a {
    padding:.4rem
  }
  .home {
    padding:1rem
  }
  .home-runtime {
    height:calc(100dvh - 240px);
    min-height:300px
  }
  .editorial {
    margin:2rem auto;
    padding:0 1rem
  }
  .project-row,.sketch-row {
    grid-template-columns:36px minmax(0,1fr);
    gap:.7rem
  }
  .project-row>.row-arrow,.sketch-row>.row-arrow {
    display:none
  }
  .runtime {
    min-height:360px
  }
}
@media(prefers-reduced-motion:no-preference) {
  button,a {
    transition:background-color .12s,border-color .12s
  }
  .site-header nav.open {
    animation:menu-in .15s ease-out
  }
  @keyframes menu-in {
    from {
      opacity:0;
      transform:translateY(-4px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
}
.prose ul {
  list-style:disc
}
.prose ol {
  list-style:decimal
}
.cms-shell ul {
  list-style:disc;
  padding-left:1.5rem
}
:root {
  --icon-filter:invert(.9)
}
:root[data-theme=light] {
  --icon-filter:none
}
@media(prefers-color-scheme:light) {
  :root:not([data-theme=dark]) {
    --icon-filter:none
  }
}
.project-icon img,.detail-icon img {
  filter:var(--icon-filter);
  display:inline-block;
  vertical-align:middle
}
.prose pre,.trix-content pre,.trix-content code[data-language] {
  display:block;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  padding:1rem;
  border-radius:12px;
  overflow-x:auto;
  white-space:pre
}
.accent-about {
  border-left:3px solid var(--yellow);
  padding-left:.7rem
}
.cms-nav a {
  display:inline-flex;
  min-height:44px;
  align-items:center
}

.runtime .runtime-controls:has([role=status]:empty) { display:none }
input[type=file] {
  display:block;
  padding:0;
  min-height:46px;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:var(--surface);
  color:var(--secondary);
  font-size:.9rem;
  cursor:pointer
}
input[type=file]::file-selector-button {
  font:inherit;
  font-weight:600;
  color:var(--code-cyan);
  background:transparent;
  border:0;
  border-right:1px solid var(--code-cyan);
  border-radius:0;
  min-height:46px;
  padding:.75rem 1rem;
  margin:0 1rem 0 0;
  cursor:pointer
}
input[type=file]::file-selector-button:hover {
  color:var(--text);
  border-right-color:var(--text)
}
.cms-shell ul,.cms-shell ol { padding-left:1.6rem; margin:1rem 0 1.5rem }
.cms-shell ol { list-style:decimal }
.cms-shell li { padding:.25rem 0 }
.cms-shell li::marker { color:var(--secondary) }
.table-scroll { overflow-x:auto; margin-top:1.5rem }
.cms-shell table { width:100%; border-collapse:collapse; text-align:left; font-size:.9rem }
.cms-shell th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  background: var(--surface);
}
.cms-shell th,.cms-shell td { padding:1rem; border-bottom:1px solid var(--border); vertical-align:middle }
.cms-shell td:first-child { font-weight:600 }
.cms-shell tbody tr:hover { background:var(--surface) }
.cms-shell td button { font-size:.8rem; padding:.4rem .7rem }
.cms-shell .record-status {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--secondary);
}
.prose th,.prose td { padding:.7rem 1rem; border-bottom:1px solid var(--border); text-align:left }
.prose th { background:var(--surface); font-weight:600 }
@media(max-width:700px) {
  .cms-shell { padding:0 1rem }
  .cms-shell th,.cms-shell td { padding:.75rem .5rem }
  .cms-shell td:first-child { min-width:8rem; overflow-wrap:anywhere }
}

.cms-shell caption {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

/* Token categories follow the previous Jericho highlighting theme. */
.hljs { color:var(--text) }
.hljs-comment,.hljs-quote { color:var(--secondary); font-style:italic }
.hljs-keyword,.hljs-selector-tag,.hljs-addition { color:var(--code-purple) }
.hljs-string,.hljs-meta .hljs-string,.hljs-literal,.hljs-doctag,.hljs-regexp {
  color:var(--code-yellow)
}
.hljs-number,.hljs-section,.hljs-name,.hljs-selector-id,.hljs-selector-class,
.hljs-attribute,.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-title,.hljs-type {
  color:var(--code-green)
}
.hljs-symbol,.hljs-bullet,.hljs-subst,.hljs-meta,.hljs-meta .hljs-keyword,
.hljs-selector-attr,.hljs-selector-pseudo,.hljs-link { color:var(--code-cyan) }
.hljs-built_in,.hljs-class,.hljs-deletion,.hljs-class .hljs-title,.hljs-title.class_ {
  color:var(--code-red)
}
.hljs-function .hljs-title,.hljs-title.function_ { color:var(--code-green) }
.hljs-formula { background:var(--code-green); color:var(--canvas) }
.hljs-emphasis { font-style:italic }
.hljs-strong { font-weight:600 }

/* Carthage uses the brand palette to distinguish content states and actions. */
.cms-shell {
  --cms-green:color-mix(in srgb,var(--code-green) 80%,var(--text));
  --cms-amber:var(--code-yellow);
  --cms-blue:var(--code-cyan);
  --cms-purple:var(--code-purple);
  --cms-red:var(--code-red)
}
.cms-shell .flash:not(.error) {
  color:var(--cms-green);
  border-left-color:var(--cms-green);
  background:color-mix(in srgb,var(--cms-green) 8%,var(--canvas))
}
.cms-shell .record-status {
  --status-color:var(--secondary);
  color:var(--status-color);
  border-color:color-mix(in srgb,var(--status-color) 55%,var(--canvas));
  background:var(--cms-fill,color-mix(in srgb,var(--status-color) 12%,var(--canvas)));
  font-weight:600
}
.cms-shell .record-status[data-status=published] { --status-color:var(--cms-green) }
.cms-shell .record-status[data-status=draft] { --status-color:var(--cms-amber) }
.cms-shell .record-status[data-status=public] { --status-color:var(--cms-green) }
.cms-shell .record-status[data-status=private] { --status-color:var(--cms-amber) }
.cms-shell .record-status[data-engine=html] { --status-color:var(--cms-red) }
.cms-shell .record-status[data-engine=p5] { --status-color:var(--cms-blue) }
.cms-shell .record-status[data-engine=three] { --status-color:var(--cms-amber) }
.cms-shell :is(button,.button,input[type=submit]) {
  background:var(--cms-fill,var(--surface))
}
.cms-shell :is(.button,input[type=submit],button[name=publication],button.destructive,.preview-action) {
  --action-color:var(--cms-blue);
  color:var(--action-color);
  border-color:var(--action-color);
  background:var(--cms-fill,color-mix(in srgb,var(--action-color) 10%,var(--surface)))
}
.cms-shell input[type=submit] { --action-color:var(--cms-green) }
.cms-shell button[name=publication] { --action-color:var(--cms-amber) }
.cms-shell button.destructive { --action-color:var(--cms-red) }
.cms-shell :is(.button,input[type=submit],button[name=publication],button.destructive,.preview-action):hover {
  background:var(--cms-fill,color-mix(in srgb,var(--action-color) 20%,var(--surface)))
}
.cms-nav a[aria-current=page] {
  color:var(--cms-red);
  text-decoration-color:var(--cms-red);
  text-decoration-thickness:3px;
  text-underline-offset:.5rem;
  font-weight:600
}
.cms-shell [role=alert] {
  color:var(--cms-red);
  border-left:4px solid currentColor;
  padding:1rem;
  background:color-mix(in srgb,var(--cms-red) 8%,var(--canvas))
}
.cms-shell [role=status] {
  color:var(--cms-amber);
  border-left:4px solid currentColor;
  padding:1rem;
  background:color-mix(in srgb,var(--cms-amber) 8%,var(--canvas))
}

.cms-shell :is(button,.button,input[type=submit]) {
  border-radius:3px
}

:root[data-theme=dark] .cms-shell { --cms-fill:transparent }
.cms-nav .button_to { display:inline-flex; margin:0 }
.cms-nav .cms-sign-out,.cms-shell button.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  color:var(--cms-red);
  border:0;
  background:transparent
}
.cms-nav .cms-sign-out:hover,.cms-shell button.icon-button:hover { color:var(--red); background:transparent }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme=light]) .cms-shell { --cms-fill:transparent }
}

.site-footer {
  max-width:1480px;
  margin:0 auto;
  padding:1rem clamp(1rem,4vw,4rem);
  display:flex;
  justify-content:flex-end
}
.site-footer .appearance { opacity:.7 }
.site-footer .appearance:hover,.site-footer .appearance:focus-visible { opacity:1 }

.dashboard-counts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:2rem 0 3rem }
.dashboard-counts>div { --count-accent:var(--cms-amber); position:relative; padding-top:.75rem }
.dashboard-counts > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 999px;
  background: var(--count-accent);
}
.dashboard-counts>div:nth-child(2) { --count-accent:var(--cms-green) }
.dashboard-counts>div:nth-child(3) { --count-accent:var(--cms-purple) }
.dashboard-counts>div:nth-child(4) { --count-accent:var(--cms-blue) }
.dashboard-counts dt { color:var(--secondary); font-size:.85rem }
.dashboard-counts dd { margin:0; font:600 2rem/1.5 Quicksand,sans-serif }
.cms-shell section+section { margin-top:3rem }
.dashboard-tables { display:grid; gap:3rem; align-items:start }
.cms-shell .dashboard-tables>section { min-width:0; margin-top:0 }
@media (min-width:1100px) {
  .dashboard-tables { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem }
}
@media(max-width:700px) {
  .dashboard-counts { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

.content-tabs {
  display:flex;
  gap:.5rem;
  padding-bottom:.75rem;
  margin-top:1.5rem
}
.cms-shell .content-tabs button {
  display:inline-block;
  min-height:0;
  padding:.1rem .4rem;
  border:1px solid color-mix(in srgb,var(--cms-blue) 55%,var(--canvas));
  border-radius:3px;
  background:var(--cms-fill,color-mix(in srgb,var(--cms-blue) 12%,var(--canvas)));
  color:var(--cms-blue);
  font-family:"JetBrains Mono",monospace;
  font-size:.85rem;
  line-height:1.4;
  font-weight:600;
  white-space:nowrap
}
.cms-shell .content-tabs button[aria-selected=true] {
  border-color:var(--cms-blue);
  background:var(--cms-fill,color-mix(in srgb,var(--cms-blue) 22%,var(--surface)))
}

@media (min-width:900px) {
  .project-details-fields,
  .settings-fields {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
    margin:1.3rem 0;
    align-items:start
  }
  .project-details-fields > .field,
  .settings-fields > .field { margin:0; min-width:0 }
  .settings-fields > .field-wide { grid-column:1 / -1 }
}

.field-label {
  display:block;
  font-weight:600;
  margin-bottom:.4rem
}
.icon-input-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.icon-input-row:focus-within { border-color:var(--text) }
.icon-input-row input { flex:1; min-width:0; border:0; border-radius:0 }
.icon-preview { display:grid; place-items:center; flex:0 0 48px; min-height:46px; border-right:1px solid var(--border) }
.icon-preview img,.sketch-icon img { filter:var(--icon-filter) }
.sketch-icon { flex:none }
.icon-input-row:has(input[aria-invalid="true"]) { border-color:var(--red) }

@media (max-width:700px) {
  .media-picker { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

.cms-shell .form-actions {
  justify-content:flex-end;
  gap:.5rem
}
.cms-shell .form-actions :is(button,.button,input[type=submit]),
.cms-shell > .button,
.cms-shell .preview-action {
  font-size:.875rem;
  min-height:36px;
  padding:.4rem .75rem
}
.cms-shell > .button {
  display:table;
  margin-left:auto
}
.editor-pane-body > .preview-action {
  display:block;
  margin-left:auto
}
.cms-nav .button_to { margin-left:auto }

.records-table th:last-child,
.records-table td:last-child { text-align:right }
.records-table td.empty { text-align:left }
.records-table .button_to { display:inline-flex; margin:0 }
.cms-shell .records-table .record-create {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  color:var(--cms-blue);
  border-radius:3px
}
.records-table .record-create:hover { background:var(--canvas) }
.cms-shell .records-table button.icon-button { width:48px; height:48px; min-height:48px }

.file-upload[data-enhanced=true] {
  position:relative;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  overflow:hidden
}
.file-upload[data-enhanced=true] input[type=file] {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  z-index:1
}
.file-upload-display {
  display:flex;
  align-items:stretch;
  min-height:46px;
  font-size:.9rem
}
.file-upload-trigger {
  display:flex;
  align-items:center;
  flex-shrink:0;
  padding:.75rem 1rem;
  font-weight:600;
  color:var(--code-cyan);
  border-right:1px solid var(--code-cyan)
}
.file-upload-name {
  align-self:center;
  padding:.75rem 1rem;
  color:var(--secondary);
  min-width:0;
  overflow-wrap:anywhere
}
.file-upload:focus-within { border-color:var(--text) }
.file-upload:hover .file-upload-trigger { color:var(--text); border-color:var(--text) }

.cms-shell .button.download-action { --action-color:var(--cms-purple) }
.media-preview {
  margin:1.3rem 0;
  padding:1.25rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface)
}
.media-preview-image,
.media-preview video {
  display:block;
  width:100%;
  max-height:420px;
  object-fit:contain;
  border-radius:6px
}
.media-preview audio { display:block; width:100% }
.media-preview-file {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  padding:2rem;
  color:var(--secondary)
}
.media-preview-metadata {
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  margin:1rem 0 0
}
.media-preview-metadata > div { min-width:0 }
.media-preview-metadata dt { font-size:.75rem; color:var(--secondary) }
.media-preview-metadata dd { margin:0; color:var(--text); overflow-wrap:anywhere }

.media-preview-text pre {
  margin:0;
  padding:1rem;
  max-height:420px;
  overflow:auto;
  white-space:pre;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--canvas);
  font-family:"JetBrains Mono",monospace;
  font-size:.85rem;
  line-height:1.6;
  tab-size:2
}
.media-preview-limit { font-size:.85rem; color:var(--secondary) }

.media-preview-text.is-plain-text pre { white-space:pre-wrap; overflow-wrap:anywhere }

.editor-heading {
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:2rem
}
.editor-heading h1 { margin:0 }
.cms-shell .editor-heading .form-actions { margin:0; align-self:stretch }
@media (min-width:900px) {
  .editor-heading { flex-direction:row; align-items:center; justify-content:space-between }
  .editor-heading h1 { order:-1; min-width:0 }
  .cms-shell .editor-heading .form-actions { align-self:auto; flex-shrink:0 }
  .title-slug-fields {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
    margin:1.3rem 0
  }
  .title-slug-fields > .field { margin:0; min-width:0 }
}

.cms-shell .form-actions .action-icon,
.cms-shell .action-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:48px;
  height:48px;
  min-height:48px;
  padding:0;
  border:0;
  background:var(--cms-fill,color-mix(in srgb,var(--action-color,var(--cms-blue)) 10%,var(--surface)));
  color:var(--action-color,var(--cms-blue));
  text-decoration:none
}
.cms-shell .form-actions .action-icon:hover,
.cms-shell .action-icon:hover {
  background: var(--cms-fill, color-mix(in srgb, var(--action-color, var(--cms-blue)) 20%, var(--surface)));
}
.cms-shell .save-action { --action-color:var(--cms-green) }

.cms-shell .action-icon:hover,
.cms-nav .cms-sign-out:hover,
.cms-shell .record-create:hover,
.cms-shell button.icon-button:hover {
  box-shadow:inset 0 0 0 1px currentColor
}

.cms-shell .action-icon svg { width:30px; height:30px; flex-shrink:0 }

.cms-shell .cms-nav .cms-sign-out,
.cms-shell .cms-nav .cms-sign-out:hover { background:transparent }

.markdown-import-upload { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem }
.markdown-import-upload input[type=file] { flex:1; min-width:0 }

@media (max-width:899px) {
  .cms-shell .editor-heading .form-actions { justify-content:flex-start }
  .cms-shell :is(.action-icon,.cms-sign-out,.record-create,.icon-button) svg { width:24px; height:24px }
}

.detail-icon { display:flex; margin-bottom:1rem }

.settings-media-field { min-width:0; padding:0; border:0 }
.settings-media-field>legend { padding:0; font:600 1rem/1.7 "Open Sans",system-ui,sans-serif }
.settings-media-library { border:1px solid var(--border); border-radius:8px; overflow:hidden }
.settings-media-library > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  list-style: none;
  cursor: pointer;
}
.settings-media-library>summary::-webkit-details-marker { display:none }
.settings-media-library>summary>span { min-width:0; overflow-wrap:anywhere }
.settings-media-library > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.settings-media-library[open]>summary::after { transform:rotate(225deg) }
.settings-media-library .media-picker { padding:.75rem; border-top:1px solid var(--border) }
.cms-shell label.media-card {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--cms-fill, var(--surface));
  font-weight: 400;
  cursor: pointer;
}
.cms-shell label.media-card:has(input:checked) {
  border-color: var(--cms-blue);
  box-shadow: inset 0 0 0 1px var(--cms-blue);
}
.cms-shell label.media-card:focus-within { outline:3px solid var(--focus); outline-offset:2px }
.cms-shell .media-card input[type="radio"] {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--cms-blue);
}

article.editorial>.tags { margin:-.5rem 0 }

.detail-icon-project { color:var(--green) }
.detail-icon-sketch { color:var(--cyan) }