/* The transform and inspection controls never add document height. */
#inspection-orbit{
  position:fixed;top:0;left:0;z-index:14;border:1px solid rgba(143,180,255,.17);
  border-radius:50%;clip-path:circle(50%);background:transparent;cursor:grab;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
#inspection-orbit:hover,#inspection-orbit:focus-visible{border-color:rgba(143,180,255,.55);background:rgba(143,180,255,.015)}
#inspection-orbit:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(143,180,255,.6)}
#inspection-orbit.is-dragging{cursor:grabbing;border-color:#8fb4ff}
#inspection-orbit span{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;letter-spacing:.08em;color:#a3b5cd;text-shadow:0 1px 4px #000;pointer-events:none}
#inspection-orbit.is-dragging span{opacity:0}
#transform-controls{position:relative}
#study-toggle{font-family:inherit;min-width:172px;justify-content:space-between;gap:18px;visibility:hidden;pointer-events:none}
body.anatomy-active #study-toggle{visibility:visible;pointer-events:auto}
/* This is the one control that changes the world when pressed, so it should
   look like it is holding something back rather than sitting there inertly. */
#study-toggle{position:relative;overflow:hidden;isolation:isolate}
#study-toggle::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(130% 180% at 50% 135%, rgba(143,180,255,.40), rgba(143,180,255,.09) 46%, transparent 74%);
}
/* A slow sheen crossing the face, clipped to the pill. */
#study-toggle::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:42%;z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(206,228,255,.22), transparent);
  transform:translateX(-170%);
}
body.anatomy-active #study-toggle{
  border-color:rgba(143,180,255,.34);
  animation:transform-breathe 3.8s ease-in-out infinite;
}
body.anatomy-active #study-toggle::after{animation:transform-sheen 5.2s ease-in-out infinite}
#study-toggle:hover{
  border-color:rgba(143,180,255,.62);
  box-shadow:0 0 0 1px rgba(143,180,255,.30), 0 12px 38px -8px rgba(143,180,255,.70);
}
@keyframes transform-breathe{
  0%,100%{box-shadow:0 0 0 1px rgba(143,180,255,.14), 0 6px 22px -10px rgba(143,180,255,.40)}
  50%{box-shadow:0 0 0 1px rgba(143,180,255,.32), 0 12px 34px -8px rgba(143,180,255,.68)}
}
@keyframes transform-sheen{
  0%,58%{transform:translateX(-170%)}
  92%,100%{transform:translateX(330%)}
}
/* Once it has fired, it stops advertising itself. Specificity has to beat
   body.anatomy-active #study-toggle, which is what turns the pulse on. */
body.anatomy-active #study-toggle[aria-pressed="true"]{animation:none;box-shadow:none}
body.anatomy-active #study-toggle[aria-pressed="true"]::after{animation:none;opacity:0}
#study-toggle[aria-pressed="true"]::before{opacity:.35}
body.anatomy-active #study-toggle:disabled{opacity:.45;cursor:wait;animation:none}
body.anatomy-active #study-toggle:disabled::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){
  body.anatomy-active #study-toggle{animation:none;box-shadow:0 0 0 1px rgba(143,180,255,.26), 0 8px 26px -10px rgba(143,180,255,.5)}
  #study-toggle::after{display:none}
}
#study-toggle[aria-pressed="true"]{border-color:rgba(143,180,255,.5);background:rgba(143,180,255,.08)}
#study-toggle:focus-visible{outline:2px solid #8fb4ff;outline-offset:5px}
#transform-status{position:absolute;top:calc(100% + 12px);left:0;max-width:34ch;color:#9aa1ab;font-size:11px;line-height:1.6}
#inspection-dock{
  position:fixed;z-index:25;right:max(5vw,28px);bottom:max(28px,env(safe-area-inset-bottom));
  width:420px;max-width:calc(100vw - 24px);padding:6px 10px;
  border:1px solid rgba(143,180,255,.2);border-radius:16px;
  background:rgba(9,13,18,.88);backdrop-filter:blur(16px);
  color:#b9c4d2;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s,transform .3s,visibility .3s;
}
#inspection-dock.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* The world's reduced-motion rule gives every element a transition duration.
   Limit descendants to colors so inherited visibility cannot delay focus. */
