/* ===================================================================== The Library (library) */

/* ---------- scene: ambient ---------- */
.library-deco { pointer-events: none; }
.library-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: library-flick 1.3s ease-in-out infinite alternate; }
@keyframes library-flick {
  0% { transform: scale(1, 1) skewX(0deg); }
  25% { transform: scale(.9, 1.1) skewX(4deg); }
  50% { transform: scale(1.06, .92) skewX(-3deg); }
  75% { transform: scale(.95, 1.12) skewX(2deg); }
  100% { transform: scale(1, .96) skewX(-4deg); }
}
.library-cglow { animation: library-glow 2.2s ease-in-out infinite alternate; }
@keyframes library-glow { 0% { opacity: .78; } 45% { opacity: 1; } 60% { opacity: .82; } 100% { opacity: .95; } }
.library-coals { animation: library-glow 1.6s ease-in-out infinite alternate; }

.library-rain { animation: library-rain .55s linear infinite; }
@keyframes library-rain { from { transform: translate(0, 0); } to { transform: translate(-14px, 42px); } }
.library-clouds { animation: library-clouds 38s ease-in-out infinite alternate; }
@keyframes library-clouds { to { transform: translateX(-70px); } }
.library-leaf { transform-box: fill-box; transform-origin: center; opacity: 0; animation: library-leaf 10s linear infinite; }
@keyframes library-leaf {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  3% { opacity: 1; }
  12% { transform: translate(-50px, 22px) rotate(150deg); }
  22% { transform: translate(-100px, -6px) rotate(300deg); }
  32% { transform: translate(-155px, 30px) rotate(470deg); }
  40% { transform: translate(-215px, 16px) rotate(600deg); opacity: 1; }
  41%, 100% { transform: translate(-220px, 16px) rotate(600deg); opacity: 0; }
}
/* lightning: one 13 s cycle shared by the window, the sky and the whole room */
.library-skyflash { opacity: 0; animation: library-sky 13s linear infinite; }
@keyframes library-sky { 0%, 70.9%, 73.6%, 74%, 75.6%, 100% { opacity: 0; } 71.2% { opacity: .75; } 72.4% { opacity: .35; } 74.6% { opacity: .5; } }
.library-wbolt { opacity: 0; animation: library-wbolt 13s linear infinite; }
@keyframes library-wbolt { 0%, 70.9%, 72.8%, 74.2%, 75.2%, 100% { opacity: 0; } 71.1%, 72.5% { opacity: 1; } 74.5% { opacity: .8; } }
.library-ambflash { opacity: 0; animation: library-amb 13s linear infinite; }
@keyframes library-amb { 0%, 70.9%, 73.5%, 74.1%, 75.6%, 100% { opacity: 0; } 71.2% { opacity: .13; } 72.4% { opacity: .05; } 74.6% { opacity: .09; } }
.library-strikeflash { opacity: 0; }
.library-strike .library-strikeflash { animation: library-strikeflash 1.3s ease-out; }
@keyframes library-strikeflash { 0% { opacity: 0; } 6% { opacity: .85; } 16% { opacity: .1; } 26% { opacity: .6; } 100% { opacity: 0; } }

.library-mote { transform-box: fill-box; opacity: 0; animation: library-mote 8s ease-in-out infinite; }
@keyframes library-mote { 0% { transform: translate(0, 0); opacity: 0; } 25% { opacity: .8; } 75% { opacity: .5; } 100% { transform: translate(14px, -40px); opacity: 0; } }
.library-wisp { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: library-wisp 3.9s ease-out infinite; }
@keyframes library-wisp { 0% { transform: translate(0, 6px) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-5px, -38px) scale(1.6); opacity: 0; } }

