@charset "UTF-8";
:root{--blue:#234eeb;--navy:#152550;--lemon:#edff98;--paper:#f8f9f2;--muted:#6b7080;--display:'Space Grotesk',sans-serif;--body:'DM Sans',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:26px}body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--body);-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button{color:inherit;border:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,figure,p,h1,h2,h3{margin:0}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}::selection{background:var(--lemon);color:var(--navy)}:focus-visible{outline:3px solid #fa805f;outline-offset:6px}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.wrap{width:min(1280px,calc(100% - 100px));margin-inline:auto}.skip-link{position:fixed;z-index:1000;top:-70px;left:15px;background:var(--lemon);padding:14px 20px;border-radius:8px}.skip-link:focus{top:15px}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:56px;border-radius:50px;font-weight:600;font-size:13px;padding:16px 25px;transition:transform .25s,box-shadow .25s,background .25s}.button:hover{transform:translateY(-3px)}.button svg{width:19px;height:19px}.yellow-button{background:var(--lemon);color:var(--navy);box-shadow:0 5px 0 #102dad66}.yellow-button:hover{background:#f3ffb9;box-shadow:0 8px 0 #102dad66}.blue-button{background:var(--blue);color:white;box-shadow:0 5px 0 #102f9e20}.dark-button{background:var(--navy);color:white;box-shadow:0 5px 0 #15255020}.text-button{display:inline-flex;align-items:center;gap:24px;font-size:13px;font-weight:600;padding:10px 0;border-bottom:1px solid currentColor;background:none}.text-button:hover svg{transform:translate(3px,-3px)}.text-button svg{width:17px;height:17px;transition:transform .2s}.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:1.5px;line-height:1.7}.light{color:#dce5ff}.section-number{color:var(--blue);margin-right:10px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--lemon);box-shadow:0 0 0 4px #edff9815;display:inline-block;flex-shrink:0}h1,h2,h3{font-family:var(--display);font-weight:600}h2{font-size:clamp(38px,4.4vw,62px);line-height:1.08;letter-spacing:-3px}.blue-type{color:var(--blue)}

/* Chapter one: a little universe in electric blue. */
.blue-world{color:#fffef3;background-color:#0d1e56;overflow:hidden;position:relative;isolation:isolate}
.hero-bg-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg-img{width:100%;height:100%;object-fit:cover;object-position:center 18%;opacity:0.50;filter:blur(18px) saturate(125%) contrast(106%);transform:scale(1.08)}
.hero-bg-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 45%,rgba(35,78,235,0.20),transparent 65%),linear-gradient(180deg,rgba(7,16,48,0.40) 0%,rgba(10,22,65,0.05) 25%,rgba(7,16,48,0.45) 75%,rgba(7,16,48,0.95) 100%),linear-gradient(90deg,rgba(7,16,48,0.88) 0%,rgba(8,18,54,0.65) 35%,rgba(10,22,65,0.15) 70%,rgba(7,16,48,0.40) 100%);pointer-events:none}
.blue-world::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 86% 58%,#607bff55,transparent 50%);z-index:1}.header{height:104px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid #ffffff30;position:relative;z-index:5}.wordmark{display:flex;gap:15px;align-items:center;font-family:var(--display);font-size:15px;line-height:1.15;letter-spacing:-.4px}.wordmark b{font-size:19px;font-weight:600}.orbit-mark{position:relative;width:32px;height:32px;border-radius:50%;background:var(--lemon);flex-shrink:0}.orbit-mark:after{content:'';position:absolute;inset:9px -9px;border:1.5px solid currentColor;border-radius:50%;transform:rotate(-35deg)}.header nav{display:flex;align-items:center;gap:33px;font-size:12px;color:#e3eaff}.header nav a{padding:12px 0}.header nav a:hover{color:var(--lemon)}.nav-light{display:inline-block;width:5px;height:5px;background:var(--lemon);border-radius:50%;vertical-align:middle;margin-left:5px}.nav-button{background:#ffffff0a;color:#fffef3;border:1px solid #ffffff65;font-size:11px;min-height:44px;padding:11px 20px;gap:22px}.nav-button:hover{background:#ffffff15}.hero{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:0;padding-top:65px}.hero-copy{position:relative;z-index:3;padding-top:8px}.hero h1{font-size:clamp(76px,8.3vw,119px);font-weight:600;line-height:.98;letter-spacing:-7px;margin-top:27px}.wonder{color:var(--lemon);position:relative;display:inline-block}.title-spark{width:62px;height:62px;stroke-width:1;position:absolute;right:-66px;top:13px;transform:rotate(12deg);fill:var(--lemon)}.hero-message{font-size:15px;line-height:1.85;color:#d8e3ff;margin-top:28px}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:31px}.hero-actions .button{font-size:12px;padding-inline:23px;gap:19px}.hero-date{font-family:var(--display);font-size:12px;letter-spacing:.5px;white-space:nowrap}.hero-date>span{display:block;font-family:var(--body);color:#cad8ff;font-size:10px;letter-spacing:.2px;margin-top:6px}.cosmos{height:580px;position:relative;isolation:isolate;margin-top:10px;perspective:1000px}.cosmos-glow{position:absolute;inset:50px -40px;background:radial-gradient(ellipse,#a1afff4d,transparent 70%);z-index:-3}.portrait-shell{width:345px;position:absolute;top:36px;left:110px;transform:rotate(7deg) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));z-index:2;transition:transform .35s ease-out}.hero-portrait{display:block;width:100%;padding:11px;background:#fffdec;border-radius:180px 180px 150px 150px;box-shadow:10px 11px 0 #172eac,19px 20px 0 #172eac55,25px 30px 50px #0b247966;overflow:hidden;position:relative}.hero-portrait img{width:100%;height:422px;object-fit:cover;object-position:50% 40%;border-radius:170px 170px 145px 145px}.portrait-label{position:absolute;bottom:40px;left:25px;right:25px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:35px;border-radius:30px;background:#fffdeee8;backdrop-filter:blur(10px);color:var(--navy);font-size:7px;font-weight:700;letter-spacing:1px}.portrait-label .status-dot{background:var(--blue);width:5px;height:5px;box-shadow:none}.orbit{position:absolute;left:28px;top:130px;width:520px;height:245px;border-radius:50%;transform:rotate(-30deg);pointer-events:none}.orbit-back{border:1px solid #bfd0ff77;z-index:0;box-shadow:0 0 0 25px #e9efff06,0 0 0 26px #bfd0ff22}.orbit-front{border:2px solid #c5d3ff;border-top-color:transparent;border-right-color:transparent;z-index:3;clip-path:inset(50% 0 0 0)}.small-star{position:absolute;color:var(--lemon);z-index:4}.star-a{font-size:53px;left:68px;top:12px}.star-b{font-size:26px;right:0;top:180px;color:#c6d5ff;transform:rotate(15deg)}.star-c{font-size:24px;left:248px;bottom:12px}.planet{position:absolute;border-radius:50%;z-index:4}.planet-peach{width:114px;height:114px;right:-4px;top:8px;background:radial-gradient(circle at 30% 23%,#fff6d9 0%,#ffc992 20%,#fd9376 52%,#d95b79 80%,#8c3f96);box-shadow:inset -9px -12px 16px #94457940,12px 20px 25px #162a9330;animation:float 7s ease-in-out infinite}.planet-peach::after{content:'';position:absolute;inset:17px;border:1px solid #ffffff30;border-radius:50%}.planet-lemon{width:133px;height:133px;right:-5px;bottom:52px;background:radial-gradient(circle at 29% 22%,#fcffe7,#edff98 26%,#c9e16a 61%,#8eaf46 85%);box-shadow:inset -7px -12px 15px #80963f66,12px 15px 25px #15255040;display:grid;place-items:center;transform:rotate(13deg);animation:float 8s ease-in-out infinite reverse}.planet-lemon span{font-family:var(--display);font-size:86px;font-weight:700;color:#fffde8;text-shadow:1px 1px #97af4f,2px 2px #97af4f,3px 3px #97af4f,5px 6px 4px #68892e70}.mini-memory{position:absolute;left:25px;bottom:29px;width:168px;transform:rotate(-12deg) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));z-index:5;transition:transform .35s ease-out}.mini-memory button{display:block;width:100%;padding:8px;background:#fffef1;border-radius:10px;box-shadow:6px 8px 0 #1936b0,9px 14px 20px #10298240}.mini-memory img{width:100%;height:174px;object-fit:cover;object-position:50% 23%;border-radius:5px}.mini-memory button>span{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--navy);font-weight:600;padding:11px 3px 3px}.mini-memory button>span>span{font-size:16px}.cosmos-coordinate{position:absolute;right:10px;top:151px;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;color:#c0d0ff}.orbit-note{position:absolute;left:265px;bottom:47px;font-family:var(--display);font-size:12px;line-height:1.4;color:#dce6ff;transform:rotate(-8deg)}.orbit-note svg{position:absolute;left:-68px;top:-2px;width:60px;height:40px}.hero-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff30;margin-top:30px;padding:25px 0 26px;font-size:9px;letter-spacing:1.1px;color:#d5dfff}.hero-bottom a{display:flex;gap:28px;align-items:center;font-size:8px}.hero-bottom a span{font-size:20px}.hero-bottom>span{display:flex;align-items:center;gap:35px;letter-spacing:0;font-size:11px}.hero-bottom svg{width:21px;height:21px;color:var(--lemon)}.ticker{overflow:hidden;background:var(--lemon);border-bottom:1px solid #dce4bc;padding:22px 0}.ticker>div{display:flex;align-items:center;gap:42px;white-space:nowrap;width:max-content;font-family:var(--display);font-size:12px;letter-spacing:1.4px;font-weight:500;animation:marquee 55s linear infinite}.ticker span{font-size:25px;line-height:1;color:var(--blue)}

