.film-drum-zone{position:absolute;left:-14px;top:-24px;bottom:-24px;width:40px;pointer-events:auto}.film-drum-trigger{position:absolute;inset:0;border:0;padding:0;background:transparent;border-radius:999px;cursor:pointer}.film-drum-trigger:focus-visible{outline:2px solid var(--foreground);outline-offset:2px}.film-drum{--drum-w:272px;--drum-h:236px;position:absolute;left:40px;top:calc(24px + var(--film-progress, 0) * (100% - 48px) - var(--drum-h) / 2);width:var(--drum-w);height:var(--drum-h);box-sizing:border-box;border-radius:24px;overflow:hidden;color:var(--foreground);background:linear-gradient(180deg,color-mix(in srgb,var(--foreground) 5%,var(--background)),var(--background));border:1px solid color-mix(in srgb,var(--foreground) 14%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,white 22%,transparent),0 24px 60px color-mix(in srgb,black 50%,transparent);transform-origin:0 50%;opacity:0;transform:scale(.55) translateX(-24px);filter:blur(10px);visibility:hidden;transition:opacity .22s ease,transform .22s ease,filter 0s linear .22s,visibility 0s linear .22s}.film-drum[data-open]{opacity:1;transform:none;filter:none;visibility:visible;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease,filter .5s cubic-bezier(.16,1,.3,1)}.film-drum-band{position:absolute;left:8px;right:8px;top:50%;height:62px;margin-top:-31px;border-radius:14px;background:color-mix(in srgb,var(--foreground) 7%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--foreground) 8%,transparent)}.film-drum-list{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,transparent,black 34%,black 66%,transparent);mask-image:linear-gradient(180deg,transparent,black 34%,black 66%,transparent)}.film-drum-row{position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px;display:flex;align-items:center;gap:12px;padding:0 16px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transform-origin:16px 50%;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .42s ease}.film-drum-row[data-centered]{height:60px;margin-top:-30px}.film-drum-row:focus-visible{outline:2px solid var(--foreground);outline-offset:-2px;border-radius:12px}.film-drum-row[data-tone=coral]{--tone:var(--axi-brand)}.film-drum-row[data-tone=amber]{--tone:var(--axi-amber)}.film-drum-row[data-tone=violet]{--tone:var(--axi-violet)}.film-drum-row[data-tone=dim]{--tone:color-mix(in srgb,var(--foreground) 50%,transparent)}.film-drum-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--tone)}.film-drum-row[data-centered] .film-drum-dot{box-shadow:0 0 12px var(--tone)}.film-drum-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}.film-drum-chapter{display:none;font-size:9.5px;letter-spacing:.18em;font-weight:600;text-transform:uppercase;color:color-mix(in srgb,var(--foreground) 52%,transparent)}.film-drum-row[data-centered] .film-drum-chapter{display:block}.film-drum-title{font-size:14.5px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:clip}.film-drum-row[data-centered] .film-drum-title{font-weight:600;white-space:normal;text-wrap:balance;line-height:1.2;padding-bottom:2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.film-drum-key{margin-left:auto;font-size:10.5px;color:color-mix(in srgb,var(--foreground) 55%,transparent);opacity:0}.film-drum-row[data-centered] .film-drum-key{opacity:1}.film-drum-toward{position:absolute;left:30px;top:calc(24px + var(--to, 0) * (100% - 48px));transform:translateY(-50%);display:flex;align-items:center;gap:10px;height:38px;padding:0 14px 0 10px;border-radius:999px;white-space:nowrap;font-size:12.5px;color:var(--foreground);background:color-mix(in srgb,var(--foreground) 6%,var(--background));border:1px solid color-mix(in srgb,var(--foreground) 16%,transparent);box-shadow:0 18px 40px color-mix(in srgb,black 45%,transparent);pointer-events:none;animation:film-drum-toward-in .3s cubic-bezier(.16,1,.3,1)}.film-drum-toward[data-tone=coral]{--tone:var(--axi-brand)}.film-drum-toward[data-tone=amber]{--tone:var(--axi-amber)}.film-drum-toward[data-tone=violet]{--tone:var(--axi-violet)}.film-drum-toward[data-tone=dim]{--tone:color-mix(in srgb,var(--foreground) 50%,transparent)}.film-drum-toward i{width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 12px var(--tone)}.film-drum-toward small{font-size:12.5px;color:color-mix(in srgb,var(--foreground) 60%,transparent)}.film-drum-toward b{font-weight:600}.film-drum-toward-bar{position:relative;width:54px;height:3px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--foreground) 14%,transparent)}.film-drum-toward-bar span{position:absolute;inset:0;border-radius:3px;background:var(--foreground);transform-origin:left;transform:scaleX(0)}@keyframes film-drum-toward-in{0%{opacity:0;transform:translateY(-50%) translateX(-6px)}to{opacity:1;transform:translateY(-50%)}}@media (prefers-reduced-motion:reduce){.film-drum,.film-drum-row,.film-drum[data-open]{transition:none;filter:none}.film-drum-toward{animation:none}}@supports (animation-timeline:scroll()){.film-drum-title{animation:truncate-mask-inline linear both;animation-timeline:scroll(self inline)}}