:root{color-scheme:light;--ink:#17202a;--muted:#65717b;--blue:#365fa8;--line:#ced3d9}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#eceef0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans CJK SC",sans-serif;display:flex;align-items:center;justify-content:center}

.deck{width:min(100vw,calc((100vh - 36px)*16/9));aspect-ratio:16/9;background:white;container-type:inline-size;display:grid;grid-template-rows:18% 72% 10%;box-shadow:0 4px 30px #15233910;position:relative}

header{padding:2.2cqw 5.4cqw 0}
.eyebrow{display:flex;justify-content:space-between;align-items:center;color:var(--blue);font-size:1.08cqw;letter-spacing:.08em}
h1{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-weight:600;font-size:2.7cqw;line-height:1.25;margin:.65cqw 0 .95cqw}
.rule{height:1px;background:var(--ink)}

#stage{padding:1.4cqw 5.4cqw .8cqw;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw;position:relative;overflow:hidden}

img{display:block;max-width:100%;object-fit:contain}
.figure{position:relative;margin:0;max-width:100%;flex:none}
.figure img{width:100%;height:auto}
.image-full{width:100%;max-height:34cqw;object-fit:contain}
.caption{font-size:1.2cqw;color:var(--muted);line-height:1.5;margin:0;text-align:center}
.caption strong{font-weight:600;color:var(--ink)}
.formula{font-family:Georgia,"Times New Roman",serif}

.figure-fit{width:100%;display:flex;justify-content:center}
.figure-fit img{width:auto;max-width:100%;max-height:var(--fit-height);object-fit:contain}
#stage[data-slide="B4"] .figure-fit img{height:var(--fit-height)}

.mask{position:absolute;background:#fff;display:flex;align-items:center;justify-content:center;font:2.8cqw Georgia,serif;color:var(--blue);border:1px dashed #aab8cc}
.mask::after{content:"?"}
.mask.no-border{border:0}
.mask.no-border::after{border:1px dashed #aab8cc;min-width:7cqw;min-height:7cqw;display:flex;align-items:center;justify-content:center}
.reaction-row{width:100%;display:grid;grid-template-columns:31% 37% 28%;gap:2%;align-items:center}
.reaction-row>div{min-width:0}
.molecule{width:100%;max-height:28cqw;object-fit:contain}
.missing{height:20cqw;display:flex;align-items:center;justify-content:center;color:var(--blue);font:3.4cqw Georgia,serif;border:1px dashed #aab8cc;margin:1.5cqw}
.conditions{text-align:center;font-size:1.6cqw;line-height:1.55}
.reaction-arrow{height:1px;width:94%;margin:1.3cqw auto;background:var(--ink);position:relative}
.reaction-arrow:after{content:"";position:absolute;right:-1px;top:-4px;border-left:12px solid var(--ink);border-top:4px solid transparent;border-bottom:4px solid transparent}
.conditions small{font-size:1.25cqw}
.reaction-row.maulide{grid-template-columns:32% 37% 27%}
.aryne-reactant{max-height:26cqw;width:100%;object-fit:contain}
.aryne-product{max-height:27cqw;width:100%;object-fit:contain}
.state-label{position:absolute;right:5.4cqw;top:.35cqw;font-size:1.05cqw;color:var(--muted)}

.mask.erase{border:0}
.mask.erase::after{content:none}
.pair{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:3.2cqw;align-items:center}
.pair img{width:100%;max-height:24cqw;object-fit:contain}
.pair.classics{gap:2.4cqw}
.pair.classics img{max-height:19cqw}
.practice-muted{filter:grayscale(1);opacity:.9}
.reaction-row.compact{grid-template-columns:24% 36% 32%;justify-content:center;gap:3%}
.reaction-row.compact .molecule{max-height:25cqw}
.reaction-row.compact .missing{height:17cqw}
.b1-carbamate{width:86%;height:31cqw;display:flex;flex-direction:column;justify-content:center;gap:1cqw}
.b1-carbamate .reaction-row{grid-template-columns:27% 40% 27%;justify-content:center;gap:3%}
.b1-carbamate .molecule{height:22cqw;width:100%;object-fit:contain}
.b1-carbamate .missing{height:21cqw;margin:.5cqw}
.b1-carbamate .conditions{font-size:1.45cqw;line-height:1.55}
.c4-chain{width:96%;display:grid;grid-template-columns:68% 28%;gap:4%;align-items:start}
.c4-chain>div>img{width:100%;max-height:23cqw;object-fit:contain}
.c4-chain>.figure{width:100%;align-self:center}
.c4-chain>.figure>img{width:100%;max-height:27cqw;object-fit:contain}

.d1-task{width:94%;height:33cqw;display:grid;grid-template-rows:10cqw 22cqw;gap:1cqw;align-items:center}
.d1-net{width:74%;height:10cqw;margin:0 auto;display:grid;grid-template-columns:24% 48% 24%;gap:2%;align-items:center}
.d1-net figure{margin:0;height:10cqw;display:flex;align-items:center;justify-content:center}
.d1-net figure img{width:100%;height:100%;object-fit:contain}
.d1-net .conditions{font-size:1.25cqw;line-height:1.4}
.d1-net .conditions strong{font-weight:600}
.d1-net .conditions small{font-size:1.05cqw;color:var(--muted)}
.d1-reasoning{height:22cqw;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.d1-reasoning>img{width:100%;height:21cqw;object-fit:contain}
.d1-reasoning>span{font-size:1.25cqw;color:var(--muted);border:1px dashed #aab8cc;padding:1.4cqw 2cqw;text-align:center}
.d2-data{width:96%;height:32cqw;display:grid;grid-template-columns:1.05fr .95fr;gap:2.2cqw;align-items:center}
.d2-data figure{margin:0;height:29cqw;display:flex;align-items:center;justify-content:center}
.d2-data figure img{width:100%;height:100%;object-fit:contain}
.d3-assignment{width:96%;height:24cqw;display:flex;align-items:center;justify-content:center}
.d3-assignment>img{width:100%;height:100%;object-fit:contain}
.d4-product{width:88%;height:31cqw;display:grid;grid-template-columns:27% 40% 27%;gap:3%;align-items:center}
.d4-product figure{margin:0;height:24cqw;display:flex;align-items:center;justify-content:center}
.d4-product figure img{width:100%;height:100%;object-fit:contain}
.d4-product .conditions{font-size:1.4cqw;line-height:1.5}
.d4-product-slot{height:24cqw;display:flex;align-items:center;justify-content:center;border:1px dashed #aab8cc;color:var(--blue);font:3.4cqw Georgia,"Times New Roman",serif}
.d4-product-slot:has(img){border-color:transparent}
.d4-product-slot img{width:100%;height:100%;object-fit:contain}
.e1-labels{width:94%;height:31cqw;display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;align-items:center}
.e1-labels figure{position:relative;margin:0;height:24cqw;display:flex;align-items:center;justify-content:center}
.e1-labels figure>img{width:100%;height:100%;object-fit:contain}
.f2-outcome{width:92%;height:33cqw;display:grid;grid-template-columns:25% 28% 43%;gap:2%;align-items:center}
.f2-outcome>figure{margin:0;height:25cqw;display:flex;align-items:center;justify-content:center}
.f2-outcome figure img{width:100%;height:100%;object-fit:contain}
.f2-outcome>.conditions{font-size:1.4cqw;line-height:1.55}
.f2-result{height:31cqw;position:relative;display:flex;align-items:center;justify-content:center}
.f2-result figure{margin:0;width:100%;height:31cqw;display:flex;align-items:center;justify-content:center}
.f2-result img{width:100%;height:100%;object-fit:contain}
.f2-result span{width:100%;height:20cqw;border:1px dashed #aab8cc;display:flex;align-items:center;justify-content:center;color:var(--blue);font:3.4cqw Georgia,"Times New Roman",serif}
.f3-task{width:90%;height:34cqw;display:grid;grid-template-rows:21cqw 11cqw;gap:2cqw;align-items:center}
.f3-net{display:grid;grid-template-columns:27% 38% 27%;gap:4%;align-items:center;height:21cqw}
.f3-net figure{margin:0;height:19cqw;display:flex;align-items:center;justify-content:center}
.f3-net figure img{width:100%;height:100%;object-fit:contain}
.f3-net .conditions{font-size:1.35cqw;line-height:1.55}
.f3-net .conditions small{display:block;color:var(--muted);font-size:1.05cqw}
.f3-intermediate{height:11cqw;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.f3-intermediate figure{margin:0;width:26%;height:10.5cqw;display:flex;align-items:center;justify-content:center}
.f3-intermediate img{width:100%;height:100%;object-fit:contain}
.f3-intermediate span{font-size:1.25cqw;color:var(--muted);border:1px dashed #aab8cc;padding:1.1cqw 2cqw}

.a1-sequence{width:94%;height:34cqw;display:grid;grid-template-rows:15cqw 17cqw;gap:2cqw;align-items:center}
.a1-sequence figure{margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.a1-sequence img{width:100%;height:100%;object-fit:contain}
.a1-mechanism-slot{border-top:1px solid var(--line)}
.a1-mechanism-slot span{font-size:1.25cqw;color:var(--muted);border:1px dashed #aab8cc;padding:1.2cqw 2cqw}
.maulide-application,.c2-imine-block{width:100%;height:33cqw;display:flex;flex-direction:column;align-items:center;justify-content:center}
.maulide-application .reaction-row{flex:1}
.maulide-application .caption,.c2-imine-block .caption{height:2.2cqw;line-height:2.2cqw}
.c2-imine-block .figure{width:88%;height:29cqw;display:flex;align-items:center;justify-content:center}
.c2-imine-block .figure>img{width:100%;height:100%;object-fit:contain}

footer{margin:0 5.4cqw;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2cqw;align-items:center}
#citation{font-family:Georgia,"Times New Roman",serif;font-size:1.05cqw;line-height:1.45;color:#4b555e}
#citation a{color:inherit;text-decoration:none}
#citation a:hover{text-decoration:underline}
nav{display:flex;align-items:center;gap:.5cqw}
button{font:inherit;cursor:pointer}
nav button{background:white;border:1px solid var(--line);color:var(--ink);padding:.6cqw 1.15cqw;border-radius:3px;font-size:1.15cqw;white-space:nowrap;min-height:2.6cqw}
button:disabled{opacity:.36;cursor:default}
button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.utility{height:30px;position:fixed;bottom:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:24px;font-size:11px;color:#68727b}
.utility a{color:inherit;text-decoration:none}
.utility .mode-links{display:flex;align-items:center;gap:7px}
.utility .mode-links a{padding:2px 5px;border-bottom:1px solid transparent}
.utility .mode-links a.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.utility button{border:0;background:none;font-size:11px;color:inherit}
body:fullscreen .utility{display:none}
body:fullscreen .deck{width:min(100vw,calc(100vh*16/9))}

.state-label{z-index:3;background:#fff;padding-left:.4cqw}

.wasa-setup{display:flex;flex-direction:column;align-items:center;gap:2cqw;width:100%}
.wasa-setup>.image-full{width:96%;max-height:13cqw}
.ligand-row{display:flex;align-items:center;justify-content:center;gap:3.2cqw;width:100%;font-size:1.4cqw}
.ligand-row img{width:24cqw;max-height:13cqw}
.ligand-row p{margin:0;line-height:1.65}
.data-layout{width:100%;display:grid;grid-template-columns:15% 1fr;gap:3cqw;align-items:stretch}
.acceptors{display:grid;grid-template-rows:1fr 1fr;gap:1cqw;padding-top:3.4cqw}
.acceptors img{width:100%;height:11cqw;object-fit:contain}
table{border-collapse:collapse;width:100%;font-size:1.38cqw;font-variant-numeric:tabular-nums}
th,td{padding:1cqw .7cqw;text-align:center}
th{font-size:1.13cqw;font-weight:500;color:#5b6570;border-bottom:1px solid #aeb8c2}
td{border-bottom:1px solid #e7eaee}
tbody tr:nth-child(2) td{border-bottom:1px solid #aeb8c2}
td:first-child{text-align:left;font-size:1.25cqw}
td .small{display:block;font-size:1.05cqw;color:var(--muted);margin-top:.3cqw}
.eq-note{font-size:1.1cqw;line-height:1.55;color:var(--muted);text-align:center;margin:0}

.clue{margin:0 auto;padding:.75cqw 1.25cqw;border-left:3px solid var(--blue);background:#f4f7fb;color:#4e5b67;font-size:1.25cqw;line-height:1.5;max-width:88%;text-align:left}
.evidence-note{margin:0;color:#3d4b58;font-size:1.2cqw;line-height:1.5;text-align:center}
.network-row{width:84%;display:grid;grid-template-columns:28% 40% 28%;align-items:center;gap:2%}
.network-row>div>img{width:100%;height:19cqw;object-fit:contain}
.network-row .conditions{font-size:1.45cqw}
.g2-direct{grid-template-columns:25% 42% 25%;justify-content:center;gap:3%}
.g2-direct .molecule{max-height:22cqw}

.c2-condition-pair{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw;align-items:center}
.c2-condition-answer{width:100%;display:flex;flex-direction:column;align-items:center;gap:1cqw}
.c2-condition-answer .c2-reaction-card .figure{height:15.2cqw}
.condition-deconvolution{width:82%;display:grid;grid-template-columns:auto auto;column-gap:1.4cqw;row-gap:.28cqw;align-items:baseline;justify-content:center;border-top:1px solid var(--line);padding-top:.75cqw;font-size:1.12cqw;color:var(--ink)}
.condition-deconvolution strong{font-weight:600;color:var(--blue)}
.condition-deconvolution small{grid-column:1/3;color:var(--muted);font-size:1.02cqw;text-align:center}
.c2-reaction-card{min-width:0;display:flex;flex-direction:column;gap:.55cqw;align-items:center}
.c2-reaction-card .case-tag{height:4.25cqw;font:500 1.02cqw Georgia,"Times New Roman",serif;color:var(--muted);letter-spacing:.02em;text-align:center;line-height:1.35;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.c2-reaction-card .case-tag strong{font-size:1.08cqw;color:var(--ink)}
.c2-reaction-card .case-tag span{display:block}
.c2-reaction-card .figure{width:100%;height:17cqw;display:flex;align-items:center;justify-content:center}
.c2-reaction-card .figure>img{width:100%;height:100%;object-fit:contain}
.c2-reaction-card .mask{z-index:2}
.c2-mechanism{width:76%;height:32cqw}
.c2-mechanism>img,.c2-reservoir>img{width:100%;height:100%;object-fit:contain}
.c2-reservoir{width:74%;height:32cqw}
.c2-evidence{width:92%;display:flex;flex-direction:column;align-items:center;gap:1.7cqw}
.c2-evidence-reaction{width:88%;display:grid;grid-template-columns:27% 40% 27%;gap:3%;align-items:center}
.c2-evidence-reaction figure{margin:0;height:17cqw;display:flex;flex-direction:column;align-items:center;justify-content:center}
.c2-evidence-reaction figure img{width:100%;height:14.5cqw;object-fit:contain}
.c2-evidence-reaction figcaption{font:600 1.15cqw Georgia,"Times New Roman",serif}
.c2-evidence-reaction .conditions{font-size:1.15cqw;line-height:1.42}
.c2-evidence-reaction .conditions strong{font-weight:600}
.evidence-grid{width:84%;display:grid;grid-template-columns:1fr 1fr;gap:1.5cqw}
.evidence-grid>div{min-height:7.2cqw;border-top:1px solid var(--line);padding:1cqw 1.2cqw;text-align:center}
.evidence-grid strong{font-size:1.15cqw;color:var(--muted);font-weight:500}
.evidence-grid p{margin:.7cqw 0 0;font-size:1.3cqw;line-height:1.45}
.c3-divergence{width:94%;height:33cqw;display:grid;grid-template-columns:28% 1fr;grid-template-rows:1fr 1fr;column-gap:3cqw;align-items:stretch}
.c3-common{grid-row:1/3;margin:0;display:flex;align-items:center;justify-content:center}
.c3-common img{width:100%;height:28cqw;object-fit:contain}
.c3-branch{display:grid;grid-template-columns:56% 44%;gap:1cqw;align-items:center;min-width:0}
.c3-branch+.c3-branch{border-top:1px solid var(--line)}
.c3-branch .conditions{font-size:1.3cqw;line-height:1.5}
.c3-branch .conditions strong{font-weight:600}
.c3-branch .conditions small{display:block;color:var(--muted);font-size:1.05cqw}
.c3-product-slot{width:100%;height:15cqw;display:flex;align-items:center;justify-content:center;border:1px dashed #aab8cc;color:var(--blue);font:3cqw Georgia,"Times New Roman",serif}
.c3-product-slot:has(img){border-color:transparent}
.c3-product-slot img{width:100%;height:100%;object-fit:contain}
.c3-oxidation{width:88%;height:29cqw}
.c3-oxidation>img{width:100%;height:100%;object-fit:contain}
.mask-anchor{position:absolute;z-index:4;font:600 1.1cqw Georgia,"Times New Roman",serif;color:var(--muted);background:#fff;padding:.1cqw .35cqw}

.c1-reveal{width:96%;height:32cqw;display:grid;grid-template-columns:42% 56%;gap:2%;align-items:center}
.c1-reveal figure{margin:0;height:30cqw;display:flex;align-items:center;justify-content:center;position:relative}
.c1-reveal figure:first-child{border-right:1px solid var(--line);padding-right:1.4cqw}
.c1-reveal img{width:100%;height:100%;object-fit:contain}
.g1a-reveal{width:100%;height:33cqw;display:grid;grid-template-rows:13cqw 19cqw;gap:1cqw;align-items:center}
.g1a-reveal>div{height:13cqw;display:flex;align-items:center}
.g1a-reveal .reaction-row{grid-template-columns:28% 42% 26%;gap:2%}
.g1a-reveal .molecule,.g1a-reveal .aryne-reactant,.g1a-reveal .aryne-product{max-height:11.5cqw}
.g1a-reveal .conditions{font-size:1.15cqw}
.g1a-reveal figure{margin:0;height:19cqw;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding-top:.6cqw}
.g1a-reveal figure img{width:100%;height:18cqw;object-fit:contain}
.g3-reveal{width:98%;height:33cqw;display:grid;grid-template-rows:13cqw 19cqw;gap:1cqw;align-items:center}
.g3-reveal figure{margin:0;display:flex;align-items:center;justify-content:center;position:relative}
.g3-reveal figure:first-child{height:13cqw;border-bottom:1px solid var(--line);padding-bottom:.6cqw}
.g3-reveal figure:last-child{height:19cqw}
.g3-reveal img{width:100%;height:100%;object-fit:contain}
.e3-cascade{height:100%;display:grid;grid-template-rows:16cqw 18cqw;gap:.6cqw;align-items:center;justify-items:center}
.e3-cascade>[data-slot="e3-net"]{width:70%}
.e3-cascade>[data-slot="e3-mechanism"]{width:60%;min-height:18cqw}
.e3-mechanism-slot:empty{visibility:hidden}
.synthesis{width:96%;height:33cqw;display:grid;grid-template-rows:24cqw auto;gap:1.2cqw;align-items:center}
.synthesis>.figure{width:92%;height:24cqw;margin:0 auto;display:flex;align-items:center;justify-content:center}
.synthesis>.figure>img{width:100%;height:100%;object-fit:contain}
.synthesis-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:.55cqw 1.5cqw;border-top:1px solid var(--line);padding-top:.8cqw;color:#43515d;font-size:1.08cqw;line-height:1.35}
.synthesis-strip span{white-space:nowrap}
.synthesis-strip strong{color:var(--blue);font-weight:600;margin-right:.25cqw}
.f2-evidence-combined{width:96%;height:31cqw;display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;align-items:center}
.f2-evidence-combined figure{margin:0;height:29cqw;display:flex;align-items:center;justify-content:center}
.f2-evidence-combined figure:first-child{border-right:1px solid var(--line);padding-right:1.2cqw}
.f2-evidence-combined img{width:100%;height:100%;object-fit:contain}
.answer-placeholder{display:flex;align-items:center;justify-content:center;min-width:22cqw;min-height:6cqw;border:1px dashed #aab8cc;color:var(--muted);font-size:1.15cqw;line-height:1.45;text-align:center;padding:1cqw 1.5cqw}

body{display:grid;grid-template-rows:minmax(0,1fr) 36px;justify-content:normal;align-items:stretch;padding:0}
.deck{align-self:center;justify-self:center}
.utility{position:static;height:36px}
body:fullscreen{grid-template-rows:1fr}

@media(max-width:600px){.utility span{display:none}
.utility{gap:20px}
.deck{width:100vw}
.utility{height:36px}
}
@media print{body{background:white;padding-bottom:0}
.deck{width:100vw;box-shadow:none}
.utility,nav{display:none}
footer{grid-template-columns:1fr}
}