:root{color-scheme:light;--paper:#fbf4e7;--ink:#48382d;--red:#944f49;--muted:#756652;--rule:#cfbfa6;font-family:Georgia,"Times New Roman",serif;color:var(--ink)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}html{background:#f6efe3}body{background:radial-gradient(ellipse at 42% 16%,#fff9ef 0%,#f9f2e6 50%,#f2e8d8 100%);min-height:100svh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;z-index:5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.38' d='M0 0h170v170H0z'/%3E%3C/svg%3E");background-size:160px}
button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,textarea:focus-visible{outline:3px solid #973e45;outline-offset:4px}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}
.defs,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.page{max-width:1110px;margin:auto;padding:0 clamp(16px,5vw,64px) 16px}
.mast{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule);padding:16px 0 12px;color:#77554b}
.brand,.route,.eyebrow,.plate span,.postal,.mail-line,.edit-action{font-family:"Trebuchet MS",Arial,sans-serif}
.brand{display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.19em;font-size:10px;font-weight:700}
.brand svg{width:22px;height:17px}.route{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.18em}.route svg{width:20px;height:16px}
.heading{text-align:center;padding:clamp(12px,2.5vh,32px) 0 clamp(14px,2.7vh,30px)}
.eyebrow{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:12px}.eyebrow i{width:25px;height:1px;background:#baa588}
h1{font-size:clamp(33px,4.2vw,57px);font-weight:normal;letter-spacing:-.045em;line-height:1.06;margin:.12em 0 0}h1 em{font-weight:400;color:var(--red)}
.frame{margin:0 auto;max-width:min(100%,calc((100svh - 204px)*1.5 + 44px));min-width:min(100%,580px);padding:clamp(7px,1.15vw,13px) clamp(7px,1.15vw,13px) 0;background:#fffbf0;border:1px solid #cfbfa8;box-shadow:0 12px 26px -19px #5d422c6e,0 3px 7px #553c2c14;position:relative}
.stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:3/2;container-type:inline-size;background:#e7c59f}
.room{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none}
.cat,.envelope{position:absolute;display:block;border:0;background:transparent;margin:0;padding:0}
.cat{left:33.5%;bottom:10.8%;width:34%;aspect-ratio:1.5;z-index:3;touch-action:none;user-select:none;transform-origin:center bottom}
.cat::before{content:"";position:absolute;z-index:-1;left:9%;right:6%;bottom:0;height:15%;border-radius:50%;background:#56371940;filter:blur(4px)}
.catbody{position:absolute;inset:0;display:block;transform-origin:48% 96%}.cat img{display:block;pointer-events:none;-webkit-user-drag:none;position:absolute;inset:auto 0 0;width:100%;height:auto}
.walk{opacity:0}.loaf{opacity:1}.cat:focus-visible,.envelope:focus-visible{outline-color:#fff9e6;outline-style:dashed;outline-offset:4px}
[data-state="waiting"] .catbody{animation:breathe 3.7s ease-in-out infinite}
[data-state="once"] .catbody{animation:nuzzle .72s ease-out both}
@keyframes breathe{50%{transform:scale(1.007,1.014)}}@keyframes nuzzle{32%{transform:rotate(-4deg) translateY(-2%)}70%{transform:rotate(1.1deg)}100%{transform:rotate(-1deg)}}
[data-state="moving"] .cat,[data-state="ready"] .cat{left:70%;width:26%;bottom:14.3%;transition:left 1.22s .14s ease-in-out,width 1.22s .14s ease-in-out,bottom 1.22s .14s ease-in-out}
[data-state="moving"] .loaf{opacity:0;transition:opacity .15s}[data-state="moving"] .walk{opacity:1;transition:opacity .16s;animation:tread .32s ease-in-out 4}
[data-state="ready"] .walk{opacity:0;transition:opacity .20s}[data-state="ready"] .loaf{opacity:1;transition:opacity .28s}
@keyframes tread{50%{transform:translateY(-2.7%) rotate(-1.8deg)}}
.envelope{z-index:2;left:47%;bottom:9.8%;width:23%;height:13.4%;transform:translateX(-50%) rotate(-7deg) skewX(5deg);background:linear-gradient(155deg,#f6d8b3,#fff0d6 55%,#e5c29a);border:1px solid #b18a68;border-radius:2px;box-shadow:1px 3px 3px #563b2673;overflow:hidden;color:#785049;transition:filter .25s}
.flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 63%);background:linear-gradient(160deg,#fff0d9,#e1b994)}.cover-name{position:absolute;bottom:8%;left:10%;font-size:clamp(12px,2.2cqw,24px);line-height:1;font-style:italic}.seal{position:absolute;left:45%;top:42%;display:grid;place-items:center;width:12%;aspect-ratio:1;border-radius:50%;background:#a65b50;box-shadow:inset 1px 1px 2px #f6c0a4;color:#f1c3ad;font-size:1.7cqw}
[data-state="ready"] .envelope:hover{filter:brightness(1.08)}.love{position:absolute;z-index:4;left:43%;bottom:43%;font-size:clamp(17px,3.3cqw,32px);color:#ac565a;opacity:0;pointer-events:none;text-shadow:0 1px #ffe4c4}.float{animation:love 1.25s ease-out}
@keyframes love{0%{opacity:0;transform:translateY(10px) scale(.6)}18%{opacity:1}100%{opacity:0;transform:translate(6px,-25px) scale(1.08)}}
figcaption{display:flex;align-items:center;justify-content:center;gap:12px;min-height:47px}
#hint{padding:9px 0;border:0;background:transparent;font-size:clamp(15px,1.7vw,19px);font-style:italic;color:#634a3e}
.dots{display:inline-flex;gap:3px}.dots svg{width:14px;height:14px;fill:#d6c7b3;transition:fill .25s}.dots svg:first-child{transform:rotate(-16deg)}.dots svg:last-child{transform:rotate(12deg) translateY(-2px)}
[data-state="once"] .dots svg:first-child,[data-state="moving"] .dots svg,[data-state="ready"] .dots svg{fill:#a65c50}
.foot{max-width:min(100%,calc((100svh - 204px)*1.5 + 44px));min-width:min(100%,580px);margin:10px auto 0;display:flex;min-height:26px;justify-content:flex-end;align-items:center;font-size:12px;color:var(--muted);font-style:italic}
#reset{border:0;background:transparent;font-size:12px;padding:6px 2px;font-family:inherit;font-style:italic}
.reading{overflow:hidden}dialog{color:var(--ink);border:0;padding:0;background:transparent;width:min(94vw,900px);max-width:none;max-height:95svh;overflow:auto}
dialog::backdrop{background:rgba(35,26,20,.66);backdrop-filter:blur(4px)}.dialog-wrap{padding:45px 6px 12px;position:relative}
.close{display:grid;place-items:center;position:absolute;right:6px;top:1px;width:36px;height:36px;border:1px solid #f1ddbd8a;border-radius:50%;background:#3b2c26aa;color:#fff8e9;line-height:1;font-family:Arial,sans-serif;font-size:23px}
.postcard{position:relative;display:grid;grid-template-columns:46% 54%;min-height:360px;overflow:hidden;background:#fff4dc;border:1px solid #c3a888;box-shadow:0 5px 14px #24160966}
dialog[open] .postcard{animation:unfold .5s cubic-bezier(.2,.7,.35,1) both;transform-origin:center}
@keyframes unfold{from{opacity:0;transform:translateY(12px) rotate(-1.3deg) scale(.98)}to{opacity:1;transform:none}}
.paint{position:relative;padding:clamp(7px,1.1vw,14px);display:flex;flex-direction:column;background:linear-gradient(90deg,#f8e7c7,#fcf0d5 95%,#ddc9a7);min-width:0}
.art-window{position:relative;z-index:1;display:block;flex:none;aspect-ratio:2/3;width:100%;margin:auto;padding:0;border:0;overflow:visible;appearance:none;-webkit-appearance:none;background:#eacfb0;cursor:zoom-in;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.memory-print{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;transform-origin:0 0;transform:translate(0,0) scale(1);transition:transform .55s cubic-bezier(.22,.72,.25,1)}
.art-window[aria-pressed="true"] .memory-print{transform:translate(var(--photo-x),var(--photo-y)) scale(var(--photo-scale))}
.art-window img,.art-window canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hold-label{position:absolute;top:6px;left:6px;display:flex;align-items:center;gap:.42em;padding:3px 7px;border-radius:20px;background:#433528bf;color:#fff7e3;font:italic clamp(10px,1.2vw,13px)/1.3 Georgia,serif;pointer-events:none;transition:opacity .15s}
.hold-label::before{content:"";width:.58em;height:.58em;border:1px solid currentColor;border-radius:50%;box-shadow:0 0 0 1px #433528,0 0 0 2px #f5e8cc}
.art-window[aria-pressed="true"] .hold-label{opacity:0}
.plate{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#705a42;padding:9px 1px 0}.plate span{font-size:9px;letter-spacing:.24em}.plate i{font-size:12px}
.writing{display:flex;flex-direction:column;min-width:0;padding:clamp(15px,3vw,40px);background:linear-gradient(90deg,#dfcfae 0,#f4e5cb 1.6%,#fbefda 5%,#fff6e5 90%,#f7ead4)}
.postal{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:9px;letter-spacing:.25em;color:#967b63;margin:0 0 .6em}.stamp{display:grid;place-items:center;aspect-ratio:4/5;width:clamp(25px,4.5vw,54px);border:3px dotted #fff0da;outline:1px solid #b69473;background:#c99282;color:#fff0d6;transform:rotate(5deg)}.stamp svg{width:64%;height:64%;fill:currentColor}
.ink{margin:auto 0;font-size:clamp(16px,1.8vw,22px);line-height:1.55}
.ink h2{margin:.3em 0 .75em;font-weight:normal;font-size:clamp(26px,3vw,43px);line-height:1.12;letter-spacing:-.04em;color:#78433e}
.ink p{margin:.7em 0}.ink .sign{font-style:italic;color:#894e45;font-size:1.26em;margin-top:.65em}
.mail-line{border-top:1px solid #ccb89c;padding-top:10px;margin-top:1.2em;display:flex;gap:8px;align-items:center;color:#775f4d;font-size:9px;letter-spacing:.18em}.mail-line b{font-weight:normal}.mail-line span{color:#a3725d}
@media(max-width:620px){
.page{padding:0 13px 18px}.mast{padding:16px 3px 13px}.brand,.route{font-size:9px}.brand{letter-spacing:.13em}.route{gap:6px}.heading{padding:26px 0 21px}.eyebrow{font-size:8px}
.frame,.foot{min-width:0;max-width:none}.stage{aspect-ratio:1.04}.room{object-position:50% 51%}.cat{left:27.5%;width:49%;bottom:10.6%}.envelope{left:44%;width:32%;height:12.7%}
[data-state="moving"] .cat,[data-state="ready"] .cat{left:65.5%;width:33%;bottom:16%}
.seal{font-size:2.6cqw}.cover-name{font-size:3.7cqw}.love{left:37%;bottom:39%}.foot{padding:0 1px}figcaption{min-height:49px;gap:8px}#hint{font-size:16px}
dialog{width:97vw}.dialog-wrap{padding:43px 4px 8px}.postcard{grid-template-columns:43% 57%;min-height:0}.writing{padding:13px 11px 15px 14px}.ink{font-size:14px;line-height:1.43}.ink h2{font-size:24px}.postal{font-size:7px;letter-spacing:.13em}.stamp{width:22px}.mail-line{font-size:7px;letter-spacing:.08em;gap:4px;margin-top:8px}.paint{padding:6px}.plate{align-items:start;gap:2px;flex-direction:column}.plate span{font-size:7px}.plate i{font-size:10px}
}
@media(min-width:621px) and (max-height:630px){.heading{padding:10px 0}.heading h1{font-size:35px}.frame,.foot{min-width:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.art-window #breeze{left:5.2734375%;top:69.0104167%;width:21.484375%;height:18.2291667%}
.walking-feet{position:absolute;inset:auto 0 0;width:100%;height:auto;pointer-events:none}
[data-state="moving"] .walking-feet{animation:tread .32s ease-in-out 4}

/* Ink-blue paper around the warm room. The open postcard keeps its cream paper. */
html{background:#141823}
body{background:radial-gradient(ellipse at 48% 23%,#283148 0%,#202639 43%,#151a2a 78%,#111522 100%)}
.mast{border-color:#a799873d;color:#dac4a2}
.eyebrow{color:#d5c3aa}.eyebrow i{background:#a68d68}
h1{color:#fff0d7}h1 em{color:#efb7a4}
.frame{border-color:#9b8468;background:#f5ead7;box-shadow:0 16px 40px -12px #05060d88,0 4px 9px #09091350}
.stage{background:#17223c}.foot{color:#decdb5}
#skip-night{border:0;background:transparent;padding:8px 2px;font-size:12px;font-style:italic;color:inherit}
#skip-night:focus-visible,#reset:focus-visible{outline-color:#ffd690}
#night-sky,.sky-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.sky-ink{opacity:0;fill:#ffdfa1;filter:drop-shadow(0 0 2px #c99a59) drop-shadow(0 0 4px #bb792f80)}
.desk-clock{position:absolute;left:16.3%;bottom:24%;width:15.7%;min-width:74px;z-index:2;padding:.5cqw;
  border:1px solid #7c4b29;border-radius:1.25cqw 1.25cqw .7cqw .7cqw;transform:rotate(-2deg);
  background:linear-gradient(160deg,#f6c385 0%,#a06b3e 11%,#b88a59 42%,#8c5732 85%,#67391f 100%);
  box-shadow:inset 0 1px 1px #ffddb2,1px 3px 1px #56351f,1px 6px 5px #34180c88}
.desk-clock::before,.desk-clock::after{content:"";position:absolute;bottom:-.65cqw;width:12%;height:.62cqw;border-radius:0 0 2px 2px;background:#593922}
.desk-clock::before{left:11%}.desk-clock::after{right:11%}
.clock-face{display:grid;justify-items:center;gap:.17cqw;padding:.53cqw .15cqw .55cqw;
  border-radius:.68cqw .68cqw .32cqw .32cqw;border:1px solid #5d493a;
  background:linear-gradient(155deg,#423c34,#292b2d 72%);box-shadow:inset 0 1px 3px #1c1c1f}
#clock-day{font:600 clamp(8px,1.14cqw,11px)/1.15 Georgia,serif;letter-spacing:.11em;color:#eacd9c}
#clock-time{font:500 clamp(14px,2.43cqw,25px)/1.06 ui-monospace,Menlo,Consolas,monospace;letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:#ffe1a7;text-shadow:0 0 3px #f6ad5c66}
[data-night="sealed"] .dots,[data-night="countdown"] .dots,[data-night="fireworks"] .dots{display:none}
[data-night="sealed"] #hint{min-height:44px;min-width:10em;padding:5px 20px;border:1px solid #b49072;border-radius:24px;background:#fbf1df;color:#70483a}
[data-night="sealed"] #hint:hover{background:#fff8e9}
[data-night="countdown"] #hint::before,[data-night="fireworks"] #hint::before{content:"✦";font-style:normal;font-size:.75em;margin-right:9px;color:#a47445}
.loaf,.walk,.walking-feet{filter:brightness(.92) sepia(.13) saturate(.94)}
@media(max-width:620px){
.desk-clock{left:3.8%;bottom:23.5%;width:24%;padding:.8cqw;border-radius:1.8cqw 1.8cqw 1.1cqw 1.1cqw}
.clock-face{padding:.9cqw .15cqw .8cqw;gap:.42cqw}
#clock-day{font-size:clamp(8px,2.05cqw,11px)}#clock-time{font-size:clamp(14px,3.65cqw,20px)}
}

.take-flight{align-self:flex-start;border:0;border-bottom:1px solid #b48f66;background:transparent;padding:.35em 0;color:#7b483b;text-align:left;font:italic clamp(15px,1.6vw,19px)/1.3 Georgia,serif}
.take-flight span{display:inline-block;margin-left:.25em;color:#a37b4a;font-style:normal}.take-flight:hover{color:#4b3125}
#journey{width:min(94vw,1030px,calc((100svh - 164px)*1.54));max-height:96svh;
  padding:0;border:1px solid #ad9470;border-radius:3px;background:#151e2c;color:#fff1d9;
  box-shadow:0 16px 70px #090b14aa;overflow:auto;overscroll-behavior:contain}
#journey::backdrop{background:#121627e8;backdrop-filter:blur(4px)}
.trip-shell{position:relative;isolation:isolate}.trip-bar{min-height:42px;padding:4px 10px 4px 17px;display:flex;align-items:center;gap:14px;background:#182032;color:#d9c19e}
.trip-brand,.trip-caption span{font:600 10px/1.15 "Trebuchet MS",Arial,sans-serif;text-transform:uppercase;letter-spacing:.17em}
.trip-brand{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.trip-brand svg{width:20px;height:16px}
.trip-bar h2{margin:0 auto 0 0;font:italic 15px/1.1 Georgia,serif;color:#f3e5d1;font-weight:400}
#trip-close{display:grid;place-items:center;width:35px;height:35px;border:0;border-radius:50%;background:transparent;color:#f2d9b6;font:24px/1 Arial,sans-serif}
.trip-viewport{aspect-ratio:3/2;position:relative;width:100%;background:#111a2c;overflow:hidden}
#trip-canvas,#trip-poster,#trip-poster img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.trip-loading{position:absolute;inset:0;display:grid;place-items:center;font-style:italic;color:#f5d6ab;background:linear-gradient(135deg,#1b263b,#232739)}
.trip-caption{padding:12px clamp(14px,3vw,28px) 7px;background:#f7ead4;color:#4b3c30;min-height:66px}
.trip-caption span{color:#7d5644;display:block;letter-spacing:.15em}.trip-caption p{margin:4px 0 0;font:italic clamp(15px,1.75vw,21px)/1.25 Georgia,serif}
.trip-caption:has(p[hidden]){display:grid;align-content:center}.trip-caption:has(p[hidden]) span{display:block}
.trip-footer{display:flex;align-items:center;gap:14px;padding:3px clamp(14px,3vw,28px) 8px;color:#83624a;background:#f7ead4}
.trip-footer button{border:0;background:transparent;padding:8px 1px;font:italic 13px/1.3 Georgia,serif;white-space:nowrap}.trip-footer button:hover,.take-flight:hover{text-decoration:underline}
.trip-track{flex:1;height:2px;background:#d9c7ab}.trip-track i{display:block;width:100%;height:100%;background:#a5674e;transform:scaleX(0);transform-origin:left}
@media(max-width:620px) and (orientation:portrait){#journey{width:96vw}.trip-viewport{aspect-ratio:4/5;max-height:calc(96svh - 155px)}.trip-bar{padding-left:12px;gap:10px}.trip-brand{font-size:8px}.trip-caption{min-height:64px}.trip-footer{gap:11px}.take-flight{font-size:14px}.trip-bar h2{font-size:14px}}
@media(max-height:450px) and (orientation:landscape){#journey{width:min(92vw,690px)}.trip-viewport{height:calc(93svh - 111px);aspect-ratio:auto}.trip-caption{min-height:34px;padding:4px 12px}.trip-caption span{display:none}.trip-caption p{margin:0;font-size:14px}.trip-bar{min-height:29px}.trip-footer{padding:1px 12px}}

#worn-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#wear-necklace{position:absolute;left:50%;top:50%;width:42%;height:18%;min-height:48px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;color:#fff3dc;touch-action:manipulation}
#wear-necklace span{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 15px;border:1px solid #ebd3ab85;border-radius:30px;background:#17202ed9;font:italic clamp(14px,1.5vw,17px)/1.2 Georgia,serif;animation:wear-in .5s ease-out both}
#wear-necklace:hover span,#wear-necklace:focus-visible span{background:#30323c;border-color:#fff1d5}
#wear-necklace:focus-visible{outline:2px dashed #fff0d1;outline-offset:2px}
@keyframes wear-in{from{opacity:0}to{opacity:1}}
.infinity-letter{background:linear-gradient(115deg,#f5e5cb,#fff5e3 50%,#f6e9d5);color:#4c3a30;padding:clamp(18px,2.7vw,35px);font:clamp(16px,1.43vw,20px)/1.45 Georgia,serif;animation:wear-in .75s ease-out both}
.infinity-letter h3{margin:.42em 0 .48em;font:italic 1.9em/1 Georgia,serif;color:#814b44}.infinity-letter h3:focus{outline:none}
.infinity-letter p{margin:0 0 .8em}.infinity-letter .end-postmark{font:600 9px/1.3 'Trebuchet MS',Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#86624d}.end-postmark i{margin:0 .32em;font-style:normal}
.infinity-letter .end-signature{font-style:italic;margin:1.1em 0 0}.end-signature em{font-size:1.28em;color:#854b43}
#journey[data-letter] .trip-caption{display:none}
@media(min-width:621px) and (min-height:451px){
  #journey[data-letter] .trip-shell{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
  #journey[data-letter] .trip-bar,#journey[data-letter] .trip-footer{grid-column:1/-1}
  #journey[data-letter] .trip-viewport{min-height:310px;height:auto;aspect-ratio:auto;align-self:stretch}
}
@media(max-width:620px),(max-height:450px){
  #journey[data-letter] .trip-viewport{height:clamp(118px,26svh,228px);aspect-ratio:auto}
  .infinity-letter{padding:14px clamp(16px,5vw,28px);font-size:clamp(16px,4.05vw,18px);line-height:1.38}.infinity-letter h3{margin:.28em 0 .42em;font-size:1.65em}.infinity-letter p{margin:0 0 .6em}.infinity-letter .end-signature{margin:.65em 0 0}
}