:root{font-family:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#45433f;background:#faf6ed;font-synthesis:none;--ink:#45433f;--coral:#ef867d;--yellow:#f3ca60;--blue:#7dbbd3;--green:#91c6a6;--purple:#b29bd4}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}body{overflow:hidden;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #547675;outline-offset:5px}button:focus:not(:focus-visible){outline:none}[hidden]{display:none!important}#app{height:100%;height:100dvh;isolation:isolate;position:relative;background:radial-gradient(ellipse at 10% 15%,#f2e8d7 0,transparent 40%),radial-gradient(ellipse at 90% 85%,#ecede2 0,transparent 45%),#faf6ed}#app:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#d5cbb6 1px,transparent 1px);background-size:24px 24px;opacity:.22;pointer-events:none;z-index:-1}.parent{position:absolute;z-index:4;top:max(16px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:52px;height:52px;border-radius:19px;background:#fff9;color:#78766d;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}.parent svg{width:25px;height:25px}.hold-progress{position:absolute;bottom:0;left:0;height:5px;background:#6a9d92;width:0}.parent.holding .hold-progress{width:100%;transition:width 2s linear}.home{height:100%;display:grid;place-items:center;padding:72px 24px max(20px,env(safe-area-inset-bottom));overflow:auto;text-align:center}.home-content{width:min(100%,430px)}.brand{font-size:12px;font-weight:800;letter-spacing:.28em;color:#858373;margin:0 0 16px}h1{font-size:clamp(36px,9vw,60px);letter-spacing:.07em;line-height:1.5;margin:0;font-weight:900}h1 span{color:#ce7166}.toy-preview{display:flex;align-items:center;justify-content:center;gap:16px;padding:34px 0 30px}.mini{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:36px;color:#fff9;box-shadow:inset 0 4px 1px #fff5,0 6px 0 #0001,0 10px 16px #64553c12}.mini:first-child{transform:rotate(-12deg) translateY(8px)}.mini:nth-child(2){transform:translateY(-7px)}.mini:last-child{transform:rotate(12deg) translateY(8px)}.coral{background:var(--coral)}.yellow{background:var(--yellow)}.blue{background:var(--blue)}.tagline{font-size:14px;letter-spacing:.08em;color:#858071;margin:10px 0 30px}.primary,.secondary{min-height:52px;padding:14px 24px;border-radius:18px;font-weight:700;font-size:16px}.primary{background:#637e6d;color:white;box-shadow:0 4px 0 #4f6659}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #4f6659}.secondary{background:#ede8dd}.start{font-size:22px;width:230px;min-height:66px;letter-spacing:.15em}.start span{font-size:16px;margin-left:12px}.parent-hint{font-size:11px;color:#8b8579;margin:27px 0 20px}.kids-link{display:inline-block;color:#716e61;font-size:12px;font-weight:700;letter-spacing:.13em;text-underline-offset:5px;padding:12px}.kids-link span{margin-left:4px}.play{height:100%;padding:max(80px,calc(env(safe-area-inset-top) + 66px)) max(20px,env(safe-area-inset-right)) max(30px,calc(env(safe-area-inset-bottom) + 16px)) max(20px,env(safe-area-inset-left));touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.pads{display:grid;width:100%;height:100%;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(var(--rows,3),minmax(0,1fr));align-items:center;justify-items:center}.pad{width:var(--pad-size,130px);height:var(--pad-size,130px);border-radius:50%;background:var(--color);position:relative;display:grid;place-items:center;touch-action:none;box-shadow:inset 0 5px 2px #ffffff5c,inset 0 -6px 0 #0000000b,0 9px 0 var(--shadow),0 15px 24px #78634a15;transition:transform .1s,box-shadow .1s;isolation:isolate}.pad:before{content:"";position:absolute;inset:12%;border:2px solid #fff3;border-radius:50%}.pad .symbol{width:43%;height:43%;color:#fff9;filter:drop-shadow(0 2px 0 #00000008);pointer-events:none}.pad.popped{animation:pop .28s ease-out}.pad.pressed{transform:translateY(6px) scale(.96);box-shadow:inset 0 3px 2px #ffffff4a,0 3px 0 var(--shadow),0 6px 12px #78634a15}.audio-status{position:absolute;bottom:max(6px,env(safe-area-inset-bottom));left:16px;right:16px;text-align:center;font-size:12px;margin:0;color:#706b60;pointer-events:none}.settings{height:100%;overflow:auto;padding:max(30px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:#faf6ed}.settings-card{max-width:480px;margin:auto}.settings-card>.brand{margin-top:8px}.settings h2{font-size:25px;margin:0 0 32px;letter-spacing:.05em}.settings fieldset{border:0;padding:0;margin:0 0 28px}.settings legend{font-size:15px;font-weight:700;margin-bottom:12px}.choices{display:flex;gap:10px}.choices button{flex:1;padding:14px;border-radius:14px;background:#eee8dc;border:2px solid transparent;font-weight:700}.choices button[aria-pressed=true]{background:#e2ede5;border-color:#637e6d;color:#405e4c}.field-hint{font-size:12px;line-height:1.8;color:#797467;margin:0 0 12px}.sound-row{display:grid;grid-template-columns:30px minmax(0,1fr) 52px;gap:12px;align-items:center;margin:12px 0}.swatch{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:15px}.sound-row select{width:100%;min-height:48px;border:1px solid #dcd5c6;border-radius:12px;background:#fffaf1;color:#45433f;padding:8px;font-size:16px}.preview-sound{height:48px;border-radius:12px;background:#ece7dc;font-size:17px}.volume-row{display:flex;align-items:center;gap:16px;min-height:44px}.volume-row input{flex:1;min-width:0;accent-color:#637e6d}.volume-row output{width:44px;font-size:13px;text-align:right}.mute{display:flex;gap:10px;align-items:center;margin:10px 0 14px;font-size:14px;min-height:32px}.mute input{width:20px;height:20px;accent-color:#637e6d}.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.settings-card>.kids-link{display:block;text-align:center}#app.in-settings .parent{display:none}@keyframes pop{0%{scale:.96}55%{scale:1.045}100%{scale:1}}@media(orientation:landscape) and (max-height:520px){.home{padding-top:24px;padding-bottom:16px}.home-content{display:grid;grid-template-columns:1fr 1fr;max-width:660px;width:100%;column-gap:32px;align-items:center}.home .brand{grid-column:1;margin-bottom:0}.home h1{grid-column:1;font-size:36px}.toy-preview{grid-column:1;grid-row:3/6;padding:16px 0}.mini{width:62px;height:62px;font-size:28px}.tagline{grid-column:2;grid-row:1/3;margin:0 0 15px}.start{grid-column:2;grid-row:3;width:100%;min-height:56px}.parent-hint{grid-column:2;grid-row:4;margin:16px 0 4px}.home .kids-link{grid-column:2;grid-row:5}.play{padding-top:max(65px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){.pad{transition:none}.pad.popped{animation:none}}

/* Packed circles use explicit positions while preserving their circular touch areas. */
.pads.staggered{display:block;position:relative}.pads.staggered .pad{position:absolute}

.settings-close{position:fixed;z-index:5;top:max(16px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:48px;height:48px;border-radius:16px;background:#ede8dd;color:#656257;display:grid;place-items:center}.settings-close svg{width:24px;height:24px}.settings h2{padding-right:52px}