:root{--cream: #fbf5e6;--ink: #3b3a36;--accent: #f2c14e;--paper: rgba(255, 255, 255, .88);--inset-x: max(48px, env(safe-area-inset-left), env(safe-area-inset-right));--inset-y: max(40px, env(safe-area-inset-top), env(safe-area-inset-bottom));--font: ui-rounded, -apple-system, "Segoe UI", system-ui, sans-serif}html,body{height:100%;margin:0;overflow:hidden;background:var(--cream);color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:none;overscroll-behavior:none;touch-action:manipulation}button,a{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{pointer-events:none}.app{position:fixed;inset:0}.reader,.shelf{position:absolute;inset:0;overflow:hidden}.stage-wrap{position:absolute;inset:0}.stage{width:100%;height:100%;display:block;touch-action:none}.vehicle.tappable{cursor:pointer}.vehicle .body{transform-box:fill-box;transform-origin:center bottom}.vehicle .body.wiggle{animation:wiggle .6s ease-in-out}.vehicle .body.bounce{animation:bounce .5s ease-out}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}@keyframes bounce{0%,to{transform:translateY(0)}40%{transform:translateY(-18px)}}.badge{animation:pop .35s ease-out;transform-box:fill-box;transform-origin:center}@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}.overlay{position:absolute;inset:0;pointer-events:none}.overlay>*{pointer-events:auto}.cards{position:absolute;left:50%;top:15%;transform:translate(-50%) translateY(20px);display:flex;gap:40px;opacity:0;transition:opacity .35s,transform .35s}.cards.shown{opacity:1;transform:translate(-50%) translateY(0)}.cards.disabled .card{opacity:.55}.card{width:190px;height:230px;background:#fff;border:6px solid var(--ink);border-radius:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 10px #3b3a361f}.card .dots{width:104px;height:104px}.card .digit{font-size:68px;font-weight:700;line-height:1}.card.lift{animation:lift 1.6s ease-in-out infinite}@keyframes lift{0%,to{transform:translateY(0)}50%{transform:translateY(-26px)}}.countdown{position:absolute;top:12%;left:50%;transform:translate(-50%);font-size:240px;font-weight:700;line-height:1;color:var(--ink);text-shadow:0 6px 0 rgba(255,255,255,.8);pointer-events:none}.countdown.pop{animation:pop .5s ease-out}.number-row{position:absolute;left:50%;bottom:calc(var(--inset-y) + 150px);transform:translate(-50%);display:flex;gap:30px}.number-btn{width:150px;height:150px;border-radius:50%;background:#fff;border:6px solid var(--ink);font-size:72px;font-weight:700;box-shadow:0 8px #3b3a361f;transition:transform .2s,opacity .3s}.number-btn.next{border-color:var(--accent);box-shadow:0 0 0 10px #f2c14e73}.number-btn.done{opacity:.3;transform:scale(.85)}.narrators{position:absolute;top:var(--inset-y);left:var(--inset-x);right:var(--inset-x);display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.narrators .spacer{flex:1}.narrator{pointer-events:auto;background:none;border:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:.72;transition:opacity .3s,transform .3s}.narrator.active{opacity:1;transform:scale(1.06)}.narrator-name{font-size:24px;font-weight:600;background:var(--paper);padding:2px 14px;border-radius:14px}.face{width:116px;height:116px;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 6px 14px #00000026;display:flex;align-items:center;justify-content:center;background:#e6e0d4}.narrator.active .face{border-color:var(--accent)}.face img{width:100%;height:100%;object-fit:cover;display:block}.face-initial{font-size:52px;font-weight:700;color:var(--ink)}.prompt{position:absolute;left:50%;bottom:calc(var(--inset-y) + 6px);transform:translate(-50%);max-width:62%;background:var(--paper);border-radius:28px;padding:12px 30px;text-align:center;font-size:34px;line-height:1.25;pointer-events:none}.prompt:empty{display:none}.prompt .pinyin{font-size:22px;color:#6b6760;margin-top:2px}.reader.no-text .prompt{display:none}.arrow{position:absolute;bottom:var(--inset-y);width:120px;height:120px;border-radius:50%;border:6px solid var(--ink);background:conic-gradient(var(--accent) calc(var(--hold, 0) * 360deg),#fff 0);font-size:70px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 0 8px;box-shadow:0 8px #3b3a361f;opacity:.55;touch-action:none}.arrow.prev{left:var(--inset-x)}.arrow.next{right:var(--inset-x);display:none}.arrow.next.ready{display:flex;opacity:1;animation:arrive .5s ease-out}@keyframes arrive{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.reader.godnatt .arrow,.reader.godnatt .narrators{display:none}.reader.godnatt .prompt{background:#ffffffb3}.parent-dot{position:absolute;top:calc(var(--inset-y) - 10px);left:50%;transform:translate(-50%);width:48px;height:48px;border-radius:50%;border:none;background:conic-gradient(var(--accent) calc(var(--hold, 0) * 360deg),rgba(59,58,54,.14) 0);touch-action:none}.shelf-dot{top:auto;bottom:calc(var(--inset-y) - 4px);left:var(--inset-x);transform:none}.shelf{background:radial-gradient(ellipse at 50% 20%,#fffdf6 0%,var(--cream) 70%);display:flex;flex-direction:column;align-items:center}.shelf-title{margin-top:calc(var(--inset-y) + 10px);text-align:center}.shelf-title .main{font-size:64px;font-weight:700}.shelf-title .sub{font-size:26px;color:#6b6760;margin-top:6px}.board{margin-top:auto;margin-bottom:14%;width:min(86%,1100px);position:relative}.covers{display:flex;justify-content:center;gap:60px;padding:0 40px}.cover{width:300px;height:400px;padding:0;background:#fff;border:6px solid var(--ink);border-radius:14px 22px 22px 14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:-10px 10px #3b3a3626;transition:transform .25s;position:relative;bottom:-6px}.cover.opening{transform:scale(1.06) rotate(-2deg)}.cover-art{width:100%;flex:1;display:block}.cover-title{font-size:28px;font-weight:700;padding:10px 8px 12px;background:#fff;border-top:6px solid var(--ink)}.plank{height:34px;border-radius:8px;background:linear-gradient(#c8a070,#a97f52);border:6px solid var(--ink);box-shadow:0 16px #3b3a361f}.parent{position:absolute;inset:0;background:#3b3a3659;display:flex;align-items:center;justify-content:center;z-index:50;-webkit-user-select:text;user-select:text}.parent-sheet{width:min(760px,92vw);max-height:88vh;overflow:auto;background:var(--cream);border:6px solid var(--ink);border-radius:28px;padding:28px 32px 32px;font-size:22px;box-sizing:border-box}.parent h2{margin:0 0 18px;font-size:32px}.seg-row{display:flex;align-items:center;gap:16px;margin:12px 0;flex-wrap:wrap}.seg-label{width:220px;font-weight:600}.seg{display:flex;gap:8px;flex-wrap:wrap}.seg-btn{padding:10px 18px;border-radius:14px;border:3px solid var(--ink);background:#fff;font-size:20px}.seg-btn.on{background:var(--accent);font-weight:700}.seg-btn.off{opacity:.4}.seg-row input[type=range]{flex:1;min-width:200px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 20px}.big{padding:14px 22px;border-radius:16px;border:3px solid var(--ink);background:#fff;font-size:22px;font-weight:600;text-decoration:none;display:inline-block}.big.close{width:100%;background:var(--accent);margin-top:10px}.info{font-size:17px;color:#6b6760;margin:20px 0 10px;line-height:1.4}.fatal{padding:60px;text-align:center}.fatal h1{font-size:48px}.fatal p{font-size:24px}.booting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px;font-weight:700;color:#c9bfa8}.login{position:absolute;inset:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;box-sizing:border-box;-webkit-user-select:text;user-select:text}.login h1{font-size:64px;margin:0 0 8px}.login-sub{font-size:22px;color:#6b6760;margin:0 0 24px;max-width:520px;text-align:center;line-height:1.4}.login-form{width:min(440px,90vw);display:flex;flex-direction:column}.login-form label{font-size:18px;margin:12px 0 6px}.login-form input{font-size:22px;padding:12px 16px;border:3px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink)}.login button,.login-form button{margin-top:20px;font-size:22px;padding:14px;border-radius:16px;border:3px solid var(--ink);background:var(--accent);font-weight:700}.login button:disabled{opacity:.6}.login-message{min-height:1.4em;margin:14px 0 0;color:#b03a2e;font-size:18px;text-align:center}.offline-note{position:absolute;top:calc(var(--inset-y) - 10px);right:var(--inset-x);font-size:16px;color:#8a8580;background:#ffffffb3;padding:4px 12px;border-radius:12px}.parent h3{margin:26px 0 8px;font-size:26px}.family-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.family-tile{background:#fff;border:2px solid #d9d3c7;border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.face.small{width:72px;height:72px;border-width:4px}.face.small .face-initial{font-size:32px}.tile-name{font-weight:600;font-size:18px}.tile-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.mini{font-size:15px;padding:6px 10px;border-radius:10px;border:2px solid var(--ink);background:#fff}.tile-status{font-size:14px;color:#6b6760;min-height:1.2em;word-break:break-all}