@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.static{position:static}.start{inset-inline-start:var(--spacing)}.table{display:table}}:root{--cream:#fff4c8;--ink:#3f3162;--pink:#ff6b7a;--blue:#55c7f5;--purple:#8b64dc;--yellow:#ffd84d;--mint:#5fd5a7;--orange:#ff9c4a;--accent:#ff6b7a}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--cream);color:var(--ink);overscroll-behavior:none;font-family:Arial Rounded MT Bold,Trebuchet MS,system-ui,sans-serif}button{font:inherit}.playroom{isolation:isolate;background:radial-gradient(circle at 8% 22%, #ffffffb8 0 7px, transparent 8px), radial-gradient(circle at 92% 18%, #ffffffbd 0 10px, transparent 11px), linear-gradient(180deg, #fff7d7 0%, var(--cream) 72%, #ffeaa4 100%);grid-template-rows:auto auto minmax(0,1fr) auto auto;width:100%;min-height:100svh;padding:30px clamp(18px,4vw,64px) 18px;transition:background-color .26s;display:grid;position:relative;overflow:hidden}.playroom:before,.playroom:after{content:"";z-index:-1;aspect-ratio:1;filter:blur(.2px);opacity:.42;border-radius:50%;width:210px;position:absolute}.playroom:before{background:var(--blue);box-shadow:25px 190px 0 -56px var(--purple);top:16%;left:-88px}.playroom:after{background:var(--pink);box-shadow:-20px -190px 0 -52px var(--yellow);bottom:10%;right:-72px}.scallops{opacity:.72;background:radial-gradient(circle at 14px 30px, var(--mint) 0 15px, transparent 16px) 0 0 / 56px 30px repeat-x;height:28px;position:absolute;inset:auto 0 0}.topbar{z-index:4;justify-content:space-between;align-items:center;gap:16px;display:flex}.header-actions{align-items:center;gap:10px;display:flex}.brand{color:var(--ink);letter-spacing:-.055em;text-shadow:0 4px #ffffffc7;align-items:center;gap:12px;font-size:clamp(1.8rem,4.3vw,3.8rem);font-weight:900;display:flex}.brand-dot{color:var(--pink);text-shadow:17px -8px 0 var(--yellow), -10px -12px 0 var(--blue);font-size:.55em}.sound-toggle,.settings-button{min-height:48px;color:var(--ink);cursor:pointer;background:#fffdf1;border:3px solid #3f31622e;border-radius:999px;align-items:center;gap:8px;padding:10px 18px;font-size:clamp(.86rem,1.6vw,1.05rem);font-weight:900;transition:transform .14s,box-shadow .14s;display:inline-flex;box-shadow:0 6px #3f316226}.settings-button{background:#f3e9ff;border-color:#8b64dc3d}.sound-toggle:hover,.settings-button:hover{transform:translateY(-2px);box-shadow:0 8px #3f316226}.sound-toggle:active,.settings-button:active{transform:translateY(4px);box-shadow:0 2px #3f316226}.sound-toggle:focus-visible,.settings-button:focus-visible,.mode-option:focus-visible,.play-stage:focus-visible,.settings-dialog button:focus-visible,.settings-dialog input:focus-visible{outline:5px solid var(--ink);outline-offset:5px}.mode-picker{z-index:5;place-self:center;align-items:center;gap:13px;margin-top:8px;display:flex}.mode-label{color:#3f3162a8;letter-spacing:.04em;text-transform:uppercase;font-size:clamp(.72rem,1.4vw,.9rem);font-weight:900}.mode-options{background:#ffffff9e;border:3px solid #3f316221;border-radius:21px;gap:5px;padding:5px;display:flex;box-shadow:0 6px #3f316217}.mode-option{color:#3f31629e;cursor:pointer;background:0 0;border:0;border-radius:14px;justify-content:center;align-items:center;gap:8px;min-width:126px;min-height:46px;padding:7px 15px;font-size:clamp(.86rem,1.55vw,1rem);font-weight:900;transition:color .15s,background .15s,box-shadow .15s,transform .15s;display:inline-flex}.mode-option:hover:not(.is-active){color:var(--ink);background:#ffffff94}.mode-option:active{transform:translateY(2px)}.mode-option.is-active{background:var(--purple);color:#fff;box-shadow:0 4px #6245af}.mode-emoji .mode-option.is-active{background:var(--pink);box-shadow:0 4px #d94b5b}.mode-icon{min-width:34px;min-height:27px;color:var(--purple);letter-spacing:-.03em;background:#ffffffd6;border-radius:8px;place-items:center;padding:2px 5px;font-size:.7rem;display:grid}.emoji-icon{letter-spacing:-.25em;background:0 0;min-width:auto;padding:0;font-size:1.1rem;transform:translate(-.08em)}.play-stage{z-index:2;width:100%;min-height:0;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;grid-template-rows:auto minmax(280px,1fr) auto;padding:6px 0;display:grid;position:relative}.instruction{color:var(--purple);background:#ffffffbd;border:3px solid #8b64dc33;border-radius:999px;place-self:center;align-items:center;gap:10px;margin-top:4px;padding:9px 18px 10px;font-size:clamp(1rem,2.25vw,1.55rem);font-weight:900;display:inline-flex;box-shadow:0 5px #8b64dc26}.keyboard-icon{font-size:1.16em}.scene{width:min(760px,100%);min-height:290px;margin:0 auto;display:block;position:relative}.hero-shadow{filter:blur(3px);background:#3f316221;border-radius:50%;width:clamp(185px,29vw,300px);height:42px;animation:2.8s ease-in-out infinite shadow-breathe;position:absolute;bottom:7%;left:50%;transform:translate(-50%)}.hero-bubble{aspect-ratio:1;background:radial-gradient(circle at 35% 26%, #ffffffeb 0 9%, transparent 10%), linear-gradient(145deg, var(--accent), var(--accent));border:clamp(8px,1vw,13px) solid #ffffffb3;border-radius:47% 53% 51% 49%/52% 46% 54% 48%;place-items:center;width:clamp(220px,32vw,342px);display:grid;position:absolute;top:50%;left:50%}@supports (color:color-mix(in lab, red, red)){.hero-bubble{background:radial-gradient(circle at 35% 26%, #ffffffeb 0 9%, transparent 10%), linear-gradient(145deg, color-mix(in srgb, var(--accent), white 18%), var(--accent))}}.hero-bubble{box-shadow:0 16px 0 var(--accent), 0 27px 40px #3f31622e, inset -18px -18px 0 #3f316214}@supports (color:color-mix(in lab, red, red)){.hero-bubble{box-shadow:0 16px 0 color-mix(in srgb, var(--accent), var(--ink) 25%), 0 27px 40px #3f31622e, inset -18px -18px 0 #3f316214}}.hero-bubble{animation:.39s cubic-bezier(.2,1.75,.45,1) both bubble-pop,2.8s ease-in-out .39s infinite bubble-float;transform:translate(-50%,-51%)}.hero-letter{color:#fffdf1;letter-spacing:-.08em;text-shadow:0 8px #3f316238,0 -3px #ffffff47;font-size:clamp(8rem,18vw,13rem);font-weight:900;line-height:.8;transform:translate(-.04em)}.mode-emoji .hero-letter{letter-spacing:0;text-shadow:0 8px #3f316229;font-family:Apple Color Emoji,Segoe UI Emoji,sans-serif;font-size:clamp(6.7rem,15vw,11rem);transform:none}.mode-emoji .hero-bubble{background:radial-gradient(circle at 35% 26%, #ffffffeb 0 9%, transparent 10%), linear-gradient(145deg, var(--accent), var(--accent))}@supports (color:color-mix(in lab, red, red)){.mode-emoji .hero-bubble{background:radial-gradient(circle at 35% 26%, #ffffffeb 0 9%, transparent 10%), linear-gradient(145deg, color-mix(in srgb, var(--accent), white 32%), var(--accent))}}.shine{aspect-ratio:1;background:#ffffffb8;border-radius:50%;width:13%;position:absolute;top:17%;right:22%}.friend{aspect-ratio:1/1.1;border:8px solid #ffffff85;border-radius:45% 45% 48% 48%;width:clamp(94px,14vw,148px);animation:2.2s ease-in-out infinite friend-bob;position:absolute;bottom:11%;box-shadow:0 10px #3f316221}.friend-left{background:var(--mint);left:clamp(2%,8vw,13%);rotate:-7deg}.friend-right{background:var(--yellow);animation-delay:-1.1s;right:clamp(2%,8vw,13%);rotate:7deg}.ear{background:inherit;border:7px solid #ffffff75;border-radius:60% 60% 35% 35%;width:40%;height:50%;position:absolute;top:-31%}.left-ear{left:3%;rotate:-18deg}.right-ear{right:3%;rotate:18deg}.face{position:absolute;inset:0}.eye{background:var(--ink);border-radius:50%;width:10px;height:14px;position:absolute;top:39%}.left-eye{left:30%}.right-eye{right:30%}.smile{color:var(--ink);font-size:2.25rem;font-weight:900;position:absolute;top:43%;left:50%;transform:translate(-50%)}.cloud{background:#ffffff9e;border-radius:999px;width:70px;height:26px;position:absolute}.cloud:before,.cloud:after{content:"";aspect-ratio:1;background:inherit;border-radius:50%;position:absolute;bottom:0}.cloud:before{width:39px;left:12px}.cloud:after{width:30px;right:5px}.cloud-one{animation:4.5s ease-in-out infinite cloud-drift;top:16%;left:8%}.cloud-two{animation:3.8s ease-in-out -1.4s infinite reverse cloud-drift;top:24%;right:7%;scale:.72}.burst-bubble{z-index:6;top:var(--bubble-y);left:var(--bubble-x);width:var(--bubble-size);aspect-ratio:1;background:var(--bubble-color);pointer-events:none;animation:burst .86s var(--bubble-delay) ease-out both;border:4px solid #ffffff8c;border-radius:50%;position:absolute;box-shadow:inset -5px -5px #3f31621a}.tap-hint{color:#3f316299;place-self:center;font-size:.9rem;font-weight:800}.recent{z-index:4;background:#ffffffb8;border:3px solid #3f31621f;border-radius:24px;place-self:center;align-items:center;gap:14px;min-height:68px;padding:9px 12px 9px 20px;display:flex;box-shadow:0 8px #3f31621a}.recent-label{white-space:nowrap;font-size:clamp(.78rem,1.5vw,1rem);font-weight:900}.recent-keys{gap:7px;display:flex}.mini-key{aspect-ratio:1;background:var(--purple);color:#fff;width:clamp(38px,5.2vw,52px);animation:mini-pop .28s calc(var(--mini-index) * 35ms) ease-out both;border:3px solid #ffffffad;border-radius:13px;place-items:center;font-size:clamp(1.05rem,2.7vw,1.6rem);font-weight:900;display:grid;box-shadow:0 5px #6245af}.mode-emoji .mini-key{font-family:Apple Color Emoji,Segoe UI Emoji,sans-serif;font-size:clamp(1.25rem,3vw,1.8rem)}.mini-key:nth-child(2n){background:var(--blue);box-shadow:0 5px #2998ca}.mini-key:nth-child(3n){background:var(--pink);box-shadow:0 5px #d94b5b}.recent-sparkle{color:var(--orange);font-size:1.6rem;animation:1.8s ease-in-out infinite sparkle}.helper{z-index:3;text-align:center;color:#3f31628a;margin:12px 0 0;font-size:.72rem;font-weight:700}.effects-off .hero-bubble,.effects-off .hero-shadow,.effects-off .friend,.effects-off .cloud,.effects-off .mini-key,.effects-off .recent-sparkle{animation:none}.settings-dialog{width:min(590px,100vw - 32px);max-height:calc(100svh - 32px);color:var(--ink);background:#fff9df;border:5px solid #ffffffd1;border-radius:34px;margin:auto;padding:0;overflow:hidden;box-shadow:0 20px #3f31622b,0 34px 70px #3f316252}.settings-dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#3f31628f}.settings-panel{background:radial-gradient(circle at 92% 7%,#ffd84d57 0 52px,#0000 53px),radial-gradient(circle at 4% 94%,#55c7f538 0 64px,#0000 65px),#fff9df;max-height:calc(100svh - 42px);padding:24px;overflow-y:auto}.settings-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;display:flex}.settings-kicker{color:var(--pink);letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;font-size:.72rem;font-weight:900;display:block}.settings-header h2{letter-spacing:-.04em;margin:0;font-size:clamp(1.65rem,5vw,2.3rem);line-height:1}.dialog-close{aspect-ratio:1;width:44px;color:var(--ink);cursor:pointer;background:#fff;border:3px solid #3f316224;border-radius:50%;flex:none;place-items:center;padding:0 0 4px;font-size:1.9rem;line-height:1;display:grid;box-shadow:0 4px #3f31621f}.settings-section{background:#ffffffb3;border:3px solid #8b64dc24;border-radius:24px;gap:14px;padding:17px;display:grid;box-shadow:0 6px #3f316214}.settings-section+.settings-section{margin-top:14px}.sound-settings{border-color:#55c7f53b}.settings-section-heading{align-items:center;gap:11px;display:flex}.settings-section-icon{aspect-ratio:1;background:#efe5ff;border-radius:15px;flex:none;place-items:center;width:46px;font-size:1.45rem;display:grid}.sound-settings .settings-section-icon{background:#dff6ff}.settings-section-heading h3,.sound-style-setting legend{margin:0;font-size:1rem;font-weight:900}.settings-section-heading p{color:#3f31629e;margin:2px 0 0;font-size:.78rem;font-weight:700}.setting-row{background:#fffdf2;border-radius:16px;justify-content:space-between;align-items:center;gap:16px;min-height:58px;padding:10px 12px;display:flex}.setting-row strong,.setting-row span{display:block}.setting-row strong,.range-heading strong{font-size:.9rem;font-weight:900}.setting-row>div>span{color:#3f31628f;margin-top:2px;font-size:.7rem;font-weight:700}.setting-switch{color:#3f3162b8;cursor:pointer;background:#ddd6e8;border:0;border-radius:999px;flex:none;grid-template-columns:26px 1fr;align-items:center;gap:7px;min-width:88px;min-height:42px;padding:5px 11px 5px 6px;font-size:.78rem;font-weight:900;transition:background .15s,color .15s;display:grid;position:relative}.setting-switch[aria-checked=true]{background:var(--mint);color:var(--ink)}.switch-knob{aspect-ratio:1;background:#fff;border:3px solid #3f31621f;border-radius:50%;width:26px;box-shadow:0 2px #3f31621f}.range-setting{gap:7px;padding:0 12px 3px;transition:opacity .15s;display:grid}.range-setting.is-disabled,.sound-style-setting.is-disabled{opacity:.43}.range-heading,.range-labels{justify-content:space-between;align-items:center;display:flex}.range-heading output{color:var(--purple);background:#efe5ff;border-radius:999px;padding:3px 9px;font-size:.7rem;font-weight:900}.range-setting input[type=range]{width:100%;accent-color:var(--purple);cursor:pointer}.range-labels{color:#3f31627a;font-size:.62rem;font-weight:800}.range-labels span:nth-child(2){text-align:center}.range-labels span:last-child{text-align:right}.range-labels-two span:last-child{margin-left:auto}.sound-style-setting{border:0;min-width:0;margin:0;padding:0 12px;transition:opacity .15s}.sound-style-setting legend{margin-bottom:7px}.sound-style-options{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.sound-style-options button{color:#3f3162a3;cursor:pointer;background:#fffdf2;border:3px solid #3f31621c;border-radius:14px;place-items:center;gap:3px;min-height:62px;padding:7px 4px;font-size:.68rem;font-weight:900;display:grid}.sound-style-options button span{font-size:1.25rem}.sound-style-options button.is-active{border-color:var(--pink);color:var(--ink);background:#fff0f2;box-shadow:0 4px #ff6b7a3d}.settings-footer{justify-content:space-between;align-items:center;gap:12px;margin-top:18px;display:flex}.settings-footer button{cursor:pointer;border-radius:14px;min-height:45px;padding:9px 16px;font-size:.82rem;font-weight:900}.reset-settings{color:#3f3162ab;background:0 0;border:3px solid #3f316221}.done-settings{background:var(--purple);color:#fff;border:3px solid #ffffffa3;min-width:112px;box-shadow:0 5px #6245af}@keyframes bubble-pop{0%{transform:translate(-50%,-45%)scale(.55)rotate(-12deg)}70%{transform:translate(-50%,-53%)scale(1.1)rotate(3deg)}to{transform:translate(-50%,-51%)scale(1)rotate(0)}}@keyframes bubble-float{0%,to{translate:0;rotate:-1deg}50%{translate:0 -8px;rotate:1deg}}@keyframes shadow-breathe{0%,to{opacity:.72;scale:.92 1}50%{opacity:.48;scale:1 .92}}@keyframes friend-bob{0%,to{translate:0}50%{translate:0 -7px}}@keyframes cloud-drift{0%,to{translate:-8px}50%{translate:8px -4px}}@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)}18%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--bubble-drift)), -230px) scale(1.12) rotate(120deg)}}@keyframes mini-pop{0%{opacity:0;transform:translateY(8px)scale(.75)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes sparkle{0%,to{transform:rotate(-10deg)scale(.9)}50%{transform:rotate(10deg)scale(1.16)}}@media (max-width:700px){.playroom{grid-template-rows:auto auto minmax(0,1fr) auto auto;padding-top:18px}.topbar{align-items:flex-start}.brand{max-width:58%;font-size:clamp(1.65rem,9vw,2.5rem)}.header-actions{gap:7px}.sound-toggle,.settings-button{min-height:43px;padding:8px 12px}.sound-toggle span:last-child,.settings-button span:last-child{display:none}.mode-picker{width:100%;margin-top:12px}.mode-label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.mode-options{width:min(420px,100%)}.mode-option{flex:1;min-width:0;min-height:43px;padding-inline:8px}.play-stage{grid-template-rows:auto minmax(310px,1fr) auto}.instruction{text-align:center;max-width:94%}.friend{border-width:6px;width:88px;bottom:16%}.friend-left{left:0}.friend-right{right:0}.recent{gap:8px;max-width:100%;min-height:58px;padding:7px 9px 7px 12px}.recent-label,.recent-sparkle{display:none}.settings-dialog{border-width:4px;border-radius:28px;width:calc(100vw - 16px);max-height:calc(100svh - 16px)}.settings-panel{max-height:calc(100svh - 24px);padding:18px 14px}.settings-section{padding:14px 11px}.setting-row{gap:10px;padding-inline:9px}.setting-row>div>span{max-width:190px}.settings-footer{align-items:stretch}.settings-footer button{flex:1;padding-inline:9px}}@media (max-height:690px) and (min-width:701px){.playroom{padding-top:18px}.brand{font-size:2.35rem}.mode-picker{margin-top:1px}.mode-option{min-height:40px;padding-block:5px}.play-stage{grid-template-rows:auto minmax(260px,1fr) auto}.hero-bubble{width:230px}.hero-letter{font-size:8.5rem}.friend{width:100px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}