/* Pencil In — getpencilin.com
   Tokens mirror the app (pencil-in-ios/.claude/skills/pencil-in-design/colors_and_type.css).
   Light canonical; dark mirrors. No JS, no third parties, no fonts bundled. */
:root {
  color-scheme: light dark;
  --canvas: light-dark(#FAF8F4, #1A1815);
  --card:   light-dark(#F0EDE7, #23201C);
  --line:   light-dark(#D7D2C8, #3A3630);
  --ink:    light-dark(#1A1815, #F2E9DC);
  --ink-2:  light-dark(#57544E, #B8B2A6);
  --ink-3:  light-dark(#8A8680, #8A8680);
  --teal:   #2F4C50;
  --amber:  light-dark(#B8893C, #D9A552);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --serif: Baskerville, "Libre Baskerville", "Iowan Old Style", Georgia, serif;
  --measure: 36rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
main, header, footer { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }
header { display: flex; align-items: center; gap: 12px; padding-top: 32px; }
header img { width: 40px; height: 40px; border-radius: 9px; }
header .name { font-weight: 600; letter-spacing: -0.01em; }
header nav { margin-left: auto; display: flex; gap: 20px; font-size: 15px; color: var(--ink-2); }
header nav a { text-decoration: none; }
header nav a:hover { color: var(--ink); }
.hero { padding: 96px 0 64px; }
.hero .mark { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 12px 32px -12px rgba(26,24,21,.35); }
h1 { font: 700 44px/1.08 var(--serif); letter-spacing: -0.015em; margin: 32px 0 16px; }
.hero p.deck { font-size: 21px; color: var(--ink-2); margin: 0 0 32px; max-width: 30rem; }
.number { font: 600 64px/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 48px 0 8px; }
.number.zero { color: var(--amber); }
.number + .cap { color: var(--ink-3); font-size: 15px; margin: 0; }
h2 { font: 700 26px/1.2 var(--serif); margin: 48px 0 12px; }
h3 { font: 600 17px/1.3 var(--sans); margin: 28px 0 8px; }
p, li { max-width: var(--measure); }
.status { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink-2); }
.card { background: var(--card); border-radius: 12px; padding: 20px 24px; margin: 24px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink-3); font-weight: 500; }
footer { padding: 64px 24px 48px; color: var(--ink-3); font-size: 14px; border-top: 1px solid var(--line); margin-top: 64px; display: flex; gap: 20px; flex-wrap: wrap; }
footer a { text-decoration: none; }
small { color: var(--ink-3); }
@media (max-width: 480px) { h1 { font-size: 36px; } .number { font-size: 52px; } .hero { padding-top: 64px; } }