:root {
  --paper: #f3f0e9;
  --paper-strong: #e8e3d9;
  --ink: #17201d;
  --muted: #6d746f;
  --line: rgba(23, 32, 29, 0.14);
  --green: #0c5a46;
  --green-soft: #dcebe4;
  --coral: #b64e3c;
  --coral-soft: #f1ded7;
  --white: #fffefa;
  --shadow: 0 30px 80px rgba(26, 38, 32, 0.13);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { height: 78px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; }
.brand-mark { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 700 11px/1 Manrope, sans-serif; letter-spacing: .07em; }
.brand strong, .brand small { display: block; }
.brand strong { font: 700 13px/1.25 Manrope, sans-serif; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.header-link { color: var(--ink); text-decoration: none; font-size: 13px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.hero { min-height: calc(100svh - 78px); padding: clamp(64px, 10vw, 120px) 22px 48px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; width: 300px; height: 300px; right: -180px; top: 90px; border: 1px solid rgba(12, 90, 70, .2); border-radius: 50%; box-shadow: 0 0 0 42px rgba(12, 90, 70, .025), 0 0 0 88px rgba(12, 90, 70, .025); pointer-events: none; }
.hero-kicker, .eyebrow { color: var(--green); font: 700 11px/1.2 Manrope, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.hero-kicker { display: flex; align-items: center; gap: 9px; }
.hero-kicker span { width: 30px; height: 1px; background: var(--green); }
.hero h1 { max-width: 920px; margin: 25px 0 22px; font: 700 clamp(42px, 11vw, 88px)/.99 Manrope, sans-serif; letter-spacing: -.055em; }
.hero h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--green); }
.hero > p { color: var(--muted); max-width: 590px; margin: 0 0 30px; font-size: clamp(16px, 4vw, 20px); line-height: 1.55; }
.primary-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 42px; padding: 15px 18px; background: var(--ink); color: white; text-decoration: none; border-radius: 3px; font-weight: 600; font-size: 14px; transition: transform .2s ease, background .2s ease; }
.primary-link:hover { transform: translateY(-2px); background: var(--green); }
.hero-stat { margin-top: 54px; padding-top: 19px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto auto 1px auto auto; align-items: center; gap: 9px; max-width: 460px; color: var(--muted); }
.hero-stat strong { color: var(--ink); font: 700 16px Manrope, sans-serif; }
.hero-stat span { font-size: 12px; }
.hero-stat i { width: 1px; height: 26px; margin: 0 8px; background: var(--line); }

.cards-section { padding: 72px 18px 86px; background: var(--ink); color: var(--paper); }
.section-heading { max-width: 820px; margin: 0 auto 26px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.cards-section .eyebrow { color: #8cc3ae; margin: 0 0 12px; }
.section-heading h2 { max-width: 570px; margin: 0; font: 700 clamp(29px, 7vw, 48px)/1.08 Manrope, sans-serif; letter-spacing: -.04em; }
.ghost-button { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.24); background: transparent; color: var(--paper); padding: 10px 13px; border-radius: 99px; cursor: pointer; font-size: 12px; }
.ghost-button:hover { background: rgba(255,255,255,.07); }
.ghost-button span { margin-right: 5px; }

.search-wrap { position: relative; max-width: 820px; margin: 0 auto 14px; }
.search-wrap svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; color: #9ea5a1; }
.search-wrap input { width: 100%; height: 52px; padding: 0 48px 0 46px; color: var(--paper); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; background: rgba(255,255,255,.055); outline: none; }
.search-wrap input::placeholder { color: #8f9692; }
.search-wrap input:focus { border-color: #8cc3ae; box-shadow: 0 0 0 3px rgba(140,195,174,.12); }
.clear-search { display: none; position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #afb5b1; background: transparent; cursor: pointer; font-size: 24px; }
.clear-search.visible { display: block; }

.filters { display: flex; gap: 8px; overflow-x: auto; max-width: 820px; margin: 0 auto 28px; padding: 2px 0 8px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.2); color: #c4c8c5; background: transparent; padding: 9px 12px; border-radius: 99px; cursor: pointer; font-size: 12px; }
.filter-chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.deck-shell { max-width: 620px; margin: 0 auto; }
.deck-meta { display: flex; justify-content: space-between; color: #aeb4b0; font-size: 12px; }
.progress-track { height: 2px; background: rgba(255,255,255,.13); margin: 10px 0 15px; overflow: hidden; }
.progress-track span { display: block; width: 1%; height: 100%; background: #8cc3ae; transition: width .3s ease; }
.flashcard { width: 100%; height: clamp(405px, 64svh, 520px); padding: 0; border: 0; border-radius: 6px; background: transparent; perspective: 1300px; cursor: pointer; text-align: left; isolation: isolate; }
.card-inner { display: block; position: relative; width: 100%; height: 100%; transition: transform .62s cubic-bezier(.2,.72,.24,1); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; }
.flashcard.is-flipped .card-inner { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(24px, 7vw, 44px); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; overflow: hidden; transition: visibility 0s linear .31s, opacity .01s linear .31s; }
.card-front { background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.card-front::after { content: "?"; position: absolute; right: -14px; bottom: -88px; font: 800 300px/.8 Manrope, sans-serif; color: rgba(12,90,70,.045); }
.card-back { background: #dce9e1; color: var(--ink); transform: rotateY(180deg); box-shadow: var(--shadow); visibility: hidden; opacity: 0; }
.flashcard.is-flipped .card-front { visibility: hidden; opacity: 0; }
.flashcard.is-flipped .card-back { visibility: visible; opacity: 1; }
.card-back.is-wrong { background: var(--coral-soft); }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.category-label, .card-number, .answer-label { font: 700 10px/1.2 Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.category-label { color: var(--green); }
.card-number { color: #8a918d; }
.prompt-label, .answer-label { margin: auto 0 12px; color: #8a918d; font-size: 10px; letter-spacing: .14em; }
.statement { position: relative; z-index: 1; display: block; font: 700 clamp(27px, 7vw, 44px)/1.14 Manrope, sans-serif; letter-spacing: -.04em; }
.flip-hint { position: relative; z-index: 1; margin-top: auto; padding-top: 22px; color: #747c77; font-size: 12px; display: flex; align-items: center; gap: 7px; }
.flip-hint span { font-size: 17px; }
.answer-badge { padding: 8px 11px; border-radius: 3px; color: #e8f3ed; background: var(--green); font: 700 10px/1 Manrope, sans-serif; letter-spacing: .1em; }
.answer-badge.wrong { background: var(--coral); color: white; }
.answer-title { display: block; font: 700 clamp(29px, 8vw, 48px)/1 Manrope, sans-serif; letter-spacing: -.04em; }
.explanation { display: block; margin-top: 18px; color: #4c5651; font-size: clamp(15px, 4vw, 18px); line-height: 1.55; }
.variation-note { display: none; margin-top: 16px; border-left: 2px solid currentColor; padding-left: 11px; color: #53625b; font-size: 12px; line-height: 1.4; }
.variation-note.visible { display: block; }
.deck-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 9px; margin-top: 13px; }
.nav-button { min-height: 52px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; cursor: pointer; font-weight: 700; font-size: 13px; }
.nav-button.secondary { background: transparent; color: var(--paper); }
.nav-button.primary { display: flex; justify-content: space-between; align-items: center; padding: 0 18px; border-color: var(--paper); background: var(--paper); color: var(--ink); }
.nav-button:hover { transform: translateY(-1px); }
.nav-button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.keyboard-hint { margin: 13px 0 0; text-align: center; color: #858d88; font-size: 10px; }
kbd { border: 1px solid #59605c; border-radius: 3px; padding: 1px 4px; font-family: inherit; }
.empty-state { min-height: 405px; padding: 54px 30px; border: 1px dashed rgba(255,255,255,.22); border-radius: 6px; text-align: center; }
.empty-state > span { font-size: 40px; color: #8cc3ae; }
.empty-state h3 { margin: 18px 0 8px; font: 700 22px Manrope, sans-serif; }
.empty-state p { margin: 0 auto 20px; max-width: 340px; color: #aeb4b0; font-size: 14px; line-height: 1.5; }
.empty-state button { padding: 11px 14px; background: var(--paper); border: 0; border-radius: 3px; cursor: pointer; font-weight: 700; font-size: 12px; }

.about { padding: 78px 22px 86px; display: grid; gap: 34px; }
.about .eyebrow { margin: 0 0 14px; }
.about h2 { margin: 0; max-width: 520px; font: 700 clamp(35px, 9vw, 64px)/1.03 Manrope, sans-serif; letter-spacing: -.05em; }
.about-copy { max-width: 610px; }
.about-copy > p:first-child { margin: 0; color: #4f5854; font-size: 16px; line-height: 1.65; }
details { margin-top: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }
summary { cursor: pointer; font-weight: 700; font-size: 13px; }
details p { color: var(--muted); font-size: 13px; line-height: 1.55; }
details a { color: var(--green); text-underline-offset: 3px; }
.signature { margin: 28px 0 0; }
.signature span, .signature strong, .signature small { display: block; }
.signature span { color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.signature strong { margin-top: 6px; font: 700 15px Manrope, sans-serif; }
.signature small { color: var(--muted); margin-top: 3px; }
footer { padding: 20px 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 18px; padding: 10px 14px; border-radius: 99px; background: rgba(23,32,29,.94); color: white; font-size: 12px; transform: translate(-50%, 90px); opacity: 0; transition: .3s ease; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 760px) {
  .site-header { padding: 0 5vw; height: 88px; }
  .hero { min-height: calc(100vh - 88px); padding-left: 8vw; padding-right: 8vw; }
  .cards-section { padding-top: 100px; padding-bottom: 110px; }
  .about { grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); padding: 110px 8vw; align-items: start; }
  footer { padding-left: 8vw; padding-right: 8vw; }
}

@media (max-width: 520px) {
  .section-heading { align-items: start; }
  .ghost-button { margin-top: 27px; }
  .keyboard-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}