@font-face{font-family:Letter;src:url('/fonts/letter-italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
:root{color-scheme:dark;--night:#050609;--white:#f4eeec;--rose:#edc5d2;--muted:#9e949c}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night)}
body{font-family:Arial,sans-serif;color:var(--white);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#33232939,transparent 65%)}
.stars{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#f5e7ed;opacity:var(--opacity);animation:twinkle var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.stars i.bright{width:3px;height:3px;box-shadow:0 0 8px #f0dce577}
.universe{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100svh;max-width:620px;margin:0 auto;padding:max(21px,env(safe-area-inset-top)) 16px max(15px,env(safe-area-inset-bottom));}
header{text-align:center;pointer-events:none;padding:0 8px 8px}
.eyebrow{font-size:9px;font-weight:400;letter-spacing:3.2px;color:#c5b8c0;margin:0 0 10px}
.eyebrow span{font-size:15px;vertical-align:-1px;margin-right:7px;color:var(--rose)}
h1{position:relative;width:fit-content;margin:0 auto 7px;font:italic 400 49px/1.02 Letter,Georgia,serif;letter-spacing:-1px;color:var(--rose)}
h1 span{position:absolute;right:-20px;top:2px;font:13px/1 Arial,sans-serif;color:#e3d6dd}
.portrait-stage{position:relative;min-height:0;isolation:isolate;margin:2px -6px 5px;}
#portrait{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none;}
#portrait.dragging{cursor:grabbing}
#portrait:focus-visible{outline:1px solid #edc5d266;outline-offset:-6px;border-radius:8px}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#c1b3bd;font-size:12px;letter-spacing:.3px;pointer-events:none}
.loading-star{font-size:44px;color:var(--rose);animation:loading-breathe 2.5s ease-in-out infinite}
.gesture-hint{text-align:center;margin:0 0 10px;color:#d8cbd3;font-size:13px;line-height:1.5;letter-spacing:.15px;pointer-events:none;transition:opacity .6s}
.gesture-hint span{display:block}
.gesture-hint .hint-zoom{color:#c6b7c0}
footer{text-align:center;padding:4px 10px 0}
.word-count{color:#c8b9c2;margin:0 0 12px;font-size:10px;line-height:1.4;letter-spacing:.65px}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.35;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:1px solid var(--rose);outline-offset:3px}
.letter-link{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;color:#a2919d;text-decoration:none;font-size:10px;line-height:1.5;border-radius:4px}
.letter-link:hover{color:var(--rose)}
.footer-links{display:flex;justify-content:center;align-items:center;gap:10px}
.open-letter{min-height:44px;padding:10px 19px;border:1px solid #d8a9bd66;border-radius:24px;background:#edc5d210;color:var(--rose);font-size:12px;gap:13px}
.open-letter:hover{background:#edc5d21b}
.noscript{position:fixed;inset:40% 20px auto;text-align:center;font-size:15px;line-height:1.5;background:var(--night);z-index:4;padding:20px}
[hidden]{display:none!important}
@keyframes twinkle{from{opacity:calc(var(--opacity)*.35)}to{opacity:var(--opacity)}}
@keyframes loading-breathe{50%{opacity:.4;transform:scale(.9)}}
@media(max-height:700px){.universe{padding-top:max(13px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}h1{font-size:39px;margin-bottom:5px}.eyebrow{margin-bottom:7px;font-size:8px}.word-count{margin-bottom:7px}.gesture-hint{font-size:12px;margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}