/* streakmint.com — the app's tokens (docs/design.md §2): one family, 4pt spacing, radius 12,
   9 colours, dark default with a light scheme. No framework. */
:root {
  --bg: #0C0C0C; --surface: #161616; --border: #262626;
  --text: #F2F2F2; --text-2: #9A9A9A;
  --brand: #6FE3B4; --brand-pressed: #52CC9C; --on-brand: #0C0C0C;
  --radius: 12px; --cell: 4px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s12: 48px;
  color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #F6F4EE; --surface: #FFFFFF; --border: #E4E0D6; --text: #111111; --text-2: #6E6B66; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}
main, header, footer { max-width: 680px; margin: 0 auto; padding: 0 var(--s5); }
header { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s6); padding-bottom: var(--s6); }
.mark { display: flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--text); text-decoration: none; }
.mark i { width: var(--s4); height: var(--s4); border-radius: var(--cell); background: var(--brand); display: inline-block; }
nav a { color: var(--text-2); text-decoration: none; margin-left: var(--s4); }
nav a:hover, nav a[aria-current] { color: var(--text); }
h1 { font-size: 34px; line-height: 1.15; font-weight: 700; margin: var(--s8) 0 var(--s3); }
h2 { font-size: 22px; font-weight: 600; margin: var(--s8) 0 var(--s2); }
p, li { color: var(--text-2); }
strong { color: var(--text); font-weight: 600; }
a { color: var(--brand); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); margin: var(--s4) 0; }
.grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 6px; margin: var(--s8) 0; }
.grid span { aspect-ratio: 1; border-radius: var(--cell); background: var(--border); }
.grid span.m { background: var(--brand); }
.grid span.x { background: #FF5A52; opacity: .6; }
.button { display: inline-block; background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none;
  padding: var(--s4) var(--s6); border-radius: var(--radius); min-height: 56px; }
.button:hover { background: var(--brand-pressed); }
.note { font-size: 13px; color: var(--text-2); }
footer { padding-top: var(--s12); padding-bottom: var(--s12); font-size: 13px; color: var(--text-2); }
footer a { color: var(--text-2); margin-right: var(--s4); }