:root{color-scheme:dark;--bg:#10191f;--panel:#17252d;--panel-2:#1d303a;--line:#334b56;--text:#ecf1ed;--muted:#a8b8be;--mint:#91dfc9;--amber:#efbd78;--red:#a84941;--fixed:#e3d4ad;--mobile:#77c9bd}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}h1,h2,h3,p{margin:0}button,select,input{font:inherit}button,select{color:var(--text);border:1px solid var(--line);border-radius:7px;background:var(--panel-2);padding:9px 11px}button{cursor:pointer;transition:border-color .16s,background .16s}button:hover,select:hover{border-color:var(--mint)}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--mint);border-color:var(--mint);color:#102923;font-weight:650}button.secondary{background:#20333d}button.wide{width:100%;margin-top:8px}.topbar{min-height:92px;padding:17px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);background:#121e25}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.65px;color:var(--mint)}h1{font-size:24px;line-height:1.2;letter-spacing:-.55px;font-weight:580;margin-top:3px}.topbar p{font-size:12px;color:var(--muted);margin-top:4px}.tag{white-space:nowrap;color:var(--amber);border:1px solid #665139;border-radius:20px;padding:5px 10px;font-size:11px}.layout{max-width:1920px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 344px;min-height:calc(100vh - 150px)}.scene-panel{min-width:0;padding:18px 18px 14px;display:flex;flex-direction:column}.scene-tools{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:10px}.scene-title{display:flex;flex-direction:column}.scene-title #scene-mode{font-size:15px;font-weight:600}.scene-hint{font-size:11px;color:var(--muted);margin-top:2px}.tool-buttons{display:flex;gap:6px}.tool-buttons button{padding:7px 9px;font-size:11px}.tool-buttons button.selected{border-color:var(--mint);color:var(--mint);background:#1e3a3a}.viewport{position:relative;flex:1;min-height:500px;height:calc(100vh - 220px);max-height:920px;overflow:hidden;border:1px solid #354a54;border-radius:11px;background:radial-gradient(ellipse at 50% 46%,#31444b 0%,#1b2b33 60%,#111d24 100%);touch-action:none}canvas{width:100%;height:100%;display:block}.scene-footer{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;padding:8px 2px 0}.scene-badges{position:absolute;left:13px;top:13px;display:grid;gap:6px;pointer-events:none}.scene-badges span{display:flex;align-items:center;gap:7px;padding:4px 7px;border:1px solid #58707999;border-radius:5px;background:#102029d9;color:#dbe4df;font-size:10px}.swatch{width:9px;height:9px;display:inline-block;border-radius:50%}.swatch.fixed{background:var(--fixed)}.swatch.mobile{background:var(--mobile)}.swatch.cut{background:var(--red)}.glenoid-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:3px 6px;color:#a8efd8;background:#12382bd9;border:1px solid #67c7a4;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.65px;white-space:nowrap;pointer-events:none}.glenoid-label.hidden{display:none}.orientation{position:absolute;right:13px;bottom:12px;display:flex;flex-direction:column;align-items:center;gap:70px;color:#b4c7ce;font-size:9px;letter-spacing:1px;pointer-events:none}.orientation span:first-child:after{content:"↑";display:block;text-align:center;color:var(--mint);font-size:14px}.orientation span:last-child:before{content:"↓";display:block;text-align:center;color:var(--mint);font-size:14px}.loading{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:#132129eF;color:var(--mint);font-size:13px;text-align:center}.loading span{color:var(--muted);font-size:11px}.loading.hidden{display:none}.spinner{width:27px;height:27px;border:2px solid #416461;border-top-color:var(--mint);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.controls{background:#142128;border-left:1px solid var(--line);padding:17px 17px 24px}.control-section{padding-bottom:16px;margin-bottom:15px;border-bottom:1px solid #2a3d46}.section-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}.step-number{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#233d40;color:var(--mint);font-size:10px;font-weight:700}.section-heading h2{font-size:14px;font-weight:600;line-height:1.25}.section-heading p{font-size:10px;color:var(--muted);margin-top:2px}.field-label{display:block;color:#c1cdd0;font-size:11px;margin:9px 0 5px}.controls select{width:100%;padding:8px 9px;font-size:12px}.range-label{display:flex;justify-content:space-between;align-items:center;color:#c1cdd0;font-size:11px;margin:12px 0 3px}.range-label output{color:var(--text);font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:15px;margin:0;accent-color:var(--mint)}.button-row{display:flex;gap:7px;margin-top:9px}.button-row>*{flex:1;min-width:0;font-size:11px;padding:8px}.micro-note{color:var(--muted);font-size:10px;line-height:1.4;margin-top:8px}.progress-track{height:4px;border-radius:4px;background:#293c44;overflow:hidden;margin:2px 0 10px}.progress-track span{display:block;width:0;height:100%;background:var(--mint);transition:width .4s}.stage-card{padding:10px 11px;border:1px solid #38504f;border-radius:8px;background:#1a3032}.stage-card span{display:block;color:var(--mint);font-size:9px;letter-spacing:1px;font-weight:700}.stage-card strong{display:block;font-size:13px;margin-top:3px}.stage-card p{font-size:10px;color:#b9c8c7;line-height:1.45;margin-top:4px}.axis-controls{display:grid;gap:7px;margin-top:11px}.axis-controls label{display:grid;grid-template-columns:67px minmax(70px,1fr) 45px;gap:7px;align-items:center;color:#c1cdd0;font-size:10px}.axis-controls input{min-width:0}.axis-controls output{text-align:right;color:var(--text);font-size:10px;font-variant-numeric:tabular-nums}.check{display:flex;align-items:center;gap:8px;font-size:11px;color:#c4cfd0;margin-top:8px}.check input{accent-color:var(--mint)}.status{padding:9px 10px;border:1px solid #3c5e53;border-radius:7px;background:#1c342d;color:#d3e8dd;font-size:10px;line-height:1.45;min-height:38px}footer{max-width:1920px;margin:auto;border-top:1px solid var(--line);padding:14px 20px;color:var(--muted)}details{font-size:11px}summary{cursor:pointer;color:#dce8e2}details[open] summary{margin-bottom:12px}.footer-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;max-width:1300px}.footer-grid h3{font-size:11px;color:var(--mint);margin-bottom:5px}.footer-grid p{font-size:10px;line-height:1.5;margin-top:5px}.footer-grid a{color:#a7ddce}.credit{font-size:10px;margin-top:11px;color:#7e929a}
.load-error{display:grid;gap:9px;max-width:430px;padding:20px;color:#e6eee9}.load-error span{line-height:1.5}
.anatomy-label{position:absolute;transform:translate(-50%,-50%);padding:3px 5px;border-radius:4px;font-size:8px;font-weight:750;letter-spacing:.55px;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #000}.anatomy-label.hidden{display:none}.side-label{color:#e8ede5;background:#17262bd9;border:1px solid #bac8c0}
@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 310px}.viewport{height:calc(100vh - 220px);min-height:440px}.controls{padding:15px 13px}.scene-panel{padding:14px}.scene-tools{align-items:flex-start;flex-direction:column}.scene-tools .tool-buttons{align-self:flex-end;margin-top:-37px}}
@media(max-width:760px){.topbar{padding:14px 15px;align-items:flex-start}.topbar h1{font-size:21px}.tag{display:none}.layout{display:flex;flex-direction:column}.scene-panel{padding:11px}.viewport{height:58vh;min-height:390px;max-height:720px}.scene-tools{gap:8px}.scene-tools .tool-buttons{margin:0;align-self:flex-start}.scene-footer{font-size:10px}.controls{border-left:0;border-top:1px solid var(--line);padding:16px}.control-section{max-width:650px}.footer-grid{grid-template-columns:1fr;gap:12px}.orientation{gap:58px}}
@media(max-width:420px){h1{font-size:19px}.topbar p{max-width:280px}.tool-buttons button{font-size:10px;padding:7px}.scene-hint{font-size:10px}.viewport{min-height:350px}.scene-badges{left:7px;top:7px}.scene-badges span{font-size:9px}.scene-footer{flex-direction:column;gap:2px}.button-row>*{font-size:10px;padding:8px 5px}}