:root{
  --bg:#f7fbff;
  --card:#ffffff;
  --ink:#19324a;
  --muted:#5c7185;
  --line:#d6e4f0;
  --accent:#2f80ed;
  --accent2:#ff8a5b;
  --good:#2ca678;
  --warn:#d9971d;
  --bad:#d95d6a;
}

body[data-theme="dark"]{
  --bg:#102033;
  --card:#17304a;
  --ink:#eef6ff;
  --muted:#b8c8d8;
  --line:rgba(255,255,255,.14);
  --accent:#7ec8ff;
  --accent2:#ffb089;
  --good:#7be0b8;
  --warn:#ffd46b;
  --bad:#ff97a7;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family:"Avenir Next","Trebuchet MS","Segoe UI",sans-serif;
  background:linear-gradient(180deg, #fffef7 0%, #f7fbff 52%, #eef7ff 100%);
  color:var(--ink);
  line-height:1.4;
}

body[data-theme="dark"]{
  background:linear-gradient(180deg, #112237 0%, #102033 100%);
}

a{
  color:inherit;
  text-decoration:none;
}

header,
.page-nav,
.wrap{
  max-width:1100px;
  margin:0 auto;
}

header{
  padding:18px 16px 10px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
}

h1{
  margin:0;
  font-size:1.55rem;
  letter-spacing:.15px;
}

.sub{
  margin-top:4px;
  color:var(--muted);
  font-size:.98rem;
}

.top-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

button,
.nav-link{
  appearance:none;
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--ink);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.2px;
  transition:transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body[data-theme="dark"] button,
body[data-theme="dark"] .nav-link{
  background:rgba(255,255,255,.05);
}

button:hover,
.nav-link:hover{
  background:#f5f9fd;
  border-color:#bfd4e7;
  box-shadow:0 4px 12px rgba(47,128,237,.08);
}

body[data-theme="dark"] button:hover,
body[data-theme="dark"] .nav-link:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
}

button:active,
.nav-link:active{
  transform:translateY(1px);
}

.btn-primary{
  border-color:#b9d8fb;
  background:#e9f4ff;
}

.btn-secondary{
  border-color:#cfdff0;
  background:#f5f9fd;
}

.btn-good{
  border-color:#bae7d7;
  background:#ecfbf4;
}

.btn-warn{
  border-color:#f3ddb0;
  background:#fff7e8;
}

body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .btn-secondary,
body[data-theme="dark"] .btn-good,
body[data-theme="dark"] .btn-warn{
  background:rgba(255,255,255,.08);
}

.page-nav{
  padding:0 16px 2px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
}

.nav-link.active,
.nav-link[aria-current="page"]{
  border-color:#b9d8fb;
  background:#e9f4ff;
  color:var(--ink);
}

body[data-theme="dark"] .nav-link.active,
body[data-theme="dark"] .nav-link[aria-current="page"]{
  background:rgba(126,200,255,.16);
  border-color:rgba(126,200,255,.35);
}

.nav-link--subtle{
  padding:8px 10px;
  border-radius:999px;
  font-size:.88rem;
}

.wrap{
  padding:12px 16px 28px;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:14px;
}

@media (max-width: 980px){
  .wrap{grid-template-columns:1fr}
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(25,50,74,.08);
  padding:16px;
}

body[data-theme="dark"] .card{
  box-shadow:none;
}

.stack{
  display:grid;
  gap:12px;
}

.pillrow,
.feature-meta,
.deck-nav,
.mini,
.quiz-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.pill{
  font-size:.82rem;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f7fbff;
  color:var(--muted);
  white-space:nowrap;
}

body[data-theme="dark"] .pill{
  background:rgba(255,255,255,.05);
}

.pill.accent{color:var(--accent); border-color:#b9d8fb}
.pill.violet{color:var(--accent2); border-color:#ffd3bf}
.pill.good{color:var(--good); border-color:#bae7d7}
.pill.warn{color:var(--warn); border-color:#f3ddb0}

.box{
  background:#fbfdff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}

body[data-theme="dark"] .box{
  background:rgba(255,255,255,.03);
}

.box strong{color:var(--accent)}

.muted{color:var(--muted)}

.section-copy{
  margin-top:6px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

.feature-card{
  display:block;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:#ffffff;
  transition:transform .1s ease, border-color .15s ease, background .15s ease;
}

body[data-theme="dark"] .feature-card{
  background:rgba(255,255,255,.03);
}

.feature-card:hover{
  transform:translateY(-1px);
  border-color:#b9d8fb;
  background:#fafdff;
}

body[data-theme="dark"] .feature-card:hover{
  background:rgba(255,255,255,.07);
}

.feature-card h2{
  margin:10px 0 6px;
  font-size:1.08rem;
}

.feature-card p{
  margin:0;
  color:var(--muted);
}

.feature-kicker{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #b9d8fb;
  color:var(--accent);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
}

.plain-list{
  margin:10px 0 0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color:var(--muted);
}

.target-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 720px){
  .target-grid{grid-template-columns:1fr}
}

.target-list{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.target{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  background:#ffffff;
}

body[data-theme="dark"] .target{
  background:rgba(255,255,255,.03);
}

.target-sublist{
  margin-top:8px;
}

.footer-note{
  color:var(--muted);
  font-size:.92rem;
}

.inlineBlank{
  display:inline-block;
  min-width:180px;
  border-bottom:2px solid #bfd4e7;
  transform:translateY(-2px);
}

body[data-theme="dark"] .inlineBlank{
  border-bottom-color:rgba(255,255,255,.28);
}

.inlineBlank-wide{
  min-width:220px;
}

.flash-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:14px;
}

@media (max-width: 720px){
  .flash-grid{grid-template-columns:1fr}
}

.answer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:14px;
}

@media (max-width: 720px){
  .answer-grid{grid-template-columns:1fr}
}

.deck-title{
  margin:0;
  font-size:1.08rem;
}

.deck-copy{
  margin:6px 0 0;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.45;
}

.flash-section-heading{
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--accent);
}

.flip-card{
  width:100%;
  min-height:252px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:16px;
  padding:56px 20px 20px;
  padding-right:98px;
  background:#ffffff;
  cursor:pointer;
  position:relative;
  overflow:visible;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
}

body[data-theme="dark"] .flip-card{
  background:rgba(255,255,255,.03);
}

.flip-card .k{
  display:block;
  font-weight:900;
  font-size:1.04rem;
  margin-bottom:0;
  line-height:1.45;
}

.flip-card .v{
  display:block;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.55;
}

.flip-card .badge{
  position:absolute;
  top:10px;
  right:10px;
  font-size:.82rem;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:#f7fbff;
}

body[data-theme="dark"] .flip-card .badge{
  background:rgba(255,255,255,.05);
}

.flip-card.revealed{
  border-color:#bae7d7;
  background:#effbf6;
}

body[data-theme="dark"] .flip-card.revealed{
  background:rgba(123,224,184,.12);
}

.flip-card.revealed .v{
  color:var(--ink);
}

.answer-card{
  min-height:252px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#ffffff;
  padding:18px;
  display:grid;
  gap:12px;
  align-content:start;
}

body[data-theme="dark"] .answer-card{
  background:rgba(255,255,255,.03);
}

.answer-card-label{
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--accent);
}

.answer-card-front{
  font-size:1.02rem;
  font-weight:800;
  line-height:1.45;
}

.answer-card-divider{
  border-top:1px dashed var(--line);
}

.answer-card-back{
  color:var(--ink);
  font-size:.98rem;
  line-height:1.55;
}

.kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:.85rem;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--muted);
}

.quiz-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
}