#inspection-dock *{transition-property:color,background-color,border-color}
.inspection-switches{display:grid;grid-template-columns:.8fr 1.1fr 1.3fr .9fr;gap:4px}
#inspection-dock button{
  font:inherit;font-size:11px;line-height:1.2;color:#95a0af;background:transparent;
  border:1px solid transparent;border-radius:8px;min-height:38px;padding:7px 8px;cursor:pointer;
}
#inspection-dock button:hover{color:#edf3ff;background:rgba(143,180,255,.06)}
#inspection-dock button[aria-pressed="true"]{color:#e0ebff;border-color:rgba(143,180,255,.25);background:rgba(143,180,255,.09)}
#inspection-dock button:disabled{opacity:.4;cursor:default}
#inspection-dock button:focus-visible,#inspection-dock input:focus-visible{outline:2px solid #8fb4ff;outline-offset:2px}
.inspection-adjustments{display:flex;align-items:center;gap:10px;margin-top:5px;padding-top:4px;border-top:1px solid rgba(143,180,255,.12)}
.inspection-adjustments label{font-size:11px;letter-spacing:.04em;color:#e0e9f8}
#inspection-dock .inspection-adjustments button{font-size:10px;min-height:30px}
#inspection-separation{
  --separation:100%;appearance:none;-webkit-appearance:none;min-width:40px;flex:1;width:80px;height:34px;margin:0;
  background:transparent;cursor:pointer;touch-action:pan-y;
}
#inspection-separation::-webkit-slider-runnable-track{height:8px;border-radius:5px;background:linear-gradient(to right,#a9c8ff var(--separation),#455366 var(--separation));box-shadow:0 0 0 1px rgba(180,204,240,.3)}
#inspection-separation::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-7px;border:2px solid #eff6ff;border-radius:50%;background:#a9c8ff;box-shadow:0 0 10px rgba(143,180,255,.35)}
#inspection-separation::-moz-range-track{height:8px;border-radius:5px;background:#455366;box-shadow:0 0 0 1px rgba(180,204,240,.3)}
#inspection-separation::-moz-range-progress{height:8px;border-radius:5px;background:#a9c8ff}
#inspection-separation::-moz-range-thumb{width:18px;height:18px;border:2px solid #eff6ff;border-radius:50%;background:#a9c8ff;box-shadow:0 0 10px rgba(143,180,255,.35)}
#inspection-separation-value{min-width:4ch;font-size:11px;font-variant-numeric:tabular-nums;color:#dceaff;text-align:right}
#inspection-labels{position:fixed;inset:0;z-index:13;pointer-events:none;overflow:hidden}
#inspection-labels svg{position:absolute;inset:0;overflow:visible}
#inspection-labels path{fill:none;stroke:rgba(143,180,255,.35);stroke-width:1}
.inspection-label{position:absolute;top:0;left:0;padding:4px 7px;border-radius:4px;background:rgba(3,6,10,.82);font-size:10px;letter-spacing:.04em;color:#c9d7ea;white-space:nowrap}
@media(max-width:820px){
  #c3{padding-top:10svh}
  #c3 .wrap{padding-top:4svh}
  #inspection-dock{right:max(12px,calc((100vw - 420px)/2));bottom:max(8px,env(safe-area-inset-bottom));width:min(420px,calc(100vw - 24px));padding:4px 8px;border-radius:12px}
  .inspection-switches{grid-template-columns:repeat(4,1fr)}
  #inspection-dock button{min-height:34px;padding:6px;font-size:10px}
  #inspection-dock .desktop-word{display:none}
  .inspection-adjustments{gap:8px;margin-top:3px;padding-top:2px}
  #inspection-dock .inspection-adjustments button{min-height:28px}
  .inspection-label{font-size:8px;padding:3px 4px}
}
@media(max-width:820px) and (max-height:650px){
  #c3 .eyebrow{margin-bottom:14px}
  #c3 h2{font-size:28px;margin-bottom:16px}
  #c3 .body{font-size:12px;line-height:1.6}
  #c3 .body + .body{margin-top:.8em}
  #c3 .actions{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){#inspection-dock{transition:none}}