:root { --font: ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial; --serif: "Merriweather", Georgia, serif; --maxw: 600px; --ink: #222; --link: #333; --muted: #666; --rule: #e6e6e6; --band: #f7f7f7; }
html, body { height: 100%; }
body { font-family: var(--font); margin: 0; background: #fff; color: var(--ink); line-height: 1.6; font-size: 18px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 40px 20px; }
a { font-family: var(--font); color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: #bbb; }
a:hover { text-decoration-color: #666; }
.brand { font-weight: 700; letter-spacing: -0.02em; font-size: 28px; margin: 0 0 16px; text-transform: lowercase; }
.title { font-size: 34px; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 10px; }
.context { background: var(--band); padding: 12px 16px; margin: 0 0 16px; border-radius: 6px; font-size: 16px; line-height: 1.4; }
.context p { margin: 0; }
.card { margin: 22px 0; padding-top: 2px; }
h2 { font-size: 22px; margin: 0 0 8px; }
h3 { color: var(--ink); font-size: 18px; margin: 12px 0 4px; }
.card p { font-family: var(--serif); }
.backlink { display: inline-block; margin: 28px 0; font-size: 18px; }
.rule { border-top: 1px solid var(--rule); margin: 24px 0; }
.footer { font-family: var(--font); color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 420px) { .title { font-size: 28px; } }
.field { margin: 12px 0 8px; }
.label { font-size: 14px; color: var(--muted); display: block; margin-bottom: 6px; }
.input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; font-size: 16px; }
.btn { display: inline-block; padding: 10px 14px; border: 1px solid #111; background: #111; color: #fff; border-radius: 8px; font-weight: 600; cursor: pointer; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.note { font-size: 13px; color: var(--muted); margin-top: 8px; }
.error { color: #a40000; font-size: 14px; margin-top: 8px; }
.banner { background: #fff7cc; border: 1px solid #f1e2a0; color: #6b5b00; padding: 8px 12px; border-radius: 6px; margin: 10px 0 0; font-size: 14px; }
.actions { margin-top: 8px; display: flex; gap: 8px; }
.linkbtn { border: 1px solid #111; background: #fff; color: #111; border-radius: 8px; padding: 6px 10px; cursor: pointer; }

/* Notion-inspired refresh (additive, safe) */
:root {
  --accent: #601818;            /* primary brand */
  --accent-50: #f8eded;         /* very light tint */
  --accent-100: #f1dada;        /* light tint */
  --accent-200: #e6bcbc;        /* light border tint */
  --bg: #fafafa;
  --surface: #ffffff;
  --ink-strong: #2b2b2b;  /* lighter for headings/links */
  --ink-soft: #525252;    /* lighter for body text */
  --line: #e9e9e9;
  --shadow-1: 0 1px 2px rgba(0,0,0,.04);
  --shadow-2: 0 8px 24px rgba(0,0,0,.06);
}
body { background: var(--bg); color: var(--ink-soft); }
.wrap { max-width: 720px; padding: 48px 24px; }
.brand { font-weight: 700; letter-spacing: -0.02em; font-size: 30px; color: var(--ink-strong); }
.title { color: var(--ink-strong); font-size: 36px; letter-spacing: -0.015em; margin: 0 0 12px; }
h2 { font-size: 20px; color: #6a6a6a; margin: 0 0 8px; }
h3 { font-size: 17px; color: var(--ink-strong); margin: 12px 0 6px; }
a { color: var(--ink-strong); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.12); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.context {
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow-1);
}
.card {
  margin: 22px 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.card p { color: var(--ink-soft); }
.card h2 {
  display: inline-block;
  min-width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent);
  border: 1px solid var(--accent-200);
  font-size: 14px;
  margin-bottom: 10px;
}
.rule { border-top: 1px solid var(--line); }
.footer { color: #888; }
.btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 10px 16px;
}
.btn:hover { filter: brightness(1.05); }
.linkbtn { border-color: #bbb; border-radius: 10px; }
.linkbtn:hover { border-color: var(--accent); color: var(--accent); }
.input {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
@media (max-width: 420px) {
  body { font-size: 19px; }
  .wrap { padding: 32px 16px; }
  .title { font-size: 30px; }
}

@media (max-width: 480px) {
  .home-grid {
    gap: 16px !important; /* tighter vertical gap */
  }
  .card {
    margin-bottom: 0 !important; /* remove extra bottom spacing */
  }
  .context {
    margin-bottom: 16px !important; /* reduce gap below guidance box */
  }
}

/* Compare page textareas - 50% larger height for better visibility */
textarea {
  height: 150px;
  resize: vertical; /* allow vertical resize only */
}