.app{width:98%;max-width:none;padding:20px 0 38px}.layout{grid-template-columns:205px minmax(0,1fr) 275px;gap:18px}.stage{height:clamp(520px,64vh,850px);background:#e7eeed;perspective:none}.stage:before{display:none}.stage .court,.stage .net,.stage .model,.stage .shuttle,.stage .guide-line,.stage .callout{display:none!important}#scene3d{position:absolute;inset:0;width:100%;height:100%;cursor:grab}#scene3d:active{cursor:grabbing}#scene3d:focus-visible{outline:3px solid #dca65d;outline-offset:-4px}.scene-note{position:absolute;top:18px;left:18px;background:#ffffffed;color:#344a48;padding:9px 13px;border-radius:8px;font-size:12px;pointer-events:none;box-shadow:0 3px 14px #253d3b12}.motion-panel{padding:17px 20px;background:#102832;border-top:1px solid #34504f}.motion-steps{display:flex;gap:8px;flex-wrap:wrap}.motion-steps button,.motion-controls button{border:1px solid #426160;border-radius:8px;padding:9px 12px;background:#16343d;font-size:12px;cursor:pointer}.motion-steps button.active{background:#91e0c4;color:#12302e;border-color:#91e0c4}.motion-caption{display:flex;flex-direction:column;gap:5px;padding:15px 0}.motion-caption strong{font-size:15px}.motion-caption span{font-size:13px;color:#bed0cd}.motion-controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:12px}.motion-controls label{display:flex;gap:8px;align-items:center}.motion-controls label:first-child{flex:1;min-width:210px}.motion-controls input[type=range]{flex:1;accent-color:#91e0c4;min-width:100px}.motion-controls input[type=checkbox]{accent-color:#91e0c4}.model-note{font-size:11px;color:#9cb3ae;margin:15px 0 0}.model-note a{color:#91e0c4;margin-left:8px}.load-error{padding:50px;color:#253f3a}.stage-foot{flex-wrap:wrap;gap:12px}.stage-head #stageHint{font-size:11px}.rotate-control input{width:120px}.hero-line h2{font-size:27px}@media(max-width:1250px){.layout{grid-template-columns:180px minmax(0,1fr)}.inspector{grid-column:2}.stage{height:620px}.hero-line h2{font-size:24px}}@media(max-width:760px){.app{width:98%}.layout{display:flex;flex-direction:column}.sidebar{position:static;padding:10px}.step-list{grid-template-columns:repeat(3,1fr)}.side-progress,.side-note,.sidebar>.eyebrow,.sidebar>h2{display:none}.step-btn{padding:7px;gap:6px}.step-label span{display:none}.stage{height:500px}.scene-note{font-size:10px;left:8px;top:8px}.hero-line{align-items:start}.hero-line h2{font-size:22px}.lesson-meta{display:none}.stage-head{padding:12px}.stage-head #stageHint{max-width:130px;text-align:right}.motion-panel{padding:12px}.motion-steps button{flex:1;padding:8px 4px;font-size:11px}.stage-foot{padding:10px}.stage-tabs{gap:4px;flex-wrap:wrap}.model-note{line-height:1.7}.lesson-grid{grid-template-columns:1fr}.inspector{width:100%}}

.scene-note{z-index:3}
.grip-marker{position:absolute;z-index:3;background:#294f53ec;color:white;border:1px solid #ffffffcc;border-radius:50%;width:21px;height:21px;text-align:center;line-height:19px;font-size:11px;transform:translate(-50%,-50%);pointer-events:none}.grip-legend{position:absolute;z-index:3;left:18px;bottom:18px;padding:9px 12px;border-radius:8px;background:#fffffff0;color:#294e4e;font-size:12px;pointer-events:none}.grip-marker[hidden],.grip-legend[hidden]{display:none}

@media(max-width:760px){.sidebar{width:100%;min-width:0}.step-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.step-btn{min-width:0}.step-label strong{font-size:11px}.grip-legend{left:8px;right:8px;bottom:10px;font-size:11px}}