:root {
  --bg: #fbfaf7; --fg: #1d1d1b; --muted: #807d75; --link: #b0400f; --line: #e2dfd8; --panel: #f0ede6;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 14.5px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
main { max-width: 720px; margin: 0 auto; padding: 48px 16px 80px; }
a { color: var(--link); text-underline-offset: 2px; text-decoration-style: dotted; }
a:hover { color: var(--fg); }
h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1rem; margin: 48px 0 12px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
h2::before { content: "## "; color: var(--muted); }
ul { margin: 0; padding: 0; list-style: none; }
li { margin: 0 0 14px; }
.muted { color: var(--muted); }

header { display: flex; gap: 24px; align-items: center; }
.avatar { flex: none; width: 112px; height: 112px; border-radius: 50%; background: var(--panel); object-fit: cover; }
.tagline { margin: 0 0 8px; color: var(--muted); }
.links a { margin-right: 14px; white-space: nowrap; }

.item-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.item-head .when { flex: none; color: var(--muted); font-size: .9em; font-variant-numeric: tabular-nums; }
.item p { margin: 2px 0 0; }
.earlier { margin-top: 8px; }
.earlier li { margin: 0 0 8px; padding-left: 1.5em; text-indent: -1.5em; }
.earlier li::before { content: "- "; color: var(--muted); white-space: pre; display: inline-block; width: 1.5em; text-indent: 0; }

footer { margin-top: 64px; font-size: .85em; color: var(--muted); }

@media (max-width: 560px) {
  header { flex-direction: column; align-items: flex-start; }
  .item-head { flex-direction: column; gap: 0; }
}

/* project pages */
.back { display: inline-block; margin-bottom: 32px; }
.lede { color: var(--muted); margin: 0 0 8px; }
pre { background: var(--panel); border: 1px solid var(--line); padding: 14px 16px; overflow-x: auto;
      font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin: 12px 0 16px; }
code { font-family: inherit; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 20px; margin: 16px 0 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.bullets li { margin: 0 0 8px; padding-left: 1.5em; text-indent: -1.5em; }
.bullets li::before { content: "- "; color: var(--muted); white-space: pre; display: inline-block; width: 1.5em; text-indent: 0; }

/* diagrams */
.diagram { margin: 16px 0 20px; }
.diagram svg { display: block; width: 100%; height: auto; }
.d-group { fill: var(--panel); stroke: var(--muted); stroke-dasharray: 4 4; }
.d-box { fill: var(--bg); stroke: var(--fg); stroke-width: 1; }
.d-strong { stroke-width: 2; }
.d-line { fill: none; stroke: var(--muted); stroke-width: 1.25; }
.d-head { fill: var(--muted); }
.d-text { fill: var(--fg); font: 13px ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-anchor: middle; }
.d-sub { fill: var(--muted); font: 11px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.d-label { fill: var(--muted); font: 11px ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-anchor: middle; }

/* code highlighting */
h3 { font-size: .95rem; margin: 24px 0 0; }
pre.code { background: #fffdf8; }
.t-k { color: #b0400f; }
.t-s { color: #3f7a3a; }
.t-i { color: #1d1d1b; background: #ebe6da; }
.t-n { color: #8a5a00; }
.t-t { color: #2f5d8a; }
.t-f { color: #6a3d8a; }
.t-c { color: var(--muted); font-style: italic; }

/* screenshot slider */
.slider { width: min(1120px, calc(100vw - 32px)); position: relative; left: 50%; transform: translateX(-50%); margin: 20px 0 8px; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.slide .frame { aspect-ratio: 16 / 10; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; }
.slide figcaption { color: var(--muted); font-size: .85em; margin-top: 8px; text-align: center; padding: 0 8px; }
.slider-nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 10px; }
.slider-nav button { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); width: 40px; height: 32px; cursor: pointer; }
.slider-nav button:hover { border-color: var(--fg); }
.slider-nav .count { color: var(--muted); font-size: .85em; font-variant-numeric: tabular-nums; min-width: 4em; text-align: center; }
@media (max-width: 560px) { .slide .frame { aspect-ratio: 4 / 3; } }