:root {
  --bg: #fbf7f0;
  --surface: #ffffff;
  --surface-2: #f3ece0;
  --ink: #1f1b16;
  --ink-soft: #4a4238;
  --accent: #b4462b;
  --accent-ink: #ffffff;
  --accent-soft: #fbe6dd;
  --term: #8a2f19;
  --term-bg: #fff1c7;
  --good: #2f7a3e;
  --good-soft: #e3f3e5;
  --bad: #b3261e;
  --bad-soft: #fde4e2;
  --border: #e3d8c6;
  --sugar: #e9a23b;
  --shadow: 0 2px 10px rgba(60, 40, 20, 0.08);
  --scale: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1814;
    --surface: #26221d;
    --surface-2: #302a23;
    --ink: #f5efe6;
    --ink-soft: #d6ccbe;
    --accent: #f08a68;
    --accent-ink: #1b1814;
    --accent-soft: #3d2a22;
    --term: #ffd27a;
    --term-bg: #3d3320;
    --good: #7fd18e;
    --good-soft: #1f3324;
    --bad: #ff8a80;
    --bad-soft: #3b2120;
    --border: #3e362c;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

html { font-size: calc(21px * var(--scale)); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Mukta", "Noto Sans Devanagari", system-ui, sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; cursor: pointer; }

[hidden] { display: none !important; }

/* ---------- ऊपर की पट्टी ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tools { display: flex; gap: 8px; }
.home-btn, .tool {
  min-height: 52px;
  padding: 6px 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  font-weight: 700;
  font-size: 0.9rem;
}
.home-btn:active, .tool:active { transform: scale(0.97); }

main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }

/* ---------- मुख्य पेज ---------- */
.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
}
h1 { font-size: 2rem; line-height: 1.3; margin: 0 0 12px; }
h2 { font-size: 1.45rem; line-height: 1.35; margin: 0 0 16px; }
h3 { font-size: 1.05rem; margin: 0 0 4px; line-height: 1.4; }
p { margin: 0 0 16px; }
.lead { font-size: 1.1rem; color: var(--ink-soft); }

.tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  background: var(--term-bg);
  margin-bottom: 24px;
}
.tip p { margin: 0; }
.tip-icon { font-size: 1.6rem; line-height: 1.2; }

.lesson-list { display: grid; gap: 16px; }
.lesson-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "emoji num"
    "emoji title"
    "emoji meta"
    "emoji status";
  column-gap: 16px;
  align-items: center;
  text-align: left;
  padding: 20px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.lesson-card:hover { border-color: var(--accent); }
.lesson-card:active { transform: scale(0.99); }
.lesson-emoji {
  grid-area: emoji;
  font-size: 2.6rem;
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: var(--accent-soft);
}
.lesson-num { grid-area: num; font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.lesson-title { grid-area: title; font-size: 1.3rem; font-weight: 800; line-height: 1.35; }
.lesson-meta { grid-area: meta; font-size: 0.85rem; color: var(--ink-soft); }
.lesson-status { grid-area: status; font-size: 0.85rem; font-weight: 700; color: var(--good); }
.lesson-status:empty { display: none; }

.disclaimer {
  margin-top: 28px;
  padding: 14px 16px;
  border-left: 5px solid var(--accent);
  background: var(--surface);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- कठिन शब्द ---------- */
.term {
  display: inline;
  padding: 0 4px;
  border: none;
  border-bottom: 3px dotted var(--term);
  border-radius: 4px 4px 0 0;
  background: var(--term-bg);
  color: var(--term);
  font-weight: 700;
  line-height: inherit;
}
.term::after {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 1.05em; height: 1.05em;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--term);
  color: var(--surface);
  font-size: 0.7em;
  vertical-align: 0.15em;
}
.term:focus-visible, .nav-btn:focus-visible, .quiz-opt:focus-visible, .lesson-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- पाठ ---------- */
.lesson-head { margin-bottom: 16px; }
.progress {
  height: 12px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
  margin: 8px 0 4px;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.progress-text { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

.slide {
  display: none;
  padding: 24px 20px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  animation: fadeIn 0.35s ease;
}
.slide.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  background: var(--accent-soft);
  margin: 8px 0 16px;
}
.callout.good { background: var(--good-soft); }
.callout p { margin: 0; }
.callout-icon { font-size: 1.6rem; line-height: 1.2; }

.flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  margin: 8px 0 20px;
  border-radius: 16px;
  background: var(--surface-2);
}
.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.35;
}
.flow-icon { font-size: 2.2rem; }
.flow-arrow { font-size: 1.4rem; color: var(--accent); }

