/*
© 2026 Little Learning Pond. All rights reserved.
This site's code, design, text, artwork and audio recordings are copyright protected. Free for personal use at home only. Copying, hosting, republishing, selling or reusing any part without written permission is not allowed. See /terms/ for details. [LLP-2026-POND]
*/
:root{
  --bg:#eef8f3;--surface:#fff;--ink:#1f2d3a;--ink-soft:#4f6672;--line:#cfe5db;--accent:#1c7a63;--hero:#d3efe2;--hero2:#c4e6f2;--focus:#1c7ed6;
  --shadow:0 18px 40px -22px rgba(31,38,90,.4);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0c1d1c;--surface:#14292a;--ink:#e9f5f1;--ink-soft:#9dbbb3;--line:#244240;--accent:#6fe0bd;--hero:#12352f;--hero2:#123246;--focus:#74c0fc;--shadow:0 18px 44px -20px rgba(0,0,0,.6)}
  .tool{background:var(--surface)!important}
  .tool .ico{background:#1d3a38!important}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-size:18px;line-height:1.5}
.wrap{max-width:900px;margin:0 auto;padding:0 16px}
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--hero) 0%,var(--hero2) 100%);padding:36px 0 58px;text-align:center}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34px;background:var(--bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q150 0 300 18 T600 18 T900 18 T1200 18 V34 H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q150 0 300 18 T600 18 T900 18 T1200 18 V34 H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero .wrap{position:relative;z-index:1}
.pad{position:absolute;width:74px;height:26px;border-radius:50%;background:#54b886;opacity:.7;z-index:0;animation:bob 6s ease-in-out infinite}
.pad::before{content:"";position:absolute;left:50%;top:-1px;width:14px;height:12px;background:var(--hero2);clip-path:polygon(0 0,100% 0,50% 100%);transform:translateX(-50%) rotate(-12deg)}
.pad.p1{left:6%;bottom:30px}.pad.p2{right:7%;bottom:44px;width:58px;height:20px;animation-delay:-2s}.pad.p3{left:24%;bottom:14px;width:46px;height:16px;animation-delay:-4s;opacity:.5}
.pad.p4{right:26%;bottom:18px;width:52px;height:18px;animation-delay:-1s;opacity:.55}
.lotus{position:absolute;font-size:1.6rem;z-index:0;animation:bob 5s ease-in-out infinite}
.lotus.l1{left:11%;bottom:46px}.lotus.l2{right:11%;bottom:60px;animation-delay:-2.5s}
.ripple{position:absolute;border:2px solid rgba(255,255,255,.55);border-radius:50%;z-index:0;animation:ripple 5s ease-out infinite;opacity:0}
.ripple.r1{left:40%;bottom:12px;width:60px;height:18px}.ripple.r2{left:62%;bottom:26px;width:60px;height:18px;animation-delay:-2.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ripple{0%{transform:scale(.4);opacity:.8}100%{transform:scale(2.2);opacity:0}}
.frog{display:inline-block;animation:hop 3.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes hop{0%,55%,100%{transform:translateY(0) scale(1,1)}60%{transform:translateY(0) scale(1.1,.9)}75%{transform:translateY(-16px) scale(.95,1.08)}90%{transform:translateY(0) scale(1.08,.92)}}
@media (prefers-reduced-motion:reduce){.pad,.lotus,.ripple,.frog,.nr-frog{animation:none!important}.ripple{display:none}}
.logo{font-size:3.4rem;margin:0}
h1,h2,.tool b{font-family:'Baloo 2',sans-serif}
h1{font-size:clamp(2.2rem,8vw,3.4rem);margin:0;line-height:1.1}
.tag{color:var(--ink-soft);font-weight:700;margin:10px auto 0;max-width:30em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:28px 0}
.tool{display:flex;gap:14px;align-items:flex-start;background:var(--bg);background:var(--surface);color:inherit;text-decoration:none;border:3px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
a.tool:hover,a.tool:focus-visible{transform:translateY(-3px);border-color:var(--c);box-shadow:0 18px 30px -18px var(--c)}
a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tool .ico{flex:none;width:62px;height:62px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--bg);display:grid;place-items:center;font-size:2rem}
.tool .body{display:flex;flex-direction:column;gap:4px}
.tool b{font-size:1.4rem;line-height:1.2}
.tool .body span{color:var(--ink-soft);font-size:.95rem}
.tool em{font-style:normal;font-weight:800;color:var(--c);font-size:.95rem;margin-top:4px}
.tool.soon{border-style:dashed;box-shadow:none;background:transparent}
.note{background:var(--surface);border-radius:24px;border:2px solid var(--line);padding:6px 22px 18px;margin-bottom:28px}
.note h2{margin:14px 0 6px;font-size:1.5rem}
.note ul{padding-left:1.2em;margin:0 0 10px}
.note li{margin:6px 0}
a{color:var(--accent);font-weight:700}
.foot::before{content:'🪷 🐸 🪷';display:block;letter-spacing:.5em;margin-bottom:6px;opacity:.8}
.foot{text-align:center;color:var(--ink-soft);font-size:.9rem;padding:8px 0 32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.page{max-width:680px;margin:0 auto;padding:24px 16px 40px}
.page h1{font-size:2.2rem}
.page h2{margin-top:1.6em}
.home-link{display:inline-block;margin:16px 0 0}
/* back link injected into each tool */
.nook-back{position:fixed;left:10px;bottom:10px;z-index:40;font:800 14px/1 Nunito,system-ui,sans-serif;background:#fff;color:#1f2d3a;border:2px solid #cfe5db;border-radius:99px;padding:9px 14px;text-decoration:none;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.nook-back:hover{background:#e3f6ee}
@media (prefers-color-scheme:dark){.nook-back{background:#1b3836;color:#e9f5f1;border-color:#244240}}
@media print{.nook-back{display:none}}

.rwd{display:inline-block;background:#fff3bf;color:#5c4400;border:2px solid #f1a70a;border-radius:99px;padding:8px 18px;text-decoration:none;font-weight:800}
.rwd:hover{background:#ffe8a3}
@media (prefers-color-scheme:dark){.rwd{background:#3a2f0a;color:#ffe08a;border-color:#8a6a10}}
.tool .earn{color:var(--ink-soft);font-weight:800;font-size:.85rem}
.tool .earn:empty{display:none}

.lead{font-size:1.1rem;color:var(--ink-soft);font-weight:700}
.page ul{padding-left:1.2em}
.nook-notice{margin:28px 16px 70px;text-align:center;font:600 12px/1.4 Nunito,system-ui,sans-serif;color:#4f6672;opacity:.9}
.nook-notice a{color:inherit;text-decoration:underline}
@media (prefers-color-scheme:dark){.nook-notice{color:#9dbbb3}}
@media print{.nook-notice{display:none}}

.hero-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.rwd.alt{background:var(--surface);color:var(--ink);border-color:var(--line)}
.rwd.alt:hover{background:var(--hero)}