:root{--paper:#e7e2d6;--raised:#f4f0e6;--line:#d8d1c0;--ink:#211e19;--soft:#5c5747;--faint:#8b8571;
  --aizome:#2c4a73;--aizome-tint:#e3e9f1;--seal:#b5402f;--seal-tint:#f6e3e0;--navy:#13233c;
  --good:#2f6b4f;--good-tint:#e2efe7;--tone-a:#2c4a73;--tone-b:#b5402f;}
@media (prefers-color-scheme:dark){:root{--paper:#17150f;--raised:#211e17;--line:#3a352a;--ink:#ece6d7;--soft:#b6ae98;
  --faint:#7d765f;--aizome:#8faed4;--aizome-tint:#1d2838;--seal-tint:#3a231f;--good:#7fc3a0;--good-tint:#1b2b22;
  --tone-a:#4f78ad;--tone-b:#c9614f;}}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--paper);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;}
[hidden]{display:none !important;}
.top{background:var(--raised);border-bottom:1px solid var(--line);}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:46rem;margin:0 auto;padding:.7rem 1.25rem;}
.brand{display:flex;align-items:center;gap:.6rem;color:inherit;text-decoration:none;font-weight:700;}
.seal{width:1.9rem;height:1.9rem;border-radius:4px;background:var(--seal);color:#f4ede8;display:flex;align-items:center;
  justify-content:center;font-family:"Shippori Mincho",serif;}
.top-links{display:flex;align-items:center;gap:.9rem;font-size:.88rem;}
.top-links a{color:var(--soft);text-decoration:none;}
.top-links a:hover{color:var(--aizome);}
.chip{font:inherit;font-size:.78rem;font-weight:700;color:#f4ede8;background:var(--seal);border:1px solid transparent;
  border-radius:999px;padding:.32rem .85rem;cursor:pointer;}
.chip.in{color:var(--aizome);background:transparent;border-color:var(--line);cursor:default;}
main{max-width:46rem;margin:0 auto;padding:1.4rem 1.25rem 4rem;}
h1{font-size:clamp(1.5rem,4vw,2.05rem);line-height:1.25;margin:.4rem 0 .3rem;text-wrap:balance;}
h2{font-size:1.15rem;margin:2rem 0 .5rem;}
p{color:var(--soft);}
a{color:var(--aizome);text-underline-offset:3px;}
.sub{font-size:1.15rem;color:var(--aizome);margin:0 0 1rem;}
.eyebrow{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;}
.hint{font-size:.9rem;color:var(--faint);margin:.2rem 0 .9rem;}
.setting{font-style:italic;margin:.2rem 0 .4rem;}
.progress{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin:.4rem 0 .6rem;}
.progress-bar{height:100%;background:var(--aizome);border-radius:999px;transition:width .3s ease;}
.step-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--faint);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:.8rem;}
.intro-box{background:var(--aizome-tint);border-left:3px solid var(--aizome);border-radius:0 10px 10px 0;padding:.9rem 1rem;margin:.6rem 0 1rem;}
.intro-box p{margin:0;color:var(--ink);}
.point-list{margin:.2rem 0 0;padding-left:1.3rem;color:var(--soft);}
.point-list li{margin:.25rem 0;}
.carry{background:var(--seal-tint);border-left:3px solid var(--seal);border-radius:0 10px 10px 0;padding:.75rem 1rem;
  margin:1.2rem 0 0;font-size:.92rem;color:var(--soft);}
.carry strong{color:var(--seal);}
.explain{font-size:1.02rem;color:var(--ink);}
.point-title{font-size:clamp(1.3rem,3.6vw,1.7rem);}
.note{border-left:3px solid var(--seal);background:var(--raised);border-radius:0 8px 8px 0;padding:.75rem .9rem;
  margin:1rem 0;font-size:.92rem;color:var(--soft);}
.note strong{color:var(--seal);}

/* conversation */
.dialogue,.scene{display:flex;flex-direction:column;gap:.7rem;margin:.8rem 0 1rem;}
.turn{display:flex;align-items:flex-end;gap:.55rem;max-width:92%;}
.turn.right{flex-direction:row-reverse;align-self:flex-end;}
.avatar{flex:0 0 auto;width:2.3rem;height:2.3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1rem;}
.avatar.tone-a{background:var(--tone-a);} .avatar.tone-b{background:var(--tone-b);}
.bubble{font:inherit;text-align:left;display:flex;flex-direction:column;gap:.1rem;background:var(--raised);
  border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:.6rem .85rem;color:var(--ink);cursor:pointer;position:relative;}
