.letter-home{position:relative;isolation:isolate;background-color:#e9edf0;background-image:radial-gradient(ellipse at 0 10%,#cbdce67a,transparent 55%),radial-gradient(ellipse at 100% 85%,#f2e5c98a,transparent 48%),repeating-linear-gradient(18deg,#ffffff40 0,#ffffff40 .5px,transparent .5px,transparent 5px);background-size:100vw 100vh;background-attachment:fixed}
.memory-surround{position:fixed;inset:0;overflow:hidden;pointer-events:none;user-select:none;z-index:-1}
.memory-keyline{position:absolute;inset:106px 14px 18px;border:1px solid #9babaf55;border-radius:2px 24px 2px 24px}
.memory-keyline:after{content:"";position:absolute;inset:5px;border:1px dashed #b69e6b45;border-radius:1px 18px 1px 18px}
.memory-rail{position:absolute;top:122px;bottom:30px;left:clamp(7px,calc((100vw - 1500px)/4),90px);width:clamp(70px,calc((100vw - 1220px)/2 - 16px),170px)}
.memory-rail--right{left:auto;right:clamp(7px,calc((100vw - 1500px)/4),90px)}
.memory-rail:before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed #a9b7bb88}
.memory-object{position:absolute;top:2%;left:50%;width:100%;max-width:168px;margin:0;transform:translateX(-50%) rotate(-8deg)}
.memory-object img{display:block;width:100%;height:auto;filter:drop-shadow(2px 5px 3px #2d46500d)}
.memory-object figcaption{text-align:center;color:#6c7d85;font:10px/1.7 Georgia,serif;letter-spacing:.13em;margin-top:3px}
.memory-object--night{top:auto;bottom:5%;transform:translateX(-50%) rotate(6deg)}
.memory-rail--right .memory-object{top:24%;transform:translateX(-50%) rotate(8deg)}
.memory-rail--right .memory-object--music{top:auto;bottom:8%;transform:translateX(-50%) rotate(-8deg)}
.memory-datestamp{position:absolute;top:53%;left:50%;transform:translateX(-50%) rotate(-12deg);width:78px;height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #849aa6;border-radius:50%;outline:1px solid #a7b7bd;outline-offset:4px;background:#edf0eb;color:#5d7b8c;font:9px/1.6 Georgia,serif;letter-spacing:.12em}
.memory-datestamp b{font:400 13px/1.8 var(--a-serif);letter-spacing:.12em}.memory-datestamp i{font-style:normal;font-size:8px}
.memory-side-note{position:absolute;top:2%;left:50%;transform:translateX(-50%);background:#e9edf0;padding:13px 0;writing-mode:vertical-rl;color:#7f919c;font:12px/1.8 var(--a-serif);letter-spacing:.25em}
.memory-pocket{display:none}
@media(max-width:1500px){.memory-object figcaption{font-size:8px;letter-spacing:.04em}.memory-datestamp{width:54px;height:54px;font-size:8px}.memory-datestamp b{font-size:9px}.memory-datestamp i{font-size:6px}.memory-side-note{font-size:10px}}
@media(max-width:1100px){.memory-rail{left:-16px;width:62px;opacity:.68}.memory-rail--right{left:auto;right:-16px}.memory-object figcaption,.memory-side-note,.memory-datestamp{display:none}.memory-pocket{display:flex;width:min(720px,calc(100% - 60px));margin:26px auto -25px;align-items:center;justify-content:center;gap:26px;color:#70808b}.memory-pocket span{display:flex;align-items:center;gap:7px;font:10px/1.8 var(--a-serif);letter-spacing:.1em}.memory-pocket img{width:33px;height:39px;object-fit:contain}}
@media(max-width:620px){.memory-rail{display:none}.memory-keyline{inset:91px 4px 8px;border-color:#91aab333;border-radius:2px 18px 2px 18px}.memory-keyline:after{inset:3px;border-radius:1px 13px 1px 13px}.memory-rail{left:-28px;width:50px;opacity:.45}.memory-rail--right{left:auto;right:-28px}.memory-rail:before{border-color:#97a9b44d}.memory-pocket{width:calc(100% - 34px);gap:13px;margin:21px auto -13px}.memory-pocket span{font-size:9px;gap:3px;letter-spacing:0}.memory-pocket img{width:25px;height:31px}.memory-object{top:3%}.memory-rail--right .memory-object{top:39%}}
@media print{.memory-surround,.memory-pocket{display:none}}