:root{--paper:#f1e9d7;--surface:#faf5e9;--ink:#2d2417;--ink-soft:#71624b;--line:#d9cdaf;--bronze:#8c6a3f;--bronze-deep:#6b4f2c;--bronze-wash:#8c6a3f1a;--ok:#2f6b45;--ok-wash:#2f6b451a;--ng:#a32638;--ng-wash:#a3263814;--code-bg:#2b2214;--code-ink:#ead9b5;--seal-ink:#faf5e9;--font-display:Georgia, "Times New Roman", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;--font-body:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Times New Roman", serif;--font-mono:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--paper:#171209;--surface:#211a0f;--ink:#e8ddc2;--ink-soft:#a5987b;--line:#423823;--bronze:#c9a56a;--bronze-deep:#dcbb84;--bronze-wash:#c9a56a21;--ok:#5cb586;--ok-wash:#5cb5861f;--ng:#e0697b;--ng-wash:#e0697b1a;--code-bg:#100c05;--code-ink:#d8c9a4;--seal-ink:#171209}}*{box-sizing:border-box}html{height:100%}body{background:var(--paper);min-height:100%;color:var(--ink);font-family:var(--font-body);margin:0;font-size:16px;line-height:1.95}h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:600;line-height:1.4}p{margin:0}button{color:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:1rem}button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.app{max-width:44rem;margin:0 auto;padding:2.5rem 1.25rem 5rem}.masthead{border-bottom:6px double var(--bronze);flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;padding-bottom:1.1rem;display:flex}.masthead-kicker{font-family:var(--font-display);letter-spacing:.45em;color:var(--bronze);margin-bottom:.2rem;font-size:.8rem;display:block}.masthead h1{letter-spacing:.35em;color:var(--ink);font-size:2.15rem;font-weight:600}.stats{gap:0;margin:0;display:flex}.stats div{text-align:center;padding:0 1.1rem}.stats div+div{border-left:1px solid var(--line)}.stats dt{font-family:var(--font-display);letter-spacing:.3em;color:var(--ink-soft);font-size:.72rem}.stats dd{font-family:var(--font-display);color:var(--bronze-deep);margin:.1rem 0 0;font-size:1.3rem;font-style:italic}.tabs{border-bottom:1px solid var(--line);justify-content:center;gap:3.5rem;margin:1.5rem 0 2rem;display:flex}.tab{font-family:var(--font-display);letter-spacing:.5em;text-indent:.5em;color:var(--ink-soft);border-bottom:6px double #0000;margin-bottom:-1px;padding:.45rem .3rem;font-size:1.02rem;transition:color .15s}.tab:hover{color:var(--bronze-deep)}.tab-active{color:var(--ink);border-bottom-color:var(--bronze)}.tab-badge{background:var(--ng);min-width:1.5em;height:1.5em;color:var(--seal-ink);font-family:var(--font-display);letter-spacing:0;text-indent:0;vertical-align:.2em;border-radius:50%;justify-content:center;align-items:center;margin-left:.5em;font-size:.72rem;display:inline-flex}.toc{gap:.9rem;margin:0;padding:0;list-style:none;display:grid}.toc-item{text-align:left;background:var(--surface);border:1px solid var(--line);width:100%;box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line);align-items:center;gap:1.1rem;padding:1.05rem 1.2rem;transition:box-shadow .15s,border-color .15s;display:flex}.toc-item:hover{border-color:var(--bronze);box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--bronze)}.toc-status{border:1px solid var(--ink-soft);width:2.7rem;height:2.7rem;box-shadow:inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--ink-soft);font-family:var(--font-display);color:var(--ink-soft);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:1rem;display:flex;transform:rotate(-8deg)}.toc-read{color:var(--seal-ink);background:var(--bronze);border-color:var(--bronze-deep);box-shadow:inset 0 0 0 2px var(--bronze), inset 0 0 0 3px var(--seal-ink)}.toc-item:hover .toc-status{border-color:var(--bronze-deep)}.toc-body{gap:.2rem;display:grid}.toc-title{font-family:var(--font-display);letter-spacing:.08em;color:var(--ink);font-size:1.08rem}.toc-summary{color:var(--ink-soft);font-size:.86rem}.toc-meta{font-family:var(--font-display);letter-spacing:.06em;color:var(--bronze-deep);font-size:.78rem;font-style:italic}.lesson{background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--line);padding:2.4rem 2rem}.lesson h2{letter-spacing:.14em;text-align:center;border-bottom:6px double var(--line);padding-bottom:.9rem;font-size:1.45rem}.lesson-lede{text-align:center;color:var(--ink-soft);margin-top:.8rem;font-size:.92rem;font-style:italic}.lesson>p{text-align:justify;margin-top:1.25rem}.lesson>p:first-of-type:first-letter{font-family:var(--font-display);color:var(--bronze-deep);font-size:1.6em;line-height:1}.code{margin:1.4rem 0 0}.code figcaption{font-family:var(--font-display);letter-spacing:.22em;color:var(--bronze-deep);margin-bottom:.35rem;font-size:.8rem}.code figcaption:before{content:"❧ ";color:var(--bronze)}.code pre{background:var(--code-bg);color:var(--code-ink);border:1px solid var(--bronze-deep);box-shadow:inset 0 0 0 3px var(--code-bg), inset 0 0 0 4px var(--bronze-deep);font-family:var(--font-mono);margin:0;padding:1.1rem 1.2rem;font-size:.84rem;line-height:1.75;overflow-x:auto}.keypoints{background:var(--bronze-wash);border-top:6px double var(--bronze);border-bottom:6px double var(--bronze);margin-top:1.4rem;padding:1rem 1.3rem 1.1rem}.keypoints-title{font-family:var(--font-display);letter-spacing:.18em;color:var(--bronze-deep);font-size:.95rem}.keypoints ul{margin:.5rem 0 0;padding-left:1.3rem;list-style:none}.keypoints li{position:relative}.keypoints li:before{content:"❖";color:var(--bronze);font-size:.8em;position:absolute;left:-1.3rem}.keypoints li+li{margin-top:.45rem}.note{background:var(--ng-wash);border:1px solid var(--ng);color:var(--ink);margin-top:1.4rem;padding:.9rem 1.1rem;font-size:.9rem;display:block}.note-label{font-family:var(--font-display);letter-spacing:.35em;border:1px solid var(--ng);color:var(--ng);vertical-align:.08em;margin-right:.7em;padding:0 .2em 0 .55em;font-size:.78rem;display:inline-block;transform:rotate(-3deg)}.lesson-actions{border-top:1px solid var(--line);justify-content:space-between;align-items:center;margin-top:2.2rem;padding-top:1.2rem;display:flex}.term{color:var(--bronze-deep);-webkit-text-decoration:underline dotted;text-decoration:underline dotted;-webkit-text-decoration-color:var(--bronze);text-decoration-color:var(--bronze);text-underline-offset:.28em;cursor:help;text-decoration-thickness:1.5px;position:relative}.term-tip{background:var(--surface);width:min(22rem,78vw);color:var(--ink);border:1px solid var(--bronze);box-shadow:inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--bronze), 0 8px 22px #1e160838;z-index:10;opacity:0;visibility:hidden;padding:.7rem .9rem;font-size:.82rem;line-height:1.75;transition:opacity .12s;position:absolute;bottom:calc(100% + .65em);left:50%;transform:translate(-50%)}.term-tip b{font-family:var(--font-display);letter-spacing:.12em;color:var(--bronze-deep);margin-bottom:.2rem;display:block}.term:hover .term-tip,.term:focus-visible .term-tip{opacity:1;visibility:visible}.quiz{background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--line);padding:2rem 1.9rem}.quiz-source{font-family:var(--font-display);letter-spacing:.12em;color:var(--ink-soft);font-size:.8rem;font-style:italic}.quiz-question{font-family:var(--font-body);margin-top:.6rem;font-size:1.14rem;font-weight:600;line-height:1.9}.choices{gap:.7rem;margin-top:1.5rem;display:grid}.choice{text-align:left;background:var(--paper);border:1px solid var(--line);align-items:center;gap:1rem;padding:.7rem 3.6rem .7rem .8rem;line-height:1.75;transition:border-color .12s,background .12s;display:flex;position:relative}.choice:not(:disabled):hover{border-color:var(--bronze);background:var(--bronze-wash)}.choice:disabled{cursor:default}.choice-mark{border:1px solid var(--bronze);width:1.9em;height:1.9em;font-family:var(--font-display);color:var(--bronze-deep);background:var(--surface);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:.85rem;display:flex}.choice-text{font-size:.94rem}.choice-correct{border-color:var(--ok);background:var(--ok-wash)}.choice-wrong{border-color:var(--ng);background:var(--ng-wash)}.choice-dim{opacity:.4}.grade-mark{width:2.1em;height:2.1em;font-family:var(--font-display);pointer-events:none;background:0 0;border:2px solid;border-radius:50%;justify-content:center;align-items:center;font-size:.85rem;animation:.22s ease-out stamp;display:flex;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)rotate(-12deg)}.grade-ok{color:var(--ok)}.grade-ng{color:var(--ng)}@keyframes stamp{0%{opacity:0;transform:translateY(-50%)rotate(-12deg)scale(1.7)}to{opacity:1;transform:translateY(-50%)rotate(-12deg)scale(1)}}.feedback{border-top:6px double var(--line);margin-top:1.5rem;padding-top:1.2rem}.verdict{font-family:var(--font-display);letter-spacing:.14em;font-size:1.02rem}.verdict-ok{color:var(--ok)}.verdict-ng{color:var(--ng)}.verdict-srs{font-family:var(--font-body);letter-spacing:0;color:var(--ink-soft);margin-left:.8em;font-size:.82rem}.explanation{background:var(--bronze-wash);border-top:3px double var(--bronze);border-bottom:3px double var(--bronze);text-align:justify;margin-top:.8rem;padding:.9rem 1.1rem;font-size:.92rem}.feedback .primary{margin-top:1.3rem}.empty{text-align:center;font-size:1.1rem;font-family:var(--font-display);letter-spacing:.06em;padding:3.8rem 1rem}.empty-sub{font-family:var(--font-body);letter-spacing:0;color:var(--ink-soft);margin-top:.6rem;font-size:.9rem}.empty .primary{margin-top:1.7rem}.primary{background:var(--bronze);color:var(--seal-ink);font-family:var(--font-display);letter-spacing:.28em;text-indent:.28em;border:1px solid var(--bronze-deep);box-shadow:inset 0 0 0 2px var(--bronze), inset 0 0 0 3px var(--seal-ink);padding:.65rem 1.7rem;font-size:.95rem;transition:background .12s;display:inline-block}.primary:hover{background:var(--bronze-deep);box-shadow:inset 0 0 0 2px var(--bronze-deep), inset 0 0 0 3px var(--seal-ink)}.ghost{font-family:var(--font-display);color:var(--ink-soft);letter-spacing:.14em;text-underline-offset:.35em;font-size:.9rem;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.ghost:hover{color:var(--bronze-deep)}@media (width<=30rem){.masthead{flex-direction:column;align-items:flex-start}.stats{justify-content:space-between;width:100%}.stats div{padding:0 .4rem}.tabs{gap:2rem}.lesson,.quiz{padding:1.4rem 1rem}}