@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/InstrumentSerif-Italic.ttf') format('truetype')}
/* The gesture and its remembered meaning occupy the same side of the square. */
.scene[data-w]{height:220vh}
.scene.h3{height:180vh}
.scene[data-w] .cam{perspective:1400px;perspective-origin:50% 64%;transform:none}
.scene[data-w] .fig{rotate:none}
.scene[data-w]:has(.gesture-caption) .said{left:7vw;right:7vw;top:7vh;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:16%;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.gesture-caption{display:block;width:fit-content;font-size:clamp(1.25rem,2.4vw,2.3rem);line-height:1.1;padding:.35em .6em;background:rgba(237,230,211,.92);text-align:left}
.gesture-caption[data-side=r]{justify-self:end;text-align:right}
.scene[data-w] .meant:has(.recollection-claim){left:7vw;right:7vw;top:17vh;bottom:auto;max-width:none;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;line-height:1.3;display:grid;grid-template-columns:1fr 1fr;column-gap:16%}
.recollection-claim,.recollection-reply,.recollection-coda{display:block;width:fit-content;max-width:100%;padding:.4em .65em;background:rgba(237,230,211,.94)}
.recollection-claim{grid-column:1;text-align:left}
.recollection-reply{grid-column:2;justify-self:end;text-align:right}
.recollection-coda{grid-column:2;justify-self:end;text-align:right;margin-top:.45em;font-size:.82em;font-style:italic;color:var(--dim)}
/* Both account worlds turn about the same central axis, over the shared piazza. */
.skystage.world{perspective:clamp(700px,115vw,2200px);perspective-origin:50% 64%}
.account-square{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.account-domain{position:absolute;inset:0;transform-origin:50% 64%;transform-style:preserve-3d}
.account-axis{position:absolute;left:50%;top:18%;bottom:18%;width:1px;background:#fff5d1;box-shadow:0 0 18px 3px #fff4cf40;opacity:0}
@media(min-width:821px){
 .scene[data-w] .fig[data-side]{height:64vh;bottom:-2vh}
 .scene[data-w="2"] .fig[data-side=l]{height:32vh;bottom:16vh}
 .scene[data-w="3"] .fig[data-side=l]{height:42vh;bottom:8vh}
}
@media(max-width:820px){
 .scene[data-w] .fig[data-side]{bottom:32vh!important}
 .scene[data-w]:has(.gesture-caption) .said{left:5vw!important;right:5vw!important;max-width:none!important;top:8vh!important;gap:6vw}
 .gesture-caption{font-size:clamp(1.25rem,5.8vw,1.7rem)}
 .scene[data-w] .meant{font-size:clamp(1rem,4.6vw,1.15rem)}
 .scene[data-w] .meant:has(.recollection-claim){left:5vw!important;right:5vw!important;top:auto!important;bottom:6vh!important;max-width:none!important;column-gap:6vw}
}
@media(max-height:620px){
 .scene[data-w]:has(.gesture-caption) .said{top:max(3rem,12vh)!important}
}
@media(max-height:620px) and (min-width:821px){
 .scene[data-w] .meant{font-size:1rem}
 .scene[data-w] .meant:has(.recollection-claim){top:max(5.4rem,22vh)}
 .gesture-caption{font-size:1.3rem}
 .recollection-coda{margin-top:.25em}
}
@media(prefers-reduced-motion:reduce){
 .scene[data-w]{height:auto;min-height:100vh}
 .scene[data-w] .cam{perspective:none}
 .account-domain{transform:none}
 .account-axis{display:none}
}