.reel-stage{--reel-panel-w:clamp(360px, 28vw, 400px);--reel-media-max:calc(100vw - var(--reel-panel-w) - 140px);--reel-frame-h:min(calc(100dvh - 48px), 940px, calc(var(--reel-media-max) * 16 / 9));grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px;height:100%;display:grid;position:relative}.reel-stage[data-mode=page]{--reel-media-max:calc(100vw - var(--reel-panel-w) - 140px - 2 * var(--layout-gutter));--reel-frame-h:min(clamp(520px, calc(100dvh - 220px), 960px), calc(var(--reel-media-max) * 16 / 9));max-width:1600px;height:auto;margin-inline:auto}.reel-stage-frame{isolation:isolate;grid-column:2;grid-template-columns:auto var(--reel-panel-w);height:var(--reel-frame-h);background:color-mix(in srgb, var(--on-accent) 92%, transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--shadow-dialog);border-radius:24px;display:grid;position:relative;overflow:hidden}.reel-stage[data-mode=overlay] .reel-stage-frame{animation:reel-rise var(--dur-reveal) var(--ease-glide)}.reel-stage-frame:after{content:"";z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--reel-text) 12%, transparent);pointer-events:none;position:absolute;inset:0}.reel-stage-media{width:min(calc(var(--reel-frame-h) * var(--reel-ratio,.5625)), var(--reel-media-max));background:var(--on-accent);height:100%;position:relative;overflow:hidden}.reel-stage-media>img{object-fit:cover}.reel-stage .reel-panel{min-width:0;height:100%;box-shadow:none;border-left:1px solid color-mix(in srgb, var(--reel-text) 10%, transparent);background:0 0;border-radius:0}.reel-stage .reel-block,.reel-stage .reel-details{background:color-mix(in srgb, var(--reel-text) 7%, transparent)}.reel-stage-frame[data-shell] .reel-stage-media:after,.reel-player[data-pending]:after{content:"";border:2px solid color-mix(in srgb, var(--reel-text) 28%, transparent);border-top-color:var(--reel-text);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite reel-spin;position:absolute;top:calc(50% - 16px);left:calc(50% - 16px)}.reel-shell-panel{border-left:1px solid color-mix(in srgb, var(--reel-text) 10%, transparent)}.reel-stage-nav{color:var(--reel-text);flex-direction:column;grid-column:3;justify-self:start;align-items:center;gap:10px;display:flex}.reel-stage-nav button{background:color-mix(in srgb, var(--reel-text) 14%, transparent);width:44px;height:44px;color:inherit;cursor:pointer;transition:transform var(--dur-base) var(--ease-glide);border:0;border-radius:999px;place-items:center;display:grid}.reel-stage-nav button:hover:not(:disabled){transform:scale(1.06)}.reel-stage-nav button:disabled{opacity:.3;cursor:default}.reel-stage-nav span{font-family:var(--font-number);font-size:var(--small-caption-size);opacity:1;line-height:var(--small-caption-line);color:var(--media-muted)}.reel-stage-nav i{opacity:.6;margin-inline:2px;font-style:normal}.reel-stage[data-mode=page] .reel-stage-nav{color:var(--text-1)}.reel-stage[data-mode=page] .reel-stage-nav button{background:var(--surface-3)}.reels-detail{padding:var(--space-6) var(--layout-gutter) var(--space-12)}.reel-player{background:var(--on-accent);--skeleton-bg:var(--on-accent);--skeleton-shimmer:color-mix(in srgb, var(--reel-text) 9%, transparent);position:absolute;inset:0}.reel-player img{object-fit:cover}.reel-player[data-wide] img{object-fit:contain}.reel-player-video{object-fit:contain;opacity:0;cursor:pointer;width:100%;height:100%;transition:opacity var(--dur-base) var(--ease-ui);position:absolute;inset:0}.reel-player[data-ready] .reel-player-video{opacity:1}.reel-player-progress{background:color-mix(in srgb, var(--reel-text) 28%, transparent);pointer-events:none;border-radius:2px;height:3px;position:absolute;bottom:12px;left:12px;right:12px;overflow:hidden}.reel-player-progress>i{background:var(--reel-text);transform-origin:0;height:100%;transition:transform .25s linear;display:block;transform:scaleX(0)}.reel-player-controls{gap:8px;display:flex;position:absolute;top:12px;right:12px}.reel-player-button,.reel-feed-close{background:color-mix(in srgb, var(--on-accent) 40%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:36px;height:36px;box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--reel-text) 20%, transparent);color:var(--reel-text);cursor:pointer;border:0;border-radius:999px;place-items:center;display:grid}@media (prefers-reduced-motion:reduce){.reel-player-video,.reel-player-progress>i,.reel-stage-nav button,.reel-details>summary svg{transition:none}.reel-stage[data-mode=overlay] .reel-stage-frame{animation:none}}@media (pointer:coarse){.reel-stage-nav button{min-width:44px;min-height:44px}}.reel-stage[data-mode=preview]{max-width:100%;height:auto;padding:var(--space-4);color:var(--text-1);display:block}.reel-stage[data-mode=preview] .reel-stage-frame{height:var(--reel-preview-height);background:var(--on-accent);grid-template-columns:minmax(0,9fr) minmax(0,8fr)}.reel-stage[data-mode=preview] .reel-stage-media{aspect-ratio:auto;width:100%;height:100%}.reel-stage[data-mode=preview] .reel-stage-nav{display:none}@media not (min-width:48rem){.reel-stage,.reel-stage[data-mode=preview],.reel-stage[data-mode=page]{height:auto;min-height:100%;padding:0;display:block}.reel-stage-frame,.reel-stage[data-mode=preview] .reel-stage-frame{border-radius:0;flex-direction:column;height:auto;display:flex}.reel-stage-frame[data-shell]{position:fixed;inset:0}.reel-stage-frame[data-shell] .reel-stage-media{aspect-ratio:auto;width:100%;height:100%}.reel-shell-panel{display:none}.reel-stage .reel-stage-media,.reel-stage[data-mode=preview] .reel-stage-media{aspect-ratio:9/16;flex-shrink:0;width:100%;height:auto}.reel-stage .reel-panel{border:0;height:auto;min-height:320px}.reel-stage-nav,.reel-stage[data-mode=preview] .reel-stage-nav{padding:var(--space-4);flex-direction:row;justify-content:center;display:flex}.reel-player-button,.reel-feed-close{min-width:44px;min-height:44px}.reel-player-controls{right:var(--space-3);top:var(--space-3)}}