:root{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#332b22;background:#e8e1d5;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,canvas:focus-visible{outline:3px solid #9e7025;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-4c551005691232fa.webp") center/cover}
header{position:absolute;left:60px;top:42px}
header p{font-size:18px;letter-spacing:2px;color:#71614c;margin:0 0 17px}
h1{font-family:"Songti SC","STSong",serif;font-size:70px;line-height:1.1;margin:0;color:#191710;letter-spacing:2px;font-weight:900}
header h2{font-size:26px;font-weight:550;margin:20px 0;color:#635039}
.top-tools{position:absolute;right:50px;top:45px;display:flex;gap:14px}
.top-tools button{border:1px solid #d3bf99;background:#fffaf0cc;color:#51422e;border-radius:35px;padding:17px 24px;font-size:22px;backdrop-filter:blur(12px)}
.glass{background:linear-gradient(130deg,#fdfbf5e5,#f5efdfc4);border:1px solid #ffffffee;border-radius:26px;box-shadow:0 12px 30px #5d4a311a,inset 0 1px 0 #fff;backdrop-filter:blur(22px)}
.selector{position:absolute;left:44px;top:250px;width:330px;padding:23px}
.selector h3,.observation>h3{font-size:26px;margin:0 0 20px;color:#705632}
#molecule-list{display:flex;flex-direction:column;gap:9px}
#molecule-list button{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;border:1px solid #d8c7a977;background:#fff9;border-radius:14px;padding:15px 16px;color:#463824;min-height:59px;font-size:21px}
#molecule-list button small{font-size:14px;color:#8a795e}
#molecule-list button[aria-pressed=true]{background:linear-gradient(110deg,#f5e5bf,#e6d0a8);border-color:#bb9758;box-shadow:inset 0 1px 0 white}
#target-tabs{display:flex;gap:6px;margin-bottom:14px;background:#d8c7a94d;border-radius:23px;padding:4px}
#target-tabs button{flex:1;border:0;background:transparent;padding:9px;color:#776348;border-radius:20px;font-size:18px}
#target-tabs button[aria-pressed=true]{background:#d6b775;color:#443418}
.heat-scale{margin-top:22px;border-top:1px solid #c4ae8655;padding-top:17px;font-size:14px;color:#816b4f}
.heat-scale>i{display:block;height:8px;margin:12px 0 7px;border-radius:10px;background:linear-gradient(90deg,#3185d3,#53cbdf,#a6dfaf,#efd57a,#f7a951)}
.heat-scale>div{display:flex;justify-content:space-between;font-size:12px}
.model-area{position:absolute;top:238px;height:595px;left:385px;width:1135px}
.model-area canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas:active{cursor:grabbing}
.nameplate{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:12px 23px;background:#fffaf0de;border:1px solid white;box-shadow:0 5px 16px #65503118;border-radius:28px;white-space:nowrap;font-size:23px}
.nameplate span{font-size:19px;color:#796548}
.orbital-tag{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:#fffcf4bb;border:1px solid #caba9988;border-radius:20px;padding:9px 18px;font-size:17px;white-space:nowrap;color:#80623d}
.observation{position:absolute;right:42px;top:250px;width:350px;padding:25px}
.focus-line{display:flex;gap:10px;align-items:center;padding-bottom:18px;border-bottom:1px solid #cfbd9d70}
.focus-line span{font-size:25px;font-weight:650}
.focus-line small{font-size:18px;color:#827155}
dl{margin:23px 0}
dt{font-size:16px;color:#947b53;margin-bottom:10px}
dd{margin:0 0 23px;font-size:23px;line-height:1.4;font-weight:550}
#explanation{font-size:18px;line-height:1.85;min-height:132px;margin:0 0 22px;color:#66543c}
#verify{width:100%;border:1px solid #cdb88f;border-radius:23px;padding:15px;font-size:21px;color:#71572e;background:linear-gradient(120deg,#ede1c8,#dfd1b7)}
#values{margin-top:18px;border-top:1px solid #d5c19b;padding-top:13px}
#value-rows>div{display:flex;align-items:center;justify-content:space-between;margin:7px 0;font-size:18px}
#value-rows b{color:#9c6c22;font-size:24px}
#comparison{font-size:17px;line-height:1.6;margin:12px 0;color:#6a5029;font-weight:650}
#values small{font-size:12px;line-height:1.6;display:block;color:#8c7b64}
#values a{font-size:12px;color:#89682f;display:block;margin-top:10px}
.qualitative{font-size:13px;line-height:1.7;color:#8c7b64;margin:20px 0 0}
.scene-caption{position:absolute;left:420px;right:430px;top:872px;display:flex;justify-content:space-between;font-size:15px;color:#6d5b43}
.scene-caption .n{color:#0b6bea}
.scene-caption .h{color:white;text-shadow:0 0 2px #615c52}
.scene-caption .cl{color:#219559}
.transport{position:absolute;left:50px;right:50px;top:950px;height:91px;padding:0 28px;display:flex;align-items:center;gap:35px;border:1px solid white;border-radius:27px;background:linear-gradient(110deg,#fffdf8ed,#f4eddfdf);box-shadow:0 8px 25px #715b3020;backdrop-filter:blur(18px)}
.transport button{border:1px solid #c8b793;background:#fff9;color:#685337;border-radius:28px;padding:13px 26px;font-size:22px;white-space:nowrap}
.modes{display:flex;gap:8px;padding-right:30px;border-right:1px solid #cbb58f88}
.modes button{border-color:transparent;background:#ded4bf55}
.modes button[aria-pressed=true]{background:linear-gradient(120deg,#efdbab,#c5a159);box-shadow:0 3px 11px #97702b22;color:#4c391c}
.transport .toggle{display:flex;gap:15px;align-items:center;border:0;background:transparent;padding:12px 0}
.toggle i{width:62px;height:35px;background:#c3baac;border-radius:22px;position:relative}
.toggle i:after{content:"";position:absolute;top:4px;left:4px;width:27px;height:27px;background:white;border-radius:50%}
.toggle[aria-checked=true] i{background:linear-gradient(110deg,#d1b16d,#a67f3b)}
.toggle[aria-checked=true] i:after{transform:translateX(27px)}
#reset-view{margin-left:auto}
footer{position:absolute;left:64px;right:57px;top:1054px;display:flex;justify-content:space-between;font-size:13px;color:#7a684f}
#course[data-mode=compare] #view-a{width:558px}
#course[data-mode=compare] #view-b{left:955px;width:558px}
#course[data-mode=compare] .nameplate{font-size:21px;padding:11px 18px}
.observation:has(#values:not([hidden])){padding:21px 24px}
.observation:has(#values:not([hidden])) dl{margin:14px 0}
.observation:has(#values:not([hidden])) dd{font-size:20px;margin-bottom:14px}
.observation:has(#values:not([hidden])) #explanation{font-size:16px;line-height:1.6;min-height:0;margin-bottom:15px}
.observation:has(#values:not([hidden])) .qualitative{display:none}
#failure{position:absolute;left:30%;top:40%;padding:30px;background:white;color:#702a20;border-radius:18px}
dialog{width:min(1100px,94vw);max-height:87vh;padding:32px;border:1px solid #d5c199;border-radius:25px;background:#faf6ed;color:#463824;overflow:auto;box-shadow:0 22px 90px #5a402060}
dialog::backdrop{background:#392e2155;backdrop-filter:blur(9px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:start}
.dialog-heading small{color:#9b7e51}
.dialog-heading h2{font-size:28px;margin:9px 0 24px}
.dialog-heading button{width:40px;height:40px;background:#fff;border:1px solid #cab895;border-radius:50%;color:#725b35;font-size:28px}
.knowledge-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.knowledge-grid article{background:#fff9;border:1px solid #dcc9a555;border-radius:15px;padding:20px}
.knowledge-grid h3{font-size:20px;margin:0 0 12px;color:#89652d}
.knowledge-grid p,.data-notes p{font-size:16px;line-height:1.85;margin:0}
.data-notes{margin-top:24px}
.data-notes p{margin-bottom:12px}
.data-notes a{font-size:14px;color:#926e36}
.data-notes li{margin:8px 0}
@media(max-width:800px){.knowledge-grid{grid-template-columns:1fr}
dialog{padding:20px}
}


#course[data-mode=compare] #molecule-list{gap:6px}
#course[data-mode=compare] #molecule-list button{min-height:48px;padding:11px 14px;font-size:20px}


.orbital-tag{left:18px;transform:none;top:14px}

.observation:has(#values:not([hidden]))>h3{margin-bottom:12px}
.observation:has(#values:not([hidden])) .focus-line{padding-bottom:12px}
.observation:has(#values:not([hidden])) dl{margin:10px 0}
.observation #values{margin-top:12px;padding-top:9px}


#course[data-mode=single] #view-a{top:188px;height:645px}

#course[data-mode=single] .nameplate{bottom:-30px}


/* Celestial theme: one centered podium or two independent, equally sized podiums. */
:root{color:#162e3e;background:#dfe6e7}

header p,header h2{color:#203d48}
h1{color:#102c3e;text-shadow:0 1px 8px #fff7}

.top-tools button{background:#fffcf1e8;border-color:#c4ac79;color:#283d45}

.glass{background:linear-gradient(125deg,#fffdf4ee,#f1f2e9e3);border:1px solid #c7ab6d;border-radius:23px;box-shadow:inset 0 0 0 3px #fff9,0 8px 24px #413e2917;backdrop-filter:blur(16px)}

.glass:before,.glass:after{content:"";position:absolute;width:26px;height:26px;border:2px solid #ceb16eaa;pointer-events:none}

.glass:before{top:6px;left:6px;border-right:0;border-bottom:0;border-radius:15px 0 0 0}
.glass:after{right:6px;bottom:6px;border-top:0;border-left:0;border-radius:0 0 15px 0}

.selector h3,.observation>h3{font-family:"Songti SC","STSong",serif;color:#143242;font-size:28px}

#molecule-list button{background:#fffc;border-color:#c9cdc288;color:#203741}

#molecule-list button small{color:#5d6868}

#molecule-list button[aria-pressed=true]{background:linear-gradient(110deg,#d8dfcb,#e5dfc2);border-color:#8c9b73;color:#183d42}

#target-tabs{background:#d1d4c255}
#target-tabs button{color:#536056}
#target-tabs button[aria-pressed=true]{background:linear-gradient(110deg,#819886,#607e78);color:white;box-shadow:inset 0 0 0 1px #c3ad75}

.heat-scale{color:#5d6b65}
.heat-scale>div{color:#59655f}

.focus-line small,dt{color:#5d6a68}
#explanation{color:#405256}

#verify{background:linear-gradient(120deg,#eeedda,#cbd5bf);color:#234b4b;border-color:#b9a56d}

#comparison{color:#294641}
#values small,.qualitative{color:#65716e}
#values a{color:#596958}

.nameplate{background:#fffaf0ef;border-color:#d5bd84;color:#18394a;box-shadow:0 3px 10px #62513719}
.nameplate span{color:#536362}

.orbital-tag{background:#fffaf0e8;border-color:#d4c29b;color:#5d6558}

.podiums{position:absolute;inset:0;pointer-events:none}
.podium{position:absolute;width:520px;height:auto;top:728px;user-select:none;pointer-events:none}

.podium-a{left:404px}
.podium-b{left:974px}
#course[data-mode=single] .podium-a{left:642px;top:691px;width:620px}
#course[data-mode=single] .podium-b{display:none}

.scene-caption{top:918px;color:#283c43;text-shadow:0 1px 3px white}

.transport{border-color:#c7ab6d;background:linear-gradient(120deg,#fffdf5ee,#f5f4e7e3);box-shadow:inset 0 0 0 3px #fff9,0 8px 24px #524b331a}

.transport button{color:#244443;border-color:#b9a56d;background:#fffaf0de}
.modes button{background:#f8f7ed88;border-color:#c6cabb}
.modes button[aria-pressed=true]{background:linear-gradient(110deg,#8ca28e,#607d75);color:white;box-shadow:inset 0 0 0 1px #c8ac68}

.toggle i{background:#bdbfbb}
.toggle[aria-checked=true] i{background:linear-gradient(110deg,#7d947c,#4f756c);box-shadow:inset 0 0 0 1px #b49c61}

footer{color:#4d6268;text-shadow:0 1px 4px #fff}

dialog{background:#f8f8ef;color:#23404b;border-color:#c7b67e}
dialog::backdrop{background:#152d3955}
.knowledge-grid h3{color:#476c5d}
.dialog-heading small,.data-notes a{color:#597f6a}

/* Portrait layout keeps equally sized comparison views and separate podiums. */
@media(max-width:900px) and (orientation:portrait){
 body{overflow:auto}
 #course{position:relative;inset:auto;width:100%;height:auto;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 8px;padding:24px 16px;transform:none;isolation:isolate}
 .chamber{z-index:-1;background-position:center top;background-size:auto 680px;background-repeat:no-repeat;background-color:#dfe6e7}
 header,.top-tools,.selector,.observation,.scene-caption,.transport,footer{position:relative;inset:auto;width:auto;grid-column:1/-1;min-width:0}
 header{grid-row:1}header p{font-size:13px;margin-bottom:10px;letter-spacing:1px}h1{font-size:35px;letter-spacing:1px}header h2{font-size:16px;line-height:1.6;margin:12px 0 0}
 .top-tools{grid-row:2;gap:10px}.top-tools button{min-height:44px;padding:10px 16px;font-size:15px}
 #course[data-mode] #view-a,#course[data-mode] #view-b{position:relative;inset:auto;width:100%;height:300px;grid-row:3;min-width:0}
 #course[data-mode=single] #view-a{grid-column:1/-1;height:350px}
 #course[data-mode=compare] #view-a{grid-column:1}#course[data-mode=compare] #view-b{grid-column:2}
 .model-area canvas{height:calc(100% - 55px)}
 #course[data-mode] .nameplate{bottom:0;font-size:16px;padding:8px 12px;gap:5px;max-width:100%;white-space:normal;flex-wrap:wrap;justify-content:center;text-align:center;width:max-content;border-radius:16px}
 .nameplate span{font-size:12px}.orbital-tag{top:0;left:0;padding:6px 8px;font-size:12px;white-space:normal;max-width:100%;border-radius:12px}
 .podiums{position:relative;inset:auto;grid-row:3;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-self:end;align-items:end;padding-bottom:20px}
 #course[data-mode] .podium{position:relative;inset:auto;width:100%;height:auto}
 #course[data-mode=single] .podium-a{grid-column:1/-1;width:min(90%,500px);justify-self:center}
 .scene-caption{grid-row:4;font-size:11px;gap:8px;flex-wrap:wrap}
 .transport{grid-row:5;height:auto;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;border-radius:20px}
 .transport button{font-size:15px;min-height:44px;padding:10px 12px}.modes{grid-column:1/-1;padding:0;border:0;gap:8px}.modes button{flex:1;min-width:0}
 .transport .toggle{gap:8px;justify-content:center;font-size:15px;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-view{margin-left:0}
 .selector{grid-row:6;padding:20px}.selector h3,.observation>h3{font-size:23px;margin-bottom:16px}
 #course[data-mode] #molecule-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
 #course[data-mode] #molecule-list button{min-height:54px;padding:10px;font-size:15px;flex-wrap:wrap;gap:3px;border-radius:12px}#molecule-list button small{font-size:12px}
 #target-tabs button{min-height:44px;font-size:16px}.heat-scale{font-size:12px;margin-top:16px;padding-top:14px}
 .observation,.observation:has(#values:not([hidden])){grid-row:7;padding:20px}.focus-line span{font-size:21px}.focus-line small{font-size:16px}dl{margin:18px 0}dt{font-size:14px}dd,.observation:has(#values:not([hidden])) dd{font-size:18px;margin-bottom:16px}
 #explanation,.observation:has(#values:not([hidden])) #explanation{font-size:16px;line-height:1.8;min-height:0;margin-bottom:18px}#verify{font-size:17px;min-height:44px;padding:12px}.qualitative{font-size:12px}
 footer{grid-row:8;flex-direction:column;gap:8px;font-size:11px;line-height:1.6}
 #failure{position:fixed;inset:25% 16px auto;z-index:10;font-size:18px}.dialog-heading h2{font-size:23px}.dialog-heading button{flex-shrink:0}
}