:root{--ink: #233aa1;--paper: #fbf0cf;--paper-soft: #fff7db;--pink: #ed88d5;--wood: #d4ad8e;--stage-width: min(100vw, calc(100vh * 1672 / 941));--closed-notebook-height: calc(100% * 941 / 1672);--open-notebook-width: calc(100% * 941 / 1672);--balloon-height: calc(var(--stage-width) * 156 / 1672);--paper-sticker-image: none}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{overflow:hidden;color:#3d2d2a;background:var(--wood);font-family:Comic Sans MS,Segoe Print,Bradley Hand,cursive}button{font:inherit}.scene-frame{position:relative;display:grid;width:100vw;height:100vh;height:100dvh;overflow:hidden;place-items:center;background:var(--wood)}.desk-image{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.notebook-stage{position:relative;z-index:1;width:var(--stage-width);aspect-ratio:1672 / 941}.notebook-stage.is-open{cursor:pointer}.notebook-stage.has-page-art{cursor:default}.closed-notebook-button{position:absolute;top:50%;left:50%;z-index:4;display:block;height:var(--closed-notebook-height);padding:0;cursor:pointer;background:transparent;border:0;filter:drop-shadow(0 26px 34px rgb(58 39 28 / .22));transform:translate(-50%,-50%) rotate(-2deg)}.closed-notebook-button:hover{transform:translate(-50%,-50%) rotate(-1deg) scale(1.01)}.closed-notebook-image{display:block;width:auto;height:100%;pointer-events:none}.notebook-image{position:absolute;top:50%;left:50%;z-index:1;display:block;width:var(--open-notebook-width);height:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 30px 42px rgb(58 39 28 / .26));transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none}.notebook-content{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;transition:opacity .18s ease-out,filter .18s ease-out}.notebook-stage.is-page-turning .notebook-content{filter:blur(.4px);opacity:.36}.notebook-page-art{position:absolute;top:50%;left:50%;z-index:5;display:block;width:var(--open-notebook-width);height:auto;pointer-events:none;transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none}.page-turn-frame{position:absolute;top:50%;left:50%;z-index:8;display:block;width:var(--open-notebook-width);height:auto;pointer-events:none;filter:drop-shadow(0 32px 38px rgb(58 39 28 / .2));transform:translate(-50%,-50%);transform-origin:51% 52%;-webkit-user-select:none;user-select:none;animation:page-turn-pop .52s cubic-bezier(.22,.7,.18,1) both}.page-scene{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.animation-complete-marker{position:absolute;width:1px;height:1px;pointer-events:none}.drawn-balloon{position:absolute;z-index:4;top:50%;width:calc(var(--balloon-height) * 344 / 596);height:var(--balloon-height);transform-origin:center center}.drawn-balloon-left{left:39.6%}.drawn-balloon-right{left:60.2%}.balloon-sector,.balloon-line-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.balloon-sector{opacity:0;animation:sector-fill .42s ease-out var(--sector-delay) forwards}.balloon-sector img{display:block;width:100%;height:100%;object-fit:contain}.balloon-sector-1{clip-path:polygon(0 0,50% 0,50% 78%,0 78%)}.balloon-sector-2{clip-path:polygon(50% 0,100% 0,100% 78%,50% 78%)}.balloon-sector-3{clip-path:polygon(12% 34%,88% 34%,88% 78%,12% 78%)}.balloon-sector-4{clip-path:polygon(18% 78%,82% 78%,82% 100%,18% 100%)}.balloon-line-art{overflow:visible;fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.balloon-outline-path{animation:draw-line 1.35s ease-out var(--outline-delay) forwards;stroke-dasharray:1400;stroke-dashoffset:1400}.paper-button{position:absolute;right:12%;bottom:21%;z-index:5;padding:13px 22px 14px;color:#5c3930;cursor:pointer;background:var(--paper-sticker-image, none),linear-gradient(135deg,#fffce4f2,#f6dea6f2),var(--paper);background-position:center;background-repeat:no-repeat;background-size:100% 100%,auto,auto;border:2px solid rgb(128 85 72 / .35);border-radius:43% 57% 48% 52%/54% 44% 56% 46%;box-shadow:0 8px 18px #5736272b;transform:rotate(-3deg)}.paper-button:hover{transform:rotate(-2deg) translateY(-1px)}.page-turn-overlay{position:absolute;z-index:20;top:10%;right:-8%;width:128%;height:86%;background:repeating-linear-gradient(0deg,transparent 0 31px,rgb(35 58 161 / .1) 32px 33px),linear-gradient(100deg,#fff6d5,#f5dfaa 70%,#ebcf91);border-radius:34px 8px 18px 44px;box-shadow:-24px 12px 30px #53362647}.drawn-tv{position:absolute;z-index:3;left:7%;top:18%;width:88%;overflow:visible}.tv-lines{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.tv-lines path,.tv-lines circle{animation:draw-line 2.4s ease-out forwards;stroke-dasharray:1200;stroke-dashoffset:1200}.tv-noise{position:absolute;z-index:2;left:25%;top:43%;width:47%;height:27%;overflow:hidden;border-radius:13px;background:repeating-linear-gradient(90deg,#fffc 0,#fffc 2px,#282c4673 2px,#282c4673 4px),repeating-linear-gradient(0deg,#00000026 0,#00000026 3px,#ffffff2e 3px,#ffffff2e 7px);filter:contrast(1.7) saturate(.2);mix-blend-mode:multiply;animation:static-shift .18s steps(2,end) infinite}.tv-caption{position:absolute;z-index:3;left:33%;top:74%;color:#233aa1b3;font-size:clamp(12px,1.1vw,18px);transform:rotate(2deg)}.mobile-fallback{display:none}@keyframes draw-line{to{stroke-dashoffset:0}}@keyframes show-fill{to{opacity:.9}}@keyframes sector-fill{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes page-turn-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.992) rotateX(4deg)}14%{opacity:1}48%{transform:translate(-50%,-50%) scale(1.006) rotateX(0)}82%{opacity:1;transform:translate(-50%,-50%) scale(1) rotateX(-2deg)}to{opacity:0;transform:translate(-50%,-50%) scale(.996) rotateX(0)}}@keyframes static-shift{0%{transform:translate(0);opacity:.68}50%{transform:translate(-3px,2px);opacity:.92}to{transform:translate(2px,-1px);opacity:.74}}@media (max-width: 899px){body{overflow:auto;background:#d9b58f}.scene-frame{display:none}.mobile-fallback{display:grid;min-height:100vh;min-height:100dvh;padding:24px;place-items:center;background:radial-gradient(circle at 30% 20%,rgb(255 243 205 / .65),transparent 34%),linear-gradient(135deg,#deb991,#bc845d)}.fallback-card{max-width:420px;padding:30px 28px;color:#584136;text-align:center;background:var(--paper-soft);border:2px solid rgb(88 65 54 / .2);border-radius:28px 21px 31px 24px;box-shadow:0 18px 40px #492d1e2e;font-size:20px;line-height:1.45}}