:root{color-scheme:dark;--ivory:#faf3e4;--muted:#c9d4ce;--gold:#e9c994;--green:#153d38;--progress:0;--dawn:0;--camera:0;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#102a31;color:var(--ivory);overflow:hidden}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button{color:inherit}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}#experience{height:100svh;min-height:580px;position:relative;isolation:isolate;overflow:hidden;background:#18363b}.landscape,.atmosphere,.dawn,#garden,.vignette{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.landscape{background-image:url('assets/garden.png');background-size:cover;background-position:center 58%;transform:scale(calc(1.04 + var(--camera)*.08));filter:saturate(.8);z-index:-5}.atmosphere{z-index:-4;background:linear-gradient(180deg,rgba(4,26,35,.75),rgba(7,32,39,.46) 42%,rgba(6,29,34,.32) 68%,rgba(5,27,31,.84));opacity:calc(1 - var(--dawn)*.34)}.dawn{z-index:-3;background:radial-gradient(ellipse at 52% 36%,rgba(248,187,146,.38),rgba(83,112,100,.05) 60%);opacity:var(--dawn);mix-blend-mode:screen}#garden{z-index:-2}.vignette{z-index:-1;background:linear-gradient(180deg,rgba(3,23,29,.2),transparent 25%,transparent 70%,rgba(5,26,30,.3))}header{height:108px;display:flex;align-items:center;justify-content:space-between;padding:0 4.2%;position:relative;z-index:6}.wordmark{text-decoration:none;display:flex;align-items:center;gap:12px;color:var(--ivory);font-family:Georgia,'Times New Roman',serif;font-size:28px;letter-spacing:-1px}.wordmark svg{width:32px;height:32px;color:var(--gold)}.wordmark-dot{color:var(--gold)}.header-date{font-size:9px;letter-spacing:2.8px;color:#d3ded4;position:absolute;left:50%;transform:translateX(-50%)}.header-date i{font-style:normal;padding:0 9px}nav{display:flex;gap:24px;align-items:center}nav button{background:none;border:0;padding:10px 0;display:flex;align-items:center;gap:8px;font-size:11px}.edit-btn{border-bottom:1px solid #a1b6ad66!important}.edit-btn svg{width:14px}.sound svg{width:18px}.sound-dot{width:4px;height:4px;background:#8caaa2;border-radius:50%}.sound[aria-pressed=true] .sound-dot{background:#eacc93;box-shadow:0 0 9px #f5c876}.panel{position:absolute;text-align:center;left:0;width:100%;pointer-events:none;transition:opacity 1s,transform 1.3s}.intro{top:21%;padding:0 16px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:18px;font-size:9px;letter-spacing:3px;font-weight:400;color:#e8ddbf}.eyebrow>span{height:1px;width:29px;background:#b4b69d70}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(46px,5.7vw,88px);line-height:1.14;letter-spacing:-2.5px;margin:25px 0 22px;text-shadow:0 3px 35px #092c3455}h1 em{color:#ead5ae;font-weight:400}.intro>p{font-size:12px;color:#d1dbd5;letter-spacing:.3px;line-height:1.7}.seed-button{position:absolute;left:50%;top:65%;width:180px;height:150px;transform:translate(-50%,-30%);background:transparent;border:0;display:flex;align-items:center;justify-content:center;flex-direction:column;touch-action:manipulation;transition:opacity .7s,transform .7s}.seed-halo{position:absolute;width:150px;height:150px;top:-20px;border-radius:50%;background:radial-gradient(ellipse,#fdd29128,transparent 66%);animation:breathe 3s ease-in-out infinite}.seed-ring{position:absolute;top:7px;width:73px;height:73px;border:1px solid #dcc39438;border-radius:50%;animation:ripple 4s ease-out infinite}.ring-two{animation-delay:2s}.seed-core{position:absolute;top:23px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 37% 30%,#fffefa,#fff5cd 20%,#ebbc74 56%,#94654d 100%);box-shadow:0 0 25px #f6d5a27a,0 0 75px #ffe5a13a,inset 0 0 10px #fff4e5;animation:float 4s ease-in-out infinite}.seed-core:before,.seed-core:after{content:'';position:absolute;inset:8px -6px;border:1px solid #fff6d395;transform:rotate(-35deg);border-radius:50%}.seed-core:after{transform:rotate(55deg)}.seed-label{font-size:9px;letter-spacing:2.8px;margin-top:97px;color:#f4e8cb}.seed-sub{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#aabfb5;margin-top:10px}.seed-button:hover .seed-core{box-shadow:0 0 35px #ffe3b4,0 0 100px #ffe4a66a}.seed-button:active{transform:translate(-50%,-30%) scale(.94)}footer{position:absolute;left:4.2%;right:4.2%;bottom:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#b7ccc0;pointer-events:none}.footer-note{font-size:8px;letter-spacing:2px}.footer-date{font-family:Georgia,serif;font-size:25px;letter-spacing:3px;color:#e2d9bf}.footer-date span{font-size:15px;color:#93a99d}.chapters{display:flex;align-items:center;gap:17px;font-size:10px}.chapter{opacity:.42;transition:opacity 1s;color:#e6e6d5}.chapter i{font-style:normal;font-size:8px;color:#dcbd88;margin-right:6px}.chapter.active{opacity:1}.chapters b{display:block;width:35px;height:1px;background:#e1e8cc38}.timeline{height:2px;background:#d7c99f15;position:absolute;bottom:0;left:0;right:0}.timeline span{display:block;width:calc(var(--progress)*100%);height:100%;background:#e5c893;box-shadow:0 0 10px #e5c893}.journey-copy{top:22%;opacity:0;transform:translateY(15px)}.journey-copy p{font-family:Georgia,serif;font-size:clamp(30px,3.5vw,52px);font-style:italic;color:#f4e9d1;margin:0 0 15px;letter-spacing:-.5px}.journey-copy span{font-size:11px;letter-spacing:1.5px;color:#cbd9ce}.reveal{inset:0;opacity:0;transform:translateY(8px)}.reveal>.eyebrow{position:absolute;top:23%;left:0;width:100%}.reveal-bottom{position:absolute;top:66%;width:100%;padding:0 20px}.reveal-bottom>p{font-size:clamp(25px,3vw,43px);font-family:Georgia,serif;letter-spacing:-.5px;margin:0 0 15px}.reveal-bottom>p em{color:#f1d0a3}.reveal-bottom>span{font-size:9px;letter-spacing:3px;color:#cdd8c4}.letter-button{pointer-events:auto;display:flex;gap:17px;align-items:center;justify-content:center;border:1px solid #e1c99577;background:#123e3a85;padding:15px 22px;border-radius:40px;margin:27px auto 0;font-size:11px;backdrop-filter:blur(14px);transition:background .3s,transform .3s}.letter-button:hover{background:#2d574ed9;transform:translateY(-3px)}.little-flower{font-size:23px;color:#ebcfa7;line-height:20px}.text-button{background:transparent;border:0;font-size:11px;display:flex;align-items:center;gap:8px;color:#d6dfd1;padding:10px}.text-button span{font-size:19px}.text-button svg{width:16px}.skip{position:absolute;right:4.2%;bottom:96px;display:none}.final-actions{position:absolute;right:4.2%;bottom:96px;display:none;gap:12px}.final-actions button{font-size:10px}.toast{position:fixed;bottom:85px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#f7f1e3;color:#24463e;border-radius:30px;padding:13px 24px;font-size:12px;z-index:100;transition:.3s;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}#experience[data-stage=growing] .intro,#experience[data-stage=flight] .intro,#experience[data-stage=final] .intro{opacity:0;transform:translateY(-25px)}#experience:not([data-stage=intro]) .seed-button{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.2)}#experience[data-stage=growing] .journey-copy,#experience[data-stage=flight] .journey-copy{opacity:1;transform:translateY(0)}#experience[data-stage=growing] .skip,#experience[data-stage=flight] .skip{display:flex}#experience[data-stage=final] .reveal{opacity:1;transform:translateY(0)}#experience[data-stage=final] .final-actions{display:flex}#experience:not([data-stage=final]) .letter-button{pointer-events:none}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.modal{color-scheme:light;border:1px solid #daceb6;border-radius:5px;background:#f7f2e7;color:#23453d;box-shadow:0 30px 120px #041f29a1;padding:48px;width:min(510px,calc(100vw - 32px));max-height:90svh;overflow:auto}.modal::backdrop{background:#071d2699;backdrop-filter:blur(12px)}.modal[open]{animation:modal-in .4s ease both}.close-modal{position:absolute;right:19px;top:14px;background:none;border:0;color:#64766a;font-size:29px;font-weight:200;line-height:1;padding:5px}.modal-kicker{font-size:8px;letter-spacing:2.2px;color:#8c8b70}.modal h2{font-family:Georgia,serif;font-size:41px;line-height:1.16;font-weight:400;letter-spacing:-1px;margin:23px 0 18px}.modal h2 em{color:#9c7558}.form-description{font-size:12px;line-height:1.7;color:#718074;margin-bottom:28px}label{font-size:11px;display:block;margin:19px 0 9px;color:#4c6557}label>span{color:#8d9686;font-size:10px}input,textarea{display:block;background:#fffaf1;border:1px solid #dedbcd;border-radius:3px;color:#26483b;width:100%;padding:12px 13px;outline:none;font-size:14px;line-height:1.7}input:focus,textarea:focus{border-color:#8f9d7b;box-shadow:0 0 0 3px #b9c4a227}textarea{resize:vertical;min-height:95px}.primary{background:#244d40;border:0;color:#fff7e4;padding:16px 18px;margin-top:27px;width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12px;border-radius:3px}.primary:hover{background:#35624f}.local-note{font-size:10px;color:#8b9280;text-align:center;margin:14px 0 0}.letter-modal{padding:65px 46px 38px;text-align:center;width:min(550px,calc(100vw - 32px));background:radial-gradient(ellipse at 90% 0%,#e8e3cf,transparent 48%),#faf5e9}.letter-art{font-size:60px;color:#9b9876;font-family:Georgia,serif;font-weight:400;margin-bottom:25px}.letter-modal h2{margin-bottom:28px}.letter-modal #letter-message{font-family:Georgia,serif;font-size:19px;line-height:1.9;color:#526255;white-space:pre-wrap;overflow-wrap:anywhere}.letter-signature{display:flex;flex-direction:column;gap:12px;margin:30px 0;color:#8c927a;font-size:10px}.letter-signature strong{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#8d7056;font-size:20px;overflow-wrap:anywhere}.letter-return{border:0;border-top:1px solid #d6d5c3;background:transparent;padding:20px 0 0;color:#556e58;font-size:10px;letter-spacing:.7px}.letter-return span{padding-left:14px}@keyframes float{50%{transform:translateY(-8px)}}@keyframes breathe{50%{transform:scale(1.25);opacity:.65}}@keyframes ripple{0%{transform:scale(.65);opacity:0}20%{opacity:.7}100%{transform:scale(1.8);opacity:0}}@keyframes modal-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1600px){.intro{top:22%}.seed-button{top:65%}}@media(max-height:730px) and (min-width:701px){header{height:80px}.intro{top:18%}h1{font-size:62px;margin:20px 0 15px}.seed-button{top:64%}.reveal-bottom{top:63%}.letter-button{margin-top:18px}footer{bottom:24px}}@media(max-width:700px){#experience{min-height:560px}header{height:86px;padding:0 23px}.wordmark{font-size:25px;gap:8px}.wordmark svg{width:26px;height:26px}.header-date{display:none}nav{gap:17px}.sound>span:not(.sound-dot){display:none}.edit-btn{font-size:10px}.edit-btn svg{display:none}.landscape{background-position:51% 50%}.atmosphere{background:linear-gradient(180deg,#062430aa,#082b3466 48%,#06252e44 65%,#09282bdf)}.intro{top:23%}.eyebrow{font-size:8px;letter-spacing:2.1px;gap:12px}.eyebrow>span{width:20px}h1{font-size:clamp(42px,10.4vw,66px);letter-spacing:-1.8px;line-height:1.19;margin:26px 0 21px}.intro>p{max-width:265px;margin:auto;font-size:11px;line-height:1.8}.seed-button{top:64%}.seed-label{font-size:8px;letter-spacing:2.3px}.seed-sub{font-size:11px}footer{left:24px;right:24px;bottom:29px;justify-content:center}.footer-note,.footer-date{display:none}.chapters{gap:12px;font-size:9px}.chapters b{width:24px}.chapter i{font-size:7px;margin-right:3px}.journey-copy{top:25%;padding:0 22px}.journey-copy p{font-size:31px;line-height:1.3}.journey-copy span{font-size:10px;letter-spacing:.8px}.reveal>.eyebrow{top:28%}.reveal-bottom{top:62%}.reveal-bottom>p{font-size:29px;line-height:1.3}.reveal-bottom>span{font-size:8px;letter-spacing:2px}.letter-button{font-size:10px;padding:13px 16px;gap:12px;margin-top:24px}.final-actions{left:0;right:0;bottom:77px;justify-content:center;gap:18px}.skip{right:22px;bottom:76px}.modal{padding:36px 25px}.modal h2{font-size:36px}.letter-modal{padding:43px 28px 28px}.letter-modal #letter-message{font-size:18px}.letter-art{font-size:48px;margin-bottom:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.landscape{transform:none}}

/* Hidden YouTube player for the background song. Kept rendered (not display:none) so browsers still let it play. */
.yt-holder{position:fixed;left:0;bottom:0;width:200px;height:200px;opacity:0;pointer-events:none;overflow:hidden}

/* Portrait layout: iPhone 11 Pro, including Safari chrome and safe areas. */
@media(max-width:430px){
 header{height:calc(80px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px));}
 .intro{top:23%;} h1{font-size:43px;line-height:1.2;letter-spacing:-1.6px;}
 .edit-btn{min-height:44px}.sound{min-width:38px;min-height:44px;justify-content:center}nav{gap:10px}
 .seed-button{top:63%;width:200px;height:155px}
 footer{bottom:calc(24px + env(safe-area-inset-bottom,0px));}
 .final-actions{bottom:calc(70px + env(safe-area-inset-bottom,0px));}
 .final-actions button,.skip{min-height:44px}
 .skip{bottom:calc(69px + env(safe-area-inset-bottom,0px));}
 .reveal-bottom{top:61%;}.reveal-bottom>p{font-size:27px}.letter-button{min-height:48px}
 .modal{max-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 30px)}
 input,textarea{font-size:16px}.close-modal{min-width:44px;min-height:44px;right:8px;top:6px}
}
@media(max-width:700px) and (max-height:700px){
 #experience{min-height:540px}header{height:calc(67px + env(safe-area-inset-top,0px))}
 .intro{top:20%}.intro .eyebrow{font-size:7px}h1{font-size:39px;margin:17px 0 15px;line-height:1.14}.intro>p{font-size:10px;max-width:250px}
 .seed-button{top:61%}.seed-label{margin-top:87px}.seed-sub{margin-top:7px}
 .journey-copy{top:22%}.journey-copy p{font-size:27px}
 .reveal>.eyebrow{top:24%}.reveal-bottom{top:59%}.reveal-bottom>p{font-size:25px;margin-bottom:10px}.letter-button{margin-top:17px;padding:10px 14px}
 .final-actions{bottom:calc(53px + env(safe-area-inset-bottom,0px))}footer{bottom:calc(18px + env(safe-area-inset-bottom,0px))}.skip{bottom:calc(51px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:700px){.landscape{background-image:url('assets/garden-portrait.png');background-position:center center;}}

#experience{position:fixed;inset:0;overflow:clip;}

/* Visible motion and clear music controls. */
.motion-toggle{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);font-size:10px;color:#e6d8b7;background:#173d37aa;border:1px solid #bca98266;border-radius:22px;padding:10px 14px;z-index:10}
.motion-toggle[hidden]{display:none}
.sound.playing .sound-dot{animation:music-beat 1s ease-in-out infinite;background:#ffe0a0;box-shadow:0 0 7px #ffe0a0}
@keyframes music-beat{50%{transform:scale(1.8);opacity:.5}}
#experience[data-stage=growing] .landscape{transition:filter 5s;filter:saturate(1.03)}
.journey-copy p{font-size:clamp(27px,3.2vw,46px)}
@media(max-width:700px){.sound>.sound-label{display:inline!important;font-size:9px}.sound{gap:5px}.sound-dot{display:none}.edit-btn{font-size:9px}nav{gap:12px}.wordmark{font-size:23px;gap:7px}.wordmark svg{width:24px}.journey-copy{top:23%;padding:0 25px}.journey-copy p{font-size:27px;line-height:1.35}.journey-copy span{font-size:10px;letter-spacing:.2px}.seed-sub{font-size:10px}}

:root{--ivory:#f1faf7;--muted:#c4e0da;--gold:#bce2df;--green:#1d544c}
h1 em,.reveal-bottom>p em{color:#c1e7eb}.eyebrow{color:#d4efdf}.seed-label{color:#e1f8ed}.seed-sub{color:#bdddd5}.footer-date{color:#d1ede7}.chapter i{color:#b7dfd0}.timeline span{background:#a9e8dc;box-shadow:0 0 10px #a9e8dc}
.atmosphere{background:linear-gradient(180deg,rgba(9,38,49,.58),rgba(11,52,63,.32) 42%,rgba(12,50,56,.18) 68%,rgba(7,38,43,.72));opacity:calc(1 - var(--dawn)*.22)}
.dawn{background:radial-gradient(ellipse at 52% 36%,rgba(181,235,224,.28),rgba(126,193,208,.06) 60%)}
.seed-core{background:radial-gradient(circle at 37% 30%,#fff,#effff9 20%,#aee1de 56%,#6599a6 100%);box-shadow:0 0 25px #b8ede87a,0 0 75px #a1e8dd3a,inset 0 0 10px #e5fff9}.seed-halo{background:radial-gradient(ellipse,#b6f5df33,transparent 66%)}.seed-ring{border-color:#b0e2d54d}.seed-core:before,.seed-core:after{border-color:#e6fff9aa}
.letter-button{border-color:#c2e2d77a;background:#164d4ca6}.little-flower{color:#c3e6dc}.letter-button:hover{background:#296a5ed9}
.modal{background:#f0f7f1;color:#244d49;border-color:#c9dcd1}.modal h2 em{color:#57948f}.modal-kicker{color:#6a9588}.letter-modal{background:radial-gradient(ellipse at 90% 0%,#d9eee8,transparent 48%),#f0f7f1}.letter-art{color:#86afa0}.letter-signature strong{color:#578a82}.letter-modal #letter-message{color:#44675c}input,textarea{background:#f8fcf8;border-color:#cbded4}.primary{background:#2b665b}.toast{background:#ecf8f0}.sound.playing .sound-dot{background:#bdebdc;box-shadow:0 0 7px #c8f8ed}

@media(max-width:700px){.landscape{background-image:url('assets/garden-blue-portrait.png')}}

.landscape{background-image:url('assets/garden-blue.png')}
@media(max-width:700px){.landscape{background-image:url('assets/garden-blue-portrait.png')}}

/* Long personal letter: comfortable line lengths and native vertical scrolling. */
.letter-modal #letter-message{text-align:left;font-size:18px;line-height:1.85}.letter-modal{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9cbdad transparent}.letter-signature{align-items:flex-end;text-align:right}
@media(max-width:700px){.letter-modal #letter-message{font-size:17px;line-height:1.85}.letter-modal{padding-left:25px;padding-right:25px}}