:root{color-scheme:dark;--switch-position:50%}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#160b09}
body{font-family:Arial,sans-serif;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.entrance{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate}
.scene{position:absolute;left:50%;top:50%;width:max(100vw,177.6833svh);height:max(100svh,56.2799vw);transform:translate(-50%,-50%)}
.scene-art,.scene-art img{display:block;position:absolute;inset:0;width:100%;height:100%}
.scene-art img{object-fit:fill}
.destination{position:absolute;top:25%;height:35%;width:28%;border-radius:8px;transition:box-shadow .2s ease;outline-offset:8px;-webkit-tap-highlight-color:transparent}
.production{left:12%}
.dan{right:5%}
.destination:focus-visible{outline:3px solid #fff;box-shadow:0 0 25px #e8332080}
.switch{position:absolute;left:49.88%;top:46.23%;width:19.38%;height:15.41%;transform:translate(-50%,-50%)}
.switch-arrow{position:absolute;top:15%;height:70%;width:35%;border-radius:50%;-webkit-tap-highlight-color:transparent}
.switch-left{left:5%}
.switch-right{right:5%}
.switch-arrow:focus-visible{outline:3px solid #fff;outline-offset:-8px;box-shadow:0 0 18px #ff2a14}
.switch-knob{position:absolute;left:var(--switch-position);top:48.6%;width:27.78%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background-image:url('/assets/landing/studio-to-stage-knob-source.webp');background-size:1857.78% auto;background-position:49.8736% 45.71%;box-shadow:1px 5px 8px #0009;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:left .12s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease}
.switch-knob:hover,.switch-knob:focus-visible{box-shadow:0 0 0 2px #ffe5c9,1px 6px 12px #000a,0 0 22px #ff482a80;outline:none}
.is-dragging .switch-knob{cursor:grabbing;transition:none}
.is-leaving .switch-knob{cursor:progress;box-shadow:0 0 0 2px #ffd8c6,0 0 22px #f7361ca0,2px 6px 9px #0009}
.is-leaving .destination,.is-leaving .switch-arrow{pointer-events:none}
@media(max-aspect-ratio:1/1){
 .scene{width:max(100vw,56.2799svh);height:max(100svh,177.6833vw)}
 .destination{top:20%;height:27%;width:37%}
 .production{left:12%}
 .dan{right:4%}
 .switch{left:49.95%;top:53.04%;width:44.1%;height:8.6%}
 .switch-knob{width:27.78%;min-width:44px;top:49.5%}
}
/* A separately framed photograph keeps both complete signs on tall phones. */
@media(max-aspect-ratio:9/16){
 .scene{width:max(100vw,46.3626svh);height:max(100svh,215.6909vw)}
 .switch{left:49.18%;top:51.74%;width:42.5%;height:6.73%}
 .switch-knob{top:49.5%}
}
@media(prefers-reduced-motion:reduce){.switch-knob,.destination{transition:none}}

.case-index{position:absolute;left:3.5%;top:74.6%;width:8%;height:8%;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;background:linear-gradient(120deg,#181510,#100e0bd9);color:#b4a58f;font:bold clamp(12px,1.4vw,24px)/1.1 Arial,sans-serif;text-decoration:none;letter-spacing:.02em;text-shadow:0 1px 3px #000;transform:rotate(-2deg);transition:transform .18s ease,color .18s ease,box-shadow .18s ease}
.case-index:hover,.case-index:focus-visible{transform:translateY(-4px) rotate(-2deg);color:#fff0d5;box-shadow:0 6px 14px #0008;outline:2px solid #d1ad75;outline-offset:2px}
@media(max-aspect-ratio:1/1){.case-index{left:4%;top:82%;width:22%;height:7%;font-size:18px}}
@media(prefers-reduced-motion:reduce){.case-index{transition:none}}
/* Stencilled case lettering, softened into the photographed surface. */
.case-index{left:3.5%;top:74.6%;width:7.4%;height:8%;padding:5px 9px;background:radial-gradient(ellipse at center,#17130ff5 0%,#17130fe8 45%,#17130f00 76%);color:#a99b83;font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(12px,1.45vw,24px);font-weight:900;letter-spacing:.035em;text-shadow:1px 1px 1px #0009;box-shadow:none;transform:rotate(-2deg);opacity:.86}
.case-index:hover,.case-index:focus-visible{transform:translateY(-2px) rotate(-2deg);color:#d4c5ab;box-shadow:none;opacity:1;outline:none}
.case-index:focus-visible{text-decoration:underline;text-underline-offset:4px}
@media(max-aspect-ratio:1/1){.case-index{left:4%;top:82%;width:22%;height:7%;font-size:18px}}

/* The label is now painted into the photographic plate. */
.case-index{background:none;opacity:1;color:transparent;box-shadow:none;transform:none}
.case-index:hover,.case-index:focus-visible{background:none;box-shadow:none;color:transparent;transform:translateY(-2px);outline:1px solid #c8b59166;outline-offset:3px;border-radius:4px}
@media(min-aspect-ratio:1/1){.case-index:hover,.case-index:focus-visible{background-image:url('/assets/landing/studio-to-stage-index.webp');background-size:1351.35135% 1250%;background-position:3.7797% 81.08696%;outline:none;border-radius:0}}
@media(max-aspect-ratio:1/1){.case-index{color:#b8aa91;background:#100e0b99}.case-index .sr-only{position:static;clip-path:none;width:auto;height:auto;margin:0;overflow:visible;white-space:normal}.case-index:hover,.case-index:focus-visible{color:#d4c5ab}}