:root{--ink: #17271e;--muted: #6d786f;--paper: #ece9df;--card: #fcfaf4;--line: #d6d3c8;--lime: #c9df5c;--orange: #df7c4d;--topic-color: #3f8c76;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background-color:var(--paper);background-image:radial-gradient(rgba(38,72,51,.065) 1px,transparent 1px);background-size:17px 17px}button,input{color:inherit;font:inherit}button,a{-webkit-tap-highlight-color:transparent}.practice-shell{min-height:100vh;display:grid;grid-template-rows:66px auto 1fr}.topbar{z-index:10;display:flex;align-items:center;gap:24px;padding:0 22px;border-bottom:1px solid var(--line);background:#fcfaf4f0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{min-width:240px;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font:800 10px ui-monospace,monospace}.brand-copy{display:flex;flex-direction:column}.brand-copy b{font-size:15px;letter-spacing:.08em}.brand-copy small{color:var(--muted);font-size:7px;letter-spacing:.12em}.station-title{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}.station-title i{width:7px;height:7px;border-radius:50%;background:#58a46d;box-shadow:0 0 0 4px #58a46d21}.station-title span{font-size:11px;font-weight:800}.station-title small{color:var(--muted);font:7px ui-monospace,monospace;letter-spacing:.12em}.global-progress{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 10px;padding:7px 11px;border-radius:9px;background:var(--ink);color:#fff}.global-progress span{color:#aeb9b1;font-size:7px}.global-progress b{grid-row:1 / 3;grid-column:2;color:var(--lime);font:800 16px ui-monospace,monospace}.global-progress small{color:#89978e;font-size:6px}.practice-hero{display:grid;grid-template-columns:minmax(370px,1fr) minmax(360px,1.2fr) auto;align-items:center;gap:28px;padding:15px 22px;border-bottom:1px solid var(--line)}.eyebrow{color:var(--topic-color);font:800 8px ui-monospace,monospace;letter-spacing:.15em}.practice-hero h1{margin:4px 0 0;font:700 clamp(22px,2.1vw,30px)/1.1 Georgia,"Songti SC",serif}.practice-hero>p{margin:0;color:var(--muted);font-size:10px;line-height:1.65}.level-legend{display:flex;flex-direction:column;gap:4px}.level-legend span{padding:4px 7px;border:1px solid var(--line);border-radius:999px;background:#ffffff73;color:var(--muted);font-size:7px;white-space:nowrap}.practice-layout{min-height:0;display:grid;grid-template-columns:minmax(215px,.65fr) minmax(520px,1.85fr) minmax(240px,.72fr);gap:11px;padding:11px}.panel{min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fcfaf4f7;box-shadow:0 8px 24px #24372b0f}.topic-panel,.field-panel{padding:14px;display:flex;flex-direction:column}.panel-heading{display:flex;align-items:center;gap:8px}.panel-heading>div{display:flex;flex-direction:column}.panel-heading b{font-size:12px}.panel-heading small{margin-top:2px;color:var(--muted);font-size:7px}.step{flex:none;width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;color:var(--topic-color);font:800 8px ui-monospace,monospace}.topic-list{display:flex;flex-direction:column;gap:6px;margin-top:13px}.topic-button{--topic-color: #3f8c76;width:100%;display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:9px;background:#f8f6ef;text-align:left;cursor:pointer;transition:.18s}.topic-button>span{width:25px;height:25px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--topic-color) 48%,var(--line));border-radius:50%;color:var(--topic-color);font:800 7px ui-monospace,monospace}.topic-button div{min-width:0;display:flex;flex-direction:column;gap:2px}.topic-button b{overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.topic-button small{color:var(--muted);font-size:6.5px}.topic-button i{color:var(--topic-color);font-size:13px;font-style:normal}.topic-button:hover{border-color:var(--topic-color);transform:translate(2px)}.topic-button.active{border-color:var(--topic-color);background:color-mix(in srgb,var(--topic-color) 11%,#fff);box-shadow:inset 3px 0 var(--topic-color)}.topic-button.complete>span{border-color:var(--topic-color);background:var(--topic-color);color:#fff}.principle-note{margin-top:auto;padding:11px;border-left:3px solid var(--lime);border-radius:4px 8px 8px 4px;background:#f0f1df}.principle-note b{font-size:9px}.principle-note p{margin:4px 0 0;color:#5f685e;font-size:7.5px;line-height:1.5}.workbench{display:grid;grid-template-rows:43px minmax(235px,.9fr) minmax(280px,1.1fr)}.workbench-head{display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid var(--line)}.workbench-head>div:first-child{display:flex;align-items:center;gap:8px}.workbench-head>div:first-child>span{display:flex;flex-direction:column;gap:1px}.workbench-head b{font:800 8px ui-monospace,monospace;letter-spacing:.09em}.workbench-head small{color:var(--muted);font-size:7px}.problem-dots{display:flex;gap:5px}.problem-dots button{width:25px;height:23px;padding:0;border:1px solid #d0d2cb;border-radius:7px;background:#f5f3ed;color:var(--muted);font:800 8px ui-monospace,monospace;cursor:pointer}.problem-dots button:hover{border-color:var(--topic-color)}.problem-dots button.active{border-color:var(--orange);background:#f7e7df;color:#a65235}.problem-dots button.done{border-color:var(--topic-color);background:color-mix(in srgb,var(--topic-color) 14%,#fff);color:var(--topic-color)}.problem-dots button.active.done{box-shadow:inset 0 -3px var(--orange)}.scene-card{position:relative;overflow:hidden;background:linear-gradient(155deg,color-mix(in srgb,var(--topic-color) 55%,#d3e1d9),#8caa86)}.scene-grid{position:absolute;inset:0;opacity:.38;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}.scene-illustration{position:absolute;inset:0}.diagram-object{position:absolute;left:50%;top:50%;width:min(52%,320px);height:57%;transform:translate(-50%,-46%)}.scene-caption{position:absolute;z-index:4;left:13px;bottom:12px;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:#14271dde;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.scene-caption>span{width:23px;height:23px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:50%;color:var(--lime)}.scene-caption div{display:flex;flex-direction:column;gap:2px}.scene-caption b{font:700 11px Georgia,Songti SC,serif}.scene-caption small{color:#b6c3ba;font-size:6.5px}.diagram-water .diagram-object{border:4px solid #d6e3dc;border-top:0;border-radius:0 0 55px 55px;background:linear-gradient(transparent 15%,#3a88a5cc 16%);box-shadow:inset 0 -15px 30px #135b7a40}.diagram-water .diagram-object:before{content:"120 L";position:absolute;left:50%;top:43%;color:#ecf7fa;font:800 22px ui-monospace,monospace;transform:translate(-50%,-50%)}.diagram-water i{position:absolute;top:-32px;width:6px;height:55px;border-radius:5px;background:#dfe8e2}.diagram-water i:nth-child(1){left:22%}.diagram-water i:nth-child(2){left:49%}.diagram-water i:nth-child(3){left:76%}.diagram-water i:after{content:"";position:absolute;left:-3px;bottom:-8px;width:12px;height:15px;border-radius:50% 50% 55% 45%;background:#7cc4dc;clip-path:polygon(50% 0,100% 72%,78% 100%,22% 100%,0 72%)}.diagram-energy .diagram-object{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;transform:translate(-50%,-45%) skewY(-7deg)}.diagram-energy i{border:2px solid #bbd4d1;border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 15%,rgba(199,233,225,.28) 16% 18%),linear-gradient(145deg,#244b5d,#4a8391);box-shadow:6px 9px #22423747}.diagram-energy .diagram-object:after{content:"80 kWh";position:absolute;right:-80px;top:38%;padding:9px;border-radius:50%;background:#f2c765;color:#614d22;font:800 10px ui-monospace,monospace;box-shadow:0 0 0 10px #f2c7652b}.diagram-greenhouse .diagram-object{border:4px solid rgba(231,246,236,.82);border-bottom:0;border-radius:48% 48% 0 0;background:linear-gradient(125deg,#ffffff6e,#59927d2e)}.diagram-greenhouse .diagram-object:before{content:"15 m × 6 m";position:absolute;left:50%;top:48%;padding:7px 10px;border-radius:7px;background:#173023b3;color:#fff;font:800 11px ui-monospace,monospace;transform:translate(-50%,-50%)}.diagram-greenhouse i{position:absolute;bottom:0;width:4px;height:75%;background:#e8f4edc7}.diagram-greenhouse i:nth-child(1){left:25%}.diagram-greenhouse i:nth-child(2){left:50%}.diagram-greenhouse i:nth-child(3){left:75%}.diagram-seed .diagram-object{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:7px;padding:12px;border-radius:17px;background:#415848;box-shadow:0 12px 30px #14301f47}.diagram-seed i{position:relative;border-radius:50%;background:radial-gradient(circle,#b6955c 0 9%,#765b42 11% 32%,#2f4537 34%)}.diagram-seed i:nth-child(-n+8):after{content:"";position:absolute;left:50%;top:25%;width:2px;height:35%;border-radius:2px;background:#8bc66f;transform:rotate(15deg)}.diagram-pasture .diagram-object{width:62%;height:48%;border-radius:50%;background:radial-gradient(ellipse at center,#8eae62 0 58%,#d0ba83 60% 64%,#5f8454 66%)}.diagram-pasture .diagram-object:before{content:"🐄   🐄\a      🐄    🐄";position:absolute;inset:17% 12%;color:#fff;font-size:30px;line-height:1.7;white-space:pre}.diagram-pasture i{position:absolute;left:50%;top:50%;width:1px;height:50%;background:#ffffff7a;transform-origin:top}.diagram-pasture i:nth-child(1){transform:rotate(0)}.diagram-pasture i:nth-child(2){transform:rotate(60deg)}.diagram-pasture i:nth-child(3){transform:rotate(120deg)}.diagram-pollination .diagram-object{width:64%;display:flex;align-items:flex-end;justify-content:space-between}.diagram-pollination i{position:relative;width:5px;height:58%;border-radius:4px;background:#3e7d4b}.diagram-pollination i:before{content:"✿";position:absolute;left:-15px;top:-25px;color:#f2c857;font-size:34px;text-shadow:0 1px #fff}.diagram-pollination i:nth-child(2n):before{color:#ef8a83}.diagram-pollination i:nth-child(3n):before{color:#ad8bd2}.diagram-pollination .diagram-object:after{content:"🐝";position:absolute;left:42%;top:-16%;font-size:26px;animation:bee 3.5s ease-in-out infinite}.problem-card{padding:17px 19px}.story-label{color:var(--topic-color);font:800 7px ui-monospace,monospace;letter-spacing:.15em}.story{margin:6px 0 9px;color:#56635a;font-size:10px;line-height:1.55}.problem-card h2{margin:0;font:700 18px/1.35 Georgia,Songti SC,serif}.answer-form{margin-top:15px}.answer-form>label{display:block;margin-bottom:5px;color:var(--muted);font-size:8px}.answer-form>div{display:grid;grid-template-columns:minmax(90px,1fr) auto auto;align-items:stretch}.answer-form input{min-width:0;height:43px;padding:0 12px;border:1px solid #bdc3bc;border-right:0;border-radius:8px 0 0 8px;background:#fff;font:800 18px ui-monospace,monospace;outline:0}.answer-form input:focus{border-color:var(--topic-color);box-shadow:inset 0 0 0 1px var(--topic-color)}.answer-form input:disabled{color:#607067;background:#edf0eb}.answer-form div>span{min-width:46px;display:grid;place-items:center;border-block:1px solid #bdc3bc;background:#f0eee7;color:var(--muted);font:800 9px ui-monospace,monospace}.answer-form button{padding:0 16px;border:0;border-radius:0 8px 8px 0;background:var(--ink);color:#fff;font-size:9px;font-weight:800;cursor:pointer}.answer-form button:hover{background:var(--topic-color)}.answer-form button:disabled{opacity:.45;cursor:default}.problem-actions{display:flex;justify-content:space-between;margin-top:8px}.problem-actions button{padding:6px 0;border:0;background:transparent;color:var(--topic-color);font-size:8px;font-weight:750;cursor:pointer}.problem-actions button:disabled{opacity:.4;cursor:default}.feedback{min-height:48px;display:flex;flex-direction:column;gap:3px;margin-top:7px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#f7f5ee;color:var(--muted);font-size:8px;line-height:1.45}.feedback b{color:var(--ink);font-size:9px}.feedback em{margin-top:4px;padding-top:5px;border-top:1px solid rgba(77,98,84,.14);color:#53645a;font-style:normal}.feedback.success{border-color:#9bc49d;background:#e7f2e4}.feedback.success b{color:#28633d}.feedback.error{border-color:#e0ae99;background:#f7e7df}.feedback.error b{color:#984e34}.feedback.hint{border-color:#d3c38e;background:#f5f0d9}.feedback.hint b{color:#79601e}.facts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.facts article{padding:9px;border:1px solid var(--line);border-radius:8px;background:#f8f6ef}.facts span{display:block;color:var(--muted);font-size:7px}.facts b{display:block;margin-top:3px;font:800 12px ui-monospace,monospace}.scratch-card{margin-top:11px;padding:11px;border-radius:9px;background:#eee8d7}.scratch-card>span,.decision-card>span{color:#907340;font:800 7px ui-monospace,monospace;letter-spacing:.1em}.scratch-card>b{display:block;margin-top:5px;font-size:9px}.scratch-lines{display:flex;flex-direction:column;gap:7px;margin-top:10px}.scratch-lines i{height:1px;background:#67522f2b}.decision-card{margin-top:11px;padding:11px;border-left:3px solid var(--topic-color);border-radius:5px 9px 9px 5px;background:color-mix(in srgb,var(--topic-color) 9%,#fff)}.decision-card>span{color:var(--topic-color)}.decision-card p{margin:6px 0 0;color:#536057;font-size:8px;line-height:1.5}.related-lab{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:10px 11px;border-radius:9px;background:var(--topic-color);color:#fff;text-decoration:none}.related-lab span{display:flex;flex-direction:column;gap:2px}.related-lab small{color:#ffffffa6;font-size:6px}.related-lab b{font-size:9px}.related-lab i{font-style:normal}.toast{position:fixed;z-index:90;left:50%;top:77px;padding:9px 13px;border-radius:8px;opacity:0;transform:translate(-50%,-12px);background:var(--ink);color:#fff;font-size:9px;pointer-events:none;transition:.2s;box-shadow:0 10px 30px #14271d33}.toast.show{opacity:1;transform:translate(-50%)}@keyframes bee{50%{transform:translate(55px,24px) rotate(12deg)}}@media(max-width:1050px){.practice-hero{grid-template-columns:1fr 1fr}.level-legend{grid-column:1 / -1;flex-direction:row}.practice-layout{grid-template-columns:210px 1fr}.field-panel{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:start;gap:12px}.field-panel .facts,.field-panel .scratch-card,.field-panel .decision-card,.field-panel .related-lab{margin-top:0}.field-panel .related-lab{align-self:stretch}}@media(max-width:760px){.practice-shell{display:block}.topbar{min-height:66px;padding:9px 13px;flex-wrap:wrap}.brand{min-width:0}.station-title{order:3;flex-basis:100%;justify-content:flex-start}.global-progress{margin-left:auto}.practice-hero{grid-template-columns:1fr;gap:9px;padding:14px}.level-legend{grid-column:auto;flex-direction:row;overflow-x:auto}.level-legend span{flex:none}.practice-layout{display:flex;flex-direction:column;padding:8px}.topic-list{display:grid;grid-template-columns:1fr 1fr}.principle-note{margin-top:12px}.workbench{min-height:700px;grid-template-rows:43px 245px 1fr}.problem-card{padding:15px}.field-panel{display:flex}.field-panel .facts{margin-top:13px}.field-panel .scratch-card,.field-panel .decision-card{margin-top:11px}.field-panel .related-lab{margin-top:13px}}@media(max-width:450px){.station-title small{display:none}.practice-hero h1{font-size:23px}.topic-list{grid-template-columns:1fr}.workbench{min-height:730px}.diagram-object{width:66%}.answer-form>div{grid-template-columns:minmax(70px,1fr) auto}.answer-form button{grid-column:1 / -1;height:38px;border-radius:0 0 8px 8px}.answer-form input{border-radius:8px 0 0;border-bottom:0}.answer-form div>span{border-radius:0 8px 0 0;border-bottom:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}.scene-card{min-height:310px;background:radial-gradient(ellipse at 50% 30%,#284f51,#102e32 70%)}.interactive-scene{perspective:850px;color:#def7ed}.orbit-surface{position:absolute;inset:35px 0 36px;touch-action:pan-y;cursor:grab;outline-offset:-4px}@media(pointer:fine){.orbit-surface{touch-action:none}}.orbit-surface.dragging{cursor:grabbing}.orbit-world{position:absolute;left:50%;top:52%;width:0;height:0;transform-style:preserve-3d}.ground-plane{position:absolute;left:-150px;top:-110px;width:300px;height:220px;border:1px solid #69bb9f;border-radius:12px;background:repeating-linear-gradient(0deg,transparent 0 29px,#86d9bb24 30px),repeating-linear-gradient(90deg,transparent 0 29px,#86d9bb24 30px),#315d4f;box-shadow:0 0 35px #79ecc840,0 20px 50px #0008}.solid{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--d);transform-style:preserve-3d}.face{position:absolute;display:block;background:var(--paint);border:1px solid #ffffff30;backface-visibility:visible}.face.top,.face.bottom{width:var(--w);height:var(--d)}.face.top{transform:translateZ(var(--h));filter:brightness(1.15)}.face.bottom{transform:rotateX(180deg);filter:brightness(.45)}.face.front,.face.back{width:var(--w);height:var(--h);transform-origin:top}.face.front{top:var(--d);transform:rotateX(90deg);filter:brightness(.72)}.face.back{transform:rotateX(90deg) rotateY(180deg);filter:brightness(.85)}.face.left,.face.right{width:var(--h);height:var(--d);transform-origin:left}.face.left{transform:rotateY(-90deg);filter:brightness(.65)}.face.right{left:var(--w);transform:rotateY(-90deg) rotateX(180deg);transform-origin:left center;filter:brightness(.9)}.glass .face{background:repeating-linear-gradient(90deg,#87dcc877 0 30px,#d5fff5 31px 33px);border:2px solid #a2e5d9}.solar .top{background:repeating-linear-gradient(90deg,transparent 0 12px,#b8f6ff66 13px 14px),repeating-linear-gradient(0deg,#245b8c 0 11px,#b8f6ff66 12px 13px);box-shadow:0 0 12px #74dbff44}.tank .face{background:linear-gradient(0deg,#319ac5 0 65%,#8fd5e866 66%);border:1px solid #b2efff}.sprout .top{border-radius:40%;background:#b7df78}.flower .top{border-radius:50%;box-shadow:0 0 10px var(--paint)}.scene-controls{position:absolute;left:12px;right:12px;top:10px;z-index:6;display:flex;align-items:center;gap:6px}.scene-controls span{flex:1;font:600 10px system-ui;letter-spacing:.06em;color:#9acabd}.scene-controls button{border:1px solid #81bcaa66;border-radius:6px;min-width:30px;min-height:30px;background:#163c3e;color:#e8fff5;cursor:pointer;font-size:12px}.scene-controls button:hover{background:#346359;border-color:#c7f784}.scene-note{position:absolute;right:10px;bottom:9px;font-size:8px;color:#9cc7b6;pointer-events:none}.scene-caption{pointer-events:none;bottom:30px;background:#102b2cce}.success-wave{position:absolute;inset:0;border:2px solid transparent;pointer-events:none;border-radius:inherit}.scene-solved .success-wave{animation:scene-success 1.4s ease-out both}.scene-solved .ground-plane{box-shadow:0 0 55px #b9ff7a88,0 20px 50px #0008;border-color:#d9ff8b}.feedback.success{animation:feedback-arrive .35s ease-out}@keyframes scene-success{0%{box-shadow:inset 0 0 90px #beff7855;border-color:#d8ff92}to{box-shadow:inset 0 0 0 transparent;border-color:transparent}}@keyframes feedback-arrive{0%{transform:translateY(8px);opacity:.3}to{transform:translateY(0);opacity:1}}@media(max-width:760px){.workbench{grid-template-rows:43px 310px 1fr}.scene-controls span{font-size:9px}}@media(prefers-reduced-motion:reduce){.scene-solved .success-wave,.feedback.success{animation:none}.scene-solved .success-wave{border-color:#c9ef8b}}