:root {
      --ink: #382b58;
      --muted: #6d6285;
      --pink: #ff6ba8;
      --purple: #8f6be8;
      --teal: #37bdb6;
      --gold: #ffbd59;
      --paper: #fffdfd;
      --line: rgba(90,60,130,.12);
      --shadow: 0 16px 45px rgba(88,49,132,.11);
      --bg: #f9f3ff;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: ui-rounded, "Trebuchet MS", "Segoe UI", Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 4% 7%, #ffe1ed 0, transparent 27%),
        radial-gradient(circle at 93% 9%, #d9f8f0 0, transparent 28%),
        radial-gradient(circle at 60% 72%, #fff2d4 0, transparent 32%),
        var(--bg);
      min-height: 100vh;
      transition: background-color .35s, color .35s;
    }
    body.night {
      --ink: #f9f1ff;
      --muted: #d6c7ea;
      --paper: #30254b;
      --line: rgba(255,255,255,.13);
      --shadow: 0 16px 45px rgba(13,8,30,.26);
      --bg: #211936;
      background: radial-gradient(circle at 5% 5%, #492a66 0, transparent 30%),
                  radial-gradient(circle at 92% 65%, #244d57 0, transparent 32%), var(--bg);
    }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { font: inherit; }
    button:focus-visible, a:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
    .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
    header { padding: 24px 0; }
    .topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
    .logo { text-decoration: none; color: var(--ink); font-weight: 900; font-size: 1.27rem; letter-spacing: -.5px; }
    .logo span { color: var(--pink); }
    .header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; align-items: center; }
    .navlink { text-decoration: none; color: var(--muted); font-weight: 700; font-size: .95rem; }
    .pill, .small-button {
      border: 0; background: var(--paper); color: var(--ink); border-radius: 999px;
      padding: 11px 17px; cursor: pointer; box-shadow: var(--shadow); font-weight: 800;
      transition: transform .2s;
    }
    .pill:hover, .small-button:hover, .primary:hover { transform: translateY(-3px); }
    .home-link { text-decoration: none; }
    .pet-main { padding-top: 28px; min-height: 75vh; }
    .hero { min-height: 520px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 28px; padding: 55px 0 75px; }
    .eyebrow { display: inline-flex; gap: 9px; align-items: center; background: #fff1b9; color: #7b4c14; border-radius: 100px; padding: 9px 17px; font-size: .85rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
    h1 { font-size: clamp(3.7rem, 8vw, 6.5rem); line-height: .98; letter-spacing: -4px; margin: 28px 0 22px; }
    .gradient { background: linear-gradient(115deg,var(--pink),var(--purple) 52%,var(--teal)); background-clip: text; -webkit-background-clip: text; color: transparent; }
    .intro { color: var(--muted); font-size: 1.22rem; line-height: 1.7; max-width: 480px; margin: 0 0 30px; }
    .primary { border: none; border-radius: 18px; padding: 17px 25px; font-weight: 900; background: linear-gradient(110deg,var(--pink),var(--purple)); color: white; box-shadow: 0 10px 24px #ca81cd55; cursor: pointer; transition: transform .2s; }
    .hero-art { position: relative; width: min(100%, 445px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
    .hero-circle { width: 77%; aspect-ratio: 1; border-radius: 46% 54% 46% 54%; background: linear-gradient(145deg,#ffe3aa,#ffb9cf 46%,#b5b4ff); box-shadow: 18px 24px 0 rgba(196,156,255,.18); display: grid; place-items: center; animation: bob 5s ease-in-out infinite; }
    .hero-circle span { font-size: clamp(7rem,19vw,12rem); filter: drop-shadow(0 15px 7px #8c4d8222); }
    .sticker { position: absolute; background: var(--paper); border: 3px solid #fff; box-shadow: var(--shadow); border-radius: 22px; padding: 13px 18px; font-size: clamp(1.6rem,3vw,2.3rem); animation: bob 4s ease-in-out infinite; }
    .sticker.one { top: 8%; left: 4%; transform: rotate(-12deg); }
    .sticker.two { right: 2%; top: 17%; animation-delay: -1s; }
    .sticker.three { bottom: 11%; left: 4%; animation-delay: -2s; }
    .sticker.four { bottom: 6%; right: 7%; animation-delay: -1.5s; }
    @keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -13px; } }
    .section-title { font-size: clamp(1.9rem,4vw,2.7rem); letter-spacing: -1.3px; margin: 0 0 8px; }
    .section-subtitle { color: var(--muted); margin: 0 0 28px; line-height: 1.6; }
    .cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
    .card { background: var(--paper); padding: 30px; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
    .card-icon { width: 67px; height: 67px; display: grid; place-items: center; border-radius: 19px; font-size: 2rem; margin-bottom: 20px; }
    .card:nth-child(1) .card-icon { background: #ffe2ed; }
    .card:nth-child(2) .card-icon { background: #e2f9f4; }
    .card:nth-child(3) .card-icon { background: #eee4ff; }
    .card h3 { margin: 0 0 10px; font-size: 1.3rem; }
    .card p { margin: 0; color: var(--muted); line-height: 1.65; }
    section { padding: 30px 0 65px; }
    .playground { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .activity { padding: 32px; border-radius: 29px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); min-height: 280px; }
    .activity h3 { font-size: 1.45rem; margin: 0 0 12px; }
    .activity p { color: var(--muted); line-height: 1.6; }
    .message { min-height: 69px; font-weight: 800; font-size: 1.15rem; color: var(--ink) !important; }
    .colour-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 25px; }
    .swatch { width: 46px; height: 46px; border: 4px solid var(--paper); outline: 2px solid var(--line); border-radius: 50%; cursor: pointer; transition: transform .2s; }
    .swatch:hover { transform: scale(1.13); }
    .swatch[aria-pressed="true"] { outline: 3px solid var(--ink); }
    .preview { margin-top: 23px; padding: 16px; background: var(--chosen, #ffb4d4); border-radius: 16px; text-align: center; color: #36213d; font-weight: 900; transition: background .25s; }
    .closing { text-align: center; padding: 40px 24px 65px; }
    .closing .star { font-size: 2.4rem; }
    .closing p { color: var(--muted); line-height: 1.6; }
    footer { border-top: 1px solid var(--line); padding: 25px 0 35px; color: var(--muted); font-size: .9rem; text-align: center; }
    #confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 10; }
    .confetti { position: absolute; top: -30px; width: 12px; height: 18px; opacity: 0; animation: fall var(--duration) linear forwards; left: var(--left); background: var(--colour); border-radius: 3px; transform: rotate(var(--rotation)); }
    @keyframes fall { 5% { opacity: 1; } 100% { opacity: 0; top: 110vh; transform: translateX(var(--drift)) rotate(700deg); } }

    /* VIRTUAL PET — everything below is part of this single HTML file */
    .pet-shell { background: var(--paper); border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow); padding: clamp(18px, 4vw, 40px); }
    .pet-topline { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
    .pet-chip { display:inline-flex; align-items:center; gap:7px; font-weight:900; padding:9px 15px; border-radius:100px; background:#f1e7ff; color:#583b8e; }
    .pet-layout { display:grid; grid-template-columns: minmax(0,1.12fr) minmax(285px,.88fr); gap:27px; }
    .pet-scene { position:relative; min-height:345px; overflow:hidden; border-radius:27px; background:linear-gradient(180deg,#d9f5ff 0%,#fce8ff 62%,#d8f5d1 63%,#c8edc6 100%); display:flex; align-items:center; justify-content:center; isolation:isolate; }
    .pet-scene:before { content:'☁️'; position:absolute; top:22px; left:10%; font-size:2.8rem; opacity:.8; }
    .pet-scene:after { content:'🌷 🌼 🌷'; position:absolute; bottom:12px; left:0; right:0; text-align:center; letter-spacing:24px; font-size:1.35rem; opacity:.9; white-space:nowrap; }
    .pet-sun { position:absolute; top:24px; right:32px; font-size:2.4rem; }
    .pet-friend { font-size:clamp(8rem,18vw,12rem); line-height:1; z-index:1; transform-origin:50% 85%; animation:petBreathe 3s ease-in-out infinite; filter:drop-shadow(0 15px 5px #795d8c33); user-select:none; }
    .pet-friend.bounce { animation:petJump .7s ease-in-out 2; }
    .pet-friend.nap { animation:petBreathe 4s ease-in-out infinite; filter:grayscale(.12) drop-shadow(0 15px 5px #795d8c33); }
    .pet-float { position:absolute; z-index:3; inset:45% 0 auto; text-align:center; font-size:2.5rem; font-weight:900; pointer-events:none; animation:petFloat 1.3s ease-out forwards; }
    @keyframes petBreathe { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-12px) rotate(2deg); } }
    @keyframes petJump { 0%,100% { transform:translateY(0) rotate(0); } 45% { transform:translateY(-60px) rotate(10deg); } }
    @keyframes petFloat { from { opacity:1; transform:translateY(0) scale(.75); } to { opacity:0; transform:translateY(-105px) scale(1.4); } }
    .pet-panel h3 { font-size:1.45rem; margin:0 0 8px; }
    .pet-caption { color:var(--muted); line-height:1.55; margin:0 0 20px; }
    .pet-field { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:16px; }
    .pet-field input, .pet-field select { min-width:0; flex:1; border:2px solid var(--line); background:var(--paper); color:var(--ink); padding:12px 13px; border-radius:14px; font:inherit; }
    .pet-field input:focus-visible, .pet-field select:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
    .pet-control { border:0; border-radius:14px; padding:12px 17px; cursor:pointer; font-weight:900; background:#efe2ff; color:#513781; }
    .pet-stats { display:grid; gap:14px; margin:18px 0 22px; }
    .pet-stat-label { display:flex; justify-content:space-between; gap:12px; font-weight:800; margin-bottom:7px; font-size:.95rem; }
    .pet-track { height:15px; overflow:hidden; border-radius:100px; background:var(--line); }
    .pet-fill { height:100%; width:70%; border-radius:100px; transition:width .45s ease; }
    .pet-fill.food { background:linear-gradient(90deg,#ffb94f,#ff7a96); }
    .pet-fill.fun { background:linear-gradient(90deg,#db8dff,#8f6be8); }
    .pet-fill.rest { background:linear-gradient(90deg,#5ccecf,#53aaef); }
    .pet-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
    .pet-action { border:0; background:#f6edff; color:#4d3977; border-radius:17px; padding:14px 7px; font-weight:900; cursor:pointer; display:grid; place-items:center; gap:6px; transition:transform .15s,background .15s; }
    .pet-action span { font-size:1.9rem; }
    .pet-action:hover:not(:disabled) { background:#e6d5ff; transform:translateY(-3px); }
    .pet-action:disabled { cursor:not-allowed; opacity:.47; }
    .pet-status { min-height:52px; margin:20px 0 0; background:#fff3c9; color:#634918; border-radius:15px; padding:14px 17px; line-height:1.45; font-weight:800; }
    .pet-note { margin:14px 0 0; color:var(--muted); font-size:.82rem; line-height:1.5; }
    body.night .pet-chip,body.night .pet-control,body.night .pet-action { background:#4c386b; color:#fff0ff; }
    body.night .pet-status { background:#594625; color:#fff0cb; }

    .pet-collection { margin-bottom:22px; padding:18px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(110deg,#fff4fc,#f3f0ff); }
    .pet-collection h3,.garden h3 { margin:0 0 10px; font-size:1.15rem; }
    .pet-collection .pet-field { margin-bottom:8px; }
    .pet-collection button { white-space:nowrap; }
    .pet-collection small { color:#665b81; }
    .adoption-form { margin-top:14px; }
    .adoption-form label { display:block; margin-bottom:7px; color:var(--ink); }
    .adoption-form .pet-field { align-items:center; }
    .adoption-form input { min-width:min(100%,180px); }
    .pet-type-label { margin:0 0 14px; }
    .pet-type-note { color:var(--muted); font-size:.9rem; }
    .age-badge { display:inline-block; margin:0 0 12px; border-radius:50px; padding:7px 12px; background:#fff0cd; color:#705217; font-weight:800; }
    #petMood { background:#e9f8df; color:#436d35; }
    .pet-care-hint { margin:13px 0 0; color:var(--muted); line-height:1.5; font-size:.9rem; }
    .garden { margin-top:24px; padding:22px; background:linear-gradient(160deg,#eafbe8,#fff0fa); border-radius:22px; }
    .garden-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
    .flower-title { margin-top: 26px; }
    .flower-card { text-align:center; background:#ffffffc9; border-radius:16px; padding:16px 10px; border:1px solid #e8e1ed; }
    .flower-card .flower { font-size:3.25rem; display:block; margin-bottom:6px; }
    .flower-card strong { display:block; overflow-wrap:anywhere; }
    .flower-card small { display:block; margin-top:5px; color:#665b81; }
    .flower-card button { margin-top:10px; border:0; border-radius:15px; background:#e4d6ff; color:#4b326c; padding:7px 12px; cursor:pointer; font-weight:700; }
    .flower-card .flower-send { margin-left:6px; background:#ffdfec; color:#813b61; }
    .pet-friend.flower { animation:petBreathe 5s ease-in-out infinite; }
    body.night .pet-collection,body.night .garden {background:#3e305b; color:#fff;}
    body.night .pet-collection small {color:#ddd1f2;}
    body.night .flower-card {background:#52416e; border-color:#6b5685;}
    body.night .flower-card small {color:#e5d7f4;}
    body.night #petMood {background:#3d5838;color:#e3ffd9;}
    body.night .flower-card .flower-send {background:#70445b;color:#ffe5f1;}
    .pet-collection small { line-height:1.6; display:block; }
    .pet-status.error { background:#ffe0e4; color:#8c2441; }
    .pet-control:disabled { opacity:.48; cursor:not-allowed; }

    /* Shared living meadow: all active pets wander without server-side movement updates. */
    .garden-intro {color:#64577b;line-height:1.6;margin:0 0 16px;}
    .garden-meadow {height:390px;position:relative;overflow:hidden;isolation:isolate;border-radius:24px;border:3px solid #c4eaca;background:linear-gradient(#c8efff 0%,#eefaff 46%,#d8f6e0 47%,#b8e5a6 100%);}
    .meadow-cloud {position:absolute;top:17px;left:19%;font-size:2.5rem;opacity:.83;}
    .meadow-sun {position:absolute;top:18px;right:24px;font-size:2.5rem;}
    .meadow-ground {position:absolute;left:0;right:0;bottom:0;height:34%;background:repeating-linear-gradient(110deg,transparent 0 42px,#a9dda35c 43px 45px);pointer-events:none;}
    #meadowResidents {position:absolute;inset:0;}
    .meadow-resident {position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:0;padding:3px;cursor:pointer;color:#483566;min-width:72px;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 2px #597a5544);}
    .meadow-resident:focus-visible {outline:3px solid #5f55ba;border-radius:12px;}
    .meadow-resident .resident-emoji {display:block;font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.15;transform-origin:50% 95%;animation:meadow-hop var(--hop,1.9s) ease-in-out infinite;}
    .meadow-resident .resident-name {max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#fffdfde8;border:1px solid #ffffffb8;border-radius:100px;padding:2px 8px;font-size:.75rem;font-weight:900;}
    .meadow-resident.flower-gift .resident-emoji {animation:meadow-grow 1s both,meadow-sway 3s ease-in-out 1s infinite;}
    .meadow-resident.flower-gift .resident-name {background:#fff8eccc;}
    .meadow-resident.garden-pet {animation:none;transition:left 3.6s linear,top 3.6s linear,filter .2s;}
    .meadow-resident.garden-pet .resident-emoji {animation-delay:var(--delay,0s);}
    @keyframes meadow-roam {0% {translate:-16px 0} 25% {translate:18px -14px} 50% {translate:-6px 10px} 75% {translate:23px -6px} 100% {translate:-18px 4px}}
    @keyframes meadow-hop {0%,100% {transform:translateY(0) rotate(-5deg)} 50% {transform:translateY(-9px) rotate(5deg)}}
    @keyframes meadow-grow {from {transform:scale(.15);opacity:0}to {transform:scale(1);opacity:1}}
    @keyframes meadow-sway {0%,100% {transform:rotate(-6deg)}50% {transform:rotate(6deg)}}
    .meadow-count {text-align:center;color:#5f4d77;font-weight:800;margin:10px 0 16px;}
    .garden-more {display:block;margin:18px auto 0;}
    .garden-more[hidden] {display:none;}
    body.night .garden-intro,body.night .meadow-count {color:#e5d8f5;}
    .pet-stats[hidden] {display:none!important;}
    .meadow-resident.garden-pet.being-lifted {transition:none!important;}
    .meadow-resident.garden-pet.is-selected {z-index:95!important;}
    @media(prefers-reduced-motion:reduce) {
      .meadow-resident.garden-pet {transition:none!important;}
    }
    /* Storybook scenery: decorative elements sit behind interactive pets. */
    .garden-meadow {transition:background 1.8s ease,box-shadow 1.8s ease;}
    .meadow-tree,.meadow-bush,.meadow-pond,.meadow-stars {
      position:absolute;pointer-events:none;user-select:none;z-index:0;
    }
    .meadow-tree {font-size:clamp(3.8rem,10vw,7.2rem);line-height:1;
      filter:drop-shadow(0 6px 5px #477a3c3f);}
    .tree-left {left:1.5%;top:39%;}
    .tree-right {right:1%;top:37%;font-size:clamp(3.6rem,9vw,6.7rem);}
    .meadow-bush {bottom:7%;font-size:clamp(1.6rem,3vw,2.7rem);white-space:nowrap;}
    .bush-left {left:3%;}
    .bush-right {right:3%;}
    .meadow-pond {
      left:36%;bottom:11%;width:26%;height:14%;
      display:flex;align-items:center;justify-content:center;
      border-radius:50%;
      background:radial-gradient(ellipse,#b8f5ff,#8cdce5 65%,#b6e5d0 72%);
      box-shadow:inset 0 4px 6px #74bad5aa,0 4px 1px #78bd93aa;
      font-size:1.35rem;
    }
    .meadow-stars {display:none;left:7%;top:6%;right:5%;
      color:#fff9c3;letter-spacing:clamp(9px,3vw,32px);
      font-size:1.5rem;text-shadow:0 0 9px #fff8bd;}
    #meadowResidents {z-index:2;}
    .meadow-sun,.meadow-cloud {z-index:1;}
    body.night .garden-meadow {
      background:linear-gradient(180deg,#282f73 0%,#5c5291 47%,#426e73 48%,#3f7459 100%);
      border-color:#b1a0e7;
      box-shadow:inset 0 0 60px #1c2356a6,0 8px 25px #1717333d;
    }
    body.night .meadow-stars {display:block;}
    body.night .meadow-tree {filter:brightness(.66) drop-shadow(0 8px 6px #172b4280);}
    body.night .meadow-bush {filter:brightness(.64);}
    body.night .meadow-pond {background:radial-gradient(ellipse,#a1d9e8,#467b9c 68%,#508578 72%);}
    body.night .meadow-sun {filter:drop-shadow(0 0 15px #f4ecb9);}
    .time-chip {margin-left:auto;}
    @media(max-width:550px) {
      .tree-left {left:-2%;top:41%;}
      .tree-right {right:-2%;top:40%;}
      .meadow-bush {font-size:1.5rem;}
    }
    /* Distinct care animations in both the garden and pet detail window. */
    .pet-scene-effect {
      position:absolute;z-index:4;top:18%;left:50%;transform:translateX(-50%);
      font-size:clamp(1.8rem,4vw,2.6rem);white-space:nowrap;
      pointer-events:none;filter:drop-shadow(0 3px 5px #7c4f9945);
    }
    .pet-scene[data-state="sleeping"] {
      background:linear-gradient(180deg,#b7b0ec 0%,#e2d9ff 58%,#d8eccf 59%,#9fcfa7 100%);
    }
    .pet-scene[data-state="sleeping"] .pet-friend {
      animation:pet-snooze 3.5s ease-in-out infinite!important;
      filter:drop-shadow(0 9px 4px #654d8740);
    }
    .pet-scene[data-state="sleeping"] .pet-scene-effect {
      animation:pet-zzz 2.8s ease-in-out infinite;
    }
    .pet-scene[data-state="feed"] .pet-friend {animation:pet-munch .38s ease-in-out 6!important;}
    .pet-scene[data-state="play"] .pet-friend {animation:pet-frolic .58s ease-in-out 4!important;}
    .pet-scene[data-state="pet"] .pet-friend {animation:pet-cuddle .6s ease-in-out 4!important;}
    .pet-scene[data-state="wake"] .pet-friend {animation:pet-stretch 1.1s ease-in-out 2!important;}
    .pet-scene[data-state="feed"] .pet-scene-effect,
    .pet-scene[data-state="play"] .pet-scene-effect,
    .pet-scene[data-state="pet"] .pet-scene-effect,
    .pet-scene[data-state="wake"] .pet-scene-effect {
      animation:care-float 1.1s ease-in-out infinite;
    }
    .meadow-resident .resident-effect {
      position:absolute;z-index:4;left:57%;top:-24px;white-space:nowrap;
      font-size:1.2rem;line-height:1;pointer-events:none;
      filter:drop-shadow(0 2px 3px #786b8550);
    }
    .meadow-resident[data-state="idle"] .resident-effect,
    .meadow-resident[data-state="flower"] .resident-effect {display:none;}
    .meadow-resident[data-state="sleeping"] .resident-emoji {
      animation:meadow-snooze 3s ease-in-out infinite!important;
      filter:grayscale(.18);
    }
    .meadow-resident[data-state="sleeping"] .resident-effect {animation:pet-zzz 2.8s ease-in-out infinite;}
    .meadow-resident[data-state="feed"] .resident-emoji {animation:pet-munch .38s ease-in-out 6!important;}
    .meadow-resident[data-state="play"] .resident-emoji {animation:pet-frolic .58s ease-in-out 4!important;}
    .meadow-resident[data-state="pet"] .resident-emoji {animation:pet-cuddle .6s ease-in-out 4!important;}
    .meadow-resident[data-state="wake"] .resident-emoji {animation:pet-stretch 1.1s ease-in-out 2!important;}
    .meadow-resident[data-state="feed"] .resident-effect,
    .meadow-resident[data-state="play"] .resident-effect,
    .meadow-resident[data-state="pet"] .resident-effect,
    .meadow-resident[data-state="wake"] .resident-effect {animation:care-float 1.1s ease-in-out infinite;}
    @keyframes pet-snooze {
      0%,100%{transform:translateY(27px) rotate(-19deg) scale(.91)}
      50%{transform:translateY(30px) rotate(-21deg) scale(.95)}
    }
    @keyframes meadow-snooze {
      0%,100%{transform:translateY(6px) rotate(-17deg) scale(.88)}
      50%{transform:translateY(8px) rotate(-19deg) scale(.92)}
    }
    @keyframes pet-zzz {
      0%,100%{opacity:.35;transform:translate(-50%,8px) scale(.88)}
      50%{opacity:1;transform:translate(-50%,-13px) scale(1.14)}
    }
    @keyframes pet-munch {
      0%,100%{transform:translateY(0) scale(1)}
      50%{transform:translateY(5px) scale(1.12,.89)}
    }
    @keyframes pet-frolic {
      0%,100%{transform:translateY(0) rotate(-6deg)}
      45%{transform:translateY(-28px) rotate(15deg) scale(1.12)}
      75%{transform:translateY(-8px) rotate(-12deg)}
    }
    @keyframes pet-cuddle {
      0%,100%{transform:rotate(-5deg) scale(1)}
      50%{transform:rotate(11deg) scale(1.18)}
    }
    @keyframes pet-stretch {
      0%{transform:translateY(13px) rotate(-13deg) scale(.9)}
      60%{transform:translateY(-16px) rotate(8deg) scale(1.15)}
      100%{transform:translateY(0) scale(1)}
    }
    @keyframes care-float {
      0%,100%{opacity:.55;transform:translate(-50%,5px) scale(.85)}
      50%{opacity:1;transform:translate(-50%,-13px) scale(1.14)}
    }
    @media(prefers-reduced-motion:reduce) {
      .pet-scene[data-state] .pet-friend,
      .meadow-resident[data-state] .resident-emoji,
      .pet-scene-effect,.resident-effect{animation:none!important;}
    }
    /* Magical garden interaction: accessible tap targets, movable pets and hearts. */
    .garden { margin:0 0 23px; padding:clamp(16px,3vw,27px); border:2px solid #cae9d2; box-shadow:0 11px 28px #81b58e20; }
    .garden h3 {font-size:clamp(1.35rem,3vw,1.75rem);margin:0 0 9px;}
    .garden-meadow {height:clamp(380px,47vw,500px);border:4px solid #fff;border-radius:25px;box-shadow:inset 0 -15px 25px #80ba9432,0 8px 25px #75b27d25;}
    .garden-help {display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:13px auto 4px;}
    .garden-help span{padding:7px 11px;border-radius:50px;background:#fff9fd;color:#68458b;border:1px solid #efddf6;font-size:.82rem;font-weight:900;}
    .meadow-resident.garden-pet {
      touch-action:none;
      cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ctext x='2' y='31' font-size='29'%3E%F0%9F%96%90%EF%B8%8F%3C/text%3E%3Ctext x='27' y='13' font-size='12'%3E%E2%9C%A8%3C/text%3E%3C/svg%3E") 16 13,grab;
      min-width:60px;min-height:61px;
      transition:filter .2s;
    }
    .meadow-resident.garden-pet:hover {filter:drop-shadow(0 4px 7px #e77eb87a);}
    .meadow-resident.is-selected .resident-name {background:#ffe9f6;border:2px solid #f5a5cb;color:#713c77;box-shadow:0 4px 12px #f5a5cb55;}
    .meadow-resident.is-selected .resident-emoji {filter:drop-shadow(0 3px 3px #f7a8ca88);}
    .meadow-resident.garden-pet:active {cursor:grabbing;}
    .meadow-resident.garden-pet.being-lifted {opacity:.25;animation-play-state:paused;}
    .meadow-resident.is-delighted .resident-emoji {animation:happy-wiggle .55s ease-in-out 1!important;}
    .garden-hearts {position:absolute;z-index:5;top:-25px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:1.1rem;pointer-events:none;animation:hearts-up 1s ease-out forwards;}
    .floating-pet {position:fixed;z-index:1000;display:grid;place-items:center;pointer-events:none;user-select:none;font-size:clamp(2.8rem,5vw,4rem);filter:drop-shadow(0 12px 10px #805a904f);will-change:transform;}
    .pet-panel {scroll-margin-top:18px;border-radius:22px;}
    .pet-panel:focus {outline:none;}
    .pet-stroke-action {background:linear-gradient(120deg,#ffe2ee,#e7e1ff);}
    .pet-actions {grid-template-columns:repeat(4,minmax(0,1fr));}
    .flower-gallery {margin-top:26px;padding:22px;border-radius:24px;background:linear-gradient(140deg,#fff7fc,#f3efff);}
    @keyframes happy-wiggle {
      0%,100%{transform:translateY(0) rotate(0) scale(1)}
      25%{transform:translateY(-13px) rotate(-16deg) scale(1.18)}
      50%{transform:translateY(-20px) rotate(12deg) scale(1.25)}
      75%{transform:translateY(-10px) rotate(-8deg) scale(1.14)}
    }
    @keyframes hearts-up {
      0%{opacity:0;transform:translate(-50%,8px) scale(.6)}
      30%{opacity:1}
      100%{opacity:0;transform:translate(-50%,-53px) scale(1.15)}
    }
    @media(max-width:620px) {
      .pet-actions {grid-template-columns:repeat(2,minmax(0,1fr));}
      .garden-meadow {height:440px;}
      .meadow-resident.garden-pet{min-height:54px;}
      .garden-help span{font-size:.75rem;}
    }
    @media(prefers-reduced-motion:reduce) {
      .meadow-resident.is-delighted .resident-emoji,.garden-hearts {animation:none!important;}
      .garden-hearts{opacity:1;}
    }
    @media(max-width:600px) {.garden-meadow {height:460px}.meadow-resident {min-width:58px}.meadow-resident .resident-emoji {font-size:1.9rem}.meadow-resident .resident-name {font-size:.68rem;max-width:75px;padding:2px 5px}}
    @media(prefers-reduced-motion:reduce) {.meadow-resident,.meadow-resident .resident-emoji {animation:none!important;}}
    @media(max-width:760px) { .pet-layout { grid-template-columns:1fr; } .pet-scene { min-height:285px; } .pet-friend { font-size:9rem; } }
    @media(max-width:380px) { .pet-action { font-size:.85rem; } .pet-action span {font-size:1.6rem;} }
    @media (max-width: 760px) {
      .hero { grid-template-columns: 1fr; text-align: center; padding: 38px 0 30px; min-height: auto; }
      .hero-art { max-width: 360px; grid-row: 1; }
      h1 { letter-spacing: -2.5px; margin-top: 18px; }
      .intro { margin-left: auto; margin-right: auto; }
      .cards { grid-template-columns: 1fr; }
      .playground { grid-template-columns: 1fr; }
      .navlink { display: none; }
      .cupboard-link { display: inline-flex; }
      .section-title, .section-subtitle { text-align: center; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }