:root{--ink:#2b2140;--paper:#fff8ec;--sun:#ffd23f;--pink:#ff5fa8;--red:#ff4d5e;--blue:#43aaff;--green:#35cf6a;--purple:#9d63ff;--orange:#ff9a1f;--sky:#58c4ff}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;width:100%;height:100%;margin:0;overflow:hidden}body.tl-page{background:var(--sky);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:Fredoka,"Baloo 2",system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}[hidden]{display:none!important}button:focus-visible,select:focus-visible,input:focus-visible{outline:4px solid var(--pink);outline-offset:4px}#tl-canvas{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}svg{display:block}.tl-round,#tl-next,#tl-play,#tl-end button,#tl-hold{border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);transition:transform .12s,box-shadow .12s}.tl-round:active,#tl-next:active,#tl-play:active,#tl-end button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(5px)}.tl-title{z-index:5;pointer-events:none;flex-direction:column;align-items:center;gap:1.4vh;width:min(92vw,900px);transition:opacity .5s,transform .6s;display:flex;position:fixed;top:5vh;left:50%;transform:translate(-50%)}.tl-title>*{pointer-events:auto}.tl-story .tl-title,.tl-picking .tl-title{opacity:0;pointer-events:none;transform:translate(-50%,-40px)}.tl-story .tl-title *,.tl-picking .tl-title *{pointer-events:none}.tl-story #tl-play,.tl-picking #tl-play{opacity:0;pointer-events:none}.tl-kicker{letter-spacing:3px;text-transform:uppercase;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:#fff;border-radius:30px;margin:0;padding:4px 16px;font-size:clamp(14px,2.2vh,20px);font-weight:600;transform:rotate(-2deg)}.tl-logo{flex-wrap:wrap;justify-content:center;align-items:baseline;margin:0;font-size:clamp(44px,10vh,104px);font-weight:700;line-height:1;display:flex}.tl-logo em{width:.28em}.tl-logo span{color:#fff;-webkit-text-stroke:.07em var(--ink);paint-order:stroke fill;text-shadow:0 .07em 0 var(--ink);animation:2.4s ease-in-out infinite tl-jump;display:inline-block}.tl-logo span:nth-of-type(6n+1){color:var(--red)}.tl-logo span:nth-of-type(6n+2){color:var(--orange)}.tl-logo span:nth-of-type(6n+3){color:var(--sun)}.tl-logo span:nth-of-type(6n+4){color:var(--green)}.tl-logo span:nth-of-type(6n+5){color:var(--blue)}.tl-logo span:nth-of-type(6n){color:var(--purple)}.tl-logo span:nth-of-type(n){animation-delay:calc(var(--i,0) * 80ms)}@keyframes tl-jump{0%,70%,to{transform:translateY(0)rotate(0)}80%{transform:translateY(-.18em)rotate(-5deg)}90%{transform:translateY(.02em)rotate(3deg)}}#tl-play{z-index:5;background:radial-gradient(circle at 35% 30%,#ffe98a,var(--sun) 55%,#ffab19);border-radius:50%;width:clamp(110px,18vh,160px);height:clamp(110px,18vh,160px);transition:opacity .4s;animation:1.3s ease-in-out infinite tl-breathe;position:fixed;bottom:6vh;left:50%;transform:translate(-50%)}#tl-play svg{width:52%;margin:0 auto 0 26%}#tl-play path{fill:#fff;stroke:var(--ink);stroke-width:4px;stroke-linejoin:round}#tl-play:active{transform:translate(-50%)translateY(5px)}@keyframes tl-breathe{50%{transform:translate(-50%)scale(1.08)rotate(-3deg)}}.tl-rotate{border:3px solid var(--ink);background:#fff;border-radius:20px;padding:6px 14px;font-size:15px;font-weight:600;display:none}.tl-rotate i{font-style:normal;animation:2s ease-in-out infinite tl-turn;display:inline-block}@keyframes tl-turn{50%{transform:rotate(90deg)}}@media (orientation:portrait) and (width<=700px){.tl-rotate{display:block}}#tl-home,#tl-jar,#tl-book-btn,#tl-chap-btn,#tl-gear{z-index:6;opacity:0;pointer-events:none;transition:opacity .4s;position:fixed}.tl-story #tl-home,.tl-story #tl-jar,.tl-story #tl-book-btn,.tl-story #tl-chap-btn,.tl-story #tl-gear,.tl-picking #tl-home{opacity:1;pointer-events:auto}#tl-gear{opacity:.85;pointer-events:auto}.tl-round{background:#fff;border-radius:50%;place-items:center;width:64px;height:64px;display:grid}.tl-round svg{width:36px}.tl-round path{fill:none;stroke:var(--ink);stroke-width:3.6px;stroke-linecap:round;stroke-linejoin:round}#tl-home{left:max(16px,env(safe-area-inset-left));top:16px}#tl-book-btn{right:max(16px,env(safe-area-inset-right));background:#ffe3f1;top:16px}#tl-gear{right:max(16px,env(safe-area-inset-right));letter-spacing:1px;color:#2b2140b0;background:#ffffffb0;border:2px solid #2b214060;border-radius:12px;padding:5px 10px;font-size:12px;font-weight:600;bottom:12px}#tl-jar{border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);background:#fff;border-radius:40px;gap:10px;padding:9px 14px;display:flex;top:14px;left:50%;transform:translate(-50%)}#tl-jar .slot{background:#f2eee6;border:3px dashed #2b214055;border-radius:50%;width:38px;height:38px;transition:background .3s}#tl-jar .slot.got{border:3px solid var(--ink);box-shadow:inset -5px -6px #0002,inset 5px 5px #fff6}#tl-jar .slot.got[data-c=red]{background:var(--red)}#tl-jar .slot.got[data-c=yellow]{background:#ffcf24}#tl-jar .slot.got[data-c=green]{background:var(--green)}#tl-jar .slot.got[data-c=blue]{background:#3fa2ff}#tl-jar .slot.got[data-c=purple]{background:var(--purple)}#tl-jar .slot.pop{animation:.7s cubic-bezier(.3,1.8,.5,1) tl-slot}@keyframes tl-slot{0%{transform:scale(.3)}60%{transform:scale(1.5)}to{transform:scale(1)}}#tl-cap{z-index:6;left:50%;bottom:max(18px,env(safe-area-inset-bottom));border:4px solid var(--ink);max-width:min(88vw,820px);box-shadow:0 6px 0 var(--ink);text-align:left;background:#fffdf6;border-radius:28px;align-items:center;gap:12px;padding:12px 22px 12px 14px;transition:transform .45s cubic-bezier(.3,1.5,.5,1);display:flex;position:fixed;transform:translate(-50%,160%)}#tl-cap.on{transform:translate(-50%)}.tl-ear{background:var(--sun);border:3px solid var(--ink);border-radius:50%;flex:none;place-items:center;width:44px;height:44px;font-size:20px;display:grid}#tl-cap-text{font-size:clamp(20px,3.4vh,32px);font-weight:600;line-height:1.2}#tl-cap-text span{margin-right:.26em;transition:color .15s,transform .15s;display:inline-block}#tl-cap-text span.said{color:#2b214099}#tl-cap-text span.lit{color:var(--pink);transform:translateY(-2px)scale(1.06)}#tl-next{z-index:7;right:max(22px,env(safe-area-inset-right));background:radial-gradient(circle at 35% 30%,#9bffc4,var(--green) 60%,#1ea552);border-radius:50%;width:112px;height:112px;margin-top:-56px;animation:1s ease-in-out infinite tl-nudge;position:fixed;top:50%}#tl-next svg{width:62%;margin:auto}#tl-next path{fill:none;stroke:#fff;stroke-width:6px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 0 var(--ink))}@keyframes tl-nudge{50%{transform:translate(10px)scale(1.07)}}#tl-toast{z-index:9;border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);background:#fff;border-radius:26px;align-items:center;gap:10px;padding:8px 18px 8px 8px;transition:transform .45s cubic-bezier(.3,1.6,.5,1);display:flex;position:fixed;top:96px;right:20px;transform:translate(130%)rotate(6deg)}#tl-toast.on{transform:translate(0)rotate(-2deg)}#tl-toast canvas{border:3px solid var(--ink);background:#fff4c8;border-radius:18px;width:84px;height:84px}#tl-toast small{letter-spacing:1.5px;text-transform:uppercase;color:var(--pink);font-size:14px;font-weight:700;display:block}#tl-toast b{font-size:24px}#tl-end{z-index:8;flex-direction:column;align-items:center;gap:12px;animation:.6s cubic-bezier(.3,1.5,.5,1) tl-rise;display:flex;position:fixed;bottom:7vh;left:50%;transform:translate(-50%)}@keyframes tl-rise{0%{transform:translate(-50%,120%)}}#tl-end h2{color:#fff;-webkit-text-stroke:.07em var(--ink);paint-order:stroke fill;text-shadow:0 .07em 0 var(--ink);margin:0;font-size:clamp(46px,9vh,86px)}.tl-end-row{gap:18px;display:flex}#tl-end button{border-radius:32px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:clamp(96px,15vh,132px);height:clamp(96px,15vh,132px);font-size:18px;font-weight:700;display:flex}#tl-end button i{font-size:clamp(34px,6vh,52px);font-style:normal;line-height:1}#tl-again{background:#ffe066}#tl-end-book{background:#ffc2e2}#tl-sleep{background:#c7b6ff}#tl-book,#tl-gate,#tl-parent{z-index:20;background:#2b214077;place-items:center;padding:16px;animation:.25s tl-fade;display:grid;position:fixed;inset:0}@keyframes tl-fade{0%{opacity:0}}.tl-sheet{background:var(--paper);border:5px solid var(--ink);width:min(900px,100%);max-height:calc(100vh - 32px);box-shadow:0 10px 0 var(--ink);border-radius:32px;padding:22px 26px;position:relative;overflow:auto}.tl-sheet header{align-items:center;gap:14px;margin-bottom:12px;display:flex}.tl-sheet h2{margin:0;font-size:34px}#tl-book-count{background:var(--sun);border:3px solid var(--ink);border-radius:20px;padding:2px 12px;font-size:20px;font-weight:700}.tl-x{border:4px solid var(--ink);background:#fff;border-radius:50%;width:52px;height:52px;margin-left:auto;font-size:22px;font-weight:700}#tl-book-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;display:grid}.tl-sticker{border:4px solid var(--ink);text-align:center;box-shadow:0 5px 0 var(--ink);transform:rotate(var(--r,0deg));background:#fff;border-radius:24px;padding:6px 6px 10px}.tl-sticker:nth-child(odd){--r:-2deg}.tl-sticker:nth-child(3n){--r:2deg}.tl-sticker canvas{aspect-ratio:1;width:100%;display:block}.tl-sticker b{font-size:16px}.tl-sticker.missing{background:#efe9dc;border-color:#2b214066;box-shadow:0 5px #2b214055}.tl-sticker.missing canvas{filter:brightness(0)opacity(.14)}.tl-sticker.missing b{color:#2b214066;font-size:26px}.tl-small{text-align:center;width:min(420px,100%)}.tl-small .tl-x{position:absolute;top:14px;right:14px}.tl-small p{margin:8px 0 18px;font-size:18px}#tl-hold{touch-action:none;background:#fff;border-radius:50%;place-items:center;width:150px;height:150px;margin:0 auto 8px;font-size:22px;font-weight:700;display:grid;position:relative}#tl-hold svg{position:absolute;inset:0;transform:rotate(-90deg)}#tl-hold circle{fill:none;stroke:var(--green);stroke-width:10px;stroke-dasharray:277;stroke-dashoffset:277px;stroke-linecap:round}#tl-hold.holding circle{stroke-dashoffset:0;transition:stroke-dashoffset 2s linear}.tl-stat{color:#2b2140b0;margin:0 0 12px;font-size:16px}.tl-set{border:3px solid var(--ink);cursor:pointer;background:#fff;border-radius:18px;align-items:center;gap:14px;margin:8px 0;padding:12px 14px;display:flex}.tl-set input{width:28px;height:28px;accent-color:var(--green);flex:none}.tl-set span{color:#2b2140c0;flex:1;font-size:15px}.tl-set b{color:var(--ink);font-size:19px;display:block}.tl-set select{font:inherit;border:3px solid var(--ink);background:#fff;border-radius:12px;padding:8px 10px;font-size:17px}.tl-pitch{background:#e9f7ff;border:3px dashed #2b214066;border-radius:18px;margin:16px 0 6px;padding:14px 16px}.tl-pitch b{font-size:18px}.tl-pitch p{margin:6px 0 0;font-size:15px}.tl-parent-row{justify-content:space-between;align-items:center;margin-top:12px;font-size:15px;display:flex}.tl-parent-row button{border:3px solid var(--ink);background:#fff;border-radius:14px;padding:8px 14px;font-weight:600}.tl-parent-row a{color:var(--ink);font-weight:600}#tl-night{z-index:15;color:#fff6d8;text-align:center;background:radial-gradient(circle at 50% 30%,#3d3a9e,#15194f 70%);flex-direction:column;justify-content:center;align-items:center;animation:1.4s tl-fade;display:flex;position:fixed;inset:0}.tl-moon{border:5px solid var(--ink);background:radial-gradient(circle at 35% 35%,#fffbe0,#ffe98a);border-radius:50%;width:150px;height:150px;animation:5s ease-in-out infinite tl-float;box-shadow:0 0 90px #ffe98a88}@keyframes tl-float{50%{transform:translateY(-12px)}}#tl-night h2{margin:22px 0 0;font-size:clamp(46px,9vh,80px)}#tl-night p{opacity:.85;margin:6px 0 0;font-size:22px}.tl-zz span{opacity:0;font-size:34px;font-weight:700;animation:3s ease-in-out infinite tl-z;display:inline-block}.tl-zz span:nth-child(2){animation-delay:1s}.tl-zz span:nth-child(3){animation-delay:2s}@keyframes tl-z{20%{opacity:1}to{opacity:0;transform:translate(30px,-50px)scale(1.5)}}#tl-wake{color:#fff6d888;border:2px solid #fff6d844;border-radius:16px;margin-top:36px;padding:8px 16px;font-size:16px}#tl-error{z-index:30;border:4px solid var(--ink);background:#fff;border-radius:20px;padding:14px;font-size:18px;position:fixed;inset:auto 16px 16px}.tl-calm .tl-logo span,.tl-calm #tl-play,.tl-calm #tl-next{animation-duration:3.5s}@media (height<=520px){.tl-round{width:52px;height:52px}.tl-round svg{width:30px}#tl-jar{gap:7px;padding:6px 10px}#tl-jar .slot{width:28px;height:28px}#tl-next{width:86px;height:86px;margin-top:-43px}#tl-cap{padding:8px 16px 8px 10px}.tl-ear{width:34px;height:34px;font-size:16px}#tl-toast{top:74px}#tl-toast canvas{width:60px;height:60px}}#tl-fx{z-index:4;pointer-events:none;position:fixed;inset:0;overflow:hidden}.tl-pop{transform:translate(-50%,-50%) scale(calc(var(--big,1)*1));white-space:nowrap;-webkit-text-stroke:.16em var(--ink);paint-order:stroke fill;text-shadow:0 .08em 0 var(--ink);font-size:clamp(26px,4.4vh,44px);font-weight:700;animation:1.8s cubic-bezier(.3,1.6,.5,1) forwards tl-popin;position:absolute}@keyframes tl-popin{0%{opacity:0;scale:.2}15%{opacity:1;scale:1.1}25%{scale:1}75%{opacity:1}to{opacity:0;scale:.9}}#tl-hand{z-index:5;pointer-events:none;width:0;height:0;position:fixed}#tl-hand svg{transform-origin:14px 0;filter:drop-shadow(0 4px #2b214055);width:58px;animation:1.3s ease-in-out infinite tl-tap;position:absolute;top:4px;left:-14px;transform:rotate(-18deg)}#tl-hand path{fill:#fff;stroke:var(--ink);stroke-width:4px;stroke-linejoin:round}#tl-hand i{border:5px solid #fff;border-radius:50%;width:52px;height:52px;animation:1.3s ease-out infinite tl-ring;position:absolute;top:-26px;left:-26px}#tl-hand.rub svg{animation:1.1s ease-in-out infinite tl-rub}#tl-hand.rub i{display:none}@keyframes tl-tap{0%,to{translate:0}30%{translate:-4px -8px}45%{translate:0}}@keyframes tl-ring{0%,30%{opacity:0;scale:.3}45%{opacity:1}to{opacity:0;scale:1.6}}@keyframes tl-rub{0%,to{translate:-40px}50%{translate:40px}}#tl-breathe{z-index:8;border:5px solid var(--ink);width:170px;height:170px;box-shadow:0 8px 0 var(--ink),0 0 60px #c8b6ffaa;color:var(--ink);touch-action:none;background:radial-gradient(circle at 35% 30%,#fff,#d6c9ff 55%,#9d7bff);border-radius:50%;place-items:center;margin:-85px 0 0 -85px;font-size:24px;font-weight:700;transition:transform 3s cubic-bezier(.3,.6,.4,1),box-shadow .4s;animation:2s ease-in-out infinite tl-bob;display:grid;position:fixed;top:48%;left:50%}#tl-breathe.in{animation:none;transform:scale(1.7)}#tl-breathe.out{transition-duration:2.6s;animation:none;transform:scale(.8)}@keyframes tl-bob{50%{translate:0 -8px}}#tl-chap-btn{right:max(92px,calc(env(safe-area-inset-right) + 92px));background:#dff4ff;top:16px}#tl-chap-title{z-index:6;left:max(16px,env(safe-area-inset-left));border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);background:#fff;border-radius:26px;padding:10px 18px;font-size:18px;font-weight:700;transition:opacity .4s;position:fixed;bottom:16px}#tl-chap-title i{font-style:normal}.tl-story #tl-chap-title{opacity:0;pointer-events:none}#tl-chapters{z-index:20;background:#2b214077;place-items:center;padding:16px;animation:.25s tl-fade;display:grid;position:fixed;inset:0}#tl-surprise{border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);background:linear-gradient(135deg,#ffe066,#ff8cc6 55%,#b99cff);border-radius:22px;padding:10px 18px;font-size:20px;font-weight:700;animation:2.4s ease-in-out infinite tl-wiggle}#tl-surprise i{font-style:normal;animation:2.4s ease-in-out infinite tl-spin;display:inline-block}@keyframes tl-wiggle{0%,80%,to{transform:rotate(0)}85%{transform:rotate(-4deg)}92%{transform:rotate(4deg)}}@keyframes tl-spin{0%,75%{transform:rotate(0)}to{transform:rotate(360deg)}}.tl-chap-story{align-items:center;gap:10px;margin:14px 0 6px;font-size:20px;font-weight:700;display:flex}.tl-chap-story span{color:#2b214088;font-size:14px;font-weight:600}.tl-chap-row{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;display:grid}.tl-chap{border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);background:#fff;border-radius:24px;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;font-size:16px;font-weight:700;transition:transform .12s;display:flex}.tl-chap:hover{transform:translateY(-3px)rotate(-1.5deg)}.tl-chap:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.tl-chap i{border:3px solid var(--ink);background:var(--bg,#fff4c8);border-radius:50%;place-items:center;width:72px;height:72px;font-size:40px;font-style:normal;display:grid}.tl-chap small{color:#2b214088;font-size:12px;font-weight:600}.tl-chap.here{outline:4px dashed var(--pink);outline-offset:3px}#tl-look{z-index:6;right:max(22px,env(safe-area-inset-right));bottom:max(110px,calc(env(safe-area-inset-bottom) + 110px));border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);pointer-events:none;background:#ffffffe6;border-radius:30px;align-items:center;gap:10px;padding:10px 16px 10px 12px;animation:.6s cubic-bezier(.3,1.5,.5,1) tl-look-in;display:flex;position:fixed}#tl-look b{white-space:nowrap;font-size:17px}.tl-look-hand{width:42px;height:44px;position:relative}.tl-look-hand svg{width:34px;animation:1.8s ease-in-out infinite tl-swipe;position:absolute;top:0;left:4px}.tl-look-hand path{fill:#fff;stroke:var(--ink);stroke-width:5px;stroke-linejoin:round}@keyframes tl-swipe{0%,to{translate:-10px;rotate:-12deg}50%{translate:12px;rotate:10deg}}@keyframes tl-look-in{0%{opacity:0;transform:translateY(40px)}}@media (width<=640px){#tl-look b{font-size:14px}}