:root {
  --cream: #FDF6E3;
  --cream-deep: #F7EDD2;
  --paper: #FFFFFF;
  --blue: #2B3BD4;
  --blue-dark: #1E2BA8;
  --blue-soft: #E8EAFC;
  --yellow: #FFC93C;
  --yellow-soft: #FFF3D0;
  --ink: #1B1B2F;
  --ink-soft: #5A5A72;
  --ink-faint: #9A9AAE;
  --green: #2BB673;
  --green-soft: #E3F7EE;
  --amber: #E8973A;
  --amber-soft: #FDEFDF;
  --line: #E6DFC9;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --shadow-sticker: 0 4px 0 rgba(27, 27, 47, 0.12);
  --shadow-card: 0 10px 28px rgba(27, 27, 47, 0.08);
  --shadow-float: 0 18px 44px rgba(27, 27, 47, 0.14);

  --ui: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --math: "Latin Modern Math", "STIX Two Math", Cambria, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: 34px; }
h2 { font-size: 25px; }
h3 { font-size: 19px; }
h4 { font-size: 15px; }
p { margin: 0; }

button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.math {
  font-family: var(--math);
  font-style: italic;
  font-size: 1.12em;
  letter-spacing: 0.01em;
}
.math .fn, .math .num { font-style: normal; }

/* Cards use a 2px outline plus a hard offset shadow for the sticker feel. */
.card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sticker);
}
.card-soft {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.card-note {
  background: var(--yellow-soft);
  border: 2px solid var(--yellow);
  border-radius: var(--r-md);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:active { transform: translateY(2px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 0 var(--blue-dark); }
.btn-primary:active { box-shadow: 0 2px 0 var(--blue-dark); }
.btn-accent { background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 #D9A521; }
.btn-accent:active { box-shadow: 0 2px 0 #D9A521; }
.btn-ghost { background: transparent; color: var(--ink-soft); border: 2px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-sm { padding: 9px 16px; font-size: 15px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
}
.pill-blue { background: var(--blue-soft); color: var(--blue); }
.pill-yellow { background: var(--yellow-soft); color: #92670A; }
.pill-green { background: var(--green-soft); color: #1C8354; }
.pill-amber { background: var(--amber-soft); color: #B36A17; }
.pill-grey { background: #F0EEE6; color: var(--ink-faint); }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.tiny { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* Decorative 4-point sparkles, rotated slightly for the sticker look. */
.sparkle {
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  pointer-events: none;
}
.sparkle-blue { background: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}