@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/jbmono.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --bg: #F5F6F3;
  --surface: #FFFFFF;
  --ink: #151917;
  --muted: #525B56;
  --line: #DCE0DB;
  --accent: #17784A;
  --accent-fg: #FFFFFF;
  --accent-hover: #12643D;
  --soft: #E7F1EA;
  --soft-line: #B7D3C2;
  --soft-hover: #DEEDE3;
  --warn-bg: #F8EED8;
  --warn-fg: #7A4F00;
  --chip: #ECEEEA;
  --icon-bg: #EEF1EC;
  --card-hover-line: #A9BFB1;
  --card-hover-bg: #FAFBF9;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1211;
    --surface: #161A18;
    --ink: #E7EAE6;
    --muted: #9AA49E;
    --line: #262D29;
    --accent: #4FD08A;
    --accent-fg: #0B1F14;
    --accent-hover: #6BDDA0;
    --soft: #12251A;
    --soft-line: #1F4A31;
    --soft-hover: #163020;
    --warn-bg: #2B2213;
    --warn-fg: #EDB75A;
    --chip: #1E2420;
    --icon-bg: #1D2320;
    --card-hover-line: #3A4840;
    --card-hover-bg: #1B211E;
  }
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
svg { flex: none; }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
main.home { max-width: 600px; padding-top: 40px; gap: 32px; }

/* ---------- home header ---------- */
.hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--icon-bg); border: 1px solid var(--line); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 26px; font-weight: 600;
}
.avatar.sm { width: 32px; height: 32px; font-size: 11px; }
.hero .who { display: flex; flex-direction: column; gap: 6px; }
.hero h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 650; letter-spacing: -0.01em; }
.hero .role { margin: 0; font-size: 12.5px; color: var(--muted); }
.hero .tagline { margin: 0; font-size: 17px; line-height: 1.45; max-width: 30em; text-wrap: pretty; }
.social { display: flex; gap: 10px; }
.social a {
  width: 48px; height: 48px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- cards ---------- */
.card, .btn {
  transition: border-color .15s ease, background-color .15s ease, transform .08s ease;
}
.card:active, .btn:active { transform: scale(.985); }
.card {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.card:hover { border-color: var(--card-hover-line); background-color: var(--card-hover-bg); }
.card .ic {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--icon-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.card .t { font-size: 16px; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.card .d { font-size: 14px; line-height: 1.35; color: var(--muted); text-wrap: pretty; }
.card .m { font-family: var(--mono); font-size: 12.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.card .go { color: var(--muted); }
.card .body:has(.chip) { gap: 6px; }
.card.proj:hover { border-color: var(--line); background-color: var(--surface); }
.card.proj:active { transform: none; }
.acts { flex: none; display: flex; gap: 6px; margin-right: -4px; }
.acts a {
  width: 44px; height: 44px; border-radius: 10px; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.acts a:hover { background: var(--icon-bg); color: var(--accent); }

.chip {
  font-family: var(--mono); font-size: 11.5px; padding: 3px 8px; border-radius: 999px;
  background: var(--chip); color: var(--muted); white-space: nowrap;
}

.feat {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 16px; border-radius: 16px;
  background: var(--soft); border: 1px solid var(--soft-line);
}
.feat:hover { border-color: var(--accent); background-color: var(--soft-hover); }
.feat .kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--accent); }
.feat .title { font-size: 19px; font-weight: 650; line-height: 1.3; text-wrap: pretty; }
.feat .meta { font-size: 12.5px; color: var(--muted); }
.feat .cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--soft-line);
  font-size: 15px; font-weight: 600; color: var(--accent);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

section.group { display: flex; flex-direction: column; gap: 10px; }
.label { margin: 0; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* ---------- subpages ---------- */
.crumb { display: flex; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--muted); margin-left: -10px; }
.crumb a {
  display: flex; align-items: center; gap: 4px; min-height: 44px;
  padding: 0 4px 0 8px; border-radius: 10px; color: var(--accent); font-weight: 600;
}

.head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.head h1 { margin: 0; font-size: 28px; line-height: 1.18; font-weight: 680; letter-spacing: -0.015em; text-wrap: balance; }
.head .lede { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.byline { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }

.pill {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  background: var(--soft); color: var(--accent);
}
.pill.building { background: var(--warn-bg); color: var(--warn-fg); }
.pill.soon { background: var(--chip); color: var(--muted); }

.facts {
  margin: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden;
}
.facts div { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; }
.facts div + div { border-top: 1px solid var(--line); }
.facts svg { color: var(--muted); }
.facts dt { width: 44px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.facts dd { margin: 0; font-family: var(--mono); font-size: 14px; font-weight: 500; }

.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tile {
  display: flex; align-items: center; gap: 14px;
  min-height: 68px; padding: 12px 16px; border-radius: 14px;
}
.tile .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tile .t { font-size: 17px; font-weight: 650; }
.tile .m { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tile.card { background: var(--surface); }
.tile.card > svg:first-child { color: var(--accent); }
.tile.btn { background: var(--accent); color: var(--accent-fg); }
.tile.btn .m { color: inherit; }
.tile.btn:hover { background-color: var(--accent-hover); }
.tile.off, .row.off { border: 1px dashed var(--line); color: var(--muted); }
.tile.off .t { font-weight: 600; }

.links { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; border-radius: 14px; }
.row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .t { font-size: 16px; font-weight: 600; }
.row .m { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.row.card > svg:first-child { color: var(--accent); }

.prose { display: flex; flex-direction: column; gap: 10px; }
.prose h2 { margin: 0; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--muted); }
.prose h2::before { content: "~/"; }
.prose h2:not(:first-child) { margin-top: 18px; }
.prose p { margin: 0; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.prose li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; }
.prose li::before { content: "›"; flex: none; font-family: var(--mono); font-weight: 600; color: var(--accent); }
.prose code { font-family: var(--mono); font-size: .9em; padding: 1px 5px; border-radius: 6px; background: var(--chip); }
.prose img { max-width: 100%; height: auto; border-radius: 16px; }

figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); }
figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.callout {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 14px;
  background: var(--soft); border: 1px solid var(--soft-line);
}
.callout .ic {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.callout p { margin: 0; }
.callout .t { font-size: 16px; font-weight: 650; }
.callout .d { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 4px; }

.connect { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 10px; }
.connect a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 68px; padding: 10px 6px; font-size: 14px; font-weight: 600;
}
.home-link { min-height: 56px; padding: 10px 16px; }
.home-link .cd { flex: none; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--accent); }
.home-link .t { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }

/* ---------- 404 ---------- */
.term {
  margin: 0; padding: 18px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.75;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.term .p { color: var(--accent); }
.term .o { color: var(--muted); }
.big-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 20px; border-radius: 14px;
  background: var(--accent); color: var(--accent-fg); font-size: 16px; font-weight: 650;
}
.big-btn:hover { background-color: var(--accent-hover); }

footer.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}

/* ---------- desktop ---------- */
@media (min-width: 720px) {
  main { padding: 56px 32px 32px; gap: 32px; }
  main.home { padding-top: 96px; gap: 36px; }
  main.nf { padding-top: 72px; gap: 28px; }
  .avatar:not(.sm) { width: 96px; height: 96px; }
  .hero h1 { font-size: 34px; }
  .hero .tagline { font-size: 19px; }
  .feat .title { font-size: 21px; }
  .head h1 { font-size: 40px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .card, .btn { transition: none; }
  .card:active, .btn:active { transform: none; }
}