:root{--navy:#102449;--muted:#5e6f8d;--blue:#0967f2;--blue-soft:#edf5ff;--green:#0aa66a;--green-soft:#eaf9f3;--line:#dbe5f1;--panel:#f5f8fc;--white:#fff;--danger:#b5472b;--radius:16px;--shadow:0 14px 38px rgba(30,66,116,.08);font-family:"Microsoft YaHei UI","Noto Sans SC",Arial,sans-serif;color:var(--navy);background:#fff;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:linear-gradient(180deg,#f8fbff 0,#fff 220px);line-height:1.55}button,input,textarea{font:inherit}.topbar{height:68px;padding:0 max(24px,calc((100vw - 1440px)/2));display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.brand{display:flex;gap:12px;align-items:center;color:var(--navy);font-size:19px;font-weight:800;text-decoration:none}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;background:var(--blue);transform:rotate(45deg)}.brand-mark::first-letter{transform:rotate(-45deg)}.release{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}.page-shell{width:min(1440px,100%);margin:auto;padding:24px}.scene-rail{display:grid;grid-template-columns:repeat(4,minmax(128px,1fr)) minmax(120px,.7fr);gap:10px}.scene-chip,.future-chip{min-height:64px;border:1px solid var(--line);background:#fff;border-radius:14px;color:var(--muted);padding:8px 12px;display:flex;align-items:center;gap:10px;text-align:left}.scene-chip{cursor:pointer}.scene-chip b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--panel);color:var(--navy)}.scene-chip.active{border-color:#91bfff;background:var(--blue-soft);color:var(--blue)}.scene-chip.active b{background:var(--blue);color:#fff}.scene-chip.completed b{background:var(--green);color:#fff}.future-chip{justify-content:center}.thread-strip{margin:12px 0 18px;padding:12px 16px;border:1px solid var(--line);background:#fff;border-radius:14px;display:flex;align-items:center;gap:18px}.thread-strip>span{font-size:12px;font-weight:800;color:var(--blue);white-space:nowrap}.thread-strip ol{list-style:none;display:flex;align-items:center;gap:0;padding:0;margin:0;overflow:auto}.thread-strip li{white-space:nowrap;font-size:13px}.thread-strip li:not(:last-child)::after{content:"→";color:#9bacbf;margin:0 9px}.hero-question{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:18px}.eyebrow,.step-label{margin:0;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.04em}.hero-question h1{font-size:clamp(25px,2.3vw,38px);line-height:1.22;margin:5px 0 0;max-width:900px}.offline-seal{min-width:245px;padding:12px 16px;border:1px solid #9ed6bf;background:var(--green-soft);border-radius:14px;display:flex;flex-direction:column;color:#08724c}.offline-seal span{font-size:12px}.workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr);gap:18px;align-items:start}.experiment-column,.evidence-column{display:grid;gap:14px}.step-card,.evidence-lens,.explanation-card,.transfer-card,.knowledge-card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.step-card header,.evidence-lens header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.step-card h2,.evidence-column h2{font-size:18px;margin:2px 0}.step-number{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;flex:none}.step-number.green{background:var(--green)}.required{margin-left:auto;padding:3px 8px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:12px}.prompt{color:var(--muted);margin:0 0 14px}.disabled{opacity:.66}.sequence-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.sequence-item{min-height:94px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:10px;display:grid;place-items:center;text-align:center;cursor:pointer;color:var(--navy)}.sequence-item.selected{outline:2px solid var(--blue);background:var(--blue-soft)}.sequence-item small{display:block;color:var(--muted)}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.choice-grid label,.transfer-option{border:1px solid var(--line);border-radius:12px;padding:11px;background:#fff;cursor:pointer;min-height:48px}.choice-grid label:has(input:checked),.transfer-option:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}.primary-button,.secondary-button,.next-button{border:0;border-radius:11px;min-height:48px;padding:11px 18px;font-weight:800;cursor:pointer}.primary-button,.next-button{background:var(--blue);color:#fff;width:100%}.secondary-button{background:var(--blue-soft);color:var(--blue)}button:disabled{cursor:not-allowed;opacity:.48}.green-button{background:var(--green)}.inline-feedback{min-height:1.5em;color:var(--green);margin:8px 0 0}.fixed-conditions{display:flex;gap:10px;align-items:center;padding:9px 12px;background:var(--panel);border-radius:10px;color:var(--muted);font-size:13px;margin-bottom:14px}.fixed-conditions b{color:var(--navy)}.slider-row{display:grid;grid-template-columns:130px 1fr 70px;gap:10px;align-items:center;margin:11px 0}.slider-row output{font-variant-numeric:tabular-nums;color:var(--blue);font-weight:800}.pixel-stage,.bbox-stage,.resize-stage,.causal-stage{min-height:240px;background:var(--panel);border:1px dashed #b9cae0;border-radius:14px;margin-bottom:14px;padding:16px;position:relative;overflow:hidden}.pixel-grid{display:grid;grid-template-columns:repeat(8,1fr);width:min(360px,100%);aspect-ratio:1;margin:auto;gap:2px;background:#dce8f5;padding:2px}.pixel{border:0;min-width:0;cursor:crosshair}.pixel.active{outline:3px solid var(--blue);z-index:1}.pixel-readout,.metric-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.metric{padding:8px 10px;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:13px}.hand-scene{position:absolute;inset:18px;background:linear-gradient(135deg,#e7f1ff,#fff);border-radius:10px}.hand-shape{position:absolute;left:30%;top:16%;width:28%;height:62%;border:10px solid #799ee2;border-top:0;border-radius:18px 18px 42px 42px;opacity:.72}.reference-box,.candidate-box{position:absolute;border:3px solid var(--green);left:25%;top:12%;width:42%;height:72%}.candidate-box{border-color:var(--blue);left:29%;top:16%;width:38%;height:66%}.box-label{position:absolute;top:-26px;left:-3px;background:currentColor;color:#fff;padding:2px 6px;font-size:11px}.resize-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.resize-box{aspect-ratio:1;border:1px solid var(--line);background:#fff;border-radius:10px;display:grid;place-items:center;overflow:hidden;position:relative}.gesture-silhouette{width:38%;height:72%;background:#7da3ea;border-radius:22px 22px 38px 38px}.resize-box.stretch .gesture-silhouette{width:55%;height:84%}.resize-box.letterbox::before,.resize-box.letterbox::after{content:"";position:absolute;left:0;right:0;height:20%;background:#dce4ef}.resize-box.letterbox::before{top:0}.resize-box.letterbox::after{bottom:0}.causal-stage{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:8px}.causal-node{text-align:center;padding:16px 6px;background:#fff;border:1px solid var(--line);border-radius:12px}.causal-node strong{display:block;color:var(--blue);font-size:20px}.evidence-meta{display:flex;flex-wrap:wrap;gap:8px}.evidence-meta span{font-size:11px;padding:4px 7px;background:var(--panel);border-radius:999px;color:var(--muted)}.boundary-note{margin:12px 0 0;color:var(--danger);font-size:13px}.knowledge-card{padding:0;overflow:hidden}.knowledge-card summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:12px}.knowledge-card summary::-webkit-details-marker{display:none}.knowledge-card summary small,.knowledge-card summary strong{display:block}.knowledge-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--blue-soft);color:var(--blue);font-size:22px}.open-label{margin-left:auto;color:var(--blue);font-size:12px}.knowledge-body{border-top:1px solid var(--line);padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.knowledge-body section{padding:12px;background:var(--panel);border-radius:12px}.knowledge-body h3{font-size:13px;margin:0 0 6px}.knowledge-body p{margin:0;color:var(--muted);font-size:14px}.knowledge-body code{white-space:normal;color:var(--blue)}.knowledge-body .interview-answer{grid-column:1/-1;background:var(--green-soft)}.term-list{display:flex;flex-wrap:wrap;gap:6px}.term-list span{padding:3px 8px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:12px}.evidence-lens label,.explanation-card label{display:grid;gap:6px;font-size:13px;font-weight:800;margin:12px 0}.evidence-lens input,.evidence-lens textarea,.explanation-card input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--navy);background:#fff}.evidence-lens input[readonly]{background:var(--panel)}.transfer-card{background:linear-gradient(135deg,#f2fbf7,#fff)}.transfer-card>p:not(.step-label){color:var(--muted)}#transfer-options{display:grid;gap:8px;margin:12px 0}.transfer-option{display:flex;gap:8px;align-items:center}.grading-feedback{margin-top:12px;padding:12px;border-radius:10px;background:var(--panel);font-size:14px}.grading-feedback.success{background:var(--green-soft);color:#08724c}.next-button{background:var(--navy)}footer{width:min(1440px,100%);margin:22px auto;padding:18px 24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}
@media(max-width:900px){.page-shell{padding:14px}.topbar{height:60px;padding:0 14px}.brand{font-size:16px}.release{font-size:0}.release::after{content:"本地候选";font-size:12px}.scene-rail{display:flex;overflow:auto}.scene-chip{min-width:92px;display:grid;justify-items:center;text-align:center}.scene-chip span{font-size:11px}.future-chip{min-width:100px}.thread-strip{align-items:flex-start}.thread-strip ol{padding-bottom:4px}.hero-question{display:grid}.hero-question h1{font-size:27px}.offline-seal{min-width:0}.workspace{grid-template-columns:1fr}.sequence-list{grid-template-columns:1fr 1fr}.knowledge-body{grid-template-columns:1fr}.knowledge-body .interview-answer{grid-column:auto}.evidence-column{display:contents}.evidence-lens{order:1}.explanation-card{order:2}.transfer-card{order:3}.next-button{order:4}.resize-compare{grid-template-columns:1fr 1fr}footer{display:grid}}
@media(max-width:520px){.page-shell{padding:10px}.scene-rail{gap:7px}.scene-chip{min-width:78px;padding:6px}.thread-strip{display:grid;gap:6px}.hero-question h1{font-size:24px}.step-card,.evidence-lens,.explanation-card,.transfer-card{padding:15px}.sequence-list{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr}.causal-stage{grid-template-columns:1fr 1fr;min-height:auto}.slider-row{grid-template-columns:110px 1fr 52px}.knowledge-card summary{padding:14px}.open-label{display:none}.resize-compare{gap:7px}}
@media(prefers-reduced-motion:no-preference){.step-card,.knowledge-card{animation:rise .32s ease both}@keyframes rise{from{transform:translateY(5px);opacity:.4}to{transform:none;opacity:1}}}
.manual-box{position:absolute;border:3px solid var(--blue);left:22%;top:16%;width:40%;height:66%}.edge-handle{position:absolute;left:-8px;top:42%;width:14px;height:34px;border-radius:7px;background:var(--blue)}.micro-instruction,.micro-question,.rule-line{font-size:13px;color:var(--muted)}.comparison-board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.comparison-board div{display:grid;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.comparison-board small{color:var(--muted)}.comparison-board b{color:var(--blue)}.threshold-lab,.padding-lab,.contract-lab,.geometry-proof{margin-top:14px;padding:14px;border-radius:12px;background:var(--panel)}.candidate-list{display:grid;gap:6px}.candidate-list span{display:flex;justify-content:space-between;padding:7px 10px;border-radius:8px;background:var(--green-soft)}.candidate-list span.rejected{background:#f3f4f7;color:#8591a5}.contract-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.contract-grid span{display:grid;padding:8px;border-radius:8px;background:#fff;font-size:12px}.padding-options button,.mismatch-options button{border:1px solid var(--line);background:#fff;border-radius:10px;min-height:48px;cursor:pointer}.padding-options button.selected,.mismatch-options button.selected{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
@media(max-width:520px){.comparison-board{grid-template-columns:1fr 1fr}.contract-grid{grid-template-columns:1fr 1fr}}

.beginner-bridge{margin:0 0 18px;padding:18px 20px;border:1px solid #b7d4fa;background:linear-gradient(135deg,#eef6ff,#fff);border-radius:16px}.beginner-bridge h2{margin:3px 0 12px;font-size:19px}.beginner-bridge ol{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;margin:0;padding:0}.beginner-bridge li{display:grid;gap:2px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px}.beginner-bridge li b{color:var(--blue)}.beginner-bridge li span,.beginner-bridge>p{color:var(--muted);font-size:13px}.beginner-bridge>p{margin:10px 0 0}.term-bridge{margin:0 0 18px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}.term-bridge summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}.term-bridge summary>span:first-child{font-size:12px;color:var(--blue);font-weight:800}.term-bridge summary strong{font-size:14px}.term-bridge-body,#term-bridge-body{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px}.term-definition{padding:10px 12px;border-radius:10px;background:var(--panel)}.term-definition b{display:block;color:var(--navy);font-size:13px}.term-definition span{font-size:12px;color:var(--muted)}.change-gate{display:grid;gap:8px;margin:10px 0;padding:12px;border:1px solid #b7d4fa;background:#f6faff;border-radius:12px}.change-gate>strong{font-size:13px}.change-status{font-size:12px;color:var(--danger)}.change-status.ready{color:var(--green);font-weight:800}.sentence-help{padding:9px 11px;border-left:3px solid var(--blue);background:var(--blue-soft);color:var(--muted);font-size:13px}.sequence-item .given-number{display:none}
.operation-card.prediction-gated .fixed-conditions,.operation-card.prediction-gated #operation-control,.operation-card.prediction-gated #run-experiment{display:none}.operation-card.prediction-gated::after{content:"先完成并锁定第一次预测，实验条件和结果随后揭示";display:grid;place-items:center;min-height:120px;padding:18px;border:1px dashed #b9cae0;border-radius:12px;background:var(--panel);color:var(--muted);font-size:14px;text-align:center}

@media(max-width:900px){.beginner-bridge ol{grid-template-columns:1fr 1fr}.term-bridge-body,#term-bridge-body{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.beginner-bridge{padding:14px}.beginner-bridge ol,.term-bridge-body,#term-bridge-body{grid-template-columns:1fr}.term-bridge summary{align-items:flex-start;flex-wrap:wrap}.term-bridge .open-label{display:block;margin-left:0}}

/* P410: the causal model is visible as an experiment canvas, not a paragraph. */
.visual-lab{margin:0 0 18px;padding:20px;border:1px solid #cbdcf1;border-radius:16px;background:#fff;box-shadow:0 18px 48px rgba(34,78,132,.07)}
.visual-lab>header{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:16px}.visual-lab h2{margin:3px 0 0;font-size:20px}
.visual-legend{display:flex;gap:14px;color:var(--muted);font-size:12px}.visual-legend span{display:flex;align-items:center;gap:6px}.visual-legend i{width:9px;height:9px;border-radius:3px;background:var(--blue)}.visual-legend .legend-process{background:#86a7d8}.visual-legend .legend-evidence{background:var(--green)}
.visual-lab-canvas{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:10px;min-height:210px;padding:18px;border:1px dashed #a9c5e8;border-radius:14px;background:linear-gradient(145deg,#f3f8ff,#fff)}
.visual-node{min-height:156px;padding:14px 10px;border:1px solid #cbdcf1;border-radius:14px;background:#fff;display:grid;grid-template-rows:74px auto auto;place-items:center;text-align:center;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.visual-node svg{width:64px;height:64px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.visual-node strong{font-size:16px}.visual-node small{color:var(--muted);font-size:12px}.visual-node.active{border-color:var(--blue);box-shadow:0 8px 24px rgba(9,103,242,.18);transform:translateY(-3px)}.visual-node.evidence.active{border-color:var(--green);box-shadow:0 8px 24px rgba(10,166,106,.18)}.visual-node.evidence svg{stroke:var(--green)}
.visual-arrow{display:grid;place-items:center;color:#7791b5}.visual-arrow svg{width:32px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.visual-replay{display:grid;grid-template-columns:48px 1fr minmax(260px,auto);align-items:center;gap:14px;margin-top:14px}.visual-play{width:48px;height:48px;border-radius:50%;border:1px solid #bad0ec;background:#f4f8fe;color:var(--blue);display:grid;place-items:center;cursor:pointer}.visual-play svg{width:22px;fill:currentColor}.replay-track{height:6px;background:#e5edf7;border-radius:999px;display:flex;justify-content:space-between;align-items:center}.replay-track span{width:18px;height:18px;border-radius:50%;border:3px solid #d8e5f4;background:#fff;transition:.2s}.replay-track span.active{border-color:var(--blue);background:var(--blue)}.visual-replay p{margin:0;color:var(--muted);font-size:13px}
.sequence-icon{width:46px!important;height:46px!important;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}.sequence-item>span{display:grid;justify-items:center;gap:2px}
@media(max-width:900px){.visual-lab>header{display:grid;align-items:start}.visual-legend{flex-wrap:wrap}.visual-lab-canvas{grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr;gap:5px;padding:10px}.visual-node{min-height:132px;padding:10px 5px}.visual-node svg{width:52px;height:52px}.visual-node strong{font-size:14px}.visual-replay{grid-template-columns:48px 1fr}.visual-replay p{grid-column:1/-1}}
@media(max-width:520px){.visual-lab{padding:14px}.visual-lab-canvas{grid-template-columns:1fr 1fr;gap:8px}.visual-arrow{display:none}.visual-node{min-height:128px}.visual-replay{grid-template-columns:44px 1fr}.visual-play{width:44px;height:44px}}
.knowledge-body .knowledge-visual{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:12px;background:linear-gradient(135deg,#eef6ff,#fff);border:1px dashed #a9c5e8}.knowledge-visual .kv-node{min-height:112px;display:grid;place-items:center;text-align:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}.knowledge-visual .kv-node svg{width:52px;height:52px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.knowledge-visual .kv-node b{font-size:13px}.knowledge-visual .kv-arrow{text-align:center;color:var(--blue);font-size:24px}.knowledge-visual .kv-formula{grid-column:1/-1;margin:0;padding:10px;border-left:3px solid var(--green);background:var(--green-soft);color:#08724c;font:13px/1.6 "Cascadia Mono",Consolas,monospace}.hand-scene .hand-shape{left:30%;top:12%;width:34%;height:70%;border:0;border-radius:0;opacity:.8}.hand-scene .hand-shape svg{width:100%;height:100%;stroke:#668ed8;fill:#dce9ff;stroke-width:1.7}
@media(max-width:520px){.knowledge-body .knowledge-visual{grid-template-columns:1fr}.knowledge-visual .kv-arrow{transform:rotate(90deg)}.knowledge-visual .kv-formula{grid-column:auto}}
@media(min-width:521px){.knowledge-body .knowledge-visual{grid-template-columns:1fr auto 1fr auto 1fr}}