*{box-sizing:border-box} :root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#183d39;background:#edf2ed;font-synthesis:none;--green:#17795d;--border:#cedbd2;--paper:#fffef8}body{margin:0}button,select{font:inherit}button{cursor:pointer;border:1px solid var(--border);background:var(--paper);color:inherit;border-radius:10px;padding:10px 14px;font-size:17px;min-height:44px;transition:background .15s,box-shadow .15s}button:hover{background:#e4eee4}button:focus-visible,summary:focus-visible{outline:3px solid #c28311;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}button.active,button[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}#app{max-width:1920px;margin:auto;padding:22px 28px 12px}header{display:flex;justify-content:space-between;align-items:center;gap:14px}h1{font-size:32px;margin:4px 0 18px;font-weight:700;letter-spacing:1px}.eyebrow{font-size:14px;letter-spacing:2px;color:#55776a;font-weight:700}.tag{display:inline-block;font-size:13px;letter-spacing:1px;margin-left:15px;border:1px solid #b4c9be;border-radius:5px;padding:4px 7px;vertical-align:middle}.header-tools{display:flex;gap:8px;flex-wrap:wrap}.header-tools button{font-size:15px}nav{display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:14px}nav button{font-weight:700;font-size:19px;padding:12px 20px}nav p{font-size:19px;margin:0 0 0 15px}main{display:grid;grid-template-columns:minmax(0,1fr) 374px;gap:22px;margin-top:18px}.workspace{min-width:0}.stage{height:clamp(385px,calc(100vh - 350px),690px);background:#092e30;border-radius:20px;position:relative;overflow:hidden;color:#e4f4e7;border:1px solid #225352;isolation:isolate}.stage.light{background:#d8e4d7;color:#173b35}.stage-top{position:absolute;top:17px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:2}#stage-label{font-size:16px;border-left:3px solid #c8e990;padding-left:9px}.model-note{font-size:13px;opacity:.8}#scene{position:absolute;inset:0}canvas{display:block;touch-action:none;width:100%;height:100%}.specimen-heads{position:absolute;left:8%;right:18%;top:53px;display:flex;justify-content:space-around;pointer-events:none}.specimen-heads button{pointer-events:auto;color:inherit;border:1px solid #6a9590;background:#173e3e;font-size:17px;border-radius:20px;padding:7px 14px}.specimen-heads button.selected{border-color:#e4cb81;box-shadow:0 0 0 1px #e4cb81}.light .specimen-heads button{background:#f4f6e8;color:#173b35}.camera-tools{position:absolute;right:13px;top:100px;display:flex;flex-direction:column;gap:7px}.camera-tools button{background:#173f40;color:#e6f2e5;border-color:#567d75;width:59px;min-height:45px;padding:5px;font-size:16px;line-height:1.2}.camera-tools button:first-child,.camera-tools button:nth-child(2){font-size:25px}.part-labels{position:absolute;left:20px;top:32%;bottom:20%;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.part-labels span{font-size:18px;border-left:2px solid #86b7a4;padding-left:7px;text-shadow:0 1px 3px #092e30}.part-labels i{display:block;font-style:normal;font-size:12px;color:#b8cdc3;margin-top:3px}.light .part-labels span{text-shadow:none}.light .part-labels i{color:#3b5c4a}.stage-bottom{position:absolute;left:22px;right:22px;bottom:17px;display:flex;justify-content:space-between;font-size:14px;gap:12px;pointer-events:none}.stage-bottom span:nth-child(2){color:#f9d78c}.light .stage-bottom span:nth-child(2){color:#745200}.under-stage{display:flex;justify-content:space-between;gap:10px;align-items:start;padding:8px 2px}.under-stage button{font-size:14px;min-height:35px;padding:5px 10px}details{font-size:14px;max-width:80%;padding:7px 0}summary{cursor:pointer}details p{margin:8px 0;line-height:1.7}.observation{border-top:1px solid var(--border);padding-top:10px}.observation p{font-size:19px;line-height:1.55;margin:6px 0 0}aside{background:var(--paper);border:1px solid #d5dfd3;border-radius:20px;padding:20px;display:flex;flex-direction:column;align-self:stretch}.steps{display:flex;justify-content:space-between;font-size:15px;border-bottom:1px solid var(--border);padding-bottom:14px;color:#718077}.steps span{padding:3px 5px}.steps .current{color:#126447;border-bottom:3px solid #338f65;font-weight:700}#panel{flex:1}h2{font-size:24px;line-height:1.4;margin:18px 0 9px}h3{font-size:18px;margin:17px 0 9px}.hint{font-size:16px;line-height:1.65;color:#547164;margin:8px 0 14px}.choices{display:grid;gap:9px}.choices button{text-align:left;font-size:18px;padding:12px 14px;line-height:1.45}.primary{display:block;width:100%;background:#16795b;border-color:#16795b;color:white;margin-top:15px;font-weight:700;padding:13px}.primary:hover{background:#106344}.micro{font-size:13px;color:#657a6b;line-height:1.6}.operation-status{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}.operation-status span{background:#eef1e5;border-radius:6px;padding:8px;font-size:15px}.operation-status .done{background:#dcefdc;color:#245c3d}#feedback{font-size:16px;line-height:1.55;background:#f0f2e8;padding:12px;border-radius:10px;margin:14px 0}.aside-bottom{display:flex;gap:7px;flex-wrap:wrap}.aside-bottom button{font-size:14px;flex:1;padding:8px;white-space:nowrap}.result-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.result-pair div{border:1px solid var(--border);border-radius:8px;padding:12px 8px;font-size:17px;line-height:1.7}.result-pair b{display:block;font-size:20px;color:#17795d}.badge{display:inline-block;font-size:13px;background:#e5eed9;border-radius:4px;padding:3px 7px}footer{display:flex;justify-content:space-between;font-size:12px;color:#678274;margin-top:15px;gap:10px}dialog{width:min(760px,94vw);max-height:88vh;border:1px solid #b4caba;border-radius:18px;background:var(--paper);color:#183d39;padding:22px;box-shadow:0 25px 80px #0005}dialog::backdrop{background:#052a2ac9}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-head h2{margin:0}#dialog-body{line-height:1.8;font-size:17px}#dialog-body a{color:#126647}#dialog-body table{border-collapse:collapse;width:100%;font-size:15px}td,th{border:1px solid #becfc0;text-align:left;padding:8px}.record{padding:10px 0;border-bottom:1px solid var(--border)}body.high{--border:#687d6a;--green:#005e37;color:#082c24;background:#fff}body.high .eyebrow,body.high .hint,body.high .micro,body.high footer{color:#234e3e}body.high .stage{border:3px solid #789889}body.high .part-labels i{font-size:14px;color:#fff}body.high .stage.light .part-labels i{color:#143b30}body.high .stage-top,body.high .stage-bottom{text-shadow:0 1px 2px #000}body.high .stage.light .stage-top,body.high .stage.light .stage-bottom{text-shadow:none}body.high #feedback{border:1px solid #406944}#app:fullscreen{background:#edf2ed;max-width:none;overflow:auto;padding:20px}#app:fullscreen .stage{height:calc(100vh - 290px)}@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 415px}h1{font-size:38px}button{font-size:19px}.hint{font-size:18px}}@media(max-width:1150px){#app{padding:16px}header{align-items:start}h1{font-size:27px}.tag{display:none}.header-tools{max-width:330px}.header-tools button{font-size:14px;padding:7px 11px}nav p{font-size:16px}main{grid-template-columns:minmax(0,1fr) 335px;gap:14px}aside{padding:16px}.stage{height:clamp(410px,calc(100vh - 295px),690px)}.part-labels{left:12px}.part-labels i{max-width:65px}.specimen-heads{left:8%;right:17%}.specimen-heads button{font-size:14px}.stage-bottom{left:12px;right:12px;font-size:12px}.model-note{font-size:11px}h2{font-size:22px}}@media(max-width:800px){#app{padding:12px}header{flex-direction:column;gap:6px}h1{margin-bottom:8px}.header-tools{max-width:none;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.header-tools button{padding:7px 4px;font-size:13px}nav{flex-wrap:wrap;margin-top:12px;gap:6px}nav button{font-size:17px;padding:10px 14px;flex:1}nav p{width:100%;margin:5px 0 0;font-size:17px}main{display:flex;flex-direction:column;margin-top:12px}.stage{height:420px}.specimen-heads{left:12%;right:17%;top:50px}.camera-tools{right:9px;top:100px}.camera-tools button{width:49px}.part-labels{top:32%;bottom:22%}.part-labels span{font-size:16px}.part-labels i{display:none}.stage-top{left:12px;right:12px}.model-note{font-size:10px}.stage-bottom{font-size:11px;gap:5px}.observation p{font-size:18px}aside{padding:18px}footer{flex-wrap:wrap;font-size:11px}#app:fullscreen .stage{height:430px}}@media(max-height:850px) and (min-width:801px){#app{padding-top:12px}h1{font-size:27px;margin-bottom:10px}main{margin-top:12px}aside{padding:14px}.stage{height:385px}h2{margin-top:12px;font-size:22px}.choices{gap:7px}.choices button{padding:9px 11px}.hint{margin-bottom:9px}#feedback{margin:10px 0;padding:9px}.primary{margin-top:10px;padding:11px}}
@media(max-height:850px) and (min-width:801px){nav{padding-bottom:10px}nav button{padding:9px 16px}header h1{margin-bottom:10px}.stage{height:clamp(365px,calc(100vh - 340px),550px)}aside .micro{margin:8px 0}.steps{padding-bottom:10px}aside h3{margin:10px 0 8px}aside .result-pair div{padding:7px 8px}aside #feedback{font-size:15px;line-height:1.5}aside .choices button{font-size:17px}.specimen-heads{top:48px}}
@media(max-width:800px){.camera-tools{top:auto;bottom:46px;left:12px;right:12px;flex-direction:row;justify-content:center;gap:7px}.camera-tools button{width:52px;min-height:44px;font-size:15px}.camera-tools #focus br{display:none}.camera-tools #focus{width:70px;font-size:14px}#scene{bottom:50px}.part-labels{bottom:32%}.stage-bottom{font-size:11px}.specimen-heads{left:8%;right:8%;gap:7px}.specimen-heads button{padding:6px 9px;font-size:13px}}