/* Learn lessons on the website (pairs with lessons-web.js) */
.lw-wrap{max-width:1180px;margin:0 auto;padding:1.5rem 1.5rem 4rem}
.lw-head{margin-bottom:1.5rem}
.lw-head .page-desc{max-width:680px}
#lw{display:grid;grid-template-columns:290px minmax(0,1fr);gap:2rem;align-items:start;color:var(--ink)}
.lw-side{position:sticky;top:92px;max-height:calc(100vh - 110px);overflow-y:auto;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px}
.lw-lessons{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.lw-lessons a{display:block;padding:.55rem .75rem;border-radius:10px;font-weight:600;color:var(--ink);text-decoration:none;font-size:.95rem}
.lw-lessons a:hover{background:var(--paper-warm)}
.lw-lessons a.on{background:var(--ink);color:#fff}
.lw-find input{width:100%;font:500 .95rem 'Outfit',sans-serif;border:2px solid var(--ink);border-radius:10px;padding:.55rem .75rem;background:#fff;color:var(--ink)}
#lwres h6{margin:10px 2px 4px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light)}
.lw-hit{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e6dfd2;border-radius:10px;padding:7px 9px;margin-bottom:5px;font:inherit;color:var(--ink);cursor:pointer}
.lw-hit:hover{border-color:var(--ink)}
.lw-hit b{font-size:.84rem;display:block}.lw-hit small{display:block;font-size:.76rem;color:#55555f;line-height:1.35;margin-top:2px}.lw-hit mark{background:#fde7a6;color:var(--ink);border-radius:3px}
.lw-hit .lsn{float:right;font-size:.64rem;font-weight:800;color:var(--accent)}.lw-none{font-size:.8rem;color:var(--text-light);padding:6px 2px}
.lw-sh{display:flex;align-items:center;justify-content:space-between;margin:14px 2px 6px}
.lw-sh span{font:800 .68rem 'Outfit',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--text-light)}
.lw-fu{font:700 .82rem 'Noto Serif JP',serif;border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:.2rem .65rem;cursor:pointer}
.lw-fu.on{background:var(--ink);color:#fff}.lw-fu:not(.on){opacity:.6;text-decoration:line-through}
.lw-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lw-steps button{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:.45rem .5rem;font:500 .88rem 'Outfit',sans-serif;color:var(--ink);cursor:pointer;line-height:1.3}
.lw-steps button:hover{background:var(--paper-warm)}
.lw-steps button span{flex:none;width:22px;height:22px;border-radius:50%;background:#f0ebe2;display:grid;place-items:center;font-size:.72rem;font-weight:800}
.lw-steps button em{font-style:normal}.lw-steps button small{margin-left:auto;font-size:.64rem;background:#efe8dc;border-radius:5px;padding:1px 5px;flex:none}
.lw-steps button.done span{background:#d9ead9;color:#1e5a2e}
.lw-steps button.on{background:var(--paper-warm);font-weight:700}.lw-steps button.on span{background:var(--accent);color:#fff}
.lw-mbar{display:none}
.lw-prog{display:flex;gap:4px;align-items:center;margin-bottom:10px}
.lw-prog i{flex:1;height:5px;border-radius:3px;background:#e2ddd3}.lw-prog i.d,.lw-prog i.c{background:var(--accent)}.lw-prog i.c{box-shadow:0 0 0 2px #f6d4cc}
.lw-prog i.o{background:repeating-linear-gradient(90deg,#e2ddd3 0 4px,transparent 4px 7px)}.lw-prog i.o.d,.lw-prog i.o.c{background:var(--accent)}
.lw-prog span{flex:none;margin-left:8px;font-size:.8rem;font-weight:700;color:var(--text-light)}
.lw-body{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:2rem 2.25rem;min-height:420px}
.lw-eb{font:800 .7rem 'Outfit',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.lw-eb em{font-style:normal;background:#efe8dc;color:var(--ink);border-radius:5px;padding:1px 6px;letter-spacing:.04em}
.lw-st{font-size:1.9rem;font-weight:700;margin:0 0 1.1rem;line-height:1.2;letter-spacing:-.01em}
.lw-p{font-size:1.04rem;line-height:1.7;margin:0 0 1rem;color:var(--text)}.lw-p b{color:var(--ink)}
.lw-p a,.lw-tip a{color:var(--accent);font-weight:700;text-decoration:underline}
.lw-exl{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin:0 0 1.1rem}
.lw-ex{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;background:var(--paper);border:1px solid #e6dfd2;border-radius:12px;padding:9px 12px;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.lw-ex:hover{border-color:var(--accent);background:#fff}
.lw-spk{flex:none;width:24px;height:24px;border-radius:50%;background:#f0ebe2;display:grid;place-items:center;font-size:.6rem}
.lw-ex:hover .lw-spk{background:var(--accent);color:#fff}
.lw-jp{font:700 1.2rem 'Noto Serif JP',serif}.lw-jp b{color:var(--accent)}.lw-rd{font-size:.8rem;color:#55555f}.lw-mn{flex:1 0 auto;text-align:right;font-size:.88rem}
.lw-tw{overflow-x:auto;margin:0 0 1.1rem;border-radius:12px;border:1px solid #e6dfd2;background:#fff}
.lw-t{border-collapse:collapse;width:100%;font-size:.95rem}.lw-t th{background:#f3eee5;font-weight:800;font-size:.8rem;text-align:left;padding:9px 12px;white-space:nowrap}
.lw-t td{padding:9px 12px;border-top:1px solid #f0ebe2;vertical-align:top;line-height:1.4}.lw-t td:not(:first-child){font-family:'Noto Serif JP',serif}.lw-t td:first-child{font-weight:700}
.lw-t.chart td,.lw-t.chart th{text-align:center;padding:6px 4px;font-family:'Noto Serif JP',serif;font-size:1.05rem}.lw-t.chart th{font-family:'Outfit',sans-serif}
.lw-t td.hl{background:#fbe7e1;color:var(--accent);font-weight:700}
.lw-ch button{border:0;background:none;font:inherit;color:inherit;width:100%;padding:4px 0;cursor:pointer;border-radius:6px}.lw-ch td button:hover{background:#f6efe4}
.lw-ch th button{font:800 .85rem 'Outfit',sans-serif}.lw-ch th button.on{background:var(--accent);color:#fff}.lw-ch td.hl button{color:var(--accent);font-weight:800}
.lw-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:0 0 1.1rem}
.lw-card{display:flex;gap:12px;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--accent);padding:12px 14px}
.lw-card .k{font:900 1.4rem 'Noto Serif JP',serif;flex:none;width:54px;text-align:center;line-height:1.1;padding-top:4px}.lw-card h4{margin:0;font-size:1.02rem}.lw-card p{margin:3px 0 5px;font-size:.88rem;color:#55555f;line-height:1.45}.lw-card small{font:600 .92rem 'Noto Serif JP',serif}
.lw-c2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 1.1rem}.lw-c2>div{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:12px;box-shadow:0 3px 0 var(--accent)}
.lw-c2 b{font:900 2rem 'Noto Serif JP',serif;color:var(--accent);display:block;line-height:1}.lw-c2 h4{margin:6px 0 2px;font-size:.95rem}.lw-c2 p{margin:0 0 6px;font-size:.85rem;color:#55555f}.lw-c2 small{font:700 .86rem 'Noto Serif JP',serif}
.lw-fl{display:flex;flex-direction:column;gap:8px;margin:0 0 1.1rem}.lw-fs{display:flex;gap:12px;background:var(--paper);border:1px solid #e6dfd2;border-radius:12px;padding:10px 12px}
.lw-fs .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.82rem}
.lw-fs .q{font-size:.95rem;font-weight:600;line-height:1.4}.lw-fs .a{font-size:.95rem;color:var(--accent);font-weight:800;margin-top:2px}.lw-fs small{display:block;font:500 .86rem 'Noto Serif JP',serif;color:#55555f;margin-top:2px}
.lw-exc{background:#fdf1d8;border:2px solid #e5b54f;border-radius:14px;padding:12px 14px;margin:0 0 1.1rem;font-size:.97rem;line-height:1.6;color:var(--ink)}
.lw-exc h5{margin:0 0 4px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#7a4e00}.lw-exc .lw-exl{margin:8px 0 0}.lw-exc .lw-ex{background:#fff;border-color:#f0dcae}
.lw-tip{background:#eaf2ea;border-left:4px solid #3d7a4e;border-radius:10px;padding:10px 14px;font-size:.97rem;line-height:1.6;margin:0 0 1.1rem;color:var(--ink)}.lw-tip>b{color:#2a5a37;margin-right:4px}
.lw-trap{display:flex;flex-direction:column;gap:6px;margin:0 0 1.1rem}.lw-tr{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lw-tr span{border-radius:10px;padding:8px 11px;font:600 .97rem 'Noto Serif JP',serif;line-height:1.4}.lw-tr .x{background:#fbe3dd;color:#7d2a1f}.lw-tr .x:before{content:"✕ ";font-family:'Outfit',sans-serif}
.lw-tr .o{background:#e2f3e6;color:#1e5a2e}.lw-tr .o:before{content:"✓ ";font-family:'Outfit',sans-serif}.lw-tr small{grid-column:1/3;font-size:.8rem;color:#55555f;margin:-1px 4px 3px}
.lw-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px;margin:0 0 1.1rem}.lw-note{background:var(--paper);border:1px solid #e6dfd2;border-radius:12px;padding:10px 12px;font-size:.95rem;line-height:1.55}
.lw-note>b{display:inline-block;font:800 .85rem 'Noto Serif JP',serif;background:var(--ink);color:#fff;border-radius:6px;padding:1px 8px;margin-right:6px}
.lw-nx{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.lw-nx a{display:flex;gap:12px;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:12px 14px;box-shadow:0 3px 0 var(--accent);text-decoration:none;color:var(--ink)}
.lw-nx a:hover{transform:translateY(-1px)}
.lw-nx b{font:900 1rem 'Noto Serif JP',serif;width:42px;height:42px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}.lw-nx strong{display:block;font-size:.98rem}.lw-nx small{display:block;font-size:.84rem;color:#55555f}.lw-nx i{margin-left:auto;font-style:normal;font-size:1.3rem;color:var(--accent)}
.lw-nav{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.lw-nav button,.lw-nav a{border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:.7rem 1.2rem;font:700 .95rem 'Outfit',sans-serif;cursor:pointer;text-decoration:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lw-nav .pri{background:var(--accent);border-color:var(--accent);color:#fff}
.lw-done{font-weight:800;color:var(--good,#2f7a4b);padding:.7rem 0}
.lw-body ruby{ruby-position:over}.lw-body rt{font-size:.5em;font-weight:500;color:#6b6b6b;letter-spacing:0}
html.lw-nofuri .lw-body rt{display:none}
.lw-tag{display:inline-block;background:#fde7a6;color:var(--ink);font:800 .68rem 'Outfit',sans-serif;letter-spacing:.1em;text-transform:uppercase;border-radius:6px;padding:3px 8px;margin-bottom:8px}

/* phones and narrow windows: the panel becomes a sheet */
@media (max-width:860px){
  .lw-wrap{padding:1rem .9rem 3rem}
  #lw{grid-template-columns:1fr;gap:0}
  .lw-side{display:none;position:fixed;inset:auto 0 0 0;top:auto;max-height:75vh;z-index:300;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
  body.lw-open .lw-side{display:block}
  body.lw-open:after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:299}
  body.lw-findmode .lw-lessons,body.lw-findmode .lw-sh,body.lw-findmode .lw-steps{display:none}
  .lw-mbar{display:flex;gap:6px;position:sticky;top:100px;z-index:5;background:var(--paper);padding:6px 0 8px}
  .lw-mbar button{border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:.35rem .8rem;font:700 .85rem 'Outfit',sans-serif}
  .lw-mbar .lw-fu{margin-left:auto}
  .lw-body{padding:1.2rem 1rem;border-radius:14px}
  .lw-st{font-size:1.45rem}
  .lw-p{font-size:.98rem}
  .lw-exl{grid-template-columns:1fr}
}
.lw-static .lw-sec{margin-bottom:1rem}