:root{
  --cream:#f5efe6;
  --parchment:#ede3d5;
  --sand:#d9c9b4;
  --terracotta:#c1673f;
  --terracotta-dark:#9a4c2c;
  --rust:#8b3a20;
  --warm-brown:#5c3317;
  --soft-white:#fbf8f3;
  --text:#2e1f0f;
  --muted:#8a7663;
  --ok:#5e8a52;
  --ok-bg:#e6efdf;
  --warn:#c9932f;
  --warn-bg:#fbf0d9;
  --bad:#b24a38;
  --bad-bg:#f6e1dc;
  --radius:18px;
  --shadow:0 10px 26px rgba(92,51,23,.12),0 2px 6px rgba(92,51,23,.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  padding:20px 16px 70px;
  color:var(--text);
  font-family:"DM Sans",sans-serif;
  background:
    radial-gradient(ellipse 700px 420px at 100% -8%,rgba(193,103,63,.10),transparent 60%),
    radial-gradient(ellipse 600px 420px at -10% 25%,rgba(92,51,23,.08),transparent 55%),
    var(--cream);
}

button{font:inherit}
.page-header{position:relative;max-width:1080px;margin:0 auto 6px;text-align:center;padding-top:4px}
.eyebrow{
  display:inline-block;
  margin-bottom:12px;
  padding:5px 20px;
  border-radius:20px;
  color:#fff;
  background:var(--terracotta-dark);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.page-header h1{
  color:var(--warm-brown);
  font-family:"Playfair Display",serif;
  font-size:clamp(1.7rem,4.2vw,2.6rem);
  font-weight:800;
  line-height:1.08;
}
.script-sub{
  display:block;
  margin-top:4px;
  color:var(--terracotta-dark);
  font-family:"Caveat",cursive;
  font-size:22px;
  font-weight:700;
}
.header-rule{max-width:640px;margin:16px auto 22px}
.header-rule .line{height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--sand) 0 10px,transparent 10px 18px)}

.stats-bar{max-width:1080px;margin:0 auto 18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.stat-pill{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border:1.5px solid var(--sand);
  border-radius:99px;
  color:var(--muted);
  background:var(--soft-white);
  box-shadow:0 3px 8px rgba(92,51,23,.06);
  font-size:12.5px;
  font-weight:600;
}
.stat-pill b{color:var(--terracotta-dark);font-size:13.5px;font-weight:800}
.progress-wrap{max-width:1080px;margin:0 auto 26px}
.progress-track{height:12px;overflow:hidden;border:1px solid var(--sand);border-radius:99px;background:var(--parchment)}
.progress-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--terracotta) 0%,var(--rust) 100%);transition:width .4s ease}
.progress-label{margin-top:8px;color:var(--muted);font-size:12.5px;font-weight:600;text-align:center}

.filters{max-width:1080px;margin:0 auto 30px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.filter-btn{
  padding:8px 16px;
  border:1.5px solid var(--sand);
  border-radius:99px;
  color:var(--warm-brown);
  background:var(--soft-white);
  cursor:pointer;
  font-size:12.5px;
  font-weight:600;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s;
}
.filter-btn:hover{border-color:var(--terracotta);transform:translateY(-1px)}
.filter-btn.active{border-color:var(--terracotta-dark);color:#fff;background:var(--terracotta-dark)}
.filter-btn.warn-filter{border-color:var(--warn);color:var(--rust)}
.filter-btn.warn-filter.active{border-color:var(--warn);color:#3a2500;background:var(--warn)}

.cards-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;perspective:1400px}
.card-wrap{height:320px;cursor:pointer}
.card-inner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.card-wrap.flipped .card-inner{transform:rotateY(180deg)}
.card-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:20px 20px 18px;
  border:2px solid transparent;
  border-radius:var(--radius);
  background:var(--soft-white);
  box-shadow:var(--shadow);
  backface-visibility:hidden;
}
.card-front{justify-content:space-between}
.card-back{overflow-y:auto;background:var(--parchment);transform:rotateY(180deg)}
.cat-tag{align-self:flex-start;margin-bottom:10px;padding:4px 12px;border-radius:99px;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.author-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.author-initial{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-family:"Playfair Display",serif;font-size:15px;font-weight:800}
.card-front h3{color:var(--warm-brown);font-family:"Playfair Display",serif;font-size:17px;font-weight:800;line-height:1.2}
.author-area{margin-top:1px;color:var(--muted);font-size:11px;font-weight:600}
.question{flex:1;display:flex;align-items:center;color:var(--text);font-size:14.5px;line-height:1.5}
.flip-hint{margin-top:8px;color:var(--terracotta-dark);font-size:11px;font-weight:700;letter-spacing:.02em;text-align:center}
.back-title{margin-bottom:8px;color:var(--ok);font-family:"Playfair Display",serif;font-size:14px;font-weight:800}
.answer{flex:1;color:var(--text);font-size:13.5px;line-height:1.55}
.exam-tip{margin-top:12px;padding:9px 11px;border-left:3px solid var(--warn);border-radius:8px;color:#5c4008;background:var(--warn-bg);font-size:12px;line-height:1.45}
.know-row{display:flex;gap:6px;margin-top:12px}
.know-btn{flex:1;min-height:34px;border:0;border-radius:10px;cursor:pointer;font-size:11.5px;font-weight:700;transition:filter .15s,transform .15s}
.know-btn.yes{color:var(--ok);background:var(--ok-bg)}
.know-btn.review{color:#8a6408;background:var(--warn-bg)}
.know-btn.no{color:var(--bad);background:var(--bad-bg)}
.know-btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.know-btn:focus-visible,.filter-btn:focus-visible,.reset-btn:focus-visible{outline:3px solid rgba(193,103,63,.35);outline-offset:2px}
.empty-state{grid-column:1/-1;padding:60px 20px;color:var(--muted);text-align:center}
.empty-state .icon{margin-bottom:10px;font-size:44px}
.empty-state p{font-size:14.5px;font-weight:600}

footer{max-width:1080px;margin:44px auto 0;text-align:center}
.footer-tag{display:inline-block;padding:9px 22px;border-radius:99px;color:var(--cream);background:var(--warm-brown);font-size:11.5px;font-weight:700;letter-spacing:1.5px}
footer .fine{margin-top:10px;color:var(--muted);font-size:11px}
.reset-btn{display:block;margin:16px auto 0;padding:7px 16px;border:1.5px solid var(--sand);border-radius:99px;color:var(--muted);background:none;cursor:pointer;font-size:11.5px;font-weight:600}
.reset-btn:hover{border-color:var(--bad);color:var(--bad)}

@media (max-width:640px){
  body{padding-inline:12px}
  .page-header h1{font-size:1.5rem}
  .cards-grid{grid-template-columns:1fr;gap:18px}
  .card-wrap{height:360px}
  .know-row{gap:5px}
  .know-btn{font-size:11px}
}