.scene {
  margin: 8px 0 20px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface-2);
}
.scene svg { width: 100%; height: auto; display: block; }
.scene figcaption { text-align: center; font-weight: 700; font-size: 0.95rem; margin-top: 8px; }
.room { fill: var(--good-soft); stroke: var(--good); stroke-width: 3; }
.room-sad { fill: var(--bad-soft); stroke: var(--bad); }
.door { fill: var(--ink-soft); }
.svg-label { fill: var(--ink); font-family: "Mukta", sans-serif; font-size: 15px; font-weight: 700; }
.sugar { fill: var(--sugar); stroke: #fff; stroke-width: 2; }

/* सामान्य शरीर: चीनी दरवाज़े से अंदर जाती है */
.slide.active #sceneNormal .door-open { animation: doorOpen 4s ease-in-out infinite; transform-origin: 180px 125px; transform-box: view-box; }
.slide.active #sceneNormal .key { animation: keyMove 4s ease-in-out infinite; }
.slide.active #sceneNormal .s1 { animation: sugarIn 4s ease-in-out infinite; }
.slide.active #sceneNormal .s2 { animation: sugarIn 4s ease-in-out 0.3s infinite; }
.slide.active #sceneNormal .s3 { animation: sugarIn 4s ease-in-out 0.6s infinite; }
@keyframes keyMove { 0%, 10% { transform: translateX(0); } 35%, 100% { transform: translateX(28px); } }
@keyframes doorOpen { 0%, 35% { transform: scaleY(1); } 45%, 90% { transform: scaleY(0.15); } 100% { transform: scaleY(1); } }
@keyframes sugarIn {
  0%, 40% { transform: translate(0, 0); opacity: 1; }
  75% { transform: translate(180px, 10px); opacity: 1; }
  90%, 100% { transform: translate(220px, 10px); opacity: 0; }
}
.slide.active #sceneDiabetes .pile { animation: bob 2.4s ease-in-out infinite; }
.slide.active #sceneDiabetes .pile:nth-of-type(2n) { animation-delay: 0.6s; }
@keyframes bob { 50% { transform: translateY(-4px); } }

.big-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 12px; }
.big-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
}
.big-list li > span { font-size: 1.5rem; line-height: 1.3; }

.summary { padding-left: 1.4em; margin: 0 0 20px; display: grid; gap: 10px; }
.summary li::marker { color: var(--accent); font-weight: 800; }

.compare { display: grid; gap: 14px; margin-bottom: 16px; }
@media (min-width: 620px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-card {
  padding: 18px;
  border-radius: 18px;
  border: 2px solid var(--border);
  background: var(--surface-2);
}
.compare-card p { margin: 0 0 8px; }
.compare-icon { font-size: 2rem; display: block; margin-bottom: 6px; }
.compare-tag { font-weight: 700; }

.reasons { display: grid; gap: 12px; }
.reason {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-2);
}
.reason > span { font-size: 2rem; line-height: 1.2; min-width: 2.4rem; text-align: center; }
.reason p { margin: 0; color: var(--ink-soft); }

.myth {
  padding: 16px;
  border-radius: 16px;
  background: var(--surface-2);
  margin-bottom: 14px;
}
.myth-q { font-weight: 800; margin-bottom: 6px; }
.myth-a { margin: 0; }

