:root{--primary-yellow:#ffd400;--primary-blue:#00bfff;--primary-green:#32cd32;--accent-orange:#ff8c00;--accent-pink:#ff69b4;--bg-soft:#fff8f0;--text-dark:#2f2f37}*{box-sizing:border-box;-webkit-user-select:none;user-select:none}body{background:var(--bg-soft);color:var(--text-dark);margin:0;font-family:Segoe UI,PingFang SC,Microsoft Yahei,sans-serif;overflow:hidden}body.color-blind{filter:contrast(1.2)hue-rotate(-12deg)saturate(.9)}#app{width:100vw;height:100vh}.home-page{background:linear-gradient(#e6f8ff,#fff8f0);width:100%;height:100%;padding:64px 48px 96px;position:relative;overflow:hidden}.hero-title{text-align:center;color:#ff7f2a;text-shadow:0 0 12px #ffd40080,1px 1px #fff;font-size:clamp(28px,4vw,48px);font-weight:900;animation:1.8s ease-in-out infinite breathe}.settings-panel{background:#ffffffb8;border-radius:20px;justify-content:center;gap:18px;width:min(960px,100%);margin:18px auto 0;padding:12px 18px;display:flex;box-shadow:0 8px 16px #00000014}.toggle-item,.slider-item{align-items:center;gap:8px;font-weight:700;display:inline-flex}.slider-item input[type=range]{width:120px}.grid{grid-template-columns:repeat(2,minmax(240px,1fr));gap:64px 48px;max-width:960px;margin:60px auto 0;display:grid}.exp-card{background:linear-gradient(145deg, #fff, color-mix(in oklab, var(--card-color) 45%, white));cursor:pointer;border:none;border-radius:60px;flex-direction:column;justify-content:center;align-items:center;gap:8px;height:180px;padding:18px;transition:transform .2s ease-out;animation:2.5s ease-in-out infinite floatY;display:flex;position:relative;box-shadow:inset 0 4px 8px #ffffffb3,0 10px 20px #00000029}.exp-card strong{font-size:28px}.exp-card small{text-align:center;opacity:.88;font-size:14px}.exp-icon{font-size:54px}.exp-card:hover{transform:scale(1.06)}.exp-card.launching{transform:scale(1.45);box-shadow:0 0 16px #ffd400cc}.sky-layer{pointer-events:none;position:absolute;inset:0}.sky-layer:before,.sky-layer:after{content:"";background:#ffffff8c;border-radius:40px;width:170px;height:58px;position:absolute}.layer-1:before{animation:30s linear infinite drift1;top:90px;left:-200px}.layer-1:after{animation:24s linear infinite drift1;top:210px;left:-280px}.layer-2:before{animation:18s linear infinite drift2;top:160px;left:-160px}.layer-2:after{animation:20s linear infinite drift2;top:320px;left:-260px}.layer-3:before{animation:12s linear infinite drift3;top:130px;left:-180px}.layer-3:after{animation:14s linear infinite drift3;top:280px;left:-220px}.stars{pointer-events:none;position:absolute;inset:0}.stars span{background:#fff;border-radius:50%;width:6px;height:6px;animation:.8s ease-in-out infinite twinkle;position:absolute}.stars span:nth-child(odd){width:8px;height:8px}.stars span:first-child{animation-delay:.1s;top:10%;left:12%}.stars span:nth-child(2){animation-delay:.4s;top:15%;left:44%}.stars span:nth-child(3){animation-delay:.7s;top:18%;left:74%}.stars span:nth-child(4){animation-delay:.2s;top:26%;left:26%}.stars span:nth-child(5){animation-delay:.5s;top:32%;left:60%}.stars span:nth-child(6){animation-delay:.3s;top:36%;left:84%}.stars span:nth-child(7){animation-delay:.6s;top:42%;left:16%}.stars span:nth-child(8){animation-delay:.2s;top:46%;left:48%}.stars span:nth-child(9){animation-delay:.1s;top:50%;left:72%}.stars span:nth-child(10){animation-delay:.7s;top:56%;left:30%}.stars span:nth-child(11){animation-delay:.2s;top:58%;left:58%}.stars span:nth-child(12){animation-delay:.5s;top:60%;left:86%}.stars span:nth-child(13){animation-delay:.4s;top:66%;left:14%}.stars span:nth-child(14){animation-delay:.1s;top:68%;left:42%}.stars span:nth-child(15){animation-delay:.3s;top:72%;left:68%}.stars span:nth-child(16){animation-delay:.6s;top:74%;left:90%}.stars span:nth-child(17){animation-delay:.2s;top:79%;left:22%}.stars span:nth-child(18){animation-delay:.7s;top:82%;left:52%}.stars span:nth-child(19){animation-delay:.4s;top:86%;left:76%}.stars span:nth-child(20){animation-delay:.5s;top:90%;left:34%}.plants{height:96px;position:absolute;inset:auto 0 0}.plant{background:var(--primary-green);transform-origin:bottom;border-radius:60px 60px 0 0;width:120px;height:120px;animation:3s ease-in-out infinite sway;position:absolute;bottom:0}.plant.left{left:24px}.plant.right{animation-delay:.6s;right:24px}.exp-page{background:linear-gradient(180deg, color-mix(in oklab, var(--exp-color) 15%, #f8feff), #fff8f0);width:100%;height:100%;padding:16px 24px 96px}.top-nav{grid-template-columns:170px 1fr 230px;align-items:center;gap:16px;height:86px;display:grid}.top-nav h1{text-align:center;margin:0}.nav-actions{justify-content:flex-end;gap:10px;display:flex}.nav-btn{cursor:pointer;background:#fff;border:none;border-radius:20px;min-width:92px;height:56px;font-size:18px;position:relative;overflow:hidden;box-shadow:0 5px 10px #00000029}.exp-card{position:relative;overflow:hidden}.playground{background:#ffffffd9;border:3px solid #fff;border-radius:30px;width:min(1200px,100%);height:calc(100vh - 210px);margin:10px auto 0;position:relative;overflow:hidden;box-shadow:0 12px 24px #0000001f}.fx-canvas{z-index:3;pointer-events:none;position:absolute;inset:0}.scene-hint{z-index:3;font-size:20px;font-weight:700;position:absolute;top:16px;left:22px}.tool{z-index:4;touch-action:none;cursor:grab;background:#fff;border-radius:22px;place-items:center;width:72px;height:72px;font-size:42px;transition:transform .18s ease-out;display:grid;position:absolute;box-shadow:0 8px 16px #0000002e}.tool.dragging{cursor:grabbing;transform:none;box-shadow:0 0 0 3px #ffd40073,0 10px 16px #0003}.color-cup{width:76px;height:76px;box-shadow:none;background:0 0;border-radius:24px;font-size:0}.color-cup:before{content:"";background:linear-gradient(#ffffff73,#daf1ff38);border:3px solid #ffffffd1;border-radius:12px 12px 16px 16px;position:absolute;inset:8px 10px 10px;box-shadow:inset 0 -8px 12px #ffffff47,0 8px 12px #182b4829}.cup-handle{border:3px solid #ffffffd1;border-left:none;border-radius:0 10px 10px 0;width:16px;height:24px;position:absolute;top:20px;right:4px}.cup-liquid{--pigment:#ff6b6b;background:linear-gradient(180deg, color-mix(in oklab, var(--pigment) 78%, white), var(--pigment));border-radius:0 0 10px 10px;height:25px;position:absolute;bottom:15px;left:15px;right:18px}.cup-liquid:before{content:"";background:color-mix(in oklab, var(--pigment) 82%, white);border-radius:50%;height:8px;position:absolute;top:-5px;left:0;right:0}.color-cup.dragging{transform:rotate(-18deg)translateY(-2px)!important}#stirrer.stirring-active{transform-origin:50% 85%;animation:.42s ease-in-out infinite stirStick}#stirrer{font-size:48px}.beaker{z-index:2;background:#f7fbff0f;border:8px solid #82a9d6;border-radius:32px;width:220px;height:290px;position:absolute;top:150px;left:46%;overflow:hidden;transform:translate(-50%)}.beaker:before{content:"";pointer-events:none;background:linear-gradient(110deg,#ffffff47,#fff0);border-radius:24px;position:absolute;inset:10px 14px}.shadow-stage{z-index:2;background:radial-gradient(circle at 26% 24%,#fff9d6,#d8ecff 68%);border-radius:24px;position:absolute;inset:76px 24px 24px}.glow{box-shadow:0 0 18px #ffd76be6,0 8px 16px #0000002e}#lightTool,#toyTool{z-index:7;top:50%}.metal-ball{background:radial-gradient(circle at 30% 28%,#fff,#cfd6de 42%,#7f8a96 72%,#5a6370 100%);border:2px solid #fffc;border-radius:50%;width:74px;height:74px;box-shadow:inset -8px -10px 14px #141e2d59,inset 8px 8px 14px #fff9,0 10px 18px #18202d38}.metal-ball:before{content:"";filter:blur(1px);background:#ffffffbf;border-radius:50%;width:18px;height:10px;position:absolute;top:14px;left:18px}.optical-stage{overflow:hidden}.optical-zone{color:#ffffffeb;border:1px solid #ffffff38;border-radius:14px;justify-content:center;align-items:flex-start;padding-top:8px;font-size:13px;display:flex;position:absolute;top:54px;bottom:16px}.zone-left{background:#fff4ad1f;width:28%;left:2%}.zone-mid{background:#c2d8ff1f;width:28%;left:35%}.zone-right{background:#ffffff59;width:28%;right:2%;box-shadow:inset 0 0 0 1px #ffffff59}.shadow-test{z-index:6;color:#1f355e;opacity:0;visibility:hidden;background:#ffffffb8;border-radius:10px;min-width:280px;max-width:480px;padding:8px 10px;font-size:12px;line-height:1.4;transition:opacity .3s,visibility .3s,transform .3s;position:absolute;bottom:14px;left:14px;transform:translateY(8px)}.curtain{border-radius:22px;width:120px}.debug-tools{z-index:12;color:#213860;pointer-events:auto;background:#fffffff2;border:1px solid #20386040;border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;width:min(760px,100% - 48px);padding:10px 12px;font-size:13px;display:flex;position:absolute;top:56px;left:24px;box-shadow:0 6px 14px #1c2a3e26}.debug-tools input[type=range]{width:120px}.perf-stat{color:#ffdca8;opacity:0;visibility:hidden;min-width:180px;font-weight:700;transition:opacity .3s,visibility .3s,transform .3s;display:inline-block;transform:translateY(-8px)}.tank{z-index:2;background:linear-gradient(#9edcff,#3ea9f5);border-radius:24px;width:640px;height:360px;position:absolute;top:120px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 4px #d9f2ff,inset 0 -14px 20px #00477847}.tank:before{content:"";background:#fff9;width:100%;height:8px;animation:2.2s ease-in-out infinite waterWave;position:absolute;top:15%;left:0}.floating-item.in-water{animation:.6s ease-out splash,1.8s ease-in-out infinite bob}.floating-item{overflow:visible}.floating-item:after{content:attr(data-name);color:#22456f;white-space:nowrap;background:#ffffffdb;border-radius:8px;padding:2px 6px;font-size:11px;position:absolute;bottom:-24px;left:50%;transform:translate(-50%)}.iron-ball-item{font-size:0}.iron-ball-icon{background:radial-gradient(circle at 30% 28%,#f5f7fb,#c9d2dd 40%,#7f8a97 72%,#5a6471 100%);border:2px solid #ffffffbf;border-radius:50%;width:40px;height:40px;box-shadow:inset -6px -7px 10px #121c2a4d,inset 5px 5px 8px #ffffff73}.floating-item.is-floating{animation:.5s ease-out splash,1.4s ease-in-out infinite bob}.floating-item.is-sinking{animation:.4s ease-out splash}.floating-item.is-sunk{opacity:.92;filter:saturate(.86)}.float-debug{z-index:6;color:#fff;opacity:0;visibility:hidden;background:#00163794;border-radius:12px;min-width:280px;max-width:420px;padding:10px 12px;font-size:12px;line-height:1.45;transition:opacity .3s,visibility .3s,transform .3s;position:absolute;top:22px;right:20px;transform:translate(12px);box-shadow:0 8px 16px #0000002e}.float-controls{grid-template-columns:auto 1fr;align-items:center;gap:6px 8px;margin:6px 0;display:grid}.float-controls input[type=range]{width:100%}.float-controls select{border:none;border-radius:6px;width:100%;height:24px;padding:0 6px}.mini-btn{color:#1f2f50;cursor:pointer;background:#ffd400;border:none;border-radius:8px;height:26px;font-weight:700}.drag-debug{z-index:8;color:#fff;opacity:0;visibility:hidden;background:#0c162e9e;border-radius:10px;min-width:250px;max-width:360px;padding:8px 10px;font-size:12px;line-height:1.4;transition:opacity .3s,visibility .3s,transform .3s;position:absolute;top:58px;left:20px;transform:translateY(-8px);box-shadow:0 6px 14px #0000002e}.drag-debug.visible,.scene-debug-info.visible,.perf-stat.visible,.shadow-test.visible,.float-debug.visible{opacity:1;visibility:visible;transform:translateY(0)}.color-test-panel{z-index:8;color:#fff;background:#0e1d3a9e;border-radius:12px;min-width:280px;max-width:380px;padding:10px 12px;font-size:12px;line-height:1.4;position:absolute;top:16px;right:18px}.zone{color:#fff;z-index:2;border-radius:24px;place-items:center;width:30%;height:290px;font-size:30px;font-weight:800;display:grid;position:absolute;top:120px}.cold{background:linear-gradient(#69c9ff,#2676c9);left:3%}.normal{background:linear-gradient(#71d38d,#3da85d);left:35%}.hot{background:linear-gradient(#ffb173,#ff6c39);right:3%}.state-badge{color:#fff;z-index:3;border-radius:20px;place-items:center;width:200px;height:64px;font-size:28px;font-weight:900;display:grid;position:absolute;top:440px;left:50%;transform:translate(-50%)}.state-badge.solid{background:#3b8de5}.state-badge.liquid{background:#2eb872}.state-badge.gas{background:#ff884d;animation:1.4s ease-in-out infinite steam}.btn-wave{pointer-events:none;background:#ffffffd9;border-radius:50%;width:14px;height:14px;animation:.2s ease-out forwards btnWave;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.2)}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes floatY{0%,to{transform:translateY(-2px)}50%{transform:translateY(2px)}}@keyframes drift1{0%{transform:translate(-240px)}to{transform:translate(130vw)}}@keyframes drift2{0%{transform:translate(-280px)}to{transform:translate(130vw)}}@keyframes drift3{0%{transform:translate(-220px)}to{transform:translate(130vw)}}@keyframes twinkle{0%,to{opacity:.35}50%{opacity:1}}@keyframes sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes splash{0%{transform:scale(1)}40%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes waterWave{0%,to{opacity:.7;transform:scaleX(1)}50%{opacity:1;transform:scaleX(.94)}}@keyframes steam{0%,to{filter:blur()}50%{filter:blur(1px)}}@keyframes btnWave{to{opacity:0;transform:translate(-50%,-50%)scale(10)}}@keyframes stirStick{0%{transform:rotate(-12deg)translateY(0)}25%{transform:rotate(8deg)translateY(-1px)}50%{transform:rotate(-10deg)translateY(0)}75%{transform:rotate(10deg)translateY(-1px)}to{transform:rotate(-12deg)translateY(0)}}