:root{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#fff;background:#061e43;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button,input,select{font:inherit}
button,select{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #ffdf8b;outline-offset:5px}
[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-66e9ea5543055943.webp") center/cover}
.chamber:after{content:"";position:absolute;inset:0;background:linear-gradient(#011b4330,transparent 75%)}
header{position:absolute;left:58px;top:38px}
header p{font-size:26px;letter-spacing:1px;margin:0 0 12px}
h1{font-size:74px;letter-spacing:3px;line-height:1.1;margin:0;text-shadow:0 4px 16px #00275e80}
header h2{font-size:27px;margin:14px 0;font-weight:550}
.top-tools{position:absolute;right:50px;top:40px;display:flex;gap:14px}
.top-tools button{background:#103e7780;color:white;border:1px solid #c1e7ff;border-radius:40px;padding:17px 25px;font-size:23px;backdrop-filter:blur(14px)}
.glass{background:linear-gradient(130deg,#bedcff4a,#174b8499);border:1px solid #def2ffbb;box-shadow:inset 0 1px 0 #ffffff77,0 12px 35px #03234c33;backdrop-filter:blur(24px);border-radius:23px}
.stages{position:absolute;left:44px;top:272px;width:300px;padding:26px 17px}
.eyebrow{font-size:17px;color:#c5e9ff;margin:0 0 22px 15px;letter-spacing:2px}
.stages button{display:flex;align-items:center;gap:18px;text-align:left;width:100%;border:1px solid transparent;background:transparent;color:#dceeff;font-size:25px;border-radius:13px;padding:22px 14px;margin:6px 0;min-height:72px}
.stages button b{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;border:1px solid #b2dcff;font-size:16px;flex-shrink:0}
.stages button[aria-current=step]{background:linear-gradient(100deg,#098bf9bb,#468dff33);border-color:#b9eaff;box-shadow:0 0 20px #50b5ff44;color:white}
.stages button[aria-current=step] b{background:#fff;color:#0879e1}
.stages small{display:block;text-align:center;margin:23px 0 2px;color:#b2d9ff;font-size:15px}
.model-area{position:absolute;left:345px;top:232px;width:1190px;height:574px}
canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas:active{cursor:grabbing}
#labels{position:absolute;inset:0;pointer-events:none}
#labels span{position:absolute;transform:translate(-50%,-50%);font-size:27px;font-weight:650;color:white;text-shadow:0 2px 9px #00335b;white-space:nowrap}
.explanation{position:absolute;right:42px;top:272px;width:337px;padding:23px}
.panel-title{display:flex;align-items:center;justify-content:space-between}
.panel-title h3{font-size:25px;margin:0}
.panel-title span{font-size:15px;color:#c4e2ff}
#chart{width:100%;height:185px;margin-top:22px;background:#06265166;border-radius:15px;padding:10px;overflow:visible}
#chart .axis{stroke:#7aabcb;stroke-width:1;fill:none}
#chart text{font-size:13px;fill:#b5d6f1}
#nh-curve,#hcl-curve{fill:none;stroke-width:3}
#nh-curve,#nh-dot{stroke:#5acbff;fill:none}
#hcl-curve,#hcl-dot{stroke:#61f0b8;fill:none}
#nh-dot{fill:#82dfff}
#hcl-dot{fill:#a0ffe0}
#chart-cursor{stroke:#c4e2ff88;stroke-dasharray:4 4}
.chart-legend{display:flex;flex-direction:column;gap:8px;margin:7px 0 23px;font-size:15px;color:#d5edff}
.chart-legend i{display:inline-block;width:23px;height:3px;background:#5acbff;margin-right:9px;vertical-align:middle}
.chart-legend span+span i{background:#61f0b8}
#stage-heading{font-size:24px;border-top:1px solid #bce4ff55;padding-top:22px;margin:0 0 13px}
#stage-description{font-size:19px;line-height:1.8;color:#e1efff;margin:0;min-height:135px}
.source-note{font-size:13px;color:#b4d4f3;line-height:1.6;margin-top:17px}
.view-tools{position:absolute;left:395px;right:435px;top:851px;display:flex;align-items:center;gap:30px;color:#d8eeff;font-size:17px;text-shadow:0 1px 5px #063765}
.view-tools i{display:inline-block;width:14px;height:14px;border:1px solid #c8e6ff;border-radius:50%;margin:0 4px 0 12px}
.nitrogen{background:#147aff}
.hydrogen{background:white}
.chlorine{background:#2bcb84}
.view-tools button{margin-left:auto;color:#eef9ff;background:#103d7088;border:1px solid #b0d6ed;border-radius:24px;padding:11px 21px;font-size:18px}
.transport{position:absolute;left:50px;right:50px;top:931px;height:102px;padding:0 28px;display:flex;align-items:center;gap:29px;border:1px solid white;border-radius:28px;background:linear-gradient(115deg,#eef8fff2,#badbffee);color:#073677;box-shadow:inset 0 1px 0 white,0 8px 25px #08335f40;backdrop-filter:blur(20px)}
.transport button{border:1px solid #3f9fe3;background:#fff8;color:#083b78;border-radius:28px;padding:15px 25px;font-size:22px;white-space:nowrap}
.transport .primary{background:linear-gradient(120deg,#00a7ff,#0860ed);color:white;border-color:white;min-width:143px}
.timeline{display:flex;align-items:center;gap:15px;font-size:22px;font-weight:600;flex:1;white-space:nowrap}
.timeline output{min-width:72px;font-variant-numeric:tabular-nums}
.timeline input{width:100%;min-width:100px;height:8px;accent-color:#0988fa;cursor:pointer}
.speed{display:flex;gap:12px;align-items:center;font-size:21px;white-space:nowrap}
select{background:#d2e7ff;color:#074280;border:1px solid #9fc9f1;border-radius:20px;padding:10px;font-size:20px}
.transport .toggle{display:flex;align-items:center;gap:13px;background:transparent;border:0;padding:12px 0;font-size:22px}
.toggle i{width:62px;height:35px;border-radius:20px;background:#9dacc5;position:relative}
.toggle i:after{content:"";width:27px;height:27px;background:white;border-radius:50%;position:absolute;top:4px;left:4px}
.toggle[aria-checked=true] i{background:#087ef8}
.toggle[aria-checked=true] i:after{transform:translateX(27px)}
footer{position:absolute;left:65px;right:56px;top:1050px;display:flex;justify-content:space-between;font-size:14px;color:#daefff;text-shadow:0 1px 6px #06315b}
#failure{position:absolute;inset:35% 25% auto;background:white;color:#702a25;padding:35px;font-size:25px;border-radius:20px}
dialog{width:min(1080px,92vw);max-height:86vh;overflow:auto;border:1px solid #c4e5fb;border-radius:24px;background:#edf7ff;color:#123d66;padding:32px;box-shadow:0 20px 90px #001b5799}
dialog::backdrop{background:#031c4777;backdrop-filter:blur(9px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:start}
.dialog-heading h2{font-size:30px;margin:8px 0 25px}
.dialog-heading button{border:1px solid #aac9e0;border-radius:50%;width:42px;height:42px;color:#305f87;background:white;font-size:28px}
.knowledge-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.knowledge-grid article{background:white;padding:20px 24px;border-radius:15px;border:1px solid #d6e7f6}
.knowledge-grid h3{font-size:20px;color:#13659d;margin:0 0 12px}
.knowledge-grid p{line-height:1.9;font-size:16px;margin:0}
.source{font-size:13px;line-height:1.8;color:#5c7c95}
@media(max-width:800px){.knowledge-grid{grid-template-columns:1fr}
dialog{padding:20px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}
}


/* Approved quiet-waterfall theme. Models, labels and controls remain live layers. */
:root{color:#251e24;background:#e5e0df}

.chamber:after{background:linear-gradient(#fff9f512,transparent 72%)}

h1{font-family:"Songti SC","STSong",serif;font-size:78px;font-weight:900;color:#2c1012;text-shadow:0 1px 10px #fff8}

header p,header h2{color:#322630}

.top-tools button,.view-tools button{background:#fffcf0cc;color:#2e2931;border-color:#bba589}

.glass{background:linear-gradient(130deg,#fffdf9ed,#f6efeadb);border:1px solid #bba589;border-radius:22px;box-shadow:inset 0 1px 0 white,0 10px 28px #52393213;backdrop-filter:blur(15px)}

.stages{top:246px;width:350px;padding:28px 24px}

.eyebrow{font-family:"Songti SC","STSong",serif;color:#2c2026;font-weight:750;font-size:28px;letter-spacing:0;margin:0 0 23px 9px}

.stages button{color:#28252c;border-color:#d0c5bd77;background:#fff4;padding:22px 16px;margin:9px 0;min-height:77px}

.stages button b{border-color:#b8ada4;background:#f1ede6;color:#302a2b}

.stages button[aria-current=step]{background:linear-gradient(110deg,#f6e7dd,#dac1bdbb);border-color:#a76548;color:#31191c;box-shadow:inset 0 1px 0 white}

.stages button[aria-current=step] b{background:linear-gradient(135deg,#ba3539,#870f1d);color:white;border-color:#a76344}

.stages small{color:#675961}

#labels span{color:#171d32;text-shadow:0 1px 5px #fff}

.explanation{top:246px;width:350px;padding:26px}

.panel-title h3,#stage-heading{font-family:"Songti SC","STSong",serif;color:#2c2026}

.panel-title span{color:#655a61}

#chart{height:205px;background:#d9d6cf44;border:1px solid #c9bfb677}

#chart .axis{stroke:#5d6570}
#chart text{fill:#384354}

#nh-curve,#nh-dot{stroke:#087df6}
#hcl-curve,#hcl-dot{stroke:#008959}
#nh-dot{fill:#087df6}
#hcl-dot{fill:#008959}
#chart-cursor{stroke:#67646b77}

.chart-legend{color:#343846}
.chart-legend i{background:#087df6}
.chart-legend span+span i{background:#008959}

#stage-heading{border-color:#b8ada477}
#stage-description{color:#34333e}
.source-note{color:#686773}

.view-tools{top:858px;color:#3e4650;text-shadow:0 1px 5px #fff}
.view-tools i{border-color:#94959a}

.transport{background:linear-gradient(115deg,#fffdf8ee,#f6eeeadf);color:#31222b;border-color:#bba589;box-shadow:inset 0 1px 0 white,0 8px 25px #55302b13}

.transport button{color:#34222b;border-color:#bda186;background:#fff9}

.transport .primary{background:linear-gradient(120deg,#c72f3c,#971421);border-color:#ae6b45;box-shadow:0 3px 9px #78262633;color:white}

.timeline input{accent-color:#ae2333}
select{background:#faf7f2;color:#382831;border-color:#c5b7aa}

.toggle i{background:#bcb7b2}
.toggle[aria-checked=true] i{background:linear-gradient(120deg,#c52d3b,#971c2a)}

footer{color:#685f69;text-shadow:0 1px 5px white}

button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline-color:#a93340}

dialog{border-color:#c7aea0;background:#fbf6f2;color:#352a31;box-shadow:0 20px 90px #35212655}
dialog::backdrop{background:#35242a55}

.dialog-heading button{border-color:#c9b4aa;color:#6d343a}
.knowledge-grid article{border-color:#e4d6ce}
.knowledge-grid h3{color:#8e2632}
.source{color:#76626c}

/* Portrait phones use readable document flow; landscape retains the slide. */
@media(max-width:900px) and (orientation:portrait){
 body{overflow:auto}
 #course{position:relative;inset:auto;width:100%;height:auto;min-height:100svh;display:flex;flex-direction:column;gap:14px;padding:24px 16px;transform:none;isolation:isolate}
 .chamber{z-index:-1;background-position:center top;background-size:auto 670px;background-repeat:no-repeat;background-color:#e5e0df}
 header,.top-tools,.stages,.model-area,.explanation,.view-tools,.transport,footer{position:relative;inset:auto;width:auto;flex-shrink:0}
 header{order:0}header p{font-size:14px;margin-bottom:10px}h1{font-size:36px;letter-spacing:1px}header h2{font-size:16px;line-height:1.6;margin:12px 0 0}
 .top-tools{order:1;gap:10px}.top-tools button{min-height:44px;padding:10px 16px;font-size:15px}
 .model-area{order:2;height:270px;margin:0 -8px}#labels span{font-size:16px}
 .view-tools{order:3;flex-wrap:wrap;gap:8px;font-size:12px}.view-tools i{width:9px;height:9px;margin-left:5px}.view-tools button{padding:10px 12px;font-size:14px;min-height:44px}.view-tools>span:nth-child(2){display:none}
 .transport{order:4;height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:16px;border-radius:20px}
 .transport button{font-size:16px;min-height:44px;padding:10px 14px}.transport .primary{min-width:0}
 .timeline{grid-column:1/-1;grid-row:1;gap:8px;font-size:16px;min-height:44px}.timeline output{min-width:44px}.timeline input{min-width:0;height:28px}
 .speed{justify-content:center;font-size:15px;gap:6px}select{font-size:16px;padding:9px;min-height:44px}
 .transport .toggle{font-size:15px;gap:8px;justify-content:center;padding:8px 0}.toggle i{width:46px;height:28px;flex-shrink:0}.toggle i:after{width:20px;height:20px}.toggle[aria-checked=true] i:after{transform:translateX(18px)}
 #reset{grid-column:1/-1}
 .stages{order:5;padding:18px}.eyebrow{font-size:23px;margin:0 0 14px}#stage-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .stages button{min-height:52px;padding:9px 8px;margin:0;font-size:16px;gap:8px}.stages button b{width:24px;height:24px;font-size:13px}.stages button:last-child{grid-column:1/-1}.stages small{font-size:12px;margin-top:14px}
 .explanation{order:6;padding:20px}.panel-title h3{font-size:23px}.panel-title span{font-size:12px}#chart{height:200px;margin-top:14px}.chart-legend{font-size:14px;margin-bottom:18px}#stage-heading{font-size:21px;padding-top:16px}#stage-description{font-size:16px;min-height:0}.source-note{font-size:12px}
 footer{order:7;flex-direction:column;gap:8px;font-size:11px;line-height:1.6}
 #failure{position:fixed;inset:25% 16px auto;font-size:18px;z-index:10}
 .dialog-heading h2{font-size:23px}.dialog-heading button{flex-shrink:0}
}