@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-display:swap;font-weight:200 800;src:url(/fonts/atkinson-hyperlegible-next-pinyin.woff2) format("woff2-variations")}:root{--ink: #f4eadc;--muted: #aba6c4;--gold: #f2c66d;--clay: #b58d74;--paper: #f4eadc;--paper-ink: #2a2119;--serif: "Fraunces", "Iowan Old Style", Georgia, serif;--sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;--thai: "Anuphan", "Noto Sans Thai", "Leelawadee UI", sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}html{touch-action:pan-x pan-y}body{background:radial-gradient(55% 45% at 86% 66%,#ffb6c499,#ffb6c400 70%),radial-gradient(90% 60% at 70% 100%,#ec96b273,#ec96b200 70%),linear-gradient(180deg,#1d1a3a,#2f2655,#503a72 48%,#84567f 70%,#c27c93 88%,#d9969f);color:var(--ink);font:400 15px/1.45 var(--serif);overflow:hidden;-webkit-font-smoothing:antialiased}main{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}#sky,#scene{position:absolute;top:0;right:0;bottom:0;left:0}#sky{width:100%;height:100%}#scene canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;animation:appear .9s ease-out both}@keyframes appear{0%{opacity:0}}#scene canvas.grabbing{cursor:grabbing}.word{display:inline-block}.magic:not(.told) :is(.overlay,.signature){visibility:hidden}.told :is(.word,.hint,nav){animation:magic 1.4s ease-out both}.told .signature span{animation:type 1ms both}@keyframes magic{0%{opacity:0;filter:blur(6px);transform:translateY(.35em);color:var(--gold)}35%{opacity:1;filter:blur(0);transform:none;color:var(--gold)}}@keyframes type{0%{opacity:0}}.moon{position:absolute;top:12vh;right:6vw;width:46px;height:46px;border-radius:50%;box-shadow:inset 8px -4px #fbe3cf;filter:drop-shadow(0 0 16px rgba(255,214,220,.5));opacity:.85}.signature{position:absolute;left:clamp(20px,4.5vw,76px);bottom:clamp(16px,4vh,40px);margin:0;font:500 11px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.6}.shortcuts button{all:unset;position:absolute;right:calc(clamp(20px,4.5vw,76px) + 92px);bottom:clamp(16px,4vh,40px);padding:9px 14px;border-radius:999px;background:var(--paper);color:var(--paper-ink);font:500 13px/1.2 var(--sans);clip-path:inset(50%);pointer-events:none}.shortcuts button:focus-visible{clip-path:none;pointer-events:auto;outline:2px solid var(--gold);outline-offset:2px}.beams{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(20deg,transparent 44%,rgba(255,196,214,.08) 47%,transparent 51%),linear-gradient(26deg,transparent 54%,rgba(255,196,214,.06) 58%,transparent 62%),linear-gradient(14deg,transparent 63%,rgba(255,196,214,.06) 65%,transparent 68%);-webkit-mask-image:radial-gradient(70% 70% at 92% 68%,#000 0%,transparent 100%);mask-image:radial-gradient(70% 70% at 92% 68%,#000 0%,transparent 100%);animation:beams 16s ease-in-out infinite alternate}@keyframes beams{0%{opacity:.55;transform:translate(-1.2%)}to{opacity:1;transform:translate(1.2%)}}@media(prefers-reduced-motion:reduce){.beams{animation:none}}.paused .beams{animation-play-state:paused}.motion{all:unset;position:absolute;right:clamp(20px,4.5vw,76px);bottom:clamp(16px,4vh,40px);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#14142c73;border:1px solid rgba(255,240,205,.14);color:var(--ink);opacity:.75;cursor:pointer;transition:opacity .12s ease}.motion:hover{opacity:1}.motion:focus-visible{outline:1px solid var(--gold);outline-offset:2px}.motion svg{width:14px;height:14px;fill:currentColor}.motion .play,.paused .motion .pause{display:none}.reset{right:calc(clamp(20px,4.5vw,76px) + 46px)}.paused .motion .play{display:inline}.overlay{position:absolute;top:clamp(20px,6vh,64px);left:clamp(20px,4.5vw,76px);width:min(330px,calc(100vw - 40px));display:flex;flex-direction:column;gap:30px;pointer-events:none;text-shadow:0 1px 12px rgba(10,10,30,.6)}.overlay>*{pointer-events:auto}.eyebrow,.label,.hint{margin:0;font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}h1{margin:12px 0 14px;font-weight:380;font-style:italic;font-size:clamp(36px,4vw,54px);line-height:.98;letter-spacing:-.012em;font-variation-settings:"SOFT" 100,"opsz" 144}.lede{margin:0 0 14px;max-width:30ch;color:var(--muted);font-size:16px}.hint{color:var(--muted);letter-spacing:.06em;line-height:1.6;text-transform:none;font-weight:500;opacity:.8}.label{margin-bottom:8px}.hint .pinch{display:none}@media(hover:none){.hint .wheel{display:none}.hint .pinch{display:inline}}.cast{list-style:none;margin:0 0 0 -10px;padding:0;display:grid;gap:1px}.cast button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:10px auto 1fr;align-items:baseline;gap:10px;width:100%;padding:6px 10px;border-radius:8px;cursor:pointer;color:var(--ink);transition:background-color .12s ease}.cast button:hover,.cast button[aria-pressed=true]{background:#fff0cd14}.cast button:focus-visible{outline:1px solid var(--gold);outline-offset:-1px}.swatch{width:10px;height:10px;border-radius:2px;background:var(--swatch);box-shadow:0 0 0 1px #0000004d}.name{font-size:18px;font-style:italic;font-variation-settings:"SOFT" 100}.role{font:500 12.5px/1.2 var(--sans);color:var(--muted)}.tag{position:absolute;top:0;left:0;z-index:2;pointer-events:none}.tag>div{position:relative;transform:translate(-50%,calc(-100% - 12px));padding:6px 12px 7px;border-radius:8px;background:var(--paper);color:var(--paper-ink);text-align:center;white-space:nowrap;box-shadow:0 8px 24px #06061473}.tag>div:after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--paper);transform:translate(-50%) rotate(45deg)}.tag b{display:block;font-size:17px;font-style:italic;font-weight:500}.tag>div>span{font:500 11.5px/1.2 var(--sans);color:#7a6352}.tag i{display:block;margin-top:4px;font-size:13.5px;color:#8a5f45}.tag i span{animation:type 1ms both}.paused .tag i span{animation:none}.tag b:lang(th){font-family:var(--thai);font-style:normal;font-weight:500;font-size:19px;line-height:1.5}.tag small{display:block;max-width:26ch;margin:5px auto 0;white-space:normal;font:500 10.5px/1.35 var(--sans);letter-spacing:.04em;color:#9a8670}.tag i[hidden],.tag small[hidden]{display:none}.letter{width:min(420px,calc(100vw - 32px));padding:22px 22px 18px;border:0;border-radius:14px;background:var(--paper);color:var(--paper-ink);box-shadow:0 24px 60px #0606148c;font:400 15px/1.45 var(--serif)}.letter::backdrop{background:#0e0c2280}.letter h2{margin:0;font-weight:450;font-style:italic;font-size:26px;font-variation-settings:"SOFT" 100}.letter .aside{margin:2px 0 16px;color:#7a6352;font-size:14px}.letter label{display:block;margin-bottom:12px;font:600 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#7a6352}.letter label span{font-weight:500;text-transform:none;letter-spacing:0}.letter textarea,.letter input{display:block;width:100%;margin-top:6px;padding:9px 11px;border:1px solid #d8c9a8;border-radius:8px;background:#fbf6ea;color:var(--paper-ink);font:400 15px/1.45 var(--sans);resize:vertical}.letter textarea:focus,.letter input:focus{outline:2px solid var(--gold);outline-offset:0;border-color:transparent}.letter .status{min-height:1.4em;margin:4px 0 10px;font-size:14px;color:#8a5f45}.letter .actions{display:flex;flex-direction:row-reverse;gap:10px}.letter button{all:unset;padding:9px 16px;border-radius:999px;font:600 14px/1.2 var(--sans);cursor:pointer}.letter button[value=send]{background:var(--paper-ink);color:var(--paper)}.letter button[value=send]:disabled{opacity:.5;cursor:default}.letter button[value=cancel]{color:#7a6352}.letter button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media(max-width:720px),(max-aspect-ratio:1/1){.overlay{gap:0;width:calc(100vw - 40px)}h1{font-size:34px;margin:8px 0;font-weight:460;font-variation-settings:"SOFT" 100,"opsz" 72}.lede{font-size:14.5px;margin-bottom:8px}.moon{top:auto;bottom:30vh;right:8vw;width:40px;height:40px;box-shadow:inset 9px -4px #f4e7c6}nav{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom))}.label,.signature{display:none}.motion{top:12px;right:12px;bottom:auto}.reset{right:56px}.cast{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0}.cast button{grid-template-columns:10px auto;padding:7px 12px;background:#14142c99;border:1px solid rgba(255,240,205,.12);border-radius:999px}.cast .role{display:none}.name{font-size:15px}}