[hidden] { display: none !important; }
.book-title { max-width: 100%; overflow-wrap: anywhere; color: #fff; font-size: 12px; font-weight: 600; }
.timer-actions { display: flex; width: 100%; gap: 9px; margin-top: 4px; }
.timer-control { flex: 1; min-height: 36px; border: 1px solid #ffffff75; border-radius: 9px; color: #fff; background: #ffffff16; font-size: 11px; font-weight: 600; }
.timer-control:last-child { border-color: #ffffff35; color: #fff9; }
.celebration[hidden] { display: none !important; }
.celebration { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 24px; color: #fff; text-align: center; background: #173628ed; animation: celebration-in .25s ease-out both; }
.celebration-content { position: relative; z-index: 1; width: min(100%, 340px); }
.celebration-mark { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 18px; border: 2px solid #ffffffad; border-radius: 50%; color: #fff; font-size: 38px; animation: mark-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
.celebration-kicker { margin: 0 0 8px; color: #f6cf78; font-size: 13px; font-weight: 700; }
.celebration h2 { margin: 0; font-size: 34px; }
.celebration-content > p:not(.celebration-kicker) { margin: 9px 0 26px; color: #d8e7dd; font-size: 13px; }
.celebration .primary-button { color: #fff; background: #e5a443; }
.firework { position: absolute; width: 2px; height: 2px; }
.firework::before, .firework::after { content: ''; position: absolute; inset: 0; width: 5px; height: 5px; border-radius: 50%; background: #f8d36f; box-shadow: 0 -38px #f8d36f, 27px -27px #ff9c69, 38px 0 #fff2a8, 27px 27px #ff9c69, 0 38px #f8d36f, -27px 27px #81dbc0, -38px 0 #fff2a8, -27px -27px #81dbc0, 0 -54px #ff9c69, 38px -38px #fff2a8, 54px 0 #81dbc0, 38px 38px #f8d36f, 0 54px #ff9c69, -38px 38px #fff2a8, -54px 0 #f8d36f, -38px -38px #ff9c69; animation: firework-burst 1.6s ease-out infinite; }
.firework::after { animation-delay: .18s; transform: rotate(22deg) scale(.65); }
.firework-one { left: 23%; top: 27%; }
.firework-two { right: 22%; top: 31%; transform: scale(.75); animation-delay: .45s; }
.firework-three { left: 50%; top: 17%; transform: scale(.55); animation-delay: .9s; }
@keyframes firework-burst { 0% { opacity: 0; transform: scale(.12); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes celebration-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mark-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .celebration, .celebration-mark, .firework::before, .firework::after { animation: none; } }