.obs-mode-switch{display:flex;gap:3px;padding:4px;background:#f3f6eff5;border:1px solid #7b9fa266;border-radius:6px;box-shadow:0 5px 18px #28485216}
#controls .obs-mode-switch button{background:transparent;color:#47686c;border:0;border-radius:3px;min-height:36px;padding:7px 14px;font-weight:600}
#controls .obs-mode-switch button[aria-pressed=true]{background:#326875;color:#fff;box-shadow:0 2px 5px #28485220}
#controls .obs-mode-switch button:hover:not([aria-pressed=true]){background:#dce9e6}
#controls .obs-mode-switch button:focus-visible{outline:2px solid #b56251;outline-offset:2px}
#observatory-workshop{position:fixed;z-index:60;bottom:22px;left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 40px));padding:17px 22px 14px;background:rgba(248,250,245,.96);border:1px solid #829b9540;box-shadow:0 8px 35px #28485222;border-radius:7px;color:#304c54;backdrop-filter:blur(14px)}
#observatory-workshop[hidden]{display:none}
#observatory-workshop [hidden]{display:none!important}
#observatory-workshop header{display:flex;align-items:center;justify-content:space-between;gap:18px}
#observatory-workshop small{font:11px/1.5 system-ui;color:#688983}
#observatory-workshop h2{font:500 22px/1.4 "Songti SC",Georgia,serif;margin:4px 0 12px;color:#304c54}
#observatory-workshop button{font:13px/1.5 system-ui;cursor:pointer}
.obs-back{background:#326875;border:1px solid #285762;color:#fff;white-space:nowrap;padding:10px 14px;min-height:44px;border-radius:4px;box-shadow:0 3px 8px #28485220;font-weight:600!important}
.obs-back:hover{background:#285762}
.obs-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.obs-controls button{padding:9px 14px;min-height:42px;background:#e3edeb;border:1px solid #8faeab66;border-radius:4px;color:#315c65}
.obs-controls button[aria-pressed=true]{background:#315c65;color:#fff}
.obs-controls button:disabled{opacity:.55;cursor:wait}
.obs-controls label{display:flex;gap:8px;align-items:center;font:13px system-ui;color:#48656b}
.obs-controls input{width:110px;accent-color:#b56251}
.obs-controls output{width:18px;text-align:center;font-variant-numeric:tabular-nums}
.obs-response{font:13px/1.65 system-ui;color:#72847f;margin:12px 0 0;min-height:22px}
body.obs-active #tour-nav,body.obs-active #tour-dock,body.obs-active #hint,body.obs-active #mobile-stick,body.obs-active #desktop-tip{display:none!important}
body.obs-active #btn-tour{display:none}
#hint,#desktop-tip{display:none!important}
.obs-navigation-hint{position:fixed;z-index:33;left:50%;bottom:94px;transform:translateX(-50%);width:max-content;padding:10px 16px;border:1px solid #829b9555;border-radius:5px;background:#f8faf5f2;box-shadow:0 5px 20px #28485218;color:#365c65;font:13px/1.5 system-ui;white-space:nowrap;pointer-events:none}
.obs-keyboard-hint,.obs-keycaps{display:flex;align-items:center;gap:7px}
.obs-keycaps{gap:3px}.obs-keycaps kbd{display:grid;place-items:center;width:24px;height:25px;border:1px solid #7a979d77;border-bottom-width:2px;border-radius:3px;background:#fff;font:600 12px/1 system-ui}
.obs-hint-divider{height:18px;width:1px;background:#829b9555;margin:0 5px}
.obs-touch-hint{display:none}
body:not(.loading-entered) .obs-navigation-hint,body.obs-active .obs-navigation-hint,body:has(#detail.open) .obs-navigation-hint{display:none}
.obs-stick-label{position:absolute;bottom:-23px;left:0;width:100%;text-align:center;font:600 13px/1.5 system-ui;color:#315c65;pointer-events:none}
@media (hover:none) and (pointer:coarse),(max-width:820px),(max-height:520px){.obs-keyboard-hint{display:none}.obs-touch-hint{display:block}.obs-navigation-hint{bottom:85px;padding:9px 12px;font-size:12px;max-width:calc(100vw - 24px);white-space:normal;text-align:center}#mobile-stick{bottom:154px;width:84px;height:84px}.stick-ring{background:#f8faf5c9;border:2px solid #5a8a8b;box-shadow:0 4px 16px #28485225}.stick-knob{background:#326875;border:2px solid #fff;width:38px;height:38px;margin:-19px}.obs-mode-switch{gap:2px}#controls .obs-mode-switch button{padding:7px 10px;min-height:36px}#controls{top:58px;right:12px}#controls #btn-language{align-self:center}}
#observatory-workshop button:focus-visible,#observatory-workshop input:focus-visible{outline:2px solid #b56251;outline-offset:3px}
.obs-trial{border-top:1px solid #8faeab44;margin-top:12px;padding-top:10px}
.obs-trial summary{font:13px/1.5 system-ui;cursor:pointer;color:#315c65}
.obs-trial-controls{display:flex;gap:18px;align-items:center;margin-top:12px}
.obs-trial-controls label{display:flex;align-items:center;gap:10px;font:13px system-ui;flex:1}
.obs-trial-controls input{accent-color:#b56251;min-width:60px;flex:1}
.obs-angle-value{min-width:32px;font-variant-numeric:tabular-nums}
.obs-test{padding:8px 12px;border-radius:4px;background:transparent;border:1px solid #8faeab;color:#315c65}
.obs-clearance{font:13px/1.6 system-ui;margin:9px 0 0;color:#a24d3e}
.obs-clearance[data-ready=true]{color:#326875}
#detail.obs-study{display:none;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);width:min(1000px,calc(100vw - 48px));max-height:84vh;padding:30px;border:1px solid #829b9540;border-radius:7px;background:#f8faf5;box-shadow:0 20px 90px #20393e33;box-sizing:border-box}
#detail.obs-study.open{display:block;right:auto}
#detail.obs-study .x{position:sticky;top:0;float:right;background:#f8faf5;border:1px solid #9aadaa66;border-radius:50%;width:36px;height:36px;line-height:32px;z-index:2;color:#315c65}
#detail.obs-study #dc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;clear:both}
.obs-study-image{align-self:start;position:sticky;top:38px}
.obs-study-image img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain;background:#edf1eb}
.obs-study-image span{display:block;margin-top:12px;font:12px/1.5 system-ui;color:#647d7d}
#detail.obs-study article small{font:11px/1.5 system-ui;color:#688983}
#detail.obs-study h3{font:500 26px/1.4 "Songti SC",Georgia,serif;color:#304c54;margin:6px 0 18px}
#detail.obs-study p{font:14px/1.8 system-ui;margin:0 0 14px;color:#4f6368}
.obs-study-next{border-top:1px solid #9aadaa66;margin-top:20px;padding-top:14px}
.obs-study-next strong{font:600 12px/1.5 system-ui;color:#326875}
#detail.obs-study .obs-study-next p{margin:6px 0 0}
.obs-study-source{display:inline-block;font:12px/1.6 system-ui;margin-top:18px;color:#326875;text-decoration:underline;text-underline-offset:3px}
.obs-study-experiment{border:1px solid #8faeab88;background:#e3edeb;color:#315c65;border-radius:4px;padding:8px 12px;font:13px/1.5 system-ui;margin-top:12px;cursor:pointer}
@media(max-width:720px){.obs-trial-controls{gap:8px}.obs-trial-controls label{min-width:0;gap:6px}.obs-trial-controls input{width:60px;min-width:40px}.obs-test{padding:8px;white-space:nowrap}#detail.obs-study{width:calc(100vw - 24px);max-height:86vh;padding:18px}#detail.obs-study #dc{grid-template-columns:1fr;gap:20px}.obs-study-image{position:static}.obs-study-image img{max-height:30vh}#detail.obs-study h3{font-size:22px}#detail.obs-study .x{top:0}.obs-clearance{font-size:12px}}
@media(max-width:720px){#observatory-workshop{bottom:16px;width:calc(100vw - 24px);padding:14px 16px}#observatory-workshop h2{font-size:18px;margin-bottom:9px}.obs-controls{gap:8px}.obs-controls label{order:3;width:100%;justify-content:center}.obs-controls input{width:180px}.obs-controls button{flex:1;padding:9px}.obs-response{font-size:12px}#observatory-workshop small{font-size:10px}}
.obs-experiment-tabs{display:flex;gap:18px;border-bottom:1px solid #8faeab55;margin-bottom:14px}
.obs-experiment-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:#6b7e7d;padding:9px 0;flex:1;white-space:nowrap}
.obs-experiment-tabs button[aria-selected=true]{color:#285c68;border-bottom-color:#b56251;font-weight:600}
.obs-experiment-controls{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.obs-experiment-controls>label{display:flex;align-items:center;gap:10px;flex:1;min-width:220px;font:13px/1.5 system-ui}
.obs-experiment-controls input[type=range]{accent-color:#b56251;min-width:50px;flex:1}
.obs-experiment-controls output{min-width:55px;text-align:right;font-variant-numeric:tabular-nums}
.obs-tank-options{display:flex;gap:18px;flex-wrap:wrap;font:13px/1.5 system-ui}
.obs-tank-options label{display:flex;align-items:center;gap:6px}
.obs-tank-options input{accent-color:#377d84;width:16px;height:16px;margin:0}
.obs-push,.obs-remember{border:1px solid #8faeab88;border-radius:4px;background:#e3edeb;color:#315c65;padding:8px 12px;min-height:38px}
.obs-readout{display:grid;grid-template-columns:130px minmax(0,1fr) auto;align-items:center;gap:18px;border-top:1px solid #8faeab44;margin-top:14px;padding-top:12px}
.obs-readout small{display:block}.obs-readout strong{font:600 26px/1.3 system-ui;display:block;color:#326875;font-variant-numeric:tabular-nums}
.obs-readout strong[data-warning=true]{color:#a65144}
.obs-finding,.obs-comparison{font:13px/1.65 system-ui;margin:0;color:#4c6468}
.obs-comparison{border-left:2px solid #bb9860;padding-left:10px;margin-top:10px;color:#775f3d}
.obs-principle{margin-top:10px}.obs-principle summary{font:12px/1.5 system-ui;cursor:pointer;color:#688983}
.obs-principle p{font:12px/1.75 system-ui;margin:10px 0}.obs-principle a{font:12px/1.6 system-ui;color:#326875}
#observatory-workshop{box-sizing:border-box;max-height:calc(100svh - 110px);overflow:auto}
@media(max-width:720px){.obs-experiment-tabs{gap:10px;margin-bottom:10px}.obs-experiment-tabs button{font-size:12px!important;padding:7px 0}.obs-experiment-controls{gap:10px}.obs-experiment-controls>label{min-width:0;width:100%;flex:auto;font-size:12px;gap:8px}.obs-tank-options{gap:10px;font-size:12px}.obs-push{width:100%}.obs-readout{grid-template-columns:95px minmax(0,1fr);gap:8px;margin-top:10px;padding-top:9px}.obs-readout strong{font-size:22px}.obs-readout .obs-remember{grid-column:1/-1;padding:5px 10px;min-height:30px;width:max-content;font-size:12px!important}.obs-finding,.obs-comparison{font-size:12px;line-height:1.55}#observatory-workshop{max-height:56svh}.obs-principle{margin-top:6px}#observatory-workshop header{gap:10px}#observatory-workshop h2{font-size:17px;line-height:1.4}}
.lock-task,.lock-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lock-task strong{font:600 15px/1.5 system-ui;color:#315c65}.lock-stats{font:12px/1.5 system-ui;font-variant-numeric:tabular-nums;color:#536e71}.lock-feedback{font:14px/1.6 system-ui;min-height:24px;color:#365d63;margin:10px 0}.lock-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.lock-actions button,.lock-footer button{min-height:44px;padding:8px 12px;border:1px solid #95aeaa;border-radius:4px;background:#edf3f0;color:#285762}.lock-actions button[aria-pressed=true]{background:#326875;color:white}.lock-footer{margin-top:10px}.lock-footer button:first-child{background:#326875;color:white}.lock-footer label{display:flex;align-items:center;gap:6px;font:13px system-ui}.lock-footer button:disabled{opacity:.5}.lock-result{font:14px/1.6 system-ui;border-left:3px solid #bc9558;padding-left:12px;color:#405d62}#obs-lock details{font:12px/1.6 system-ui;color:#536e71;margin-top:10px}#obs-lock details p{max-width:70ch}.lock-pin{position:fixed;z-index:39;transform:translate(-50%,-50%);padding:8px 12px;min-height:42px;border:1px solid #779b9d;border-radius:4px;background:#f6faf2ed;color:#244e59;font:600 13px system-ui;box-shadow:0 3px 12px #243e4420;cursor:pointer}.lock-pin[hidden]{display:none}body:not(.obs-active) .lock-pin{display:none}.obs-experiment-tabs{gap:10px}@media(max-width:720px){.lock-pin{font-size:12px;padding:6px 8px;min-height:38px}.lock-actions{gap:5px}.lock-actions button{padding:6px 3px;font-size:12px!important}.lock-feedback{font-size:13px;line-height:1.5}.lock-task strong{font-size:14px}.lock-stats{font-size:11px}.lock-footer{gap:7px}.lock-footer button{font-size:12px!important;padding:7px 10px}.obs-experiment-tabs{gap:5px}.obs-experiment-tabs button{font-size:11px!important}#observatory-workshop[data-mode=lock]{max-height:46svh}}
.obs-task-guide{margin:10px 0 14px;padding:0 0 0 12px;border-left:3px solid #79a895;font-size:14px;line-height:1.65;max-width:720px;color:inherit}@media(max-width:600px){.obs-task-guide{font-size:13px;margin:8px 0;line-height:1.5}}
.obs-task-guide{flex-shrink:0}body:not(.loading-entered) #observatory-workshop,body:not(.loading-entered) .obs-mode-switch{visibility:hidden}

#observatory-workshop[data-mode=lock]{width:min(820px,calc(100vw - 32px));padding:12px 18px;bottom:16px;background:#f5f6f2f2}
#observatory-workshop[data-mode=lock] h2{font-size:18px;margin:2px 0 6px}
#observatory-workshop[data-mode=lock] .obs-task-guide{display:none}
#observatory-workshop[data-mode=lock] .obs-experiment-tabs{margin:6px 0 8px}
#observatory-workshop[data-mode=lock] .lock-task strong{font-size:14px}
#observatory-workshop[data-mode=lock] .lock-feedback{margin:6px 0;font-size:13px}
#observatory-workshop[data-mode=lock] .lock-footer{margin-top:7px}
#observatory-workshop[data-mode=lock] small{display:none}
.lock-pin{background:#f5f6f2f2;border-color:#acb9b1;box-shadow:none}
@media(max-width:720px){#observatory-workshop[data-mode=lock]{padding:10px 12px;bottom:10px;max-height:43svh}#observatory-workshop[data-mode=lock] h2{font-size:16px}#observatory-workshop[data-mode=lock] .lock-task{gap:2px 10px}#observatory-workshop[data-mode=lock] .lock-actions button{min-height:40px}.lock-pin{font-size:11px;min-height:36px;padding:5px 8px}}
