@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400&display=swap');
:root{color-scheme:dark;font-family:'Noto Serif JP',serif;color:#eae8e1;background:#3c4774}
*{box-sizing:border-box}body{margin:0}button,a,input,textarea{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #dfd1a6;outline-offset:5px}
.sky{min-height:100svh;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.backdrop{position:fixed;inset:0;z-index:-3;background:url('/night-romantic.png') 65% 40%/cover no-repeat;pointer-events:none}
.backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,25,60,.06),transparent 75%),linear-gradient(0deg,rgba(40,28,70,.08),transparent 35%)}
.atmosphere{position:fixed;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 65% 15%,#dbc9ff13,transparent 45%),radial-gradient(ellipse at 25% 82%,#ffd6be1c,transparent 60%);mix-blend-mode:screen;opacity:.55}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.letter{margin:38vh 0 15vh 14vw;padding:0 0 40px;width:min(560px,70vw)}
.message{white-space:pre-wrap;overflow-wrap:anywhere;font-weight:300;font-size:clamp(18px,2vw,25px);line-height:2.3;letter-spacing:.08em;color:#fff5ee;text-shadow:0 2px 16px #242348,0 1px 4px #24234880;max-width:560px}
.message:empty,.status:empty{display:none}.status{font:12px/1.8 sans-serif;color:#b5c1d2}
@media(max-width:600px){.backdrop{background-position:68% top}.letter{margin:47vh 28px 90px;width:calc(100% - 56px)}.message{font-size:18px;line-height:2.1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}