.sc-app{--sc-ink:#21425a;--sc-paper:#fbfeff;--sc-teal:#19b3ad;--sc-sky:#4fb6ff;--sc-pink:#ff74ad;--sc-lilac:#a184ff;--sc-gold:#ffd24d;--play-accent:#139c97;overflow:hidden;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100dvh;background:#cdeef0;color:#fff}.sc-scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none}.sc-app:not([data-phase=play]) :is(.sc-head,.sc-steps,.sc-messes,.sc-hint,.sc-badges,.sc-bottom,.sc-quit,.sc-toast,.sc-banner){display:none}.sc-head{position:absolute;z-index:4;left:12px;top:calc(env(safe-area-inset-top, 0px) + 10px);pointer-events:none;display:flex;gap:8px}.sc-head,.sc-pill{align-items:center}.sc-pill{display:inline-flex;gap:6px;height:40px;padding:0 12px;border-radius:20px;background:rgba(33,66,90,.84);border:2px solid rgba(255,255,255,.92);box-shadow:0 3px 0 rgba(33,66,90,.25);color:#fff}.sc-pill b{font:800 18px/1 Playful,sans-serif;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.sc-pill small{font:800 10px/1 Playful,sans-serif;letter-spacing:1px;opacity:.8}.sc-clockpill{flex-direction:column;justify-content:center;align-items:stretch;gap:3px;min-width:70px;background:var(--sc-teal)}.sc-clockpill b{font-size:16px;text-align:center}.sc-timetrack{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}.sc-timetrack i{display:block;height:100%;background:#fff;transform-origin:left;transition:background .3s}.sc-timetrack i[data-level=mid]{background:var(--sc-gold)}.sc-timetrack i[data-level=low]{background:#ff7f9c}.sc-hurry .sc-clockpill{animation:sc-pulse .5s ease-in-out infinite alternate;background:#e9577f}@keyframes sc-pulse{to{transform:scale(1.07)}}.sc-waterpill svg{color:#8fd8ff}.sc-steps{position:absolute;z-index:4;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top, 0px) + 58px);display:flex;gap:4px;margin:0;padding:3px;list-style:none;pointer-events:none;border-radius:16px;background:rgba(251,254,255,.86);border:2px solid #fff;box-shadow:0 3px 0 rgba(33,66,90,.14)}.sc-steps li{display:flex;align-items:center;gap:5px;padding:4px 10px 4px 5px;border-radius:12px;font:800 13px/1 Playful,sans-serif;color:#8aa2b3;transition:background .25s,color .25s}.sc-steps span{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#e2eef3;font-size:11px}.sc-app[data-step=lather] .sc-steps li[data-for=lather],.sc-app[data-step=rinse] .sc-steps li[data-for=rinse],.sc-app[data-step=wet] .sc-steps li[data-for=wet]{background:var(--sc-teal);color:#fff}.sc-app[data-step=lather] .sc-steps li[data-for=lather] span,.sc-app[data-step=rinse] .sc-steps li[data-for=rinse] span,.sc-app[data-step=wet] .sc-steps li[data-for=wet] span{background:#fff;color:var(--sc-teal)}.sc-app:is([data-step=lather],[data-step=rinse]) .sc-steps li[data-for=wet] span,.sc-app[data-step=rinse] .sc-steps li[data-for=lather] span{background:#b8ecd8;color:#138a64}.sc-messes{position:absolute;z-index:4;left:8px;right:8px;top:calc(env(safe-area-inset-top, 0px) + 92px);pointer-events:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.sc-mess{display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 4px;border-radius:11px;background:rgba(251,254,255,.9);border:2px solid #fff;color:var(--sc-ink);box-shadow:0 2px 0 rgba(33,66,90,.12);font:800 12px/1 Playful,sans-serif;transition:opacity .3s}.sc-mess i{width:13px;height:13px;border-radius:50%;background:var(--c);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}.sc-mess small{font-size:10px;color:#7d97a8}.sc-mess em{display:grid;color:var(--c)}.sc-mess em,.sc-mess em svg{width:14px;height:14px}.sc-mess[data-done=true]{opacity:.6}.sc-mess[data-away=true]{background:rgba(232,240,246,.82);border-style:dashed;border-color:#a9c2d2;color:#5d7f95}.sc-mess[data-away=true] b:after{content:" ↺"}.sc-mess[data-done=true] i{background:#34c08a;position:relative}.sc-mess[data-done=true] i:after{content:"";position:absolute;left:4px;top:1.5px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.sc-mess[data-done=true] b{text-decoration:line-through}.sc-hint{position:absolute;z-index:4;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top, 0px) + 122px);width:max-content;max-width:calc(100% - 24px);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 14px;border-radius:14px;pointer-events:none;background:rgba(33,66,90,.78);color:#fff;text-align:center}.sc-hint b{font:800 15px/1.15 Playful,sans-serif}.sc-hint small{font:700 12px/1.2 Playful,sans-serif;opacity:.85}.sc-hint b:empty+small:empty,.sc-hint:empty{display:none}.sc-hint[data-kind=warn]{background:#e9577f;animation:sc-shake .5s ease-in-out infinite alternate}@keyframes sc-shake{0%{transform:translateX(-52%)}to{transform:translateX(-48%)}}.sc-badges{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}.sc-badge{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:1px;margin:-64px 0 0 -30px;width:60px;opacity:0;transition:opacity .2s;will-change:transform}.sc-badge.show{opacity:1}.sc-badge .ring{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--c) calc(var(--p, 0) * 1turn),rgba(255,255,255,.7) 0);box-shadow:0 2px 6px rgba(33,66,90,.3)}.sc-badge .ring:after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}.sc-badge .ring i{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--c);display:grid;place-items:center}.sc-badge .ring svg{width:18px;height:18px;animation:sc-wiggle 1.2s ease-in-out infinite}.sc-badge small{margin-top:6px;padding:2px 6px;border-radius:7px;background:rgba(255,255,255,.92);color:var(--sc-ink);font:800 10px/1 Playful,sans-serif;white-space:nowrap}@keyframes sc-wiggle{50%{transform:rotate(-14deg) scale(1.1)}}.sc-toast{position:absolute;z-index:7;left:50%;top:calc(env(safe-area-inset-top, 0px) + 178px);transform:translate(-50%);opacity:0;pointer-events:none;padding:8px 16px;border-radius:16px;font:800 16px/1.1 Playful,sans-serif;white-space:nowrap;background:rgba(33,66,90,.92);color:#fff;border:2px solid rgba(255,255,255,.9)}.sc-toast[data-kind=good]{background:#1fa77d}.sc-toast[data-kind=bad]{background:#e03c68}.sc-toast[data-kind=warn]{background:#b46ae0}.sc-toast.show{animation:sc-toast 2.1s ease forwards}@keyframes sc-toast{0%{opacity:0;transform:translate(-50%,12px) scale(.85)}10%,78%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%,-14px)}}.sc-banner{position:absolute;z-index:7;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-4deg) scale(.5);opacity:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 26px 16px;border-radius:24px;max-width:calc(100% - 30px);background:linear-gradient(135deg,#4fd2c4,#6aa8ff 60%,#b08cff);color:#fff;border:4px solid #fff;box-shadow:0 7px 0 #3a78b8,0 16px 40px rgba(33,66,90,.3)}.sc-banner b{font:800 36px/1 Playful,sans-serif;letter-spacing:1px;text-shadow:0 3px 0 #3a78b8;white-space:nowrap}.sc-banner span{font:800 15px/1.2 Playful,sans-serif;text-align:center}.sc-banner.show{animation:sc-banner 2s cubic-bezier(.3,1.4,.5,1) forwards}@keyframes sc-banner{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(.4)}14%{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1.08)}22%,82%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1)}to{opacity:0;transform:translate(-50%,-70%) rotate(-4deg) scale(.9)}}.sc-bottom{position:absolute;z-index:4;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);display:flex;align-items:stretch;gap:10px;max-width:520px;margin:0 auto}.sc-flip{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:76px;border-radius:22px;cursor:pointer;background:linear-gradient(#ffa3c9,#ff6fa8);color:#fff;border:3px solid #fff;box-shadow:0 5px 0 #c4447c;font:800 13px/1 Playful,sans-serif;transition:transform .12s}.sc-flip:active{transform:translateY(3px);box-shadow:0 2px 0 #c4447c}.sc-flip svg{transition:transform .35s}.sc-app[data-side="1"] .sc-flip svg{transform:rotate(180deg)}.sc-app:not([data-step=lather]) .sc-flip{opacity:.45;filter:saturate(.4)}.sc-tap{--flow:0;position:relative;flex:1 1;height:76px;border-radius:22px;cursor:-webkit-grab;cursor:grab;touch-action:none;overflow:hidden;background:linear-gradient(#e8f6fb,#cfe9f4);border:3px solid #fff;box-shadow:0 5px 0 rgba(33,66,90,.25),inset 0 2px 6px rgba(33,66,90,.12)}.sc-tap.held{cursor:-webkit-grabbing;cursor:grabbing}.sc-tap-fill{position:absolute;left:0;top:0;bottom:0;width:calc(26px + var(--flow) * (100% - 52px));background:repeating-linear-gradient(115deg,#7fd4ff 0 12px,#63c4fb 12px 24px);opacity:calc(.25 + var(--flow) * .75);animation:sc-flow .6s linear infinite}@keyframes sc-flow{to{background-position:26px 0}}.sc-tap-knob{position:absolute;top:50%;left:calc(26px + var(--flow) * (100% - 52px));width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 35% 30%,#8fe0ff,#2e9de6);border:3px solid #fff;box-shadow:0 3px 0 #1d6fa8}.sc-tap-label{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:2px;color:var(--sc-ink);pointer-events:none}.sc-tap-label small{font:800 11px/1 Playful,sans-serif;letter-spacing:1.5px;color:#5d86a0}.sc-tap-label b{font:800 17px/1 Playful,sans-serif}.sc-app:is([data-step=wet],[data-step=rinse]) .sc-tap:not(.held) .sc-tap-knob,.sc-app[data-step=lather][data-armed=true] .sc-tap.nudge:not(.held) .sc-tap-knob{animation:sc-nudge 1.1s ease-in-out infinite}@keyframes sc-nudge{50%{transform:translateX(18px)}}.sc-app[data-step=lather][data-armed=false] .sc-tap{box-shadow:0 0 0 4px #ff7f9c,0 5px 0 rgba(33,66,90,.25)}.sc-corner{position:absolute;z-index:8;top:calc(env(safe-area-inset-top, 0px) + 10px);right:12px;display:flex;gap:6px}.sc-app[data-phase=loading] .sc-corner{display:none}.sc-icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(33,66,90,.82);border:2px solid rgba(255,255,255,.9);box-shadow:0 3px 0 rgba(0,0,0,.2)}.sc-icon-btn .off{display:none}.sc-icon-btn[aria-pressed=true] .off{display:block}.sc-icon-btn[aria-pressed=true] .on{display:none}.sc-app:not([data-phase=play]) .sc-corner{top:calc(env(safe-area-inset-top, 0px) + 14px)}.sc-app .overlay{background:linear-gradient(180deg,rgba(220,245,250,.1),rgba(33,66,90,.45));backdrop-filter:none;-webkit-backdrop-filter:none}.sc-app .sc-loading{background:linear-gradient(#dff7f4,#d3ecff 60%,#e6dcff)}.sc-panel{position:relative;width:min(400px,100%);margin:auto;padding:22px 22px 20px;border-radius:30px;text-align:center;color:var(--sc-ink);background:var(--sc-paper);border:4px solid #fff;box-shadow:0 8px 0 rgba(33,66,90,.28),0 20px 50px rgba(33,66,90,.3)}.sc-panel:before{content:"";position:absolute;inset:7px;border:2px dashed rgba(25,179,173,.35);border-radius:23px;pointer-events:none}.sc-kicker{font:800 12px/1 Playful,sans-serif;letter-spacing:2px;color:var(--sc-teal)}.sc-title{margin:8px 0 6px;font:800 52px/.9 Playful,sans-serif;color:#fff;letter-spacing:-1px;-webkit-text-stroke:2px var(--sc-ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--sc-teal);transform:rotate(-3deg)}.sc-title span{font-size:42px;color:#ffd8ea;text-shadow:0 5px 0 var(--sc-pink)}.sc-blurb{margin:10px 0 12px;font:700 15px/1.35 Playful,sans-serif;color:#50748c}.sc-rules{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-gap:8px;gap:8px;text-align:left}.sc-rules li{display:grid;grid-template-columns:28px 1fr;grid-column-gap:10px;column-gap:10px;font:600 13px/1.3 Playful,sans-serif;color:#50748c}.sc-rules li p{margin:0}.sc-rules li b{display:block;font:800 15px/1.1 Playful,sans-serif;color:var(--sc-ink)}.sc-rules li span{width:28px;height:28px;border-radius:50%;background:var(--sc-sky);color:#fff;display:grid;place-items:center;font:800 16px/1 Playful,sans-serif}.sc-rules li:nth-child(2) span{background:var(--sc-pink)}.sc-rules li:nth-child(3) span{background:var(--sc-gold);color:var(--sc-ink)}.sc-rules li:nth-child(4) span{background:var(--sc-teal)}.sc-app button.big{position:relative;width:100%;background:linear-gradient(#45d3c9,#16a39e);color:#fff;border-color:#c9f4ef;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 5px 0 #0f7773}.sc-app button.big:active{box-shadow:0 1px 0 #0f7773}.sc-best{margin:10px 0 0;font:700 13px/1.3 Playful,sans-serif;color:#5d7f95}.sc-best:empty{display:none}.sc-note{margin:8px 0 0;font:600 11px/1.3 Playful,sans-serif;color:#8aa2b3}.sc-link-btn{position:relative;background:none;border:0;color:var(--sc-teal);font:800 15px/1 Playful,sans-serif;text-decoration:underline;cursor:pointer;padding:8px}.sc-app .sc-results{background:linear-gradient(180deg,rgba(220,245,250,0) 30%,rgba(33,66,90,.35));justify-content:flex-end;align-items:center;padding:0 12px 12px}.sc-results .sc-panel{margin:0;padding:16px 18px 14px;max-height:56dvh;overflow-y:auto}.sc-result-title{position:relative;margin:0;font:800 30px/1 Playful,sans-serif;color:var(--sc-teal)}.sc-result-line{margin:5px 0 8px;font:700 13px/1.3 Playful,sans-serif;color:#50748c}.sc-result-top{display:flex;justify-content:center;gap:22px;align-items:baseline}.sc-result-big,.sc-result-cover{display:flex;align-items:baseline;gap:6px}.sc-result-big b{font:800 46px/1 Playful,sans-serif;color:var(--sc-ink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.sc-result-cover b{font:800 30px/1 Playful,sans-serif;color:var(--sc-pink)}.sc-result-top span{font:800 14px/1 Playful,sans-serif;color:#5d86a0}.sc-newbest .sc-result-big b{color:#e2427f}.sc-zones{display:grid;grid-template-columns:1fr 1fr;grid-gap:4px 10px;gap:4px 10px;margin:10px 0 6px}.sc-zone{display:grid;grid-template-columns:auto 1fr auto;align-items:center;grid-gap:6px;gap:6px;font:700 12px/1 Playful,sans-serif;color:#50748c;text-align:left}.sc-zone span{width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-zone i{height:8px;background:#e3eef3;overflow:hidden}.sc-zone i,.sc-zone i b{display:block;border-radius:4px}.sc-zone i b{height:100%;transform-origin:left;background:var(--sc-teal);animation:sc-grow .7s cubic-bezier(.3,1.2,.5,1) both}.sc-zone[data-level=mid] i b{background:var(--sc-gold)}.sc-zone[data-level=lo] i b{background:var(--sc-lilac)}.sc-zone em{font-style:normal;font-weight:800;color:var(--sc-ink);min-width:32px;text-align:right}@keyframes sc-grow{0%{transform:scaleX(0)}}.sc-result-list{display:grid;grid-template-columns:1fr 1fr;grid-gap:5px 8px;gap:5px 8px;margin:8px 0 10px}.sc-result-list div{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:10px;background:#ecf6f9;font:700 13px/1.2 Playful,sans-serif}.sc-result-list .sc-r-messrow{grid-column:span 2;background:none;padding:0;justify-content:center}.sc-result-list dt{color:#5d7f95}.sc-result-list dd{margin:0;color:var(--sc-ink);font-weight:800}.sc-r-messes{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.sc-r-messes .sc-mess{font-size:11px}.sc-result-btns{display:grid;grid-template-columns:1fr auto auto;grid-gap:4px;gap:4px;align-items:center}.sc-app .share-btn{position:relative;width:100%;color:var(--sc-teal);margin-top:8px;padding:8px 18px;font-size:16px}.sc-allgames{display:inline-block;margin-top:8px;color:#5d7f95;font:800 13px/1 Playful,sans-serif;text-decoration:none}@media (min-width:700px){.sc-head{left:24px;top:18px}.sc-steps{top:18px}.sc-messes{top:64px}.sc-hint{top:98px}.sc-toast{top:154px}.sc-app .sc-results{justify-content:center;align-items:flex-end;padding:24px 40px}.sc-results .sc-panel{width:420px;max-height:calc(100dvh - 48px)}}@media (max-height:700px) and (max-width:700px){.sc-rules li{font-size:12px}.sc-title{font-size:42px}.sc-title span{font-size:34px}}