/* The slot reserves the entire completion beat without changing row geometry. */
.qp-progress[data-platter-progress] .qp-progress-text{align-items:center;min-height:96px;margin-bottom:6px}
.qp-progress[data-platter-progress] .qp-progress-label{display:flex;align-items:center;gap:9px}
.qr-platter{position:relative;display:inline-block;flex:0 0 88px;width:88px;height:96px;pointer-events:none;contain:layout;overflow:clip}
.qr-platter svg{display:block;width:100%;height:100%;overflow:visible}
.qr-piece{fill:var(--wine);opacity:0;transition:opacity 350ms ease,transform 350ms cubic-bezier(.16,1,.3,1)}
/* The part the next answer fills shows faintly and breathes until it fills (owner, 19 Oct). Reduce Motion: a slower, softer fade. */
.qr-hint{fill:var(--wine);opacity:0}
.qr-hint.is-next{opacity:.26}
[data-platter-phase="ready"] .qr-hint,[data-platter-phase="burst"] .qr-hint{visibility:hidden}
@keyframes platter-hint{from{opacity:.1}to{opacity:.42}}
@keyframes platter-hint-quiet{from{opacity:.12}to{opacity:.32}}
.qr-lid-open{transform-origin:95px 549px}
.qr-lid-rattle{transform-origin:295px 549px}
.qr-ring{fill:none;stroke:#b78b3d;stroke-width:12;transform-origin:295px 700px;opacity:0}
.qr-glow{transform-origin:295px 520px;opacity:0}
.qr-ray{fill:#b78b3d;opacity:0;transform-origin:0px 0px}
.qr-spark{fill:#b78b3d;opacity:0;transform:translate(295px,500px)}
.qr-spark:nth-of-type(3n){fill:#e7cf9a}
.qr-check{fill:none;stroke:var(--wine);stroke-width:42;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
[data-platter-phase="ready"] .qr-lid-open{transform:translateY(-120px) rotate(-20deg)}
[data-platter-phase="ready"] .qr-check{opacity:1;stroke-dashoffset:0}
[data-platter-phase="ready"] .qr-glow{opacity:.4;transform:scale(.9)}
.qp-progress[data-platter-progress] .qp-progress-left::before{display:none}
.qp-progress[data-platter-progress].just-ready .qp-progress-left{animation:none}
html:has([data-platter-progress]){scroll-padding-top:210px}
@keyframes platter-rattle{0%,100%{transform:rotate(0)}25%{transform:rotate(var(--lid-rattle))}75%{transform:rotate(calc(-1 * var(--lid-rattle)))}}
@keyframes platter-ring{from{opacity:.85;transform:scale(.3)}to{opacity:0;transform:scale(5)}}
@keyframes platter-open{from{transform:none}75%{transform:translateY(-128px) rotate(-21deg)}to{transform:translateY(-120px) rotate(-20deg)}}
@keyframes platter-glow{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.15)}100%{opacity:.4;transform:scale(.9)}}
@keyframes platter-ray{0%{opacity:0;transform:scaleY(0)}40%{opacity:.9;transform:scaleY(1)}65%{opacity:.9}100%{opacity:0;transform:scaleY(1)}}
@keyframes platter-spark{0%{opacity:0;transform:translate(295px,500px)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(calc(295px + var(--sx)),calc(500px + var(--sy))) rotate(var(--sr))}}
@keyframes platter-check{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@media(prefers-reduced-motion:no-preference){
 .qr-hint.is-next{animation:platter-hint 1.1s ease-in-out infinite alternate}
 [data-platter-phase="gathering"][data-platter-rattle="true"] .qr-lid-rattle{animation:platter-rattle 130ms linear infinite}
 [data-platter-phase="burst"] .qr-piece{transition:none}
 [data-platter-phase="burst"] .qr-lid-rattle{animation:platter-rattle 70ms linear 4;--lid-rattle:2.6deg}
 [data-platter-phase="burst"] .qr-ring{animation:platter-ring 550ms ease-out 280ms both}
 [data-platter-phase="burst"] .qr-lid-open{animation:platter-open 500ms cubic-bezier(.16,1,.3,1) 500ms both}
 [data-platter-phase="burst"] .qr-glow{animation:platter-glow 860ms ease-out 540ms both}
 [data-platter-phase="burst"] .qr-ray{animation:platter-ray 680ms ease-out calc(560ms + var(--i)*14ms) both}
 [data-platter-phase="burst"] .qr-spark{animation:platter-spark 712ms ease-out calc(580ms + var(--i)*12ms) both}
 [data-platter-phase="burst"] .qr-check{animation:platter-check 340ms ease-out 820ms both}
}
.is-motion-paused .qr-lid-rattle,.is-motion-paused .qr-hint{animation-play-state:paused!important}
@media(max-width:719.98px){
 .qp-progress[data-platter-progress] .qp-progress-text{min-height:80px;gap:6px}
 .qr-platter{flex-basis:72px;width:72px;height:80px}
 .qp-progress[data-platter-progress] .qp-progress-label{gap:4px;font-size:14px}
 .qp-progress[data-platter-progress] .qp-progress-left{font-size:12px}
 html:has([data-platter-progress]){scroll-padding-top:190px}
}
@keyframes platter-reduced-ready{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .qr-piece{transition:opacity 350ms ease!important}
 .qr-lid-open{transform:none!important;transition:opacity 350ms ease!important}
 .qr-lid-rattle,.qr-ring,.qr-ray,.qr-spark,.qr-check,.qr-glow{animation:none!important}
 [data-platter-phase="ready"] .qr-lid-open{transform:translateY(-120px)!important;animation:platter-reduced-ready 350ms ease both!important}
 .qr-check{transition:opacity 350ms ease!important}
 .qr-glow{opacity:0!important}
 .qr-hint.is-next{animation:platter-hint-quiet 2.4s ease-in-out infinite alternate!important}
}
@media(forced-colors:active){.qr-piece,.qr-hint{fill:CanvasText}.qr-check,.qr-ring{stroke:CanvasText}.qr-ray,.qr-spark{fill:CanvasText}}