:root {
  --cream: #fdf6e7; --paper: #f7ebd6; --clay: #c8704e; --leaf: #6bb04a;
  --ink: #3d302a; --soft: #3d302a99; --card: #fffaf0;
  --line: #3d302a33; --success: #2d7a3e; --error: #b32d2d;
}
@media (prefers-color-scheme: dark) {
  :root { --cream: #221c18; --paper: #2b241f; --ink: #f5ece0; --soft: #f5ece0aa; --card: #312923;
    --line: #f5ece033; --success: #8fd16f; --error: #ff8f85; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: linear-gradient(var(--cream), var(--paper)) fixed; color: var(--ink);
  font: 17px/1.6 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}
.container { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
a { color: var(--clay); }
.site-header { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.site-header .logo { width: 44px; height: 44px; border-radius: 10px; }
.site-header .brand { font-weight: 800; font-size: 22px; color: var(--ink); text-decoration: none; }
.site-header nav { margin-left: auto; display: flex; gap: 16px; }
.site-header nav a { text-decoration: none; font-weight: 600; }
h1 { font-size: 40px; line-height: 1.1; margin: 0 0 8px; font-weight: 900; }
h2 { margin-top: 32px; }
.meta { color: var(--soft); }
.hero { text-align: center; padding: 24px 0; }
.hero img.icon { width: 140px; height: 140px; border-radius: 32px; box-shadow: 0 8px 0 #0002; }
.tagline { font-size: 20px; color: var(--soft); }
.button {
  display: inline-block; background: var(--clay); color: #fff; font-weight: 800; text-decoration: none;
  padding: 14px 26px; border-radius: 999px; box-shadow: 0 4px 0 #0003; margin: 8px;
}
.button.secondary { background: var(--card); color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 28px 0; }
.card { background: var(--card); border-radius: 20px; padding: 18px; box-shadow: 0 4px 0 #0001; }
.card h3 { margin: 0 0 6px; }
canvas { max-width: 100%; border-radius: 14px; image-rendering: pixelated; box-shadow: 0 6px 0 #0002; }
code, .code { word-break: break-all; font-size: 13px; background: var(--card); padding: 10px; border-radius: 10px; display: block; }
footer { margin-top: 48px; color: var(--soft); font-size: 14px; text-align: center; }

/* Contact form (same form as sagashelf.com) */
.contact { max-width: 640px; margin: 0 auto; background: var(--card); border-radius: 20px; padding: 28px; box-shadow: 0 4px 0 #0001; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.form-field .required { color: var(--error); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--cream); color: var(--ink); transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px #c8704e33;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; }
.form-actions .button { border: 0; font: inherit; font-weight: 800; cursor: pointer; margin: 0; }
.form-actions .button:disabled { opacity: 0.6; cursor: default; }
.form-message { margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 16px; display: none; }
.form-message.show { display: block; }
.form-message.success { background: #6bb04a1f; color: var(--success); border: 1px solid #6bb04a55; }
.form-message.error { background: #b32d2d14; color: var(--error); border: 1px solid #b32d2d44; }
.recaptcha-notice { font-size: 13px; color: var(--soft); margin: 12px 0 0; line-height: 1.5; }
.grecaptcha-badge { bottom: 80px !important; }