:root{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:white;background:#0a2547;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible,canvas:focus-visible{outline:3px solid #ffd36b;outline-offset:4px}[hidden]{display:none!important}#course{position:absolute;width:1920px;height:1080px;left:50%;top:50%;transform-origin:center;overflow:hidden}.chamber{position:absolute;inset:0;background:url("/assets/background-4eca192b5e03428e.webp") center/cover no-repeat}.chamber:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00164220,transparent 65%)}header{position:absolute;left:65px;top:42px;pointer-events:none}header p{font-size:17px;letter-spacing:2px;margin:0 0 12px;color:#d7f1ff}h1{font-size:64px;line-height:1.15;letter-spacing:1px;margin:0;text-shadow:0 3px 20px #02224f80}header h2{font-size:25px;font-weight:550;margin:18px 0}.top-tools{position:absolute;right:55px;top:55px;display:flex;gap:12px}.top-tools button{border:1px solid #c0e8ffbb;color:white;background:#08407680;border-radius:36px;padding:15px 25px;font-size:23px;backdrop-filter:blur(15px)}.glass{background:linear-gradient(130deg,#1564a9aa,#082d64a8);border:1px solid #dbf3ffca;box-shadow:inset 0 1px 0 #ffffff75,0 12px 45px #05295130;backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);border-radius:26px}.controls{position:absolute;left:48px;top:235px;width:350px;padding:24px 27px 15px;z-index:3}.controls h3,.results h3{font-size:22px;letter-spacing:1px;color:#8ddfff;margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid #acd7f97a}.controls h3:not(:first-child){margin-top:27px}.switch{display:flex;align-items:center;gap:17px;padding:12px 0;border:0;background:transparent;color:inherit;font-size:21px;font-weight:550;white-space:nowrap}.switch i{position:relative;display:block;width:68px;height:37px;background:#7595b5;box-shadow:inset 0 1px 4px #14315860;border-radius:30px;flex-shrink:0;transition:background .15s}.switch i:after{content:"";position:absolute;left:5px;top:5px;width:27px;height:27px;border-radius:50%;background:#f7fcff;box-shadow:0 1px 4px #17376244;transition:transform .15s}.switch[aria-checked=true] i{background:linear-gradient(90deg,#0865fc,#02bbff)}.switch[aria-checked=true] i:after{transform:translateX(31px)}.modification{width:100%;gap:15px;margin:7px 0;font-size:20px}.modification i{width:62px;height:34px}.modification i:after{width:26px;height:26px;top:4px;left:4px}.modification[aria-checked=true] i:after{transform:translateX(28px)}.control-note{font-size:13px;line-height:1.6;color:#c2e4fc;margin:18px 0 0}.model-area{position:absolute;left:400px;top:95px;width:1090px;height:720px}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}#site-label{position:absolute;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;color:#fff;font-size:18px;padding:8px 14px;border-radius:11px;background:#06478dc9;border:1px solid #7ddcff;box-shadow:0 2px 12px #049cee60}#site-label:after{content:"";position:absolute;left:50%;height:20px;width:1px;background:#9dedff;top:100%}.results{position:absolute;right:48px;top:235px;width:390px;padding:25px 28px;z-index:3}.results .current{font-size:17px;line-height:1.6;color:#d5eafe;margin:0 0 20px}.site-tabs{display:flex;background:#00295a50;border-radius:23px;padding:4px;gap:5px}.site-tabs button{flex:1;border:0;background:transparent;color:#dcefff;border-radius:20px;padding:8px 10px;font-size:17px}.site-tabs button[aria-pressed=true]{background:#0797ef;color:white}.results h4{font-size:19px;color:#9bdfff;margin:24px 0 13px}.results strong{display:block;font-size:28px;line-height:1.5}.results #mechanism{font-size:20px;line-height:1.6;margin:14px 0 24px}.result-note{font-size:13px;color:#b9dcf7;margin:0}.scene-caption{position:absolute;top:860px;left:515px;right:470px;display:flex;justify-content:space-between;gap:20px;font-size:14px;color:#123d64}.legend{display:flex;align-items:center;gap:6px}.legend i{width:12px;height:12px;display:inline-block;border-radius:50%;margin-left:6px}.legend .c{background:#2a3038}.legend .n{background:#0873ff}.legend .cl{background:#38a85a}.legend .o{background:#ed3441}.legend .h{background:#fff}#notice{position:absolute;top:903px;left:450px;right:450px;text-align:center;color:#07386d;font-size:16px;font-weight:600}.transport{position:absolute;left:52px;right:52px;top:942px;height:95px;padding:0 30px;display:flex;align-items:center;gap:29px;border:1px solid #ffffffc9;border-radius:27px;background:linear-gradient(115deg,#edf7ffbd,#bbddff80,#edfaffae);backdrop-filter:blur(27px) saturate(150%);-webkit-backdrop-filter:blur(27px) saturate(150%);box-shadow:inset 0 1px 0 white,0 15px 45px #00275035;color:#073676}.comparison{display:flex;gap:6px;padding-right:35px;border-right:1px solid #618fc280}.comparison button{border:1px solid transparent;border-radius:28px;background:#7196bb30;color:#37628d;padding:13px 37px;font-size:22px}.comparison button[aria-pressed=true]{background:linear-gradient(135deg,#049bf5,#075ff7);border-color:white;box-shadow:0 0 8px #3da9ff;color:white}.display-switches{display:flex;gap:30px;flex:1}.outline{border:1px solid #0b9afe;background:#ffffff80;box-shadow:inset 0 1px 0 #fff;border-radius:29px;padding:13px 25px;color:#073676;font-size:21px;font-weight:600;white-space:nowrap}.outline:hover{background:#fff}footer{position:absolute;top:1050px;left:65px;right:58px;display:flex;justify-content:space-between;font-size:13px;color:#e3f6ff;text-shadow:0 1px 6px #00407f}#failure{position:absolute;left:30%;top:40%;width:40%;padding:30px;color:#602020;background:#fff;z-index:10;border-radius:20px}dialog{width:min(1180px,94vw);max-height:90vh;padding:32px;border:1px solid #c2e4ff;border-radius:27px;background:linear-gradient(135deg,#f8fcff,#e8f4ff);color:#163d64;box-shadow:0 20px 100px #001c5480}dialog::backdrop{background:#00234e70;backdrop-filter:blur(9px)}.dialog-heading{display:flex;justify-content:space-between;align-items:start}.dialog-heading small{font-size:13px;color:#468eb9}.dialog-heading h2{margin:9px 0 20px;font-size:30px}.dialog-heading button{width:38px;height:38px;border-radius:50%;border:1px solid #bad7ed;background:#fff;color:#395b78;font-size:27px}.active-explanation{background:#d6edff;border-left:4px solid #1688ea;padding:16px 22px;border-radius:9px;margin-bottom:22px}.active-explanation h3{margin:0 0 8px}.active-explanation p{margin:0;line-height:1.8}.knowledge-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.knowledge-grid article{padding:18px 22px;background:#ffffffb0;border:1px solid #d1e3f4;border-radius:15px}.knowledge-grid h3{color:#0765a7;margin:0 0 12px}.knowledge-grid p{font-size:15px;line-height:1.8;margin:8px 0}.source{font-size:12px;color:#68849d;margin-top:22px}@media(max-width:800px){.knowledge-grid{grid-template-columns:1fr}dialog{padding:20px}}

.leader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#site-label:after{display:none}

/* Frosted explanation cards, with readable secondary copy. */
.controls{left:42px;top:225px;width:422px;padding:22px 22px 18px;background:linear-gradient(130deg,#d3eaff4a,#376bab42);border-color:#e3f4ffbd;backdrop-filter:blur(30px) saturate(135%);-webkit-backdrop-filter:blur(30px) saturate(135%);box-shadow:inset 0 1px 0 #ffffffb0,0 12px 35px #05234340}
.controls h3{font-size:20px;margin:0 0 12px;padding-bottom:10px;color:#c5eeff}.controls h3:not(:first-child){margin-top:17px}
.modification{white-space:normal;align-items:flex-start;gap:12px;margin:9px 0;padding:12px;border:1px solid #d5ecff50;border-radius:15px;background:#e3f3ff10;text-align:left;transition:background .2s,border-color .2s}.modification[aria-checked=true]{background:#70bfff37;border-color:#80d2ff;box-shadow:inset 0 1px 0 #ffffff40}.modification i{width:43px;height:26px;margin-top:2px}.modification i:after{width:20px;height:20px;top:3px;left:3px}.modification[aria-checked=true] i:after{transform:translateX(17px)}.modification b{display:block;font-size:17px;line-height:1.5;font-weight:600}.modification small{display:block;font-size:14px;line-height:1.65;font-weight:400;color:#d3e9fa;margin-top:4px}.control-note{font-size:12px;margin:13px 0 0}
.results{width:358px;right:42px;top:225px;background:linear-gradient(135deg,#bddfff35,#1448796b);backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);padding:23px}.results strong{font-size:25px}.results #mechanism{font-size:18px;margin-bottom:21px}.density-panel{border-top:1px solid #c3e6ff60;padding-top:19px;margin-bottom:20px}.density-panel h5{font-size:17px;margin:0 0 18px;color:#bce9ff}.density-row{margin:0 0 17px}.density-row>div:first-child{display:flex;justify-content:space-between;font-size:16px;margin-bottom:9px}.density-row b{font-size:15px;color:#ffdf86}.density-track{height:7px;background:#08254455;border-radius:8px;overflow:hidden}.density-track i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#2975f4,#2bdbd0,#c7df66,#ffbc5b,#f87552);transition:width .35s}.density-legend{display:flex;gap:8px;align-items:center;color:#c2dded;font-size:12px}.density-legend i{height:6px;flex:1;border-radius:8px;background:linear-gradient(90deg,#2975f4,#2bdbd0,#c7df66,#ffbc5b,#f87552)}.density-panel>p{font-size:12px;color:#beddef;margin:9px 0 0}
.controls{padding:18px 20px 14px;background:linear-gradient(130deg,#446f9b80,#18396399)}.controls h3{font-size:18px;line-height:25px;padding-bottom:8px;margin-bottom:8px}.controls h3:not(:first-child){margin-top:12px}.modification{padding:8px;margin:6px 0}.modification b{font-size:16px;line-height:24px}.modification small{font-size:14px;line-height:21px;margin-top:3px}.control-note{margin-top:10px}.results{background:linear-gradient(135deg,#456f9b70,#183d6799)}

/* Split the five modification cards across the two frosted side boards. */
.controls,.results{top:235px;width:422px}.controls{padding:23px 22px}.controls h3{font-size:20px}.controls .modification{padding:14px 12px;margin:12px 0}.controls .modification small{line-height:24px}.controls h3:not(:first-child){margin-top:24px}.controls .control-note{margin-top:20px}.results{padding:20px 22px;right:42px}.right-controls h3{font-size:20px;line-height:28px;margin:0 0 9px;padding-bottom:10px}.right-controls .modification{padding:10px;margin:8px 0}.right-controls .modification small{font-size:14px;line-height:21px}.results .observation-heading{font-size:18px;margin:18px 0 12px;padding:0 0 9px}.results .current{font-size:14px;line-height:21px;margin-bottom:10px}.site-tabs{padding:3px}.site-tabs button{padding:6px;font-size:15px}.results h4{font-size:15px;margin:11px 0 5px}.results strong{font-size:23px;line-height:1.4}.results #mechanism{font-size:16px;line-height:1.5;margin:5px 0 13px}.density-panel{margin:0;padding-top:12px}.density-panel h5{font-size:15px;margin:0 0 10px}.density-row{margin-bottom:12px}.density-row>div:first-child{font-size:14px;margin-bottom:6px}.density-row b{font-size:13px}.density-panel>p{margin:7px 0 0}.result-note{display:none}
.right-controls .modification{padding:8px;margin:6px 0}.right-controls .modification b{font-size:15px}.right-controls .modification small{font-size:13px;line-height:20px}.results .observation-heading{margin-top:12px}.density-row{margin-bottom:8px}.density-panel h5{margin-bottom:8px}.results h4{margin-top:9px}

/* Warm ivory and champagne gold, from common-crystal-cells. */
:root{--ink:#332b22;--gold:#a8874f;--muted:#77674f;--line:#c9b897;color:var(--ink);background:#e9e2d7}
.chamber:after{background:linear-gradient(180deg,#fffaf01c,transparent 65%)}
header p{color:#65543b}h1{font-family:"Songti SC","STSong",serif;font-weight:900;color:#17140f;text-shadow:0 1px 8px #fff7}header h2{color:#514434}
.top-tools button{color:#514434;background:#fdfbf8b8;border-color:#d8c39bcc;box-shadow:inset 0 1px 0 #fff,0 5px 18px #59452712}
.glass,.controls,.results{color:var(--ink);background:linear-gradient(130deg,#faf8f3c9,#f5f1e6b5);border:1px solid #ffffffcc;box-shadow:0 8px 32px #5a50461a,inset 0 0 10px #ffffff80;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.controls h3,.results h3{color:#80663c;border-color:#c9b89770}
.modification{background:#fff9;border-color:#d8c39b66;color:#332b22}
.modification:hover{background:#fff9ed;box-shadow:0 3px 10px #69543516}
.modification[aria-checked=true]{background:linear-gradient(110deg,#f3e6c5dd,#e5d1a3bb);border-color:#c8a45a;box-shadow:inset 0 1px 0 #fff9,0 3px 10px #9c793414}
.modification small{color:#6d6255}.control-note{color:#77674f}
.switch i{background:#c7bfb1;box-shadow:inset 0 1px 4px #51443425}
.switch i:after{background:#fffdf8;box-shadow:0 1px 4px #5a402033}
.switch[aria-checked=true] i{background:linear-gradient(110deg,#d5b772,#a27c3a)}
.results .current{color:#6d6255}.site-tabs{background:#d9c9aa66}
.site-tabs button{color:#77674f}.site-tabs button[aria-pressed=true]{background:linear-gradient(110deg,#ecd394,#c8a45a);color:#564323;box-shadow:0 2px 8px #9c79341a}
.results h4{color:#80663c}.results strong{color:#332b22}.results #mechanism{color:#514434}
.density-panel{border-color:#c9b89780}.density-panel h5{color:#64513c}.density-row b{color:#80602f}.density-track{background:#d2c8b766}.density-legend,.density-panel>p,.result-note{color:#77674f}
#site-label{color:#332b22;background:linear-gradient(140deg,#fffef5ee,#eee9dfcc);border-color:#fffe;box-shadow:0 8px 20px #51453420,inset 0 0 10px #fff5;backdrop-filter:blur(14px)}
#leader-line{stroke:#80663c;filter:drop-shadow(0 1px 1px #fff9)}
.scene-caption{color:#514434}.legend i{box-shadow:0 0 0 1px #51443420}#notice{color:#80602f}
.transport{background:linear-gradient(115deg,#fdfbf8d9,#f5eee0bd,#fdfbf8d9);color:#332b22;border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 7px 24px #5a40201a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.comparison{border-color:#c9b89780}.comparison button{background:#d9c9aa44;color:#77674f}
.comparison button[aria-pressed=true]{background:linear-gradient(110deg,#ecd394,#c8a45a);color:#564323;border-color:#dbbb76;box-shadow:0 3px 10px #9c793429}
.outline{color:#64513c;border-color:#cabc9e;background:#fff9;box-shadow:inset 0 1px 0 #fff}.outline:hover,.top-tools button:hover{background:#fff9ed}
footer{color:#64513c;text-shadow:0 1px 5px #fff}
button:focus-visible,canvas:focus-visible{outline-color:#80602f}
dialog{background:linear-gradient(135deg,#fdfbf8,#f0e8d9);color:#332b22;border-color:#d8c39bcc;box-shadow:0 20px 100px #5a402060}
dialog::backdrop{background:#332b2255}.dialog-heading small,.source{color:#80725e}.dialog-heading button{color:#64513c;border-color:#cabc9e;background:#fff9}
.active-explanation{background:#f0e4c8;border-left-color:#a8874f}.knowledge-grid article{border-color:#dbc49a66;background:#fff9}.knowledge-grid h3{color:#80602f}

/* Four independent display switches, including cloud animation. */
.transport{gap:20px;padding:0 24px}.comparison{padding-right:22px}.comparison button{padding:13px 29px}
.display-switches{gap:22px}.display-switches .switch{font-size:19px;gap:11px}
.display-switches .switch i{width:54px;height:31px}.display-switches .switch i:after{width:23px;height:23px;left:4px;top:4px}
.display-switches .switch[aria-checked=true] i:after{transform:translateX(23px)}

/* Case 5: three numbered nitrogen sites and the reference's fused scaffold. */
.model-area{left:466px;top:225px;width:986px;height:620px}
.controls,.results{top:235px}.controls{padding:22px}.controls h3{font-size:19px;margin-bottom:8px}.controls h3:not(:first-child){margin-top:18px}.controls .modification{padding:11px 10px;margin:8px 0}.controls .modification small{line-height:22px}.controls .control-note{margin-top:15px}
.results{padding:23px}.results>h3:first-child{font-size:20px;margin-bottom:15px;padding-bottom:12px}
.baseline{padding:15px 18px;border:1px solid #d8c39b88;border-radius:16px;background:#fff9}.baseline strong{font-size:27px;color:#80602f}.baseline p{font-size:16px;line-height:1.8;margin:8px 0}.baseline small{color:#77674f;font-size:13px}
.results .observation-heading{margin:22px 0 12px}.results .current{min-height:42px}.site-tabs button{font-size:17px;padding:9px 5px}.results h4{margin-top:20px;font-size:17px}.results #trend{font-size:22px;min-height:31px}.results #mechanism{min-height:48px;font-size:16px;margin:8px 0 14px}.density-row{margin:12px 0}.density-panel h5{font-size:16px}.reaction-note{font-size:13px;color:#77674f;line-height:1.65;margin:15px 0 0;min-height:43px}
.site-markers{position:absolute;inset:0;pointer-events:none}.site-markers button{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid #a8874f;color:#6b502a;background:#fffdf4ed;font-size:19px;font-weight:700;box-shadow:0 2px 7px #53452b22}.site-markers button[aria-pressed=true]{background:#b38b42;color:white;border-color:#fff}
#site-label{font-size:16px;padding:8px 12px}.scene-caption{left:530px;right:485px;font-size:13px;gap:12px}.reading-guide{grid-column:1/-1}.source a{color:#80602f}
/* Keep the complete three-site readout above the transport at 1080p. */
.results{padding:18px 22px}.results>h3:first-child{font-size:18px;line-height:25px;padding-bottom:8px;margin-bottom:12px}
.baseline{padding:10px 14px}.baseline strong{font-size:25px;line-height:35px}.baseline p{font-size:14px;line-height:22px;margin:5px 0 0}
.results .current{margin:12px 0 8px;min-height:42px}.site-tabs button{font-size:16px;padding:6px 5px}
.results h4{margin:12px 0 4px;font-size:16px;line-height:23px}.results #mechanism{margin:5px 0 10px;line-height:24px}
.density-panel{padding-top:10px}.density-panel h5{font-size:15px;line-height:21px;margin:0 0 8px}.density-row{margin:6px 0}.density-row>div:first-child{font-size:13px;line-height:18px;margin-bottom:3px}.density-track{height:4px}.density-legend{display:none}.density-panel>p{line-height:17px;margin-top:9px}
.reaction-note{font-size:12px;line-height:19px;min-height:38px;margin:10px 0 0}