/* Consistent book cards, simple header and family filtering. */
.kb-book .kb-cover:before{content:none;display:none;border:0}
.kb-book .kb-cover{padding:18px 28px;background:linear-gradient(110deg,#f6eee2,#fcf8ef);border-bottom-color:#e2d5c1}
.kb-book .kb-cover h1{font-size:28px;line-height:1.2;letter-spacing:-.025em}
.kb-book .kb-cover p{font-size:13px;margin-top:4px}
.kb-book .kb-card-footer{height:64px;min-height:64px;max-height:64px;flex:0 0 64px;padding:8px;align-self:end;justify-content:center}
.kb-book .kb-card-footer .kb-card-pair{flex:0 0 auto;min-height:0}
.kb-book .kb-book-options #kb-family{width:174px}
.kb-book .kb-atlas{margin-top:4px}
.kb-book .kb-atlas summary{padding-top:8px}
@media(max-width:700px){
 .kb-book .kb-cover{padding:16px}
 .kb-book .kb-cover h1{font-size:24px}
 .kb-book .kb-cover p{font-size:13px}
 .kb-book .kb-card-footer{height:72px;min-height:72px;max-height:72px;flex-basis:72px;padding:6px}
 .kb-book .kb-book-options #kb-family{width:0;flex:1.3 1 0}
}
@media(max-width:360px){
 .kb-book .kb-book-options #kb-family{width:calc(50% - 4px);flex:1 1 calc(50% - 4px)}
}

/* Finite celebrations using the existing egg, totem and littlekin artwork. */
.kbn-celebration{color:#5b4a51;text-align:center;font-family:'DM Sans',sans-serif;padding:0 0 8px}
.kbn-scene{position:relative;isolation:isolate;width:100%;max-width:460px;height:290px;margin:0 auto;overflow:hidden;border-radius:22px;background:radial-gradient(ellipse at 50% 58%,#f3e8cfc9,transparent 66%)}
.kbn-halo{position:absolute;z-index:-1;left:50%;top:49%;width:240px;height:240px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fffdf1 0,#f1db9e80 33%,#ddebd370 53%,transparent 70%);opacity:.7}
.kbn-ring{position:absolute;left:50%;top:49%;width:176px;height:176px;border:1px solid #d5b873;border-radius:50%;transform:translate(-50%,-50%);opacity:0}
.kbn-ground{position:absolute;left:50%;bottom:30px;width:180px;height:22px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#a48b6940,transparent 72%)}
.kbn-result,.kbn-shell{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;transform-origin:50% 85%}
.kbn-result{opacity:1;z-index:3}
.kbn-result>img,.kbn-result>.creature-portrait,.kbn-result .kindred-native-portrait,.kbn-result .kindred-native-portrait>img{display:block;width:100%;height:100%;margin:0;object-fit:contain}
.kbn-result>img{filter:drop-shadow(0 8px 10px #8a71551a)}
.kbn-parents{position:absolute;inset:0;z-index:2;pointer-events:none}
.kbn-parent{position:absolute;top:74px;width:130px;height:130px;opacity:0}
.kbn-parent-0{left:5%}
.kbn-parent-1{right:5%}
.kbn-parent>.creature-portrait{width:100%;height:100%;margin:0}
.kbn-totem{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;object-fit:contain;opacity:0;z-index:2}
.kbn-shell{opacity:0;z-index:4}
.kbn-shell>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform-origin:50% 52%}
.kbn-shell-top{clip-path:polygon(0 0,100% 0,100% 49%,87% 54%,74% 46%,61% 54%,49% 46%,36% 54%,23% 46%,10% 54%,0 49%)}
.kbn-shell-bottom{clip-path:polygon(0 49%,10% 54%,23% 46%,36% 54%,49% 46%,61% 54%,74% 46%,87% 54%,100% 49%,100% 100%,0 100%)}
.kbn-motes{position:absolute;inset:0;z-index:5;pointer-events:none}
.kbn-mote{position:absolute;left:50%;top:49%;width:7px;height:10px;border-radius:85% 15% 80% 20%;background:#d8b568;opacity:0}
.kbn-mote:nth-child(3n){background:#a9c29c;width:8px;height:11px}
.kbn-mote:nth-child(4n){background:#c6a6c2;width:6px;height:6px;border-radius:50%}
.kbn-caption h3{font-family:'Outfit',sans-serif;font-weight:600;font-size:27px;letter-spacing:-.025em;line-height:1.2;margin:3px 0 9px;color:#554453}
.kbn-caption p{font-size:14px;line-height:1.6;max-width:350px;margin:0 auto;color:#807160}
.kbn-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:22px}
.kbn-actions .button{min-height:44px;white-space:normal;justify-content:center;text-align:center}
.kbn-actions .kbn-skip{background:none;border-color:transparent;color:#8c7b66;font-size:12px}
.kbn-actions .kbn-skip[hidden]{display:none}
.kbn-scene.is-preparing .kbn-result{opacity:0}
.kbn-create.is-preparing .kbn-parent,.kbn-create.is-preparing .kbn-totem{opacity:1}
.kbn-hatch.is-preparing .kbn-shell,.kbn-hatch.is-preparing .kbn-shell>img{opacity:1}
.kbn-scene.is-playing .kbn-halo{animation:kbn-halo-bloom 2.5s ease-out both}
.kbn-scene.is-playing .kbn-ring{animation:kbn-ring-bloom 1.35s .85s ease-out both}
.kbn-scene.is-playing .kbn-mote{animation:kbn-mote-drift 1.3s var(--wait) cubic-bezier(.16,.7,.3,1) both}
.kbn-create.is-playing .kbn-parent-0{animation:kbn-parent-left 1.2s ease-in-out both}
.kbn-create.is-playing .kbn-parent-1{animation:kbn-parent-right 1.2s ease-in-out both}
.kbn-create.is-playing .kbn-totem{animation:kbn-totem-gather 1.1s .1s ease-in-out both}
.kbn-create.is-playing .kbn-result{animation:kbn-egg-arrive 1.5s .75s cubic-bezier(.22,.8,.26,1) both}
.kbn-hatch.is-playing .kbn-shell{animation:kbn-shell-rock 1.25s ease-in-out both}
.kbn-hatch.is-playing .kbn-shell-top{animation:kbn-shell-top-open 1s 1.12s ease-out both}
.kbn-hatch.is-playing .kbn-shell-bottom{animation:kbn-shell-bottom-open 1s 1.12s ease-out both}
.kbn-hatch.is-playing .kbn-result{animation:kbn-friend-arrive 1.4s 1.2s cubic-bezier(.2,.75,.25,1) both}
@keyframes kbn-halo-bloom{0%{opacity:.3;transform:translate(-50%,-50%) scale(.65)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}}
@keyframes kbn-ring-bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}22%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
@keyframes kbn-mote-drift{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--turn)) scale(.45)}}
@keyframes kbn-parent-left{0%,20%{opacity:1;transform:translate(0,0) scale(1)}65%{opacity:.8;transform:translate(45px,-12px) scale(.8)}100%{opacity:0;transform:translate(80px,0) scale(.35)}}
@keyframes kbn-parent-right{0%,20%{opacity:1;transform:translate(0,0) scale(1)}65%{opacity:.8;transform:translate(-45px,-12px) scale(.8)}100%{opacity:0;transform:translate(-80px,0) scale(.35)}}
@keyframes kbn-totem-gather{0%,20%{opacity:1;transform:translateY(0) scale(.9)}55%{opacity:1;transform:translateY(-18px) scale(1.08)}100%{opacity:0;transform:translateY(-2px) scale(.2)}}
@keyframes kbn-egg-arrive{0%{opacity:0;transform:translateY(20px) scale(.35) rotate(-8deg)}48%{opacity:1;transform:translateY(-7px) scale(1.05) rotate(3deg)}74%{opacity:1;transform:translateY(2px) scale(.98) rotate(-1deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes kbn-shell-rock{0%,12%{opacity:1;transform:rotate(0)}24%{transform:rotate(-7deg)}37%{transform:rotate(8deg)}50%{transform:rotate(-10deg)}62%{transform:rotate(10deg)}74%{transform:rotate(-6deg)}88%,100%{opacity:1;transform:rotate(0)}}
@keyframes kbn-shell-top-open{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(-35px,-92px) rotate(-24deg)}}
@keyframes kbn-shell-bottom-open{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(38px,58px) rotate(20deg)}}
@keyframes kbn-friend-arrive{0%{opacity:0;transform:translateY(26px) scale(.55)}50%{opacity:1;transform:translateY(-9px) scale(1.08)}72%{opacity:1;transform:translateY(3px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:700px){
 .kbn-scene{height:258px;border-radius:16px}
 .kbn-parent{width:105px;height:105px;top:75px}
 .kbn-parent-0{left:0}.kbn-parent-1{right:0}
 .kbn-result,.kbn-shell{width:200px;height:200px;margin:-100px 0 0 -100px}
 .kbn-halo{width:210px;height:210px}
 .kbn-caption h3{font-size:24px}
 .kbn-caption p{font-size:13px}
 .kbn-actions{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){
 .kbn-scene *{animation:none!important}
 .kbn-scene .kbn-result{opacity:1!important;transform:none!important}
 .kbn-scene .kbn-parents,.kbn-scene .kbn-totem,.kbn-scene .kbn-shell,.kbn-scene .kbn-motes,.kbn-scene .kbn-ring{display:none}
 .kbn-actions .kbn-skip{display:none}
}