@layer components{.public-site .rot{gap:18px;display:grid}.public-site .rot-stage{display:grid;position:relative}.public-site .rot-set{opacity:0;pointer-events:none;grid-area:1/1;justify-content:center;align-items:center;gap:clamp(14px,2vw,26px);transition:opacity .45s,translate .45s;display:flex;translate:0 10px}.public-site .rot-set[data-active=true]{opacity:1;pointer-events:auto;translate:0}.public-site .rot-frame{min-width:0;container-type:inline-size}.public-site .rot-clock{width:0;height:0;animation:rot-clock var(--rot-step) linear forwards;position:absolute}@keyframes rot-clock{to{transform:translate(0)}}.public-site [data-paused=true] .rot-clock,.public-site [data-paused=true] .rot-fill.run{animation-play-state:paused}.public-site .rot-controls,.public-site .rot-aside{display:contents}.public-site .rot-bars{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;display:grid}.public-site .rot-bars button{color:var(--p-fg-faint);font-size:var(--text-13);text-align:left;cursor:pointer;background:0 0;border:0;gap:9px;padding:6px 0;display:grid}.public-site .rot-bars button[aria-pressed=true],.public-site .rot-bars button:hover{color:var(--p-fg)}.public-site .rot-bars button:focus-visible{outline:2px solid var(--p-focus);outline-offset:4px}.public-site .rot-bar{background:color-mix(in srgb, var(--p-fg) 20%, transparent);border-radius:2px;height:3px;display:block;overflow:hidden}.public-site .rot-fill{background:var(--p-fg-soft);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.public-site .rot-fill.full{transform:scaleX(1)}.public-site .rot-fill.run{animation:rot-fill var(--rot-brand) linear forwards}@keyframes rot-fill{to{transform:scaleX(1)}}.public-site .rot-formats{justify-content:center;display:flex}.public-site .rot-formats>button{font-size:var(--text-12);padding:7px 14px}.public-site .rot>.example-note{text-align:center;margin-top:0}@media (min-width:761px){.public-site .rot-formats{display:none}.public-site .rot>.example-note{text-align:inherit}}@media (max-width:760px){.public-site .rot-stage[data-format] .rot-set{display:contents}.public-site .rot-stage[data-format] .rot-frame{opacity:0;pointer-events:none;grid-area:1/1;place-self:center;transition:opacity .45s,translate .45s;translate:0 10px}.public-site .rot-stage[data-format] .rot-frame[data-shown=true]{opacity:1;pointer-events:auto;translate:0}}@media (prefers-reduced-motion:reduce){.public-site .rot-set,.public-site .rot-stage[data-format] .rot-frame{transition:none}}}