/* The photo collection uses a deliberate, asymmetric editorial grid. */
.story-section{padding-block:100px 82px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:25px}.small-caption{color:var(--muted);font-size:11px}.story-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:35px}.story-heading>p{font-size:14px;color:var(--muted);line-height:1.9;padding-bottom:4px}.memory-grid{display:grid;grid-template-columns:1.02fr .9fr 1fr;grid-template-rows:230px 250px;gap:18px;margin-top:46px}.memory{border-radius:16px;overflow:hidden;padding:0;position:relative;text-align:left;background:#dadfd8;isolation:isolate}.memory img{height:100%;width:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.memory:hover img{transform:scale(1.06)}.memory-tall{grid-row:1/3}.memory-tall img{object-position:43% 40%}.memory-wide{grid-column:2/4}.memory-wide img{object-position:50% 20%}.memory-small img{object-position:50% 24%}.memory-overlay{position:absolute;inset:auto 0 0;padding:65px 24px 25px;color:white;background:linear-gradient(transparent,#071332b8);display:block}.memory-overlay>span{font-size:8px;letter-spacing:1.4px;font-weight:600}.memory-overlay strong{display:block;font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:-.7px;margin-top:7px;padding-right:25px}.memory-overlay i{position:absolute;right:20px;bottom:25px;font-style:normal;font-size:20px}.memory-quote{border-radius:16px;background:#e5ebff;padding:28px;position:relative;display:flex;flex-direction:column;justify-content:space-between;color:var(--blue)}.memory-quote>svg{position:absolute;right:24px;top:23px;width:33px;height:33px;fill:var(--blue);stroke:none}.memory-quote p{font-family:var(--display);font-size:36px;line-height:1.03;letter-spacing:-1.8px}.memory-quote em{font-family:Georgia,serif;font-weight:400}.memory-quote>span{font-size:7px;font-weight:700;letter-spacing:1.1px}.album-footer{display:flex;align-items:center;justify-content:space-between;margin-top:27px}.album-footer>span{font-size:12px;color:var(--muted)}

/* A midnight room for the reveal. The clock is kept in one visual line. */
.reveal-section{background:#111d43;color:#fffef4;padding-block:67px 66px;position:relative;overflow:hidden}.reveal-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 13% 87%,#34479070,transparent 45%);pointer-events:none}.reveal-inner{position:relative}.reveal-section .section-top{padding-bottom:30px;border-bottom:1px solid #ffffff24}.reveal-section .section-number{color:#aebcff}.secret-pill{display:flex;align-items:center;gap:8px;border:1px solid #ffffff35;border-radius:50px;padding:9px 13px;font-size:8px;letter-spacing:1px;white-space:nowrap}.secret-pill svg{width:12px;height:12px;color:var(--lemon)}.reveal-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:45px;margin-top:42px}.reveal-heading h2{font-size:clamp(34px,3.8vw,52px);letter-spacing:-2px}.reveal-heading h2>span{color:#b7c6fc}.reveal-heading p{font-size:13px;line-height:1.9;color:#aab7d4;max-width:280px}.reveal-stage{display:grid;grid-template-columns:.85fr 1.3fr;gap:90px;align-items:center;margin-top:38px}.name-orb{height:290px;position:relative;isolation:isolate}.orb-core{width:188px;height:188px;border-radius:50%;position:absolute;top:27px;left:calc(50% - 94px);background:radial-gradient(circle at 30% 20%,#c9d8ff,#6f8bf7 24%,#3853a9 59%,#172550 85%);box-shadow:inset -14px -12px 30px #07112788,20px 25px 30px #080f262b;display:grid;place-items:center}.orb-core>span{font-family:var(--display);font-size:115px;color:#d3defd;text-shadow:2px 3px #425991,4px 5px #324270;transform:rotate(12deg);font-weight:500}.orb-ring{position:absolute;left:calc(50% - 159px);top:78px;width:318px;height:94px;border:12px solid #b3c9ff;border-top-color:#526da6;border-left-color:#7794d0;border-right-color:#d3e2ff;border-radius:50%;transform:rotate(-29deg);box-shadow:0 4px 0 #3b538b,0 7px 18px #0a1638;z-index:2;clip-path:polygon(0 0,36% 0,34% 45%,69% 43%,75% 0,100% 0,100% 100%,0 100%)}.orb-spark{position:absolute;top:12px;right:15px;font-size:33px;color:var(--lemon)}.orb-caption{position:absolute;bottom:15px;left:0;width:100%;text-align:center;font-size:8px;letter-spacing:1.3px;color:#afbee6}.clock-panel{padding-top:12px}.countdown-kicker{font-size:9px;letter-spacing:1.6px;font-weight:600;display:flex;align-items:center;gap:11px;color:#d7e2ff}.countdown{display:flex;justify-content:space-between;align-items:start;margin:24px 0 27px;gap:9px}.countdown>div{min-width:0;text-align:center;flex:1}.countdown strong{font-family:var(--display);font-size:clamp(40px,5.3vw,76px);font-weight:500;line-height:1.1;letter-spacing:-4px;color:var(--lemon);font-variant-numeric:tabular-nums;font-feature-settings:'tnum';text-shadow:0 3px #71834466}.countdown div>span{display:block;font-size:8px;letter-spacing:1.5px;color:#aab7d4;margin-top:13px}.countdown>i{font-family:var(--display);font-size:39px;font-style:normal;color:#5f709b;padding-top:9px}.reveal-schedule{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff30;padding-top:20px;font-family:var(--display);font-size:16px;letter-spacing:.4px;gap:15px}.reveal-schedule small{display:block;font-family:var(--body);font-size:7px;letter-spacing:1.1px;color:#aab7d4;margin-top:5px}.reveal-schedule>span:last-child{text-align:right}.clock-note{font-size:11px;line-height:1.6;color:#aab7d4;margin-top:19px}.light-button{color:#dce7ff;font-size:11px;margin-top:13px;padding-bottom:7px}.light-button svg{width:14px;height:14px}.revealed-name{padding:20px 0 26px}.revealed-name>span{font-size:9px;color:#bac8e9;letter-spacing:1.2px;display:block}.revealed-name h3{font-size:clamp(52px,6vw,84px);color:var(--lemon);line-height:1.15;letter-spacing:-4px;margin:6px 0;overflow-wrap:anywhere}.revealed-name p{font-family:var(--display);font-size:22px;letter-spacing:-.5px;margin:4px 0 16px;overflow-wrap:anywhere}.revealed-name>span:last-child{letter-spacing:0;font-size:11px}

.day-section{padding-block:88px 105px}.day-spark{color:var(--blue);width:36px;height:36px;fill:var(--blue)}.day-layout{display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:125px;margin-top:38px}.day-copy h2{font-size:clamp(43px,5.2vw,72px)}.day-copy p{font-size:14px;line-height:1.9;max-width:340px;color:var(--muted);margin-top:25px}.day-copy .button{margin-top:29px}.ticket{background:#fff;border-radius:20px;box-shadow:5px 6px 0 #d8deeb,12px 23px 50px #10275715;transform:rotate(4deg) perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s ease-out;position:relative}.ticket-top{background:#e5ebff;border-radius:20px 20px 0 0;padding:31px 34px 26px;position:relative}.ticket-top>span:first-child{font-size:8px;letter-spacing:1.7px;font-weight:600}.ticket-top h3{font-size:58px;line-height:.95;letter-spacing:-3px;color:var(--blue);margin-top:22px}.ticket-star{position:absolute;right:28px;top:53px;font-size:64px;color:var(--blue);line-height:1}.ticket-top>p{font-size:8px;letter-spacing:1.4px;margin-top:21px;font-weight:600}.ticket-perforation{height:20px;position:relative;background:linear-gradient(#e5ebff 50%,white 50%)}.ticket-perforation>span{display:block;position:absolute;top:9px;left:16px;right:16px;border-top:1px dashed #a5b2d2}.ticket-perforation:before,.ticket-perforation:after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:var(--paper);z-index:1}.ticket-perforation:before{left:-10px}.ticket-perforation:after{right:-10px}.ticket-details{padding:20px 34px 26px}.ticket-details>div>span{display:block;font-size:8px;font-weight:600;letter-spacing:1.2px;color:#6c7994}.ticket-details strong{display:block;font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.5px;margin-top:7px}.ticket-details p{font-size:12px;color:#65738d;margin-top:5px;line-height:1.6}.ticket-details>div+div{margin-top:24px}.ticket-details a{display:inline-block;color:var(--blue);font-size:12px;margin-top:10px;text-decoration:underline;text-underline-offset:4px}.ticket-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #e0e5f1;padding-top:20px}.ticket-bottom>span{font-size:6px!important;letter-spacing:.6px!important;max-width:135px}.barcode{height:29px;width:90px;background:repeating-linear-gradient(90deg,var(--navy) 0 1px,transparent 1px 3px,var(--navy) 3px 5px,transparent 5px 7px,var(--navy) 7px 8px,transparent 8px 12px);opacity:.6}

.closing{background:var(--lemon);padding:78px 0 67px;text-align:center;position:relative;isolation:isolate;overflow:hidden}.closing .eyebrow{justify-content:center;color:#506236;font-size:9px}.closing h2{font-size:clamp(65px,8.5vw,118px);line-height:1;letter-spacing:-6px;margin-top:26px;position:relative;display:inline-block}.closing h2>span{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--blue)}.closing h2 svg{position:absolute;right:-67px;top:13px;width:50px;height:50px;color:var(--blue);fill:var(--blue)}.closing-content>p:not(.eyebrow){font-size:14px;line-height:1.9;margin-top:24px;color:#586640}.closing .button{margin-top:25px}.signature{display:block;font-size:12px;margin-top:27px;color:#5c6b44}.closing-orbit{position:absolute;left:-15%;width:130%;height:250px;top:150px;border:1px solid #71813933;border-radius:50%;transform:rotate(-16deg);z-index:-1;box-shadow:0 0 0 40px #8198490a,0 0 0 41px #71813922}.footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:37px}.footer .orbit-mark{background:var(--blue);width:26px;height:26px}.footer .wordmark{font-size:11px}.footer .wordmark b{font-size:15px}.footer p{font-size:8px;letter-spacing:1px;color:#69758a}.footer p>span{margin-inline:17px;color:var(--blue)}.back-top{font-size:11px}

/* Native dialogs retain keyboard focus and support escape-to-close. */
dialog{padding:0;border:0;background:var(--paper);color:var(--navy);border-radius:18px;max-height:calc(100dvh - 36px)}dialog::backdrop{background:#071231d9;backdrop-filter:blur(12px)}.album-dialog{width:min(960px,calc(100% - 36px));padding:18px 22px}.dialog-top,.album-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-top>span{font-size:9px;letter-spacing:1.2px;font-weight:600}.icon-button{width:42px;height:42px;display:grid;place-items:center;background:#e5ebff;border-radius:50%;font-size:22px;flex-shrink:0}.icon-button:hover{background:#d6e0ff}.icon-button svg{width:20px;height:20px}.album-stage{position:relative;display:flex;align-items:center;justify-content:center;margin:14px 0;min-height:150px}.album-stage img{height:min(65dvh,680px);max-width:calc(100% - 108px);width:auto;object-fit:contain;border-radius:8px}.previous{position:absolute;left:0}.next{position:absolute;right:0}.album-bottom{padding:4px 3px 6px}.album-bottom p{font-family:var(--display);font-size:18px}.album-bottom>span{font-size:11px;color:var(--muted)}.share-dialog{width:min(440px,calc(100% - 32px));padding:38px}.close-share{position:absolute;top:12px;right:12px;width:34px;height:34px}.share-dialog>.eyebrow{font-size:8px;max-width:240px}.share-dialog h2{font-size:49px;margin-top:20px}.share-dialog p{font-size:13px;line-height:1.7;color:var(--muted);margin:20px 0}.share-dialog label{font-size:8px;letter-spacing:1px;font-weight:700}.share-field{display:flex;margin-top:8px;border:1px solid #cbd3e5;padding:6px;border-radius:10px}.share-field input{min-width:0;flex:1;background:none;border:0;padding-left:5px;color:var(--muted);font-size:11px}.share-field button{padding:9px 14px;background:#e5ebff;border-radius:7px;font-size:11px}.share-dialog>.button{width:100%;margin-top:15px;min-height:45px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);z-index:100;max-width:min(460px,calc(100% - 32px));width:max-content;border-radius:12px;background:var(--navy);color:white;box-shadow:0 5px 25px #0003;font-size:12px;line-height:1.6;padding:15px 22px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}.toast.visible{opacity:1;transform:translate(-50%,0)}.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}.confetti>span{position:absolute;width:9px;height:15px;top:-30px;animation:confetti 4s ease-in both}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -13px}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes confetti{to{transform:translate(var(--drift),110vh) rotate(var(--spin))}}

@media(min-width:1450px){.hero{padding-top:76px}.cosmos{height:630px}.portrait-shell{width:375px;left:120px}.hero-portrait img{height:455px}.orbit{width:565px}.mini-memory{bottom:40px}.planet-lemon{bottom:76px}.hero h1{font-size:124px}}
@media(max-width:1150px){.wrap{width:calc(100% - 72px)}.hero{grid-template-columns:1fr 1fr;padding-top:50px}.hero h1{font-size:95px;letter-spacing:-6px}.title-spark{width:43px;height:43px;right:-48px;top:10px}.hero-actions{gap:17px;flex-wrap:wrap}.hero-actions .button{font-size:11px;padding-inline:19px}.cosmos{height:550px}.portrait-shell{width:295px;left:65px;top:55px}.hero-portrait img{height:374px}.planet-peach{width:92px;height:92px;right:-4px;top:20px}.planet-lemon{width:112px;height:112px;right:-8px;bottom:54px}.planet-lemon span{font-size:73px}.orbit{left:0;top:151px;width:425px;height:210px}.mini-memory{width:144px;left:0;bottom:28px}.mini-memory img{height:154px}.star-a{left:18px;top:30px}.orbit-note{left:210px;bottom:36px;font-size:10px}.cosmos-coordinate{right:-16px}.portrait-label{left:20px;right:20px;font-size:6px}.reveal-stage{gap:45px;grid-template-columns:.75fr 1.2fr}.memory-grid{grid-template-rows:210px 240px}.memory-quote{padding:25px}.memory-quote p{font-size:32px}.memory-overlay{padding-inline:20px}.memory-overlay strong{font-size:20px}.day-layout{gap:70px}.ticket-top h3{font-size:52px}.footer p{font-size:7px;letter-spacing:.4px}}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}.header{height:88px;gap:20px}.header nav{gap:18px;font-size:10px}.wordmark{font-size:12px;gap:11px}.wordmark b{font-size:16px}.orbit-mark{width:27px;height:27px}.nav-button{font-size:10px;padding:10px 15px;gap:12px;min-height:40px}.hero h1{font-size:78px;letter-spacing:-5px}.hero-copy>.eyebrow{font-size:8px;letter-spacing:1px}.hero-message{font-size:13px;margin-top:24px}.hero-actions{margin-top:24px}.hero-date{font-size:10px}.hero-date>span{font-size:8px}.hero-actions .button{font-size:10px;min-height:49px;padding:13px 17px}.cosmos{height:470px}.portrait-shell{width:246px;left:53px;top:46px}.hero-portrait{padding:8px}.hero-portrait img{height:324px}.portrait-label{font-size:5px;left:16px;right:16px;bottom:32px;min-height:29px;gap:5px}.orbit{width:344px;height:165px;left:5px;top:148px}.planet-peach{width:73px;height:73px;top:16px;right:0}.planet-lemon{width:92px;height:92px;right:0;bottom:24px}.planet-lemon span{font-size:62px}.star-a{font-size:37px;left:13px;top:25px}.star-b{top:148px;right:-6px}.star-c{left:175px;bottom:10px;font-size:18px}.mini-memory{width:121px;bottom:30px;left:0}.mini-memory img{height:131px}.mini-memory button>span{font-size:8px}.orbit-note{left:166px;bottom:31px;font-size:8px}.orbit-note svg{left:-43px;width:39px}.cosmos-coordinate{font-size:6px;right:-9px;top:161px}.hero-bottom{margin-top:30px}.hero-bottom>span{font-size:9px;gap:12px}.hero-bottom a{font-size:6px;gap:15px}.hero{padding-top:45px}.story-section{padding-block:70px 60px}h2{letter-spacing:-2px}.story-heading{gap:25px}.story-heading>p{font-size:12px}.memory-grid{gap:13px;grid-template-rows:180px 210px}.memory-overlay{padding:55px 16px 18px}.memory-overlay strong{font-size:17px}.memory-overlay>span{font-size:6px;letter-spacing:.9px}.memory-overlay i{right:12px;bottom:18px;font-size:15px}.memory-quote{padding:22px}.memory-quote p{font-size:29px}.memory-quote>svg{width:22px;height:22px;right:16px}.memory-quote>span{font-size:5px;letter-spacing:.7px}.reveal-stage{gap:20px;grid-template-columns:.8fr 1.2fr}.orb-core{width:153px;height:153px;left:calc(50% - 76px);top:47px}.orb-core>span{font-size:90px}.orb-ring{width:257px;height:82px;left:calc(50% - 128px);top:87px;border-width:10px}.orb-spark{right:5px;top:24px;font-size:24px}.orb-caption{font-size:6px}.reveal-heading{gap:25px}.reveal-heading p{font-size:11px}.reveal-heading h2{font-size:35px}.countdown strong{font-size:48px;letter-spacing:-3px}.countdown>i{font-size:25px;padding-top:6px}.countdown div>span{font-size:6px;letter-spacing:1px}.reveal-schedule{font-size:13px}.reveal-schedule small{font-size:6px}.clock-note{font-size:10px}.reveal-section{padding-block:50px}.day-layout{gap:45px}.day-copy h2{font-size:45px}.day-copy p{font-size:13px}.ticket-top{padding:25px}.ticket-details{padding:18px 25px 24px}.ticket-top h3{font-size:47px}.ticket-star{font-size:48px;right:22px}.ticket-details strong{font-size:17px}.ticket-details p{font-size:11px}.ticket-bottom>span{font-size:5px!important}.barcode{width:66px;height:24px}.day-section{padding-block:65px 78px}.footer{flex-wrap:wrap}.footer p{max-width:235px;text-align:center;line-height:1.8}.footer p>span{margin-inline:7px}.closing h2{font-size:80px;letter-spacing:-4px}.closing{padding-block:65px}.closing h2 svg{width:34px;height:34px;right:-44px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.header{height:78px}.header nav{display:none}.header .wordmark{font-size:11px}.header .wordmark b{font-size:15px}.header .orbit-mark{width:24px;height:24px}.nav-button{font-size:9px;padding:10px 14px;min-height:37px}.nav-button svg{width:15px;height:15px}.hero{display:flex;flex-direction:column;padding-top:34px}.hero-copy{text-align:center;padding-top:0}.hero-copy>.eyebrow{justify-content:center;font-size:7px;letter-spacing:1.1px;gap:8px}.hero h1{font-size:clamp(65px,13.9vw,96px);line-height:.98;letter-spacing:-4px;margin-top:24px}.hero h1>br:nth-of-type(2){display:none}.wonder{display:inline-block}.title-spark{width:32px;height:32px;right:-34px;top:8px}.hero-message{font-size:13px;margin-top:22px;line-height:1.8}.hero-actions{justify-content:center;gap:17px;margin-top:24px}.hero-actions .button{font-size:10px;gap:15px;min-height:47px;padding:13px 18px}.hero-date{font-size:9px;text-align:left;letter-spacing:.2px}.hero-date>span{font-size:7px}.cosmos{width:355px;max-width:100%;height:451px;margin:29px auto 0;flex-shrink:0}.portrait-shell{width:247px;left:53px;top:37px}.hero-portrait img{height:315px}.orbit{width:345px;max-width:108%;top:130px;left:0}.planet-peach{right:0;top:7px;width:75px;height:75px}.planet-lemon{right:-1px;bottom:28px;width:90px;height:90px}.mini-memory{width:123px;left:1px;bottom:28px}.mini-memory img{height:124px}.mini-memory button>span{font-size:8px;padding-top:9px}.orbit-note{left:179px;bottom:29px;font-size:9px}.orbit-note svg{left:-43px}.star-a{top:10px;left:12px;font-size:38px}.star-b{right:0;top:147px}.star-c{left:174px;bottom:1px}.cosmos-coordinate{right:-3px;top:159px}.hero-bottom{width:100%;margin-top:21px;padding-block:19px;border-top-color:#ffffff30;justify-content:center}.hero-bottom>a{font-size:7px;letter-spacing:1.1px}.hero-bottom>span{display:none}.ticker{padding-block:15px}.ticker>div{font-size:10px;gap:28px}.ticker span{font-size:21px}.story-section{padding-block:54px 48px}.eyebrow{font-size:8px;letter-spacing:1.1px;gap:6px}.section-number{margin-right:5px}.small-caption{display:none}.story-heading{display:block;margin-top:25px}.story-heading h2{font-size:43px;letter-spacing:-2.5px}.story-heading>p{font-size:13px;line-height:1.8;margin-top:22px;max-width:340px}.desktop-only{display:none}.memory-grid{grid-template-columns:1fr 1fr;grid-template-rows:270px 205px 220px;gap:12px;margin-top:28px}.memory-tall{grid-row:1;grid-column:1/3}.memory-tall img{object-position:50% 39%}.memory-wide{grid-row:3;grid-column:1/3}.memory-wide img{object-position:50% 20%}.memory-quote{grid-column:1;grid-row:2;padding:20px}.memory-small{grid-row:2;grid-column:2}.memory-quote p{font-size:30px;letter-spacing:-1.5px}.memory-quote>svg{width:21px;right:15px;top:18px}.memory-quote>span{font-size:5px;letter-spacing:.8px;line-height:1.6;max-width:120px}.memory-overlay strong{font-size:21px;letter-spacing:-.6px}.memory-overlay>span{font-size:7px}.memory-small .memory-overlay{padding:50px 13px 15px}.memory-small .memory-overlay strong{font-size:16px;padding-right:12px}.memory-small .memory-overlay>span{font-size:5px;letter-spacing:.7px}.memory-small .memory-overlay i{font-size:15px;right:12px;bottom:18px}.memory-small img{object-position:50% 25%}.memory{border-radius:12px}.memory-quote{border-radius:12px}.album-footer{align-items:flex-start;gap:15px;margin-top:21px}.album-footer>span{font-size:10px;max-width:135px;line-height:1.7}.album-footer .text-button{font-size:10px;gap:9px;padding:4px 0 7px}.reveal-section{padding-block:43px}.secret-pill{display:none}.reveal-section .section-top{padding-bottom:24px}.reveal-heading{display:block;margin-top:29px}.reveal-heading h2{font-size:35px;letter-spacing:-1.8px}.reveal-heading p{font-size:12px;margin-top:21px;line-height:1.8;max-width:none}.reveal-stage{display:flex;flex-direction:column;gap:0;margin-top:5px}.name-orb{width:100%;height:244px;max-width:320px;margin:auto}.orb-core{width:152px;height:152px;left:calc(50% - 76px);top:41px}.orb-ring{top:87px;width:260px;left:calc(50% - 130px);height:83px}.orb-caption{bottom:9px;font-size:7px}.orb-spark{right:15px;top:35px}.clock-panel{width:100%;margin-top:29px;padding:0}.countdown-kicker{font-size:8px}.countdown{margin:22px 0 27px;gap:5px}.countdown strong{font-size:clamp(39px,12vw,60px);letter-spacing:-2.5px}.countdown>i{font-size:29px;padding-top:5px}.countdown div>span{font-size:7px;letter-spacing:1.2px;margin-top:12px}.reveal-schedule{font-size:15px;padding-top:19px}.reveal-schedule small{font-size:6px;letter-spacing:.9px}.clock-note{font-size:10px;margin-top:18px}.light-button{font-size:11px;margin-top:11px}.revealed-name{text-align:center;padding-block:27px}.revealed-name h3{font-size:66px}.revealed-name p{font-size:21px}.day-section{padding-block:47px 65px}.day-spark{width:25px;height:25px}.day-layout{display:flex;flex-direction:column;gap:45px;margin-top:26px}.day-copy{width:100%}.day-copy h2{font-size:49px;letter-spacing:-2.5px}.day-copy p{font-size:13px;margin-top:22px}.day-copy .button{font-size:12px;margin-top:25px;min-height:50px}.ticket{width:calc(100% - 20px);max-width:360px;transform:rotate(3deg);align-self:center}.ticket-top{padding:27px 29px 25px}.ticket-top h3{font-size:54px}.ticket-top>p{font-size:7px}.ticket-star{font-size:55px;right:28px}.ticket-details{padding:17px 29px 25px}.ticket-details strong{font-size:18px}.ticket-details p{font-size:12px}.ticket-bottom>span{font-size:6px!important}.barcode{width:79px}.closing{padding-block:51px 47px}.closing .eyebrow{font-size:7px;letter-spacing:.9px}.closing h2{font-size:68px;letter-spacing:-3.5px;margin-top:25px}.closing h2 svg{width:27px;height:27px;right:-31px;top:10px}.closing-content>p:not(.eyebrow){font-size:13px;margin-top:24px}.closing .button{font-size:12px;min-height:51px;margin-top:24px}.signature{font-size:11px}.closing-orbit{width:170%;left:-35%;top:100px;height:200px}.footer{padding-block:27px;gap:22px}.footer .wordmark{gap:11px}.footer .orbit-mark{width:22px;height:22px}.footer .back-top{margin-left:auto;font-size:10px}.footer>p{order:3;max-width:none;width:100%;text-align:center;border-top:1px solid #d9dece;padding-top:19px;font-size:6px;letter-spacing:.7px}.album-dialog{width:calc(100% - 22px);padding:12px}.dialog-top>span{font-size:7px}.album-stage img{max-width:100%;height:min(65dvh,580px)}.album-stage>.icon-button{width:35px;height:35px;background:#f9fbf1e8;color:var(--navy);z-index:2}.previous{left:6px}.next{right:6px}.album-bottom p{font-size:14px;max-width:75%}.album-bottom>span{font-size:10px}.share-dialog{padding:33px 25px}.share-dialog h2{font-size:45px}.share-dialog p{font-size:12px}.toast{bottom:16px;font-size:11px}}
@media(max-width:370px){.wrap{width:calc(100% - 32px)}.hero h1{font-size:64px;letter-spacing:-4px}.title-spark{width:25px;height:25px;right:-26px}.hero-copy>.eyebrow{font-size:6px;letter-spacing:.8px}.hero-actions{gap:12px}.hero-actions .button{padding-inline:14px;font-size:9px;gap:9px}.hero-date{font-size:8px}.cosmos{height:413px}.portrait-shell{width:219px;left:45px}.hero-portrait img{height:284px}.portrait-label{font-size:4px}.orbit{width:300px;top:118px;height:155px}.mini-memory{width:111px;bottom:23px}.mini-memory img{height:113px}.planet-peach{width:65px;height:65px}.planet-lemon{width:79px;height:79px;bottom:25px}.planet-lemon span{font-size:53px}.orbit-note{left:159px;font-size:8px;bottom:26px}.star-c{left:149px}.story-heading h2{font-size:38px}.reveal-heading h2{font-size:31px}.memory-quote{padding:16px}.memory-quote p{font-size:28px}.memory-quote>svg{width:17px;right:10px}.day-copy h2{font-size:44px}.closing h2{font-size:59px}.closing h2 svg{right:-26px;width:23px}.countdown strong{font-size:40px}.countdown>i{font-size:24px}.memory-small .memory-overlay strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.ticker>div{transform:none}.confetti{display:none}}

.memory-quote>svg{top:auto;bottom:39px}

/* Birthday greeting and the live reveal share the opening screen. */
.hero{padding-top:32px;align-items:center}
.hero-copy{padding-top:0;padding-bottom:4px}
.hero h1{font-size:clamp(66px,6.7vw,94px);letter-spacing:-5px;line-height:1.02;margin-top:18px;text-shadow:0 4px 24px rgba(6,14,40,0.85),0 1px 4px rgba(6,14,40,0.9)}
.hero .title-spark{width:39px;height:39px;right:-43px;top:12px}
.hero-message{font-size:13px;line-height:1.7;margin-top:17px;color:#e1ebff;text-shadow:0 2px 10px rgba(6,14,40,0.85)}
.hero-reveal{margin-top:23px;padding:21px 24px 18px;border:1px solid #ffffff40;border-radius:20px;background:linear-gradient(135deg,rgba(14,30,88,0.82),rgba(11,23,67,0.76));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 16px 40px rgba(7,16,48,0.45);max-width:480px;scroll-margin-top:24px}
.hero-reveal h2{font-size:16px;letter-spacing:-.4px;line-height:1.4;color:#fffef3}
.hero-reveal .countdown-kicker{font-size:8px;letter-spacing:1.3px;margin-top:13px}
.hero-reveal .countdown{margin:12px 0 18px;gap:7px}
.hero-reveal .countdown strong{font-size:clamp(39px,4vw,58px);letter-spacing:-2px}
.hero-reveal .countdown>i{font-size:28px;padding-top:4px}
.hero-reveal .countdown div>span{font-size:7px;margin-top:6px;color:#d4dfff}
.hero-reveal .reveal-schedule{font-size:13px;padding-top:13px}
.hero-reveal .reveal-schedule small{font-size:6px;color:#d4dfff}
.hero-reveal .clock-note{font-size:9px;color:#d4dfff;margin-top:12px}
.hero-reveal .revealed-name{padding:12px 0 18px}
.hero-reveal .revealed-name h3{font-size:57px;letter-spacing:-2px;margin-block:3px}
.hero-reveal .revealed-name p{font-size:20px;margin:3px 0 10px}
.hero-reveal .revealed-name>span{color:#d4dfff;font-size:8px}
.hero .cosmos{margin-top:0}
.hero-bottom{margin-top:24px;padding-block:18px}
@media(min-width:1450px){.hero{padding-top:35px}.hero h1{font-size:94px}.hero .cosmos{height:570px}.hero .portrait-shell{width:345px}.hero .hero-portrait img{height:422px}}
@media(min-width:701px) and (max-width:1000px){.hero h1{font-size:65px;letter-spacing:-4px}.hero .title-spark{width:29px;height:29px;right:-30px}.hero-reveal{padding:18px 17px}.hero-reveal h2{font-size:14px}.hero-reveal .countdown strong{font-size:40px}.hero .cosmos{height:500px}.hero-reveal .clock-note{font-size:8px}}
@media(max-width:700px){
 .hero-bg-img{object-position:center 12%;opacity:0.46;filter:blur(15px) saturate(125%) contrast(106%);transform:scale(1.08)}
 .hero-bg-vignette{background:linear-gradient(180deg,rgba(7,16,48,0.52) 0%,rgba(8,18,54,0.35) 25%,rgba(7,16,48,0.62) 65%,rgba(7,16,48,0.95) 100%),radial-gradient(circle at 50% 30%,rgba(35,78,235,0.20),transparent 60%)}
 .hero{padding-top:24px}
 .hero h1{font-size:54px;letter-spacing:-3px;margin-top:13px}
 .hero .title-spark{width:25px;height:25px;right:-29px;top:9px}
 .hero-message{font-size:11px;line-height:1.6;margin-top:13px}
 .hero-reveal{text-align:left;margin:18px auto 0;padding:16px 20px 14px;width:100%;max-width:400px;border-radius:16px}
 .hero-reveal h2{font-size:14px}
 .hero-reveal .countdown-kicker{font-size:7px;margin-top:10px}
 .hero-reveal .countdown{margin:10px 0 14px}
 .hero-reveal .countdown strong{font-size:43px}
 .hero-reveal .countdown div>span{font-size:6px;letter-spacing:1px;margin-top:5px}
 .hero-reveal .countdown>i{font-size:26px;padding-top:4px}
 .hero-reveal .reveal-schedule{font-size:12px;padding-top:10px}
 .hero-reveal .clock-note{font-size:8px;margin-top:10px}
 .hero-reveal .revealed-name{padding-block:13px}
 .hero-reveal .revealed-name h3{font-size:49px}
 .hero-reveal .revealed-name p{font-size:18px}
 .hero .cosmos{margin-top:24px;height:315px;width:300px}
 .hero .portrait-shell{width:180px;left:66px;top:16px}
 .hero .hero-portrait img{height:225px}
 .hero .portrait-label{font-size:4px;bottom:24px;left:12px;right:12px;min-height:23px;letter-spacing:.5px}
 .hero .orbit{width:295px;height:136px;top:91px;left:0}
 .hero .planet-peach{width:59px;height:59px;right:8px;top:3px}
 .hero .planet-lemon{width:70px;height:70px;right:9px;bottom:19px}
 .hero .planet-lemon span{font-size:45px}
 .hero .mini-memory{width:94px;left:20px;bottom:19px}
 .hero .mini-memory img{height:91px}
 .hero .mini-memory button{padding:6px}
 .hero .mini-memory button>span{font-size:6px;padding:6px 0 0}
 .hero .star-a{font-size:28px;left:24px;top:4px}
 .hero .star-b{top:120px;right:5px}
 .hero .star-c{left:145px;bottom:3px;font-size:15px}
 .hero .orbit-note{left:153px;bottom:18px;font-size:7px}
 .hero .cosmos-coordinate{font-size:5px;right:3px;top:139px}
 .hero-bottom{margin-top:19px;padding-block:14px}
}
@media(max-width:370px){.hero h1{font-size:47px}.hero-reveal{padding-inline:15px}.hero-reveal .countdown strong{font-size:37px}.hero-reveal h2{font-size:13px}.hero .cosmos{width:280px}.hero .portrait-shell{left:55px}.hero .orbit{width:275px}.hero .planet-lemon{right:0}}

/* Three more little memories orbit the main portrait. */
.hero-reveal .revealed-name .official-main-name{font-family:var(--display);font-size:clamp(36px,4.2vw,52px);font-weight:700;line-height:1.06;letter-spacing:-1.5px;color:var(--lemon);margin:8px 0 14px;text-wrap:balance;text-shadow:0 3px 16px #12277745}
.hero-reveal .revealed-name .nickname-label{font-size:8px;letter-spacing:1.6px;color:#cbd8ff;font-weight:600}
.hero-reveal .revealed-name .nickname-line{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:6px;margin:4px 0 14px}
.nickname-line #nickname{font-family:'Fredoka',sans-serif;font-size:38px;line-height:1.2;font-weight:700;letter-spacing:-.5px;color:#fffef3;text-shadow:0 2px 10px #12277740}
.nickname-line #nickname-meaning{font-family:var(--body);font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.4px;color:#dce6ff;background:#ffffff20;padding:3px 12px;border-radius:20px;border:1px solid #ffffff30;display:inline-flex;align-items:center}
.preview-toggle-btn{display:inline-flex;align-items:center;gap:7px;background:#ffffff18;border:1px solid #ffffff40;color:#fffef3;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.8px;padding:8px 16px;border-radius:24px;margin-top:16px;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(6px)}
.preview-toggle-btn:hover{background:var(--lemon);color:var(--navy);border-color:var(--lemon);transform:translateY(-2px);box-shadow:0 4px 14px #0f277740}
@media(max-width:700px){.hero-reveal .revealed-name .official-main-name{font-size:38px;letter-spacing:-1px;margin-bottom:12px}.hero-reveal .revealed-name .nickname-line{justify-content:center}.nickname-line #nickname{font-size:34px}.nickname-line #nickname-meaning{font-size:11px}.preview-toggle-btn{font-size:10px;padding:7px 13px}}
.satellite-photo{position:absolute;z-index:5;padding:6px 6px 0;background:#fffef1;border-radius:14px;box-shadow:5px 7px 0 #1936b0,10px 14px 25px #10298250;transition:translate .25s,box-shadow .25s}
.satellite-photo:hover{translate:0 -6px;box-shadow:5px 10px 0 #1936b0,10px 19px 28px #10298255}
.satellite-photo img{width:100%;height:112px;object-fit:cover;border-radius:9px}
.satellite-photo>span{display:block;font-size:8px;font-weight:600;padding:8px 1px;color:var(--navy);white-space:nowrap}
.satellite-curious{width:119px;left:-8px;top:103px;transform:rotate(-13deg)}
.satellite-curious img{object-position:50% 20%}
.satellite-cuddles{width:131px;right:-23px;top:206px;transform:rotate(12deg)}
.satellite-cuddles img{height:101px;object-position:center}
.satellite-adventure{width:113px;left:48%;bottom:6px;transform:rotate(9deg)}
.satellite-adventure img{height:99px;object-position:50% 32%}
.hero .orbit-note,.hero .star-c{display:none}
@media(max-width:1150px) and (min-width:701px){
 .satellite-curious{width:96px;left:-9px;top:101px}
 .satellite-photo img{height:88px}
 .satellite-cuddles{width:106px;right:-14px;top:219px}
 .satellite-cuddles img{height:82px}
 .satellite-adventure{width:98px;left:46%;bottom:1px}
 .satellite-adventure img{height:86px}
 .satellite-photo>span{font-size:6px;padding-block:7px}
}
@media(max-width:900px) and (min-width:701px){
 .satellite-curious{width:80px;left:-5px;top:97px}
 .satellite-curious img{height:77px}
 .satellite-cuddles{width:88px;right:-8px;top:218px}
 .satellite-cuddles img{height:74px}
 .satellite-adventure{width:88px;left:42%;bottom:0}
 .satellite-adventure img{height:78px}
 .satellite-photo>span{font-size:5px}
}
@media(max-width:700px){
 .satellite-photo{padding:4px 4px 0;border-radius:9px;box-shadow:3px 4px 0 #1936b0,5px 8px 16px #10298240}
 .satellite-photo img{border-radius:6px}
 .satellite-photo>span{font-size:5px;padding:5px 0}
 .satellite-curious{width:70px;left:0;top:77px;transform:rotate(-12deg)}
 .satellite-curious img{height:65px}
 .satellite-cuddles{width:77px;right:-1px;top:129px;transform:rotate(11deg)}
 .satellite-cuddles img{height:64px}
 .satellite-adventure{width:73px;left:43%;bottom:-3px;transform:rotate(7deg)}
 .satellite-adventure img{height:61px}
 .hero .mini-memory{left:6px;bottom:15px}
 .hero .planet-lemon{right:0;bottom:13px}
 .hero .cosmos-coordinate{display:none}
}

/* A prominent invitation, readable on desktop and phones. */
.hero-copy > .hero-invitation { display: block; color: #fffef3; }
.hero-invitation strong { display: block; font-family: var(--display); font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -1px; }
.hero-invitation > span { display: block; margin-top: 7px; font-size: 14px; font-weight: 500; line-height: 1.5; color: #e0e8ff; }
@media (max-width: 700px) {
  .hero-invitation strong { font-size: 30px; letter-spacing: -.7px; }
  .hero-invitation > span { font-size: 12px; margin-top: 5px; }
}

/* Sound toggle floating button */
.sound-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #ffffff40;
  background: #152550e6;
  color: #edff98;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 20px #0b1a3d55, 0 0 0 0 #edff9840;
  transition: transform .25s, box-shadow .25s, background .25s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sound-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px #0b1a3d66, 0 0 0 6px #edff9815;
}
.sound-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sound-toggle .sound-wave-1,
.sound-toggle .sound-wave-2 {
  opacity: 1;
  transition: opacity .3s;
}
.sound-toggle .sound-wave-1 {
  animation: soundPulse 1.6s ease-in-out infinite;
}
.sound-toggle .sound-wave-2 {
  animation: soundPulse 1.6s ease-in-out infinite .3s;
}
.sound-toggle.muted {
  background: #2a3555e6;
  color: #6b7a9c;
  border-color: #ffffff20;
}
.sound-toggle.muted .sound-wave-1,
.sound-toggle.muted .sound-wave-2 {
  opacity: 0;
  animation: none;
}
.sound-toggle.muted::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2px;
  background: #6b7a9c;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
}
@keyframes soundPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}
@media (max-width: 700px) {
  .sound-toggle { width: 42px; height: 42px; bottom: 18px; right: 18px; }
  .sound-toggle svg { width: 17px; height: 17px; }
}

/* Clock panel action buttons and sound pill */
.clock-button-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.clock-button-row .preview-toggle-btn {
  margin-top: 0;
}
.clock-sound-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff18;
  border: 1px solid #ffffff40;
  color: #fffef3;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  padding: 8px 16px;
  border-radius: 24px;
  cursor: pointer;
  transition: all .2s ease;
  backdrop-filter: blur(6px);
}
.clock-sound-btn:hover {
  background: var(--lemon);
  color: var(--navy);
  border-color: var(--lemon);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px #0f277740;
}
.clock-sound-btn.active {
  background: #edff9826;
  border-color: #edff98aa;
  color: var(--lemon);
}
.clock-sound-btn.muted {
  opacity: 0.6;
  background: #ffffff0d;
  border-color: #ffffff20;
}
.clock-sound-btn .sound-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lemon);
  display: inline-block;
  animation: soundPulse 1s ease-in-out infinite;
}
@media (max-width: 700px) {
  .clock-button-row { gap: 8px; justify-content: center; }
  .clock-sound-btn { font-size: 10px; padding: 7px 13px; }
}

/* Animated Photo Stream Carousel & Satellites from assets2 */
.stream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 52px;
  margin-bottom: 20px;
}
.animated-photo-stream {
  width: 100%;
  overflow: hidden;
  padding: 16px 0 28px;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.photo-stream-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: streamMarquee 40s linear infinite;
  will-change: transform;
}
.animated-photo-stream:hover .photo-stream-track {
  animation-play-state: paused;
}
.stream-card {
  width: 190px;
  height: 255px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #fffef1;
  padding: 0;
  border: 3px solid #ffffff;
  box-shadow: 0 10px 26px #15255018, 0 3px 8px #1525500d;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.stream-card:nth-child(even) {
  animation: cardBob 5s ease-in-out infinite alternate;
}
.stream-card:nth-child(odd) {
  animation: cardBob 5s ease-in-out infinite alternate-reverse 0.5s;
}
.stream-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stream-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: #152550cc;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fffef3;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 6px 10px;
  border-radius: 20px;
  text-align: center;
  transition: background 0.25s, transform 0.25s;
}
.stream-card:hover {
  transform: translateY(-9px) scale(1.04) rotate(1deg);
  box-shadow: 0 18px 40px #234eeb35, 0 6px 14px #234eeb20;
  z-index: 5;
}
.stream-card:hover img {
  transform: scale(1.08);
}
.stream-card:hover .stream-badge {
  background: var(--blue);
  color: #ffffff;
  transform: translateY(-2px);
}
@keyframes streamMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes cardBob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-10px) rotate(calc(var(--rot, 0deg) + 3deg)); }
}
.satellite-angel {
  --rot: -8deg;
  width: 115px;
  right: 68px;
  top: 10px;
  animation: floatSlow 6.5s ease-in-out infinite;
}
.satellite-angel img {
  height: 105px;
  object-position: center;
}
.satellite-giggle {
  --rot: 9deg;
  width: 105px;
  left: 8px;
  top: 240px;
  animation: floatSlow 7.5s ease-in-out infinite reverse;
}
.satellite-giggle img {
  height: 98px;
  object-position: center 25%;
}
@media (max-width: 700px) {
  .stream-card { width: 140px; height: 190px; border-radius: 14px; }
  .stream-badge { font-size: 9px; padding: 4px 8px; bottom: 8px; left: 8px; right: 8px; }
  .satellite-angel { width: 75px; right: 2px; top: 18px; }
  .satellite-angel img { height: 68px; }
  .satellite-giggle { width: 70px; left: 4px; top: 160px; }
  .satellite-giggle img { height: 64px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPATIAL UI PHOTO VIEWER (visionOS / Apple Vision Pro Floating Glass)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes spatialEnter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92) translateZ(-60px);
    filter: blur(14px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateZ(0);
    filter: blur(0);
  }
}

@keyframes spatialPop {
  0% {
    opacity: 0;
    transform: scale(0.94);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

dialog.album-dialog.spatial-viewer:not([open]) {
  display: none !important;
}

dialog.album-dialog.spatial-viewer[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  height: max-content;
  padding: 22px 26px 20px;
  border-radius: 32px;
  background: radial-gradient(circle at 50% 0%, rgba(26, 46, 108, 0.92) 0%, rgba(8, 15, 38, 0.96) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(50px) saturate(210%);
  -webkit-backdrop-filter: blur(50px) saturate(210%);
  box-shadow: 
    0 35px 120px -20px rgba(0, 0, 0, 0.85),
    0 0 100px 0 rgba(35, 78, 235, 0.35),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px 0 rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  z-index: 1000;
  animation: spatialPop 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

dialog.album-dialog.spatial-viewer::backdrop {
  background: rgba(5, 10, 28, 0.82);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
}

.spatial-ambient-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse 70% 60% at 50% 48%, rgba(146, 174, 255, 0.28), rgba(237, 255, 152, 0.12) 45%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  animation: spatialAura 9s ease-in-out infinite;
}

/* Spatial Top Chrome Bar */
.spatial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 2;
  padding-bottom: 4px;
}

.spatial-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: #e2ebff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
}

.spatial-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lemon);
  box-shadow: 0 0 8px var(--lemon);
  display: inline-block;
  animation: spatialPulse 2.4s infinite ease-in-out;
}

.spatial-top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.spatial-hint-desktop {
  font-size: 10px;
  letter-spacing: 0.8px;
  color: #9ab4f5;
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.spatial-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s, box-shadow 0.25s;
}

.spatial-icon-btn svg {
  width: 20px;
  height: 20px;
}

.spatial-icon-btn:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.4);
}

/* Spatial Stage (3D Perspective Viewport) */
.spatial-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1300px;
  margin-block: 14px 12px;
  flex: 1;
  min-height: 320px;
  z-index: 1;
}

.spatial-card-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  max-width: min(840px, calc(100% - 130px));
  min-height: 260px;
  min-width: 260px;
  border-radius: 26px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    0 24px 70px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(146, 174, 255, 0.28);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.spatial-img-halo {
  position: absolute;
  inset: 15px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(146, 174, 255, 0.4), transparent 75%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

.spatial-photo {
  height: min(58dvh, 580px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 20px;
  display: block;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  transition: opacity 0.22s ease, transform 0.22s ease;
  transform: translateZ(10px);
}

.spatial-photo.changing {
  opacity: 0.25;
  transform: translateZ(0px) scale(0.97);
}

/* Spatial Nav Arrows (VisionOS Floating Glass Orbs) */
.spatial-nav-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 10px 28px rgba(0, 0, 0, 0.4);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s, box-shadow 0.22s;
}

.spatial-nav-btn svg {
  width: 22px;
  height: 22px;
}

.spatial-nav-btn.prev {
  left: 6px;
}

.spatial-nav-btn.next {
  right: 6px;
}

.spatial-nav-btn:hover {
  transform: translateY(-50%) scale(1.12);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 28px rgba(237, 255, 152, 0.45);
}

/* Spatial Bottom Chrome */
.spatial-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.spatial-caption-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.spatial-caption-eyebrow {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: #92aeff;
  margin-bottom: 2px;
}

.spatial-caption-title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: #fffef4;
  letter-spacing: -0.2px;
}

.spatial-counter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--lemon);
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.spatial-counter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lemon);
  box-shadow: 0 0 6px var(--lemon);
}

/* Interactive Dots Scrubber */
.spatial-scrubber {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: max-content;
  margin: 0 auto;
}

.spatial-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.spatial-dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.3);
}

.spatial-dot.active {
  width: 26px;
  border-radius: 999px;
  background: var(--lemon);
  box-shadow: 0 0 12px rgba(237, 255, 152, 0.85);
}

@media (max-width: 768px) {
  dialog.album-dialog.spatial-viewer {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 20px);
    padding: 16px 14px 14px;
    border-radius: 26px;
  }
  .spatial-top {
    padding-bottom: 2px;
  }
  .spatial-card-shell {
    max-width: 100%;
    border-radius: 18px;
    padding: 5px;
  }
  .spatial-photo {
    height: min(52dvh, 440px);
    border-radius: 14px;
  }
  .spatial-nav-btn {
    width: 42px;
    height: 42px;
  }
  .spatial-nav-btn.prev { left: 0px; }
  .spatial-nav-btn.next { right: 0px; }
  .spatial-nav-btn svg { width: 18px; height: 18px; }
  .spatial-caption-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
  }
  .spatial-caption-title { font-size: 13px; }
  .spatial-scrubber {
    gap: 5px;
    padding: 6px 10px;
    max-width: 100%;
    overflow-x: auto;
  }
  .spatial-dot { width: 6px; height: 6px; }
  .spatial-dot.active { width: 16px; }
  .spatial-hint-desktop { display: none; }
}