.turn.right .bubble{border-radius:14px 14px 4px 14px;background:var(--aizome-tint);}
.bubble.static{cursor:default;}
.bubble .who{font-size:.7rem;font-weight:700;color:var(--faint);letter-spacing:.04em;}
.bubble .jp{font-size:1.22rem;line-height:1.55;}
.bubble .ro{font-size:.8rem;color:var(--faint);font-style:italic;}
.bubble .en{font-size:.9rem;color:var(--soft);}
.bubble .pic{font-size:1.6rem;line-height:1;margin-bottom:.15rem;}
button.bubble:hover{border-color:var(--aizome);}

/* questions */
.q{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:1rem;margin:.9rem 0;}
.q.is-right{border-color:var(--good);} .q.is-wrong{border-color:var(--seal);}
.q-prompt{font-size:1.06rem;color:var(--ink);margin-bottom:.75rem;}
.q-opts{display:flex;flex-wrap:wrap;gap:.5rem;}
.q-opt,.q-piece{font:inherit;font-size:1.08rem;background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:.5rem .9rem;cursor:pointer;}
.q-opt:hover:not(:disabled),.q-piece:hover:not(:disabled){border-color:var(--aizome);}
.q-opt:disabled,.q-piece:disabled{cursor:default;opacity:.85;}
.q-opt.right{background:var(--good-tint);border-color:var(--good);color:var(--good);font-weight:700;opacity:1;}
.q-opt.wrong{background:var(--seal-tint);border-color:var(--seal);color:var(--seal);opacity:1;}
.q-tray{min-height:3rem;display:flex;flex-wrap:wrap;gap:.45rem;padding:.5rem;border:1px dashed var(--faint);border-radius:10px;margin-bottom:.6rem;}
.q-bank{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.7rem;min-height:2.6rem;}
.q-why{margin-top:.75rem;font-size:.93rem;color:var(--soft);}
.q-why .ok{color:var(--good);} .q-why .no{color:var(--seal);}
.jp-inline{font-size:1.05rem;color:var(--ink);}
.tag{display:inline-block;font-size:.74rem;font-weight:700;border-radius:999px;padding:.15rem .6rem;margin:.2rem 0 .2rem;}
.tag.again{background:var(--seal-tint);color:var(--seal);} .tag.carried{background:var(--aizome-tint);color:var(--aizome);}

/* words */
.words{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.55rem;margin:.6rem 0 1rem;}
.word{font:inherit;text-align:left;background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;
  cursor:pointer;display:flex;flex-direction:column;gap:.15rem;color:var(--ink);}
.word .jp{font-size:1.15rem;} .word .mean{font-size:.82rem;color:var(--soft);}
.word.hidden-mean .mean{visibility:hidden;}

/* buttons + nav */
.btn{font:inherit;font-weight:700;display:inline-block;text-decoration:none;background:var(--aizome);color:#fff;border:1px solid var(--aizome);
  border-radius:999px;padding:.6rem 1.25rem;cursor:pointer;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn.ghost{background:transparent;color:var(--aizome);border-color:var(--line);}
.btn.small{font-size:.85rem;padding:.4rem .9rem;}
@media (prefers-color-scheme:dark){.btn{color:#10151d;}}
.step-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);}
.save-note{font-size:.78rem;color:var(--faint);text-align:center;margin:1rem 0 0;}

/* result */
.result{text-align:center;border-radius:14px;padding:1.6rem 1rem;margin:.6rem 0 1rem;border:1px solid var(--line);background:var(--raised);}
.result.pass{border-color:var(--good);background:var(--good-tint);}
.result .score{font-size:3rem;font-weight:700;line-height:1;color:var(--ink);}
.result.pass .score{color:var(--good);} .result.fail .score{color:var(--seal);}
.weak-list{list-style:none;padding:0;margin:.4rem 0 1rem;}
.weak-list li{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.6rem .1rem;border-bottom:1px solid var(--line);color:var(--ink);}
.weak-list em{color:var(--faint);font-style:normal;font-size:.85rem;}

/* locked + modal */
.locked{background:var(--raised);border:1px solid var(--line);border-radius:14px;padding:1.3rem;margin-top:1.4rem;}
.locked h2{margin-top:0;} .locked-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem;}
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:rgba(20,18,14,.55);}
.modal-card{position:relative;max-width:24rem;width:100%;background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:1.5rem 1.3rem;}
.modal-card h2{margin:0 0 .4rem;} .modal-close{position:absolute;top:.4rem;right:.6rem;font:inherit;font-size:1.3rem;background:none;border:0;color:var(--soft);cursor:pointer;}
#gsi-host{display:flex;justify-content:center;min-height:2.6rem;margin-top:.6rem;} .modal-msg{font-size:.85rem;min-height:1.2rem;}

