:root{
  --navy:#10243d; --navy-2:#1e3a5f; --teal:#0e7c66; --teal-lt:#e6f4f0;
  --ink:#1a2530; --ink-2:#44586d; --mute:#6b7d90; --line:#e3e9ef; --line-2:#eff3f7;
  --bg:#fffdfa; --bg-2:#f8f6f2; --bg-3:#f1f0ec; --card:#ffffff;
  --amber:#b45309; --red:#dc2626; --purple:#7c3aed; --green:#16a34a; --blue:#2563eb;
  --radius:14px; --shadow:0 1px 2px rgba(16,36,61,.05),0 8px 24px rgba(16,36,61,.05);

  /* Reading measure: ~68 characters per line at the body size below. */
  --maxw:740px;
  /* Georgia is on every Mac, Windows and iPad, and was drawn for screen
     reading — it carries long study text far better than a UI sans. */
  --font-read:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  --font-cn:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --navy:#e8f1f8; --navy-2:#cfe4f5; --ink:#e4ebf3; --ink-2:#b3c4d6; --mute:#8ba0b8;
    --line:#25384f; --line-2:#1c2b3d; --bg:#101820; --bg-2:#17222d; --bg-3:#1b2733;
    --card:#17222d; --teal-lt:#10302a;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
/* Interface chrome is sans; the actual teaching prose is serif (rule below). */
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui);
  font-size:19px; line-height:1.8; -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
p.en, .objectives li, .recap li, .terms .d, .model p, .fb .en-a,
.q .qt, .opt span:last-child, .gterm .d, .step .d, .src .s, figcaption{
  font-family:var(--font-read);
}
img,svg{max-width:100%}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:#cdeee4; color:#0a3d33}

/* ---------------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
@media (prefers-color-scheme: dark){ .topbar{background:rgba(13,22,32,.92)} }
.topbar-in{max-width:1120px; margin:0 auto; padding:0 18px; display:flex; align-items:center; gap:14px; height:58px; font-family:var(--font-ui)}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; color:var(--navy); font-size:15px; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(140deg,var(--navy-2),var(--teal));display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
@media (prefers-color-scheme: dark){ .brand .dot{color:#0d1620} }
.nav{display:flex; gap:2px; margin-left:auto; align-items:center; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  padding:7px 11px; border-radius:9px; color:var(--ink-2); font-size:14px; font-weight:600; white-space:nowrap;
}
.nav a:hover{background:var(--bg-3); text-decoration:none}
.nav a.on{background:var(--navy); color:#fff}
@media (prefers-color-scheme: dark){ .nav a.on{background:var(--teal); color:#06121a} }
#zhBtn{
  border:1.5px solid var(--line); background:var(--card); color:var(--mute); cursor:pointer;
  padding:6px 11px; border-radius:9px; font-size:13px; font-weight:700; white-space:nowrap;
  font-family:var(--font-cn); opacity:.75;
}
#zhBtn:hover{border-color:var(--teal); color:var(--teal); opacity:1}
#zhBtn.on{background:var(--teal); border-color:var(--teal); color:#fff; opacity:1}
@media (max-width:720px){ .brand span.long{display:none} .topbar-in{gap:8px; padding:0 12px} }

/* ---------------------------------------------------------------- layout */
main{max-width:var(--maxw); margin:0 auto; padding:40px 22px 100px}
.wide{max-width:1000px}
h1,h2,h3,h4{font-family:var(--font-ui); line-height:1.25; color:var(--navy); letter-spacing:-.015em}
h1{font-size:37px; font-weight:800; margin:0 0 8px}
h2{font-size:27px; font-weight:750; margin:56px 0 6px; scroll-margin-top:80px}
h3{font-size:21px; font-weight:700; margin:34px 0 10px}
.zh-h{font-family:var(--font-cn); color:var(--teal); font-size:16px; font-weight:500; margin:0 0 22px}
p{margin:0 0 1.15em}
p.en{color:var(--ink)}
p.zh{
  font-family:var(--font-cn); color:var(--ink-2); font-size:16px; line-height:1.9;
  border-left:3px solid var(--teal); padding:3px 0 3px 16px; margin:1.4em 0 1.6em;
  background:linear-gradient(90deg,var(--teal-lt),transparent 72%);
  border-radius:0 8px 8px 0;
}
/* The Chinese layer is a parent-only reading aid — off unless switched on. */
body.hide-zh .zh, body.hide-zh .zh-h, body.hide-zh .zh-inline{display:none !important}

