.kimo-tag{display:inline-flex;border:1px solid var(--ink);border-radius:40px;padding:4px 14px;font-size:13px;font-weight:700;transform:rotate(-3deg);margin-bottom:20px;background:#fffdf64d}
.hero-art.interactive-art{height:540px;isolation:isolate;transform:none;margin-left:0}
.interactive-art .hero-cover{z-index:2;width:98px;top:8px;box-shadow:5px 6px 0 #173d3533,12px 18px 20px #173d3526;perspective:800px}
.interactive-art .hero-moon{right:0;top:25px;width:126px;transform:rotate(11deg)}
.interactive-art .hero-rain{left:8px;transform:rotate(-13deg)}
.interactive-art .orbit{width:90%;height:auto;aspect-ratio:1;top:40px;left:5%}
.interactive-art .orbit-two{width:70%;left:15%;top:100px}
.creature-view{position:absolute;inset:70px -24px 65px;cursor:grab;touch-action:pan-y;outline-offset:-14px;z-index:1}
.creature-view:active{cursor:grabbing}.creature-view:focus-visible{outline:3px dashed var(--ink)}
.creature-view canvas{display:block;width:100%;height:100%}.creature-fallback{position:absolute;width:270px;height:270px;object-fit:contain;left:50%;top:50%;transform:translate(-50%,-50%)}
.creature-view[data-state=ready] .creature-fallback{display:none}.creature-view[data-state=fallback] canvas{display:none}
.creature-status{position:absolute;top:0;left:50%;transform:translateX(-50%);text-align:center;font-size:13px;font-weight:700;width:245px;max-width:100%;z-index:3;margin:0;pointer-events:none}
.creature-controls{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:4;flex-wrap:wrap}
.creature-controls button,.book-controls button{min-height:44px;padding:8px 15px;border:1px solid currentColor;border-radius:30px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:700;transition:transform .12s}
.creature-controls button:hover{background:var(--leaf)}.creature-controls button:active,.book-controls button:active{transform:translateY(2px)}
.creature-controls #motion-toggle{background:transparent}.creature-controls button:disabled{opacity:.5;cursor:default}
.interactive-art .art-caption{font-size:11px;bottom:-15px;left:0;right:0;text-align:center;transform:none}
.book-art.book-display{perspective:1100px;overflow:visible;touch-action:pan-y;cursor:grab;isolation:isolate}
.book-display:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}.book-display:active{cursor:grabbing}
.book-object{position:relative;width:182px;height:290px;transform-style:preserve-3d;transform:rotateX(-9deg) rotateY(-24deg);transition:transform .65s cubic-bezier(.2,.7,.2,1)}

.book-object.is-dragging{transition:none}.book-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:2px;transform-style:preserve-3d}
.book-front{transform:translateZ(13px);background:#fffdf6;box-shadow:inset 3px 0 4px #0003}
.book-art .book-front img,.book-card:nth-child(2) .book-art .book-front img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover;box-shadow:none;transform:none;border-radius:2px}
.book-front:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0003,transparent 4%,#fff2 6%,transparent 9%);pointer-events:none}
.book-back{transform:rotateY(180deg) translateZ(13px);background:#dde8c7;color:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px;font-weight:700;font-size:20px;border:1px solid #173d3533}
.book-back small{font-size:11px;font-weight:500;margin-top:20px}.book-spine{position:absolute;left:-13px;top:0;width:26px;height:100%;transform:rotateY(-90deg);background:#dcc18d;border:1px solid #9c8459;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;color:#173d35;font-size:12px;letter-spacing:.15em}
.book-pages{position:absolute;right:-11px;top:4px;width:22px;height:calc(100% - 8px);transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#f7f3e8 0 2px,#d0c9b6 2px 3px)}
.book-bottom,.book-top{position:absolute;left:2px;width:calc(100% - 4px);height:24px;background:repeating-linear-gradient(#f7f3e8 0 2px,#d0c9b6 2px 3px);transform:rotateX(90deg)}
.book-top{top:-12px}.book-bottom{bottom:-12px}
.book-display:after{content:'';position:absolute;bottom:18px;left:15%;width:70%;height:22px;border-radius:50%;background:#0005;filter:blur(10px);z-index:-1}
.book-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}.book-controls button{background:transparent;color:var(--surface);font-size:12px}.book-controls button:hover{background:#fff2}.book-hint{font-size:12px;text-align:center;color:#dae5d5;margin:10px 0 0}
@media(max-width:1000px) and (min-width:681px){.creature-controls{gap:5px}.creature-controls button{padding-inline:10px}.interactive-art .hero-cover{width:75px}.interactive-art .hero-moon{width:100px}}
@media(max-width:680px){.hero-art.interactive-art{height:430px;width:100%;margin-top:38px}.interactive-art .hero-cover{width:66px;top:22px;left:0}.interactive-art .hero-moon{width:88px;left:auto;right:0;top:32px}.creature-view{inset:50px -16px 80px}.creature-status{font-size:12px;width:205px;top:0}.creature-controls{bottom:16px;gap:6px}.creature-controls button{padding:8px 12px}.interactive-art .art-caption{bottom:-13px;font-size:10px}.kimo-tag{font-size:12px;margin-bottom:17px}.book-art.book-display{height:350px}.book-object{width:167px;height:266px}.book-controls{gap:6px}.book-controls button{padding-inline:14px}.search input{font-size:16px}}
@media(prefers-reduced-motion:reduce){.book-object{transition:none}.creature-controls button,.book-controls button{transition:none}}