/* course index */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.9rem;margin:1.2rem 0;}
.card{display:block;background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:1rem;text-decoration:none;color:inherit;}
.card:hover{border-color:var(--aizome);}
.card .n{font-size:.76rem;color:var(--faint);font-weight:700;display:flex;justify-content:space-between;}
.card h3{margin:.2rem 0 .3rem;font-size:1.05rem;color:var(--aizome);}
.card p{margin:0;font-size:.87rem;}
.badge{font-size:.7rem;font-weight:700;border-radius:999px;padding:.05rem .5rem;}
.badge.free{background:var(--good-tint);color:var(--good);} .badge.done{background:var(--good);color:#fff;}
.badge.full{background:var(--aizome-tint);color:var(--aizome);}
footer{background:var(--navy);color:#b9c6da;font-size:.8rem;margin-top:3rem;}
footer div{max-width:46rem;margin:0 auto;padding:1.5rem 1.25rem;}
footer a{color:#f6f2e8;margin-right:1.1rem;}
@media (max-width:520px){ .bubble .jp{font-size:1.1rem;} .turn{max-width:100%;} .step-nav{flex-wrap:wrap;} }
/* ---------- v3: sections, escalating checks, words ---------- */
.stepper{list-style:none;display:flex;gap:.3rem;padding:0;margin:.2rem 0 .35rem;}
.stepper li{flex:1;display:flex;justify-content:center;position:relative;}
.stepper li:before{content:"";position:absolute;top:50%;left:-50%;width:100%;height:3px;background:var(--line);transform:translateY(-50%);z-index:0;}
.stepper li:first-child:before{display:none;}
/* The connectors are the completion bar: green as far as the learner has got. */
.stepper li.lit:before{background:var(--good);}
.stepper .dot{font:inherit;position:relative;z-index:1;min-width:1.7rem;height:1.7rem;padding:0 .35rem;border-radius:999px;display:flex;align-items:center;
  justify-content:center;font-size:.68rem;font-weight:700;background:var(--raised);border:2px solid var(--line);color:var(--faint);white-space:nowrap;
  cursor:pointer;transition:transform .12s, box-shadow .12s;}
.stepper .dot:disabled{cursor:default;}
.stepper .dot:not(:disabled):hover{transform:scale(1.15);box-shadow:0 0 0 3px var(--aizome-tint);}
.stepper .dot:focus-visible{outline:2px solid var(--aizome);outline-offset:2px;}
.stepper li.done .dot{background:var(--good);border-color:var(--good);color:#fff;}
.stepper li.now .dot{border-color:var(--aizome);color:var(--aizome);background:var(--aizome-tint);transform:scale(1.12);}
/* the furthest section reached, when you are looking at an earlier one */
.stepper li.far .dot{border-color:var(--good);color:var(--good);background:var(--good-tint);box-shadow:0 0 0 3px var(--good-tint);}
.stepper.locked .dot{opacity:.75;}
.jump-hint{margin-top:1.2rem;}
.stepper-label{display:flex;justify-content:space-between;font-size:.76rem;color:var(--faint);font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;margin-bottom:1rem;}
/* On a phone the labels go but the dots stay big enough to tap. */
@media (max-width:560px){ .stepper{gap:.15rem;} .stepper .dot{min-width:1.6rem;height:1.6rem;font-size:0;padding:0;}
  .stepper li.done .dot{font-size:.7rem;} }

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:1rem 0 .4rem;}
.facts div{background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:.55rem .4rem;text-align:center;font-size:.78rem;color:var(--soft);}
.facts b{display:block;font-size:1.35rem;color:var(--aizome);line-height:1.2;}
@media (max-width:520px){ .facts{grid-template-columns:repeat(2,1fr);} }
.outcomes{display:flex;flex-direction:column;gap:.45rem;}
.outcome{background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--aizome);border-radius:0 10px 10px 0;padding:.5rem .8rem;display:flex;flex-direction:column;}
.outcome .jp{font-size:1.15rem;color:var(--ink);line-height:2;} .outcome .en{font-size:.86rem;color:var(--faint);}
.map{list-style:none;padding:0;margin:.3rem 0 0;counter-reset:m;}
.map li{counter-increment:m;position:relative;padding:.55rem 0 .55rem 2.4rem;border-bottom:1px solid var(--line);display:flex;flex-direction:column;}
.map li:before{content:counter(m);position:absolute;left:0;top:.6rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--aizome-tint);
  color:var(--aizome);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;}
.map b{color:var(--ink);} .map span{font-size:.88rem;color:var(--soft);}
.kanji-row{display:flex;flex-wrap:wrap;gap:.5rem;}
.kchip{background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem .3rem;font-size:1.5rem;line-height:1.9;}
.resume{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;background:var(--good-tint);
  border:1px solid var(--good);border-radius:10px;padding:.7rem .9rem;margin-top:1.2rem;font-size:.92rem;color:var(--ink);}
.ready{background:var(--raised);border:1px dashed var(--faint);border-radius:10px;padding:.8rem 1rem;margin-top:1.4rem;font-size:.92rem;color:var(--soft);}

.check-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:.4rem;}
.q-count{font-size:1.35rem;margin:.1rem 0;}
.ladder{display:flex;align-items:flex-end;gap:3px;height:34px;}
.ladder span{width:9px;border-radius:2px;background:var(--line);}
.ladder span.past{background:var(--good);} .ladder span.now{background:var(--aizome);}
.test-bar{flex:0 0 7rem;height:6px;background:var(--line);border-radius:999px;overflow:hidden;align-self:center;}
.test-bar div{height:100%;background:var(--aizome);}
.q-prompt{line-height:2.1;}
.q-type{display:flex;flex-direction:column;gap:.5rem;}
.q-input{font:inherit;font-size:1.2rem;padding:.7rem .8rem;border:2px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);width:100%;}
.q-input:focus{outline:none;border-color:var(--aizome);}
.q-preview{min-height:2rem;font-size:1.35rem;color:var(--aizome);letter-spacing:.02em;}
.q-type-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;}
.q-type-hint{font-size:.8rem;color:var(--faint);}
.q-opt,.q-piece{line-height:1.9;}

