/* One left-aligned reading strip sits close to the changing drawing. */
.statement{inset:auto;left:var(--page-inset);top:17vh;width:min(430px,calc(100% - 2*var(--page-inset)));height:210px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 18px,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18px,#000 100%)}
#scene-message.reading-track{position:relative;margin:0;font-weight:400;text-align:left;will-change:transform}
.reading-passage{margin:0 0 32px}
.reading-line{display:block;white-space:nowrap;will-change:filter,opacity;text-shadow:0 0 3px var(--paper),0 0 6px var(--paper)}
#perspective{opacity:1}
.experiment-links{display:flex;align-items:center;gap:22px}
.experiment-links a{font-size:11px;color:var(--muted);letter-spacing:.025em}
.experiment-links a:hover{text-decoration:underline;text-underline-offset:5px}
.experiment-label{margin-left:8px;font-size:10px;letter-spacing:.06em;color:var(--muted)}
.messages-enabled .closing{transform:translateY(10px);transition:opacity .8s,filter .8s,transform .8s cubic-bezier(.22,.61,.36,1),visibility .8s}
.messages-enabled .closing.is-visible{transform:translateY(0)}
.works-link{font-size:14px}
@media(max-width:760px){
  .experiment-links{gap:14px}
  .experiment-links a{font-size:10px}
  .experiment-label{display:none}
  .works-link{font-size:12px}
}
@media(max-width:380px){.experiment-links{gap:10px}.experiment-links a{font-size:9px}}
@media(max-height:500px){.works-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){
  #perspective,.messages-enabled .closing{transition:none!important}
  .reading-line{filter:none!important;will-change:auto}
}

/* Every sentence remains readable if scripts or drawing assets are unavailable. */
html:not(.messages-enabled) body[data-home="perspective"]{height:auto;overflow:auto}
html:not(.messages-enabled) .journey{height:auto;min-height:100svh}
html:not(.messages-enabled) .stage{height:auto;min-height:100svh;overflow:visible;padding:155px var(--page-inset) 150px}
html:not(.messages-enabled) .statement{position:relative;inset:auto;width:100%;height:auto;text-align:left;overflow:visible;mask-image:none;-webkit-mask-image:none}
html:not(.messages-enabled) #scene-message{font-size:clamp(14px,3.8vw,20px);line-height:1.8;transform:none}
html:not(.messages-enabled) .fallback,html:not(.messages-enabled) #perspective{display:none}
html:not(.messages-enabled) .closing{position:relative;inset:auto}
html:not(.messages-enabled) .controls{position:relative;inset:auto;padding:0 var(--page-inset) 30px}