/* 3D studies: the viewer. Loaded only on pages that have one. */
.study{display:grid;gap:14px}
/* pan-y: one finger keeps scrolling the page until the visitor chooses to explore the model */
.study-stage{position:relative;height:clamp(320px,64vh,640px);cursor:grab;touch-action:pan-y;outline:none;border-block:1px solid var(--rule);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:border-color .3s}
.study-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.study-stage.grabbing{cursor:grabbing}
.study-stage.moving{cursor:move}
.study-stage.exploring{touch-action:none;border-color:var(--accent)}
@media (max-width:599px){.study-stage{height:clamp(300px,104vw,460px)}}
.study-stage:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.study-load{position:absolute;left:0;bottom:14px;margin:0;opacity:0;transition:opacity .3s}
.study.loading .study-load{opacity:1}
.study-by{margin:0}   /* who made the model: ours, from her drawings */
/* on-stage controls: hint, reset, explore */
.study-ui{position:absolute;left:0;right:0;bottom:12px;display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;pointer-events:none}
.study-ui>*{pointer-events:auto}
.study.loading .study-ui{visibility:hidden}
.study-hint{margin:0 auto 0 0;max-width:min(46ch,62%);padding-bottom:9px;opacity:0;transition:opacity .4s;pointer-events:none}
.study-hint.on{opacity:1}
.study-btn{background:var(--paper)}
.study-btn[hidden]{display:none}
.study-explore{display:none}
@media (pointer:coarse){
  .study-explore{display:inline-flex}
  .study-btn{min-height:44px;align-items:center;display:inline-flex}
  .study-btn[hidden]{display:none}
}
@media (prefers-reduced-motion:reduce){.study-hint,.study-stage{transition:none}}
.study-bar{display:flex;flex-wrap:wrap;gap:12px var(--s5);align-items:center;justify-content:space-between}
.study-bar .pills{margin-top:0}
.study-range{display:flex;align-items:center;gap:14px}
.study-range[hidden]{display:none}
.study-range input{width:clamp(150px,22vw,280px);accent-color:var(--accent)}
.study-value{min-width:8ch;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:599px){.study-range{flex-wrap:wrap;row-gap:6px;width:100%}.study-range input{flex:1 1 120px;width:auto}.study-value{flex-basis:100%}}
.study-value[hidden]{display:none}
html:not(.js) .study{display:none}
.study-bar .pills[hidden]{display:none}