.section-done{text-align:center;background:var(--good-tint);border:1px solid var(--good);border-radius:16px;padding:1.5rem 1rem 1.2rem;margin:.2rem 0 1.2rem;}
.big-tick{width:3.4rem;height:3.4rem;border-radius:50%;background:var(--good);color:#fff;font-size:1.9rem;font-weight:700;display:flex;
  align-items:center;justify-content:center;margin:0 auto .6rem;animation:pop .45s cubic-bezier(.2,1.6,.4,1);}
@keyframes pop{0%{transform:scale(.2);opacity:0;}100%{transform:scale(1);opacity:1;}}
@media (prefers-reduced-motion:reduce){ .big-tick{animation:none;} }
.section-done h1{font-size:1.3rem;margin:.2rem 0;} .sd-score{margin:.2rem 0 0;color:var(--good);font-weight:700;}
.sofar{list-style:none;padding:0;margin:.4rem 0 1rem;}
.sofar li{display:grid;grid-template-columns:1.6rem 1fr auto;align-items:center;gap:.4rem;padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.95rem;}
.sofar .mark{font-weight:700;color:var(--good);} .sofar li.next .mark{color:var(--aizome);}
.sofar li.todo{color:var(--faint);} .sofar li.next{font-weight:700;color:var(--ink);}
.sofar .sc{font-size:.82rem;color:var(--faint);font-weight:400;}

