:root {
  --ink: #182923;
  --ink-soft: #50625b;
  --paper: #f7f2e8;
  --surface: #fffcf6;
  --surface-2: #eee4d2;
  --line: #ddcfb9;
  --sage: #667c60;
  --sage-deep: #27483c;
  --sky: #91cae5;
  --sky-deep: #478fb9;
  --sun: #d88a3d;
  --rose: #b7645e;
  --shadow: 0 10px 30px rgba(50, 40, 22, .10);
  --radius: 22px;
}

body.dark {
  --ink: #edf2e7;
  --ink-soft: #b8c4b9;
  --paper: #12221e;
  --surface: #1a2e28;
  --surface-2: #243a32;
  --line: #3b5047;
  --sage: #a4bd8c;
  --sage-deep: #c5d6b7;
  --sky: #8fc8e5;
  --sky-deep: #66add6;
  --sun: #f1b66e;
  --rose: #e89d91;
  --shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font: 16px/1.55 "DM Sans", sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: 0; }
.skip-link { position: absolute; top: -100px; left: 12px; z-index: 10; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.topbar { position: sticky; top: 0; z-index: 5; height: 68px; padding: 10px max(18px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: var(--sky-deep); color: #fffaf1; font-size: 21px; }
.brand strong, .brand small { display: block; line-height: 1.12; }
.brand strong { font-family: Fraunces, serif; font-size: 17px; }
.brand small { color: var(--ink-soft); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); font-size: 21px; }
main { max-width: 760px; padding: 22px 18px 105px; margin: auto; }
.view { display: none; animation: rise .25s ease; }
.view.active { display: block; }
@keyframes rise { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: Fraunces, serif; line-height: 1.08; letter-spacing: -.025em; }
h1 { font-size: clamp(2.15rem, 10vw, 3.6rem); max-width: 680px; margin-bottom: 15px; }
h2 { font-size: 1.75rem; margin-bottom: 8px; }
h3 { font-size: 1.2rem; margin-bottom: 7px; }
.eyebrow { color: var(--sage-deep); letter-spacing: .11em; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.lede { max-width: 570px; color: var(--ink-soft); font-size: 1.03rem; }
.hero { position: relative; overflow: hidden; padding: 34px 25px 25px; background: var(--sage-deep); color: #fdf8ee; border-radius: 28px; box-shadow: var(--shadow); }
.hero::before { content:""; position:absolute; width:240px; height:240px; right:-110px; top:-130px; border-radius:50%; background:var(--sky-deep); opacity:.34; filter:blur(12px); }
.hero::after { content: "☾  ·  ✦  ·  ⌁"; position: absolute; right: -25px; bottom: 6px; opacity: .16; font-size: 46px; letter-spacing: 8px; white-space: nowrap; }
.hero .eyebrow { color: #d3dfb7; }
.hero .lede { color: #e3ebd8; }
.hero h1 { position: relative; z-index: 1; }
.hero p { position: relative; z-index: 1; }
.hero-actions, .button-row { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 45px; padding: 11px 16px; border-radius: 13px; background: var(--sky-deep); color: #fff; font-weight: 700; box-shadow: 0 4px 13px rgba(0,0,0,.1); }
.button.secondary { background: transparent; border: 1px solid currentColor; color: inherit; box-shadow: none; }
.button.soft { background: var(--surface-2); color: var(--sage-deep); box-shadow: none; }
.section { margin-top: 31px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.section-heading h2 { margin: 0; }
.section-heading a { color: var(--sage-deep); font-size: 14px; font-weight: 700; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 12px rgba(50, 40, 22, .035); }
.card-pad { padding: 19px; }
.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-card { min-height: 135px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .15s; }
.quick-card:active { transform: scale(.98); }
.quick-card .symbol { font-size: 24px; color: var(--sun); }
.grill-card { border-color: color-mix(in srgb, var(--sky-deep) 45%, var(--line)); background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--sky) 16%, var(--surface))); }
.grill-card .symbol { color: var(--sky-deep); }
.quick-card strong { display: block; line-height: 1.2; }
.quick-card small { color: var(--ink-soft); line-height: 1.3; }
.progress-card { padding: 17px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.progress-ring { --pct: 0; width: 58px; aspect-ratio: 1; border-radius: 50%; display:grid; place-items:center; background: conic-gradient(var(--sky-deep) calc(var(--pct) * 1%), var(--surface-2) 0); }
.progress-ring::before { content: attr(data-label); display:grid; place-items:center; width: 45px; height:45px; border-radius: 50%; background: var(--surface); font-size: 12px; font-weight: 700; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--sage-deep); }
.callout { border-left: 4px solid var(--sun); padding: 13px 15px; background: color-mix(in srgb, var(--sun) 9%, var(--surface)); border-radius: 0 13px 13px 0; color: var(--ink-soft); }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content:""; position:absolute; left: 7px; top: 16px; bottom: 19px; width: 1px; background: var(--line); }
.timeline-item { position: relative; margin: 0 0 16px; }
.timeline-item::before { content:""; position:absolute; left:-24px; top: 18px; width: 11px; height:11px; border: 3px solid var(--paper); border-radius:50%; background: var(--sun); box-shadow: 0 0 0 1px var(--sun); }
.timeline-item button { width: 100%; padding: 17px; text-align:left; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.timeline-item button:focus-visible, .card:focus-visible, .button:focus-visible, .nav-link:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.timeline-item .place { color: var(--sage-deep); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.timeline-item h3 { margin: 3px 0; }
.timeline-item p { color: var(--ink-soft); margin-bottom: 0; font-size: 14px; }
.filter-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 9px; scrollbar-width: none; }
.filter { flex: 0 0 auto; padding: 9px 13px; border-radius: 999px; color: var(--ink-soft); border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 700; }
.filter.active { color: #fff; border-color: var(--sage-deep); background: var(--sage-deep); }
.accordion { overflow: hidden; }
.accordion + .accordion { margin-top: 10px; }
.accordion summary { position: relative; list-style: none; padding: 17px 44px 17px 17px; font-weight: 700; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; position:absolute; right:17px; top:13px; font-size: 23px; color:var(--sage-deep); font-weight:400; }
.accordion[open] summary::after { content: "–"; }
.accordion-body { padding: 0 17px 18px; color: var(--ink-soft); }
.accordion-body p:last-child { margin-bottom: 0; }
.key-list { padding: 0; margin: 12px 0 0; list-style: none; }
.key-list li { position:relative; padding: 8px 0 8px 18px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.key-list li::before { content:"✦"; position:absolute; left:0; color:var(--sun); font-size:11px; top:10px; }
.study-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; margin: 16px 0; background: var(--surface-2); border-radius: 14px; }
.study-tab { padding: 9px 4px; background: transparent; color: var(--ink-soft); border-radius: 10px; font-size: 12px; font-weight: 700; }
.study-tab.active { background: var(--surface); color: var(--sage-deep); box-shadow: 0 1px 5px rgba(0,0,0,.08); }
.flashcard { min-height: 250px; padding: 26px 22px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.flashcard .flash-answer { display:none; color:var(--ink-soft); font-size:1.03rem; }
.flashcard.flipped .flash-answer { display:block; }
.flashcard.flipped .tap-hint { opacity:0; }
.tap-hint { color:var(--sage-deep); font-size:13px; font-weight:700; }
.flash-controls { display:flex; justify-content:space-between; gap:10px; margin-top:12px; }
.flash-controls button { flex:1; min-height:44px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font-weight:700; }
.flash-controls button.good { background:var(--sage-deep); border-color:var(--sage-deep); color:white; }
.viva-card { padding: 20px; }
.viva-card .question { font-family:Fraunces,serif; font-size:1.25rem; line-height:1.25; }
.answer { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); color:var(--ink-soft); }
.answer[hidden] { display:none; }
.follow-up { margin-top:12px; color:var(--sage-deep); font-size:14px; }
.quiz-choice { width:100%; margin-top:9px; padding:13px 15px; text-align:left; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.quiz-choice.correct { background:#dcebd3; border-color:#7ca174; color:#173a22; }
.quiz-choice.wrong { background:#f2d6d1; border-color:#c77a70; color:#5b1c19; }
body.dark .quiz-choice.correct { background:#315137; color:#eff9e9; } body.dark .quiz-choice.wrong { background:#603c3a; color:#ffedea; }
.search-wrap { position:relative; }
.search-input { width:100%; min-height:52px; padding: 12px 15px 12px 42px; border:1px solid var(--line); border-radius:15px; outline: none; color:var(--ink); background:var(--surface); }
.search-input:focus { border-color:var(--sage-deep); box-shadow:0 0 0 3px color-mix(in srgb, var(--sage) 18%, transparent); }
.search-wrap::before { content:"⌕"; position:absolute; left:15px; top:10px; color:var(--sage-deep); font-size:22px; }
.search-result { padding:14px 0; border-bottom:1px solid var(--line); }
.search-result:last-child { border:0; }
.search-result p { margin:5px 0 0; color:var(--ink-soft); font-size:14px; }
.cheat-sheet { background:linear-gradient(145deg, var(--sage-deep), #315c58); color:#fdf9ef; padding:22px; border-radius:23px; }
.cheat-sheet .eyebrow { color:#d3dfb7; }.cheat-sheet h2 { margin-bottom:13px; }.cheat-sheet p,.cheat-sheet li { color:#e4eadc; }.cheat-sheet ul { margin:0; padding-left:18px; }.cheat-sheet li+li{margin-top:7px;}
.cheat-grid { display:grid; grid-template-columns:1fr; gap:1px; overflow:hidden; margin:0 -6px -6px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(255,255,255,.18); }.cheat-grid div { padding:13px; background:rgba(17,46,42,.34); }.cheat-grid strong { color:#fff; font-size:13px; }.cheat-grid p { margin:5px 0 0; font-size:13px; line-height:1.42; }
.grill-head { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--ink-soft); font-size:13px; font-weight:700; }.grill-progress { overflow:hidden; height:6px; margin-top:14px; border-radius:99px; background:var(--surface-2); }.grill-progress i { display:block; height:100%; border-radius:inherit; background:var(--sky-deep); transition:width .25s ease; }.grill-instruction { padding:11px 13px; border-left:3px solid var(--sky-deep); background:color-mix(in srgb, var(--sky) 16%, var(--surface)); color:var(--ink-soft); border-radius:0 10px 10px 0; }.grill-result { text-align:left; }.grill-result h2 { font-size:2rem; }
.modal { width:min(650px, calc(100% - 28px)); max-height:85vh; border:1px solid var(--line); padding:0; color:var(--ink); background:var(--surface); border-radius:24px; box-shadow:0 25px 90px rgba(0,0,0,.35); }
.modal::backdrop { background:rgba(12,24,20,.62); backdrop-filter:blur(2px); }
.modal-close { float:right; width:40px; height:40px; margin:13px; border-radius:50%; color:var(--ink); background:var(--surface-2); font-size:20px; }
.modal-content { padding:28px 22px 25px; }.modal-content h2 { padding-right:45px; }.modal-content h3 { margin-top:21px; }.modal-content p,.modal-content li { color:var(--ink-soft); }.modal-content ul { padding-left:18px; }
.bottom-nav { position:fixed; z-index:5; left:50%; bottom:0; transform:translateX(-50%); display:grid; grid-template-columns:repeat(5, 1fr); width:min(760px, 100%); padding:8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--surface) 94%, transparent); border-top:1px solid var(--line); backdrop-filter:blur(12px); }
.nav-link { display:flex; min-height:53px; flex-direction:column; align-items:center; justify-content:center; color:var(--ink-soft); border-radius:12px; font-size:10px; font-weight:700; }.nav-link span{font-size:18px; line-height:20px;}.nav-link.active { color:var(--sage-deep); background:var(--surface-2); }
.toast { position:fixed; z-index:20; left:50%; bottom:90px; transform:translate(-50%, 15px); pointer-events:none; opacity:0; width:max-content; max-width:calc(100% - 32px); padding:10px 15px; color:#fff; background:var(--ink); border-radius:999px; box-shadow:var(--shadow); font-size:13px; transition:.22s; }.toast.show { transform:translate(-50%,0); opacity:1; }
@media (min-width: 620px) { main { padding:35px 28px 105px; }.grid.three {grid-template-columns:repeat(3,1fr)}.hero { padding:44px 38px 35px; }.quick-card {min-height:150px;}.cheat-grid{grid-template-columns:repeat(2,1fr)} }