@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900;1000&display=swap');
:root {
  --ink:#352341; --cream:#fffaf0; --paper:#fffef9; --coral:#a9363b;
  --peach:#ffdfd0; --mint:#e3f0cd; --lilac:#eee4fc; --line:#e9dbc8;
  font-family:Nunito,ui-rounded,"Avenir Next",system-ui,sans-serif;
  color:var(--ink); background:var(--cream);
}
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; line-height:1.55; font-size:1rem; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
button { font:inherit; color:inherit; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid #572894; outline-offset:4px; }
.skip { position:fixed; top:8px; left:8px; z-index:10; background:white; padding:12px; transform:translateY(-150%); }
.skip:focus { transform:none; }
.shell { width:min(1160px, calc(100% - 64px)); margin-inline:auto; }
.site-header { background:var(--paper); border-bottom:1px solid var(--line); }
.header-inner,.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; }
.brand { display:inline-flex; gap:9px; align-items:center; text-decoration:none; white-space:nowrap; font-weight:1000; font-size:1.38rem; letter-spacing:-.055em; }
.brand small { font-size:.59rem; letter-spacing:.09em; font-weight:900; border-left:1px solid var(--line); padding-left:9px; }
.brand-icon { width:32px; height:32px; display:grid; place-items:center; background:#fcd4c6; border-radius:11px; color:#963133; font-size:1rem; }
nav { display:flex; gap:clamp(8px,2vw,26px); }
nav a,.footer-inner a { font-weight:800; text-underline-offset:4px; }
nav a { display:grid; align-items:center; min-height:44px; text-decoration:none; white-space:nowrap; }
nav a:hover { text-decoration:underline; }
.button { border:1.5px solid transparent; border-radius:100px; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:49px; padding:10px 20px; background:var(--coral); color:white; font-weight:900; text-decoration:none; cursor:pointer; text-align:center; line-height:1.2; }
.button:hover { background:#83262a; }
.button.light { background:var(--paper); color:var(--ink); border-color:#cdbbd1; }
.button.light:hover { background:#f6ecff; }
.button.small { min-height:44px; padding-inline:15px; font-size:.9rem; }
.button:disabled { opacity:.55; cursor:default; }
.hero { background:#fff5df; border-bottom:1px solid #f1e1c9; }
.hero-inner { display:grid; grid-template-columns:.88fr 1.12fr; gap:32px; align-items:center; padding-block:55px 64px; }
.tag { display:flex; align-items:center; gap:6px; font-size:.72rem; letter-spacing:.11em; font-weight:1000; color:#74445a; margin:0 0 12px; }
.hero .tag { display:inline-flex; background:#ffebba; padding:7px 12px; border-radius:50px; }
.hero h1,h2,h3 { line-height:1.04; letter-spacing:-.045em; font-weight:1000; margin:0; text-wrap:balance; }
.hero h1 { font-size:clamp(3.4rem,7.4vw,7rem); }
.hero h1 em { font-style:normal; color:var(--coral); }
.hero-copy>p:not(.tag) { max-width:32ch; font-size:clamp(1.04rem,1.65vw,1.27rem); margin:20px 0 24px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.hero-art { position:relative; isolation:isolate; aspect-ratio:1.16; min-width:0; border-radius:48% 48% 27px 27px / 39% 39% 27px 27px; overflow:hidden; background:#dceef4; border:3px solid #fffdf4; box-shadow:0 7px 0 #e8d6b7; }
.sky { position:absolute; inset:0; }
.sky i,.story-art i { position:absolute; display:block; font-style:normal; }
.sun { background:#ffda77; width:21%; aspect-ratio:1; top:10%; right:17%; border-radius:50%; }
.cloud { width:22%; height:7%; background:#fffdf2; border-radius:40px; }
.cloud::before,.cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; bottom:20%; aspect-ratio:1; }
.cloud::before { width:45%; left:13%; }
.cloud::after { width:38%; right:17%; }
.cloud.one { left:13%; top:24%; }
.cloud.two { right:2%; top:40%; transform:scale(.7); }
.hill { border-radius:50% 50% 0 0; height:58%; width:115%; }
.hill.far { background:#bcd8a9; bottom:-22%; right:-22%; transform:rotate(-12deg); }
.hill.near { background:#95ba83; bottom:-29%; left:-30%; transform:rotate(10deg); }
.flower { font-size:clamp(1rem,3.5vw,2.5rem); color:#ffedaa; z-index:2; line-height:1; }
.flower::after { content:""; position:absolute; height:.6em; width:3px; background:#53754a; left:50%; top:79%; z-index:-1; border-radius:3px; }
.f1 { left:6%; bottom:14%; } .f2 { left:15%; bottom:6%; color:#ffcabf; transform:scale(.6); }
.f3 { right:7%; bottom:12%; color:#ffd0c7; } .f4 { right:16%; bottom:7%; transform:scale(.52); }
.spark { font-size:clamp(1rem,4vw,2.4rem); color:#825167; }
.s1 { left:47%; top:18%; } .s2 { right:12%; top:35%; color:#9c5b44; }
.hero-pal { position:absolute; margin:0; display:grid; justify-items:center; width:53%; bottom:10%; z-index:1; }
.hero-pal.sheppy { left:5%; transform:rotate(-5deg); }
.hero-pal.lala { right:3%; width:49%; bottom:8%; transform:rotate(6deg); }
.hero-pal figcaption { background:#fff4d6; padding:3px 12px; border:1px solid #dbc3a2; border-radius:99px; margin-top:-4%; font-weight:1000; font-size:clamp(.72rem,1.4vw,1rem); z-index:2; }
.hero-pal.lala figcaption { background:#ffe4dc; }
.section { padding-block:clamp(52px,8vw,92px); scroll-margin-top:12px; }
h2 { font-size:clamp(2.15rem,4.6vw,3.65rem); }
h3 { font-size:clamp(1.6rem,3.2vw,2.45rem); }
.activities { padding-block:46px 62px; }
.activities h2 { font-size:clamp(1.85rem,3vw,2.55rem); margin-bottom:20px; }
.activity-grid,.pal-grid { display:grid; gap:16px; }
.activity-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.peach { background:var(--peach); } .mint { background:var(--mint); } .lilac { background:var(--lilac); }
.tile { border-radius:24px; position:relative; display:grid; align-content:start; gap:3px; padding:22px; text-decoration:none; border:1px solid #35234123; }
.tile:hover { border-color:var(--ink); }
.tile strong { font-size:clamp(1.02rem,2.2vw,1.36rem); font-weight:1000; }
.tile>span:not(.tile-art):not(.arrow) { font-size:.93rem; }
.arrow { position:absolute; top:15px; right:17px; font-size:1.2rem; }
.tile-art { width:70px; height:59px; position:relative; margin-bottom:7px; }
.book { width:57px; height:43px; margin:8px 0 15px 3px; border-radius:10px 14px 12px 5px; background:#b74a51; box-shadow:3px 4px 0 #772939; transform:rotate(-10deg); color:#fff4d3; display:grid; place-items:center; border-left:7px solid #923742; }
.peek { overflow:hidden; border-radius:60% 55% 24% 27%; background:#bad698; }
.peek img { width:76px; max-width:none; margin-top:7px; }
.moon { width:49px; height:49px; border-radius:50%; margin:5px 0 12px 6px; box-shadow:-12px 7px 0 0 #a776ca; color:#8357a4; text-align:right; line-height:1; }
.pals { background:#fdf0e6; }
.pal-grid { grid-template-columns:1fr 1fr; margin-top:24px; }
.pal { border-radius:28px; border:1px solid #35234122; overflow:hidden; }
.pal-stage { height:clamp(180px,25vw,300px); display:grid; place-items:center; background:#fff7e28c; }
.pal-stage img { width:auto; height:100%; max-height:clamp(180px,25vw,300px); object-fit:contain; }
.pal>div:last-child { padding:24px; }
.pal p:last-child { margin-bottom:0; }
.intro { margin:10px 0 22px; }
.storybook { display:grid; grid-template-columns:1fr 1fr; border-radius:28px; overflow:hidden; background:white; border:1px solid var(--line); }
.story-art { min-height:290px; isolation:isolate; position:relative; overflow:hidden; background:#ddecf6; }
.story-art[data-scene="1"] { background:#ffe9be; }
.story-art[data-scene="2"] { background:#ecd9f8; }
.story-art img { position:absolute; width:50%; max-height:83%; object-fit:contain; bottom:8%; z-index:1; }
.story-shep { left:6%; } .story-lala { right:0; transform:scale(.76); transform-origin:bottom; }
.story-art[data-scene="0"] .story-lala { visibility:hidden; }
.story-art[data-scene="1"] .story-lala { right:13%; bottom:14%; transform:scale(.70) rotate(8deg); }
.story-copy { padding:clamp(23px,4vw,48px); min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:14px; }
.story-controls { display:flex; flex-wrap:wrap; gap:9px; }
.play-section { background:#e5f0d2; }
.play-inner { display:grid; grid-template-columns:.85fr 1.15fr; gap:24px; align-items:center; }
.spots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.spot { display:grid; justify-items:center; align-content:center; gap:8px; min-height:118px; padding:8px 3px; background:#fbffe9; border:1.5px solid #7e986e; border-radius:20px; font-weight:1000; cursor:pointer; }
.spot>span { display:grid; place-items:center; height:57px; width:100%; font-size:2.35rem; line-height:1; color:#416b4e; }
.spot:nth-child(1)>span { color:#a9363b; }
.spot:nth-child(3)>span { color:#425d96; }
.spot img { height:57px; width:auto; }
.spot:hover:not(:disabled),.spot.found { background:#ffe6b4; }
.spot:disabled { cursor:default; color:#543f5e; }
#game-status { min-height:1.55em; font-weight:800; }
.night { background:#382a50; color:#fff9e8; }
.night-inner { display:grid; grid-template-columns:.65fr 1.35fr; align-items:center; gap:24px; }
.night-inner p { max-width:46ch; font-size:1.2rem; }
.night-art { position:relative; text-align:center; line-height:1; font-size:clamp(5rem,14vw,10rem); color:#ffdf86; }
.night-art i,.night-art b { position:absolute; color:#d7c7ff; font-size:.24em; font-style:normal; }
.night-art i { top:10%; left:18%; } .night-art b { bottom:9%; right:15%; }
.parent-card { padding:clamp(22px,5vw,60px); background:#fff0cc; border:1px solid #ead8ae; border-radius:27px; }
.parent-card p { max-width:60ch; }
.note { margin-bottom:0; font-weight:800; }
footer { border-top:1px solid var(--line); background:var(--paper); }
.footer-inner>div { display:flex; gap:16px; flex-wrap:wrap; }
.footer-inner>div a { display:inline-flex; min-height:44px; align-items:center; }
@media(max-width:900px) {
  .header-inner { flex-wrap:wrap; gap:1px 12px; padding-top:8px; }
  nav { order:3; width:100%; justify-content:space-between; overflow:auto; gap:10px; }
}
@media(max-width:700px) {
  .shell { width:calc(100% - 34px); }
  .hero-inner,.storybook,.play-inner { grid-template-columns:1fr; }
  .hero-inner { padding-block:29px 37px; gap:23px; }
  .hero h1 { font-size:clamp(3.15rem,11vw,5.2rem); }
  .hero-art { max-height:425px; }
  .activity-grid { gap:8px; }
  .tile { padding:12px 9px; border-radius:17px; }
  .tile strong { line-height:1.15; }
  .tile>span:not(.tile-art):not(.arrow) { font-size:.83rem; line-height:1.3; }
  .arrow { top:9px; right:7px; }
  .night-inner { grid-template-columns:1fr; gap:12px; }
  .night-art { text-align:left; max-width:175px; }
  .night-art i { left:0; } .night-art b { right:37%; }
}
@media(max-width:390px) {
  nav a { font-size:.84rem; }
  .brand small { display:none; }
  .pal-grid { grid-template-columns:1fr; }
  .footer-inner { align-items:flex-start; flex-direction:column; padding-block:14px; gap:0; }
}
#page-prompt { color:#74445a; font-weight:900; }
.plush-links a { font-weight:900; display:inline-flex; align-items:center; min-height:44px; padding-inline:4px; }
.story-art .cottage,.story-art .story-spark { display:none; }
.story-art[data-scene="2"] .cottage {
  display:block; right:8%; top:35%; width:24%; height:32%; background:#e5a188;
  border-radius:8px; transform:rotate(3deg);
}
.cottage::before { content:""; position:absolute; inset:-60% -15% 60%; background:#ab617b; clip-path:polygon(50% 0,100% 100%,0 100%); }
.cottage::after { content:""; position:absolute; bottom:0; left:38%; width:24%; height:63%; background:#814b68; border-radius:30px 30px 0 0; }
.story-art[data-scene="2"] .story-lala { right:14%; }
.story-art[data-scene="2"] .story-spark { display:block; left:18%; top:13%; color:#855384; font-size:1.5rem; }
@media(max-width:350px) {
  nav { flex-wrap:wrap; justify-content:flex-start; gap:0 13px; }
  nav a { min-height:44px; }
  .activity-grid { grid-template-columns:1fr; }
  .tile { padding:14px 16px 14px 86px; min-height:86px; align-content:center; }
  .tile-art { position:absolute; top:50%; left:15px; margin:0; transform:translateY(-50%); width:50px; }
  .tile .book { transform:translateY(-50%) rotate(-10deg); }
  .tile .peek img { width:62px; }
}
.hero h1 { font-size:clamp(3.25rem,6.15vw,5.5rem); font-weight:900; text-wrap:initial; }
@media(max-width:700px) { .hero h1 { font-size:clamp(3.15rem,11vw,5.2rem); } }

.playroom-section { padding-bottom:clamp(48px,7vw,80px); }
.activities { padding-bottom:20px; }
.tile[aria-current="true"] { border-color:var(--ink); box-shadow:0 3px 0 var(--ink); }
.activity-panel { border-radius:28px; border:1px solid var(--line); padding:clamp(17px,4vw,40px); scroll-margin-top:16px; }
#story { background:#f9ebd9; }
.activity-panel h2 { font-size:clamp(1.75rem,3.6vw,2.85rem); }
.activity-panel .storybook { border-radius:20px; }

.story-controls { justify-content:space-between; align-items:center; }
.page-turn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:62px; padding:6px 12px; border:1.5px solid #cdbbd1;
  border-radius:18px; background:var(--paper); font-weight:900; cursor:pointer;
}
.page-turn .turn-arrow {
  display:grid; place-items:center; width:42px; height:42px;
  background:#f2e6fc; color:var(--ink); border-radius:12px;
  font-size:2.55rem; font-family:system-ui,sans-serif; font-weight:600; line-height:.78;
  padding-bottom:5px;
}
.page-turn.forward { background:var(--coral); color:white; border-color:var(--coral); box-shadow:0 4px 0 #77292c; }
.page-turn.forward:hover { background:#83262a; }
.page-turn.forward .turn-arrow { background:#fff0db; color:#8e2d34; }
.page-turn.previous:hover:not(:disabled) { background:#f6ecff; }
.page-turn:disabled { opacity:.54; cursor:default; }
@media(prefers-reduced-motion:no-preference) {
  .page-turn.hint .turn-arrow { animation:page-nudge .8s ease-in-out .35s 2; }
}
@keyframes page-nudge {
  0%,100% { transform:translateX(0); }
  46% { transform:translateX(4px); }
}
@media(max-width:380px) {
  .page-turn { min-height:55px; padding:5px 7px; gap:5px; font-size:.9rem; }
  .page-turn .turn-arrow { width:30px; height:37px; font-size:2.15rem; }
}