:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',sans-serif;color-scheme:light;--bg:#f3f6f6;--card:#fff;--ink:#162d37;--muted:#677d86;--border:#dae4e5;--primary:#176479;--deep:#10364b;--primary-light:#e9f6f5;--yellow:#fff5df;--warn:#835b1d;--shadow:0 10px 34px rgba(14,45,65,.07)}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);line-height:1.68;font-size:15px;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #70bdc2;outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.42}
.shell{max-width:920px;margin:auto;padding:0 18px 118px}.topbar{background:var(--deep);color:white;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px #09202b18}.topbar-inner{max-width:920px;margin:auto;padding:12px 18px;display:flex;align-items:center;gap:10px;justify-content:space-between}.logo{display:flex;align-items:center;gap:10px;line-height:1.25}.logo-mark{background:#237d85;color:#e4ffff;border-radius:10px;display:grid;place-items:center;height:40px;width:40px;font-size:26px;font-weight:600}.brand{font-size:17px;font-weight:800;letter-spacing:.03em}.tiny{font-size:11px;color:#b1d0d3}.header-actions{display:flex;gap:8px}.outline-light{border:1px solid #74949f;border-radius:9px;color:#fff;background:transparent;padding:8px 12px;font-size:13px}
.hero{padding:20px 0 15px}.eyebrow{letter-spacing:.12em;color:var(--primary);font-weight:800;font-size:11px;margin:0 0 6px}.hero h1{margin:0;font-size:clamp(23px,4.5vw,34px);line-height:1.32;letter-spacing:-.015em}.hero-sub{color:var(--muted);margin:9px 0 0;font-size:13px}.overview{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0 16px}.metric{padding:11px 13px;border-radius:11px;background:var(--card);border:1px solid var(--border)}.metric strong{font-variant-numeric:tabular-nums;display:block;font-size:22px;line-height:1.3}.metric span{color:var(--muted);font-size:11px}
.tabs{display:flex;gap:7px;padding:5px;background:#e3eaeb;border-radius:14px;margin-bottom:12px}.tab{flex:1;border:0;background:transparent;border-radius:10px;font-size:13px;padding:10px 2px;color:#536d79;font-weight:700}.tab.active{background:white;box-shadow:0 1px 5px #1f485217;color:var(--deep)}
.filters{background:var(--card);border:1px solid var(--border);padding:15px;border-radius:15px;margin:12px 0;box-shadow:var(--shadow)}.filter-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.filter-heading strong{font-size:14px}.filter-content{margin-top:12px}.rowfilter{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:9px}.field{display:block;min-width:0}.field .flabel{font-size:11px;color:var(--muted);margin:0 0 4px}.input{border:1px solid #c8d5d7;background:#fff;color:var(--ink);border-radius:10px;width:100%;padding:10px 11px;min-height:43px;min-width:0}.search{margin:10px 0 0}.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.chip{border-radius:99px;padding:8px 11px;background:#f5f8f8;border:1px solid #d7e1e2;color:#415e65;font-size:12px}.chip.active{background:#e0f2f0;color:#155e60;border-color:#76adae}.filter-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}.small-note{font-size:12px;color:var(--muted)}.link-btn{background:none;border:0;color:var(--primary);font-size:12px;font-weight:700;padding:4px}
.quiz-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 1px 9px;font-size:12px;color:var(--muted)}.quiz-summary b{color:#286579}.progress{height:5px;background:#d9e4e6;border-radius:4px;overflow:hidden}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#267d84,#67b1a8);transition:width .2s}
.quiz{border-radius:17px;border:1px solid var(--border);background:white;padding:24px 24px 16px;box-shadow:var(--shadow);min-height:340px}.q-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:16px}.tag{border-radius:999px;font-size:11px;background:#e9f1f2;color:#46666c;padding:4px 9px}.tag.source{background:#e9f2fa;color:#23566e;font-weight:800}.tag.warn{background:#fff4e3;color:#906014}.q-stem{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;font-weight:650;line-height:1.85;margin:0 0 18px}.choices{display:grid;gap:9px}.choice{border:1px solid #dae3e5;background:#fff;border-radius:12px;padding:13px 14px;text-align:left;display:flex;gap:12px;align-items:start;color:#213840;line-height:1.62;white-space:pre-wrap;overflow-wrap:anywhere}.choice:hover{background:#f4fafa}.choice.selected{border:2px solid #267a85;padding:12px 13px;background:#eef9f8}.choice .num{flex:0 0 27px;height:27px;border:1px solid #b9cdd0;border-radius:50%;display:grid;place-items:center;color:#53747b;font-size:12px;font-weight:800}.choice.selected .num{background:#267a85;color:#fff;border-color:#267a85}.raw-options{border-left:3px solid #aac9ce;background:#f8fbfb;padding:10px 14px;white-space:pre-wrap;line-height:1.85;overflow-wrap:anywhere}
.note-hint{background:#f0f6f8;color:#526e74;border-radius:10px;padding:10px 12px;font-size:12px;margin:12px 0}.written{width:100%;resize:vertical;min-height:110px;border:1px solid #d0dee1;border-radius:12px;padding:14px;font-size:15px;line-height:1.7;color:var(--ink);background:#fff}.under-q{margin-top:18px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.btn{border:1px solid #cbdbde;border-radius:10px;background:#f8fbfb;padding:9px 13px;font-size:13px;color:#325966;font-weight:650}.btn.primary{background:#17677b;border-color:#17677b;color:white}.btn.ghost{border-color:transparent;background:transparent}.btn.on{color:#0c6068;background:#e5f4f2;border-color:#93cbca}.btn.again.on{color:#895b23;background:#fff3df;border-color:#eacb94}.bottomline{border-top:1px solid #e6eeee;margin:18px -24px -2px;padding:13px 24px 0}.q-actions{display:flex;flex-wrap:wrap;gap:8px}.answer-warning{font-size:12px;color:#7a6b4e;padding:8px 0}.details{margin-top:12px;border-top:1px dashed #d9e4e5;padding-top:12px}.details summary{cursor:pointer;font-size:13px;color:#416c77;font-weight:650}.details textarea{margin-top:10px}.muted{color:var(--muted)}.empty{border:1px dashed #b9ccd0;padding:34px 16px;border-radius:14px;text-align:center;background:#fff;color:var(--muted)}
.nav-bottom{position:fixed;bottom:0;left:0;width:100%;z-index:18;padding:11px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom));background:rgba(248,251,251,.97);border-top:1px solid #d8e5e7;backdrop-filter:blur(12px)}.nav-inner{max-width:884px;margin:auto;display:flex;gap:9px;align-items:center}.nav-inner button{flex:1;min-height:48px;border:1px solid #c5d8dc;background:white;border-radius:12px;font-weight:800;color:#2f616d}.nav-inner .next{background:#17677b;color:white;border-color:#17677b;flex:1.5}.nav-inner .random{flex:0 0 48px;font-size:20px}.stats-panel,.setting-panel{border:1px solid var(--border);background:white;border-radius:15px;padding:20px;box-shadow:var(--shadow)}.stats-panel h2,.setting-panel h2{font-size:19px;margin:0 0 8px}.stats-table{display:grid;gap:10px;margin-top:14px}.statrow{display:grid;grid-template-columns:minmax(130px,1fr) 90px;gap:8px;font-size:12px;align-items:center}.statbar{height:6px;background:#e4ecec;border-radius:8px;overflow:hidden}.statbar span{display:block;background:#257e85;height:100%}.statval{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}.statgroup{display:grid;gap:9px;grid-template-columns:1fr 1fr;margin-bottom:15px}.danger{border-color:#debdb0;color:#a34943;background:#fff7f5}.notice{background:#fff8e9;border:1px solid #f2dfb9;border-radius:10px;color:#805f2c;padding:12px;font-size:12px}.hidden{display:none!important}
.viewer{border:none;padding:0;margin:0;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:#071f2a;color:white}.viewer::backdrop{background:#03131ee8}.viewerbox{display:flex;flex-direction:column;height:100%}.viewerhead{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:5px}.viewerhead div{font-size:12px;flex:1;text-align:center}.viewerhead button{border:1px solid #60828b;color:white;background:#183d49;border-radius:9px;padding:8px 11px}.viewstage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;touch-action:pan-x pan-y pinch-zoom}.viewstage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.viewstage.zoomed{justify-content:start;align-items:start}.viewstage.zoomed img{max-width:none;max-height:none;width:auto;height:125%}.viewfooter{display:flex;gap:9px;padding:10px 14px calc(12px + env(safe-area-inset-bottom))}.viewfooter button{flex:1;background:#e6f2f2;border:0;border-radius:9px;padding:11px}.viewfooter button:disabled{opacity:.4}
@media (max-width:620px){.shell{padding:0 11px 105px}.topbar-inner{padding:9px 12px}.logo-mark{height:34px;width:34px;font-size:22px}.brand{font-size:14px}.tiny{font-size:10px}.hero{padding:18px 5px 12px}.overview{gap:6px;margin:14px 0}.metric{padding:10px 9px}.metric strong{font-size:20px}.metric span{font-size:10px}.rowfilter{grid-template-columns:1fr 1fr}.rowfilter .field:first-child{grid-column:1 / -1}.quiz{padding:18px 14px 12px;border-radius:15px}.q-stem{font-size:15px}.bottomline{margin:18px -14px -2px;padding:12px 14px 0}.choice{padding:12px}.choice.selected{padding:11px}.tab{font-size:12px}}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#0e1d22;--card:#172a30;--ink:#e3eeef;--muted:#acc0c3;--border:#315159;--primary:#9ee0dd;--deep:#0b2936;--primary-light:#173d43;--shadow:none}.metric,.filters,.quiz,.stats-panel,.setting-panel,.empty{background:var(--card)}.tab.active{background:#375057;color:white}.tabs{background:#20393f}.input,.written,.choice{background:#14272e;color:var(--ink);border-color:#42616a}.choice:hover,.choice.selected{background:#23464c}.chip,.btn{background:#203c43;color:#d3edee;border-color:#406068}.chip.active,.btn.on{background:#236166;color:#fff}.tag{background:#2c454a;color:#dceef1}.tag.source{background:#24465a;color:#deeffe}.note-hint{background:#234148;color:#cfeced}.raw-options{background:#1c343a}.bottomline,.details{border-color:#33545a}.nav-bottom{background:#13282dee}.nav-inner button{background:#233f46;color:white;border-color:#42616a}.nav-inner .next,.btn.primary{background:#207e8b;color:white}.answer-warning{color:#dccb9a}.notice{background:#483920;border-color:#947645;color:#ffe6ae}}

/* Answer key controls */
.answer-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:17px}
.answer-controls .btn{min-height:42px;padding:10px 16px}
.answer-box{background:#eaf8f1;border:1px solid #9bcfb7;border-radius:13px;padding:14px;margin-top:12px;color:#1c4e39}
.answer-heading{font-weight:800;font-size:15px;margin-bottom:9px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.answer-line{font-size:16px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.answer-line strong{font-size:18px}
.key-badge{font-size:11px;background:#f2f4ee;border-radius:8px;padding:3px 7px;font-weight:600;color:#6b6238}
.key-editor{margin-top:16px;border:1px solid #e0e9e9;border-radius:10px;padding:12px;font-size:13px}
.key-editor summary{font-weight:700;color:#426e79;cursor:pointer}
.key-editor .input{width:100%;margin:9px 0;padding:10px 12px}
.no-answer{background:#fff4e4;color:#785929;padding:9px 12px;border-radius:9px;font-size:13px}
.tag.success{background:#e2f3ea;color:#24604c}
.choice.correct-choice{border-color:#27966c;background:#eaf8f1}
.choice.incorrect-choice{border-color:#d78781;background:#fff0ed}
.answer-box a{color:#225c79;text-decoration:underline}
@media(prefers-color-scheme:dark){.answer-box{background:#153c30;color:#dafbed;border-color:#3f8b6a}.key-editor{border-color:#3b5961}.choice.correct-choice{background:#1a4a38}.choice.incorrect-choice{background:#582f2f}.key-badge{background:#3c4935;color:#f1eab7}.answer-box a{color:#b1dfff}}

/* Recurring topic badges, chips and category/topic filters */
.topic-note{margin:-4px 0 15px;background:#fff9e9;border:1px solid #ead8a8;border-radius:11px;padding:10px 12px;font-size:12px;color:#765419}
.topic-note strong{font-size:12px}.topic-note>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.topic-quick{cursor:pointer;border:1px solid #e0c68b;background:#fffcf1;border-radius:99px;padding:6px 9px;color:#765419;font-size:12px}
.tag.frequent{background:#ffefbd;color:#754b08;font-weight:800;border:1px solid #e5ce85}
.chip[data-scope="starred"]{border-color:#e3c975;color:#815b12;background:#fffaf0}.chip[data-scope="starred"].active{background:#fff0bd;color:#70501a;border-color:#dcb548}
@media (min-width:621px){.rowfilter{grid-template-columns:1.55fr .78fr .9fr 1.4fr}}
@media(max-width:620px){.rowfilter .field:last-child{grid-column:1/-1}}
@media(prefers-color-scheme:dark){.topic-note{background:#473a1e;color:#f5dd9e;border-color:#8d713b}.topic-quick{background:#504321;color:#f5dfae;border-color:#9b7f42}.tag.frequent{background:#665018;color:#fce6a5;border-color:#c99c41}.chip[data-scope="starred"]{background:#49391c;color:#f9d997;border-color:#987238}.chip[data-scope="starred"].active{background:#73561e;color:#fff5d9}}

/* 2026 dual-timeline explanations with original-source figure previews */
.explain{margin:18px 0 8px;border-top:1px solid #d8e3e5;padding-top:14px;line-height:1.85;font-size:14px;color:#263d47}
.explain h3{font-size:16px;margin:10px 0;color:#203b46}
.explain p{margin:6px 0 10px}
.explain-part{border-left:3px solid #afc5d0;background:#f7fafb;padding:12px 13px;border-radius:5px;margin:12px 0}
.explain-part.current-important{border-left-color:#8fadb8}
.explain-part b{color:#2a4b5b}
.ref-figure{padding:10px;margin:14px 0;border:1px solid #d8e4e8;border-radius:12px;background:#fff;text-align:center}
.ref-figure img{display:block;max-width:100%;width:auto;max-height:390px;margin:auto;border-radius:6px;object-fit:contain;cursor:zoom-in}
.ref-figure figcaption{text-align:left;font-size:12px;line-height:1.5;color:#627883;margin-top:10px}
.update-title{margin:20px 0 10px!important;padding-top:16px;border-top:1px solid #dfe7e8}
.current-item{background:#f8fafc;border:1px solid #e0e8ec;border-radius:10px;padding:12px 13px;margin:10px 0}
.current-item b{display:inline-block;margin-right:7px}
.current-item .small-date{font-size:11px;color:#657b83}
.current-item a{display:inline-block;font-size:12px;color:#16667d;text-decoration:underline;margin:2px 0}
.tag.update{background:#e9f1f8;color:#47657e}
@media(max-width:600px){.ref-figure{padding:8px;margin-left:-4px;margin-right:-4px}.ref-figure img{max-height:340px}.explain{font-size:14px}}

.xsox-box{padding:13px;border-radius:12px;border:1px solid #cbd9df;background:#f5f9fb;margin:14px 0;line-height:1.6;color:#253a47}.xsox-box p{margin:.45rem 0}.xsox-box a{font-weight:700;color:#12618b;overflow-wrap:anywhere}.xsox-summary{border-top:1px solid #d9e3e8;padding-top:8px;margin-top:9px}.tag.verified{background:#e6f1f8;color:#20587b}.xsox-box b{color:#193e53}