.control-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.timer{
  font-weight:900;
  letter-spacing:.3px;
  color:var(--warn);
}

.qcard{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:#ffffff;
}

body[data-theme="dark"] .qcard{
  background:rgba(255,255,255,.03);
}

.qtitle{
  font-weight:900;
  font-size:1.02rem;
}

.question-meta{
  margin-top:10px;
  color:var(--muted);
  display:grid;
  gap:6px;
}

.opts{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.opt{
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  background:#ffffff;
  font-weight:800;
}

body[data-theme="dark"] .opt{
  background:rgba(255,255,255,.03);
}

.opt:hover{
  background:#f5f9fd;
}

body[data-theme="dark"] .opt:hover{
  background:rgba(255,255,255,.08);
}

.opt.correct{
  border-color:#8fd4b8;
  background:#e8faf1;
}

body[data-theme="dark"] .opt.correct{
  background:rgba(123,224,184,.16);
}

.opt.wrong{
  border-color:#f2b5be;
  background:#fff0f3;
}

body[data-theme="dark"] .opt.wrong{
  background:rgba(255,151,167,.14);
}

.opt:disabled{
  opacity:1;
  cursor:default;
}

.answerKey{
  display:none;
  border:1px dashed #b9d8fb;
  border-radius:14px;
  padding:10px;
  background:#eef7ff;
}

body[data-theme="dark"] .answerKey{
  background:rgba(126,200,255,.08);
}

.answerKey.show{
  display:block;
}