:root{--navy:#4b254b;--gold:#c78c65;--cream:#fff8f0;--green:#a35a39}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--navy);font-family:Arial,sans-serif}header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;background:var(--navy);color:white;border-bottom:2px solid var(--gold);gap:20px}.brand{font:bold 29px Georgia,serif;text-decoration:none;color:white}.brand span{color:#f3c99f}.strap{font-size:10px;letter-spacing:3px}nav{display:flex;gap:7px}button,a{touch-action:manipulation}nav button{border:1px solid #b494ad;border-radius:30px;padding:9px 17px;background:transparent;color:white;font-size:15px;cursor:pointer}nav button[aria-pressed=true]{background:var(--cream);color:var(--navy);border-color:var(--cream)}.hero{min-height:440px;display:grid;grid-template-columns:46% 54%;overflow:hidden;background:radial-gradient(ellipse at 85% 45%,#ddc5d6 0%,#f3e6e7 39%,var(--cream) 72%)}.intro{padding:28px 0 30px 12%}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:3px;color:#915b3e;margin:0 0 14px}h1{font:bold clamp(54px,6vw,83px)/1 Georgia,serif;margin:0 0 14px;letter-spacing:-3px}h1 span{color:var(--green)}h2{font:29px/1.08 Georgia,serif;margin:0 0 17px}.description{font-size:15px;line-height:1.55;max-width:430px;margin:0 0 21px}.actions{display:flex;gap:20px;align-items:center}.play{display:inline-block;background:linear-gradient(#8b4d69,#623449);color:white;border:1px solid #623449;border-radius:6px;padding:15px 23px;text-decoration:none;font-size:15px;font-weight:bold;box-shadow:0 5px 12px #19382c25}.help{border:0;background:none;color:var(--navy);font-size:15px;font-weight:bold;cursor:pointer;padding:12px 0}.art{position:relative;min-height:440px}.halo{width:370px;height:370px;position:absolute;left:18%;top:25px;border:1px solid #c78c6580;border-radius:50%;box-shadow:0 0 0 22px #ffffff30,0 0 0 23px #c78c6530}.card{position:absolute;width:190px;height:178px;background:#fffdf4;border:1px solid #c78c65;border-radius:12px;padding:9px;box-shadow:0 12px 24px #12374930;overflow:hidden}.card img{width:100%;height:100%;object-fit:contain;border-radius:5px}.rain{left:12%;top:32px;transform:rotate(-10deg)}.time{left:47%;top:30px;transform:rotate(9deg)}.birds{left:15%;top:228px;transform:rotate(-5deg)}.cake{left:50%;top:219px;transform:rotate(12deg)}.seal{position:absolute;left:35%;top:180px;width:124px;height:124px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--navy);color:white;border:5px double #f0c197;font:bold 22px Georgia,serif;transform:rotate(-8deg);box-shadow:0 5px 18px #14344835}.seal span{color:#f0c197}.art-caption{position:absolute;right:5%;bottom:0;font:italic 22px/1.2 Georgia,serif;text-align:right}.bottom{background:#623449;color:white;border-top:2px solid var(--gold);padding:24px 7%;display:flex;justify-content:space-between;align-items:center;gap:25px}.bottom .eyebrow{color:#f3c99f}h3{font:bold 23px/1.12 Georgia,serif;margin:0}.steps{display:flex;gap:15px}.steps span{border:1px solid #c78c65;border-radius:6px;padding:16px;color:#ffe4d0;font-size:11px;letter-spacing:2px}footer{background:#3b203c;color:white;display:flex;justify-content:space-between;gap:15px;padding:18px 5.5%;align-items:center}footer small{font-size:10px}footer>span{font-size:10px;letter-spacing:3px}dialog{max-width:620px;width:calc(100% - 32px);border:1px solid var(--gold);border-radius:12px;background:var(--cream);color:var(--navy);padding:32px;box-shadow:0 20px 80px #0005}dialog::backdrop{background:#3b203cb3}dialog li{margin:12px 0;line-height:1.5}dialog p{line-height:1.5}.close{float:right;background:none;border:0;font-size:28px;color:var(--navy);cursor:pointer}:focus-visible{outline:3px solid #b66c46;outline-offset:4px}@media(min-width:1500px){.intro{padding-top:48px}.hero{min-height:500px}.art{margin-top:25px}}@media(max-width:1050px){.strap{letter-spacing:1px;font-size:9px}.card{width:155px;height:150px}.halo{width:290px;height:290px;top:60px;left:16%}.rain{top:55px}.time{top:55px}.birds{top:230px}.cake{top:220px}.seal{left:34%;top:180px;width:100px;height:100px;font-size:18px}.steps{gap:7px}.steps span{padding:12px 8px;letter-spacing:1px}.art-caption{font-size:19px}.actions{gap:12px}.play{padding:14px 17px}}@media(max-width:740px){header{height:auto;min-height:64px;padding:13px 6%;flex-wrap:wrap}.strap{display:none}.hero{display:flex;flex-direction:column}.intro{padding:29px 7% 10px}.intro h2{font-size:27px}.description{max-width:500px}.art{min-height:390px;width:100%;max-width:520px;margin:0 auto}.card{width:160px;height:145px}.rain,.time{top:25px}.birds,.cake{top:191px}.seal{top:143px;left:35%}.halo{top:25px;left:20%}.art-caption{bottom:0;right:6%;font-size:18px}.bottom{padding:23px 7%;flex-direction:column;align-items:flex-start}.bottom h3{font-size:22px}.steps{width:100%;justify-content:space-between}footer{flex-direction:column;align-items:flex-start;padding:19px 7%}footer>span{font-size:9px;letter-spacing:2px}}@media(prefers-reduced-motion:no-preference){.play:hover{transform:translateY(-2px)}.card{animation:appear .7s ease-out}@keyframes appear{from{opacity:0}to{opacity:1}}}

/* Gotcha palette and additional breathing room below the play controls. */
.intro{padding-bottom:60px}.bottom{padding-top:38px;padding-bottom:30px}.bottom .eyebrow{margin-bottom:17px}@media(max-width:740px){.intro{padding-bottom:35px}.bottom{padding-top:32px;padding-bottom:28px}}

/* Fit desktop viewports without clipping or hiding content. */
@media(min-width:900px) and (min-height:560px){
 body{min-height:100svh;display:grid;grid-template-rows:58px 1fr 46px}
 header{height:58px}
 main{display:grid;grid-template-rows:minmax(370px,1fr) 116px}
 .hero{min-height:0;grid-template-columns:47% 53%}
 .intro{padding:22px 0 25px 12%;align-self:center}
 h1{font-size:clamp(55px,5.5vw,75px);margin-bottom:12px}
 h2{font-size:27px;margin-bottom:15px}
 .description{margin-bottom:17px;font-size:14px;max-width:410px}
 .eyebrow{margin-bottom:12px}
 .art{height:370px;min-height:370px;width:550px;max-width:100%;align-self:center;margin:0}
 .card{width:155px;height:140px}
 .rain{left:13%;top:20px}.time{left:48%;top:22px}
 .birds{left:16%;top:183px}.cake{left:51%;top:179px}
 .halo{width:290px;height:290px;top:20px;left:21%}
 .seal{width:100px;height:100px;left:36%;top:137px;font-size:18px}
 .art-caption{bottom:0;right:7%;font-size:19px}
 .bottom{padding:23px 7%;height:116px}
 .bottom .eyebrow{margin-bottom:10px}
 .bottom h3{font-size:22px}
 footer{padding:12px 5.5%;height:46px}
}
@media(min-width:900px) and (min-height:560px) and (max-height:619px){
 main{grid-template-rows:minmax(356px,1fr) 100px}
 .intro{padding-top:16px;padding-bottom:20px}
 h1{font-size:57px}h2{font-size:25px}
 .description{font-size:13px;margin-bottom:14px}
 .bottom{height:100px;padding-top:18px;padding-bottom:18px}
 .bottom h3{font-size:20px}
}