:root{color:#e9e2dc;background:#62545e;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}#camera-section{height:250vh}.sticky-stage{background:radial-gradient(at 25% 25%,#75636c88,#0000 70%);height:100dvh;position:sticky;top:0;overflow:hidden}header{z-index:2;position:absolute;top:5dvh;left:5vw}h1{margin:12px 0;font:400 clamp(38px,5vw,72px)/1.1 Georgia,serif}.eyebrow,.frame-label,.scroll-note{letter-spacing:.18em;font-size:10px}.intro{opacity:.65;font-size:13px}figure{margin:0;position:absolute;top:13dvh;left:calc(50% + 100px);transform:translate(-50%)}#spatial-window{background:#62545e;width:90dvh;height:72dvh;overflow:hidden}#spatial-window.portrait{width:43.2dvh}canvas{width:100%;height:100%;display:block}figcaption{opacity:.55;max-width:43.2dvh;margin-top:10px;font-size:10px}#text-composition{width:35vw;height:44dvh;position:absolute;top:42dvh;left:5vw}.text-frame{border:1px solid #d1bec16b;width:46%;height:26dvh;padding:18px;position:absolute}.source-frame{top:15dvh;left:0}.target-frame{top:0;right:0}.frame-label{opacity:.5}.text-frame p{max-width:150px;margin:24px 0;font:400 clamp(17px,1.8vw,26px)/1.5 Georgia,serif}.glyph{white-space:pre}.flying-letter{white-space:pre;will-change:transform,opacity;font:400 clamp(17px,1.8vw,26px)/1.5 Georgia,serif;position:absolute;top:0;left:0}#flying-letters{pointer-events:none;position:absolute;inset:0}.tools{z-index:5;width:230px;font-size:12px;position:absolute;top:24px;right:24px}.tools summary{cursor:pointer;text-align:right;opacity:.75}.tools aside{background:#443940ed;border:1px solid #a5959f55;max-height:calc(100dvh - 90px);margin-top:12px;padding:16px;overflow:auto}label{margin:14px 0;display:block}output{float:right}input[type=range]{accent-color:#f3cd86;width:100%;margin-top:8px;display:block}.buttons{gap:8px;display:flex}button{color:inherit;cursor:pointer;background:0 0;border:1px solid #a5959f;flex:1;padding:8px}button:hover,button:focus-visible{background:#ffffff18}.check{align-items:center;gap:8px;display:flex}.hint{opacity:.65;font-size:11px;line-height:1.6}.scroll-note{opacity:.55;position:absolute;bottom:3dvh;left:5vw}.scroll-note span{margin-left:18px}@media (width<=1000px){figure{left:calc(58% + 50px)}#text-composition{width:38vw;left:4vw}.text-frame{padding:12px}.text-frame p{margin-top:15px}.tools{width:210px;right:14px}}@media (width<=650px){header{top:3dvh;left:6vw}.intro{display:none}h1{font-size:36px}figure{top:16dvh;left:68%}#spatial-window.portrait{width:36dvh;max-width:55vw;height:60dvh}#spatial-window{width:85vw;height:60dvh}figcaption{max-width:50vw;font-size:9px}#text-composition{width:28vw;height:35dvh;top:40dvh;left:5vw}.text-frame{width:100%;height:15dvh;padding:8px}.source-frame{top:19dvh}.target-frame{top:0}.text-frame p{margin:10px 0;font-size:16px;line-height:1.35}.flying-letter{font-size:16px;line-height:1.35}.frame-label{font-size:8px}.tools{width:205px;top:15px;right:12px}.tools summary{font-size:10px}.scroll-note{font-size:8px;bottom:5dvh}}#spatial-window{background:0 0;position:relative;overflow:visible}#spatial-window canvas{max-width:none;position:absolute;top:0}figcaption{pointer-events:none;position:relative}.light-halos{pointer-events:none;z-index:1;position:absolute;top:0;overflow:hidden}.light-halo{mix-blend-mode:screen;will-change:transform,opacity;background:radial-gradient(circle,#fff2c8 0%,#ffd78b99 20%,#ffc45c22 48%,#0000 72%);border-radius:50%;display:block;position:absolute;top:0;left:0}.light-halo[hidden]{display:none}