.cr-frame{border:3px dashed var(--gold);background:color-mix(in oklab, var(--navy) 6%, white);color:var(--navy);letter-spacing:.12em;text-align:center;border-radius:1rem;place-items:center;padding:.5rem;font-size:.7rem;font-weight:700;display:grid}.cr-companion{transform-origin:bottom;animation:3.2s ease-in-out infinite cr-bob}.cr-companion.is-happy{animation:.7s ease-out 2 cr-jump}.cr-companion .cr-paw{transform-origin:bottom;animation:2.6s ease-in-out infinite cr-paw;display:inline-block}.cr-companion .cr-tail{transform-origin:0;animation:.5s ease-in-out infinite alternate cr-wag;display:inline-block}@keyframes cr-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes cr-jump{0%{transform:translateY(0)}40%{transform:translateY(-22px)scale(1.04)}to{transform:translateY(0)}}@keyframes cr-paw{0%,70%,to{transform:rotate(0)}80%{transform:rotate(-25deg)}90%{transform:rotate(10deg)}}@keyframes cr-wag{0%{transform:rotate(-18deg)}to{transform:rotate(18deg)}}.cr-galaxy{background:radial-gradient(ellipse at 50% 30%, color-mix(in oklab, var(--gold) 22%, var(--navy)) 0%, var(--navy) 60%);position:relative;overflow:hidden}.cr-galaxy:before{content:"";background-image:radial-gradient(2px 2px at 20% 30%,#fff,#0000),radial-gradient(1.5px 1.5px at 70% 20%,#fff,#0000),radial-gradient(2px 2px at 40% 80%,#fff,#0000),radial-gradient(1px 1px at 85% 60%,#fff,#0000),radial-gradient(1.5px 1.5px at 10% 70%,#fff,#0000);animation:4s ease-in-out infinite cr-twinkle;position:absolute;inset:0}.cr-star{opacity:0;background:linear-gradient(90deg,#fff,#0000);border-radius:2px;width:120px;height:2px;animation:5s linear infinite cr-shoot;position:absolute}.cr-star:nth-child(2){animation-delay:1.4s;top:15%;left:70%}.cr-star:nth-child(3){animation-delay:3s;top:40%;left:90%}.cr-star:first-child{top:8%;left:40%}.cr-comet{background:var(--gold);width:14px;height:14px;box-shadow:0 0 24px 8px color-mix(in oklab, var(--gold) 60%, transparent);border-radius:50%;animation:9s linear infinite cr-comet;position:absolute;top:65%;left:-10%}@keyframes cr-twinkle{0%,to{opacity:.9}50%{opacity:.45}}@keyframes cr-shoot{0%{opacity:0;transform:translate(0)rotate(-30deg)}5%{opacity:1}25%{opacity:0;transform:translate(-420px,240px)rotate(-30deg)}to{opacity:0}}@keyframes cr-comet{0%{transform:translate(0)}to{transform:translate(130vw,-40vh)}}.cr-book{border:2px solid var(--gold);width:100%;max-width:680px;box-shadow:0 18px 40px color-mix(in oklab, var(--navy) 22%, transparent);background:#fff;border-radius:8px 20px 20px 8px;margin:0 auto}.cr-card{perspective:900px}.cr-card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s;position:relative}.cr-card.is-flipped .cr-card-inner{transform:rotateY(180deg)}.cr-face{backface-visibility:hidden;border:4px solid var(--navy);color:var(--navy);background:#fff;border-radius:1.25rem;place-items:center;display:grid;position:absolute;inset:0}.cr-back{color:#fff;font-size:3rem;transform:rotateY(180deg)}.cr-back.is-right{background:var(--band-on);border-color:var(--band-on)}.cr-back.is-wrong{background:var(--band-below);border-color:var(--band-below)}.cr-letter{font-size:clamp(4.5rem,14vw,8rem);font-weight:800;line-height:1}.cr-slot{border:3px dashed var(--gold);border-radius:1rem;place-items:center;min-height:8.5rem;display:grid}@media (prefers-reduced-motion:reduce){.cr-companion,.cr-companion .cr-paw,.cr-companion .cr-tail,.cr-galaxy:before,.cr-star,.cr-comet{animation:none!important}.cr-card-inner{transition:none}}@media print{.cr-print-page{break-after:page}}