:root{--ink:#173e39;--teal:#246b5e;--cream:#faf7f0;--muted:#64746e;--line:#d9dfd5;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 system-ui,sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #bd733b;outline-offset:5px}[hidden]{display:none!important}header,main,footer{max-width:1240px;margin:auto}header{padding:30px 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:23px;letter-spacing:2px;font-weight:700}.brand span{font-family:var(--serif);font-style:italic;color:#b87140}.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:1px;margin-top:3px}main{padding:0 36px}.intro{text-align:center;padding:58px 0 36px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.4px}.intro h1{font:clamp(42px,5.5vw,70px)/1.08 var(--serif);letter-spacing:-2.5px;margin:18px 0}.intro p{color:var(--muted);font-size:17px}h2{font:clamp(30px,3.3vw,44px)/1.13 var(--serif);letter-spacing:-1px;margin:15px 0 20px}p{max-width:54ch}.experience{display:grid;grid-template-columns:1.08fr 1fr;min-height:500px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fffdf8;box-shadow:0 15px 60px #183e3907}.scene{position:relative;overflow:hidden;background:#d6e9e5;min-height:510px}.sun{position:absolute;background:#fbecbe;width:85px;height:85px;border-radius:50%;top:55px;left:65px;box-shadow:0 0 70px #fef4d4}.sea{position:absolute;width:150%;height:150px;left:-10%;border-radius:50%;transform:rotate(-10deg)}.sea-back{top:170px;background:#94c8be}.sea-front{top:205px;background:#62a99e}.sand{position:absolute;inset:270px -25% -80px -20%;border-radius:48% 45% 0 0;background:radial-gradient(ellipse at 25% 30%,#cfb587 1px,transparent 2px) 0 0/31px 33px,#eee0bd;transform:rotate(-8deg)}.shore-label{position:absolute;top:25px;right:25px;font:italic 16px var(--serif);color:#396a61}.turtle-definitions{position:absolute;width:0;height:0}.mama{position:absolute;right:10%;bottom:95px;width:155px;transform:scaleX(-1)}.mama span{display:block;text-align:center;font:italic 18px var(--serif);transform:scaleX(-1);margin-bottom:-5px}.mama svg,.baby svg{display:block;width:100%}.baby{position:absolute;bottom:75px;left:8%;width:86px;transform:rotate(-9deg)}.scene.playing .baby{animation:journey 5s ease-in-out forwards}.scene.arrived .baby{left:49%;bottom:85px;transform:rotate(-4deg)}@keyframes journey{0%{left:8%;bottom:75px;transform:rotate(-9deg)}20%{transform:rotate(7deg)}40%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-7deg)}100%{left:49%;bottom:85px;transform:rotate(-4deg)}}.speech{position:absolute;bottom:235px;left:40%;background:#fffdf5;border-radius:18px 18px 3px 18px;padding:18px 22px;box-shadow:0 4px 20px #1746380c;font:22px/1.2 var(--serif)}.speech span{color:#b5684a}.scene-footer{position:absolute;bottom:22px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:2px}.scene-footer button{font-size:11px;letter-spacing:0}.story-panel{padding:48px 42px;align-self:center}.story-panel p{font-size:14px;color:var(--muted)}label{display:block;font-size:12px;font-weight:600;margin:20px 0 9px}input{background:#fff;border:1px solid #b9cbc2;border-radius:5px;padding:14px;width:100%;min-width:0;color:var(--ink)}.input-row{display:flex;flex-wrap:wrap;gap:10px}.input-row input{flex:1 1 130px}.primary{border:0;border-radius:5px;padding:15px 18px;background:var(--teal);color:white;font-size:13px;font-weight:600}.primary:hover{background:#164e43}#name-form .primary{width:100%;margin-top:10px}.text-button{border:0;background:none;padding:10px 0;text-decoration:none;color:var(--ink);font-size:13px;display:inline-block}.text-button:hover{text-decoration:underline}.demo-note{font-size:10px!important;border-top:1px solid var(--line);padding-top:16px;margin-top:28px}.error{color:#9a3c25!important;font-size:13px;min-height:0}.error:empty{display:none}.soft{color:var(--muted);font-size:14px}.small{font-size:12px}.piece-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px;padding:70px 25px}.piece-section p{font-size:14px}.photo-card{position:relative;padding:0;border:0;background:#efece5;border-radius:12px;overflow:hidden}.photo-card img{width:100%;height:390px;object-fit:cover;display:block}.photo-card span{display:block;background:#e9eee7;padding:15px;font-size:9px;letter-spacing:2px}dl{margin:24px 0;font-size:12px}dl div{display:flex;gap:20px;border-top:1px solid var(--line);padding:12px 0}dt{color:var(--muted);width:80px;flex-shrink:0}dd{margin:0}.family-section{padding:45px 0;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.family-card{background:#fffdf8;border:1px solid var(--line);padding:0;text-align:left;border-radius:10px;overflow:hidden;color:var(--ink)}.family-card img{width:100%;height:210px;object-fit:cover;display:block}.family-card div{padding:20px}.family-card strong{display:block;font:25px var(--serif);overflow-wrap:anywhere}.family-card small{color:var(--muted)}.friends{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:25px;align-items:center;border-top:1px solid var(--line);padding:55px 0}.friends h2{font-size:35px}.friends p{font-size:13px;color:var(--muted)}.friend-card{border-radius:10px;overflow:hidden;text-decoration:none;background:#e9eee7}.friend-card img{width:100%;height:210px;object-fit:cover;display:block}.friend-card span{display:block;padding:20px;font:20px var(--serif)}.friend-card b{display:block;margin-top:10px;font:11px system-ui}.demo-tools{border-top:1px solid var(--line);padding:25px 0;font-size:12px;color:var(--muted)}summary{cursor:pointer}.tool-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap}footer{padding:30px 36px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-size:12px}footer .brand{font-size:17px}footer p{font-family:var(--serif);font-style:italic;font-size:16px}dialog{border:0;border-radius:14px;max-width:min(90vw,800px);padding:18px;background:var(--cream)}dialog::backdrop{background:#123b35bb}dialog img{display:block;max-width:100%;max-height:75vh;object-fit:contain}dialog p{text-align:center;font-size:12px}.close{position:absolute;right:22px;top:22px;border:0;background:var(--cream);width:44px;height:44px;border-radius:50%;font-size:28px}.skip{position:absolute;top:-100px}.skip:focus{top:5px;background:white;padding:12px;z-index:100}#welcome-title{overflow-wrap:anywhere}@media(max-width:760px){header{padding:20px}.brand{font-size:19px}.brand small{font-size:8px;letter-spacing:0}main{padding:0 18px}.intro{padding:36px 0 25px}.experience{grid-template-columns:1fr}.scene{min-height:370px}.sun{width:60px;height:60px;top:45px;left:45px}.sea-back{top:105px}.sea-front{top:140px}.sand{top:200px}.mama{width:130px;bottom:55px}.baby{width:75px;bottom:45px}.scene.arrived .baby{bottom:45px}.speech{bottom:175px;left:38%;font-size:20px}.scene.playing .baby{animation-name:journey-mobile}@keyframes journey-mobile{0%{left:8%;transform:rotate(-9deg)}25%{transform:rotate(7deg)}50%{transform:rotate(-9deg)}75%{transform:rotate(7deg)}100%{left:49%;transform:rotate(-4deg)}}.scene-footer{bottom:16px}.story-panel{padding:30px 25px}.piece-section{grid-template-columns:1fr;gap:20px;padding:45px 5px}.photo-card img{height:320px}.family-grid{grid-template-columns:1fr 1fr}.family-card img{height:160px}.section-heading{align-items:flex-start}.section-heading h2{font-size:30px}.friends{grid-template-columns:1fr 1fr;gap:16px}.friends>div{grid-column:1/-1}.friend-card img{height:170px}.friend-card span{font-size:18px;padding:15px}footer{padding:25px 20px;flex-wrap:wrap;gap:12px}footer p{display:none}}@media(prefers-reduced-motion:reduce){.scene.playing .baby{animation:none;left:49%}.scene{scroll-behavior:auto}}@media(max-width:380px){header .brand small{display:none}.family-grid{grid-template-columns:1fr}.mama{right:6%}}
.intro p{margin-left:auto;margin-right:auto}@media(max-width:760px){.mama{right:5%}.scene.arrived .baby{left:38%}@keyframes journey-mobile{0%{left:8%;transform:rotate(-9deg)}25%{transform:rotate(7deg)}50%{transform:rotate(-9deg)}75%{transform:rotate(7deg)}100%{left:38%;transform:rotate(-4deg)}}}