:root { --bg:#1c2230; --fg:#e3ddd0; --dim:#8b93a5; --accent:#f2a65a;
  --font: ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace; color-scheme:dark; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.65 var(--font);display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
main{flex:1;width:min(100%,76ch);margin:0 auto;padding:clamp(24px,10vh,96px) 20px 24px}
.site{margin:0 0 2.2em}
.site a{color:var(--accent);text-decoration:none}
.site a:hover,.site a:focus-visible{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.dim{color:var(--dim)}
a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:3px}
a:hover,a:focus-visible{text-decoration-color:var(--accent);outline:none}
.foot{width:min(100%,76ch);margin:0 auto;padding:0 20px 28px;color:var(--dim);font-size:13px}
.caret{display:inline-block;width:.6em;height:1.1em;vertical-align:-.2em;background:var(--fg);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}
@media (max-width:480px){body{font-size:13.5px} main{padding-top:32px}}

h1{font-size:1.6em;line-height:1.25;margin:0 0 1.1em;font-weight:700;text-wrap:balance}
.meta{color:var(--dim);margin:0 0 2.4em;display:grid;grid-template-columns:repeat(3,max-content);gap:0 3ch}
.meta b{color:var(--accent);font-weight:600}
@media (max-width:480px){.meta{grid-template-columns:1fr}}
.cmd{margin:0 0 .6em}.prompt{color:var(--accent)}
.log{list-style:none;margin:0 0 1.6em;padding:0}
.out{margin:0 0 1.6em}
.log li{display:grid;grid-template-columns:8ch 1fr auto;gap:0 2ch;padding:.1em 0}
.log .sha{color:var(--accent)}.log .when{color:var(--dim);white-space:nowrap}
.log li.head .msg::after{content:" (HEAD -> main)";color:var(--dim)}
@media (max-width:480px){.log li{grid-template-columns:8ch 1fr}.log .when{grid-column:2;font-size:.9em}}