/* ---------------------------------------------------------------- hero */
.hero{
  background:linear-gradient(145deg,#10243d 0%,#1e3a5f 48%,#0e7c66 128%);
  color:#fff; border-radius:20px; padding:46px 38px 42px; margin-bottom:34px; position:relative; overflow:hidden;
}
.hero h1{color:#fff; font-size:40px; margin-bottom:10px}
.hero .sub{color:#bfe3f7; font-size:17px; max-width:600px; margin:0}
.hero .eyebrow{color:#7fd8c2; font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; margin-bottom:14px}
.hero-svg{position:absolute; right:-10px; top:-20px; opacity:.26; pointer-events:none}
@media (max-width:640px){ .hero{padding:32px 22px} .hero h1{font-size:29px} .hero-svg{display:none} }

/* ---------------------------------------------------------------- day cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:24px 0 8px}
.card{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 20px 18px; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; position:relative;
}
.card:hover{transform:translateY(-2px); box-shadow:0 4px 8px rgba(16,36,61,.08),0 16px 36px rgba(16,36,61,.10); text-decoration:none}
.card .n{width:34px;height:34px;border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;margin-bottom:13px}
.card .t{font-weight:750; color:var(--navy); font-size:17px; line-height:1.35}
.card .z{color:var(--mute); font-size:14px; margin-top:4px}
.card .m{color:var(--mute); font-size:12.5px; margin-top:11px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.card .done{color:var(--green); font-weight:700}

/* ---------------------------------------------------------------- day hero */
.dayhero{border-radius:var(--radius); padding:26px 26px 24px; color:#fff; margin-bottom:26px}
.dayhero .k{font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; opacity:.88}
.dayhero h1{color:#fff; font-size:31px; margin:9px 0 5px}
.dayhero .z{font-size:17px; opacity:.93; margin:0}
.dayhero .m{margin-top:14px; font-size:13px; opacity:.85}

.bigidea{background:var(--teal-lt); border-left:4px solid var(--teal); border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px; margin:0 0 24px}
.bigidea .k{font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin-bottom:7px}
.bigidea .e{font-weight:700; font-size:18px; color:var(--navy); margin:0}
.bigidea .z{color:var(--ink-2); margin:8px 0 0; font-size:15.5px}

.objectives{border:1.5px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin:0 0 26px; background:var(--bg-2)}
.objectives .k{font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:12px}
.objectives ol{margin:0; padding-left:20px}
.objectives li{margin-bottom:11px}
.objectives li:last-child{margin-bottom:0}
.objectives .z{color:var(--mute); font-size:14.5px}

.toc{border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin:0 0 30px; background:var(--card)}
.toc .k{font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:9px}
.toc ol{margin:0; padding-left:19px}
.toc li{margin:5px 0; font-size:15px}

/* ---------------------------------------------------------------- terms + callouts */
.terms{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin:22px 0}
.terms .k{font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:12px}
.terms .row{padding:9px 0; border-top:1px solid var(--line-2)}
.terms .row:first-of-type{border-top:none; padding-top:0}
.terms .hd b{color:var(--navy); font-size:16px}
.terms .hd .cn{color:var(--teal); font-weight:700; margin-left:8px}
.terms .d{font-size:15px; color:var(--ink-2); margin-top:3px}
.terms .dz{font-size:14px; color:var(--mute); margin-top:2px}

.callout{border-radius:var(--radius); padding:17px 21px; margin:22px 0; border-left:4px solid}
.callout .h{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px}
.callout .tag{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:3px 8px; border-radius:6px}
.callout .ti{font-weight:750; color:var(--navy); font-size:16px}
.callout .tz{color:var(--mute); font-size:14px; font-weight:500}
.callout p{margin-bottom:9px; font-size:15.5px}
.callout p:last-child{margin-bottom:0}
.callout p.zh{background:none; border-left-color:rgba(125,125,125,.3)}
.c-tip{background:var(--teal-lt); border-left-color:var(--teal)} .c-tip .tag{background:var(--teal)}
.c-miss{background:#fdecec; border-left-color:var(--red)} .c-miss .tag{background:var(--red)}
.c-ex{background:#e9f8ee; border-left-color:var(--green)} .c-ex .tag{background:var(--green)}
.c-ext{background:#f3edfd; border-left-color:var(--purple)} .c-ext .tag{background:var(--purple)}
.c-exam{background:#fdf4e5; border-left-color:var(--amber)} .c-exam .tag{background:var(--amber)}
@media (prefers-color-scheme: dark){
  .c-miss{background:#2a1414} .c-ext{background:#1e1630} .c-exam{background:#2a2010} .c-ex{background:#0f2b1a}
}

/* ---------------------------------------------------------------- figures */
figure{margin:26px 0; padding:20px 18px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); text-align:center; overflow-x:auto}
@media (prefers-color-scheme: dark){ figure{background:#f8fafc} }
figcaption{margin-top:12px; font-size:13.5px; color:var(--mute); line-height:1.6}
figcaption b{color:var(--navy); display:block; margin-bottom:2px}
@media (prefers-color-scheme: dark){ figcaption{color:#5b6b7d} figcaption b{color:#10243d} }

/* ---------------------------------------------------------------- recap */
.recap{background:var(--navy-2); color:#e8f1f8; border-radius:var(--radius); padding:24px 26px; margin:38px 0 0}
@media (prefers-color-scheme: dark){ .recap{background:#182b3f} }
.recap .k{font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#7fd8c2; margin-bottom:14px}
.recap ul{margin:0; padding-left:20px}
.recap li{margin-bottom:11px}
.recap li:last-child{margin-bottom:0}
.recap .z{color:#a9c4dc; font-size:14.5px}

/* ---------------------------------------------------------------- quiz */
.quiz{margin-top:44px; border-top:3px solid var(--navy); padding-top:26px}
.q{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:16px; box-shadow:var(--shadow)}
.q .qh{display:flex; gap:11px; align-items:flex-start}
.q .qn{flex:0 0 auto; width:27px;height:27px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
@media (prefers-color-scheme: dark){ .q .qn{background:var(--teal); color:#06121a} }
.q .qt{font-weight:700; font-size:16.5px; color:var(--navy)}
.q .qz{color:var(--mute); font-size:14.5px; margin:5px 0 0 38px}
.opts{list-style:none; margin:14px 0 0 38px; padding:0}
.opts li{margin-bottom:8px}
.opt{
  display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; cursor:pointer;
  background:var(--bg-2); border:1.5px solid var(--line); border-radius:11px; padding:11px 14px;
  font-size:15.5px; color:var(--ink); font-family:inherit; line-height:1.55; transition:.12s;
}
.opt:hover:not(:disabled){border-color:var(--teal); background:var(--teal-lt)}
.opt .ol{font-weight:800; color:var(--teal); flex:0 0 auto}
.opt:disabled{cursor:default}
.opt.right{background:#e8f8ee; border-color:var(--green); color:#14532d}
.opt.right .ol{color:var(--green)}
.opt.wrong{background:#fdecec; border-color:var(--red); color:#7f1d1d}
.opt.wrong .ol{color:var(--red)}
@media (prefers-color-scheme: dark){ .opt.right{background:#0f2b1a;color:#a7f3c4} .opt.wrong{background:#2c1414;color:#fca5a5} }
.fb{display:none; margin:13px 0 0 38px; padding:13px 16px; border-radius:11px; font-size:15px; background:var(--bg-3); border-left:3px solid var(--teal)}
.fb.show{display:block}
.fb .v{font-weight:800; margin-bottom:4px}
.fb .v.ok{color:var(--green)} .fb .v.no{color:var(--red)}
.fb .z{color:var(--ink-2); font-size:14.5px}
.sa{margin:14px 0 0 38px}
.sa textarea{
  width:100%; min-height:92px; border:1.5px solid var(--line); border-radius:11px; padding:12px 14px;
  font-family:inherit; font-size:15.5px; color:var(--ink); background:var(--bg-2); resize:vertical; line-height:1.6;
}
.sa textarea:focus{outline:none; border-color:var(--teal)}
.btn{
  display:inline-block; background:var(--navy); color:#fff; border:none; border-radius:10px;
  padding:10px 18px; font-size:14.5px; font-weight:700; cursor:pointer; font-family:inherit; margin-top:11px;
}
.btn:hover{background:var(--teal)}
.btn.ghost{background:transparent; color:var(--teal); border:1.5px solid var(--teal)}
.btn.ghost:hover{background:var(--teal); color:#fff}
@media (prefers-color-scheme: dark){ .btn{background:var(--teal); color:#06121a} .btn:hover{background:#12a184} }
.model{display:none; margin-top:13px; padding:15px 18px; background:var(--teal-lt); border-left:3px solid var(--teal); border-radius:0 11px 11px 0; font-size:15px}
.model.show{display:block}
.model .k{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin-bottom:7px}
.model ul{margin:9px 0 0; padding-left:19px; color:var(--ink-2); font-size:14.5px}
.marks{margin-left:auto; font-size:13px; font-weight:800; color:var(--amber); flex:0 0 auto}

.scorebar{
  position:sticky; bottom:0; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 20px; margin-top:24px; box-shadow:0 -4px 20px rgba(16,36,61,.10);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.scorebar .s{font-size:16px; font-weight:800; color:var(--navy)}
.scorebar .z{font-size:13.5px; color:var(--mute)}
.scorebar .rt{margin-left:auto}
.bar{height:8px; background:var(--bg-3); border-radius:99px; overflow:hidden; flex:1 1 130px; min-width:110px}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--green)); width:0; transition:width .35s}

/* ---------------------------------------------------------------- sources */
.srcs{margin-top:44px; border-top:1px solid var(--line); padding-top:22px}
.srcs .k{font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:6px}
.srcs .note{font-size:14px; color:var(--mute); margin-bottom:16px}
.src{display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--line-2); font-size:15px}
.src:first-of-type{border-top:none}
.src .i{flex:0 0 auto; width:24px;height:24px;border-radius:7px;background:var(--bg-3);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.src .t{font-weight:700; color:var(--navy)}
.src .p{font-size:13.5px; color:var(--mute); margin-top:2px}
.src .p .kind{display:inline-block; background:var(--bg-3); color:var(--ink-2); border-radius:5px; padding:1px 7px; font-size:11.5px; font-weight:700; margin-right:7px; text-transform:uppercase; letter-spacing:.06em}
.src .p .applies{display:inline-block; background:var(--teal-lt); color:var(--teal); border-radius:5px; padding:1px 7px; font-size:11.5px; font-weight:700; margin-left:7px}
.src .s{font-size:14px; color:var(--ink-2); margin-top:5px}
.cites{display:inline-flex; gap:3px; margin-left:7px; vertical-align:7px}
.cite{
  display:inline-block; font-size:11px; font-weight:800; line-height:1.5; color:var(--teal); background:var(--teal-lt);
  border:1px solid rgba(14,124,102,.28); border-radius:5px; padding:0 5px; text-decoration:none;
}
.cite:hover{background:var(--teal); color:#fff; text-decoration:none}
.src:target{background:var(--teal-lt); border-radius:9px; box-shadow:0 0 0 8px var(--teal-lt)}

/* ---------------------------------------------------------------- glossary */
.search{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; font-size:16px; font-family:inherit; background:var(--bg-2); color:var(--ink); margin-bottom:20px}
.search:focus{outline:none; border-color:var(--teal)}
.gterm{border:1px solid var(--line); border-radius:12px; padding:15px 18px; margin-bottom:11px; background:var(--card)}
.gterm .h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.gterm .e{font-weight:800; color:var(--navy); font-size:17px}
.gterm .ipa{font-size:13px; color:var(--mute); font-style:italic}
.gterm .c{color:var(--teal); font-weight:700; font-size:16px}
.gterm .dayt{margin-left:auto; font-size:11.5px; font-weight:700; color:#fff; border-radius:6px; padding:2px 8px}
.gterm .d{font-size:15px; color:var(--ink-2); margin-top:7px}
.gterm .dz{font-size:14.5px; color:var(--mute); margin-top:3px}

/* ---------------------------------------------------------------- flashcards */
.fc{border:1.5px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:0 0 26px; background:var(--bg-2)}
.fc .k{font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:6px}
.fc .lead{color:var(--ink-2); font-size:15px; margin-bottom:14px}
.fc-stage{display:none}
.fc.on .fc-stage{display:block}
.fc.on .fc-intro{display:none}
.fc-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:30px 24px;
  text-align:center; cursor:pointer; min-height:172px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; user-select:none;
}
.fc-card:hover{border-color:var(--teal)}
.fc-card .term{font-family:var(--font-ui); font-size:30px; font-weight:800; color:var(--navy); line-height:1.25}
.fc-card .ipa{font-size:14.5px; color:var(--mute); font-style:italic}
.fc-card .hint{font-size:13.5px; color:var(--mute)}
.fc-back{display:none}
.fc-card.flipped .fc-back{display:block}
.fc-card.flipped .hint{display:none}
.fc-back .df{font-family:var(--font-read); font-size:17.5px; color:var(--ink); line-height:1.6; max-width:540px; margin:0 auto}
.fc-back .cn{font-family:var(--font-cn); font-size:19px; font-weight:700; color:var(--teal); margin-top:12px}
.fc-back .dfz{font-family:var(--font-cn); font-size:14.5px; color:var(--mute); max-width:540px; margin:5px auto 0}
.fc-acts{display:flex; gap:10px; margin-top:14px; justify-content:center; flex-wrap:wrap}
.fc-acts .btn{margin-top:0}
.fc-meta{display:flex; align-items:center; gap:12px; margin-top:14px; font-size:13.5px; color:var(--mute); flex-wrap:wrap}
.fc-done{display:none; text-align:center; padding:26px 10px}
.fc-done .big{font-size:22px; font-weight:800; color:var(--navy); margin-bottom:8px}

.lead-en{font-family:var(--font-read); color:var(--ink-2); font-size:18px; margin:0 0 22px}
.hint-en{font-family:var(--font-ui); font-size:14.5px; font-weight:500; color:var(--mute); margin-left:9px}

.match{width:100%; border-collapse:collapse; margin-top:6px}
.match tr td{padding:14px 8px; border-bottom:1px solid var(--line-2); vertical-align:top}
.match td.n{width:32px; color:var(--mute); font-weight:700; font-size:14px; padding-top:17px}
.match td.dfn{font-family:var(--font-read); font-size:17px; color:var(--ink); line-height:1.65}
.match td.ans{width:210px}
.match input{
  border:none; border-bottom:1.5px solid var(--line); background:transparent;
  font-family:var(--font-ui); font-size:16px; font-weight:600; padding:6px 4px; width:100%; color:var(--ink);
}
.match input:focus{outline:none; border-bottom-color:var(--teal)}
.match .rv{color:var(--teal); font-weight:700; display:none; font-size:15px; margin-top:6px}
.match.revealed .rv{display:block}
@media (max-width:620px){ .match td.ans{width:150px} .match td.dfn{font-size:16px} }

/* ---------------------------------------------------------------- misc */
.pager{display:flex; gap:12px; margin-top:44px; padding-top:24px; border-top:1px solid var(--line)}
.pager a{flex:1; border:1px solid var(--line); border-radius:12px; padding:15px 18px; background:var(--card)}
.pager a:hover{border-color:var(--teal); text-decoration:none}
.pager .k{font-size:12px; color:var(--mute); font-weight:700}
.pager .t{font-weight:700; color:var(--navy); margin-top:3px; font-size:15px}
.pager .next{text-align:right}
.note{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin:24px 0; font-size:15px; color:var(--ink-2)}
.steps{counter-reset:s; margin:24px 0}
.step{display:flex; gap:15px; margin-bottom:19px}
.step .k{flex:0 0 auto; width:32px;height:32px;border-radius:10px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.step .t{font-weight:750; color:var(--navy); font-size:17px; margin-bottom:3px}
.step .d{color:var(--ink-2); font-size:15.5px}
.legend{border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-top:26px; background:var(--bg-2)}
.legend .r{display:flex; gap:11px; align-items:flex-start; margin-bottom:12px; font-size:15px}
.legend .r:last-child{margin-bottom:0}
footer{border-top:1px solid var(--line); padding:34px 18px 56px; text-align:center}
footer a{color:var(--mute); text-decoration:underline}
footer .sig{
  font-family:var(--font-read); font-size:16px; color:var(--ink-2); margin:0 0 6px; letter-spacing:.01em;
}
footer .sig .by{color:var(--teal); font-style:italic}
footer .foot-sub{color:var(--mute); font-size:13.5px; margin:0; line-height:1.6}
.ded{
  font-family:var(--font-read); font-style:italic; font-size:15px;
  color:#8fd3bf; margin:26px 0 0; opacity:.9;
}
.dl{display:inline-flex; align-items:center; gap:9px; background:var(--navy); color:#fff; border-radius:12px; padding:13px 22px; font-weight:700; font-size:15.5px; margin-top:8px}
.dl:hover{background:var(--teal); text-decoration:none}
@media (prefers-color-scheme: dark){ .dl{background:var(--teal); color:#06121a} }