/* ---------- scene: Circe's corner ---------- */
.library-magicsmoke { opacity: 0; transition: opacity 1s; }
.library-brewed .library-magicsmoke { opacity: 1; }
.library-wisps { transition: opacity .6s; }
.library-brewed .library-wisps { opacity: 0; }
.library-brewliq { transition: fill 1s; }
.library-brewed .library-brewliq { animation: library-potion 2.4s ease-in-out infinite alternate; }
@keyframes library-potion { from { fill: #6a3fa0; } to { fill: #3fa87a; } }
.library-driftsmoke { opacity: 1; }
.library-driftsmoke ellipse { transform-box: fill-box; transform-origin: center; opacity: 0; }
.library-drift .library-driftsmoke ellipse { animation: library-drift 2.6s ease-out forwards; }
.library-drift .library-driftsmoke ellipse:nth-child(2) { animation-delay: .25s; }
.library-drift .library-driftsmoke ellipse:nth-child(3) { animation-delay: .5s; }
@keyframes library-drift {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  25% { opacity: .95; }
  70% { transform: translate(-70px, -14px) scale(1.7); opacity: .8; }
  100% { transform: translate(-82px, -4px) scale(2); opacity: 0; }
}
.library-loomcover { transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(.55); transition: transform 3.4s steps(16, end); }
.library-woven .library-loomcover { transform: scaleY(0); }
.library-shuttle { transition: opacity .6s; }
.library-woven .library-shuttle { opacity: 0; }

/* ---------- scene: portraits, coils, machine ---------- */
.library-portrait .library-phalo { opacity: 0; transition: opacity .6s; }
.library-portrait.library-pick .library-phalo { opacity: .85; }
.library-coil .library-halo { opacity: 0; transition: opacity .6s; }
.library-coil.library-on .library-halo { opacity: .85; animation: library-hum 1.8s ease-in-out infinite alternate; }
@keyframes library-hum { from { opacity: .55; } to { opacity: .95; } }
.library-coil .library-spiral { stroke: #b0703a; transition: stroke .5s; }
.library-coil.library-on .library-spiral { stroke: #efe6ff; }
.library-zap { opacity: 0; stroke-dasharray: 5 38; transition: opacity .5s; }
.library-charged .library-zap { opacity: .85; animation: library-zapdash 1.4s linear infinite; }
@keyframes library-zapdash { to { stroke-dashoffset: -43; } }
.library-arc { opacity: 0; }
.library-charged.library-lit .library-arc { animation: library-arcflick 2.3s steps(1, end) infinite; }
@keyframes library-arcflick { 0%, 100% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: 0; } 15% { opacity: .8; } 19% { opacity: 0; } 61% { opacity: 1; } 64% { opacity: 0; } }
.library-bowlember { opacity: 0; transition: opacity .8s; }
.library-lit .library-bowlember { opacity: 1; }

.library-zleverg .library-leverarm, .library-slever .library-leverarm { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.5, 0, .3, 1.3); }
.library-alive .library-slever .library-leverarm { transform: rotate(-140deg); }

/* ---------- Frankenkitty (scene + close-up) ---------- */
.library-klying { transition: opacity .3s; }
.library-ksit { opacity: 0; transition: opacity .35s; }
.library-alive .library-klying { opacity: 0; }
.library-alive .library-ksit { opacity: 1; }
.library-krec { transform-box: fill-box; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .4s; }
.library-recgone .library-krec { opacity: 0; }
.library-alive .library-ktail { transform-box: fill-box; transform-origin: 0% 100%; animation: library-wag 2.6s ease-in-out infinite; }
@keyframes library-wag { 50% { transform: rotate(10deg); } }
.library-alive .library-ksit .library-kblink { transform-box: fill-box; transform-origin: center; animation: library-blink 5s infinite; }
@keyframes library-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* ---------- chest (scene) ---------- */
.library-slid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.5, 0, .6, 1), opacity .6s; }
.library-chestopen .library-slid { transform: scaleY(.1); opacity: 0; }
.library-slidopen { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .8s .25s cubic-bezier(.3, 1.5, .5, 1); }
.library-chestopen .library-slidopen { transform: none; }
.library-chestglow { opacity: 0; transition: opacity .8s .4s; }
.library-chestopen .library-chestglow { opacity: 1; animation: library-glow 1.8s ease-in-out infinite alternate; }
.library-chestopen.library-embergone .library-chestglow { opacity: 0; animation: none; }

/* ---------- trapdoor to the attic ---------- */
.library-hatch { transform-box: fill-box; transform-origin: 50% 0%; transition: transform .9s cubic-bezier(.3, 1.2, .5, 1), filter .9s; }
.library-atticopen .library-hatch { transform: scaleY(0); filter: brightness(1.6); }
.library-atticlight { opacity: 0; transition: opacity .8s .3s; }
.library-atticopen .library-atticlight { opacity: 1; animation: library-glow 3s ease-in-out infinite alternate; }
.library-atticbeam { opacity: 0; transition: opacity 1.2s .4s; mix-blend-mode: screen; }
.library-atticopen .library-atticbeam { opacity: 1; }
.library-padlock { transform-box: fill-box; transform-origin: 50% 0%; }
.library-rattle { animation: library-rattle .5s ease; }
@keyframes library-rattle { 20% { transform: rotate(14deg); } 45% { transform: rotate(-11deg); } 70% { transform: rotate(6deg); } }
.library-padlock.library-dropped { animation: library-drop .55s ease-in forwards; }
@keyframes library-drop { 30% { transform: rotate(-20deg); } 100% { transform: translateY(160px) rotate(40deg); opacity: 0; } }
.library-atticopen .library-padlock { opacity: 0; }

/* ---------- full-screen lightning flash (body level) ---------- */
.library-flash { position: fixed; inset: 0; z-index: 58; pointer-events: none; background: #f2f5ff; opacity: 0; animation: library-flashbang .9s ease-out forwards; }
.library-flash-soft { animation-name: library-flashsoft; }
@keyframes library-flashbang { 0% { opacity: 0; } 7% { opacity: .92; } 18% { opacity: .08; } 28% { opacity: .7; } 100% { opacity: 0; } }
@keyframes library-flashsoft { 0% { opacity: 0; } 10% { opacity: .45; } 100% { opacity: 0; } }

/* ===================================================================== close-ups */
.library-z { color: var(--ink); }
.library-z .hs { cursor: pointer; transition: filter .2s; }
.library-z .hs:hover, .library-z .hs:focus-visible { filter: drop-shadow(0 0 6px rgba(255, 216, 77, .95)); outline: none; }
body.using .library-z .hs { cursor: crosshair; }
.library-cap { text-align: center; margin: 10px 0 0; color: var(--muted); font-size: .9rem; }

/* ---------- lectern book ---------- */
.library-book { display: grid; grid-template-columns: 1fr 1fr; border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); overflow: hidden; }
.library-page { padding: 18px 20px 20px; font-family: "Fraunces", Georgia, serif; font-size: .93rem; line-height: 1.55; color: #3a2a23; }
.library-page:first-child { background: linear-gradient(90deg, #f4e7c8 82%, #dcc89c); }
.library-page:last-child { background: linear-gradient(270deg, #f4e7c8 82%, #dcc89c); }
.library-page h4 { margin: 0 0 10px; font-size: 1.15rem; color: #6b2a1a; }
.library-page p { margin: 0 0 10px; }
.library-page h4 + p::first-letter { float: left; font-size: 2.7em; line-height: .85; margin: 5px 6px 0 0; color: var(--cherry-d); font-weight: 800; }
.library-villa { display: block; width: 100%; border-radius: 3px; margin-bottom: 10px; box-shadow: inset 0 0 0 1px #5a4632; }
.library-margin { color: var(--cherry-d); transform: rotate(-1.5deg); margin-top: 12px !important; font-size: 1.25rem; }
@media (max-width: 600px) {
  .library-book { grid-template-columns: 1fr; }
  .library-page:first-child, .library-page:last-child { background: #f4e7c8; }
  .library-page:first-child { border-bottom: 2px dashed #d9c69c; }
}

/* ---------- portrait wall ---------- */
.library-gallery { background: radial-gradient(ellipse at 50% 0%, #3d2c38, #1c131a 75%); border-radius: 14px; padding: 14px 8px 12px; color: var(--cream); }
.library-plaque { margin: 0 auto 12px; width: fit-content; max-width: 100%; text-align: center; background: linear-gradient(135deg, #f7e08f, #c9a227 55%, #8a6a1a); color: #3a2a23; font-family: "Fraunces", serif; font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 14px; border-radius: 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.library-frames { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 6px; }
.library-pf { width: 78px; border: 0; background: none; padding: 4px 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; border-radius: 10px; color: var(--cream); transition: transform .2s; }
.library-pf:hover { transform: translateY(-3px); }
.library-pf svg { width: 60px; height: 76px; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); transition: filter .35s; }
.library-pn { font-size: .66rem; line-height: 1.15; font-weight: 800; background: linear-gradient(#e2c35a, #b8922a); color: #2a1e10; padding: 2px 6px; border-radius: 3px; text-align: center; min-height: 2.35em; display: flex; align-items: center; justify-content: center; transition: background .35s; }
.library-pf.library-pick svg { filter: drop-shadow(0 0 5px #c9b4ff) drop-shadow(0 0 14px rgba(143, 107, 255, .85)); }
.library-pf.library-pick .library-pn { background: linear-gradient(#f1eaff, #b89cff); }
.library-pf.library-bad svg { animation: library-bad .8s ease; }
@keyframes library-bad { 20%, 60% { filter: drop-shadow(0 0 6px #ff5a5a) drop-shadow(0 0 14px rgba(255, 60, 60, .8)); } }
.library-vials { display: flex; justify-content: center; gap: 14px; margin: 16px 0 0; }
.library-vial { position: relative; width: 16px; height: 34px; border-radius: 8px 8px 5px 5px; background: rgba(207, 230, 255, .1); box-shadow: inset 0 0 0 2px rgba(207, 230, 255, .4); transition: background .4s, box-shadow .4s; }
.library-vial::before { content: ""; position: absolute; top: -7px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: #c9a227; }
.library-vial.library-on { background: radial-gradient(circle at 50% 40%, #fff, #b89cff 45%, #6a4cff); box-shadow: 0 0 12px #9d7bff, inset 0 0 0 2px #e8dcff; animation: library-vial 1.2s ease-in-out infinite alternate; }
@keyframes library-vial { to { box-shadow: 0 0 20px #b89cff, inset 0 0 0 2px #fff; } }
.library-gallery .library-cap { color: #d8c8e0; }

/* ---------- parchment ---------- */
.library-parchz { padding: 8px 4px; }
.library-scroll { position: relative; max-width: 360px; margin: 8px auto; padding: 28px 26px 22px; color: #4a2a18; border-radius: 3px; transform: rotate(-1deg);
  background: radial-gradient(ellipse at 30% 20%, #f8ecd2, #e9d4a8 70%, #d4b886);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25), inset 0 0 34px rgba(120, 80, 30, .28); }
.library-scroll::before, .library-scroll::after { content: ""; position: absolute; left: -8px; right: -8px; height: 14px; border-radius: 7px; background: linear-gradient(#d9c08e, #b89a64 60%, #9a7c48); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.library-scroll::before { top: -6px; } .library-scroll::after { bottom: -6px; }
.library-scroll p { margin: 0 0 6px; }
.library-recipe { font-size: 1.75rem !important; color: #3a1a10; }
.library-never { color: var(--cherry-d); font-weight: 700; text-decoration: underline wavy rgba(138, 31, 40, .6); text-underline-offset: 4px; }
.library-sig { text-align: right; margin-right: 60px !important; }
.library-pigdoodle { position: absolute; right: 16px; bottom: 18px; width: 54px; opacity: .85; transform: rotate(8deg); }

/* ---------- Greek alphabet chart ---------- */
.library-chartz { background: #eadbb6; padding: 14px 12px; border-radius: 6px; box-shadow: inset 0 0 0 3px #8a6a3a, inset 0 0 40px rgba(120, 80, 30, .25); }
.library-chartz h4 { margin: 0 0 10px; text-align: center; font-family: Georgia, serif; color: #6b2a1a; font-size: 1.35rem; }
.library-chartz h4 small { display: block; font-family: "Nunito", sans-serif; font-size: .72rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.library-agrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.library-acell { display: flex; flex-direction: column; align-items: center; padding: 6px 2px 5px; border-radius: 6px; background: rgba(255, 250, 240, .6); box-shadow: inset 0 0 0 1px rgba(138, 106, 58, .35); text-align: center; }
.library-acell b { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; line-height: 1.1; color: #3a2a23; }
.library-acell span { font-weight: 800; font-size: .85rem; color: var(--cherry-d); }
.library-acell small { font-size: .58rem; line-height: 1.1; color: var(--muted); }
.library-chartfoot { text-align: center; margin: 10px 0 0; color: var(--muted); }
@media (max-width: 520px) { .library-agrid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- herb shelf + bronze bowl ---------- */
.library-brew { background: radial-gradient(ellipse at 50% 100%, #4d2c1c, #1e1418 72%); border-radius: 14px; padding: 12px 8px; }
.library-jars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 0; max-width: 360px; margin: 0 auto; }
.library-jar { position: relative; border: 0; background: none; cursor: pointer; padding: 4px 4px 0; border-bottom: 7px solid #5a3822; box-shadow: 0 5px 0 #2a1a10; }
.library-jar svg { width: 64px; height: 70px; display: block; margin: 0 auto; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); transform-origin: 50% 100%; transition: transform .2s; }
.library-jar:not(:disabled):hover svg { transform: translateY(-4px); }
.library-jar:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.library-jar:disabled { cursor: default; }
.library-jar:disabled svg { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)) saturate(.6) brightness(.8); }
.library-jarbody { fill: var(--jar); }
.library-jlabel { position: absolute; left: 50%; top: 46px; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; pointer-events: none;
  background: #efe3c8; color: #3a2a23; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: .95rem; letter-spacing: .04em; padding: 1px 6px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.library-jlabel.library-long { font-size: .78rem; letter-spacing: 0; }
.library-pour svg { animation: library-pour .6s ease; }
@keyframes library-pour { 30%, 60% { transform: translate(8px, -12px) rotate(30deg); } }
.library-bowlwrap { display: flex; flex-direction: column; align-items: center; margin-top: 10px; }
.library-bowlsvg { width: min(260px, 80%); display: block; overflow: visible; }
.library-bliq { transition: fill .4s; }
.library-bripple { opacity: 0; transform-box: fill-box; transform-origin: center; }
.library-plop .library-bripple { animation: library-ripple .7s ease-out; }
@keyframes library-ripple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(4); } }
.library-bsmoke { opacity: 0; transition: opacity 1s; }
.library-brewed .library-bsmoke { opacity: 1; }
.library-bw { transform-box: fill-box; transform-origin: 50% 100%; animation: library-wisp 3.4s ease-out infinite; }
.library-bcoals { animation: library-glow 1.5s ease-in-out infinite alternate; }
.library-bpuff { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.library-fizzle .library-bpuff { animation: library-puff 1s ease-out; }
@keyframes library-puff { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: .95; } 100% { opacity: 0; transform: translateY(-30px) scale(1.5); } }
.library-bswirl { opacity: 0; }
.library-brewed .library-bswirl { opacity: 1; animation: library-swirl 1.8s linear infinite; }
@keyframes library-swirl { to { stroke-dashoffset: -68; } }
.library-brewed .library-bliq { animation: library-potion 2.4s ease-in-out infinite alternate; }
.library-slots { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.library-slot { min-width: 58px; padding: 4px 6px; border-radius: 6px; text-align: center; font-family: Georgia, serif; font-weight: 700; font-size: .78rem;
  background: rgba(255, 255, 255, .08); color: rgba(251, 243, 228, .5); box-shadow: inset 0 0 0 1.5px rgba(251, 243, 228, .2); transition: background .3s, color .3s, box-shadow .3s; }
.library-slot.library-filled { background: #efe3c8; color: #3a2a23; box-shadow: 0 0 10px rgba(201, 162, 39, .55); }
.library-brewed .library-slot.library-filled { background: #e3d6ff; box-shadow: 0 0 12px rgba(143, 107, 255, .7); }
.library-brew .library-cap { color: #d8c8b8; }

/* ---------- loom ---------- */
.library-loomz { text-align: center; background: radial-gradient(ellipse at 50% 30%, #3a2a2c, #1a1216 75%); border-radius: 14px; padding: 12px; }
.library-loomsvg { width: min(290px, 100%); display: block; margin: 0 auto; }
.library-lcover { transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(.55); }
.library-woven .library-lcover, .library-weaving .library-lcover { transform: scaleY(0); }
.library-weaving .library-lcover { transition: transform 2.8s steps(18, end); }
.library-lshuttle { transition: opacity .4s; }
.library-woven .library-lshuttle { opacity: 0; }
.library-weaving .library-lshuttle { animation: library-shuttley 2.8s steps(18, end) forwards; }
.library-weaving .library-lshuttle-x { animation: library-shuttlex .3s ease-in-out infinite alternate; }
@keyframes library-shuttley { to { transform: translateY(-130px); } }
@keyframes library-shuttlex { from { transform: translateX(-24px); } to { transform: translateX(40px); } }
.library-woven .library-tword { animation: library-wordglow 2s ease 1; }
@keyframes library-wordglow { 50% { fill: #fff3c0; filter: drop-shadow(0 0 5px #c29cff); } }
.library-loomz .library-cap { color: #e8d8c0; }
.library-greek { font-family: Georgia, "Times New Roman", serif; letter-spacing: .12em; color: #ffd98a; }

/* ---------- chest ---------- */
.library-chestz { text-align: center; }
.library-chest3d { position: relative; width: min(300px, 90%); margin: 14px auto 14px; padding-top: 64px; perspective: 700px; }
.library-cin { position: absolute; left: 3%; right: 3%; top: 10px; height: 60px; display: grid; place-items: center; border-radius: 14px 14px 0 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 138, 58, .55), #1a0f0a 70%); box-shadow: inset 0 6px 14px rgba(0, 0, 0, .6); }
.library-clid { position: absolute; left: 0; right: 0; top: 0; height: 70px; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 50% 50% 8px 8px / 60% 60% 8px 8px; background: linear-gradient(#7a4b2e, #4a2c1a);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .3);
  transform-origin: 50% 0%; transition: transform 1.1s cubic-bezier(.3, 1.1, .4, 1), filter 1.1s; }
.library-clid .library-mb { margin: 0 4px 10px; }
.library-hasp { position: absolute; left: 50%; bottom: -10px; width: 18px; height: 24px; margin-left: -9px; border-radius: 3px; background: linear-gradient(135deg, #f7e08f, #c9a227 55%, #7a5a14); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.library-open .library-clid { transform: rotateX(-100deg); filter: brightness(.45); pointer-events: none; }
.library-cbody { position: relative; height: 118px; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 0 10px;
  border-radius: 4px 4px 12px 12px; background: linear-gradient(#6b4631, #3e2616); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), 0 12px 20px rgba(0, 0, 0, .35); }
.library-mb { display: block; height: 16px; border-top: 2px solid #c9a227; border-bottom: 2px solid #c9a227;
  background: #2a1a12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 13.5H16M3 13.5V3H13V10H7V6.5' fill='none' stroke='%23c9a227' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center / 14px 14px; }
.library-cplate { align-self: center; padding: 6px 14px; border-radius: 3px; color: #3a2a23; font-family: "Fraunces", serif; font-style: italic; font-weight: 600; font-size: .95rem;
  background: linear-gradient(135deg, #f7e08f, #c9a227 55%, #8a6a1a); box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(90, 66, 16, .6); }
.library-stalk { border: 0; background: none; padding: 0; width: 150px; cursor: pointer; opacity: 0; transition: opacity .6s .5s, transform .2s; }
.library-open .library-stalk { opacity: 1; }
.library-stalk:not(:disabled):hover { transform: translateY(-3px) rotate(-2deg); }
.library-stalk svg { display: block; width: 100%; overflow: visible; }
.library-stalkglow, .library-emberdot { animation: library-glow 1.2s ease-in-out infinite alternate; }
.library-spark1, .library-spark2 { transform-box: fill-box; animation: library-spark 1.6s ease-out infinite; }
.library-spark2 { animation-delay: .8s; }
@keyframes library-spark { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(4px, -16px); opacity: 0; } }
.library-ash { color: #d8c8b8; opacity: .85; }
.library-clock { min-height: 20px; }

/* ---------- Victor's workbench ---------- */
.library-mach { display: block; width: 100%; border-radius: 12px; background: #1a1320; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.library-mstatus b { color: var(--ink); }
.library-mbody { transform-box: view-box; }
.library-surge .library-mbody { animation: library-rumble .12s linear infinite; }
@keyframes library-rumble { 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } }
.library-surge .library-zap { opacity: 1; stroke-width: 3; animation-duration: .3s; }
.library-surge .library-coil .library-halo { opacity: 1; animation: library-flare .14s linear infinite alternate; }
@keyframes library-flare { from { opacity: .6; } to { opacity: 1; } }
.library-rodglow { opacity: 0; stroke-dasharray: 150; stroke-dashoffset: 150; }
.library-strike .library-rodglow { animation: library-rod 1.1s ease-out forwards; }
@keyframes library-rod { 0% { opacity: 1; stroke-dashoffset: 150; } 30% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
.library-mach.library-strike .library-arc { animation: library-arcflick .5s steps(1, end) 3; }
.library-mach.library-strike .library-zbolt { animation: library-zbolt 1s steps(1, end); }
@keyframes library-zbolt { 0% { opacity: 1; } 15% { opacity: 0; } 25% { opacity: 1; } 45%, 100% { opacity: 0; } }
.library-mach.library-strike .library-skyflash { animation: library-zsky 1s ease-out; }
@keyframes library-zsky { 0% { opacity: .9; } 20% { opacity: .2; } 30% { opacity: .7; } 100% { opacity: 0; } }
.library-mach.library-pulled .library-zleverg .library-leverarm { transform: rotate(130deg); }
.library-tug .library-leverarm { animation: library-tug .6s ease; }
@keyframes library-tug { 40% { transform: rotate(45deg); } }
.library-twitch .library-klying { transform-box: fill-box; transform-origin: 50% 100%; animation: library-twitch .8s ease; }
@keyframes library-twitch { 15% { transform: translateY(-3px) rotate(-2deg); } 30% { transform: rotate(2deg); } 45% { transform: translateY(-5px); } 60% { transform: rotate(-1deg); } }
.library-mach.library-alive .library-ksit { transform-box: fill-box; transform-origin: 50% 100%; animation: library-situp .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes library-situp { from { transform: translateY(12px) scaleY(.35); } }
.library-mach.library-blinking .library-ksit .library-kblink { transform-box: fill-box; transform-origin: center; animation: library-blinkfast .45s 2; }
@keyframes library-blinkfast { 50% { transform: scaleY(.1); } }
.library-recpop .library-ksit .library-krec { transform: translateY(-10px); }

/* ---------- big moments ---------- */
.library-oink { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: library-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.library-oink-pig { width: min(46vw, 200px); animation: library-wobble .9s ease-in-out infinite alternate; }
@keyframes library-wobble { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateY(-4px); } }
.library-oink b { font-family: "Fraunces", serif; font-weight: 800; font-size: clamp(3rem, 14vw, 5.5rem); line-height: 1; color: #f7b8c6; text-shadow: 0 4px 0 #b85a70, 0 0 30px rgba(247, 184, 198, .5); }
.library-oink small { font-family: "Caveat", cursive; font-size: 1.7rem; color: var(--cream); opacity: .85; }
@keyframes library-pop { from { transform: scale(.3) rotate(-8deg); opacity: 0; } }
.library-alive-o { font-family: "Fraunces", serif; font-weight: 800; font-size: clamp(3rem, 15vw, 7rem); line-height: .95; letter-spacing: .02em; color: #eef4ff;
  text-shadow: 0 0 12px #9fb4ff, 0 0 40px #6a4cff, 0 6px 0 #2a2050; animation: library-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.library-alive-o span { display: inline-block; animation: library-jitter .14s steps(2, end) infinite; }
.library-alive-o span:last-child { color: #c8ffbe; text-shadow: 0 0 12px #7dff9a, 0 0 40px #3fa87a, 0 6px 0 #1a3a22; animation-delay: .07s; }
@keyframes library-jitter { 50% { transform: translate(2px, -2px) rotate(-1deg); } }