:root {
  --shell: #D2DED6;
  --paper: #F7F9FA;
  --content: #EEF3F0;
  --hairline: #C6CFCA;
  --ink: #17201C;
  --ink-2: #4F5B55;
  --ink-3: #7D8882;
  --action: #2A3FCF;
  --mac: #9A6412;
  --mac-bg: #FBF1DD;
  --measure: 38rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --shell: #1D2822;
    --paper: #161A18;
    --content: #1A1F1D;
    --hairline: #333D38;
    --ink: #E7EDE9;
    --ink-2: #A9B4AE;
    --ink-3: #78837D;
    --action: #A3AEFF;
    --mac: #E9B460;
    --mac-bg: #3A2F1C;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 "SF Pro", -apple-system, system-ui, sans-serif;
}
a { color: var(--action); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

.band {
  background: var(--shell);
  border-bottom: 1px solid var(--hairline);
}
.wrap { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem; }

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
}
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; font-weight: 600; }
.brand img { width: 32px; height: 32px; }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: 0.94rem; }
.top nav a:hover { color: var(--ink); }

.hero { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center; padding: 3.5rem 0 4rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1rem; font-weight: 700; }
.hero p { font-size: 1.15rem; color: var(--ink-2); max-width: 32rem; margin: 0 0 1.5rem; }
.hero img { width: 200px; height: 200px; }
.status {
  display: inline-block; padding: 0.35rem 0.7rem; border-radius: 6px;
  background: var(--mac-bg); color: var(--mac); font-size: 0.9rem; font-weight: 500;
}

main section { padding: 3rem 0; border-bottom: 1px solid var(--hairline); }
main section:last-child { border-bottom: 0; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; margin: 0 0 1.25rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.features p { margin: 0; color: var(--ink-2); }

.where { display: grid; grid-template-columns: 9rem 1fr; gap: 0.6rem 1.5rem; margin: 0; }
.where dt { font-weight: 600; }
.where dd { margin: 0; color: var(--ink-2); }

.prose { max-width: var(--measure); }
.prose h1 { font-size: 2.1rem; letter-spacing: -0.02em; margin: 2.5rem 0 0.4rem; }
.prose h2 { margin-top: 2.5rem; font-size: 1.3rem; }
.prose .meta { color: var(--ink-3); margin: 0 0 2rem; }
.prose li { margin-bottom: 0.4rem; }
.todo { background: var(--mac-bg); color: var(--mac); padding: 0 0.25rem; border-radius: 3px; }

footer { background: var(--content); border-top: 1px solid var(--hairline); color: var(--ink-3); font-size: 0.9rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; padding: 1.5rem 1.25rem; }
footer a { color: var(--ink-2); }

@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; padding: 2rem 0 2.5rem; }
  .hero img { width: 112px; height: 112px; order: -1; }
  .features { grid-template-columns: 1fr; }
  .where { grid-template-columns: 1fr; }
  .where dd { margin-bottom: 0.6rem; }
}