.sound-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -12px; padding: 11px; border: 0; background: none; color: #a43e75; }
.sound-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .sound-slash { display: none; }
.sound-toggle[aria-pressed="false"] .sound-slash { display: block; }
.sound-toggle[aria-pressed="false"] .sound-waves { display: none; }
.sound-toggle:hover { color: #365b73; }

.spellbook-art-window { perspective: 1200px; }
.book-leaf { position: absolute; inset: 0; transform-origin: 50% 50%; backface-visibility: hidden; }
.book-leaf-left { clip-path: inset(0 49% 0 0); }
.book-leaf-right { clip-path: inset(0 0 0 50%); }
.book-candy-art { clip-path: inset(54% 28.5% 39% 65%); transform-origin: 68.2% 57.5%; }
.book-candy-hotspot { position: absolute; left: 70.5%; top: 59%; width: 16%; height: 15%; z-index: 3; cursor: pointer; }
.book-candy-hotspot::after { content: ""; position: absolute; left: 30%; top: 45%; width: 4px; height: 4px; border: 1px solid #dc90b8; transform: rotate(45deg); opacity: 0; transition: opacity .3s; }
.book-candy-hotspot:hover::after { opacity: .8; }
.spellbook.is-candy-near .book-candy-art,.spellbook:focus-visible .book-candy-art { animation: candy-invitation 1.8s ease-in-out infinite; }
@keyframes candy-invitation { 0%,100% { transform: rotate(-4deg); } 45% { transform: rotate(5deg) translateY(-2px); } 65% { transform: rotate(1deg); } }
.book-scene.is-unfolding .book-leaf-left { animation: book-open-left 1s cubic-bezier(.2,.65,.25,1) both; }
.book-scene.is-unfolding .book-leaf-right { animation: book-open-right 1.1s cubic-bezier(.2,.65,.25,1) both; }
.book-scene.is-unfolding .book-candy-art { animation: candy-arrive .8s .3s ease-out both; }
.book-scene.is-unfolding .page-left { animation: book-copy-arrive .7s .35s ease both; }
.book-scene.is-unfolding .page-right { animation: book-copy-arrive .7s .62s ease both; }
@keyframes book-open-left { from { transform: rotateY(31deg) scaleX(.94); opacity: .35; } to { transform: rotateY(0) scaleX(1); opacity: 1; } }
@keyframes book-open-right { from { transform: rotateY(-31deg) scaleX(.94); opacity: .35; } to { transform: rotateY(0) scaleX(1); opacity: 1; } }
@keyframes book-copy-arrive { from { opacity: 0; filter: blur(1px); } to { opacity: 1; filter: none; } }
@keyframes candy-arrive { from { opacity: 0; } to { opacity: 1; } }

.bottle-float > img.bottle-source { opacity: 0; }
.bottle-rendering,.bottle-detail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bottle-detail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.media-liquid path { stroke: #8ac6df; stroke-width: 3.4; opacity: .7; }
.media-liquid .liquid-surface { transform-origin: 50% 74%; animation: liquid-breathe 6.2s ease-in-out infinite; }
@keyframes liquid-breathe { 0%,100% { transform: translate(0,1px) rotate(-.6deg); } 50% { transform: translate(0,-2px) rotate(.6deg); } }
.bead-part { animation: bead-nudge var(--part-period,7s) var(--part-delay,0s) ease-in-out infinite; }
@keyframes bead-nudge { 0%,73%,100% { transform: translate(0,0); } 81% { transform: translate(var(--part-dx,3px),-5px); } 90% { transform: translate(0,1px); } }
.gummy-part { transform-box: fill-box; transform-origin: 50% 90%; animation: gummy-breathe var(--part-period,5.8s) var(--part-delay,0s) ease-in-out infinite; }
@keyframes gummy-breathe { 0%,64%,100% { transform: scale(1,1); } 73% { transform: scale(1.07,.92); } 82% { transform: scale(.97,1.04); } 90% { transform: scale(1.02,.98); } }
.pipette-liquid path { stroke: #d78eb8; stroke-width: 8; opacity: .4; stroke-dasharray: 480; stroke-dashoffset: 480; animation: pipette-fill 8s ease-in-out infinite; }
@keyframes pipette-fill { 0%,12%,100% { stroke-dashoffset: 480; opacity: .12; } 55%,73% { stroke-dashoffset: 35; opacity: .45; } 90% { stroke-dashoffset: 400; opacity: .2; } }
.potion-events.is-extracting .pipette-liquid { visibility: hidden; }
.lab-stage.is-mixing .bottle-rendering *,.lab-stage.is-mixing .bottle-detail * { animation-play-state: paused; }

.potion-portal { position: fixed; inset: 0; z-index: 30; pointer-events: all; overflow: hidden; }
body.is-portal-active { overflow: hidden !important; }
.chapter-stamp { position: absolute; right: 0; top: 12px; width: 65px; height: 87px; pointer-events: none; }
.chapter-stamp img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.works-heading { position: relative; padding-right: 90px; }
.chapter-recipe { font-size: 11px; line-height: 1.6; margin-top: 20px; color: #a43e75; }
@media(max-width:820px) { .header-right { gap: 22px; } .sound-toggle { margin-right: -6px; } .chapter-stamp { width: 45px; height: 64px; } .works-heading { padding-right: 60px; } }
@media(prefers-reduced-motion:reduce) {
  .book-leaf,.book-candy-art,.book-scene .book-page,.bottle-detail *,.bottle-rendering * { animation: none !important; }
  .book-candy-hotspot::after { transition: none; }
}