@font-face{font-family:Archivo;src:url('fonts/archivo.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:Plex;src:url('fonts/plex-sans.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:PlexMono;src:url('fonts/plex-mono.ttf') format('truetype');font-weight:400;font-display:swap}
:root {
  color-scheme:light;
  --paper:#f5f7fc; --surface:#ffffff; --ink:#152e3b; --blue:#2f5dd5;
  --coral:#dd654e; --teal:#17786d; --muted:#54647a; --line:#cbd5e4;
  --art-paper:#315ddd; --art-accent:#ffbf8a;
  --display:Archivo,'Arial Narrow',sans-serif; --body:Plex,Arial,sans-serif; --mono:PlexMono,monospace;
  --page-width:1400px; --page-gutter:clamp(24px,6.7vw,96px);
  --masthead-height:96px; --theme-size:48px; --theme-gap:24px;
}
:root[data-theme='dark'] {
  color-scheme:dark;
  --paper:#111e2e; --surface:#1b2b3e; --ink:#e0e9f7; --blue:#9ab6ff;
  --coral:#f3917b; --teal:#7cd2bf; --muted:#a7b7cd; --line:#3b4d66;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme]) {color-scheme:dark;--paper:#111e2e;--surface:#1b2b3e;--ink:#e0e9f7;--blue:#9ab6ff;--coral:#f3917b;--teal:#7cd2bf;--muted:#a7b7cd;--line:#3b4d66}
}
* {box-sizing:border-box}
[hidden] {display:none!important}
html {scroll-behavior:smooth;scroll-padding-top:88px}
body {margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
a {color:inherit;text-decoration:none}
a:hover {color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {outline:2px solid var(--coral);outline-offset:5px}
button,input,select {font:inherit;color:inherit}
button {cursor:pointer}
::selection {background:var(--blue);color:var(--paper)}
.page-shell {max-width:var(--page-width);padding:0 var(--page-gutter);margin:auto}
.masthead {display:flex;align-items:center;justify-content:space-between;min-height:var(--masthead-height);padding-right:calc(var(--theme-size) + var(--theme-gap))}
.github-handle {display:inline-flex;gap:10px;align-items:center;font:14px var(--mono)}
.handle-mark {color:var(--coral);font-size:25px}
.masthead nav {display:flex;gap:32px;font:12px var(--mono)}
.masthead nav a {padding:12px 0}
.theme-toggle {position:fixed;z-index:40;top:calc((var(--masthead-height) - var(--theme-size)) / 2);right:max(var(--page-gutter),calc((100% - var(--page-width)) / 2 + var(--page-gutter)));display:grid;place-items:center;width:var(--theme-size);height:var(--theme-size);padding:0;appearance:none;border:1px solid var(--line);border-radius:50%;background:var(--surface);font:28px/1 Georgia,'Times New Roman',serif;transition:border-color .2s}
.theme-toggle:hover {border-color:var(--blue)}
.theme-toggle span {display:grid;place-items:center;width:1em;height:1em;line-height:1}
.identity {display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:40px 0 65px}
h1 {font:800 clamp(60px,9vw,122px)/1.05 var(--display);letter-spacing:-.065em;margin:0}
.name-dot {color:var(--coral)}
.identity-title {min-width:0}
.game-invite {position:relative;display:flex;align-items:flex-end;width:max-content;max-width:100%;height:72px;padding-left:104px}
.game-invite a {display:block;color:var(--blue);font:13px/1.2 var(--mono);padding-bottom:4px;border-bottom:1px solid var(--blue);white-space:nowrap}
.game-invite a:hover {color:var(--coral);border-color:var(--coral)}
.mario-runner {position:absolute;left:0;bottom:0;width:32px;height:32px;image-rendering:pixelated;pointer-events:none;transform-origin:50% 100%;will-change:transform}
.game-invite[data-state='land'] a {animation:game-landing .18s ease-out}
@keyframes game-landing {50%{transform:translateY(2px)}}
.contact {padding-bottom:10px;flex-shrink:0}
.contact a {font:12px var(--mono);padding-bottom:6px;border-bottom:1px solid var(--line)}
.section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:23px}
h2 {font:800 28px/1.15 var(--display);letter-spacing:-.035em;margin:0}
.section-mark {font-size:30px;line-height:1;color:var(--coral)}
.showcase {margin-bottom:76px;scroll-margin-top:24px}
.showcase-panels {border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.featured-panel {display:grid;grid-template-columns:42% 58%;min-height:340px}
.featured-panel + .featured-panel {border-top:1px solid var(--line)}
.js .featured-panel:not([data-active]) {display:none}
.js .featured-panel[data-active] {animation:panel-enter .25s ease-out}
@keyframes panel-enter {from{opacity:.7}to{opacity:1}}
.featured-copy {padding:34px 36px;display:flex;flex-direction:column;align-items:flex-start}
.feature-category {font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.featured-copy h3 {font:800 clamp(26px,3vw,42px)/1.1 var(--display);letter-spacing:-.045em;margin:0 0 14px;overflow-wrap:anywhere}
.featured-copy h3 span {font:22px var(--body);color:var(--coral);white-space:nowrap}
.feature-description {font-size:17px;line-height:1.45;margin:0 0 14px;max-width:26em}
.feature-meta {display:flex;flex-wrap:wrap;gap:5px 14px;font:10px/1.5 var(--mono);color:var(--muted);margin:0}
.feature-stats {display:flex;gap:32px;margin-top:25px}
.feature-stats>div {display:flex;flex-direction:column;gap:4px}
.feature-stats span {font:10px var(--mono);color:var(--muted)}
.feature-stats strong {font:400 18px var(--mono);letter-spacing:-.05em}
.feature-links {display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:auto;padding-top:25px;font:11px var(--mono)}
.feature-link {display:inline-flex;align-items:center;gap:24px;color:var(--blue)}
.feature-link:hover {text-decoration:underline;text-underline-offset:5px}
.demo-link {display:inline-flex;align-items:center;gap:7px;color:var(--blue);white-space:nowrap}
.demo-link:hover {text-decoration:underline;text-underline-offset:4px}
.feature-art {display:flex;align-items:center;justify-content:center;background:var(--art-paper);color:#eef4ff;overflow:hidden;min-width:0}
.feature-art svg {width:100%;height:auto;display:block}
.featured-replay {--art-paper:#c85845;--art-accent:#ffdfa5}
.featured-database {--art-paper:#19766e;--art-accent:#f7c990}
.featured-branches {--art-paper:#514dab;--art-accent:#f5bda0}
.featured-cloud {--art-paper:#355c7d;--art-accent:#ffcca0}
.featured-containers {--art-paper:#956035;--art-accent:#f9d18c}
.featured-board {--art-paper:#705064;--art-accent:#ffcba0}
.featured-chat {--art-paper:#2d6a80;--art-accent:#ffe2a0}
.featured-terminal {--art-paper:#4c675d;--art-accent:#ffe0a3}
:root[data-theme='dark'] .featured-pipes {--art-paper:#2947a4}
:root[data-theme='dark'] .featured-replay {--art-paper:#914634}
:root[data-theme='dark'] .featured-database {--art-paper:#175d59}
:root[data-theme='dark'] .featured-branches {--art-paper:#443c86}
:root[data-theme='dark'] .featured-cloud {--art-paper:#274963}
:root[data-theme='dark'] .featured-containers {--art-paper:#69472d}
:root[data-theme='dark'] .featured-board {--art-paper:#513b4b}
:root[data-theme='dark'] .featured-chat {--art-paper:#234d60}
:root[data-theme='dark'] .featured-terminal {--art-paper:#334c43}
.showcase-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:18px}
.showcase-tab {text-align:left;min-height:44px;padding:10px 0 14px;border:0;border-bottom:2px solid var(--line);background:transparent;font:13px var(--mono);color:var(--muted);overflow-wrap:anywhere;transition:color .15s,border-color .15s}
.showcase-tab[aria-selected='true'] {color:var(--ink);border-color:var(--coral)}
.showcase-tab:hover {color:var(--ink);border-color:var(--blue)}
.project-index {min-width:0}
.project-count {font:11px var(--mono);color:var(--muted);white-space:nowrap}
.tools {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 20px}
.search-wrap {display:flex;gap:10px;align-items:center;flex:1;min-width:0}
.search-wrap svg {fill:none;stroke:var(--muted);stroke-width:1.6;flex-shrink:0}
input {border:0;background:transparent;padding:10px 0;width:100%;min-width:0;font-size:14px;border-radius:0}
input::placeholder {color:var(--muted);opacity:1}
select {border:0;background:transparent;font:12px var(--mono);max-width:190px;padding:10px 0;cursor:pointer}
.column-labels {display:grid;grid-template-columns:minmax(0,1fr) 42%;gap:30px;padding:17px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);font:10px var(--mono);color:var(--muted)}
.column-labels>div,.project-numbers {display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:20px;text-align:right}
.project-list {list-style:none;padding:0;margin:0}
.project {display:grid;grid-template-columns:minmax(0,1fr) 42%;gap:30px;padding:25px 0;border-bottom:1px solid var(--line);align-items:start}
.project-info {min-width:0}
.project h3 {font:400 22px/1.25 var(--body);letter-spacing:-.04em;margin:0 0 7px;overflow-wrap:anywhere}
.project-link {display:inline-flex;gap:8px;align-items:baseline;max-width:100%}
.outbound {font:14px var(--mono);color:var(--coral);opacity:0;transform:translate(-3px,3px);transition:opacity .15s,transform .15s;flex-shrink:0}
.project:hover .outbound,.project-link:focus-visible .outbound {opacity:1;transform:none}
.description {font-size:14px;line-height:1.5;color:var(--muted);margin:0;max-width:42em}
.project-meta {display:flex;flex-wrap:wrap;gap:6px 14px;font:11px/1.5 var(--mono);margin:12px 0 0}
.languages {color:var(--blue)}
.license {color:var(--muted)}
.license a:hover {text-decoration:underline;text-underline-offset:3px}
.project-numbers {font:12px/1.7 var(--mono);padding-top:4px;font-variant-numeric:tabular-nums}
.date {white-space:nowrap}
.metric>a:hover,.date:hover {text-decoration:underline;text-underline-offset:4px}
.unavailable {color:var(--muted)}
.mobile-label {display:none}
.empty {padding:40px 0;color:var(--muted)}
.empty button {border:0;background:transparent;text-decoration:underline;color:var(--blue);padding:8px}
footer {display:flex;gap:30px;align-items:baseline;justify-content:space-between;padding:30px 0 40px;color:var(--muted);font:11px/1.8 var(--mono)}
footer>span {white-space:nowrap}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link {position:fixed;top:10px;left:10px;padding:12px;background:var(--surface);z-index:50;transform:translateY(-200%)}
.skip-link:focus {transform:none}
#termites {position:fixed;inset:0;z-index:20;width:100%;height:100%;pointer-events:none;visibility:hidden}
#termites[data-active] {visibility:visible}
@media(max-width:1100px) {
  .identity {display:block;padding-top:30px}
  .contact {padding:20px 0 0}
  .featured-copy {padding:28px}
  .featured-panel {grid-template-columns:45% 55%}
  .feature-description {font-size:15px}
  .column-labels,.project {grid-template-columns:minmax(0,1fr) 45%;gap:24px}
  .project-numbers {font-size:11px}
}
@media(max-width:750px) {
  :root {--masthead-height:80px;--theme-size:44px;--theme-gap:16px}
  .masthead nav {gap:18px;font-size:11px}
  .theme-toggle {font-size:25px}
  .identity {padding:34px 0 48px}
  h1 {font-size:clamp(57px,10.7vw,80px)}
  .contact a {font-size:11px}
  .game-invite {height:64px;padding-left:80px}
  h2 {font-size:25px}
  .showcase {margin-bottom:54px}
  .featured-panel {grid-template-columns:1fr}
  .featured-copy {padding:26px}
  .feature-category {margin-bottom:15px}
  .featured-copy h3 {font-size:34px}
  .feature-stats {margin-top:19px}
  .feature-art {max-height:235px}
  .feature-art svg {width:100%;max-width:560px}
  .feature-links {padding-top:20px}
  .showcase-tabs {gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase-tab {font-size:12px;padding:7px 0 10px}
  .column-labels {display:none}
  .project-list {border-top:2px solid var(--ink)}
  .project {display:block;padding:23px 0}
  .project-numbers {margin-top:18px;max-width:410px;gap:20px;text-align:left;grid-template-columns:1fr 1fr 1.5fr}
  .mobile-label {display:block;font:9px/1.4 var(--mono);color:var(--muted);margin-bottom:3px}
  .tools {gap:12px}
  input {font-size:12px}
  select {font-size:10px;max-width:160px}
  .outbound {opacity:1;transform:none}
}
@media(max-width:420px) {
  .masthead nav {gap:14px;font-size:10px}
  .github-handle {font-size:12px;gap:6px}
  .github-handle>span:last-child {display:none}
  h1 {font-size:clamp(60px,15vw,70px);max-width:320px}
  .identity {padding-top:20px}
  .game-invite {padding-left:72px}
  .game-invite a {font-size:11px}
  .featured-copy h3 {font-size:30px}
  .featured-copy {padding:23px}
  .feature-art {max-height:195px}
  .feature-meta {font-size:9px}
  .feature-stats strong {font-size:16px}
  .project-count {font-size:10px}
  .project-numbers {font-size:10px}
  .project-meta {font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition:none!important;animation:none!important}
}