.production,.production *{box-sizing:border-box}
.production{color-scheme:light;font-family:var(--sans,"Segoe UI",Arial,sans-serif);color:#344044;-webkit-font-smoothing:antialiased;height:100%;height:100svh;display:flex;flex-direction:column;isolation:isolate;background:#fff}
.production .scene-window{position:relative;flex:1;min-height:0;width:100%;overflow:hidden;container-type:size}
/* The player places every film: one CSS pixel of its box is one film pixel, and
   the compositor moves it. A sharp film sits over the overview that carries
   camera moves, with a soft edge until it covers the whole frame. */
.production-film{position:absolute;left:0;top:0;display:block;object-fit:fill;transform-origin:0 0;opacity:0;pointer-events:none;background:transparent;will-change:transform,opacity;transition:opacity .22s linear}
.production-film[data-layer=backdrop]{z-index:1;transition:none}
.production-film[data-layer=detail]{z-index:2}
.production-film.is-feathered{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(to bottom,transparent,#000 2.5%,#000 97.5%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(to bottom,transparent,#000 2.5%,#000 97.5%,transparent);mask-composite:intersect}
/* The first still sits exactly where its film will play. These rules hold it
   there until the player takes over; the build writes the full-line numbers. */
.production-poster{position:absolute;z-index:4;display:block;left:50%;top:50%;aspect-ratio:1.7777777778;transform-origin:0 0;pointer-events:none;transition:opacity .18s linear}
.production-poster img{display:block;width:100%;height:100%;object-fit:cover}
.production-poster[data-placed]{aspect-ratio:auto}
.production-poster:not([data-placed]){width:min(112.000cqw,321.908cqh);transform:translate(-50%,-48.9326%)}
@media(max-width:760px),(max-width:1024px) and (pointer:coarse){.production-poster:not([data-placed]){left:0;top:0;width:100%;height:100%;aspect-ratio:auto;transform:none}}
.production[data-intro=loading]:not([data-entrance=shown]) .scene-window{opacity:0}
.production[data-entrance=shown] .scene-window{animation:production-reveal .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes production-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.production .full-line-button{display:block}.production .follow-button{display:flex;align-items:center;gap:8px}.production .follow-button svg{width:18px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.mobile-process-label{display:none}.mobile-process-label svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.production .stages{flex:none;display:flex;justify-content:center;padding:8px 24px max(18px,env(safe-area-inset-bottom));background:#fff}
.production .stage-list{position:relative;display:flex;align-items:center;gap:4px;padding:6px;border:1px solid #e7e9e7;border-radius:999px;background:#f3f5f3;isolation:isolate}
.production .stage-list::before{content:"";position:absolute;left:0;top:0;width:var(--selection-width,0px);height:var(--selection-height,0px);transform:translate(var(--selection-x,0px),var(--selection-y,0px));border-radius:999px;background:#fff;box-shadow:0 2px 7px #1b302412,0 0 0 1px #dfe5df;opacity:0;transition:transform .48s cubic-bezier(.22,.8,.18,1.04),width .48s cubic-bezier(.22,.8,.18,1.04),height .48s ease,opacity .2s;pointer-events:none;z-index:0}
.production .stage-list[data-positioned=true]::before{opacity:1}
.production .stage-button{position:relative;z-index:1;appearance:none;border:0;border-radius:999px;background:transparent;padding:14px 25px;min-height:46px;font:500 14px/1.2 var(--sans,"Segoe UI",Arial,sans-serif);letter-spacing:-.015em;color:#748078;cursor:pointer;white-space:nowrap;transition:color .25s,transform .25s cubic-bezier(.2,.8,.2,1),background .25s}
.production .stage-button:hover{color:#263c32;background:#dfe6df55;transform:translateY(-1px)}
.production .stage-button:active{transform:translateY(0) scale(.96)}
.production .stage-button[aria-pressed=true]{color:#1e342c}
.production .stage-button::after{content:"";position:absolute;left:calc(50% - 7px);bottom:6px;width:14px;height:2px;border-radius:2px;background:#81988b;opacity:0;transform:scaleX(.35);transition:opacity .4s,transform .4s}
.production .stage-button[data-running=true]::after{opacity:.75;transform:scaleX(1)}
.production .stage-button:focus-visible{outline:2px solid #6a8878;outline-offset:3px}
.production[data-backdrop=hero]{padding-top:100px;min-height:480px}
@media(max-width:760px){.production[data-backdrop=hero]{padding-top:104px;min-height:100svh}}
@media(max-width:760px){.production .desktop-process-label{display:none}.production .mobile-process-label{display:block}.production .stage-list{gap:5px;padding:6px}.production .stage-button{display:grid;place-items:center;width:46px;height:46px;padding:0;font-size:15px}.production .full-line-button{display:none}}
.production[data-compact=true]{min-height:100svh}.production[data-compact=true] .stages{padding:12px 14px max(24px,env(safe-area-inset-bottom))}
.production[data-compact=true] .stage-list{display:flex;gap:5px;padding:6px;border-radius:999px;max-width:100%;width:auto}
.production[data-compact=true] .stage-button{display:grid;place-items:center;width:46px;height:46px;min-height:46px;padding:0;font-size:15px;font-weight:500}
.production[data-compact=true] .stage-button::after{bottom:5px;width:8px;left:calc(50% - 4px)}
.production[data-compact=true] .desktop-process-label{display:none}.production[data-compact=true] .mobile-process-label{display:block}
.production[data-compact=true] .full-line-button{display:none}.production[data-compact=true] .follow-button{display:grid}
@media(max-height:520px) and (orientation:landscape){.production[data-backdrop=hero]{padding-top:86px;min-height:350px}.production .stages{padding:6px 12px 14px}.production .stage-button{font-size:12px;padding:12px 20px}}
.production[data-waiting=true] .stage-button[aria-pressed=true]{animation:production-waiting .9s ease-in-out infinite}
@keyframes production-waiting{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.production[data-entrance=shown] .scene-window{animation:none}.production .stage-button,.production .stage-button::after,.production .stage-list::before,.production-film,.production-poster{transition:none}.production .stage-button:hover,.production .stage-button:active{transform:none}}