@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=ZCOOL+XiaoWei&display=swap');

:root { --ink:#f2f1eb; --muted:#a7adba; --deep:#101a2b; --deep-2:#17233a; --panel:#1d2b44; --line:rgba(221,226,227,.14); --cream:#f3f0e7; --paper:#ebe8df; --gold:#f1c76c; --coral:#ee8066; --cyan:#89d7d1; --blue:#91b9f0; --display:'ZCOOL XiaoWei','STKaiti','KaiTi',serif; --body:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; --mono:'DM Mono','SFMono-Regular',Consolas,monospace; }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-width:320px;background:var(--deep);color:var(--ink);font:15px/1.6 var(--body);overflow-x:hidden} [hidden]{display:none!important} a{color:inherit;text-decoration:none} button,input{font:inherit} button{color:inherit} button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.ambient{position:absolute;pointer-events:none;border-radius:50%;filter:blur(1px);opacity:.22}.ambient-one{width:620px;height:620px;top:-330px;right:-100px;background:radial-gradient(circle,#31506e,transparent 68%)}.ambient-two{width:520px;height:520px;top:650px;left:-350px;background:radial-gradient(circle,#226b77,transparent 70%)}
.site-header,main,.site-footer{width:min(1240px,calc(100% - 64px));margin:0 auto}.site-header{height:88px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);position:relative;z-index:2}.brand{display:flex;gap:12px;align-items:center}.brand-mark{position:relative;width:36px;height:36px;flex:0 0 36px;border:1px solid rgba(241,199,108,.7);border-radius:50%;display:grid;place-items:center;box-shadow:inset -8px -2px 0 rgba(14,24,40,.9)}.brand-mark:before,.brand-mark:after,.brand-mark span{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--gold);position:absolute}.brand-mark:before{transform:translate(-6px,-7px)}.brand-mark:after{transform:translate(6px,4px)}.brand-mark span{transform:translate(0,0)}.brand strong{display:block;font:700 17px var(--display);letter-spacing:.1em}.brand small,.kicker,.section-index,.visual-tag,.coordinate,.lab-label span,.subject,.card-footer span{font-family:var(--mono);letter-spacing:.08em}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.2em}.site-nav{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:13px}.site-nav a{transition:color .2s}.site-nav a:hover,.site-nav a.active{color:var(--ink)}
.hero{min-height:500px;display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center;padding:75px 0 62px}.kicker{color:var(--gold);font-size:10px;text-transform:uppercase;margin:0 0 22px}.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(238,128,102,.12);margin-right:7px}.slash{color:rgba(242,241,235,.3);margin:0 5px}.hero h1{font:400 clamp(56px,7vw,94px)/.99 var(--display);letter-spacing:-.06em;margin:0 0 26px}.hero h1 em{color:var(--gold);font-style:normal;position:relative;white-space:nowrap}.hero h1 em:after{content:'';height:4px;background:var(--coral);position:absolute;left:2px;right:2px;bottom:-8px;transform:rotate(-2deg);border-radius:5px}.hero-lede{max-width:480px;color:var(--muted);font-size:15px;line-height:1.8;margin:0}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:32px}.primary-button{display:inline-flex;align-items:center;gap:25px;padding:13px 17px;background:var(--gold);color:var(--deep);font-size:13px;font-weight:700;border-radius:2px;transition:transform .2s,background .2s}.primary-button:hover{transform:translateY(-3px);background:#f7d78d}.primary-button span{font-size:17px}.text-button{color:var(--ink);font-size:13px}.text-button span{color:var(--cyan);font-size:18px;margin-left:9px}.hero-lab{height:356px;position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,rgba(42,63,92,.75),rgba(14,24,40,.35));clip-path:polygon(8% 0,100% 0,100% 88%,89% 100%,0 100%,0 12%)}.lab-grid{position:absolute;inset:0;opacity:.26;background-image:linear-gradient(rgba(137,215,209,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(137,215,209,.2) 1px,transparent 1px);background-size:31px 31px;mask-image:linear-gradient(135deg,transparent 4%,#000 25%,#000 70%,transparent 96%)}.orbital{position:absolute;border:1px solid rgba(137,215,209,.45);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-22deg)}.orbit-a{width:252px;height:116px}.orbit-b{width:360px;height:174px;transform:translate(-50%,-50%) rotate(27deg);opacity:.46}.lab-orb{width:116px;height:116px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(241,199,108,.65);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 80px rgba(241,199,108,.16),inset -18px -8px 0 rgba(9,17,29,.55)}.orb-core{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbe5a8,#e09653 55%,#9e4d3e);box-shadow:0 0 32px rgba(241,199,108,.4)}.orb-ring{position:absolute;width:152px;height:48px;border:1px solid rgba(238,128,102,.72);border-radius:50%;transform:rotate(-32deg)}.lab-label{position:absolute;display:grid;gap:4px}.lab-label span{color:var(--cyan);font-size:9px}.lab-label strong{font:400 19px var(--display);color:var(--ink)}.label-top{left:27px;top:26px}.label-bottom{left:27px;bottom:25px}.label-bottom span.mini-line{width:40px;height:1px;background:var(--coral);display:block}.lab-label small{font-size:10px;color:var(--muted)}.coordinate{position:absolute;right:24px;bottom:26px;color:rgba(242,241,235,.42);font-size:9px;writing-mode:vertical-rl}
.stats-row{display:grid;grid-template-columns:120px 120px 120px 1fr;align-items:center;gap:12px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats-row div{display:flex;align-items:baseline;gap:9px}.stats-row strong{font:400 31px var(--display);color:var(--gold)}.stats-row span{font-size:10px;color:var(--muted)}.stats-row p{justify-self:end;margin:0;color:var(--muted);font-size:11px;line-height:1.7;text-align:right}
.gallery-section{padding:94px 0 110px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}.section-index{color:var(--cyan);font-size:10px;margin:0 0 13px}.section-heading h2,.about-copy h2{font:400 45px/1 var(--display);margin:0;letter-spacing:-.03em}.section-note{color:var(--muted);font-size:13px;line-height:1.7;margin:0;text-align:right}.toolbar{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:18px}.category-tabs{display:flex;gap:7px;flex-wrap:wrap}.category-tab{border:1px solid var(--line);background:transparent;color:var(--muted);padding:7px 11px;border-radius:2px;font-size:11px;cursor:pointer;transition:all .2s}.category-tab span{color:rgba(242,241,235,.42);font-family:var(--mono);font-size:9px;margin-left:6px}.category-tab:hover,.category-tab.active{background:var(--cream);border-color:var(--cream);color:var(--deep)}.category-tab.active span{color:var(--deep)}.search-box{border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center;width:235px;padding:7px 0;color:var(--muted)}.search-box span{font-size:20px;line-height:1}.search-box input{border:0;outline:0;background:transparent;color:var(--ink);width:100%;font-size:12px}.search-box input::placeholder{color:var(--muted)}
.experiment-card{background:var(--cream);color:var(--deep);display:grid;grid-template-columns:1fr 1.13fr;min-height:284px;overflow:hidden;border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.1);cursor:pointer;transition:transform .25s,box-shadow .25s}.experiment-card:hover{transform:translateY(-5px);box-shadow:0 19px 45px rgba(0,0,0,.25)}.experiment-card:focus-visible{outline:2px solid var(--gold);outline-offset:6px}.card-visual{position:relative;overflow:hidden}.featured-card .card-visual{background:#273a57}.preview-visual{background:#142337}.preview-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}.experiment-card:hover .preview-visual img{transform:scale(1.025)}.visual-tag{position:absolute;left:21px;top:18px;color:rgba(242,241,235,.64);font-size:9px}.visual-caption{position:absolute;right:22px;bottom:18px;font:10px var(--mono);letter-spacing:.08em;color:rgba(242,241,235,.58)}.card-content{padding:29px 34px 25px;display:flex;flex-direction:column}.card-meta{display:flex;align-items:center;gap:10px;margin-bottom:20px}.subject{font-size:9px;text-transform:uppercase}.subject{color:var(--coral);font-weight:700}.subject.earth{color:#3b8d8b}.subject.seasons{color:#d8a64d}.subject.chemistry{color:#7a65a6}.card-content h3{font:400 30px/1.12 var(--display);margin:0 0 12px;letter-spacing:-.02em}.card-content p{font-size:13px;line-height:1.8;color:#657182;margin:0;max-width:430px}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:23px;border-top:1px solid rgba(16,26,43,.14)}.card-footer span{color:#86909a;font-size:9px}.card-footer a{font-size:12px;font-weight:700}.card-footer b{color:var(--coral);font-size:18px;margin-left:7px;font-weight:400}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}.small-card{display:block;min-height:0}.small-card .card-visual{height:220px}.small-card .card-content{min-height:240px}.small-card .card-content h3{font-size:26px}.small-card .card-content p{font-size:12px}.dark-card{background:#1c2d42;color:var(--ink)}.dark-card .card-content p{color:#a5b0bd}.dark-card .card-footer{border-color:var(--line)}.dark-card .card-footer a{color:var(--ink)}.periodic-card{background:#e9e5f0}.refraction-card{background:#e6f0ed}.empty-state{text-align:center;color:var(--muted);padding:45px;border:1px dashed var(--line);border-radius:16px}
.optics-visual{background:radial-gradient(circle at 60% 38%,#3f5c80,#243752 70%)}.optic-axis{position:absolute;left:10%;right:8%;top:60%;border-top:1px dashed rgba(242,241,235,.5)}.optic-candle{position:absolute;left:24%;top:38%;width:24px;height:82px}.optic-candle i{position:absolute;top:0;left:8px;width:9px;height:25px;background:var(--coral);clip-path:polygon(50% 0,100% 100%,0 100%)}.optic-candle b{position:absolute;top:21px;left:5px;width:15px;height:46px;background:repeating-linear-gradient(0deg,#f3b26c 0 7px,#f2e3ba 7px 13px);border-radius:2px}.optic-candle em{position:absolute;bottom:0;left:0;width:24px;height:7px;background:#d9dee2;border-radius:50%;font-style:normal}.optic-lens{position:absolute;left:56%;top:24%;height:147px;width:35px;border:2px solid var(--cyan);border-radius:50%;background:rgba(137,215,209,.1);transform:skew(-7deg)}.optic-lens:after{content:'O';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:15px var(--mono);color:var(--cyan)}.optic-rays{position:absolute;left:27%;width:33%;border-top:1px solid rgba(241,199,108,.9);transform-origin:left center}.ray-one{top:40%;transform:rotate(13deg)}.ray-two{top:55%;transform:rotate(-1deg)}.optic-image{position:absolute;right:18%;top:48%;width:18px;height:57px;border-right:3px solid var(--coral);transform:rotate(180deg);opacity:.8}.moon-visual{background:radial-gradient(circle at 50% 45%,#304a73,#17253e 67%)}.moon-orbit{position:absolute;width:210px;height:105px;border:1px dashed rgba(137,215,209,.55);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.moon-earth{position:absolute;width:43px;height:43px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 30% 25%,#a5d4df,#3c739c 65%,#1c3559);box-shadow:0 0 22px rgba(137,215,209,.2)}.moon-dot{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--moon);left:calc(50% + 94px);top:calc(50% - 9px);box-shadow:0 0 15px rgba(245,232,180,.38)}.moon-sun{position:absolute;width:16px;height:16px;border-radius:50%;left:20%;top:19%;background:var(--gold);box-shadow:0 0 20px rgba(241,199,108,.4)}.seasons-visual{background:#142337}.season-sun{position:absolute;width:54px;height:54px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffe5a2,#f2a64d);box-shadow:0 0 34px rgba(241,199,108,.45)}.season-orbit{position:absolute;width:280px;height:115px;border:1px solid rgba(137,215,209,.55);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-15deg)}.season-earth{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--cyan);left:calc(50% - 120px);top:calc(50% + 28px);box-shadow:0 0 13px rgba(137,215,209,.5)}.season-tick{position:absolute;font:9px var(--mono);font-style:normal;color:rgba(242,241,235,.65)}.tick-spring{left:18%;top:56%}.tick-summer{left:49%;top:18%}.tick-autumn{right:15%;top:55%}.tick-winter{left:48%;bottom:13%}.periodic-visual{background:linear-gradient(145deg,#665e8f,#312e5b)}.periodic-orbit{position:absolute;border:1px solid rgba(241,240,235,.48);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-1{width:66px;height:66px}.orbit-2{width:115px;height:70px;transform:translate(-50%,-50%) rotate(60deg)}.orbit-3{width:180px;height:100px;transform:translate(-50%,-50%) rotate(-25deg)}.periodic-nucleus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font:700 21px var(--mono)}.element-chip{position:absolute;background:rgba(241,241,235,.14);border:1px solid rgba(241,241,235,.42);padding:3px 6px;color:#fff;font:10px var(--mono)}.chip-1{left:22%;top:22%}.chip-2{right:17%;top:30%}.chip-3{right:26%;bottom:18%}
.about-section{display:grid;grid-template-columns:90px 1fr 1.4fr;gap:30px;align-items:start;padding:65px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.about-mark{font-size:48px;line-height:1;color:var(--coral);padding-top:5px}.about-copy h2{font-size:39px;line-height:1.13}.about-copy h2 em{font-style:normal;color:var(--gold)}.about-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:7px}.about-steps div{border-top:1px solid var(--line);padding-top:12px}.about-steps span{display:block;font:10px var(--mono);color:var(--cyan);margin-bottom:16px}.about-steps strong{font:400 20px var(--display)}.about-steps p{color:var(--muted);font-size:11px;line-height:1.7;margin:8px 0 0}.site-footer{display:flex;justify-content:space-between;color:rgba(242,241,235,.43);font:9px var(--mono);letter-spacing:.08em;padding:26px 0 32px}.site-footer i{color:var(--gold);font-style:normal;margin-left:7px}
@media(max-width:820px){.site-header,main,.site-footer{width:min(100% - 38px,620px)}.site-header{height:75px}.site-nav a:not(.nav-pill){display:none}.hero{grid-template-columns:1fr;padding:58px 0 42px;gap:42px}.hero-lab{height:280px}.stats-row{grid-template-columns:repeat(3,1fr);gap:6px}.stats-row p{grid-column:1/-1;justify-self:start;text-align:left;margin-top:15px}.section-heading{align-items:start;gap:20px}.section-note{font-size:11px}.toolbar{align-items:stretch;flex-direction:column;gap:18px}.search-box{width:100%}.experiment-card{grid-template-columns:1fr}.featured-card .card-visual{height:235px}.card-grid{grid-template-columns:1fr}.small-card .card-visual{height:210px}.about-section{grid-template-columns:45px 1fr;gap:15px}.about-steps{grid-column:1/-1;margin-top:22px}.site-footer{flex-wrap:wrap;gap:12px}.site-footer span:nth-child(2){order:3;width:100%}}
@media(max-width:480px){.site-header,main,.site-footer{width:calc(100% - 30px)}.hero h1{font-size:56px}.hero-lab{height:250px}.label-top,.label-bottom{left:17px}.coordinate{right:14px}.section-heading h2{font-size:37px}.section-note{display:none}.card-content{padding:24px 23px}.card-content h3{font-size:27px}.about-copy h2{font-size:31px}.about-steps{grid-template-columns:1fr;gap:18px}.about-steps div{display:grid;grid-template-columns:34px 1fr}.about-steps span{grid-row:span 2;margin:0}.about-steps p{margin:2px 0 0}}
.hero-lab{border-radius:22px;clip-path:none}
.stats-row{border:1px solid var(--line);border-radius:16px;margin-bottom:24px;padding-left:22px;padding-right:22px}
.gallery-section{padding-top:70px}
.toolbar{margin-bottom:24px}
.featured-card{border-radius:20px}
.leaf-preview{background:#e8f0e2}
.leaf-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 54%;transition:transform .35s ease}
.experiment-card:hover .leaf-preview img{transform:scale(1.025)}
.about-section{margin-top:24px;border:1px solid var(--line);border-radius:18px;padding:65px 28px}
.site-footer{margin-top:24px}
.biology{color:#218d80!important}.leaf-preview{background:#e8f0e2;min-height:220px;overflow:hidden}.leaf-preview:before,.leaf-preview:after,.leaf-vein,.leaf-palisade,.leaf-spongy,.leaf-cuticle{display:none}.leaf-card{background:#f1f5eb}.leaf-card .card-content p{color:#657485}
.eye-visual{background:radial-gradient(circle at 52% 50%,#d6f0e9,#8bc7c0 45%,#2c6e78 100%)}.eye-card-shape{position:absolute;width:180px;height:92px;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid rgba(16,46,67,.65);border-radius:50% 44% 50% 44%;background:rgba(255,253,248,.36);box-shadow:inset 38px 0 0 rgba(237,116,91,.14)}.eye-card-shape:after{content:'';position:absolute;width:54px;height:54px;left:32px;top:17px;border:2px solid #43a9a2;border-radius:50%;background:rgba(67,169,162,.14)}.eye-card-ray{position:absolute;width:74px;border-top:2px solid #ed745b;left:17%;transform-origin:right center}.eye-card-ray.ray-a{top:43%;transform:rotate(10deg)}.eye-card-ray.ray-b{top:57%;transform:rotate(-10deg)}.eye-card-lens{position:absolute;left:37%;top:31%;width:19px;height:76px;border:2px solid #f5f0e6;border-radius:50%;transform:skew(-6deg)}
.kinetic-card{background:#f6f0ec}.kinetic-preview{background:#eef2f3}.kinetic-preview img{object-position:center 48%}
.flame-card{background:#e8edf0}.flame-preview{background:linear-gradient(180deg,rgba(4,12,20,.18),rgba(4,10,16,.52)),url('./焰色反应/实验室背景.png') center/cover}.preview-flame{position:absolute;left:50%;bottom:28px;width:46px;height:100px;transform:translateX(-50%);border-radius:52% 48% 46% 52%;background:radial-gradient(ellipse at 50% 79%,#fff 0 11%,#ffbed4 12% 24%,#f14279 34%,rgba(241,66,121,.16) 69%,transparent 72%);filter:drop-shadow(0 0 14px rgba(241,66,121,.9));animation:card-flame 1.3s ease-in-out infinite alternate}.preview-flame:before,.preview-flame:after{content:'';position:absolute;bottom:10px;width:31px;height:72px;border-radius:55% 45% 60% 40%;background:linear-gradient(#f76596,rgba(241,66,121,.06));filter:blur(1px)}.preview-flame:before{left:-15px;transform:rotate(-15deg)}.preview-flame:after{right:-14px;transform:rotate(16deg)}@keyframes card-flame{to{transform:translateX(-50%) scaleX(.86) scaleY(1.08);filter:drop-shadow(0 0 22px rgba(241,66,121,1))}}
.flame-cover img{object-position:center 49%}
.spring-scale-card{background:#e8edf0}.spring-scale-preview{background:#dce7ea}.spring-scale-preview img{object-position:center 48%}
.anatomy-card{background:#eaf1ec}.anatomy-card .card-visual{background:#dce8e4}.anatomy-card .card-content p{color:#60727a}