/* Hernawan Labs PAUD Playground v3 — CSS scoped to .paud */
.paud,.paud *{box-sizing:border-box}
.paud{--ink:#20324c;--muted:#66809a;--sky:#b4e6fc;--green:#81dbbd;max-width:100%;min-width:0;color:#e9f4ff;padding:18px 0 48px;font-family:inherit}
.paud button{font-family:inherit;touch-action:manipulation;cursor:pointer}
.paud-breadcrumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;color:#7994aa;font-size:.73rem;margin-bottom:15px}
.paud-breadcrumb a{color:#83e0f0;text-decoration:none}.paud-breadcrumb strong{font-weight:650}
.paud-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);min-height:390px;overflow:hidden;border:1px solid #2d6372;border-radius:26px;background:linear-gradient(140deg,#112a40 0%,#0b2540 60%,#1b3851);box-shadow:0 20px 60px rgba(0,0,0,.16)}
.paud-hero-copy{padding:clamp(24px,4vw,50px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.paud-eyebrow{font-size:.67rem;font-weight:800;letter-spacing:.13em;color:#80f1de}
.paud-hero h1{font-size:clamp(2rem,3.7vw,3.1rem);letter-spacing:-.045em;line-height:1.08;margin:15px 0;color:#f3faff}
.paud-hero p{line-height:1.75;font-size:.85rem;color:#adc5d7;margin:0;max-width:510px}
.paud-main-start{margin-top:25px;border:none;border-radius:17px;padding:16px 24px;background:linear-gradient(135deg,#6debc9,#9ce7ff);color:#103145;font-weight:900;font-size:1.01rem;box-shadow:0 8px 25px rgba(104,231,209,.19)}
.paud-main-start:hover{transform:translateY(-1px)}.paud-main-start:focus-visible{outline:4px solid #fff;outline-offset:3px}
.paud-quickfacts{display:flex;gap:13px;flex-wrap:wrap;margin-top:20px;font-size:.7rem;color:#b5d5e4}
.paud-hero-art{position:relative;min-height:300px;overflow:hidden;background:radial-gradient(circle at 50% 70%,rgba(114,236,216,.19),transparent 61%)}
.paud-mascot-big{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);font-size:clamp(7rem,12vw,12rem);filter:drop-shadow(0 14px 18px #06152488)}
.paud-art-sun{position:absolute;right:12%;top:10%;font-size:50px}.paud-art-cloud{position:absolute;left:12%;top:18%;font-size:45px}
.paud-hero-tile{position:absolute;display:grid;place-items:center;width:70px;height:70px;border-radius:20px;color:#173f59;font-size:2.4rem;font-weight:950;box-shadow:0 12px 25px #03132361;transform:rotate(-13deg)}
.paud-hero-tile.a{left:7%;bottom:15%;background:#fff0ae}.paud-hero-tile.b{right:14%;bottom:12%;background:#b5e9ff;transform:rotate(11deg)}.paud-hero-tile.c{right:10%;top:20%;background:#b7f6d4;transform:rotate(15deg)}
.paud-landing-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.paud-landing-info article{padding:20px;border:1px solid #224359;background:#0b1a2a;border-radius:19px;min-width:0}.paud-landing-info article span{font-size:1.7rem}.paud-landing-info h2{font-size:.95rem;margin:8px 0;color:#e6f7ff}.paud-landing-info p{font-size:.74rem;line-height:1.7;color:#93b1c5;margin:0}
.paud-related{font-size:.82rem;margin:22px 0;color:#8fa8bc}.paud-related a{color:#6ee9d5;text-decoration:none;font-weight:750}
.paud-seo{border-top:1px solid #244354;margin-top:24px;padding-top:18px;color:#a5bfd0;max-width:900px}.paud-seo h2{color:#f0f7ff;font-size:1.3rem}.paud-seo p{font-size:.8rem;line-height:1.85}.paud-seo details{padding:14px 0;border-bottom:1px solid #1b3748;font-size:.8rem}.paud-seo summary{cursor:pointer;color:#d7e8f4;font-weight:750}
/* The entire child-mode stays above the site's sidebar/navigation. */
.paud-game[hidden]{display:none!important}
.paud-game{position:fixed;inset:0;z-index:2147482000;display:flex;flex-direction:column;isolation:isolate;min-width:0;width:100%;height:100vh;height:100dvh;overscroll-behavior:contain;overflow:hidden;background:radial-gradient(ellipse at 18% 0%,#ffefd5 0%,transparent 36%),radial-gradient(ellipse at 100% 85%,#cef4ea 0%,transparent 43%),linear-gradient(165deg,#e8f7fd,#fdfbf3 75%);color:#254160;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.paud-top{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:clamp(10px,2vh,19px) clamp(14px,4vw,34px);width:100%;flex-shrink:0}
.paud-round{display:grid;place-items:center;flex-shrink:0;border:2px solid #c5e3ec;background:#fff;color:#23435e;border-radius:18px;min-width:58px;min-height:58px;font-size:1.6rem;box-shadow:0 4px 0 #c5dce4}
.paud-round:active{transform:translateY(2px);box-shadow:0 2px 0 #c5dce4}.paud-round:focus-visible,.paud button:focus-visible{outline:4px solid #3486ce;outline-offset:3px}
.paud-dots{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;flex:1;min-width:0}.paud-dots i{display:block;width:13px;height:13px;border-radius:100%;background:#c9d9e4}.paud-dots i.now{background:#64c5e9;box-shadow:0 0 0 4px #c9effb}.paud-dots i.done{background:#66c7a8}
.paud-play-stage{display:flex;flex:1;min-height:0;overflow-y:auto;align-items:center;justify-content:center;flex-direction:column;gap:clamp(10px,2.2vh,22px);padding:5px 15px 20px;width:100%;max-width:1000px;margin:0 auto;text-align:center}
.paud-helper{font-size:clamp(2.6rem,8vh,4rem);line-height:1;filter:drop-shadow(0 6px 6px #c1d8db);animation:paud-float 2.8s ease-in-out infinite}
.paud-bigvisual{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(8px,1.6vw,16px);min-height:clamp(88px,22vh,170px);max-width:100%;font-size:clamp(5rem,18vw,9rem);font-weight:900;line-height:1.06;letter-spacing:-.06em;color:#264868;overflow-wrap:anywhere}
.paud-letter{display:grid;place-items:center;min-width:clamp(112px,23vw,175px);min-height:clamp(112px,23vw,175px);padding:8px;border-radius:28px;border:4px solid #a1d7e9;background:linear-gradient(160deg,#fff,#dbf3fe);box-shadow:0 9px 0 #add5e5,0 19px 30px #9bcfd055;color:#265879;font-size:clamp(5rem,15vw,8rem);line-height:1}
.paud-letter.small{min-width:90px;min-height:100px;font-size:4.5rem}.paud-word{font-size:clamp(3.9rem,14vw,7rem);letter-spacing:.03em;color:#22567d;font-weight:950;word-break:break-word}.paud-emoji{font-size:clamp(4.5rem,14vw,7rem);line-height:1.1}
.paud-math{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(8px,3vw,25px)}.paud-math>span{font-size:clamp(2.2rem,7vw,4.5rem)}.paud-math .paud-letter{min-width:clamp(85px,18vw,130px);min-height:clamp(90px,18vw,130px);font-size:clamp(3.5rem,11vw,5rem);border-radius:22px}
.paud-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(11px,2vw,22px);width:min(100%,560px);max-width:100%;flex-shrink:0}.paud-choices.single{grid-template-columns:minmax(0,1fr)}.paud-choices.three{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,700px)}
.paud-choice{position:relative;display:grid;place-items:center;gap:3px;min-width:0;min-height:clamp(110px,19vh,166px);padding:10px;border:4px solid #c7e5f0;border-radius:28px;background:#fff;color:#235577;box-shadow:0 9px 0 #bedce7,0 16px 22px #a4c4d038;font-size:clamp(3.8rem,12vw,6.2rem);font-weight:920;line-height:1.05;overflow-wrap:anywhere}.paud-choice.emoji{font-size:clamp(3.8rem,12vw,5.2rem)}.paud-choice:active{transform:translateY(5px);box-shadow:0 4px 0 #bedce7}.paud-choice.correct{border-color:#45bb9b;background:#e4ffef;box-shadow:0 6px 0 #a6e5c5}.paud-choice.hint{border-color:#65cf97;box-shadow:0 0 0 6px #6bd5a844,0 8px 0 #bedce7}.paud-choice.wrong{border-color:#eda3a3;background:#fff2f2}.paud-choice:disabled{cursor:default;opacity:1}
.paud-picture-label{font-size:clamp(1.1rem,4vw,1.5rem);font-weight:850;letter-spacing:.05em}
.paud-tap-objects{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;width:min(100%,480px);margin:auto}.paud-tap-object{position:relative;border:3px solid #bce1ed;border-radius:26px;background:#fff;min-width:0;width:clamp(96px,25vw,130px);flex:0 0 clamp(96px,25vw,130px);aspect-ratio:1 / 1;display:grid;place-items:center;font-size:clamp(2.6rem,8vw,4rem);box-shadow:0 6px 0 #b9d9e3}.paud-tap-object.counted{background:#e2fcec;border-color:#75d2b1;box-shadow:0 3px 0 #9cdbbe}.paud-object-count{position:absolute;right:5px;top:4px;display:grid;place-items:center;width:30px;height:30px;font-size:1rem;border-radius:50%;background:#3fb996;color:#fff;font-weight:900}
.paud-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(100%,640px)}.paud-compare button{border:3px solid #c4e1ed;background:#fff;border-radius:28px;padding:22px 12px;min-height:155px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:clamp(2rem,5vw,3.3rem);box-shadow:0 8px 0 #d0e4e9}.paud-compare button.correct{border-color:#53b891;background:#e3fff0}
.paud-giant-tap{border:4px solid #7dc9c9;border-radius:34px;background:#fff;box-shadow:0 9px 0 #b4dfe4;padding:20px;display:grid;place-items:center;min-width:180px;min-height:130px;color:#205678;font-size:clamp(3.5rem,12vw,6.5rem);font-weight:950}.paud-giant-tap:active{transform:translateY(5px);box-shadow:0 4px 0 #b4dfe4}
.paud-reaction{min-height:42px;display:grid;place-items:center;color:#258467;font-size:clamp(1.25rem,4vw,1.75rem);font-weight:880}.paud-reaction.gentle{color:#946d3c}.paud-play-footer{flex-shrink:0;padding:0 14px max(12px,env(safe-area-inset-bottom));display:flex;justify-content:center}.paud-listen{border:none;border-radius:100px;background:#29668d;color:white;padding:12px 25px;min-height:55px;font-size:1.1rem;font-weight:850;box-shadow:0 6px 0 #1c496a}.paud-listen:active{transform:translateY(3px)}
.paud-done{display:grid;justify-items:center;align-content:center;gap:20px}.paud-done-emoji{font-size:clamp(6rem,18vw,9rem);line-height:1}.paud-done-title{font-size:clamp(2.5rem,10vw,5rem);font-weight:950;color:#227a91}.paud-done-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(90vw,480px)}.paud-done-actions button{border:3px solid #cce4e8;background:#fff;border-radius:22px;padding:15px 8px;font-size:1.16rem;font-weight:900;color:#235473;min-height:90px}.paud-done-actions .next{background:#77dabe;border-color:#69caae;color:#11423c}
.paud-parent-dialog{position:fixed;z-index:2147483000;max-height:min(92dvh,900px);width:min(95vw,560px);max-width:560px;padding:0;border:0;border-radius:24px;background:#fff;color:#263e57;box-shadow:0 25px 90px #16344c77;overflow:auto}.paud-parent-dialog::backdrop{background:#102438b8;backdrop-filter:blur(4px)}.paud-parent-body{padding:24px}.paud-parent-body header{display:flex;justify-content:space-between;align-items:center;gap:12px}.paud-parent-body h2{margin:0;font-size:1.45rem}.paud-parent-body header button{border:0;background:#edf5f8;border-radius:12px;min-width:43px;min-height:43px;font-size:1.1rem}.paud-parent-note{font-size:.8rem;line-height:1.55;color:#667b8d}.paud-parent-title{font-size:.86rem;text-transform:uppercase;letter-spacing:.09em;font-weight:900;margin:20px 0 10px}.paud-unit-list{display:grid;gap:8px}.paud-unit-list button{width:100%;text-align:left;border:1px solid #d4e5ef;background:#f7fbff;padding:12px 16px;border-radius:12px;color:#2e526a;font-weight:800;font-size:.86rem}.paud-unit-list button.current{border-color:#56bfb3;background:#e4f9f3}.paud-unit-list button:disabled{color:#aab7c1;opacity:.75}.paud-voice-label{display:block;font-size:.77rem;color:#667b8d;margin-bottom:6px}.paud-parent-body select{width:100%;border:1px solid #c5dce8;border-radius:12px;background:#fff;min-height:45px;padding:8px;font-size:.87rem}.paud-parent-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.paud-parent-actions button{background:#eaf5ff;border:1px solid #bfddeb;border-radius:12px;padding:12px;color:#235777;font-weight:750;min-height:48px}.paud-danger{background:#fff4f1;border:1px solid #efb4ab;border-radius:12px;padding:12px;color:#a24334;font-weight:800}
@keyframes paud-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:800px){.paud-hero{grid-template-columns:1fr}.paud-hero-art{min-height:240px}.paud-mascot-big{font-size:8rem}.paud-landing-info{grid-template-columns:1fr}.paud-hero-copy{padding:25px}}
@media(max-width:480px){.paud-game{background:radial-gradient(circle at 12% 12%,#ffefda,transparent 40%),linear-gradient(180deg,#e4f6ff,#fffdf4)}.paud-top{gap:8px;padding:10px 13px}.paud-round{min-width:51px;min-height:51px;border-radius:16px;font-size:1.35rem}.paud-dots{gap:5px}.paud-dots i{width:10px;height:10px}.paud-play-stage{gap:clamp(9px,2vh,19px);padding:8px 12px 14px}.paud-bigvisual{min-height:100px}.paud-choices{gap:13px}.paud-choice{min-height:112px;border-radius:22px}.paud-choice.emoji{font-size:3.5rem}.paud-helper{font-size:3rem}.paud-listen{min-height:52px}.paud-tap-object{border-radius:20px}}
@media(max-height:690px){.paud-play-stage{gap:7px;padding-top:4px;padding-bottom:5px}.paud-top{padding-top:7px;padding-bottom:7px}.paud-helper{font-size:2.3rem}.paud-letter{min-width:96px;min-height:96px;font-size:4.9rem}.paud-choices .paud-choice{min-height:100px}.paud-bigvisual{min-height:88px}.paud-play-footer{padding-bottom:8px}.paud-listen{min-height:46px}}
@media(prefers-reduced-motion:reduce){.paud-helper,.paud *{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

.paud-audio-preview{border:1px solid #4e8298;background:#0e3a4c;color:#d7fbff;border-radius:12px;padding:9px 13px;margin-top:12px;font-size:.76rem;font-weight:800}.paud-preview-status{display:block;margin-top:8px;color:#9dbdcc;font-size:.72rem}