:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif;color:#202328;background:#d7d9dc;--green:#078b3b;--orange:#f39800;--red:#e73545;--blue:#45c8e8;--line:#e2e5e8}
*{box-sizing:border-box}body{margin:0}.learn-main{width:min(920px,calc(100% - 24px));margin:22px auto;padding:clamp(22px,5vw,48px);border-radius:20px;background:#fff;box-shadow:0 5px 20px rgba(20,28,38,.12)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 25px;color:#6c7470;font-size:.78rem}.crumbs a{color:var(--green);font-weight:800;text-decoration:none}.learn-kicker{margin:0 0 7px;color:var(--green);font-size:.79rem;font-weight:950;letter-spacing:.13em}.learn-main h1{margin:0;font-size:clamp(1.8rem,5vw,2.7rem);letter-spacing:-.04em;line-height:1.28}.learn-lead{margin:14px 0 0;color:#525b56;font-size:1.05rem;line-height:1.9}.article-meta{display:flex;flex-wrap:wrap;gap:7px 14px;margin:18px 0 0;padding:11px 14px;border-radius:10px;color:#637069;background:#f3f7f4;font-size:.78rem;font-weight:750}
.learn-main section{padding:30px 0;border-bottom:1px solid var(--line)}.learn-main h2{margin:0 0 11px;font-size:clamp(1.25rem,3.5vw,1.55rem)}.learn-main h3{margin:22px 0 7px;font-size:1.05rem}.learn-main p,.learn-main li{font-size:1rem;line-height:1.9}.learn-main p{margin:8px 0}.learn-main ul,.learn-main ol{padding-left:1.4em}.term-grid,.compare-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:17px}.term-card{padding:17px;border:1px solid #dbe6df;border-radius:13px;background:linear-gradient(145deg,#fff,#f3faf6)}.term-card b{display:block;color:var(--green);font-size:1.02rem}.term-card p{margin:5px 0 0;color:#59625d;font-size:.91rem;line-height:1.7}
.chart-lesson{margin:22px 0 5px;padding:18px;border:1px solid #dce5e0;border-radius:16px;background:linear-gradient(145deg,#fbfffc,#f2faf5)}.chart-lesson svg{display:block;width:100%;height:auto;max-height:250px}.chart-caption{margin:10px 0 0!important;color:#637069;font-size:.82rem!important;text-align:center}.lesson-note,.lesson-warning{margin-top:18px;padding:17px 19px;border-radius:0 12px 12px 0}.lesson-note{border-left:5px solid var(--green);background:#eef9f2}.lesson-warning{border-left:5px solid var(--orange);background:#fff8e9}.lesson-note b,.lesson-warning b{display:block;margin-bottom:5px}.learn-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.learn-actions a{display:inline-flex;min-height:44px;align-items:center;padding:9px 15px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#12a252,#087c3e);font-weight:900;text-decoration:none}.learn-actions a.secondary{color:#087c40;background:#edf7f1}.related-learning{padding-bottom:8px!important;border-bottom:0!important}.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.related-grid a{padding:14px 15px;border:1px solid #dae4de;border-radius:11px;color:#202328;background:#fafcfb;font-weight:850;line-height:1.5;text-decoration:none}.related-grid a:hover{border-color:#8bcea8}.source-box{margin-top:24px;padding:16px;border-radius:12px;color:#5e6862;background:#f3f5f4;font-size:.82rem;line-height:1.75}.source-box b{color:#39413d}.source-box a{color:#087c40}.learn-disclaimer{margin-top:16px;color:#737a76;font-size:.79rem!important}.learn-footer{width:min(920px,calc(100% - 24px));margin:0 auto 30px;color:#68726c;font-size:.78rem;text-align:center}.learn-footer a{color:#087c40}
html[data-theme="dark"] body{color:#eef2ef;background:#0b0f12}html[data-theme="dark"] .learn-main{background:#121719;box-shadow:0 6px 22px rgba(0,0,0,.35)}html[data-theme="dark"] .learn-lead,html[data-theme="dark"] .term-card p{color:#b7c0bb}html[data-theme="dark"] .article-meta,html[data-theme="dark"] .source-box{color:#aeb8b2;background:#1a2220}html[data-theme="dark"] .learn-main section{border-color:#29332f}html[data-theme="dark"] .term-card,html[data-theme="dark"] .chart-lesson{border-color:#2b3b33;background:linear-gradient(145deg,#17201c,#111715)}html[data-theme="dark"] .lesson-note{background:#12271b}html[data-theme="dark"] .lesson-warning{background:#2a2112}html[data-theme="dark"] .related-grid a{border-color:#2b3932;color:#eef2ef;background:#171d1a}
@media(max-width:620px){.learn-main{margin:10px auto;padding:22px 17px 30px;border-radius:13px}.term-grid,.compare-table,.related-grid{grid-template-columns:1fr}.chart-lesson{margin-inline:-3px;padding:10px}.learn-main section{padding:25px 0}}

/* Real-screen examples and readable calculation notes. */
.lesson-toc{display:flex;flex-wrap:wrap;gap:10px 18px;margin:24px 0 0;padding:16px;border:1px solid #dbe6df;border-radius:12px;background:#f4faf6}.lesson-toc a,.learn-main a:not(.learn-actions a){color:#087c40;text-underline-offset:3px}.lesson-screen{margin:22px 0;border:1px solid #dbe6df;border-radius:14px;overflow:hidden;background:#f5f9f6}.lesson-screen-card{max-width:440px;margin-inline:auto}.lesson-screen img{display:block;width:100%;height:auto}.lesson-screen figcaption{padding:13px 16px;font-size:.84rem;line-height:1.75;color:#43564b}.method-formula{padding:16px;border-radius:10px;background:#eef8f2;font-weight:800;overflow-wrap:anywhere}.method-list dt{font-weight:850;margin:20px 0 6px}.method-list dd{margin:0;line-height:1.9}.learn-main :is(section,h2){scroll-margin-top:90px}html[data-theme="dark"] :is(.lesson-toc,.lesson-screen,.method-formula){background:#17251e;border-color:#344a3d}html[data-theme="dark"] .lesson-screen figcaption{color:#d0dfd5}html[data-theme="dark"] .learn-main a:not(.learn-actions a){color:#85dfab}

/* Static, accessible examples from the actual board. */
.article-table-wrap{max-width:100%;overflow-x:auto;margin:20px 0}.article-example-table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.7}.article-example-table caption{text-align:left;font-weight:800;margin-bottom:8px}.article-example-table :is(th,td){padding:12px;text-align:left;vertical-align:top;border:1px solid #dbe6df}.article-example-table thead{background:#eef8f2}.article-more-image{margin-top:20px}.article-more-image summary{cursor:pointer;font-weight:800;color:#087c40;line-height:1.8}.lesson-screen>a{display:block}.lesson-screen-card{max-width:520px}
html[data-theme="dark"] .article-example-table :is(th,td){border-color:#344a3d}html[data-theme="dark"] .article-example-table thead{background:#17251e}html[data-theme="dark"] .article-more-image summary{color:#85dfab}
@media(max-width:600px){.article-example-table{font-size:.85rem}.article-example-table :is(th,td){padding:8px}}