html,body,#app,section{-webkit-user-select:none;user-select:none;height:100%;margin:0}html,body{color:#f4efe6;background:#1e2a4a;font-family:system-ui,sans-serif;overflow:hidden}*,:before,:after{box-sizing:border-box}#app,section{background:#1e2a4a}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}#screen-pin{justify-content:center;align-items:center;display:flex}#screen-pin[hidden],#screen-shelf[hidden],#screen-player[hidden]{display:none}.pin-setup{text-align:center;margin:0 2rem;font-size:1.4rem;line-height:1.4}.pin-gate{flex-direction:column;align-items:center;gap:2rem;display:flex}.pin-dots{gap:1.25rem;display:flex}.pin-dot{background:0 0;border:2px solid #f4efe6;border-radius:50%;width:18px;height:18px}.pin-dot.filled{background:#f4efe6}.pin-pad{grid-template-columns:repeat(3,minmax(64px,88px));gap:14px;display:grid}.pin-key{cursor:pointer;background:#2b3a63;border:0;border-radius:50%;width:88px;min-width:64px;height:88px;min-height:64px;font-size:2rem}.pin-key:active{background:#3a4d7d}.pin-spacer{min-width:64px;min-height:64px}#screen-shelf{flex-direction:column;padding:6%;display:flex}.shelf{flex:1;align-items:center;gap:4%;display:flex;overflow-x:auto}.card{aspect-ratio:3/4;cursor:pointer;background:#14203a;border:0;border-radius:16px;flex:0 0 30%;width:30%;padding:0;overflow:hidden;box-shadow:0 16px 28px #00000059}.card img{object-fit:cover;width:100%;height:100%;display:block}.card.openable{outline-offset:4px;outline:5px solid #ffd27a}.card.soon{opacity:.55;cursor:default}#screen-player{display:flex;position:relative}.theater{background:#0b1224;position:absolute;inset:0;overflow:hidden}.page-image{object-fit:contain;transform-origin:50%;background:#87c6f0;width:100%;height:100%;animation:7s ease-in-out infinite cartoon-breathe;display:block}@keyframes cartoon-breathe{50%{transform:scale(1.04)}}.cartoon-fx{pointer-events:none;z-index:1;position:absolute}canvas.scene3d{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.subtitle{color:#fff8ee;text-align:center;z-index:8;pointer-events:none;background:#0a0e16b8;border-radius:16px;width:min(92%,720px);padding:12px 18px;font-size:clamp(1.05rem,3.2vw,1.45rem);line-height:1.35;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.subtitle[hidden]{display:none}.spots{pointer-events:none;z-index:2;position:absolute;inset:0}.spot{cursor:pointer;pointer-events:auto;background:0 0;border:0;border-radius:50%;padding:0;animation:1.6s ease-in-out infinite glow-pulse;position:absolute;box-shadow:0 0 0 5px #ffdc6e80,0 0 22px 10px #ffbe3c59}.spot.active{box-shadow:0 0 0 7px #ffecaad9,0 0 32px 14px #ffc8508c}.spot-label{color:#fff8ee;letter-spacing:.02em;text-shadow:0 1px 4px #000000a6;white-space:nowrap;pointer-events:none;font-size:13px;font-weight:600;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%)}.motion{pointer-events:none;position:absolute;inset:0;overflow:hidden}.motion.rain:before{content:"";background-image:repeating-linear-gradient(200deg,#0000 0 14px,#d2e6ff59 14px 16px);animation:1.4s linear infinite rain-fall;position:absolute;inset:-30% 0}.motion.wisps:before,.motion.wisps:after{content:"";background:radial-gradient(circle,#ffffff4d,#0000 70%);border-radius:50%;width:42%;height:38%;animation:5s ease-in-out infinite wisp-up;position:absolute;bottom:8%;left:22%}.motion.wisps:after{width:28%;animation-delay:1.6s;left:48%}@keyframes rain-fall{to{transform:translateY(22%)}}@keyframes wisp-up{0%{opacity:0;transform:translateY(18%)scale(.85)}35%{opacity:.65}to{opacity:0;transform:translateY(-80%)scale(1.2)}}.motion.fx-sun:before{content:"";aspect-ratio:1;background:radial-gradient(circle,#ffdc508c,#0000 70%);border-radius:50%;width:28%;animation:1.1s ease-in-out infinite sun-pulse;position:absolute;top:2%;right:4%}.motion.fx-cloud:before{content:"";background:radial-gradient(circle,#ffffff73,#0000 70%);border-radius:50%;width:30%;height:28%;animation:1.4s ease-in-out infinite cloud-bounce;position:absolute;top:4%;left:8%}.motion.fx-rain:before{content:"";background-image:repeating-linear-gradient(200deg,#0000 0 16px,#50a0e68c 16px 19px);animation:.9s linear infinite rain-fall;position:absolute;inset:-20% 8% 30%}.motion.fx-mist:before,.motion.fx-mist:after{content:"";background:radial-gradient(circle,#ffffff8c,#0000 70%);border-radius:50%;width:18%;height:34%;animation:2.8s ease-in-out infinite wisp-up;position:absolute;bottom:28%;left:52%}.motion.fx-mist:after{animation-delay:.7s;left:62%}.motion.fx-water:before{content:"";border:4px solid #46a0e673;border-radius:50%;width:44%;height:22%;animation:1.3s ease-out infinite water-ripple;position:absolute;bottom:18%;left:28%}@keyframes sun-pulse{50%{opacity:.85;transform:scale(1.18)}}@keyframes cloud-bounce{50%{transform:translateY(-8%)scale(1.06)}}@keyframes water-ripple{0%{opacity:.8;transform:scale(.7)}to{opacity:0;transform:scale(1.25)}}.glow{cursor:pointer;z-index:2;background:0 0;border:0;border-radius:50%;padding:0;animation:1.6s ease-in-out infinite glow-pulse;position:absolute;box-shadow:0 0 0 6px #ffdc6e8c,0 0 28px 12px #ffbe3c73}@keyframes glow-pulse{50%{opacity:.85;transform:scale(1.08)}}.ear{cursor:pointer;z-index:6;background:#14203a8c;border:0;border-radius:50%;width:56px;height:56px;font-size:1.6rem;line-height:1;position:absolute;bottom:16px;left:16px}.dots{opacity:.28;cursor:pointer;z-index:6;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:56px;height:56px;display:flex;position:absolute;top:16px;right:16px}.dots i{background:#f4efe6;border-radius:50%;width:6px;height:6px;display:block}.parent-panel{z-index:7;background:#0e1428eb;border-radius:16px;flex-direction:column;gap:8px;padding:12px;display:flex;position:absolute;top:76px;right:16px;box-shadow:0 12px 24px #00000059}.parent-panel button{cursor:pointer;background:#2b3a63;border:0;border-radius:999px;min-height:48px;padding:0 18px}.end-veil{z-index:5;background:linear-gradient(#0000 45%,#0a0e1ce0);flex-direction:column;justify-content:flex-end;align-items:center;gap:1rem;padding-bottom:8%;display:flex;position:absolute;inset:0}.again{color:#1e2a4a;cursor:pointer;background:#ffd27a;border:0;border-radius:999px;min-width:240px;min-height:88px;padding:0 2.5rem;font-size:2rem;font-weight:600}.back-books{opacity:.75;cursor:pointer;background:0 0;border:0;font-size:1.1rem}.motion[hidden],.glow[hidden],.ear[hidden],.parent-panel[hidden],.end-veil[hidden],.play-hint[hidden]{display:none}.pieces{pointer-events:none;z-index:3;position:absolute}.piece{cursor:grab;pointer-events:auto;filter:drop-shadow(6px 10px #281c1029);touch-action:none;background:0 0;border:0;padding:0;position:absolute;transform:translate(-50%,-50%)}.piece.locked{cursor:default}.piece.hint{animation:1.2s ease-in-out infinite piece-hint}.piece.dragging{cursor:grabbing;z-index:6;filter:drop-shadow(10px 16px #281c1038)}.piece img{pointer-events:none;border-radius:18px;width:100%;height:auto;display:block}@keyframes piece-hint{50%{transform:translate(-50%,-50%)scale(1.06)}}.play-hint{color:#fff8ee;z-index:4;pointer-events:none;background:#14100c73;border-radius:999px;padding:8px 16px;font-size:.95rem;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}