html,body{overscroll-behavior:none;height:100%;margin:0}body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.backdrop{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.backdrop__blob{opacity:.4;filter:blur(48px);border-radius:50%;animation:linear infinite drift;position:absolute}@keyframes drift{0%{transform:translate(0)}33%{transform:translate(7vw,-5vh)}66%{transform:translate(-5vw,6vh)}to{transform:translate(0)}}.app{z-index:1;--play-min:max(30vh, 200px);grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(var(--play-min), 1fr) auto;height:100dvh;display:grid;position:relative;overflow:hidden auto}.top-row{padding-top:var(--safe-top)}.play-area{touch-action:none;min-height:0;position:relative;overflow:hidden}.play-area__badge{left:max(12px, env(safe-area-inset-left,0px));border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-soft);font-size:var(--text-sm);color:var(--ink-soft);pointer-events:none;padding:6px 12px;font-weight:700;position:absolute;bottom:76px}.hint{border-radius:var(--radius-pill);background:var(--surface);max-width:calc(100% - 24px);box-shadow:var(--shadow-soft);font-size:clamp(1.05rem, .6rem + 2vw, var(--text-lg));text-align:center;pointer-events:none;margin:0;padding:10px 22px;font-weight:700;transition:opacity .3s;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.mode-row{flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;display:flex}.mode-row>:first-child{flex:0 auto;min-width:0}@media (min-width:640px){.mode-row{column-gap:24px}}.tray-row{padding:0 12px}.shelf-row{padding:8px 0 calc(8px + var(--safe-bottom))}@media (max-width:639px){.mode-row{flex-direction:column;align-items:stretch}}@media (orientation:portrait){.app{--play-min:42vh}}@media (orientation:portrait) and (max-height:700px){.app{--play-min:30vh}}@media (max-height:700px){.hint{max-width:60%;font-size:var(--text-sm);padding:8px 16px;left:12px;transform:none}}@media (max-width:359px),(max-height:599px){.hint[data-done=true]{opacity:0}}.play-canvas{transition:opacity .2s}.play-canvas[data-shown=false]{opacity:0}@media (max-height:520px) and (orientation:landscape){.app{grid-template:"top top""play controls"minmax(auto,1fr)/minmax(0,1fr) minmax(300px,42%)}.top-row{grid-area:top}.play-area{grid-area:play}.controls{grid-area:controls;grid-template-rows:auto minmax(auto,1fr) auto;grid-template-columns:minmax(0,1fr);display:grid}.mode-row{padding:4px 12px}.shelf-row{padding:0 0 var(--safe-bottom)}}.app[data-tray-open=true]{--play-min:max(22vh, 140px)}@media (max-width:639px),(max-height:520px){.app[data-tray-open=true] .mode-row{display:none}}.loading{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:absolute;inset:0}.loading__blob{background:var(--strawberry);width:72px;height:64px;box-shadow:var(--shadow-soft);transform-origin:50% 100%;border-radius:50% 50% 46% 46%/55% 55% 45% 45%;animation:1.6s ease-in-out infinite bounce}.loading__text{font-size:var(--text-lg);margin:0;font-weight:700}@keyframes bounce{0%,to{transform:translateY(0)scale(1)}40%{transform:translateY(-18px)scale(.96,1.06)}55%{transform:translateY(0)scale(1.08,.9)}}.tutorial{z-index:30;background:#3b2e5a59;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.tutorial__card{border-radius:var(--radius-lg);background:var(--surface-strong);width:min(100%,420px);max-height:calc(100dvh - 32px);box-shadow:var(--shadow);text-align:center;padding:24px;overflow-y:auto}.tutorial__title{font-size:var(--text-xl);margin:0 0 8px}.tutorial__art{width:min(100%,240px);height:auto;margin:0 auto;display:block}.tutorial__blob{transform-origin:120px 186px;animation:3s ease-in-out both tut-blob}.tutorial__finger{animation:3s ease-in-out both tut-finger}@keyframes tut-finger{0%,to{transform:translateY(-46px)}22%,48%{transform:translateY(0)}64%{transform:translateY(-46px)}}@keyframes tut-blob{0%,to{transform:scale(1)}22%,48%{transform:scale(1.12,.82)}60%{transform:scale(.96,1.06)}72%{transform:scale(1.03,.98)}84%{transform:scale(1)}}.tutorial__steps{text-align:left;font-size:var(--text-md);margin:12px 0 20px;padding-left:1.4em;line-height:1.6}.tutorial__button{width:100%;min-height:var(--tap);border:3px solid var(--ink);border-radius:var(--radius-pill);background:var(--mint);font:inherit;font-size:var(--text-lg);color:var(--ink);cursor:pointer;padding:12px 24px;font-weight:800}.tutorial__button:focus-visible{outline:var(--focus-ring);outline-offset:0;box-shadow:var(--focus-halo)}@media (forced-colors:active){.play-area__badge,.hint,.tutorial__card{border:2px solid canvastext}.tutorial__button:focus-visible{outline-offset:2px;outline:3px solid highlight}.backdrop{display:none}}@media (prefers-reduced-motion:reduce){.hint,.play-canvas{transition:none}.backdrop__blob,.loading__blob,.tutorial__blob,.tutorial__finger{animation:none}.tutorial__finger{transform:translateY(-46px)}}:root:is([data-motion=reduced],[data-calm=true]) :is(.backdrop__blob,.loading__blob,.tutorial__blob,.tutorial__finger){animation:none}:root:is([data-motion=reduced],[data-calm=true]) :is(.hint,.play-canvas){transition:none}:root:is([data-motion=reduced],[data-calm=true]) .tutorial__finger{transform:translateY(-46px)}.c-btn{min-height:var(--tap);min-width:var(--tap);border-radius:var(--radius-pill);background:var(--surface-strong);color:var(--ink);font:700 var(--text-md) / 1.15 var(--font);box-shadow:var(--shadow-soft);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:0;justify-content:center;align-items:center;gap:8px;padding:8px 20px;text-decoration:none;transition:transform .12s,background-color .12s;display:inline-flex;position:relative}.c-btn svg{flex:none;width:28px;height:28px}.c-btn:hover{background:var(--lavender-soft)}.c-btn:active{transform:scale(.96)}.c-btn:focus-visible{outline:var(--focus-ring);outline-offset:0;box-shadow:var(--focus-halo)}.c-btn:disabled{opacity:.55;cursor:default;transform:none}.c-wide{width:100%}.c-radio[aria-checked=true]{background:var(--pastel,var(--butter));outline:2px solid var(--ink);outline-offset:0}.c-radio[aria-checked=true]:after{content:"";background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;border-radius:50%;width:20px;height:20px;position:absolute;top:4px;right:4px}.c-topbar{padding:calc(8px + var(--safe-top)) 16px 8px;justify-content:space-between;align-items:center;gap:12px;display:flex}.c-brand{min-width:0;min-height:var(--tap);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:800 var(--text-lg) / 1 var(--font);align-items:center;gap:10px;padding:6px 18px 6px 6px;text-decoration:none;display:flex}.c-brand svg{flex:none;width:44px;height:44px}.c-home{background:var(--surface-strong);box-shadow:var(--shadow-soft)}.c-home svg{background:var(--lavender-soft);border-radius:50%;padding:5px}.c-home:hover{background:var(--lavender-soft)}.c-home:focus-visible{outline:var(--focus-ring);outline-offset:0;box-shadow:var(--focus-halo)}.c-wordmark{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.c-topbar-actions{flex:none;gap:10px;display:flex}.c-sound[aria-pressed=true]{background:var(--mint)}.c-quick{top:12px;left:max(12px, env(safe-area-inset-left,0px));right:max(12px, env(safe-area-inset-right,0px));z-index:2;pointer-events:none;justify-content:space-between;display:flex;position:absolute}.c-quick .c-btn{pointer-events:auto;background:var(--surface);font-size:var(--text-sm);border:2px solid #3b2e5a2e;padding:8px 16px}.c-quick .c-btn:hover{background:var(--lavender-soft)}.c-quick .c-btn:not(:focus-visible){box-shadow:none}.c-modes{scrollbar-width:none;gap:10px;margin:-4px;padding:8px;display:flex;overflow-x:auto}.c-modes::-webkit-scrollbar{display:none}.c-mode{--pastel:var(--sky);flex:none;padding:8px 24px 8px 18px}.c-actions{flex:none;gap:10px;display:flex}.c-action{border:3px solid var(--ink);background:var(--strawberry);min-height:64px;font-size:var(--text-lg);touch-action:none;-webkit-touch-callout:none;flex:auto;padding:10px 30px;box-shadow:0 4px #3b2e5a47}.c-actions[data-count="2"] .c-action{font-size:var(--text-md);gap:6px;padding:10px 12px}.c-action:hover{background:var(--strawberry)}.c-action small{font-size:var(--text-sm);font-weight:600}.c-action:active,.c-action[aria-pressed=true]{background:var(--strawberry-soft);transform:translateY(3px)scale(.97);box-shadow:0 1px #3b2e5a47}.c-icon-tall svg{transform:rotate(90deg)}.c-icon-mirror svg{transform:scaleX(-1)}.c-tray{padding:6px 16px;position:relative}.c-tray:has(.c-tray-panel):after{content:"";border-radius:0 0 var(--radius-lg) var(--radius-lg);pointer-events:none;background:linear-gradient(#fff0,#fff 82%);height:30px;position:absolute;bottom:6px;left:16px;right:16px}.c-chevron{transition:transform .2s}.c-tray-toggle[aria-expanded=true] .c-chevron{transform:rotate(180deg)}.c-tray-panel{overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:var(--ink-soft) var(--lavender-soft);background:var(--surface);border-radius:var(--radius-lg);max-height:min(38vh,260px);box-shadow:var(--shadow-soft);gap:12px;margin-top:8px;padding:14px 14px 34px;display:grid;overflow-y:auto}.c-tray-panel::-webkit-scrollbar{width:14px}.c-tray-panel::-webkit-scrollbar-track{border-radius:var(--radius-pill);background:var(--lavender-soft);margin:14px 0}.c-tray-panel::-webkit-scrollbar-thumb{border-radius:var(--radius-pill);background:var(--ink-soft);background-clip:content-box;border:3px solid #0000}.c-row{grid-template-columns:120px 1fr;align-items:center;gap:10px;display:grid}.c-row-label{color:var(--ink);font:800 var(--text-md) var(--font)}.c-row-options{flex-wrap:wrap;gap:8px;display:flex}.c-row-note{font:700 var(--text-sm) / 1.3 var(--font);color:var(--ink-soft);flex-basis:100%;margin:0}.c-choice{--pastel:var(--mint);font-size:var(--text-sm);padding:6px 26px 6px 10px}.c-swatch{border-radius:50%;flex:none;width:32px;height:32px;box-shadow:inset 0 0 0 2px #3b2e5a40}.c-choice-text{text-align:left;flex-direction:column;align-items:flex-start;line-height:1.1;display:flex}.c-choice-blurb{color:var(--ink);font-size:.8rem;font-weight:600}.c-shelf-wrap{position:relative}.c-shelf{-webkit-mask-image:var(--shelf-fade,none);-webkit-mask-image:var(--shelf-fade,none);mask-image:var(--shelf-fade,none);padding:8px 16px calc(10px + var(--safe-bottom));scroll-snap-type:x proximity;scrollbar-width:none;gap:10px;display:flex;overflow-x:auto}.c-shelf::-webkit-scrollbar{display:none}.c-toy{--pastel:var(--butter-soft);border-radius:var(--radius-md);scroll-snap-align:center;flex-direction:column;flex:none;gap:2px;min-width:92px;padding:8px}.c-toy svg{width:60px;height:60px}.c-toy-error{border-radius:var(--radius-md);background:var(--strawberry-soft);max-width:190px;color:var(--ink);font:700 var(--text-sm) / 1.25 var(--font);flex:none;align-self:center;margin:0;padding:8px 12px}.c-toy-name{font-size:clamp(12px, 3.4vw, var(--text-sm));white-space:nowrap}.c-shelf-wrap[data-more-right=true]{--shelf-fade:linear-gradient(to right, #000 calc(100% - 72px), transparent)}.c-shelf-wrap[data-more-left=true]{--shelf-fade:linear-gradient(to left, #000 calc(100% - 72px), transparent)}.c-shelf-wrap[data-more-left=true][data-more-right=true]{--shelf-fade:linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent)}.c-shelf-more{background:var(--surface-strong);width:40px;height:40px;color:var(--ink);box-shadow:var(--shadow-soft);pointer-events:none;border-radius:50%;place-items:center;margin-top:-20px;display:none;position:absolute;top:50%}.c-shelf-more svg{width:22px;height:22px}.c-shelf-more--left{left:6px}.c-shelf-more--right{right:6px}.c-shelf-wrap[data-more-left=true] .c-shelf-more--left,.c-shelf-wrap[data-more-right=true] .c-shelf-more--right{display:grid}.c-settings-scrim{z-index:20;background:#3b2e5a59;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.c-settings{background:var(--surface-strong);border-radius:var(--radius-lg);width:min(480px,100%);max-height:calc(100dvh - 32px);box-shadow:var(--shadow);color:var(--ink);font-family:var(--font);padding:20px 22px;overflow-y:auto}.c-settings-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.c-settings h2{font-size:var(--text-xl);margin:0}.c-setting{border-top:2px solid var(--lavender-soft);gap:8px;padding:14px 0;display:grid}.c-setting-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.c-setting-label{font:800 var(--text-md) var(--font)}.c-setting-note{font-size:var(--text-sm);color:var(--ink-soft);margin:0}.c-settings-links{gap:10px}.c-volume{align-items:center;gap:14px;display:flex}.c-volume output{text-align:right;min-width:3.5ch;font-weight:800}.c-range{height:var(--tap);appearance:none;cursor:pointer;background:0 0;flex:1;margin:0}.c-range::-webkit-slider-runnable-track{border-radius:var(--radius-pill);background:var(--lavender-soft);height:14px}.c-range::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--ink);background:var(--strawberry);width:40px;height:40px;box-shadow:var(--shadow-soft);border-radius:50%;margin-top:-13px}.c-range::-moz-range-track{border-radius:var(--radius-pill);background:var(--lavender-soft);height:14px}.c-range::-moz-range-thumb{border:3px solid var(--ink);background:var(--strawberry);width:34px;height:34px;box-shadow:var(--shadow-soft);border-radius:50%}.c-range:focus-visible{outline:var(--focus-ring);outline-offset:0;border-radius:var(--radius-pill);box-shadow:var(--focus-halo)}.c-toggle{gap:10px;min-width:120px}.c-toggle-knob{border-radius:var(--radius-pill);background:var(--lavender-soft);width:44px;height:26px;box-shadow:inset 0 0 0 2px var(--ink-soft);flex:none;transition:background-color .16s;position:relative}.c-toggle-knob:after{content:"";background:var(--ink-soft);border-radius:50%;width:18px;height:18px;transition:transform .16s;position:absolute;top:4px;left:4px}.c-toggle[aria-pressed=true]{background:var(--mint)}.c-toggle[aria-pressed=true] .c-toggle-knob{background:var(--ink);box-shadow:none}.c-toggle[aria-pressed=true] .c-toggle-knob:after{background:#fff;transform:translate(18px)}@media (max-width:639px){.c-wordmark{white-space:normal;font-size:.85rem;line-height:1.05;overflow:visible}.c-label-sm-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.c-settings-btn{padding:8px 14px}.c-row{grid-template-columns:1fr;gap:6px}.c-quick .c-btn{font-size:var(--text-sm);padding:8px 14px}}@media (max-width:639px),(max-height:520px) and (orientation:landscape){.c-modes{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;display:grid;overflow:visible}.c-mode{min-width:0;font-size:var(--text-sm);flex-direction:column;gap:2px;padding:6px 4px}.c-actions{width:100%}.c-action{flex:1 1 0;min-width:0}}@media (max-height:520px) and (orientation:landscape){.c-action{min-height:var(--tap)}}@media (max-width:399px){.c-topbar{gap:8px}.c-wordmark{display:none}.c-brand{width:var(--tap);height:var(--tap);flex:none;justify-content:center;padding:0}.c-sound{padding:8px 14px}}@media (max-width:359px),(max-height:599px){.c-quick .c-btn{width:var(--tap);height:var(--tap);padding:0;font-size:1.5rem}.c-quick-label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}@media (max-width:359px){.c-mode{border-radius:var(--radius-sm);font-size:.85rem}.c-mode svg{width:24px;height:24px}.c-mode[aria-checked=true]:after{background-size:10px;width:16px;height:16px;top:2px;right:2px}}@media (max-height:700px){.c-shelf{padding:4px 16px calc(6px + var(--safe-bottom))}.c-toy{min-width:74px;padding:4px 8px}.c-toy svg{width:40px;height:40px}.c-tray{padding:2px 16px}.c-tray:has(.c-tray-panel):after{bottom:2px}}@media (prefers-reduced-motion:reduce){.c-btn,.c-chevron,.c-toggle-knob,.c-toggle-knob:after{transition:none}.c-btn:active,.c-action[aria-pressed=true]{transform:none}}:root:is([data-motion=reduced],[data-calm=true]) .c-btn,:root:is([data-motion=reduced],[data-calm=true]) .c-chevron,:root:is([data-motion=reduced],[data-calm=true]) .c-toggle-knob,:root:is([data-motion=reduced],[data-calm=true]) .c-toggle-knob:after{transition:none}:root:is([data-motion=reduced],[data-calm=true]) .c-btn:active,:root:is([data-motion=reduced],[data-calm=true]) .c-action[aria-pressed=true]{transform:none}@media (forced-colors:active){.c-btn,.c-brand,.c-shelf-more,.c-tray-panel,.c-settings,.c-toy-error,.c-swatch,.c-toggle-knob{border:2px solid buttontext}.c-btn:focus-visible,.c-home:focus-visible{outline-offset:2px;outline:3px solid highlight}.c-home{border-color:linktext}.c-range:focus-visible{outline-offset:2px;outline:3px solid highlight}.c-radio[aria-checked=true]{outline-offset:2px;outline:3px solid buttontext}.c-radio[aria-checked=true]:after{background-color:highlight;border:1px solid buttontext}.c-tray:has(.c-tray-panel):after{display:none}.c-toggle[aria-pressed=true] .c-toggle-knob:after{background:highlight}}