/* Shared timing and emphasis: quiet surfaces, immediate input, short settles. */
:root{--motion-fast:120ms;--motion-base:220ms;--motion-scene:320ms;--settle:cubic-bezier(.2,.7,.2,1);--motion-edge:rgb(var(--edge-rgb)/.22)}
#stage{opacity:0;transition:opacity var(--motion-scene) ease}
#app[data-has-scene=true] #stage{opacity:1}
.detector-ui,.scene-controls{transition:opacity var(--motion-base) ease,visibility var(--motion-base)}
#app:not([data-has-scene=true]) .detector-ui,#app:not([data-has-scene=true]) .scene-controls{opacity:0;visibility:hidden;pointer-events:none}
.world-label,#detector-handle,#label-links{opacity:0;transition:opacity 180ms ease}
#app[data-presented=true] .world-label[data-positioned=true],#app[data-presented=true] #detector-handle[data-positioned=true],#app[data-presented=true] #label-links{opacity:1}
#app:not([data-presented=true]) .world-label,#app:not([data-presented=true]) #detector-handle,.world-label:not([data-positioned=true]){visibility:hidden!important;pointer-events:none!important}
#experiments{gap:12px;padding:4px 4px 9px;contain:layout style}
.experiment,.experiment[aria-pressed=true]{position:relative;isolation:isolate;background:transparent;border-color:transparent;border-radius:12px;padding:7px 7px 8px;color:#91a7b1;overflow:hidden;transition:color var(--motion-fast) ease}
.experiment:before{content:'';border:1px solid transparent;opacity:0;transition:opacity var(--motion-base) ease,border-color var(--motion-base) ease;z-index:-1}
.experiment:hover,.experiment[aria-pressed=true]{background:none;color:#e0ecec;border-color:transparent}
.experiment:hover:before{opacity:1;border-color:#a4c6cd1c}
.experiment[aria-pressed=true]:before{opacity:1;border-color:rgb(var(--edge-rgb)/.34)}
.experiment img{opacity:0;transform:none;filter:none!important;transition:opacity var(--motion-base) ease,transform var(--motion-base) var(--settle);height:80px}
.experiment img.loaded{opacity:.8}.experiment:hover img.loaded,.experiment[aria-pressed=true] img.loaded{opacity:1;transform:translateY(-1px)}
.experiment:active img.loaded{transform:translateY(1px) scale(.985);transition-duration:80ms}
.experiment span{padding:10px 3px 0;min-height:29px;line-height:1.35;font-size:10px;letter-spacing:.01em}
/* Reveal the lower stroke of the frame, including both quarter-circle ends. */
.experiment::after {
  content: '';
  border: 2px solid rgb(var(--edge-rgb) / .95);
  clip-path: inset(calc(100% - var(--thumb-radius)) 100% 0 0);
  opacity: 0;
}
.experiment[aria-pressed=true]::after {
  clip-path: inset(calc(100% - var(--thumb-radius)) calc(100% - var(--load-progress,0) * 100%) 0 0);
  transition: clip-path 140ms linear, opacity 180ms ease 140ms;
}
.experiment[aria-busy=true]::after {
  opacity: 1;
  transition: clip-path 140ms linear, opacity 90ms ease;
}
.experiment.pending img.loaded{opacity:.68}
.scene-actions .icon,.camera-choices button,.palette-choices button,.segmented button,.focus-stops button{transition:color var(--motion-fast) ease,background var(--motion-base) ease,border-color var(--motion-base) ease,transform var(--motion-fast) var(--settle)}
.scene-actions .icon:active,.camera-choices button:active,.palette-choices button:active,.segmented button:active,.focus-stops button:active{transform:scale(.97)}
.view-modes{gap:3px;padding-bottom:9px}
.view-modes button{min-height:34px;border-radius:8px;transition:color var(--motion-fast) ease,background var(--motion-base) ease!important}
.view-modes button:hover{background:#9fbfc809!important}
.view-modes button[aria-pressed=true]{background:#9fbfc811!important;box-shadow:inset 0 0 0 1px #a2c7ce14!important}
.view-modes button:active{background:#9fbfc819!important}
.mode-symbol{box-shadow:none!important;transform:none!important;transition:opacity var(--motion-fast) ease}
.settings-panel{transform:translateY(5px);transition:opacity 180ms ease,transform 260ms var(--settle),visibility 260ms;box-shadow:0 18px 60px #0004}
.settings-open .settings-panel{transform:none}
.settings-tabs button{transition:background var(--motion-base) ease,color var(--motion-fast) ease,box-shadow var(--motion-base) ease}
input[type=range]::-webkit-slider-thumb{transition:box-shadow var(--motion-fast) ease,transform var(--motion-fast) ease}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.06);box-shadow:0 0 0 5px #a7d0d312}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.06);box-shadow:0 0 0 6px #a7d0d31c}
dialog[open]{animation:none}dialog::backdrop{background:#01090f9c;backdrop-filter:blur(4px)}
#loading{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:13px;opacity:1;transition:opacity 260ms ease;pointer-events:none}
#loading.ready,#loading.refining{opacity:0;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%)}
#loading>span:first-child{display:block;width:64px;height:24px;background:none;border:0;box-shadow:none;animation:none}
#loading>span:first-child:before,#loading>span:first-child:after{display:none}
#loading svg{width:64px;height:24px;overflow:visible;stroke:#a4cacb;stroke-width:1;fill:none}
#loading path{stroke-dasharray:40 100;animation:wave-arrival 2.4s ease-in-out infinite;opacity:.45}
#loading path:nth-child(2){animation-delay:-.8s;opacity:.75}#loading path:nth-child(3){animation-delay:-1.6s}
#loading-text{font-size:10px;font-weight:400;letter-spacing:.04em;color:#6f8996}
@keyframes wave-arrival{0%{stroke-dashoffset:80;opacity:.2}50%{opacity:.75}100%{stroke-dashoffset:-80;opacity:.2}}
@media(min-width:1500px){.experiment img{height:92px}.experiment span{font-size:11px}}
@media(max-width:900px){#experiments{gap:6px}.experiment img{height:72px}}
@media(max-width:650px){.experiment{padding:6px 5px}.experiment img{height:64px}.experiment span{font-size:9px;padding-top:8px}.view-modes button{min-height:30px}}
@media(max-height:540px) and (min-aspect-ratio:1/1){.experiment img{height:48px}.experiment span{font-size:9px;padding-top:6px}}