/* Shared by the project pages (everett/, fitbit-cli/). Same identity as story.html. */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #0E0C0B;
  --bone: #EDE6DC;
  --sun: #FF5A1F;
  --momo: #F596AA;           /* momo-iro, peach blossom */
  --muted: rgb(237 230 220 / 0.56);
  --faint: rgb(237 230 220 / 0.34);
  --line: rgb(237 230 220 / 0.1);
  --hover: rgb(245 150 170 / 0.06);
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --col: 560px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--muted); font: 400 16px/1.625 var(--sans); letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--momo); color: var(--ink); }
h1, h2, h3, p, ul, ol, figure, pre { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
b { font-weight: 400; color: var(--bone); }
code { font: 400 0.88em var(--mono); letter-spacing: 0; color: var(--bone); background: rgb(237 230 220 / 0.06); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 1px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

@media (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2222%22%20height=%2232%22%20viewBox=%220%200%2011%2016%22%20shape-rendering=%22crispEdges%22%3E%3Cpath%20fill=%22%230E0C0B%22%20d=%22M0%200h1v1h-1zM0%201h2v1h-2zM0%202h1v1h-1zM2%202h1v1h-1zM0%203h1v1h-1zM3%203h1v1h-1zM0%204h1v1h-1zM4%204h1v1h-1zM0%205h1v1h-1zM5%205h1v1h-1zM0%206h1v1h-1zM6%206h1v1h-1zM0%207h1v1h-1zM7%207h1v1h-1zM0%208h1v1h-1zM8%208h1v1h-1zM0%209h1v1h-1zM9%209h1v1h-1zM0%2010h1v1h-1zM6%2010h5v1h-5zM0%2011h1v1h-1zM3%2011h1v1h-1zM6%2011h1v1h-1zM0%2012h1v1h-1zM2%2012h1v1h-1zM4%2012h1v1h-1zM7%2012h1v1h-1zM0%2013h2v1h-2zM4%2013h1v1h-1zM7%2013h1v1h-1zM0%2014h1v1h-1zM5%2014h1v1h-1zM8%2014h1v1h-1zM5%2015h3v1h-3z%22/%3E%3Cpath%20fill=%22%23EDE6DC%22%20d=%22M1%202h1v1h-1zM1%203h2v1h-2zM1%204h3v1h-3zM1%205h4v1h-4zM1%206h5v1h-5zM1%207h6v1h-6zM1%208h7v1h-7zM1%209h8v1h-8zM1%2010h5v1h-5zM1%2011h2v1h-2zM4%2011h2v1h-2zM1%2012h1v1h-1zM5%2012h2v1h-2zM5%2013h2v1h-2zM6%2014h2v1h-2z%22/%3E%3C/svg%3E") 1 1, auto; }
  a, button { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2222%22%20height=%2232%22%20viewBox=%220%200%2011%2016%22%20shape-rendering=%22crispEdges%22%3E%3Cpath%20fill=%22%230E0C0B%22%20d=%22M0%200h1v1h-1zM0%201h2v1h-2zM0%202h1v1h-1zM2%202h1v1h-1zM0%203h1v1h-1zM3%203h1v1h-1zM0%204h1v1h-1zM4%204h1v1h-1zM0%205h1v1h-1zM5%205h1v1h-1zM0%206h1v1h-1zM6%206h1v1h-1zM0%207h1v1h-1zM7%207h1v1h-1zM0%208h1v1h-1zM8%208h1v1h-1zM0%209h1v1h-1zM9%209h1v1h-1zM0%2010h1v1h-1zM6%2010h5v1h-5zM0%2011h1v1h-1zM3%2011h1v1h-1zM6%2011h1v1h-1zM0%2012h1v1h-1zM2%2012h1v1h-1zM4%2012h1v1h-1zM7%2012h1v1h-1zM0%2013h2v1h-2zM4%2013h1v1h-1zM7%2013h1v1h-1zM0%2014h1v1h-1zM5%2014h1v1h-1zM8%2014h1v1h-1zM5%2015h3v1h-3z%22/%3E%3Cpath%20fill=%22%23FF5A1F%22%20d=%22M1%202h1v1h-1zM1%203h2v1h-2zM1%204h3v1h-3zM1%205h4v1h-4zM1%206h5v1h-5zM1%207h6v1h-6zM1%208h7v1h-7zM1%209h8v1h-8zM1%2010h5v1h-5zM1%2011h2v1h-2zM4%2011h2v1h-2zM1%2012h1v1h-1zM5%2012h2v1h-2zM5%2013h2v1h-2zM6%2014h2v1h-2z%22/%3E%3C/svg%3E") 1 1, pointer; }
}

.col { width: 100%; max-width: calc(var(--col) + 40px); margin: 0 auto; padding: 0 20px; }
.u { color: var(--bone); text-decoration: underline; text-decoration-color: var(--faint); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.3s; }
.u:hover { text-decoration-color: var(--sun); }

/* top: a way home */
.top { padding-top: 28px; font: 400 12px/1 var(--mono); letter-spacing: 0; }
.top a { color: var(--faint); transition: color 0.25s; }
.top a:hover { color: var(--momo); }

/* hero */
.hero { padding-top: clamp(64px, 12vh, 120px); }
.hero .pi { display: block; width: 48px; height: 48px; margin-bottom: 24px; }
.hero .tag { font: 400 12px/1 var(--mono); letter-spacing: 0; color: var(--momo); margin-bottom: 14px; }
.hero h1 { color: var(--bone); font-size: 18px; font-weight: 500; line-height: 28px; }
.hero .say { color: var(--bone); }
.hero > p + p { margin-top: 16px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }

/* sections */
main > section.col { margin-top: clamp(72px, 12vh, 112px); }
h2 { display: flex; align-items: baseline; gap: 12px; color: var(--bone); font-size: 18px; font-weight: 500; line-height: 28px; margin-bottom: 20px; }
h2 .n { font: 400 12px/1 var(--mono); letter-spacing: 0; color: var(--momo); }
section > p + p, section > p + .lists, .lists + p { margin-top: 16px; }

.feats li + li { margin-top: 18px; }
.feats h3 { color: var(--bone); font-weight: 500; }
.feats p { font-size: 15px; line-height: 1.55; }

.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lists h3 { color: var(--bone); font-weight: 500; margin-bottom: 4px; }
.lists li::before { content: "—"; color: var(--faint); margin-right: 10px; }

/* commands with a copy button */
.cmds li + li { margin-top: 14px; }
.cmds .k { display: block; color: var(--bone); font-weight: 500; }
.cmds .k + p { font-size: 15px; line-height: 1.55; }
.cmd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: 400 13px/1.5 var(--mono); letter-spacing: 0; color: var(--bone); overflow-x: auto; }
.cmd span::before { content: "$ "; color: var(--faint); }
.cp { flex: none; font: 400 12px/1 var(--mono); letter-spacing: 0; color: var(--faint); background: none; border: 0; padding: 4px 0; transition: color 0.25s; }
.cp:hover { color: var(--momo); }
.cp.ok { color: var(--momo); }

/* pixel icon life */
.pi { color: var(--bone); image-rendering: pixelated; }
.pi .o { fill: var(--sun); }
.pi:hover { animation: hop 0.42s steps(2, jump-none) infinite alternate; }
.pi:hover .o { animation: blink 0.5s steps(1) infinite; }
.pi.spin { animation: spin 0.5s steps(6) 1 !important; }
@keyframes hop { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes blink { 50% { fill: var(--momo); } }
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.spark { position: absolute; left: 0; top: 0; width: 4px; height: 4px; pointer-events: none; z-index: 50; }

/* footer */
.foot { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: clamp(96px, 16vh, 160px); padding: 20px 0 40px; border-top: 1px solid var(--line); font: 400 12px/1.6 var(--mono); letter-spacing: 0; color: var(--faint); }
.foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot a { transition: color 0.25s; }
.foot a:hover { color: var(--momo); }

@media (max-width: 600px) { .lists { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}