/* A bounded view into the authored scene; the drawings remain two-dimensional. */
#camera{transform-origin:50% 58%}
#viewport[data-view-dragging="true"] #camera{will-change:transform}
#viewport[data-view-dragging="true"]{cursor:grabbing;user-select:none}
#viewport{touch-action:pinch-zoom;cursor:grab}
#viewport button,#viewport a,#viewport input,#viewport select,#viewport textarea{cursor:pointer}
#viewport:focus-visible{outline:2px solid var(--red);outline-offset:-4px}
.view-tools{position:absolute;bottom:7px;right:3.5vw;z-index:25;display:flex;align-items:center;gap:9px;background:var(--ground,#deded4)}
.view-tools span{font-size:11px;color:var(--muted)}
.view-tools button{font:12px Human,Arial,sans-serif;min-height:44px;min-width:44px;padding:8px 10px;border:1px solid var(--line);background:transparent;color:var(--ink)}
.view-tools button[aria-pressed="true"]{color:var(--red);border-color:var(--red)}
.view-tools button:hover{background:var(--paper)}
.view-tools button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
#viewport .orientation{right:310px}
body.opening-active .view-tools,body.lab-open .view-tools{display:none}
body.opening-active #viewport,body.lab-open #viewport{cursor:auto}
@media(max-width:600px){
 body:not(.opening-active) header{height:112px;padding:12px 17px;align-items:flex-start}
 body:not(.opening-active) .brand{min-height:44px;align-items:center}
 body:not(.opening-active) .entry-links{display:grid;grid-template-columns:auto auto;grid-template-rows:44px 44px;gap:0 13px;max-width:calc(100vw - 128px);align-items:center;justify-content:end}
 body:not(.opening-active) .entry-links #choose-character{grid-column:1/-1;min-height:44px;white-space:normal;font-size:12px;line-height:1.3;padding:5px 0;text-align:right}
 body:not(.opening-active) .entry-links #turn-model,body:not(.opening-active) .entry-links [data-open="books"]{min-height:44px;font-size:12px;line-height:1.25;padding:7px 0}
 body:not(.opening-active) .entry-links #replay-opening{position:absolute;left:17px;top:60px;min-height:44px;font-size:11px;padding:8px 0;max-width:112px;line-height:1.25;text-align:left}
 body:not(.opening-active) .guide-control{top:112px;left:17px;right:17px;min-height:44px;gap:17px;align-items:center}
 body:not(.opening-active) .guide-control button{min-height:44px;font-size:12px;padding:8px 0;line-height:1.25}
 body:not(.opening-active) .guide-control #guide-play{padding:6px 10px;min-width:44px}
 body:not(.opening-active) .world-question{top:168px;left:17px;right:17px;width:auto;max-width:none}
 body:not(.opening-active) .world-question #question-text{font-size:27px;line-height:1.08}
 body:not(.opening-active) .world-question small{font-size:12px;min-height:35px;margin-top:5px;display:flex;align-items:center}
 body:not(.opening-active) .scene-voice{top:168px;bottom:auto;left:17px;right:17px;max-width:none}
 body:not(.opening-active) .scene-voice>p{font-size:27px;line-height:1.06;max-width:320px;margin-bottom:9px}
 body:not(.opening-active) .scene-voice>span{font-size:12px;line-height:1.45;max-width:330px}
 body[data-context="return"] .scene-voice{display:none}
 #viewport .private-life,#viewport .private-thought,#viewport .central-person .person-name{display:none}
 body:not(.opening-active) #viewport .return-note{top:auto;left:17px;right:17px;bottom:54px;width:auto;max-width:none;max-height:min(192px,29dvh);padding:12px 0 0;background:var(--ground,#deded4);border-top:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
 #return-note h2,#return-note h2.guide-question{font-size:28px;line-height:1.05;margin:0 0 9px}
 #return-note p,#return-note #dependency-text,#return-note #return-guide-note{font-size:14px;line-height:1.45;margin:9px 0}
 #return-note button{min-height:44px;font-size:13px;line-height:1.35;padding:9px 0;margin-top:0}
 #viewport .orientation{bottom:4px;left:17px;right:185px;min-height:44px;align-items:center;gap:0}
 #viewport .orientation #context-label{font-size:12px;max-width:none;line-height:1.3}
 #viewport .orientation #world-legend{display:none}
 .view-tools{right:17px;bottom:4px;gap:7px}
 .view-tools span{font-size:11px;max-width:63px;line-height:1.2}
 .view-tools button{font-size:12px;padding:8px;min-width:44px}
 .people-finder{top:auto;bottom:54px;left:17px;right:17px;justify-content:space-between;gap:9px}
 .people-finder button{min-height:44px;font-size:12px;padding:8px 0}
 #scene-controls.scene-controls{height:118px;bottom:calc(48px + env(safe-area-inset-bottom));padding:0 17px 44px;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:center}
 #scene-controls>button[data-context]{min-height:64px;font-size:13px;padding:9px 0;line-height:1.2}
 #scene-controls>button small{font-size:11px;line-height:1.3;max-width:none}
 #scene-controls .next-view{bottom:0;right:17px;min-height:44px;font-size:13px;padding:7px 0;max-width:250px}
 #scene-controls .guide-back{bottom:0;left:17px;min-height:44px;padding:7px 0;font-size:12px}
 body:not(.opening-active) #viewport{bottom:calc(166px + env(safe-area-inset-bottom))}
 body[data-side="ai"]:not(.opening-active) #viewport{bottom:calc(185px + env(safe-area-inset-bottom))}
 body[data-side="ai"]:not(.opening-active) #ai-caption{top:124px}
 body[data-side="ai"]:not(.opening-active) #ai-inspection{bottom:62px}
}
@media(max-width:360px){.view-tools span{display:none}#viewport .orientation{right:126px}body:not(.opening-active) .entry-links{gap:0 9px}body:not(.opening-active) .entry-links #turn-model,body:not(.opening-active) .entry-links [data-open="books"]{font-size:11px}}
@media(prefers-reduced-motion:reduce){#camera{transition:none}}

/* A guide tether refers to the authored camera; manual views keep the question without a stale pointer. */
#viewport[data-view-offset]:not([data-view-offset="0,0"]) .question-tether,#viewport[data-view-angle]:not([data-view-angle="0,0"]) .question-tether{visibility:hidden}