.studio-player{position:relative;display:grid;place-items:center;isolation:isolate;min-width:0;width:100%;height:100%;overflow:hidden;border:2px solid var(--palette-bde987);border-radius:var(--radius-18px);background:var(--palette-020906);box-shadow:inset 0 0 0 1px var(--palette-e5ffc333),0 16px 36px var(--palette-00000055);color:var(--palette-eaffcf)}
/* The video stays on its own layer below the controls. WebKit otherwise paints a
   playing video above sibling overlays, which made the control bar vanish. */
.studio-player>video{position:relative;z-index:0;display:block;width:100%;height:100%;max-height:100%;min-height:0;object-fit:contain;background:var(--palette-020906);cursor:pointer;transform:translateZ(0)}
.video-dialog .studio-player{--studio-max-height:var(--viewer-height,clamp(200px,min(64dvh,calc(100dvh - 340px)),960px));width:min(100%,calc(var(--studio-max-height)*var(--studio-aspect,1.7778)));height:auto;aspect-ratio:var(--studio-aspect,1.7778);min-height:0;max-height:var(--studio-max-height);margin-inline:auto;border-radius:var(--radius-15px)}
.video-dialog .studio-player>video{max-height:100%;min-height:0}
/* Latest result on the studio page: the frame hugs the picture inside the stage, so square videos get no black side bars. */
.render-stage:has(>.studio-player){container-type:size}
.render-stage>.studio-player{width:min(100cqw,calc(100cqh * var(--studio-aspect,1.7778)));height:min(100cqh,calc(100cqw / var(--studio-aspect,1.7778)))}
.studio-player:focus-visible{outline:2px solid var(--palette-e4ffb9);outline-offset:4px}
.studio-player-controls{position:absolute;z-index:5;right:12px;bottom:12px;left:12px;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 9px;border:1px solid var(--palette-8bb27c);border-radius:var(--radius-11px);background:var(--palette-07160ff2);box-shadow:0 7px 20px var(--palette-00000055);color:var(--palette-eaffcf);transform:translateZ(0);will-change:transform}
.studio-player-controls button{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:1px solid var(--palette-8ba775);border-radius:var(--radius-8px);background:linear-gradient(145deg,var(--palette-305439fa),var(--palette-102b1dfa));color:var(--palette-e8ffcd);font:650 20px/1 Arial,sans-serif;cursor:pointer}
.studio-player-controls button:hover{border-color:var(--palette-e1ffb0);background:var(--palette-315a38)}.studio-player button:focus-visible,.studio-player input:focus-visible{outline:2px solid var(--wan-close-focus);outline-offset:3px}
.studio-player-controls input[type=range]{--studio-progress:0%;min-width:28px;width:0;flex:1;height:20px;margin:0;accent-color:var(--field-focus);cursor:pointer;background:var(--palette-transparent);appearance:none;-webkit-appearance:none}
.studio-player-controls input[type=range]::-webkit-slider-runnable-track{height:5px;border:1px solid var(--palette-7f947b);border-radius:var(--radius-8px);background:linear-gradient(to right,var(--field-focus) 0 var(--studio-progress),var(--palette-2c3e30) var(--studio-progress) 100%)}
.studio-player-controls input[type=range]::-webkit-slider-thumb{width:16px;height:16px;margin-top:-6px;border:1px solid var(--palette-d8ff9d);border-radius:var(--radius-circle);background:var(--field-focus);appearance:none;-webkit-appearance:none;box-shadow:0 0 9px var(--palette-b5ec5240)}
.studio-player-controls input[type=range]::-moz-range-track{height:5px;border:1px solid var(--palette-7f947b);border-radius:var(--radius-8px);background:var(--palette-2c3e30)}.studio-player-controls input[type=range]::-moz-range-progress{height:5px;border-radius:var(--radius-8px);background:var(--field-focus)}.studio-player-controls input[type=range]::-moz-range-thumb{width:16px;height:16px;border:1px solid var(--palette-d8ff9d);border-radius:var(--radius-circle);background:var(--field-focus)}
.studio-player-controls input:disabled{opacity:.45;cursor:default}
.studio-player-clock{flex:none;min-width:72px;color:var(--palette-e8f5d9);font:650 11px/1.3 var(--display,'Space Grotesk',Arial,sans-serif);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}
.studio-player-message{position:absolute;z-index:6;right:14px;bottom:76px;left:14px;margin:0;padding:10px 12px;border:1px solid var(--palette-8bb27c);border-radius:var(--radius-11px);background:var(--palette-092015ef);color:var(--palette-f0f9e9);font:600 12px/1.45 var(--font,Arial,sans-serif);text-align:center;transform:translateZ(0)}
.studio-player-navigation{position:absolute;z-index:5;top:10px;left:10px;display:flex;gap:8px;transform:translateZ(0)}
.studio-player-navigation[hidden]{display:none}
.studio-player-navigation button{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:4px;border:1px solid var(--palette-c4e99e);border-radius:var(--radius-11px);background:linear-gradient(145deg,var(--palette-305439fa),var(--palette-102b1dfa));box-shadow:inset 0 1px 0 var(--palette-d9f6b659),0 4px 12px var(--palette-00000099);cursor:pointer}
.studio-player-navigation button:disabled{border-color:var(--palette-6c846b);background:linear-gradient(145deg,var(--palette-24392cfa),var(--palette-11231afa));cursor:default}
.studio-player-navigation span{display:block;width:30px;height:30px;background:url('/static/icons/wan-studio-controls.webp?v=20261029-42') no-repeat 50% 0%/300% 300%;transform:translate(.6%,-13.3%);filter:drop-shadow(0 2px 3px var(--palette-00000088))}
.studio-player-navigation .studio-player-next span{background-position:100% 0%;transform:translate(8.4%,-13.3%)}.studio-player-navigation button:disabled span{opacity:.6;filter:grayscale(.8) brightness(.85)}
.studio-player .studio-player-close{position:absolute;z-index:5;top:var(--wan-close-overlay-inset,10px);right:var(--wan-close-overlay-inset,10px);margin:0;transform:translateZ(0)}
.studio-player.is-compact .studio-player-controls{gap:6px;right:7px;bottom:7px;left:7px;padding:6px}.studio-player.is-compact .studio-player-controls button{width:30px;height:30px;font-size:18px}.studio-player.is-compact .studio-player-clock{min-width:62px;font-size:10px}
.studio-player.is-fullscreen,.studio-player:fullscreen{position:fixed;z-index:2147483000;inset:0;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;min-height:0!important;margin:0;padding:0;border:0;border-radius:var(--radius-square);background:var(--palette-020906);aspect-ratio:auto}
.studio-player:popover-open{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--palette-eaffcf);overflow:hidden}
.studio-player.is-fullscreen>video,.studio-player:fullscreen>video{max-height:none;width:100%;height:100%;object-fit:contain}.studio-player.is-fullscreen .studio-player-controls{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left))}
.studio-player.is-fullscreen .studio-player-close{top:max(var(--wan-close-overlay-inset,10px),env(safe-area-inset-top));right:max(var(--wan-close-overlay-inset,10px),env(safe-area-inset-right))}
html.studio-player-overlay-open,html.studio-player-overlay-open body{overflow:hidden}
@media(max-width:590px){.video-dialog .studio-player{--studio-max-height:calc(100dvh - 190px);flex:none;align-self:center;width:min(100%,calc(var(--studio-max-height)*var(--studio-aspect,1.7778)));height:auto;min-height:0;max-height:var(--studio-max-height);aspect-ratio:var(--studio-aspect,1.7778);border-radius:var(--radius-14px)}.studio-player-navigation{gap:6px;left:8px;top:8px}.studio-player-navigation button{width:34px;height:34px;border-radius:var(--radius-10px)}.studio-player-navigation span{width:26px;height:26px}.studio-player.is-compact .studio-player-controls:has(.studio-player-sound:not([hidden])){display:grid;grid-template-columns:30px minmax(28px,1fr) 30px 30px}.studio-player.is-compact .studio-player-controls:has(.studio-player-sound:not([hidden])) input{width:100%}.studio-player.is-compact .studio-player-controls:has(.studio-player-sound:not([hidden])) .studio-player-clock{grid-column:2;grid-row:2;justify-self:center}.studio-player.is-compact .studio-player-controls:has(.studio-player-sound:not([hidden])) .studio-player-sound{grid-column:3;grid-row:1}.studio-player.is-compact .studio-player-controls:has(.studio-player-sound:not([hidden])) .studio-player-fullscreen{grid-column:4;grid-row:1}}
/* Phones in landscape: the video takes the screen height; details follow below. */
@media(orientation:landscape) and (max-height:520px){.video-dialog .studio-player{--studio-max-height:calc(100dvh - 56px)}}
/* During playback the controls fade after a quiet moment; any activity brings them back. */
.studio-player-controls,.studio-player .studio-player-close{transition:opacity .25s ease}
.studio-player.is-idle{cursor:none}
.studio-player.is-idle .studio-player-controls,.studio-player.is-idle .studio-player-close{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.studio-player-controls{will-change:auto}.studio-player-controls,.studio-player .studio-player-close{transition:none}}