:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#19324b;background:#f2f6fb;font-synthesis:none;--blue:#2554cb;--muted:#74859a;--line:#dce5ef;--teal:#198b8b}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:var(--blue);text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #6da4f1;outline-offset:4px}[hidden]{display:none!important}.site-header{height:86px;padding:0 36px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:#fff;gap:48px}.brand{color:#18304a;display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;white-space:nowrap}.brand-icon{width:40px;height:40px;background:#2554cb;color:#fff;display:grid;place-items:center;border-radius:10px;font-size:32px;font-weight:400;line-height:1}.brand-sub{display:block;font-size:9px;letter-spacing:2px;color:#8493a7;margin-top:3px}.site-header nav{align-self:stretch;display:flex;gap:30px}.tab{border:0;border-bottom:3px solid transparent;background:none;color:#77869b;font-size:15px;padding:4px 1px 0;font-weight:600}.tab.active{border-color:var(--blue);color:var(--blue)}.header-tag{margin-left:auto;font-size:13px;color:#64839d;letter-spacing:.5px}.page{max-width:1660px;margin:auto;padding:30px 36px 12px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#7189a6;margin-bottom:10px}h1{font-size:28px;letter-spacing:-.7px;margin:0 0 11px;font-weight:650}h2{margin:0;font-size:20px;font-weight:650}p{margin:0;line-height:1.65}.page-heading p{color:#7a8ba0;font-size:14px}.button{border:1px solid var(--line);color:#294564;background:#fff;padding:12px 20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:22px;font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s,box-shadow .15s}.button:hover{background:#eaf0fa}.button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.button.primary:hover{background:#1b43ab}.button.small{padding:8px 12px;font-size:13px}.text-button{border:none;color:#5e7897;background:none;padding:6px 0;font-size:13px}.text-button:hover{color:var(--blue)}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:24px;align-items:start}.imaging-column{border:1px solid var(--line);background:white;border-radius:10px;overflow:hidden}.viewer-toolbar{height:68px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center}.segmented{display:flex;gap:3px;background:#eef3f9;border-radius:5px;padding:3px}.segmented button{font-size:13px;background:none;border:0;color:#74859c;padding:8px 19px;border-radius:4px}.segmented button.selected{background:#fff;color:var(--blue);box-shadow:0 1px 3px #1e3e6d13;font-weight:600}.stage-grid{display:grid;grid-template-columns:.84fr 1.16fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}figure{margin:0;min-width:0}.anatomy-stage{position:relative;background:#edf3f8;min-height:534px;display:flex;align-items:center;justify-content:center;overflow:hidden}.anatomy-stage figcaption,.radiograph-stage figcaption{font-size:13px;position:absolute;top:18px;left:20px;right:20px;display:flex;align-items:center;gap:8px;z-index:2;font-weight:600}.step{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;color:#7c96af;letter-spacing:.7px;font-weight:500}.live-dot{width:6px;height:6px;border-radius:50%;background:#36aaa1;margin-left:auto}.anatomy-stage canvas{display:block;width:100%;height:auto;max-height:510px;aspect-ratio:400/510;touch-action:none;cursor:grab;object-fit:contain}.anatomy-stage canvas:active{cursor:grabbing}.anatomy-legend{position:absolute;bottom:50px;left:20px;font-size:11px;color:#7b91a6;display:flex;gap:8px;align-items:center}.anatomy-legend i{width:17px;height:2px;background:#3280c7}.anatomy-legend span{margin-left:8px}.drag-hint{position:absolute;bottom:15px;left:0;width:100%;text-align:center;font-size:12px;color:#6b849f}.drag-hint span{margin-right:5px;font-size:18px}.radiograph-stage{position:relative;background:#12232f;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 10px 25px;min-height:534px}.radiograph-stage figcaption{color:#d3e1ed;top:18px}.radiograph-stage .step{color:#6b889f}.radiograph-stage figcaption span:last-child{margin-left:auto;color:#8097aa;font-size:11px;font-weight:400}.film{position:relative;width:100%;height:480px;display:flex;justify-content:center;align-items:center;background:#000;margin-top:20px}.film canvas,.film>img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;aspect-ratio:440/560}.film>img{position:absolute;left:50%;transform:translateX(-50%);top:0}.side-marker{position:absolute;z-index:2;top:22px;left:calc(50% - 165px);color:#ced7df;font-family:ui-monospace,monospace;font-size:19px;font-weight:500}.compare-button{position:absolute;bottom:13px;right:18px;border:1px solid #4b6374;color:#c1d3e2;background:#19303f;padding:7px 11px;border-radius:4px;font-size:11px}.compare-button[aria-pressed=true]{background:#315b7d;border-color:#89b4d7;color:#fff}.observation{padding:20px;display:flex;gap:12px;align-items:start;min-height:90px}.observation-icon{color:#39a6a0;font-size:24px;margin-top:-2px}.observation strong{display:block;font-size:13px;font-weight:600;margin-bottom:6px}.observation p{font-size:12px;color:#8a99ab}.controls{border:1px solid var(--line);background:#fff;border-radius:10px;padding:24px 24px 20px;min-height:693px}.control-heading h2{font-size:18px;margin-bottom:8px}.control-heading p{font-size:12px;color:#8c9baf}.control-heading .eyebrow{font-size:9px;margin-bottom:9px}.parameter{padding:23px 0 16px;border-bottom:1px solid #edf1f6}.parameter label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:500}.parameter output{font-family:ui-monospace,SFMono-Regular,monospace;font-size:18px;color:#204fac;white-space:nowrap}.parameter input{display:block;margin:19px 0 10px;width:100%;height:4px;accent-color:#3569ce;cursor:pointer}.range-ends{font-size:10px;color:#9ba9ba;display:flex;justify-content:space-between}.geometry-note{margin-top:24px}.mini-label{color:#8b9daf;font-size:11px;letter-spacing:.5px}.geometry-note p{font-size:11px;color:#8193a8;margin-top:6px}.geometry-note p span{margin:0 4px}.scope-note{font-size:11px;color:#8a9eb3;line-height:1.8;margin-top:22px;padding-top:18px;border-top:1px solid #edf1f6}.module-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;color:#8b9baf;font-size:11px}.module-footer>span{display:flex;align-items:center;gap:7px}.data-dot{width:5px;height:5px;background:#3e9e99;border-radius:50%}.site-footer{display:flex;justify-content:space-between;max-width:1660px;margin:16px auto 0;padding:18px 36px 20px;border-top:1px solid #e4ebf3;color:#97a7b9;font-size:10px}.replay-bar{display:flex;justify-content:space-between;align-items:center;background:#e5f2f5;border:1px solid #c1e1e4;border-radius:7px;padding:12px 16px;margin-bottom:18px;font-size:13px;color:#34737b;gap:12px}.replay-bar>div{display:flex;gap:8px}#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#12232f;color:#b5cadc;text-align:center;padding:24px;gap:12px}#loading strong{font-size:14px;font-weight:500}#loading>span:last-child{font-size:11px;line-height:1.8;color:#738da3}.spinner{width:24px;height:24px;border:2px solid #365264;border-top-color:#85b6de;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.quiz-progress{display:flex;gap:7px}.quiz-progress span{width:24px;height:5px;border-radius:3px;background:#d7e1ed}.quiz-progress span.current{background:#507ce0}.quiz-progress span.done{background:#73aba6}.question-workbench{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1fr);gap:48px;background:white;border:1px solid var(--line);border-radius:10px;padding:24px;align-items:start}.question-film{background:#10222f;border-radius:6px;overflow:hidden}.question-film figcaption{height:52px;padding:0 22px;display:flex;align-items:center;gap:18px;color:#d1dfeb;font-size:13px}.question-film figcaption span{font-family:ui-monospace,monospace;color:#829aad;font-size:11px}.question-film figcaption span:last-child{margin-left:auto;color:#dce5eb}.question-film img{display:block;margin:auto;width:100%;max-height:644px;object-fit:contain;background:#000}.question-content{padding:12px 18px 8px 0}.question-intro h2{font-size:23px;margin:10px 0}.question-intro p{font-size:13px;color:#91a1b2;max-width:420px}.question-content fieldset{padding:0;margin:25px 0 0;border:none}.question-content legend{display:flex;gap:10px;align-items:center;font-size:14px;margin-bottom:12px;font-weight:600}.question-content legend span{width:22px;height:22px;background:#edf3fc;color:#527bbf;display:grid;place-items:center;border-radius:50%;font-size:11px}.options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.option{position:relative;display:flex;align-items:center;padding:12px 10px;border:1px solid #dfe7f0;border-radius:5px;gap:8px;font-size:12px;color:#70849c;cursor:pointer;min-height:44px}.option:has(input:checked){background:#eff4ff;border-color:#8ba9e5;color:#2c59b0}.option input{accent-color:#3567cb;margin:0;width:14px;height:14px}.option.correct{background:#edf7f4;border-color:#99c7bb;color:#2c7a64}.option.incorrect{background:#fff2ed;border-color:#e6b5a3;color:#a85f47}.answer-actions{display:flex;gap:24px;align-items:center;margin-top:24px}.feedback{margin-top:24px;border-top:1px solid var(--line);padding-top:22px}.feedback h3{font-size:18px;color:#277d69;margin:0 0 12px}.feedback.needs-work h3{color:#a36a47}.feedback p{font-size:13px;color:#71869d;margin:8px 0 16px;line-height:1.8}.feedback .answer-key{padding:11px 14px;background:#f0f5fb;border-radius:5px;color:#50718f;font-size:12px}.feedback .button{font-size:12px;padding:10px 13px;gap:8px}.feedback-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.quiz-footnote{color:#90a1b4;font-size:11px;max-width:850px;line-height:1.8;margin:18px auto 0;text-align:center}.summary-card{max-width:820px;margin:30px auto;background:white;border:1px solid var(--line);border-radius:12px;padding:40px;text-align:center}.summary-card .score{font-size:64px;color:#2756be;font-weight:500;margin:24px 0 6px;letter-spacing:-3px}.summary-card .score small{font-size:22px;color:#99aac0;letter-spacing:0}.summary-card>p{font-size:14px;color:#8497ae}.summary-list{text-align:left;margin:28px 0;display:grid;gap:8px}.summary-row{display:flex;gap:12px;align-items:center;background:#f5f8fc;padding:12px 16px;border-radius:5px;color:#738ca3;font-size:13px}.summary-row span:last-child{margin-left:auto;font-size:11px}.summary-row .result-ok{color:#2d917a}.summary-actions{display:flex;gap:12px;justify-content:center}.criteria-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.criteria-card{display:grid;grid-template-columns:180px 1fr;gap:20px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:22px}.criteria-top{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-bottom:0}.criteria-top .step{background:#edf3fc;padding:7px 10px;border-radius:4px;color:#547cb6}.criteria-top h2{font-size:18px}.criteria-card img{width:100%;border-radius:4px}.criteria-card ol{list-style:none;margin:0;padding:6px 0;counter-reset:item}.criteria-card li{counter-increment:item;position:relative;padding-left:25px;margin-bottom:18px}.criteria-card li:before{content:counter(item,decimal-leading-zero);position:absolute;left:0;top:3px;font-size:9px;color:#85a0bd}.criteria-card strong{font-size:14px;font-weight:500}.criteria-card p{font-size:12px;color:#8b9aad;margin-top:7px;line-height:1.8}.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.evidence{padding:24px;border-top:1px solid var(--line)}.evidence h2{font-size:16px;margin-bottom:20px}.evidence p{margin-bottom:18px;font-size:13px}.evidence p span{display:block;color:#91a1b3;font-size:12px;margin-top:5px}.evidence .boundary{color:#91a1b3;font-size:12px;line-height:1.9}
@media(min-width:1530px){.anatomy-stage,.radiograph-stage{min-height:592px}.film{height:536px}.anatomy-stage canvas{max-height:558px}.controls{min-height:751px;padding-top:28px}.parameter{padding:27px 0 20px}}
@media(max-width:1150px){.site-header{gap:32px;padding:0 24px}.page{padding:26px 24px 12px}.workbench{grid-template-columns:minmax(0,1fr) 250px;gap:16px}.controls{padding:22px 18px}.stage-grid{grid-template-columns:.8fr 1.2fr}.anatomy-stage,.radiograph-stage{min-height:485px}.film{height:428px}.anatomy-stage figcaption,.radiograph-stage figcaption{left:14px;right:14px;font-size:12px}.radiograph-stage figcaption span:last-child{font-size:10px}.controls{min-height:648px}.question-workbench{gap:24px;grid-template-columns:minmax(0,.8fr) minmax(390px,1fr)}.question-content{padding-right:0}.criteria-card{grid-template-columns:130px 1fr;gap:14px;padding:18px}.criteria-card p{font-size:11px}}
@media(max-width:900px){.header-tag{display:none}.site-header{gap:36px;height:76px}.site-header nav{margin-left:auto;gap:24px}.workbench{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;min-height:0;gap:0 30px}.control-heading{grid-column:1/-1;margin-bottom:4px}.control-heading p{display:inline}.control-heading .eyebrow{display:none}.geometry-note{margin-top:14px}.scope-note{margin-top:12px}.stage-grid{grid-template-columns:1fr 1.15fr}.anatomy-stage,.radiograph-stage{min-height:520px}.film{height:460px}.page-heading{align-items:flex-start}h1{font-size:25px}.page-heading .button{font-size:12px;padding:12px 14px}.criteria-card{grid-template-columns:1fr}.criteria-top{grid-column:auto}.criteria-card img{max-height:260px;object-fit:contain;background:#000}.criteria-card ol{padding:8px}.question-workbench{grid-template-columns:1fr 1.2fr;gap:24px;padding:18px}.question-content{padding-top:0}.options{grid-template-columns:1fr}.question-content fieldset{margin-top:20px}.option{padding:10px;font-size:11px}.question-intro h2{font-size:20px}.question-intro p{font-size:12px}.question-film img{max-height:640px}.answer-actions{gap:16px}}
@media(max-width:600px){.site-header{height:auto;min-height:100px;padding:16px 20px 0;gap:14px;flex-wrap:wrap}.brand{font-size:16px;gap:9px}.brand-icon{width:32px;height:32px;font-size:26px;border-radius:7px}.brand-sub{font-size:7px;letter-spacing:1.6px}.site-header nav{width:100%;height:44px;margin:0;gap:28px}.tab{font-size:13px;padding:3px 0}.page{padding:24px 16px 8px}.page-heading{margin-bottom:22px;gap:14px;flex-wrap:wrap}.page-heading .eyebrow{font-size:9px;margin-bottom:9px}h1{font-size:23px;letter-spacing:-.5px;margin-bottom:9px}.page-heading p{font-size:12px;line-height:1.8}.page-heading .button{padding:10px 14px;font-size:12px;gap:12px}.workbench{gap:16px}.viewer-toolbar{padding:12px 14px;height:60px}.segmented button{font-size:12px;padding:8px 14px}.stage-grid{display:flex;flex-direction:column;gap:1px}.anatomy-stage{min-height:300px;height:300px}.anatomy-stage canvas{height:300px;width:100%;object-fit:contain}.anatomy-stage figcaption{top:14px;font-size:12px}.anatomy-legend{bottom:38px;left:14px;font-size:9px}.drag-hint{bottom:9px;font-size:10px}.radiograph-stage{min-height:438px;padding:35px 0 32px}.radiograph-stage figcaption{top:13px}.film{height:365px;margin:0;width:100%}.side-marker{left:calc(50% - 122px);top:12px;font-size:16px}.compare-button{bottom:8px;right:12px;font-size:10px;padding:5px 8px}.observation{padding:16px 14px;min-height:86px;gap:9px}.observation strong{font-size:12px;line-height:1.6}.observation p{font-size:11px}.controls{padding:20px;gap:0 24px}.control-heading h2{font-size:16px;margin-bottom:5px}.control-heading p{font-size:11px}.parameter{padding:20px 0 13px}.parameter label{font-size:11px;flex-wrap:wrap;gap:4px}.parameter output{font-size:16px}.parameter input{margin:18px 0 11px}.range-ends{font-size:9px}.geometry-note,.scope-note{grid-column:1/-1;font-size:10px;margin-top:16px}.scope-note{padding-top:13px}.scope-note br{display:none}.module-footer{align-items:flex-start;gap:8px;font-size:9px;margin-top:12px;flex-wrap:wrap}.module-footer .text-button{font-size:10px;padding:0}.site-footer{padding:16px;gap:16px;margin-top:14px;font-size:9px}.site-footer span:last-child{font-size:8px}.replay-bar{flex-wrap:wrap;padding:12px;font-size:12px}.question-workbench{grid-template-columns:1fr;padding:12px;gap:24px}.question-film figcaption{height:44px;padding:0 16px;font-size:12px}.question-film img{max-height:430px}.question-content{padding:0 8px 10px}.question-intro h2{font-size:20px}.question-content fieldset{margin-top:24px}.question-content legend{font-size:13px}.options{grid-template-columns:1fr 1fr;gap:7px}.option{font-size:11px;padding:10px 8px}.option input{width:12px;height:12px;flex-shrink:0}.quiz-progress{gap:5px}.quiz-progress span{width:22px}.feedback p{font-size:12px}.feedback .answer-key{font-size:11px;line-height:1.8}.quiz-footnote{font-size:10px;text-align:left;margin:16px 4px 0}.summary-card{padding:28px 18px;margin:0}.summary-card h2{font-size:21px}.summary-card .score{font-size:58px}.summary-row{padding:11px;font-size:11px;gap:7px}.summary-row span:last-child{font-size:10px}.summary-actions .button{font-size:12px;padding:11px}.criteria-grid,.evidence-grid{grid-template-columns:1fr;gap:16px}.criteria-card{grid-template-columns:112px 1fr;gap:16px;padding:18px 14px}.criteria-top{grid-column:1/-1}.criteria-top h2{font-size:16px}.criteria-card img{margin-top:8px;max-height:230px}.criteria-card ol{padding:6px 0}.criteria-card li{padding-left:20px;margin-bottom:15px}.criteria-card strong{font-size:12px}.criteria-card p{font-size:11px;margin-top:4px}.evidence-grid{margin-top:20px;gap:8px}.evidence{padding:20px 6px 8px}.evidence h2{font-size:15px;margin-bottom:16px}.evidence p{font-size:12px}.evidence p span{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Keep both linked views visible together on a narrow screen. */
.question-intro .question-context{margin-top:14px;padding:11px 13px;background:#f0f5fb;border-left:2px solid #a9c3e4;border-radius:2px;color:#6383a2;font-size:12px;line-height:1.8}
.option.incorrect:has(input:checked){background:#fff2ed;border-color:#e6b5a3;color:#a85f47}
.option.correct:has(input:checked){background:#edf7f4;border-color:#99c7bb;color:#2c7a64}
.anatomy-stage canvas{height:510px;width:100%;max-height:none;aspect-ratio:auto;object-fit:fill}
@media(min-width:1530px){.anatomy-stage canvas{height:558px}}
@media(max-width:600px){
 .stage-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:1px}
 .anatomy-stage{min-height:330px;height:330px}.anatomy-stage canvas{height:330px;width:100%}
 .anatomy-stage figcaption,.radiograph-stage figcaption{font-size:10px;left:10px;right:8px;gap:5px}.step{font-size:8px}
 .radiograph-stage{min-height:330px;padding:34px 0 29px}.film{height:267px;margin:0}
 .radiograph-stage figcaption span:last-child{display:none}.side-marker{left:12px;top:8px;font-size:12px}
 .anatomy-legend{left:8px;font-size:8px;gap:4px;bottom:36px}.anatomy-legend i{width:10px}.anatomy-legend span{margin-left:0}
 .drag-hint{font-size:9px;bottom:8px}.compare-button{right:8px;font-size:9px;bottom:7px;padding:4px 6px}
 .question-intro .question-context{font-size:11px;padding:10px}
}
/* Feedback identifies the learner's choice independently of the answer key. */
.option:has(.answer-status){display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:8px;row-gap:6px}
.answer-status{grid-column:2;font-size:11px;font-weight:600}
.option{font-size:13px}.feedback p{font-size:14px}.parameter label{font-size:14px}
.mobile-parameter-label{display:none}
@media(max-width:600px){
 body:has(#lab:not([hidden])){padding-bottom:164px}
 .page-heading:has(#start-quiz) .eyebrow,.page-heading #start-quiz{display:none}
 .page-heading:has(#start-quiz){margin-bottom:18px}
 .stage-grid,.anatomy-stage,.radiograph-stage{height:clamp(250px,calc(100svh - 470px),330px);min-height:0}
 .anatomy-stage canvas{height:100%;width:100%}.radiograph-stage .film{height:100%}
 .anatomy-stage{height:100%}.radiograph-stage{height:100%;padding-top:32px;padding-bottom:27px}
 .viewer-toolbar{height:56px}
 .controls{position:fixed;bottom:0;left:0;right:0;z-index:5;display:flex;flex-direction:column;gap:0;padding:14px 20px 18px;border-radius:14px 14px 0 0;border-color:#d7e3f0;box-shadow:0 -8px 28px #1b3c7312;min-height:150px;max-height:170px}
 .controls .control-heading,.controls .geometry-note,.controls .scope-note{display:none}
 .controls .parameter{display:none;padding:12px 0 0;border:0;order:1}
 .controls .parameter.mobile-active{display:block}
 .controls .parameter label{font-size:12px}.controls .parameter output{font-size:18px}
 .controls .parameter input{margin:14px 0 12px;height:5px}
 .controls .range-ends{font-size:11px;color:#748ba4}
 .mobile-parameter-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#5f7f9f}
 #mobile-parameter{border:1px solid #d8e4f1;border-radius:5px;padding:6px 28px 6px 10px;color:#2a5fb4;background:#f3f7fe;font-size:12px;max-width:70%}
 .option{font-size:12px}.answer-status{font-size:10px}.feedback p{font-size:13px}
 .module-footer,.module-footer .text-button{font-size:11px}.observation p{color:#70879f}
}
.anatomy-view-switch{position:absolute;top:46px;left:20px;z-index:3;display:flex;gap:2px;background:#ffffffb8;padding:3px;border:1px solid #d6e3ee;border-radius:5px}
.anatomy-view-switch button{border:0;background:transparent;padding:6px 12px;font-size:11px;color:#7c94ab;border-radius:3px}
.anatomy-view-switch button.selected{background:#e8f0fc;color:#2b5cba;font-weight:600}
@media(max-width:600px){.anatomy-view-switch{top:34px;left:9px;padding:2px}.anatomy-view-switch button{padding:4px 8px;font-size:10px}}
#expand-anatomy{display:none}.top-orientation{position:absolute;top:30%;bottom:27%;right:12px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;font-size:12px;font-weight:600;color:#527b92}.feedback .correction-detail{padding:10px 13px;border-left:2px solid #80aaa7;color:#387a76;background:#f0f7f6}
.mobile-tip{display:none}
.anatomy-mode{position:absolute;top:48px;right:14px;z-index:3;background:#fff;border:1px solid #cedee9;border-radius:4px;padding:6px 8px;color:#3c6683;font-size:11px;max-width:45%}
.body-context{position:absolute;bottom:77px;left:14px;right:14px;color:#53788c;text-align:center;font-size:11px;line-height:1.6;pointer-events:none}
.scene-tag{position:absolute;z-index:2;pointer-events:none;color:#34667e;background:#f8fcffed;border:1px solid #c9dfe8;border-radius:4px;font-size:10px;padding:3px 6px;transform:translate(-50%,14px);white-space:nowrap}
@media(min-width:901px){.stage-grid{grid-template-columns:1.12fr 1fr}}
.parameter.group-start:before{content:attr(data-group);display:block;color:#708ba3;font-size:10px;letter-spacing:1px;margin-bottom:13px}
.region-switch{display:flex;align-items:center;gap:5px;margin:0 0 18px;border-bottom:1px solid var(--line);padding-bottom:12px}.region-switch button{border:1px solid transparent;border-radius:6px;padding:10px 25px;color:#6d859e;background:transparent;font-size:14px}.region-switch button.selected{color:#2554cb;background:#e6eefc;border-color:#cbdcf4;font-weight:600}.region-switch>span{margin-left:auto;font-size:11px;color:#8b9fb4}.controls .parameter{padding:17px 0 12px}.controls .joint-parameter{border-bottom-color:#cee3e8}.joint-parameter output{color:#168181}.criteria-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.criteria-card{grid-template-columns:1fr;gap:12px}.criteria-card img{height:260px;object-fit:contain;background:#000}.criteria-card>p{margin:0;color:#70879c}.criteria-top{grid-column:auto}
@media(max-width:900px){.criteria-grid{grid-template-columns:1fr}.criteria-card{grid-template-columns:180px 1fr}.criteria-top{grid-column:1/-1}.criteria-card img{grid-row:span 2}.controls .parameter{padding:15px 0 12px}}
@media(max-width:600px){.region-switch{gap:2px;margin-bottom:12px;padding-bottom:10px}.region-switch button{padding:8px 16px;font-size:12px}.region-switch>span{display:none}.segmented button{padding:8px 8px;font-size:11px}.viewer-toolbar{padding:10px}.controls .parameter{padding:12px 0 0}.criteria-card{grid-template-columns:112px 1fr}.criteria-card img{height:180px}.quiz-progress{max-width:100%;flex-wrap:wrap}.quiz-progress span{width:14px}}
@media(max-width:600px){
 #expand-anatomy{display:block;border-left:1px solid #d6e3ee;border-radius:0;margin-left:2px;padding-left:7px}
 .anatomy-view-switch{top:0;left:0;right:0;justify-content:center;border-radius:0;border:0;border-bottom:1px solid #d6e3ee;background:#f7fafd;height:32px}
 .anatomy-stage figcaption{top:38px}.anatomy-stage canvas{height:calc(100% - 32px);align-self:flex-end;margin-top:32px}
 .top-orientation{right:5px;font-size:9px;top:31%;bottom:29%}
 .stage-grid.anatomy-expanded{grid-template-columns:1fr;height:clamp(300px,calc(100svh - 420px),400px)}.anatomy-expanded .radiograph-stage{display:none}
 .anatomy-expanded .top-orientation{right:20%;font-size:12px}
 .anatomy-legend{font-size:8px;flex-wrap:wrap;max-width:95%;gap:3px}
}
@media(max-width:600px){
 body:has(#lab:not([hidden])){padding-bottom:260px}
 .page-heading:has(#start-quiz) p{display:none}
 .page-heading:has(#start-quiz){margin-bottom:14px}
 .stage-grid,.anatomy-stage,.radiograph-stage{height:clamp(140px,calc(100svh - 510px),300px)}
 .anatomy-stage,.radiograph-stage{height:100%}
 .controls{padding:12px 20px 16px;min-height:230px;max-height:256px}
 .mobile-tip{display:grid;gap:4px;order:-1;color:#587690;font-size:12px;line-height:1.55;margin-bottom:10px}
 .mobile-tip strong{color:#294f6d;font-weight:600}
 .observation{display:none}
 .controls .parameter.group-start:before{display:none}
 .stage-grid.anatomy-expanded{height:clamp(240px,calc(100svh - 420px),400px)}
}

@media(max-width:600px) and (max-height:720px){
 .site-header{min-height:44px;padding:0 16px}
 .site-header .brand{display:none}
 .module-footer{display:none}
 .site-header nav{height:44px}
 .page{padding-top:14px}
 .page-heading:has(#start-quiz){display:none}
 .stage-grid{height:clamp(180px,calc(100svh - 427px),300px)}
 .stage-grid.anatomy-expanded{height:clamp(180px,calc(100svh - 420px),300px)}
}
@media(max-width:600px){
 .anatomy-mode{top:33px;left:6px;right:6px;max-width:none;width:calc(100% - 12px);padding:4px 6px;font-size:10px}
 .anatomy-stage figcaption{top:68px;font-size:9px}
 .anatomy-stage canvas{height:calc(100% - 62px);margin-top:62px}
 .body-context{display:none}
 .anatomy-expanded .body-context{display:block;font-size:11px;bottom:55px}
 .scene-tag{font-size:8px;padding:2px 3px;transform:translate(-50%,8px)}
 .stage-grid.anatomy-expanded{position:fixed;inset:12px 12px 268px;z-index:4;height:auto!important;max-height:none;border:1px solid #c9dce9;border-radius:10px;box-shadow:0 8px 40px #1d486b22;overflow:hidden}
 .anatomy-expanded .anatomy-stage{height:100%;width:100%}
 .anatomy-expanded .anatomy-stage canvas{position:absolute;left:0;top:66px;margin:0;height:calc(100% - 138px);width:100%}
 .anatomy-expanded .body-context{bottom:28px;left:0;right:0;padding:6px 12px;background:#edf5f9;border-top:1px solid #dce8ee;min-height:30px}
 .anatomy-expanded .anatomy-legend{display:none}
 .anatomy-expanded .scene-tag{font-size:11px;padding:3px 6px}
 .anatomy-expanded .drag-hint{bottom:4px}
}

.standard-reference{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:32px;margin:28px 0;background:#eaf3f8;border:1px solid #c7dce7;border-radius:16px}.standard-reference[hidden]{display:none}.standard-reference img{max-width:100%;height:560px;object-fit:contain}.standard-reference p{line-height:1.7;color:#3c6074}.standard-reference a{color:#087c9e}@media(max-width:600px){.standard-reference{grid-template-columns:1fr;padding:20px}.standard-reference img{height:460px}}

/* Presentation Mode (CP1) */
.films-split{display:flex;flex-direction:column;width:100%;height:100%;position:relative}
.film-box{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;width:100%;height:100%;flex:1;min-height:0}
.film-tag-bar{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#94a3b8;margin-bottom:6px}
.film-tag{background:#1e293b;color:#cbd5e1;padding:3px 8px;border-radius:4px;font-size:11px}
.film-preset-tag{color:#38bdf8}
.projection-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:100%;width:auto;max-width:100%;object-fit:contain;aspect-ratio:440/560;pointer-events:none;z-index:2}

/* Quantitative Readout Bar */
.readout-bar{margin-top:10px;padding:8px 14px;background:rgba(15,23,42,0.85);border:1px solid rgba(56,189,248,0.2);border-radius:6px;width:100%;max-width:440px;box-sizing:border-box}
.readout-items{display:flex;justify-content:space-around;align-items:baseline;gap:12px}
.readout-item{display:flex;flex-direction:column;align-items:center}
.readout-item .readout-label{font-size:11px;color:#94a3b8;font-weight:500;white-space:nowrap}
.readout-item .readout-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;font-weight:700;color:#38bdf8}
.readout-def{margin-top:4px;font-size:10px;color:#64748b;text-align:center;line-height:1.4}

/* Presentation Top Bar */
.present-topbar{position:fixed;top:0;left:0;right:0;height:46px;background:#0f172a;border-bottom:1px solid #1e293b;display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:900}
.present-left{display:flex;align-items:center;gap:12px}
.present-badge{background:#2563eb;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:1px}
.present-region-switch{display:flex;gap:4px;background:#1e293b;padding:2px;border-radius:4px}
.present-presets{display:flex;gap:4px}
.present-btn{background:#1e293b;border:1px solid #334155;color:#cbd5e1;padding:5px 10px;border-radius:4px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.present-btn:hover{background:#334155;color:#fff}
.present-btn.selected,.present-btn[aria-pressed="true"]{background:#0284c7;border-color:#38bdf8;color:#fff;font-weight:600}
.present-btn-exit{background:#3f1d24;border-color:#991b1b;color:#fca5a5}
.present-btn-exit:hover{background:#7f1d1d;color:#fff}
.present-right{display:flex;align-items:center;gap:6px}

/* Shortcut Hint Card */
.present-card{position:fixed;bottom:20px;right:20px;width:320px;background:rgba(15,23,42,0.95);border:1px solid #334155;border-radius:8px;padding:14px 16px;color:#cbd5e1;box-shadow:0 10px 30px rgba(0,0,0,0.5);z-index:950;backdrop-filter:blur(8px)}
.present-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #1e293b}
.present-card-header strong{font-size:13px;color:#f1f5f9}
.card-close{background:none;border:none;color:#94a3b8;font-size:16px;cursor:pointer;padding:0 4px}
.card-close:hover{color:#fff}
.shortcut-list{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:12px}
.shortcut-list div{display:contents}
.shortcut-list dt{white-space:nowrap}
.shortcut-list dd{margin:0;color:#94a3b8}
kbd{display:inline-block;padding:2px 5px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;background:#1e293b;border:1px solid #475569;border-radius:3px;color:#f8fafc;box-shadow:0 1px 0 #0f172a}

/* Drawer Header */
.drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #334155}
.drawer-title{font-size:16px;font-weight:700;color:#f1f5f9}
.drawer-close-btn{background:#334155;border:none;color:#cbd5e1;padding:4px 10px;border-radius:4px;font-size:12px;cursor:pointer}
.drawer-close-btn:hover{background:#475569;color:#fff}

/* PRESENT MODE FULL SCREEN RULES */
html:has(body.present-mode),
body.present-mode{
  margin:0!important;padding:0!important;width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;overflow:hidden!important;background:#0b131b!important;color:#e2e8f0;position:fixed!important;inset:0!important;
}
body.present-mode .site-header,
body.present-mode .site-footer,
body.present-mode .page-heading,
body.present-mode .replay-bar,
body.present-mode .module-footer,
body.present-mode .region-switch,
body.present-mode .observation,
body.present-mode .viewer-toolbar{
  display:none!important;
}
body.present-mode .page#lab{
  display:flex!important;flex-direction:column!important;padding:0!important;margin:0!important;max-width:none!important;width:100vw!important;height:calc(100vh - 46px)!important;position:absolute!important;top:46px!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important;
}
body.present-mode .workbench{
  display:block!important;height:100%!important;margin:0!important;
}
body.present-mode .imaging-column{
  height:100%!important;border:none!important;border-radius:0!important;background:transparent!important;
}
body.present-mode .stage-grid{
  display:grid!important;grid-template-columns:1fr 1fr!important;height:100%!important;gap:2px!important;background:#1e293b!important;border:none!important;
}
body.present-mode .anatomy-stage,
body.present-mode .radiograph-stage{
  min-height:0!important;height:100%!important;border-radius:0!important;
}
body.present-mode .anatomy-stage{
  background:#0f172a!important;
}
body.present-mode .anatomy-stage canvas{
  max-height:none!important;height:100%!important;width:100%!important;object-fit:contain!important;
}
body.present-mode .radiograph-stage{
  background:#090d14!important;padding:12px 16px!important;
}
body.present-mode .radiograph-stage figcaption{
  display:none!important;
}
body.present-mode .radiograph-stage .film{
  height:calc(100% - 90px)!important;background:transparent!important;margin:0!important;
}
body.present-mode .readout-bar{
  margin-top:8px!important;max-width:none!important;
}
body.present-mode .readout-item .readout-value{
  font-size:24px!important;
}
body.present-mode .readout-item .readout-label{
  font-size:13px!important;
}
body.present-mode .readout-def{
  font-size:11px!important;
}
body.present-mode .compare-button{
  display:none!important;
}

/* Compare side-by-side in Present Mode */
body.present-mode .films-split.comparing{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;width:100%!important;height:100%!important;
}
body.present-mode .films-split.comparing .film{
  height:calc(100% - 110px)!important;
}

/* Controls Drawer in Present Mode */
body.present-mode .controls{
  position:fixed!important;top:46px!important;right:-370px!important;width:350px!important;height:calc(100vh - 46px)!important;max-height:calc(100vh - 46px)!important;box-sizing:border-box!important;z-index:920!important;background:#0f172a!important;border-left:1px solid #1e293b!important;border-radius:0!important;box-shadow:-6px 0 24px rgba(0,0,0,0.6)!important;transition:right 0.25s cubic-bezier(0.16,1,0.3,1)!important;padding:20px!important;overflow-y:auto!important;display:block!important;
}
body.present-mode .controls.drawer-open{
  right:0!important;
}
body.present-mode .controls label{color:#e2e8f0}
body.present-mode .controls .control-heading h2{color:#f8fafc}
body.present-mode .controls .control-heading p{color:#94a3b8}
body.present-mode .controls .parameter{border-bottom-color:#1e293b}
body.present-mode .controls .mobile-parameter-label{display:none!important}
body.present-mode .controls .mobile-tip{display:none!important}

/* Toast in Present Mode */
.present-toast{
  position:fixed!important;
  top:60px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  background:rgba(15,23,42,0.92)!important;
  color:#f1f5f9!important;
  padding:8px 18px!important;
  border-radius:6px!important;
  border:1px solid #334155!important;
  font-size:14px!important;
  box-shadow:0 4px 16px rgba(0,0,0,0.5)!important;
  z-index:999!important;
  pointer-events:none!important;
  transition:opacity 0.2s ease!important;
}

/* High contrast for anatomy figcaption in Present Mode */
body.present-mode .anatomy-stage figcaption{
  background:rgba(15,23,42,0.85)!important;
  color:#f1f5f9!important;
  padding:4px 10px!important;
  border-radius:4px!important;
  border:1px solid #334155!important;
  backdrop-filter:blur(4px)!important;
  width:fit-content!important;
}
body.present-mode .anatomy-stage figcaption .step{
  color:#38bdf8!important;
}

.perf-badge{position:absolute;left:10px;bottom:10px;z-index:3;padding:3px 9px;border-radius:999px;background:rgba(15,23,42,.78);color:#fbbf24;font-size:12px;letter-spacing:.02em;pointer-events:none}

/* Contact Author Entry & Dialog */
.contact-trigger{
  border:1px solid var(--blue);
  color:var(--blue);
  background:#fff;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  height:34px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.contact-trigger:hover{
  background:#edf3fc;
}
@media(max-width:600px){
  .contact-trigger{
    margin-left:auto;
    font-size:12px;
    height:30px;
    padding:0 10px;
  }
}
@media(max-width:600px) and (max-height:720px){
  .contact-trigger{
    display:none;
  }
}
.footer-contact{
  border:none;
  background:none;
  padding:0;
  color:inherit;
  font-size:inherit;
  cursor:pointer;
  text-decoration:none;
}
.footer-contact:hover{
  text-decoration:underline;
}
.contact-dialog{
  border:none;
  border-radius:16px;
  background:#fff;
  padding:24px;
  width:min(360px,calc(100vw - 32px));
  box-sizing:border-box;
  box-shadow:0 12px 36px rgba(15,30,50,.18);
  color:#19324b;
  position:fixed;
  inset:0;
  margin:auto;
}
.contact-dialog::backdrop{
  background:rgba(15,30,50,.45);
}
.contact-dialog h2{
  font-size:18px;
  margin:0 0 10px;
  font-weight:650;
  color:#19324b;
}
.contact-dialog p{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  margin:0 0 14px;
}
.contact-close{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  background:#f0f4f9;
  color:var(--muted);
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
}
.contact-close:hover{
  background:#e2ebf5;
  color:#19324b;
}
.contact-qr{
  margin:0 auto 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.contact-qr img{
  width:100%;
  max-width:240px;
  height:auto;
  display:block;
  border-radius:8px;
  margin:0 auto;
}
.contact-qr figcaption{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.qr-mobile{
  display:none;
}
@media(hover:none) and (pointer:coarse){
  .qr-desktop{
    display:none;
  }
  .qr-mobile{
    display:inline;
  }
}
.contact-lines{
  margin:12px 0 0;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:var(--muted);
}
.contact-lines a{
  color:var(--blue);
  text-decoration:none;
}
.contact-lines a:hover{
  text-decoration:underline;
}
body.present-mode .contact-trigger{
  display:none!important;
}
.site-header .tab{white-space:nowrap}
@media(min-width:601px) and (max-width:900px){.site-header{gap:20px}.site-header nav{gap:16px}}
.contact-dialog{max-height:calc(100dvh - 32px);overflow-y:auto}
.contact-qr img{max-width:200px;border-radius:4px}
/* Phone layout: contact sits beside the brand, compare moves off the readouts. */
@media(max-width:600px){
 .site-header .brand{order:0}.contact-trigger{order:1}.site-header nav{order:2}
 .compare-button{top:6px;bottom:auto;right:8px;font-size:10px;padding:6px 9px}
 .anatomy-mode{min-height:30px}
 .footer-contact{padding:10px 0}
}