/* Component styles are scoped: shared header, calculators and home sculpture stay untouched. */
.page:has(>#benmarg.active){max-width:none;width:100%;padding:0}
.main:has(#benmarg.active)>.footer{display:none}
#benmarg{color:var(--ink);font:inherit;line-height:1.5}
#benmarg .title-dot{color:var(--teal)}
#benmarg button{font-family:inherit;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--body);border-radius:6px;padding:10px 12px;font-size:12px;line-height:1.4;transition:background .18s,border-color .18s,color .18s}
#benmarg button:hover:not(:disabled){color:var(--teal);background:var(--aqua);border-color:#bc7972}
#benmarg button:disabled{opacity:.4;cursor:default}
#benmarg button:focus-visible,#benmarg a:focus-visible,#benmarg input:focus-visible,#benmarg summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
#benmarg button svg{width:18px;height:18px;display:block}
#benmarg .simulator-workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;height:calc(100dvh - 85px);min-height:550px}
#benmarg #bm-stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 45% 45%,#3b4948,#202829 76%);color:#dce6dd}
#benmarg #bm-viewport{position:absolute;inset:0}
#benmarg #bm-viewport canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
#benmarg .scene-caption{position:absolute;top:20px;left:25px;pointer-events:none;font-size:10px;letter-spacing:.25px;color:#a7b4ac;margin:0}
#benmarg .view-tools{position:absolute;right:20px;top:16px;display:flex;gap:7px}
#benmarg .view-tools button{color:#d2ddd2;border:1px solid #607169;background:#2a3534;padding:8px}
#benmarg .view-tools button:hover{background:#43534b;color:white;border-color:#aab8ad}
#benmarg .scene-bottom{position:absolute;bottom:48px;left:0;right:0;text-align:center;pointer-events:none}
#benmarg #bm-gestureHint{font-size:9px;color:#a6b4aa;margin:13px 15px 0;letter-spacing:.15px}
#benmarg .model-note{pointer-events:none;position:absolute;bottom:16px;left:24px;font-size:8px;color:#9ba99f;letter-spacing:1.3px}
#benmarg .model-note span{letter-spacing:0;color:#7f9184}
#benmarg #bm-panel{background:var(--card);border-left:1px solid var(--border);position:relative;overflow:auto;display:flex;flex-direction:column}
#benmarg .tabs{display:flex;border-bottom:1px solid var(--border);padding:8px 22px 0;position:sticky;top:0;background:var(--card);z-index:4;gap:24px}
#benmarg .tabs button{border:0;border-radius:0;padding:14px 0;border-bottom:2px solid transparent;background:none;font-size:12px;color:var(--muted)}
#benmarg .tabs button.active{color:var(--ink);border-bottom-color:var(--teal)}
#benmarg .tabs button:hover{background:transparent;color:var(--teal)}
#benmarg .tab-content{padding:4px 24px 26px}
#benmarg .step-label{display:flex;align-items:center;gap:10px;margin:24px 0 14px;font-size:12px}
#benmarg .step-label>span{font-size:9px;color:var(--muted);border:1px solid var(--border);border-radius:50%;width:23px;height:23px;display:grid;place-items:center}
#benmarg .step-label b{font-weight:500}
#benmarg .step-label small{margin-left:auto;font-size:9px;color:var(--muted)}
#benmarg .tool-row{display:flex;gap:7px}
#benmarg .tool-row button{flex:1;font-size:11px;padding:10px 7px}
#benmarg .hint{font-size:10px;line-height:1.65;color:var(--muted);margin:10px 0 14px}
#benmarg fieldset{border:0;margin:0;padding:0;min-width:0}
#benmarg label{display:block;font-size:11px;margin:16px 0 8px;color:var(--body)}
#benmarg output{float:right;font-variant-numeric:tabular-nums;color:var(--teal);font-size:10px}
#benmarg input,#benmarg select{font:inherit}
#benmarg input[type=range]{width:100%;height:4px;accent-color:var(--teal);margin:7px 0 17px;cursor:pointer}
#benmarg input[type=checkbox]{accent-color:var(--teal);margin:0 7px 0 0;vertical-align:middle}
#benmarg input:disabled{opacity:.45;cursor:default}
#benmarg .primary{background:var(--teal);color:white;border-color:var(--teal);width:100%;padding:12px}
#benmarg .primary:hover:not(:disabled){background:#9f3029;color:white;border-color:#9f3029}
#benmarg .wide{width:100%;margin:10px 0}
#benmarg #bm-resistance{display:flex;align-items:center;font-size:9px;gap:12px;color:var(--muted);margin:15px 0}
#benmarg #bm-resistance>div{height:4px;background:var(--border);flex:1;border-radius:2px;overflow:hidden}
#benmarg #bm-resistance i{display:block;height:100%;width:0;background:#aa7b60;transition:width .15s}
#benmarg details{border-top:1px solid var(--border);padding-top:16px;margin-top:24px}
#benmarg summary{font-size:11px;cursor:pointer;color:var(--body)}
#benmarg select{width:100%;padding:9px 30px 9px 10px;border:1px solid var(--border);border-radius:6px;background-color:transparent;font-size:11px;color:var(--ink)}
#benmarg .simulator-panel-note{padding:16px 24px;border-top:1px solid var(--border);font-size:9px;color:var(--muted);margin-top:auto}
#benmarg .feature{padding-top:15px;margin-top:19px;border-top:1px solid var(--border)}
#benmarg .layer{padding:18px 0 12px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 30px;align-items:center;gap:4px}
#benmarg .layer label{margin:0}
#benmarg .layer button{padding:3px;font-size:15px;border:0;min-height:25px}
#benmarg .layer .layer-opacity{grid-column:1/-1;margin:8px 0 0;font-size:10px;color:var(--muted)}
#benmarg .layer input[type=range]{grid-column:1/-1;margin:10px 0 5px}
#benmarg #bm-tipBadge{position:absolute;bottom:145px;left:50%;transform:translateX(-50%);padding:8px 13px;background:#213027df;border:1px solid #718a6b55;border-radius:20px;font-size:10px;white-space:nowrap}
#benmarg .status-dot{display:inline-block;width:5px;height:5px;background:#90ab91;border-radius:50%;margin-right:8px}
#benmarg #bm-lens{position:absolute;border:1px solid #bfd8c799;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px #0002}
#benmarg #bm-sliceWindow{position:absolute;bottom:108px;right:20px;width:320px;background:var(--card);border:1px solid var(--border);color:var(--ink);border-radius:8px;box-shadow:0 12px 35px #0005;overflow:hidden}
#benmarg #bm-sliceWindow>div{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font-size:10px}
#benmarg #bm-sliceWindow button{border:0;padding:2px 8px;font-size:17px}
#benmarg #bm-slice{width:100%;height:auto;display:block}
#benmarg #bm-sliceWindow p{font-size:9px;line-height:1.5;padding:0 14px;color:var(--muted)}
#benmarg #bm-result{margin:20px 0;padding:14px;background:var(--aqua);border-radius:6px}
#benmarg #bm-result b{font-size:12px;font-weight:500}
#benmarg #bm-result p{font-size:11px;line-height:1.6;margin:9px 0}
#benmarg #bm-specimen{width:100%;height:auto;display:block;border-radius:4px}
#benmarg #bm-loading{position:absolute;inset:0;background:#263130;display:grid;place-content:center;font-size:12px;letter-spacing:.5px;z-index:9;gap:20px;text-align:center}
#benmarg #bm-loading span{width:180px;height:2px;background:#8fa795;animation:bm-loading 1.5s infinite}
@keyframes bm-loading{50%{opacity:.2}}
#benmarg #bm-fallback{position:absolute;inset:25%;font-size:12px;color:#d3dfd4}
#benmarg #bm-fallback h2{font-size:20px;font-weight:400}
#benmarg dialog{border:1px solid var(--border);border-radius:10px;background:var(--canvas);color:var(--ink);width:min(520px,90vw);padding:36px}
#benmarg dialog::backdrop{background:#16221ee0}
#benmarg dialog h2{font:400 26px/1.3 Georgia,serif;margin:0 0 20px}
#benmarg dialog p{font-size:12px;line-height:1.8}
#benmarg dialog small{font-size:10px;color:var(--muted)}
#benmarg .dialog-close{position:absolute;right:12px;top:10px;border:0;font-size:20px}
#benmarg.panel-hidden .simulator-workspace{grid-template-columns:1fr}
#benmarg.panel-hidden #bm-panel{display:none}
@media(min-width:1550px){#benmarg .simulator-workspace{grid-template-columns:minmax(0,1fr) 350px}}
@media(max-width:800px){#benmarg .simulator-workspace{display:flex;flex-direction:column;height:auto;min-height:0}#benmarg #bm-stage{height:64dvh;min-height:430px}#benmarg #bm-panel{border-left:0;border-top:1px solid var(--border);max-height:none;overflow:visible}#benmarg .tabs{position:static}#benmarg.panel-hidden #bm-stage{height:calc(100dvh - 85px)}#benmarg .tab-content{padding:4px 24px 26px}#benmarg #bm-sliceWindow{width:270px;right:12px}}
@media(prefers-reduced-motion:reduce){#benmarg *{animation:none!important;transition:none!important}}
#benmarg .tabs.work-tabs{margin:0;flex-shrink:0}

#benmarg .tool-row button.active{background:var(--aqua);border-color:var(--teal);color:var(--teal)}

/* Shared header actions occupy the same right-hand slot as the blood droplet. */
.simulator-header-actions{display:none;align-items:center;gap:14px;flex:0 0 auto}
body:has(#benmarg.active) .sidebar>.header-drop{display:none}
body:has(#benmarg.active) .simulator-header-actions{display:flex}
.simulator-header-actions button{font:500 12px/1.4 Arial,Helvetica,sans-serif;color:var(--body);background:transparent;border:1px solid transparent;border-radius:7px;padding:8px 10px;cursor:pointer;transition:color .18s,background .18s,border-color .18s}
.simulator-header-actions button:hover{color:var(--teal);background:var(--aqua);border-color:var(--border)}
.simulator-header-actions .simulator-help{width:31px;height:31px;padding:0;border-color:var(--border);border-radius:50%;font-size:15px}
#benmarg .simulator-workspace{height:calc(100dvh - 85px)}
#benmarg .landmark-point{position:absolute;width:9px;height:9px;transform:translate(-50%,-50%);border:2px solid #fff3e9;border-radius:50%;background:#bb3b32;box-shadow:0 0 0 3px #bb3b3229;pointer-events:none}
#benmarg #bm-place.active{background:var(--aqua);color:var(--teal);border-color:var(--teal)}
@media(max-width:1000px){#benmarg .simulator-workspace{grid-template-columns:minmax(0,1fr) 290px}#benmarg .tab-content{padding-left:20px;padding-right:20px}#benmarg .scene-caption{max-width:52%;font-size:9px}}
@media(max-width:800px){#benmarg .simulator-workspace{height:auto}#benmarg.panel-hidden #bm-stage{height:calc(100dvh - 85px)}}
@media(max-width:650px){.simulator-header-actions{gap:5px}.simulator-header-actions button{font-size:10px;padding:7px 5px}#benmarg.panel-hidden #bm-stage{height:calc(100dvh - 74px)}#benmarg .scene-caption{left:18px;top:18px}#benmarg .model-note{left:18px;font-size:7px}}

.simulator-header-actions .simulator-reset{display:flex;align-items:center;gap:7px}
.simulator-header-actions .simulator-reset svg{width:16px;height:16px}
@media(max-width:650px){.simulator-header-actions .simulator-reset{padding:7px}.simulator-header-actions .simulator-reset span{display:none}}
@media(max-width:450px){body:has(#benmarg.active) .sidebar{gap:10px}}

/* Compact procedure flow; the three stages remain visible and in order. */
#benmarg #bm-procedure{padding-top:0;padding-bottom:14px}
#benmarg #bm-procedure .step-label{margin:16px 0 8px;gap:8px}
#benmarg #bm-procedure .step-label:first-child{margin-top:12px}
#benmarg #bm-procedure .step-label>span{width:21px;height:21px;flex:0 0 21px}
#benmarg #bm-procedure button{padding:7px 9px;min-height:34px}
#benmarg #bm-procedure .tool-row button{padding:7px 5px;min-width:0}
#benmarg #bm-procedure .wide{margin:0}
#benmarg #bm-procedure .hint{margin:6px 0 8px;line-height:1.45}
#benmarg #bm-procedure .needle-angles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#benmarg #bm-procedure .needle-setting{min-width:0}
#benmarg #bm-procedure label{margin:6px 0 2px;line-height:1.4}
#benmarg #bm-procedure .needle-setting label,#benmarg #bm-procedure .volume-label{display:flex;justify-content:space-between;align-items:baseline;gap:5px}
#benmarg #bm-procedure output{float:none;white-space:nowrap;flex:0 0 auto}
#benmarg #bm-procedure input[type=range]{display:block;min-width:0;height:20px;margin:0 0 6px}
#benmarg #bm-procedure #bm-resistance{margin:6px 0 0;gap:9px}
#benmarg #bm-procedure .volume-label{margin-top:10px}
#benmarg #bm-procedure details{padding-top:10px;margin-top:14px}
#benmarg #bm-procedure #bm-result{margin:10px 0;padding:10px}
#benmarg #bm-procedure #bm-result p{margin:5px 0;line-height:1.45}
#benmarg #bm-procedure #bm-specimen{max-height:68px;object-fit:contain}
@media(pointer:coarse){
 #benmarg #bm-procedure button{min-height:44px}
 #benmarg #bm-procedure input[type=range]{height:28px}
}

/* Reuse the shared sliding two-option control, keeping native tab semantics. */
#benmarg .simulator-mode-wrap{position:sticky;top:0;z-index:4;flex-shrink:0;padding:6px 20px;background:var(--card)}
#benmarg .simulator-mode{display:grid;width:100%;margin:0}
#benmarg .simulator-mode>button{display:block;min-height:40px;padding:10px 16px;border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--body);font-size:12px;line-height:20px;text-align:center;font-weight:500;transition:color .2s ease}
#benmarg .simulator-mode>button[aria-selected=true],#benmarg .simulator-mode>button:hover{color:var(--teal);background:transparent;border:0}
#benmarg .simulator-mode>button:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
@media(max-width:800px){#benmarg .simulator-mode-wrap{position:static}}
@media(forced-colors:active){#benmarg .simulator-mode>button[aria-selected=true]{color:HighlightText}}