*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei",system-ui,sans-serif;color:#e9eef7}
#stage{position:fixed;inset:0;overflow:hidden;background:radial-gradient(130% 100% at 50% 40%,#0c1424 0%,#05070d 60%,#020306 100%)}
.layer{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.1s ease}
.layer.on{opacity:1}
#bgGlow{position:absolute;inset:-10%;background:radial-gradient(40% 35% at 30% 40%,#1b3a6b55,transparent 70%),radial-gradient(35% 30% at 72% 60%,#6b3a1b40,transparent 70%);filter:blur(30px);animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(3%,-2%) scale(1.08)}}

/* ---------- micrograph cards ---------- */
#cards{position:absolute;left:4vw;right:4vw;top:16vh;height:56vh;display:flex;gap:1.6vw;transform-origin:50% 50%;will-change:transform}
.card{margin:0;flex:1;position:relative;display:flex;flex-direction:column;transition:filter .8s,opacity .8s,transform .8s}
.imgwrap{position:relative;flex:1;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #ffffff1c,0 30px 80px -20px #000,0 0 60px -10px #3a6fd855}
.imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imgwrap .dab{clip-path:inset(0 100% 0 0)}
.imgwrap .scan{position:absolute;top:0;bottom:0;width:3px;left:0;background:#ffe9a8;box-shadow:0 0 18px 6px #ffb84a99;opacity:0}
figcaption{display:flex;justify-content:space-between;align-items:baseline;padding:1.1vh .3vw 0}
figcaption b{font-size:2.3vw;font-weight:700;letter-spacing:.02em;text-shadow:0 0 20px #6aa0ff66}
figcaption span{font-size:.95vw;color:#9fb0c8}
.stat{font-size:1vw;line-height:1.55;color:#cfe0ff;min-height:7vh;opacity:0;transition:opacity .6s}
.stat .num{font-size:2.1vw;font-weight:700;color:#ffd27a;font-variant-numeric:tabular-nums;text-shadow:0 0 18px #ffb23e88}
#big{position:absolute;inset:0;opacity:0;transition:opacity 1s}
#big img{position:absolute;left:50%;top:50%;width:100vmax;height:100vmax;margin:-50vmax 0 0 -50vmax;object-fit:cover;transform-origin:50% 50%;will-change:transform,filter}
#bigBloom{mix-blend-mode:screen;filter:blur(18px) brightness(.9);opacity:.35}
#bigMemb{opacity:0;transition:opacity 1s;filter:drop-shadow(0 0 0 #000)}
#chart{position:absolute;right:5vw;bottom:15vh;width:30vw;opacity:0;transition:opacity .8s;background:#06090fcc;border:1px solid #ffffff1a;border-radius:14px;padding:1.6vh 1.4vw;backdrop-filter:blur(6px)}
#chart h4{margin:0 0 1vh;font-size:1.05vw;color:#cfe0ff;font-weight:600}
.brow{display:grid;grid-template-columns:4vw 1fr 4.5vw;align-items:center;gap:.6vw;margin:.7vh 0;font-size:.95vw}
.btrack{height:1.5vh;background:#ffffff12;border-radius:99px;overflow:hidden;position:relative}
.bfill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#8a4b1c,#ffb23e);box-shadow:0 0 12px #ffb23e88;width:0}
.bfill.s{background:linear-gradient(90deg,#6b1c1c,#ff6a3d)}
.bval{text-align:right;font-variant-numeric:tabular-nums;color:#ffd27a}
#chart .note{font-size:.8vw;color:#8b9ab0;margin-top:1vh;line-height:1.5}

/* ---------- molecules ---------- */
#molMain{position:absolute;inset:0}
#molMain canvas{filter:saturate(1.15) contrast(1.06)}
#molSideWrap{position:absolute;right:3vw;top:15vh;width:27vw;height:42vh;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#1a2338,#070a12 75%);box-shadow:0 0 0 1px #ffffff1c,0 20px 60px -20px #000;opacity:0;transition:opacity 1s}
#molSide{position:absolute;inset:0 0 6vh 0}
.sideCap{position:absolute;left:0;right:0;bottom:0;height:6vh;padding:.6vh 1vw;font-size:.85vw;color:#b8c6dc;line-height:1.5;background:#05070dcc}

/* ---------- overlays ---------- */
#labels{pointer-events:none;opacity:1}
.lab{position:absolute;padding:.8vh 1vw;border-radius:10px;background:#05070dc4;border:1px solid #ffffff22;font-size:1.05vw;line-height:1.5;max-width:28vw;opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s;backdrop-filter:blur(4px)}
.lab.on{opacity:1;transform:none}
.lab b{color:#ffd27a;font-weight:700}
.lab i{font-style:normal;color:#8fd8ff}
.lab small{display:block;color:#93a3ba;font-size:.82vw}
.dot{display:inline-block;width:.8vw;height:.8vw;border-radius:50%;margin-right:.4vw;vertical-align:-.05vw;box-shadow:0 0 10px currentColor}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 55%,#000000c0 100%)}
#grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.07;mix-blend-mode:overlay}
#tag{position:absolute;left:3vw;top:3.2vh;font-size:.95vw;letter-spacing:.08em;padding:.5vh .9vw;border-radius:99px;border:1px solid #ffffff30;background:#05070d99;opacity:0;transition:opacity .6s}
#tag.real{color:#8fe3b0;border-color:#8fe3b066}
#tag.algo{color:#ffd27a;border-color:#ffd27a66}
#tag.sch{color:#ff9d7a;border-color:#ff9d7a66}
#chTitle{position:absolute;left:3vw;top:7.5vh;opacity:0;transition:opacity .8s,transform .8s;transform:translateY(-6px)}
#chTitle.on{opacity:1;transform:none}
#chTitle small{display:block;font-size:.9vw;color:#7f93b3;letter-spacing:.25em}
#chTitle span{font-size:2.2vw;font-weight:700;text-shadow:0 0 30px #5f8fff55}
#subs{position:absolute;left:8vw;right:8vw;bottom:6.5vh;text-align:center;pointer-events:none}
#subs span{display:inline-block;font-size:2vw;line-height:1.45;padding:.6vh 1.4vw;border-radius:10px;background:#000000a8;text-shadow:0 2px 6px #000;opacity:0;transition:opacity .25s}
#subs span.on{opacity:1}
#bar{position:absolute;left:3vw;right:3vw;bottom:2.2vh;display:flex;gap:.5vw}
.seg{flex:1;cursor:pointer;font-size:.72vw;color:#7d8ba1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg i{display:block;height:3px;border-radius:2px;background:#ffffff1f;margin-bottom:.5vh;position:relative;overflow:hidden}
.seg i em{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#5f8fff,#ffd27a);box-shadow:0 0 8px #ffd27a}
.seg.cur{color:#e9eef7}
#hint{position:absolute;right:3vw;top:3.4vh;font-size:.8vw;color:#6d7b92}
#titleCard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 1.2s;background:radial-gradient(circle,#0b1424ee,#020306f5 70%)}
#titleCard.on{opacity:1}
#titleCard .k,#start .k{font-size:1vw;letter-spacing:.35em;color:#8fa6c8}
#titleCard h1,#start h1{font-size:6vw;margin:1.5vh 0 .5vh;letter-spacing:.05em;background:linear-gradient(90deg,#9cc0ff,#fff,#ffd27a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px #5f8fff66)}
#titleCard h2,#start h2{font-size:1.7vw;font-weight:500;color:#cdd8ea;margin:0;text-align:center;line-height:1.6}
#start{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#0b1424,#020306 70%);z-index:20}
.startIn{text-align:center}
#go{margin:5vh 0 3vh;font:inherit;font-size:1.8vw;padding:1.6vh 3vw;border-radius:99px;border:1px solid #ffd27a88;color:#fff;background:linear-gradient(90deg,#1d3d7a,#7a4a1d);box-shadow:0 0 40px #ffb23e55;cursor:pointer}
#go:hover{box-shadow:0 0 60px #ffb23e99}
#start p{font-size:.95vw;color:#8b9ab0;line-height:1.8}
#explore{position:absolute;left:50%;bottom:11vh;transform:translateX(-50%);z-index:15;display:none}
#explore.on{display:block}
.exIn{display:flex;align-items:center;gap:.8vw;padding:1.2vh 1.4vw;border-radius:14px;background:#05070de6;border:1px solid #ffffff2a;font-size:.95vw;white-space:nowrap}
.exIn button{font:inherit;font-size:.9vw;padding:.6vh .9vw;border-radius:8px;border:1px solid #ffffff33;background:#ffffff0f;color:#e9eef7;cursor:pointer}
.exNote{color:#8b9ab0;font-size:.8vw}
#sources{position:absolute;inset:0;z-index:30;background:#020306ee;overflow:auto;padding:5vh 10vw}
.srcIn{max-width:1100px;margin:auto;font-size:15px;line-height:1.75;color:#c9d4e4}
.srcIn h3{color:#fff}
.srcIn li{margin:8px 0}
.srcIn code{color:#ffd27a}
#srcClose{float:right;font:inherit;padding:6px 14px;border-radius:8px;border:1px solid #ffffff44;background:#111;color:#fff;cursor:pointer}
#cv{display:block}
.paused #subs span::after{content:"  ⏸";color:#ffd27a}