/* ---------- सवाल ---------- */
.quiz {
  padding: 18px;
  border-radius: 18px;
  border: 2px dashed var(--accent);
  display: grid;
  gap: 10px;
}
.quiz-q { font-weight: 800; margin: 0 0 4px; }
.quiz-opt {
  min-height: 60px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--surface);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: left;
}
.quiz-opt.right { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.quiz-opt.wrong { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.quiz-feedback { margin: 0; font-weight: 700; min-height: 1.7em; }

/* ---------- आगे/पीछे ---------- */
.lesson-nav {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  padding: 16px 0;
  background: linear-gradient(transparent, var(--bg) 30%);
}
.nav-btn {
  min-height: 64px;
  border-radius: 18px;
  border: 2px solid var(--border);
  background: var(--surface);
  font-weight: 800;
  font-size: 1.1rem;
}
.nav-btn.next { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
.nav-btn:active:not(:disabled) { transform: scale(0.98); }

/* ---------- शब्दकोश ---------- */
.glossary-list { display: grid; gap: 12px; }
.glossary-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.glossary-item > span { font-size: 1.8rem; line-height: 1.2; }
.glossary-item p { margin: 0; color: var(--ink-soft); }

/* ---------- मतलब वाला डिब्बा ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(20, 14, 8, 0.5);
}
.sheet {
  position: fixed; z-index: 21;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(640px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 22px 24px;
  border-radius: 26px 26px 0 0;
  background: var(--surface);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.28s ease;
}
@keyframes slideUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.sheet-icon { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.sheet h2 { color: var(--term); margin-bottom: 10px; }
.sheet-example {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--term-bg);
}
.sheet-example:empty { display: none; }
.sheet-close {
  width: 100%;
  min-height: 64px;
  border: none;
  border-radius: 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 1.15rem;
}

@media (max-width: 480px) {
  .home-btn span, .tool span { display: none; }
  h1 { font-size: 1.7rem; }
  .slide { padding: 20px 16px; }
  .flow-arrow { transform: rotate(90deg); }
  .flow { flex-direction: column; }
}

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

/* ---------- लिंक वाले बटन ---------- */
a.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-bottom: 10px;
  padding: 4px 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-weight: 700;
  font-size: 0.9rem;
}
.back-btn:focus-visible, a.home-btn:focus-visible, .topic-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- सभी विषय (होम) ---------- */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; }
.brand-mark {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.3rem;
}
.home-hero { margin-bottom: 28px; }
.home-hero h1 { font-size: 2.2rem; }

.topic-section { margin-bottom: 32px; }
.section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.25rem;
  margin: 0 0 14px;
}
.section-title span { font-size: 1.5rem; }

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}
.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
}
a.topic-card:hover { border-color: var(--accent); }
a.topic-card:active { transform: scale(0.99); }
.topic-icon {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  margin-bottom: 6px;
  border-radius: 16px;
  background: var(--accent-soft);
  font-size: 2.1rem;
}
.topic-title { font-size: 1.2rem; font-weight: 800; line-height: 1.35; }
.topic-desc { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.topic-badge {
  align-self: flex-start;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
}
.topic-badge.ready { background: var(--accent); color: var(--accent-ink); }
.topic-badge.soon { background: var(--surface-2); color: var(--ink-soft); }
.topic-card.soon { border-style: dashed; box-shadow: none; background: transparent; }
.topic-card.soon .topic-icon { background: var(--surface-2); filter: grayscale(0.4); opacity: 0.8; }
.topic-card.soon .topic-title { color: var(--ink-soft); }

.site-footer {
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- चलते इमोजी ---------- */
.anim-emoji { display: block; width: 1.15em; height: 1.15em; object-fit: contain; }
.anim-inline { display: inline-block; vertical-align: -0.2em; }
.anim-inline .anim-emoji { width: 1.3em; height: 1.3em; }
.site-footer a, .disclaimer a { color: inherit; }
/* जिनका चलता इमोजी साफ़ नहीं दिखता, उन्हें धीरे-धीरे धड़कने दें */
.pulse { display: inline-block; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }