.notes-intro{text-align:center;max-width:42rem;margin:0 auto 4rem}
.notes-intro h2{max-width:none;margin:1.2rem 0;font-size:clamp(2.8rem,5vw,4.5rem)}
.notes-hint{font-family:Georgia,serif;font-style:italic;color:#946d54;font-size:1rem}
.love-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 4rem;max-width:900px;margin:auto;padding:1rem 2rem 3rem}
.love-note{--tilt:-3deg;position:relative;padding:2.8rem 2.3rem;align-self:start;min-height:220px;background:#fff9ed;border:1px solid #cfb59655;box-shadow:0 13px 30px #60432b13,0 2px 4px #60432b0a;transform:rotate(var(--tilt));transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .9s,box-shadow .5s}
.love-note:before{content:"";position:absolute;top:-12px;left:calc(50% - 32px);width:64px;height:25px;transform:rotate(5deg);background:#d4b68e70;border-left:1px solid #f7e4c388;border-right:1px solid #f7e4c388}
.love-note:nth-child(even){--tilt:3deg;margin-top:2rem}
.note-family,.note-snore{background:#f4ddd1}
.note-talk{background:#f5e9d4}
.note-laugh{background:#fbefdd;--tilt:-1.5deg;min-height:230px}
.love-note p{font-family:Georgia,serif;font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.6;margin:1rem 0 0;color:#674535}
.note-label{font-family:Georgia,serif;font-style:italic;font-size:.88rem;color:#a66d50}
.note-doodle{display:block;font-family:Georgia,serif;font-size:2.4rem;color:#b77c60;text-align:right;line-height:1.2;margin-top:.5rem}
.note-snore p em{color:#a4644d}
.note-snore .secret-button{font-size:.85rem;margin-top:1rem;min-height:44px}
.note-snore .secret-note{font-size:1rem;padding:1rem;margin-top:1rem}
.note-ready{opacity:0;transform:translate(25px,35px) rotate(calc(var(--tilt) + 8deg)) scale(.97)}
.note-ready.arrived{opacity:1;transform:rotate(var(--tilt))}
.love-note.is-delivered{box-shadow:0 16px 35px #7e492b20,0 0 0 1px #d1a77388}
.sleep-doodle{display:block;text-align:right;color:#b99175;font-family:Georgia,serif;font-style:italic;font-size:1.5rem;margin-top:1rem;animation:sleep-float 4s ease-in-out infinite}
.sleep-doodle span:first-child{font-size:1.1rem;position:relative;top:-.4rem;margin-left:.15rem}
.sleep-doodle span:last-child{font-size:.8rem;position:relative;top:-.8rem;margin-left:.15rem}
.evenings{transition:background-color 2s;background:radial-gradient(ellipse at 50% 65%,#81503830,transparent 70%),#271c19}
.evenings h2{font-size:clamp(2.5rem,4vw,3.9rem);max-width:19ch;margin:1rem auto 2rem}
.evening-theatre{position:relative;padding:3rem 1rem 1rem;margin:0 auto;max-width:750px;isolation:isolate}
.evening-theatre:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 50%,#c6824730,transparent 72%);opacity:.7;transition:opacity 2s}
.evening-theatre[data-step="4"]:before,.evening-theatre[data-step="5"]:before{opacity:.15}
.evening-sky{height:50px;position:relative}
.night-moon{position:absolute;width:22px;height:22px;left:50%;top:0;border-radius:50%;box-shadow:6px 2px 0 #e9c59a;transform:translateX(-50%)}
.night-star{position:absolute;color:#c99d75;font-size:.9rem;animation:night-twinkle 5s ease-in-out infinite alternate}
.star-one{left:18%;top:9px}.star-two{right:18%;top:20px;animation-delay:-2s}.star-three{right:38%;top:-20px;font-size:1.5rem}
.little-rooms{display:flex;align-items:center;justify-content:center;gap:0;margin:1rem auto 3rem;padding-bottom:2rem}
.little-home{position:relative;width:220px;height:190px;background:linear-gradient(145deg,#674638,#39261e);border:7px solid #9e745344;border-bottom:9px solid #a9805b88;border-radius:45% 45% 3px 3px;box-shadow:0 15px 50px #110b0a55,inset 0 0 30px #ebbc7830;transition:background 2s,box-shadow 2s}
.home-jordan{background:linear-gradient(145deg,#594233,#30241f)}
.home-window{position:absolute;right:14%;top:20%;width:30px;height:40px;border:3px solid #c9a47755;border-radius:15px 15px 0 0;background:linear-gradient(90deg,transparent 46%,#a9856444 46% 54%,transparent 54%),#252226;box-shadow:inset 0 -15px 20px #688aa118}
.home-lamp{position:absolute;left:15%;top:42%;width:26px;height:16px;background:#e7b27a;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);filter:drop-shadow(0 0 10px #eab770);transition:opacity 2s}
.home-lamp:after{content:"";position:absolute;width:2px;height:20px;background:#c2a078;left:12px;top:15px}
.home-tv{position:absolute;top:35%;left:36%;width:68px;height:42px;border:3px solid #251e1b;border-radius:3px;background:#625854;box-shadow:0 0 18px #dfb18412;display:grid;place-items:center;transition:background 1.5s,box-shadow 1.5s}
.tv-count{font-family:Georgia,serif;font-size:.85rem;color:#fff1d9;line-height:1}
.home-sofa{position:absolute;bottom:10%;left:13%;right:13%;height:45px;background:linear-gradient(#90634f,#603d32);border:5px solid #6b4538;border-radius:13px 13px 5px 5px;box-shadow:0 9px 13px #25181066}
.home-sofa:after{content:"";position:absolute;left:50%;height:100%;width:1px;background:#4c302650}
.home-city{position:absolute;bottom:-44px;left:0;right:0;text-align:center;font-size:.68rem;color:#d7af8d;letter-spacing:.14em;text-transform:uppercase}
.room-connection{position:relative;width:140px;height:100px;flex-shrink:1}
.room-connection svg{width:100%;height:100%;overflow:visible}
.room-connection path{fill:none;stroke:#d3a57866;stroke-width:1;stroke-dasharray:2 6}
.room-connection circle{fill:#f6ce9b;offset-path:path('M5 75 Q90 -35 175 75');animation:connection-travel 6s ease-in-out infinite;filter:drop-shadow(0 0 5px #eabb78)}
.room-connection>span{position:absolute;left:50%;top:38%;transform:translateX(-50%);font-size:1.4rem;color:#dfae85}
.evening-theatre[data-step="1"] .home-tv,.evening-theatre[data-step="2"] .home-tv,.evening-theatre[data-step="3"] .home-tv{background:#b99170;box-shadow:0 0 30px #efc19e80;animation:screen-flicker 5s ease-in-out infinite}
.home-chat{position:absolute;top:18%;left:25%;padding:8px 10px;border:1px solid #edc7a166;border-radius:12px 12px 12px 0;background:#9d6e4e88;display:flex;gap:3px;opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s}
.home-chat i{width:3px;height:3px;border-radius:50%;background:#f4d6b6;animation:chat-dot 1.8s ease-in-out infinite}.home-chat i:nth-child(2){animation-delay:.2s}.home-chat i:nth-child(3){animation-delay:.4s}
.evening-theatre[data-step="2"] .home-chat{opacity:1;transform:none}
.home-sleep{position:absolute;top:38%;right:16%;font-family:Georgia,serif;font-style:italic;color:#ebcdb0;font-size:1.4rem;opacity:0;transition:opacity 1s}
.home-sleep span:first-child{font-size:1rem;position:relative;top:-.3rem}.home-sleep span:last-child{font-size:.7rem;position:relative;top:-.6rem}
.evening-theatre[data-step="4"] .home-sleep,.evening-theatre[data-step="5"] .home-sleep{opacity:1;animation:sleep-float 4s ease-in-out infinite}
.evening-theatre[data-step="4"] .home-london .home-lamp,.evening-theatre[data-step="5"] .home-london .home-lamp{opacity:.25}
.evening-theatre[data-step="5"] .home-jordan .home-tv{background:#aa896a;box-shadow:0 0 28px #e3b88255}
.evening-caption{font-family:Georgia,serif;font-size:clamp(1.5rem,3vw,2rem);line-height:1.4;min-height:3em;max-width:25ch;margin:2rem auto 0!important;display:grid;align-items:center;color:#f0d7c0}
.evening-caption.caption-arrive{animation:caption-arrive .8s ease both}
.evening-steps{list-style:none;margin:1rem 0;padding:0}
.evening-steps button{font-family:Georgia,serif;font-size:1.2rem;color:#e5c2a3;background:none;border:0;padding:.6rem;min-height:44px}
.experience-ready .evening-steps{display:flex;justify-content:center;gap:.25rem}
.experience-ready .step-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.experience-ready .evening-steps button{display:grid;place-items:center;width:44px;height:44px}
.step-dot{display:block;width:6px;height:6px;border-radius:50%;background:#ad816160;transition:background .5s,transform .5s,box-shadow .5s}
.evening-steps button[aria-pressed="true"] .step-dot{background:#efc99f;transform:scale(1.45);box-shadow:0 0 10px #e6b78266}
.evening-replay{border:0;background:none;color:#c6a181;font-size:.75rem;min-height:44px;padding:.75rem}
.evening-replay span{margin-left:.6rem}
.evenings-close{margin:2rem auto 0;font-size:1.25rem;max-width:32rem}
body.motion-paused .note-ready{opacity:1;transform:rotate(var(--tilt))}
body.motion-paused .evening-caption{animation:none!important;opacity:1;transform:none}
@keyframes sleep-float{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(-7px);opacity:1}}
@keyframes night-twinkle{from{opacity:.35}to{opacity:.9}}
@keyframes connection-travel{0%{offset-distance:0%;opacity:0}15%,85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes screen-flicker{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.12)}}
@keyframes chat-dot{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes caption-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:600px){.notes-intro{margin-bottom:2.5rem}.notes-intro h2{font-size:2.8rem}.love-notes{grid-template-columns:1fr;gap:2rem;padding:1rem .8rem 1.5rem}.love-note{padding:2rem 1.6rem;min-height:0}.love-note:nth-child(even){margin-top:0;--tilt:2deg}.love-note:nth-child(odd){--tilt:-2deg}.love-note p{font-size:1.2rem}.note-doodle{font-size:2rem}.evenings{padding-left:1rem;padding-right:1rem}.evenings h2{font-size:2.6rem}.evening-theatre{padding:1.5rem 0 .5rem}.little-home{width:42%;height:155px;border-width:5px}.home-tv{left:35%;width:49px;height:32px}.home-window{right:12%;top:17%;width:23px;height:32px}.home-lamp{left:12%;width:19px;height:12px}.home-sofa{height:37px;left:8%;right:8%;border-width:4px}.room-connection{width:16%;height:80px}.room-connection svg{overflow:hidden}.room-connection circle{display:none}.room-connection>span{font-size:1rem}.home-chat{left:12%;padding:5px 7px;top:19%}.home-sleep{right:10%;font-size:1.2rem}.evening-caption{font-size:1.5rem;min-height:3.5em;margin-top:1.5rem!important}.evenings-close{font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){.note-ready{opacity:1;transform:rotate(var(--tilt))}.home-chat,.home-sleep,.night-star,.room-connection circle{animation:none}.room-connection circle{display:none}.evening-caption.caption-arrive{animation:none}}