@font-face{font-family:Stationery;src:url('./fonts/CormorantGaramond.ttf') format('truetype');font-weight:300 700;font-display:swap}
:root{color-scheme:light;--ink:#46352c;--muted:#827163;--wine:#702c3c;--paper:#f3e9d6;font-family:Stationery,Georgia,serif;background:#dbceba;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 30% 10%,#f2e8d8,#dacbb4 70%,#c7b499);overflow-x:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit;background:none;border:0;touch-action:manipulation}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--wine);outline-offset:6px}button:disabled{cursor:wait;opacity:.55}button:focus:not(:focus-visible){outline:none}[hidden]{display:none!important}
.quiet-tools{position:absolute;z-index:5;top:0;width:100%;padding:25px 30px;display:flex;justify-content:space-between;align-items:center;gap:12px}.edition{font:9px system-ui,sans-serif;letter-spacing:2.3px;opacity:.65}.quiet-tools>div{display:flex;gap:22px}.quiet-tools button{font-size:15px;min-height:44px;padding:0}.quiet-tools #skip{border-bottom:1px solid #89705b55}
main{position:relative;min-height:100dvh}#physical-stage{position:relative;width:100%;height:100dvh;min-height:650px;max-height:1200px}#physical-canvas{width:100%;height:100%;display:block;position:absolute;inset:0;touch-action:pan-y;opacity:0;transition:opacity .65s}body[data-ready=true] #physical-canvas{opacity:1}#scene-poster{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;opacity:.75}body[data-ready=true] #scene-poster{opacity:0;pointer-events:none}
#scene-caption{position:absolute;top:17%;left:0;width:100%;text-align:center;pointer-events:none;transition:opacity .35s}.addressee{font-size:17px;letter-spacing:1px;font-style:italic}.addressee span{display:block;font-size:clamp(32px,6vw,48px);letter-spacing:-.5px;font-style:normal;margin-top:3px}.handling{position:absolute;bottom:8%;left:0;width:100%;text-align:center}#handle-object{font-size:22px;letter-spacing:.4px;min-height:76px;padding:10px 32px}#handle-object i{display:block;font:23px Georgia;margin-top:12px;font-style:normal;animation:hint-drift 2.8s ease-in-out infinite}#loading-status{font:10px system-ui,sans-serif;letter-spacing:1px;color:var(--muted);min-height:16px;opacity:.8}
body[data-ready=true] #scene-caption{display:none}
body[data-phase=revealed] #scene-caption,body[data-phase=opening] #scene-caption,body[data-phase=pulling] #scene-caption{opacity:0}body[data-phase=revealed] .handling{display:none}#reply{position:absolute;bottom:5%;width:min(570px,calc(100% - 38px));left:50%;transform:translateX(-50%);text-align:center}#plan-line{font-size:17px;margin:0 0 15px;line-height:1.4}.reply-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.reply-actions button{border:1px solid #82685465;padding:13px 24px;border-radius:3px;min-height:48px;font-size:20px;background:#f7eedf90;box-shadow:0 3px 9px #7657420b}.reply-actions button:first-child{background:var(--wine);border-color:var(--wine);color:#fff2de}.secondary-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin-top:18px}.secondary-actions button{font-size:15px;text-decoration:underline;text-decoration-color:#82685455;text-underline-offset:5px;min-height:32px}#reply-status{font-size:17px;margin:12px 0;white-space:pre-line}#reply-status a{color:inherit}
dialog{border:1px solid #b5a087;background:#fbf5e9;color:var(--ink);border-radius:3px;width:min(560px,calc(100% - 28px));max-height:85dvh;padding:46px 35px;box-shadow:0 25px 100px #26160c55}dialog::backdrop{background:#36221380;backdrop-filter:blur(5px)}dialog h2{font-size:38px;line-height:1.15;font-weight:500;margin:14px 0 24px;overflow-wrap:anywhere}dialog p{font-size:22px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}.close-dialog{position:absolute;right:15px;top:12px;font-size:28px;width:40px;height:40px}.eyebrow{font-size:15px!important;color:var(--muted)}.signature{font-style:italic}.letter-copy{white-space:pre-line}dialog label{display:block;font-size:18px;margin:20px 0}dialog input,dialog textarea,dialog select{display:block;width:100%;padding:10px;background:#fffaf1;border:1px solid #b5a087;color:var(--ink);font-size:18px}dialog button.submit{background:var(--wine);color:white;padding:12px 22px;margin-top:12px}dialog .option{display:block;width:100%;text-align:left;padding:12px;border:1px solid #baa58c;margin:8px 0}dialog .option[aria-pressed=true]{border-color:var(--wine);background:#ead9c2}dialog .dialog-actions{display:flex;flex-wrap:wrap;gap:10px}dialog .error{color:#832333;font-size:18px}.screen-reader{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.no-script{position:absolute;top:25%;left:10%;width:80%;padding:30px;background:var(--paper)}
@keyframes hint-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}@media(max-width:500px){.quiet-tools{padding:16px 18px}.edition{font-size:8px;letter-spacing:1.4px}.quiet-tools>div{gap:14px}#reply{bottom:4%}.reply-actions{gap:8px}.reply-actions button{font-size:18px;padding:11px 16px}#plan-line{font-size:15px}.secondary-actions{margin-top:10px;gap:5px 14px}.addressee{font-size:15px}#scene-caption{top:14%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.reduced *{animation:none!important;transition:none!important}
@media(max-width:360px){.reply-actions button{font-size:16px;padding:11px 9px}} body[data-ready=false] #scene-poster{object-fit:contain}
#plan-line,#reply-status{overflow-wrap:anywhere}
body[data-phase=ready-to-pull] #handle-object i{transform:rotate(180deg);animation:none}
body[data-mood=cinema-ticket] .reply-actions button:not(:first-child){color:#4e3025}body[data-mood=cinema-ticket] dialog{color:#46352c}
.reply-actions button:not(:first-child){color:#46352c;background:#eee5d3}
.scene-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:20%;display:flex;gap:12px}.scene-controls button{width:48px;height:48px;border:1px solid #698077;background:#eee8d9;color:#294638;border-radius:6px;font:24px Georgia}.scene-controls[hidden]{display:none}
.scene-controls{bottom:24%}
.object-choices{position:absolute;left:50%;transform:translateX(-50%);bottom:24%;width:min(520px,92%);display:flex;justify-content:space-around;gap:10px}.object-choices button{font-size:17px;padding:10px;border-bottom:1px solid #81735d;min-height:44px;max-width:32%}
body[data-phase=resetting] .handling{display:none}
/* Keep the object in place while the surrounding controls arrive and leave. */
body[data-phase=revealed] #reply{animation:reply-arrive .42s cubic-bezier(.2,.7,.2,1) both}
body[data-phase=sealed] .handling,body[data-phase=ready-to-pull] .handling,
.scene-controls:not([hidden]),.object-choices:not([hidden]){animation:control-arrive .3s ease-out both}
dialog[open]{animation:dialog-arrive .22s ease-out both}
dialog[open]::backdrop{animation:control-arrive .22s ease-out both}
.reply-actions button{transition:background-color .18s,box-shadow .18s,opacity .18s}
@keyframes reply-arrive{from{opacity:0;transform:translate(-50%,9px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes control-arrive{from{opacity:0}to{opacity:1}}
@keyframes dialog-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
body.reduced *::backdrop{animation:none!important}