@scope(.letters-of-love-app){:scope{--ink:#151515;--paper:#fffefa;--canvas:#f7f7f5;--muted:#6e6e69;--line:#d5d5d0;--letter-ink:#153a59;--letter-paper:#f1e8d2;--font-signifier:"Signifier","Iowan Old Style",Baskerville,"Times New Roman",serif;--reader-background:#fff;--metadata-title:#151515;--metadata-context:#4f4f4a;--metadata-label:#6e6e69;--metadata-value:#353532;--metadata-divider:#d5d5d080;--seal-scrim:#f7f7f5b8;--reader-close-background:#ffffff9e;--reader-close-border:#ffffffc2;--reader-selection-background:#508ae075;--reader-selection-ink:#101b2c}@media (prefers-color-scheme:dark){:scope{--canvas:#111110;--reader-background:#111110;--metadata-title:#f4f3ef;--metadata-context:#c8c7c1;--metadata-label:#92918b;--metadata-value:#deddd7;--metadata-divider:#ffffff1f;--seal-scrim:#111110b8;--reader-close-background:#262624ad;--reader-close-border:#ffffff29;--reader-selection-background:#70a4f185;--reader-selection-ink:#f8fbff}}*{box-sizing:border-box}:scope{background:var(--canvas);width:100%;height:100%;color:var(--ink);margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button{font:inherit}.archive{background-color:var(--canvas);cursor:default;touch-action:pan-y;-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}.archive-seal{--seal-rotate-x:0deg;--seal-rotate-y:0deg;--seal-glint-x:50%;--seal-glint-y:42%;z-index:20;transform-origin:18% 2%;pointer-events:none;isolation:isolate;will-change:top,left,transform;width:200px;height:200px;transition:top .5s cubic-bezier(0,0,.2,1),left .5s cubic-bezier(0,0,.2,1),transform .5s cubic-bezier(0,0,.2,1);position:fixed;top:18px;left:-13px;transform:scale(.5)}.archive-seal.is-open{z-index:80;top:calc(50% - 196px);left:calc(50% - 164px);transform:scale(2)}.archive-seal-backdrop{z-index:70;background:var(--seal-scrim);opacity:0;pointer-events:none;cursor:zoom-out;-webkit-backdrop-filter:blur(2px);border:0;padding:0;transition:opacity .5s cubic-bezier(0,0,.2,1);position:fixed;inset:0}.archive-seal-backdrop.is-visible{opacity:1;pointer-events:auto}.archive-seal-face{width:100%;height:100%;transform:perspective(620px)rotateX(var(--seal-rotate-x))rotateY(var(--seal-rotate-y));transform-style:preserve-3d;will-change:transform;transition:transform .5s cubic-bezier(0,0,.2,1);position:relative}.archive-seal.is-open .archive-seal-face{transform:perspective(760px)rotateX(0)rotateY(180deg)}.archive-seal-side{backface-visibility:hidden;transform-style:preserve-3d;display:block;position:absolute;inset:0}.archive-seal-front{transform:rotateY(0)}.archive-seal-back{transform:rotateY(180deg)}.archive-seal-back-clip-defs{position:absolute}.archive-seal-back-image{clip-path:url(#archive-seal-back-clip)}.archive-seal-back-copy{z-index:2;color:#2b2318e0;font-family:var(--font-signifier);text-align:center;text-wrap:pretty;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:42px 48px 34px}.archive-seal-back-copy>span{font-size:9px;line-height:1.46}.archive-seal-image{filter:none;pointer-events:none;width:100%;height:100%;display:block}.archive-seal-sheen,.archive-seal-glint{pointer-events:none;position:absolute;inset:0;-webkit-mask-image:url(/letters-of-love/seal.png);mask-image:url(/letters-of-love/seal.png);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.archive-seal-sheen{background:linear-gradient(115deg,#0000 18%,#fffae70d 32%,#d3e8ff1f 43%,#ffffff6b 50%,#ffe2d517 58%,#0000 74%);background-position:var(--seal-glint-x)var(--seal-glint-y);mix-blend-mode:screen;opacity:.32;background-size:220% 220%;transition:opacity .24s;transform:translateZ(2px)}.archive-seal-glint{background:radial-gradient(circle at var(--seal-glint-x)var(--seal-glint-y),#ffffff80 0,#fffae524 13%,transparent 36%);mix-blend-mode:screen;opacity:.32;transition:opacity .24s;transform:translateZ(4px)}.archive-seal:not(:hover) .archive-seal-glint{opacity:.12}.archive-seal-hitbox{z-index:3;cursor:pointer;pointer-events:auto;background:0 0;border:0;border-radius:50%;padding:0;position:absolute;inset:4px 36px}.archive-seal-hitbox:focus-visible{outline:none}.archive-seal-hitbox:disabled{pointer-events:none}@media (hover:hover) and (pointer:fine){.archive-seal:hover{transform:scale(1)}.archive-seal:hover .archive-seal-sheen{opacity:.55}}.vertical-viewport{z-index:2;overscroll-behavior-y:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;transition:opacity .24s;position:fixed;inset:0;overflow:hidden auto}.vertical-viewport::-webkit-scrollbar{display:none}.vertical-viewport.has-selection{opacity:0;pointer-events:none;overflow-y:hidden}.vertical-viewport.is-intro-locked{overflow-y:hidden}.vertical-track{width:min(100% - clamp(160px,20vw,420px),1700px);height:var(--archive-track-height,6920px);margin:0 auto;position:relative}.vertical-letter-slot{top:var(--letter-y);left:var(--letter-x-wide);width:min(var(--letter-width),30vw);transform:translate(-50%,var(--letter-parallax-y,0px));will-change:transform;position:absolute}.vertical-letter-button{width:100%;color:inherit;text-align:left;cursor:pointer;transform-origin:50%;will-change:transform;background:0 0;border:0;padding:0;transition:transform .22s cubic-bezier(.22,1,.36,1);display:block}.vertical-letter-button:hover{transform:scale(1.025)}.vertical-letter-render{width:calc(100% + 28px);margin:-14px;padding:14px;transition:opacity .24s;display:block}.archive.is-intro-pending [data-intro-card=true] [data-letter-stack],.archive.is-webgl-ready [data-intro-card=true] [data-letter-stack]{opacity:0;animation:none;transform:none}.archive.is-webgl-ready .vertical-letter-render[data-webgl-ready=true]{opacity:0}.webgl-letter-layer{z-index:3;opacity:0;pointer-events:none;width:100%;height:100%;transition:opacity .24s;position:fixed;inset:0}.webgl-letter-layer.is-active{opacity:1}.webgl-letter-layer.has-selection{z-index:41}.vertical-letter-button:focus-visible,.letter-details a:focus-visible{outline-offset:4px;outline:2px solid}.reader-backdrop{z-index:40;overscroll-behavior-y:none;scrollbar-width:none;background:var(--reader-background);cursor:default;touch-action:pan-y;-webkit-user-select:text;user-select:text;animation:.56s cubic-bezier(.22,1,.36,1) both reader-surface-in;position:fixed;inset:0;overflow:auto}.reader-backdrop::-webkit-scrollbar{display:none}.reader-backdrop:focus{outline:none}.reader-backdrop.is-closing{animation:.56s cubic-bezier(.22,1,.36,1) both reader-surface-out}.reader-webgl-surface{z-index:40;background:var(--reader-background);pointer-events:none;animation:.56s cubic-bezier(.22,1,.36,1) both reader-surface-in;position:fixed;inset:0}.reader-webgl-surface.is-closing{animation:.56s cubic-bezier(.22,1,.36,1) both reader-surface-out}.reader-backdrop.is-webgl-focused{z-index:42;background:0 0;animation:none}.reader-backdrop.is-webgl-focused [data-letter-page]{transform:none;animation:none!important}.reader-backdrop.is-webgl-focused [data-letter-page-render],.reader-backdrop [data-letter-page-render]{cursor:text;-webkit-user-select:text;user-select:text}.reader-backdrop.is-webgl-focused [data-letter-page-image]{opacity:0}.reader-backdrop [data-letter-selection-overlay]>[data-letter-variant]{box-shadow:none!important;background:0 0!important}.reader-backdrop [data-letter-selection-overlay]>[data-letter-variant]:before,.reader-backdrop [data-letter-selection-overlay]>[data-letter-variant]:after,.reader-backdrop [data-letter-selection-overlay]>[data-letter-variant]>[aria-hidden=true]{opacity:0!important}.reader-backdrop [data-letter-selection-overlay]>[data-letter-variant] *{color:#0000!important;text-shadow:none!important}.reader-backdrop [data-letter-selection-overlay]>[data-letter-variant] ::selection{background:var(--reader-selection-background);color:var(--reader-selection-ink)}.reader-backdrop.is-webgl-focused.is-closing{overflow:hidden}.reader-dismiss-layer{z-index:0;cursor:zoom-out;background:0 0;border:0;padding:0;position:fixed;inset:0}.reader-dismiss-layer:focus-visible{outline:none}.reader-mobile-close{z-index:50;top:calc(env(safe-area-inset-top) + 14px);left:calc(env(safe-area-inset-left) + 14px);border:1px solid var(--reader-close-border);background:var(--reader-close-background);width:44px;height:44px;color:var(--metadata-title);cursor:pointer;-webkit-backdrop-filter:blur(18px)saturate(150%);backdrop-filter:blur(18px)saturate(150%);border-radius:999px;place-items:center;padding:0;transition:opacity .16s;display:none;position:fixed;box-shadow:inset 0 1px #fff6,0 8px 30px #00000024}.reader-mobile-close svg{stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;display:block}.reader-mobile-close:focus-visible{outline-offset:3px;outline:2px solid}.reader-mobile-close:disabled{opacity:0;pointer-events:none}.reader-stage{z-index:1;pointer-events:none;grid-template-columns:minmax(0,640px) 320px;justify-content:center;align-items:start;gap:56px;width:min(100% - 48px,1050px);margin:0 auto;padding:56px 0 48px;display:grid;position:relative}.reader-stage [data-letter-page],.reader-stage .letter-details{pointer-events:auto}.letter-details{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;animation:.36s cubic-bezier(.22,1,.36,1) .22s both reader-content-in;position:sticky;top:56px}@keyframes reader-surface-in{0%{background-color:#0000}to{background-color:var(--reader-background)}}@keyframes reader-surface-out{0%{background-color:var(--reader-background)}to{background-color:#0000}}@keyframes reader-content-in{0%{opacity:0}to{opacity:1}}.reader-backdrop.is-closing .letter-details{animation:.22s both reader-content-out}@keyframes reader-content-out{0%{opacity:1}to{opacity:0}}.letter-details h2{color:var(--metadata-title);font-family:var(--font-signifier);text-wrap:balance;margin:0;font-size:30px;font-weight:400;line-height:1.15}.details-context{color:var(--metadata-context);text-wrap:pretty;margin:20px 0 0;font-size:13px;line-height:1.65}.letter-details dl{border-top:1px solid var(--metadata-divider);gap:13px;margin:28px 0 0;padding:20px 0;display:grid}.letter-details dl div{grid-template-columns:54px 1fr;gap:10px;display:grid}.letter-details dt,.letter-details dd{margin:0;font-size:13px;line-height:1.5}.letter-details dt{color:var(--metadata-label)}.letter-details dd{color:var(--metadata-value)}.letter-details a{color:inherit;text-underline-offset:3px}@media (max-width:2099px){.vertical-letter-slot{left:var(--letter-x)}}@media (max-width:1199px){.vertical-track{flex-direction:column;align-items:center;width:100%;height:auto;padding:1px 40px 220px;display:flex}.vertical-letter-slot{width:min(var(--letter-width),68vw);margin-top:var(--letter-gap);transform:translate(clamp(-15vw,var(--letter-offset),15vw),var(--letter-parallax-y,0px));position:relative;top:auto;left:auto}}@media (max-width:860px){.reader-stage{grid-template-columns:1fr;gap:32px;width:min(100% - 32px,640px);padding-top:82px}.letter-details{padding:4px 2px 30px;position:static}}@media (max-width:640px){.reader-mobile-close{display:grid}.vertical-track{padding-bottom:120px;padding-left:18px;padding-right:18px}.vertical-letter-slot{width:min(var(--letter-width),calc(100vw - 80px));margin-top:clamp(58px,var(--letter-gap),138px);transform:translate(clamp(-28px,var(--letter-offset),28px),var(--letter-parallax-y,0px))}.reader-stage{--reader-gutter:max(clamp(28px,8vw,44px),env(safe-area-inset-left),env(safe-area-inset-right));width:100%;padding-top:max(76px,calc(env(safe-area-inset-top) + 64px));padding-right:var(--reader-gutter);padding-left:var(--reader-gutter)}.reader-stage>[data-letter-stack]{justify-self:center;width:100%;min-width:0;margin-left:auto;margin-right:auto}.reader-stage [data-letter-page]{width:100%;max-width:100%;margin-left:auto;margin-right:auto}.letter-details{padding:8px 24px 54px}}@media (max-width:440px),(max-height:440px){.archive-seal.is-open{top:calc(50% - 157.6px);left:calc(50% - 138.4px);transform:scale(1.6)}}@media (prefers-reduced-motion:reduce){.vertical-letter-slot{--letter-parallax-y:0px!important}.archive-seal,.archive-seal-backdrop,.archive-seal-face,.reader-mobile-close,.vertical-letter-button,.vertical-viewport,.vertical-letter-render,.webgl-letter-layer{transition:none}.reader-backdrop,.letter-details{animation:none}}}