/* The threshold stays part of the work; guidance never covers it with a gate. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--edge-left:max(4vw,var(--safe-left));--edge-right:max(4vw,var(--safe-right))}
header{padding-left:var(--edge-left);padding-right:var(--edge-right);padding-top:var(--safe-top);height:calc(88px + var(--safe-top));pointer-events:none}
header a,header button{pointer-events:auto}
.edition{display:flex;gap:14px;align-items:center;font-variant-numeric:tabular-nums;letter-spacing:.16em;font-size:10px}
.edition i{font-style:normal;opacity:.4}
button.quiet,.back-encounter,.motion-toggle,.entrance,.discovery button,.close{min-height:44px;min-width:44px}
.close{display:grid;place-items:center;padding:0;right:12px;top:10px}
.pull{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pull-ring{transition:transform .18s,background .18s,box-shadow .18s}
.pull.is-held .pull-ring,.pull:active .pull-ring{transform:scale(.94);background:#34433a;box-shadow:0 0 0 12px #d7c08b18}
body[data-state="sealed"]:not([data-engaged="true"]) .pull-ring{animation:door-invitation 1.15s .8s 1 ease-in-out}
@keyframes door-invitation{0%,100%{transform:translateX(0)}45%{transform:translateX(7px)}70%{transform:translateX(3px)}}
#light-press,#shadow-scene{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#light-press:active{border-color:#e7c589}
#aperture,#exposure{min-height:32px;touch-action:pan-y}
.controller{left:var(--edge-left)}
.room-label,.cinematic-room .second-label,.cinematic-room .back-encounter,.after-actions{left:var(--edge-left)}
.motion-toggle,.cinematic-room .entrance,.reset{right:var(--edge-right)}
footer{left:var(--edge-left);right:var(--edge-right);bottom:calc(18px + var(--safe-bottom))}
dialog{max-height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 32px);overflow:auto;overscroll-behavior:contain}
details{margin:20px 0;border-top:1px solid #71807055;border-bottom:1px solid #71807055;padding:13px 0}
summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:12px;color:#d4c6a8;list-style-position:inside}
summary::before{content:'+';margin-right:13px}details[open] summary::before{content:'−'}
@media(pointer:coarse){.keyboard-hint{display:none}}
@media(max-width:700px){
 :root{--edge-left:max(24px,var(--safe-left));--edge-right:max(24px,var(--safe-right))}
 header{height:calc(74px + var(--safe-top))}
 header .quiet{font-size:10px}
 .edition{display:flex;font-size:8px;gap:9px;letter-spacing:.06em}
 main,.second-room{min-height:740px;height:100svh}
 .room-label{top:max(14%,calc(var(--safe-top) + 88px))}
 .room-label .micro{font-size:7px}
 .pull-label{font-size:10px}
 .controller{bottom:calc(8% + var(--safe-bottom));width:205px}
 .controller input{margin:10px 0}
 .controller p{font-size:9px;line-height:1.6}
 .reset{bottom:calc(8% + var(--safe-bottom))}
 .discovery{left:var(--edge-left);right:var(--edge-right);width:auto;bottom:calc(26% + var(--safe-bottom))}
 .discovery h2{font-size:26px}
 .discovery p{font-size:11px}
 .discovery .passage-link{min-height:64px}
 .cinematic-room .back-encounter,.motion-toggle{top:max(11%,calc(var(--safe-top) + 64px))}
 .cinematic-room .second-label{top:max(19%,calc(var(--safe-top) + 128px))}
 .cinematic-room .second-label p{font-size:10px}
 .exposure-console{left:var(--edge-left);right:var(--edge-right);bottom:calc(8% + var(--safe-bottom))}
 .exposure-console>p{font-size:9px;line-height:1.6}
 .exposure-track input{margin:4px 0}
 .cinematic-room .second-discovery{left:var(--edge-left);right:var(--edge-right);bottom:calc(29% + var(--safe-bottom))}
 .after-actions{right:var(--edge-right);bottom:calc(22.5% + var(--safe-bottom));gap:24px}
 .cinematic-room .entrance{bottom:calc(3.8% + var(--safe-bottom))}
 body[data-world="shadow"] footer{bottom:calc(12px + var(--safe-bottom))}
 footer{font-size:6px}
}
/* In a short landscape viewport retain the artwork's scale and allow scrolling.
   The first physical invitation remains in view; no forced-rotation overlay. */
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px){
 header{height:calc(64px + var(--safe-top))}
 main,.second-room{height:720px;min-height:720px}
 .pull{top:min(50%,calc(100svh - 120px))}
 .paper-title{top:26%}.paper-title p{font-size:30px;margin:16px 0}
 .room-label{top:22%}.room-label p{display:none}
}
@media(prefers-reduced-motion:reduce){.pull-ring{animation:none!important}}
/* Preserve page zoom/panning outside the small physical gesture controls. */
.cinematic-room #shadow-scene,#aperture,#exposure{touch-action:pan-y pinch-zoom}
body:not([data-view="below"]) .depth-asset-status{display:none}
.depth-asset-status{line-height:1.8}
.exposure-console{left:var(--edge-left)}
.light-press:disabled{opacity:.65;cursor:wait}
body[data-low-motion="true"] .pull-ring{animation:none!important}
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px){
 .discovery{top:53%;bottom:auto;left:66%;right:var(--edge-right);width:auto}
 .side-note{display:none}
}
summary{-webkit-tap-highlight-color:transparent;user-select:none}
summary:focus-visible{outline:2px solid #e8c783;outline-offset:5px}