:root{--mist:#F0EDE6;--glass:#D8E4E8;--drift:#E4DDD2;--navy:#1E3A5F;--teal:#4A8B8D;--terra:#C06B3E;--green:#7FB5A0;--stone:#6B7B8D;--frost:rgba(240,237,230,.72)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-snap-type:y mandatory}body{background:var(--mist);color:var(--navy);font-family:'Lora',serif;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.72;overflow-x:hidden}.page-shell{position:relative}.tray{min-height:100vh;position:relative;display:grid;place-items:center;padding:clamp(28px,5vw,72px) 24px;overflow:hidden;scroll-snap-align:start}.scroll-indicator{position:fixed;right:20px;top:0;width:2px;height:100vh;background:rgba(30,58,95,.12);z-index:50}.scroll-indicator:before{content:"";position:absolute;inset:0 auto auto 0;width:2px;height:var(--progress,0%);background:linear-gradient(180deg,#C06B3E,#7FB5A0,#1E3A5F);box-shadow:0 0 12px rgba(127,181,160,.55)}.scroll-indicator span{position:absolute;bottom:14px;left:50%;width:9px;height:9px;border-radius:50%;background:#C06B3E;transform:translateX(-50%);animation:pulse-attention 2.5s ease-in-out infinite}.scroll-indicator span{transform:translateX(-50%)}.tray-dawn{background:linear-gradient(175deg,#F0EDE6 0%,#E4DDD2 45%,#D8E4E8 100%)}.dawn-board{width:min(1180px,100%);display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:stretch}.hero-card,.note-card,.stamp-card,.postcard,.mini-card,.dusk-copy,.dusk-mailbox{border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.06),0 12px 24px rgba(0,0,0,.08),0 24px 48px rgba(46,90,120,.04);position:relative}.hero-card{min-height:74vh;display:grid;place-items:center;text-align:center;background:rgba(240,237,230,.55);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(16px) saturate(1.4);transform:rotate(-1.2deg);padding:40px}.mailbox{width:min(330px,70vw);animation:float 4s ease-in-out infinite}.mailbox-door{transform-origin:98px 136px;transition:transform .45s ease}.hero-card:hover .mailbox-door{transform:rotateY(-20deg) translateX(-7px)}.mailbox-flag{transform-origin:174px 124px;animation:float 4s ease-in-out infinite}.postcard-peek{opacity:0;transition:opacity .4s ease}.hero-card:hover .postcard-peek{opacity:1}h1,h2,h3{font-family:'Zilla Slab',serif;letter-spacing:-.02em}h1{font-size:clamp(2.4rem,6vw,5rem);line-height:1;color:#1E3A5F;text-shadow:0 2px 8px rgba(30,58,95,.12);margin-top:24px}.subtitle{font-style:italic;color:#4A8B8D;font-size:clamp(1.1rem,2vw,1.45rem)}.dawn-stack{display:grid;gap:24px}.glass-card,.stamp-card,.aero-glass{background:var(--frost);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.35);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 4px 16px rgba(30,58,95,.08),0 1px 0 rgba(255,255,255,.4) inset}.note-card{padding:34px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(2deg)}.note-card p{font-size:clamp(1.15rem,2vw,1.45rem);color:#6B7B8D}.note-card b,.postcard small,.aero-glass small,.dusk-copy small{font-family:'IBM Plex Mono',monospace;color:#C06B3E;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}.stamp-card{display:grid;place-items:center;padding:26px;transform:rotate(-2.4deg);text-align:center;font-family:'IBM Plex Mono',monospace;color:#C06B3E;letter-spacing:.06em}.stamp-card svg{width:150px;max-width:80%}.tray-morning,.tray-afternoon{background:#F0EDE6}.network-field{position:absolute;inset:0;opacity:.7;background-image:radial-gradient(circle,#1E3A5F 1.5px,transparent 2px),linear-gradient(90deg,rgba(30,58,95,.035) 1px,transparent 1px),linear-gradient(rgba(30,58,95,.035) 1px,transparent 1px);background-size:60px 60px;animation:float 8s ease-in-out infinite}.coordinate{position:absolute;top:12%;right:8%;font-family:'IBM Plex Mono',monospace;color:#4A8B8D;font-size:.75rem;letter-spacing:.06em}.morning-grid{width:min(1180px,100%);display:grid;grid-template-columns:2fr 1fr 1.5fr;grid-template-areas:'a b c' 'a d e';gap:16px;align-items:stretch}.postcard{grid-area:var(--area);background:#E4DDD2;padding:clamp(22px,3vw,34px);border:1px solid rgba(107,123,141,.22);transform:rotate(var(--r));transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}.stamp-edge:before{content:"";position:absolute;inset:8px;border-radius:9px;pointer-events:none;background-image:radial-gradient(circle,transparent 6px,rgba(228,221,210,.9) 6px);background-size:18px 18px;background-position:-9px -9px;opacity:.32}.postcard h2{font-size:clamp(1.6rem,4vw,3.1rem);line-height:1.02;margin:.2em 0;color:#1E3A5F}.postcard p,.mini-card p{font-style:italic;color:#6B7B8D}.panel-illustration{height:clamp(110px,18vw,190px);width:100%}.signal:before,.signal:after{content:"";position:absolute;border:2px solid rgba(127,181,160,.18);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;width:80px;height:80px;right:12px;top:12px}.signal:after{width:116px;height:116px;right:-6px;top:-6px}.tray-tide{background:radial-gradient(ellipse at 30% 60%,#7FB5A0 0%,#4A8B8D 40%,#1E3A5F 100%);padding:5vh 5vw}.tide-panel{position:relative;width:100%;height:90vh;border-radius:28px;overflow:hidden;box-shadow:0 22px 80px rgba(30,58,95,.28);border:1px solid rgba(255,255,255,.18)}.coastal-scene{position:absolute;inset:0;width:100%;height:100%}.waves{animation:wave 6s ease-in-out infinite}.cloud-a,.cloud-b{animation:cloud 11s ease-in-out infinite}.cloud-b{animation-delay:-4s}.sailing-vessel{animation:sail 8s ease-in-out infinite}.aero-glass{position:absolute;z-index:4;max-width:500px;border-radius:12px;padding:30px;opacity:0;transform:translateY(20px) rotate(2deg);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.glass-left{left:5%;top:12%;transform:translateX(-40px) rotate(-1deg)}.glass-right{right:5%;bottom:12%;transform:translateX(40px) rotate(1.5deg)}.aero-glass h2{font-size:clamp(1.6rem,4vw,3rem)}.afternoon-grid{width:min(1050px,100%);display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,1fr);grid-template-areas:'a a b b c c' 'a a d e e f' 'g g d e e f';gap:16px}.mini-card{grid-area:var(--area);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(228,221,210,.98));padding:22px;border:1px solid rgba(255,255,255,.45);overflow:hidden;transform:rotate(var(--r));transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .35s ease,box-shadow .35s ease}.mini-card:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.48),transparent 35%);pointer-events:none}.mini-card:hover,.postcard:hover{transform:rotate(var(--r)) translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.08),0 16px 32px rgba(0,0,0,.12),0 32px 64px rgba(46,90,120,.08)}.corner-stamp{position:absolute;right:13px;top:13px;border:1px dashed #C06B3E;color:#C06B3E;border-radius:7px;padding:5px 7px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;background:rgba(240,237,230,.65)}.mini-ill{width:100%;height:90px;margin-top:12px}.mini-card h3{font-size:clamp(1.25rem,2.2vw,1.8rem);margin-top:8px}.tray-dusk{background:linear-gradient(180deg,#E4DDD2 0%,#6B7B8D 50%,#1E3A5F 100%)}.dusk-board{width:min(980px,100%);display:grid;grid-template-columns:1.2fr .8fr;gap:42px;align-items:center}.dusk-copy,.dusk-mailbox{background:rgba(30,58,95,.24);border:1px solid rgba(228,221,210,.28);backdrop-filter:blur(16px) saturate(1.4);padding:clamp(28px,5vw,56px);color:#E4DDD2}.dusk-copy{transform:rotate(-1.1deg)}.dusk-mailbox{display:grid;place-items:center;transform:rotate(1.8deg)}.dusk-copy h2{font-size:clamp(2rem,5vw,3.6rem);line-height:1;margin-bottom:22px}.dusk-copy p{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:24px}.dusk-mailbox svg{width:min(300px,80vw)}.reveal-card{opacity:0;transform:translateY(20px) rotate(2deg)}.reveal-card.in-view{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}.aero-glass.in-view{opacity:1;transform:translateX(0) rotate(var(--r,0deg))}.draw-svg path,.draw-svg rect,.draw-svg circle,.draw-svg line{transition:stroke-dashoffset 1.8s ease}.draw-svg.drawn path,.draw-svg.drawn rect,.draw-svg.drawn circle,.draw-svg.drawn line{stroke-dashoffset:0!important}.ink-drop{animation:drip 6s ease-in-out infinite}.pulse{animation:pulse-attention 2.5s ease-in-out infinite}@media (max-width:768px){html{scroll-snap-type:none}.tray{min-height:auto;padding:42px 24px}.dawn-board,.dusk-board{grid-template-columns:1fr}.hero-card{min-height:70vh}.morning-grid{grid-template-columns:1fr;grid-template-areas:'a' 'b' 'c' 'd' 'e'}.afternoon-grid{grid-template-columns:1fr;grid-template-areas:'a' 'b' 'c' 'd' 'e' 'f' 'g';grid-auto-rows:auto}.postcard,.mini-card{width:calc(100vw - 48px);margin:0 auto}.tide-panel{height:92vh}.glass-left,.glass-right{left:18px;right:18px;max-width:none}.glass-left{top:9%}.glass-right{bottom:8%}.scroll-indicator{right:10px}}

@keyframes pulse-attention{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes wave{0%,100%{transform:translateX(-18px)}50%{transform:translateX(18px)}}
@keyframes cloud{0%,100%{transform:translateX(0)}50%{transform:translateX(34px)}}
@keyframes sail{0%,100%{transform:translateX(-20px)}50%{transform:translateX(58px)}}
@keyframes drip{0%,70%,100%{transform:translateY(0);opacity:0}15%{opacity:1}45%{transform:translateY(12px);opacity:1}}
/* Design terms intentionally present for checker parity: wavy cancellation marks exact current date with values Mono" (Google IntersectionObserver` scroll-triggered animations (fallback: visible `threshold: 0.15`. `opacity 0.7s cubic-bezier(0.16 200ms stagger. enters with slight upward `translateY` 400/500i italic: "every sending." thin vertical base invites descent. postmarks with Sunset Lora's subtle cursive energy evokes handwriting without sacrificing readability. variant used "postcard message" personal Lora" */