/* words with readings */
ruby{ruby-position:over;} rt{font-size:.5em;color:var(--faint);font-weight:400;letter-spacing:0;}
body.no-furi rt{display:none;}
.bubble .jp{line-height:2.2;}
.w{cursor:pointer;border-radius:3px;} .w.k{border-bottom:1px dotted var(--faint);}
.w:hover{background:var(--aizome-tint);} .w.saved{background:#f8e9a8;box-shadow:0 0 0 2px #f8e9a8;}
@media (prefers-color-scheme:dark){ .w.saved{background:#5a4a12;box-shadow:0 0 0 2px #5a4a12;} }
#wtip{position:absolute;z-index:70;max-width:16rem;background:var(--navy);color:#f6f2e8;border-radius:10px;padding:.5rem .7rem;
  display:flex;flex-direction:column;gap:.1rem;box-shadow:0 8px 24px rgba(0,0,0,.3);pointer-events:none;}
#wtip .t-r{font-size:1.05rem;} #wtip .t-m{font-size:.85rem;color:#c3cfe0;} #wtip .t-hint{font-size:.7rem;color:#8fa3bf;margin-top:.15rem;}
#wtip .t-save{pointer-events:auto;font:inherit;font-size:.85rem;font-weight:700;margin-top:.35rem;border:0;border-radius:999px;padding:.35rem .7rem;
  background:#f8e9a8;color:#3a2f05;cursor:pointer;}
.furi{font:inherit;font-size:.74rem;font-weight:700;background:transparent;border:1px solid var(--line);border-radius:999px;padding:.28rem .6rem;
  color:var(--aizome);cursor:pointer;white-space:nowrap;} .furi.off{color:var(--faint);}
.en-toggle{font:inherit;font-size:.72rem;color:var(--aizome);background:none;border:0;padding:.15rem 0 0;cursor:pointer;align-self:flex-start;text-decoration:underline;}
.bubble{cursor:default;}
.word{position:relative;padding-right:2rem;cursor:pointer;}
.word .jp{line-height:1.9;}
.star{position:absolute;top:.3rem;right:.35rem;font:inherit;font-size:1.15rem;line-height:1;background:none;border:0;color:var(--faint);cursor:pointer;padding:.15rem;}
.star.on{color:#d9a400;}
table.bank{border-collapse:collapse;width:100%;margin-top:1.2rem;font-size:.95rem;}
table.bank th,table.bank td{border-bottom:1px solid var(--line);padding:.5rem .4rem;text-align:left;vertical-align:middle;}
table.bank td.jp{font-size:1.2rem;} .miss{color:var(--seal);font-style:normal;font-size:.78rem;font-weight:700;}
.fc{background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1rem;text-align:center;margin-top:1rem;}
.fc-meta{font-size:.78rem;color:var(--faint);font-weight:700;} .fc-front{font-size:3.2rem;line-height:1.3;margin:.6rem 0;}
.fc-r{font-size:1.3rem;color:var(--aizome);} .fc-m{color:var(--soft);margin-bottom:.4rem;}
.fc-actions{display:flex;justify-content:center;gap:.6rem;margin-top:1rem;}
@media (max-width:520px){ .top-links a.hide-s{display:none;} }

/* ---------- hints: the lesson note, at half credit ---------- */
.hint-row{margin:.2rem 0 .6rem;}
.hint-btn{font:inherit;font-size:.86rem;font-weight:700;background:transparent;border:1px dashed var(--faint);border-radius:999px;
  padding:.4rem .9rem;color:var(--soft);cursor:pointer;}
.hint-btn span{font-weight:400;font-size:.76rem;color:var(--faint);margin-left:.35rem;}
.hint-btn:hover:not(:disabled){border-color:var(--aizome);color:var(--aizome);}
.hint-btn:disabled{cursor:default;border-style:solid;border-color:#d9a400;color:#8a6a00;background:#fbf3d0;}
.hint-btn:disabled span{color:#8a6a00;}
.hint-panel{background:#fbf3d0;border:1px solid #e5cf7a;border-radius:12px;padding:.9rem 1rem;margin:0 0 1rem;}
.hint-panel p{margin:.3rem 0 .6rem;color:var(--ink);font-size:.95rem;}
.hint-examples{display:flex;flex-direction:column;gap:.35rem;}
.hint-examples div{display:flex;flex-direction:column;background:rgba(255,255,255,.55);border-radius:8px;padding:.35rem .6rem;}
.hint-examples .jp{font-size:1.1rem;line-height:2;color:var(--ink);} .hint-examples .en{font-size:.82rem;color:var(--soft);}
.hint-note{font-size:.88rem !important;color:var(--soft) !important;margin-bottom:0 !important;}
.q.is-half{border-color:#d9a400;}
.q-why .half{color:#8a6a00;}
.tag.hinted{background:#fbf3d0;color:#8a6a00;}
@media (prefers-color-scheme:dark){
  .hint-btn:disabled{background:#3d3410;color:#e8c95a;border-color:#8a6a00;} .hint-btn:disabled span{color:#e8c95a;}
  .hint-panel{background:#2e280f;border-color:#6b5a1a;} .hint-examples div{background:rgba(0,0,0,.25);}
  .q-why .half{color:#e8c95a;} .tag.hinted{background:#3d3410;color:#e8c95a;}
}