:root{font:14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;color:#244351;background:#edf2f0}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,a{touch-action:manipulation}button,select{cursor:pointer;border:1px solid #cad8dc;border-radius:6px;padding:7px 10px;color:inherit;background:#f9fcfb}button:hover{background:#e0ebed}button[aria-pressed=true],button.active{background:#245b70;color:white;border-color:#245b70}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #249bd0;outline-offset:3px}a{color:#28617b}header{height:58px;padding:10px 62px 10px 20px;border-bottom:1px solid #d3dfe0;display:flex;gap:16px;align-items:center;background:#f8fbfa}header strong{font-size:22px}header span{flex:1;font-size:12px}header a{font-size:12px}header select{max-width:140px;font-size:12px}main{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:calc(100dvh - 58px);min-height:580px}.workspace{min-width:0;display:flex;flex-direction:column;position:relative}#viewport{position:relative;flex:1;min-height:390px;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}.intro{position:absolute;top:18px;left:22px;right:18px;pointer-events:none}.intro p{font-size:10px;color:#537983;letter-spacing:1.5px;margin:0 0 6px}.intro h1{font-size:22px;line-height:1.25;margin:0;max-width:95%}.camera-tools{position:absolute;left:22px;top:112px;right:12px;display:flex;flex-wrap:wrap;gap:5px}.camera-tools button{font-size:11px;padding:6px 8px}.gesture{position:absolute;bottom:14px;left:22px;right:12px;color:#577780;font-size:10px;pointer-events:none}.label{position:absolute;left:0;top:0;font-size:10px;line-height:1.3;background:#fffffff0;padding:5px 7px;border:1px solid #b9cdd3;border-radius:5px;max-width:190px;pointer-events:none}.label:before{content:'';position:absolute;left:-9px;top:50%;width:9px;border-top:1px solid #8ba6ac}#labels{position:absolute;inset:0;pointer-events:none}#fallback{position:absolute;inset:165px 18px 40px;z-index:4;background:#f8fbfa;overflow:auto;padding:24px;text-align:center;border:1px solid #cad8dc;border-radius:8px}#fallback img{max-height:160px;max-width:100%;object-fit:contain}.timeline{padding:14px 20px 18px;border-top:1px solid #d3dfe0;background:#f8fbfa}.transport{display:flex;align-items:center;gap:10px}.transport strong{flex:1;font-size:12px;line-height:1.4}#play{width:39px;height:39px;border-radius:50%;background:#245b70;color:white;flex-shrink:0}#speed{font-size:11px;width:62px}#reset{font-size:11px}output{font-size:11px}input[type=range]{width:100%;accent-color:#287490;display:block;margin:14px 0 0;height:6px;cursor:pointer}#stageSelect{display:none}aside{border-left:1px solid #d3dfe0;background:#f8fbfa;overflow:auto;scrollbar-width:thin}aside section,aside details{padding:19px;border-bottom:1px solid #d3dfe0}h2{font-size:14px;margin:0 0 12px}#stageCount{float:right;font-size:11px;color:#68818b}.stage{display:flex;gap:10px;width:100%;border:0;text-align:left;background:transparent;font-size:12px;margin:3px 0}.stage span{font-size:10px;opacity:.65;padding-top:2px}.stage.active{background:#e3eef0;color:#21546a}#stageText,#partText{font-size:12px;line-height:1.8;color:#496d7d;margin:15px 0 0}.toggle{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:12px;margin:14px 0}.toggle input{accent-color:#287490;width:16px;height:16px;flex-shrink:0}#depthLabel{font-size:11px}details{font-size:11px;line-height:1.85}summary{cursor:pointer;font-size:12px}.modelnote{font-size:11px;line-height:1.75;color:#6c848d}#rotate{font-size:11px}#partTitle{margin:0}#orientation{font-size:10px;color:#667f88;margin-top:9px}#open{font-size:11px;display:block;margin-top:8px}[hidden]{display:none!important}
@media(max-width:720px){header{padding-left:14px;gap:9px}header span{display:none}header a{flex:1;font-size:11px}header select{max-width:110px}main{display:block;height:auto;min-height:0}.workspace{height:calc(100svh - 58px);min-height:610px}.intro{left:16px;top:16px}.intro h1{font-size:19px}.camera-tools{left:16px;top:114px;gap:4px}.camera-tools button{font-size:10px;padding:5px 7px}#viewport{min-height:380px}.gesture{left:16px;font-size:9px}.timeline{padding:12px 14px}.transport{gap:7px}.transport strong{font-size:11px}#reset{padding:6px}#stageSelect{display:block;width:100%;margin-top:14px;font-size:12px}aside{border-left:0;overflow:visible}#stages{display:grid;grid-template-columns:1fr 1fr}.stage{font-size:11px}.label{font-size:9px;max-width:155px}#fallback{inset:162px 12px 28px;padding:14px}}