*{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#24180f;
  --card:#322116;
  --ink:#f4e4c8;
  --muted:#c9b089;
  --flame:#e8a04a;
  --flame2:#c45c2a;
  --good:#6a9a6a;
  --bad:#c45c5c;
  --line:#4a3424;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html,body{
  background:radial-gradient(ellipse at 50% 0%, #3a2414 0%, #1a100a 55%, #120c08 100%);
  color:var(--ink); font-family:var(--serif);
  min-height:100%; min-height:100dvh;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#ui{min-height:100dvh;position:relative;z-index:1}
.top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 8px;
  border-bottom:1px solid var(--line);background:rgba(18,12,8,.65);
  position:sticky;top:0;backdrop-filter:blur(6px);z-index:5;
}
.stats{display:flex;gap:10px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.iconbtn,.textback{
  appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:8px;padding:8px 12px;font:inherit;font-size:14px;
}
.prog{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--flame)}
.page{
  padding:18px 18px calc(28px + env(safe-area-inset-bottom));
  max-width:520px;margin:0 auto;
}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--flame);font-weight:700;margin-bottom:6px}
h1{font-size:42px;line-height:1.05;font-weight:700;margin:0 0 10px;letter-spacing:-.02em}
.h1s{font-size:30px;margin-bottom:6px}
.h2{font-size:18px;margin:22px 0 10px;color:var(--muted);font-weight:700}
.lede{color:var(--muted);font-size:16px;line-height:1.45;margin-bottom:18px}
.fine{font-family:var(--sans);font-size:12px;color:var(--muted);line-height:1.45;margin:10px 0}
.hero-card{
  display:flex;gap:16px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.hero-card b{display:block;font-size:17px;margin-bottom:2px}
.hero-card p{font-family:var(--sans);font-size:13px;color:var(--muted);margin-bottom:10px}
.ring{
  width:72px;height:72px;border-radius:50%;
  background:conic-gradient(var(--flame) calc(var(--p)*1%), var(--line) 0);
  display:grid;place-items:center;flex-shrink:0;
}
.ring span{
  width:54px;height:54px;border-radius:50%;background:var(--card);
  display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:14px;
}
button.primary{
  appearance:none;border:0;background:linear-gradient(180deg,var(--flame),var(--flame2));
  color:#1a100a;font-family:var(--sans);font-weight:800;font-size:15px;
  border-radius:999px;padding:12px 18px;box-shadow:0 2px 0 #6a2e12;
}
button.primary.block{width:100%;margin-top:14px}
button.primary:active{transform:translateY(1px)}
button.ghost{
  appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);
  font-family:var(--sans);font-weight:700;font-size:13px;border-radius:999px;padding:10px 14px;
}
.rowbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dialect{
  margin-top:16px;padding:12px;border:1px dashed var(--line);border-radius:12px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-family:var(--sans);font-size:13px;color:var(--muted);
}
.tog{color:var(--ink);font-weight:650}
.tog input{margin-right:4px;accent-color:var(--flame)}

.map{display:flex;flex-direction:column;gap:10px}
.map-sec{
  text-align:left;appearance:none;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:12px;padding:12px 14px;font:inherit;width:100%;
}
.ms-top{display:flex;justify-content:space-between;font-family:var(--sans);font-size:14px;font-weight:800}
.ms-bar{height:6px;background:var(--line);border-radius:99px;margin:8px 0;overflow:hidden}
.ms-bar i{display:block;height:100%;background:var(--flame);border-radius:99px}
.ms-chunks{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:4px}
.pip{width:10px;height:10px;border-radius:50%;background:var(--line);display:inline-block}
.pip.m1{background:#6a4a2a}.pip.m2{background:#8a6a3a}.pip.m3{background:#b08a40}
.pip.m4{background:#d0a048}.pip.m5{background:var(--flame)}
.ms-sub{font-family:var(--sans);font-size:11px;color:var(--muted)}

.chunklist{display:flex;flex-direction:column;gap:10px}
.chunkrow{
  appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:12px;padding:12px;text-align:left;font:inherit;width:100%;
}
.cr-he{font-size:22px;line-height:1.5;margin-bottom:6px}
.cr-tr{font-size:16px;color:var(--flame);line-height:1.4;margin-bottom:4px}
.cr-en{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.4}
.cr-meta{font-family:var(--sans);font-size:11px;color:var(--flame);margin-top:8px;letter-spacing:1px}

.full h2{margin:18px 0 8px;font-size:18px;color:var(--flame)}
.full-line{padding:10px 0;border-bottom:1px solid var(--line)}
.about p{margin:0 0 10px;line-height:1.45}
.about a{color:var(--flame)}
.cardish{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.daily-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:8px}
.daily-card h2{font-size:24px;margin:6px 0 8px}
.streakline{margin:12px 0;font-family:var(--sans)}

.drill .hebig{font-size:28px;line-height:1.55;text-align:center;margin:8px 0 6px}
.enline{text-align:center;font-family:var(--sans);font-size:13px;color:var(--muted);margin-bottom:14px}
.modepill{
  display:inline-block;font-family:var(--sans);font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#1a100a;background:var(--flame);
  border-radius:999px;padding:5px 10px;margin-bottom:8px;
}
.trbig{font-size:22px;line-height:1.5;text-align:center;color:var(--flame);margin:10px 0 16px}
.note{font-family:var(--sans);font-size:12px;color:var(--muted);text-align:center;margin-bottom:12px}
.mode-switch{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px;justify-content:center}
.ms{
  appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);
  font-family:var(--sans);font-size:11px;font-weight:700;border-radius:999px;padding:7px 10px;
}
.ms.on{background:var(--card);color:var(--ink);border-color:var(--flame)}

.build{min-height:48px;text-align:center;font-size:18px;line-height:1.6;margin-bottom:14px;color:var(--muted)}
.build .ok{color:var(--ink)}.build .cur{color:var(--flame);border-bottom:2px solid var(--flame)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choices button{
  appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:15px;padding:14px 10px;border-radius:10px;
}
.choices button.no{border-color:var(--bad);color:var(--bad)}

.cloze{font-size:18px;line-height:2;text-align:center;margin-bottom:14px}
.cloze-inp{
  width:5.5em;border:0;border-bottom:2px solid var(--flame);background:transparent;
  color:var(--ink);font:inherit;font-size:18px;text-align:center;margin:0 2px;
}
.cloze-inp.ok{border-color:var(--good);color:var(--good)}
.cloze-inp.no{border-color:var(--bad)}

.order-build,.order-pool{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.opill{
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:14px;line-height:1.35;text-align:left;
}
.opill.btn{appearance:none;color:var(--ink);font:inherit;width:100%;cursor:pointer}
.ph{color:var(--muted);font-family:var(--sans);font-size:13px;padding:8px}

.recite{text-align:center}
.recite p{font-family:var(--sans);color:var(--muted);margin-bottom:14px;line-height:1.4}
.hidden-tr{margin:14px 0;font-size:20px;color:var(--flame);line-height:1.45}

.grades{margin-top:16px;text-align:center}
.gask{font-family:var(--sans);font-size:13px;color:var(--muted);margin-bottom:8px}
.grow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.grow button{
  appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-family:var(--sans);font-weight:800;font-size:12px;padding:12px 4px;border-radius:10px;
}
.grow button[data-g="0"]{color:var(--bad)}
.grow button[data-g="3"]{color:var(--good)}

#toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#1a100a;font-family:var(--sans);font-weight:800;font-size:13px;
  padding:10px 16px;border-radius:999px;opacity:0;transition:.25s;z-index:50;pointer-events:none;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}