:root{--room:#14110f;--room-2:#1d1916;--ink:#efe6d6;--ink-2:#c9bba3;--line:#efe6d629;--btn:#26201c;--stock:#fbfaf7;--paper-ink:#1d2533;--ui:"Atkinson Hyperlegible Next", system-ui, sans-serif;--hand:"Caveat", cursive}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:linear-gradient(to bottom, var(--room) 0%, var(--room) 45%, #201a16 100%);color:var(--ink);font-family:var(--ui);overscroll-behavior:none;-webkit-font-smoothing:antialiased;background-position:50%;background-size:cover;overflow:hidden}#app{position:fixed;inset:0}#stage{touch-action:none;cursor:grab;outline:none;width:100%;height:100%;position:absolute;inset:0}#stage:active{cursor:grabbing}#stage:focus-visible{outline:2px solid var(--ink-2);outline-offset:-6px}.top{left:0;right:0;top:max(24px, calc(env(safe-area-inset-top) + 8px));text-align:center;pointer-events:none;padding:0 72px;transition:opacity .8s;position:absolute}.for{font:600 18px/1.3 var(--ui);color:var(--ink);text-wrap:balance;margin:0}body.opened .top{opacity:0}.hint{left:50%;bottom:max(28px, calc(env(safe-area-inset-bottom) + 18px));background:var(--btn);border:1px solid var(--line);font:600 15px var(--ui);white-space:nowrap;pointer-events:none;border-radius:999px;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:11px 18px 11px 14px;transition:opacity .5s,transform .5s;display:flex;position:absolute;transform:translate(-50%)}.hint .chev{color:var(--ink-2);flex:none;animation:1.6s ease-in-out infinite nudge}@keyframes nudge{0%,to{opacity:.6;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}body.opened .hint{opacity:0;transform:translate(-50%,8px)}body.mac .hint,body.duo .hint{white-space:normal;text-align:left}.dock{left:0;right:0;bottom:max(24px, calc(env(safe-area-inset-bottom) + 14px));pointer-events:none;flex-direction:column;align-items:center;gap:14px;padding:0 16px;display:flex;position:absolute}.read{border:1px solid var(--line);background:var(--btn);min-height:46px;color:var(--ink);font:600 16px var(--ui);cursor:pointer;opacity:0;visibility:hidden;border-radius:999px;align-items:center;gap:8px;padding:0 18px 0 14px;transition:opacity .6s,transform .6s,visibility 0s linear .6s;display:inline-flex;transform:translateY(8px)}body.lit .read{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s,transform .6s;transform:none}.read:hover{background:#2f2823}.cta{text-align:center;opacity:0;visibility:hidden;justify-items:center;gap:8px;transition:opacity .8s,transform .8s,visibility 0s linear .8s;display:grid;transform:translateY(8px)}body.show-cta .cta{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .8s,transform .8s;transform:none}.cta a#ctaLink{text-align:center;background:var(--stock);max-width:calc(100vw - 32px);min-height:50px;color:var(--paper-ink);font:700 16px/1.25 var(--ui);border-radius:12px;justify-content:center;align-items:center;padding:0 22px;text-decoration:none;display:inline-flex}.cta a#ctaLink:hover{background:#fff}.cta small{color:var(--ink-2);font-size:14px}.cta small:empty{display:none}.cta-app{color:var(--ink);text-underline-offset:5px;align-items:center;min-height:44px;font-size:15px;font-weight:600;-webkit-text-decoration:underline #efe6d666;text-decoration:underline #efe6d666;display:inline-flex}.cta-app[hidden]{display:none}.tools{right:max(14px, env(safe-area-inset-right));top:max(14px, calc(env(safe-area-inset-top) + 2px));gap:8px;display:flex;position:absolute}.tools button,.edit{border:1px solid var(--line);background:var(--btn);min-width:44px;height:44px;color:var(--ink);font:600 14px var(--ui);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:0 14px 0 12px;text-decoration:none;transition:background .2s,opacity .4s;display:inline-flex}.tools button:hover,.edit:hover{background:#2f2823}.tools button.icon{width:44px;padding:0}#replay{opacity:0;pointer-events:none;visibility:hidden}body.opened #replay{opacity:1;pointer-events:auto;visibility:visible}#sound .mute{display:none}#sound[aria-pressed=false] .mute{display:inline}.edit{z-index:4;left:max(14px, env(safe-area-inset-left));top:max(14px, calc(env(safe-area-inset-top) + 2px));position:absolute}.edit[hidden]{display:none}.read:focus-visible,.cta a:focus-visible,.tools button:focus-visible,.edit:focus-visible{outline:2px solid var(--ink);outline-offset:3px}@media (width<=560px){#replay span,body.gallery-preview .edit span{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}#replay,body.gallery-preview .edit{width:44px;padding:0}.for{font-size:17px}}.letter{z-index:12;padding:max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));background:#0a0807b8;place-items:center;display:grid;position:fixed;inset:0}.letter[hidden]{display:none}.letter-sheet{background:var(--stock);width:min(100%,560px);max-height:100%;color:var(--paper-ink);border-radius:6px;padding:44px clamp(22px,6vw,44px) 34px;animation:.5s cubic-bezier(.2,.8,.2,1) both letter-in;position:relative;overflow:auto;box-shadow:0 30px 60px -30px #000c}.letter-sheet:before{content:"";pointer-events:none;border:1.5px solid color-mix(in srgb, var(--paper,#c99a45) 70%, transparent);border-radius:3px;position:absolute;inset:10px}@keyframes letter-in{0%{opacity:0;transform:translateY(16px)rotate(-.6deg)}}.letter-close{width:44px;height:44px;color:var(--paper-ink);cursor:pointer;background:0 0;border:0;border-radius:999px;place-items:center;display:grid;position:absolute;top:14px;right:14px}.letter-close:hover{background:#1d253312}.letter-close:focus-visible{outline:2px solid var(--paper-ink);outline-offset:2px}.letter-close[hidden]{display:none}.letter-note{font:400 15px/1.45 var(--ui);color:#474f5f;margin:0 0 18px;padding-right:40px}.letter-greeting{font:600 clamp(32px, 8vw, 40px)/1.15 var(--hand);margin:0;padding-right:40px}.letter-body{font:600 clamp(26px, 6.6vw, 31px)/1.32 var(--hand);white-space:pre-line;overflow-wrap:anywhere;margin:14px 0 0}.letter-body:empty{display:none}.letter-sign{text-align:right;font:600 clamp(28px, 7vw, 34px)/1.2 var(--hand);margin:18px 0 0}.letter-sign:empty{display:none}body.fallback{background-color:var(--room);overflow:auto}body.fallback #stage,body.fallback .hint,body.fallback .tools,body.fallback .dock,body.fallback .top{display:none}body.fallback .letter{background:#0a08078c}.loading{font:600 16px var(--ui);color:var(--ink-2);pointer-events:none;place-items:center;transition:opacity .6s;display:grid;position:absolute;inset:0}body.ready .loading{opacity:0}.top,.hint,.tools{transition:opacity .6s}body:not(.ready) .top,body:not(.ready) .hint,body:not(.ready) .tools{opacity:0}body.preview .top,body.gallery-preview .top{padding:0 110px}.lid{display:none}body.debug .lid:not(:empty){font:600 11px var(--ui);letter-spacing:.08em;color:#c9bba3b3;pointer-events:none;display:block;position:absolute;bottom:14px;left:16px}.cover{z-index:5;pointer-events:none;opacity:0;visibility:hidden;place-items:end center;transition:opacity .45s,visibility 0s linear .45s;display:grid;position:fixed;inset:0}body.cover-mode .cover{opacity:1;visibility:visible;transition:opacity .3s}body.cover-mode .top,body.cover-mode .hint,body.cover-mode .tools,body.cover-mode .dock,body.cover-mode .lid,body.cover-mode .edit{opacity:0;pointer-events:none}.cover-hint{margin:0 0 max(30px, calc(env(safe-area-inset-bottom) + 18px));font:600 13px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#efe6d6d9;animation:2.8s ease-in-out infinite breathe}@keyframes breathe{0%,to{opacity:.5}50%{opacity:1}}body.cover-turned .cover-hint,body.video .tools,body.video .dock{display:none}@media (prefers-reduced-motion:reduce){.hint .chev,.cover-hint,.letter-sheet{animation:none}}body.embed .top,body.embed .hint,body.embed .tools,body.embed .dock,body.embed .edit,body.embed .lid,body.embed .loading{display:none}body.embed{background:#2c0e24}