:root{--ink:#18324f;--muted:#5b7188;--blue:#2475b9;--teal:#087f8c;--orange:#d77c13;--line:#dce6ef;--navy:#142c48;--surface:#fff;font-family:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC",sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#edf3f8}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,.handle:focus-visible{outline:3px solid #007e9d;outline-offset:5px}button{transition:background .18s,box-shadow .18s,transform .18s}button:active{transform:translateY(1px)}[hidden]{display:none!important}.topbar{min-height:74px;padding:15px max(30px,calc((100vw - 1500px)/2));display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;gap:20px}.brand{display:flex;align-items:center;gap:13px;font-size:20px;font-weight:700;letter-spacing:1px}.brand>svg{width:35px;height:35px;fill:#44d0c9;stroke:#44d0c9;stroke-width:2}.brand>svg path{fill:none}.brand-light{font-weight:400;margin-left:10px;color:#c7d7e6}.top-actions{display:flex;align-items:center;gap:24px}.lesson-label{font-size:14px;color:#c2d1e0}.icon-btn{display:flex;align-items:center;gap:9px;color:#f7fbff;background:#ffffff0b;border:1px solid #ffffff29;border-radius:9px;padding:10px 14px;font-size:14px}.icon-btn svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7}.icon-btn:hover{background:#ffffff20}main{max-width:1548px;margin:auto;padding:28px 34px 14px}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow{color:#62798f;font-size:14px;letter-spacing:2px;margin-bottom:8px}h1{margin:0;font-size:38px;font-weight:750;letter-spacing:1px}h1 span{color:var(--teal)}.heading>p{font-size:19px;color:var(--muted);margin:16px 0 0}.heading strong{color:var(--ink);font-weight:600}.steps{display:flex;background:#e1eaf2;border:1px solid #d7e2ec;border-radius:13px;padding:5px;margin-bottom:20px;gap:6px}.step{flex:1;display:flex;gap:12px;justify-content:center;align-items:center;border:0;border-radius:9px;background:transparent;color:#536b81;padding:12px 14px;font-weight:700;font-size:18px}.step small{font-weight:400;font-size:14px;color:#566e83;margin-left:5px}.step-no{font-size:14px;color:#6b8197;letter-spacing:1px}.step.active{background:white;color:#126c85;box-shadow:0 2px 7px #263b5410}.step.active .step-no{background:#e5f5f7;color:#087f8c}.step-no{display:grid;place-items:center;width:33px;height:29px;border-radius:6px}.step:hover{background:#ffffff9e}.prompt-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:76px;padding:17px 22px;margin-bottom:20px;border:1px solid #d4e3ee;border-radius:12px;background:#f9fcff}.prompt-copy{display:flex;gap:14px;align-items:center;line-height:1.6}.small-tag{font-size:14px;font-weight:600;color:#157b8b;white-space:nowrap}.prompt-copy strong{font-size:18px;font-weight:600}.predictions{display:flex;gap:8px;flex-shrink:0}.predictions button{font-size:15px;background:white;color:#405c76;border:1px solid #d1deea;border-radius:8px;padding:9px 14px;white-space:nowrap}.predictions button:hover{border-color:#249aa4}.predictions button[aria-pressed=true]{background:#e2f5f5;border-color:#188c99;color:#096b75;box-shadow:inset 0 0 0 1px #188c99}.experiment-progress{color:#527088;white-space:nowrap;font-size:15px}.experiments{display:grid;grid-template-columns:1fr 1fr;gap:22px}.experiment{background:white;border:1px solid #d6e3ee;border-radius:16px;overflow:hidden;box-shadow:0 7px 24px #18324f06}.card-heading{display:flex;align-items:center;justify-content:space-between;padding:19px 23px 7px;gap:12px}.shape-name{display:flex;align-items:center;gap:11px}.panel-letter{background:#eaf3fc;color:#347caf;border-radius:8px;width:33px;height:33px;display:grid;place-items:center;font-weight:700;font-size:16px}.quad-card .panel-letter{background:#fff3df;color:#ac6814}.shape-name h2{font-size:22px;margin:0;letter-spacing:.5px}.status{font-size:14px;background:#f1f5f8;color:#687c8d;border-radius:20px;padding:6px 12px;white-space:nowrap}.status.tested{color:#156c85;background:#e7f5f8}.quad-card .status.tested{color:#996016;background:#fff2da}.scene{display:block;width:100%;height:auto;max-height:43vh;min-height:260px;overflow:visible;background:radial-gradient(ellipse at 50% 56%,#f5fafe 0,white 68%);user-select:none;-webkit-user-select:none}.scene .handle{cursor:grab;touch-action:none;outline:none}.scene .handle:active{cursor:grabbing}.scene .handle:focus-visible .handle-ring{stroke:#152e49;stroke-width:4;stroke-dasharray:5 4}.scene .handle-ring{fill:transparent;stroke-width:2;stroke-dasharray:5 5}.scene .handle:hover .handle-glow{opacity:.22}.svg-label{font-family:"Microsoft YaHei",sans-serif;font-size:17px;fill:#6d8193}.drag-label{font-size:18px;font-weight:600}.force-label{font-size:16px;font-weight:600;fill:#d97717}.ghost{opacity:.5;transition:opacity .2s}.ghost.off{opacity:0}.card-bottom{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #edf2f6;padding:15px 22px;font-size:14px;color:#677d91;flex-wrap:wrap}.key-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.triangle-dot{background:#308bb8}.quad-dot{background:#dd982f}.observation{font-size:14px;color:#526d83}.control-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 2px 12px}.condition{display:flex;gap:9px;align-items:center;font-size:14px;color:#566c80;margin:0}.condition svg{width:18px;fill:none;stroke:#637b90;stroke-width:1.6;flex-shrink:0}.divider{margin:0 13px;color:#bac6d0}.controls{display:flex;align-items:center;gap:10px}.ghost-toggle{display:flex;align-items:center;gap:9px;font-size:14px;color:#4b647b;cursor:pointer;margin-right:8px;position:relative;white-space:nowrap}.ghost-toggle input{position:absolute;left:0;opacity:0;width:35px;height:22px}.switch{width:34px;height:20px;border-radius:20px;background:#aebfce;position:relative}.switch:after{content:"";position:absolute;background:white;border-radius:50%;width:14px;height:14px;top:3px;left:3px;transition:transform .2s}.ghost-toggle input:checked+.switch{background:#168897}.ghost-toggle input:checked+.switch:after{transform:translateX(14px)}.ghost-toggle input:focus-visible+.switch{outline:3px solid #007e9d;outline-offset:3px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:8px;padding:10px 16px;font-size:15px;line-height:1.5;white-space:nowrap;font-weight:500}.secondary{background:white;border:1px solid #d1dfea;color:#35526d}.secondary:hover{background:#eaf3fa;border-color:#9ebed5}.primary{background:#117d8c;color:white;border:1px solid #117d8c}.primary:hover{background:#086975}.play-symbol{font-size:20px;line-height:1}.discussion{background:white;border:1px solid #d2e2ec;border-left:4px solid #1a939c;border-radius:12px;padding:23px 26px;margin-top:12px}.discussion-top{display:flex;align-items:center;justify-content:space-between;gap:18px}.discussion h2{font-size:21px;margin:9px 0}.discussion p{font-size:16px;color:#61778a;margin:6px 0;line-height:1.8}.conclusion{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid #e4edf3;margin-top:20px;padding-top:22px;animation:appear .3s}.conclusion-label{font-size:16px;color:#166e9e;margin-right:15px}.conclusion strong{font-size:24px;color:#176a85}.conclusion-label.orange{color:#ac6d16}.conclusion>div:nth-child(2) strong{color:#a26a23}.conclusion .think-further{grid-column:1/-1;background:#f0f7fa;border-radius:8px;padding:10px 15px;margin:0;color:#3f617c}footer{display:flex;justify-content:space-between;font-size:13px;color:#64798c;gap:20px;margin-top:14px;padding-top:12px;border-top:1px solid #dce5ed}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1700px){main{max-width:1700px}.scene{max-height:47vh}.heading h1{font-size:44px}.prompt-copy strong{font-size:21px}.card-heading h2{font-size:25px}.card-bottom,.observation,.condition,.button{font-size:17px}.step{font-size:20px}.prompt-bar{min-height:85px}}@media(max-width:1150px){main{padding:24px}.step small{display:none}.prompt-bar{flex-wrap:wrap}.heading>p{font-size:16px}.control-bar{flex-wrap:wrap}.scene{min-height:0;max-height:none}.predictions button{padding:8px 12px}.experiments{gap:16px}.card-heading{padding:16px 16px 5px}.card-heading h2{font-size:20px}.card-bottom{padding:13px 16px}.topbar{padding:15px 24px}.condition{margin-bottom:5px}}@media(max-width:700px){main{padding:20px 14px}.brand{font-size:16px;gap:8px}.brand-light{margin-left:6px}.brand>svg{width:26px}.topbar{padding:12px 16px;min-height:62px}.lesson-label{display:none}.icon-btn{padding:9px}.icon-btn span{display:none}.heading{display:block;margin-bottom:18px}h1{font-size:32px}.heading>p{margin:12px 0 0}.eyebrow{font-size:13px}.steps{gap:2px}.step{padding:10px 4px;font-size:14px;gap:5px}.step-no{width:23px;font-size:12px}.prompt-bar{padding:14px;gap:12px}.prompt-copy{gap:10px;align-items:flex-start}.prompt-copy strong{font-size:16px}.predictions{flex-wrap:wrap;gap:7px}.predictions button{font-size:14px;padding:8px 11px}.experiments{grid-template-columns:1fr}.scene{max-height:350px}.control-bar{padding-top:17px;gap:12px}.controls{flex-wrap:wrap;gap:8px}.ghost-toggle{margin-right:0}.button{padding:9px 12px;font-size:14px}.divider{margin:0 8px}.discussion{padding:18px}.discussion-top{align-items:flex-start;flex-wrap:wrap}.discussion h2{font-size:19px}.conclusion{grid-template-columns:1fr}.conclusion .think-further{grid-column:auto}footer{font-size:12px;flex-wrap:wrap;gap:7px}.card-heading h2{font-size:21px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.switch{pointer-events:none}
@media(min-width:1000px) and (min-height:951px){.scene{max-height:calc(100dvh - 650px)}}
@media(min-width:1000px) and (max-height:950px){
 .topbar{min-height:58px;padding-top:9px;padding-bottom:9px}.brand{font-size:18px}.brand>svg{width:29px;height:29px}
 main{padding-top:16px;padding-bottom:8px}.heading{margin-bottom:14px}.eyebrow{font-size:13px;margin-bottom:4px}h1{font-size:30px}.heading>p{font-size:17px;margin-top:8px}
 .steps{margin-bottom:13px;padding:4px}.step{padding:8px 10px;font-size:16px}.step small{font-size:13px}.step-no{height:26px}
 .prompt-bar{min-height:60px;padding:11px 18px;margin-bottom:14px}.prompt-copy strong{font-size:17px}.predictions button{padding:7px 12px;font-size:14px}
 .card-heading{padding:13px 20px 5px}.shape-name h2{font-size:20px}.scene{max-height:calc(100dvh - 490px);min-height:240px}.card-bottom{padding:11px 18px}
 .control-bar{padding:13px 2px 8px}.button{padding:8px 13px}footer{margin-top:8px;padding-top:9px}
}