/* Prime Creation // Page 09 Studio Installation
   Canonical Page 09 content and intake composition.
   prime-viewport-contract.css alone owns the physical page rectangle and native vertical scroll. */

html body.prime-v2 #main[data-app-shell]>#studio.app-window.section{padding:0!important}

/* Keyboard focus may change content clearance only. It never resizes or repositions the page scroller. */
html[data-prime-viewport-authority] body.prime-v2 #main[data-app-shell]>#studio.app-window:has(:is(input,textarea,select,[contenteditable="true"]):focus){
  --prime-page-bottom-clearance:var(--prime-device-page-bottom-clearance,6rem)!important;
}

/* Page composition */
html body.prime-v2 #main[data-app-shell] #studio:not([hidden])>.studio-layout{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important;grid-template-areas:"copy" "gallery" "intake"!important;
  gap:clamp(.8rem,1.7vw,1.25rem)!important;width:min(100%,78rem)!important;height:auto!important;min-width:0!important;min-height:0!important;
  max-width:78rem!important;max-height:none!important;margin:0 auto!important;
  padding:clamp(.55rem,1.3vw,.95rem) clamp(.5rem,1.4vw,.9rem) var(--prime-page-bottom-clearance,5rem)!important;
  align-items:start!important;align-content:start!important;overflow:visible!important;overflow-anchor:none!important;transform:none!important;box-sizing:border-box!important;
}
html body.prime-v2 #studio .studio-copy{grid-area:copy!important;width:100%!important;min-width:0!important;height:auto!important;margin:0!important;padding:clamp(.25rem,.8vw,.6rem)!important;overflow:visible!important;transform:none!important}
html body.prime-v2 #studio .studio-copy>p:not(.eyebrow){max-width:58rem!important;margin-bottom:0!important;line-height:1.55!important}
html body.prime-v2 #studio .studio-capabilities{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.48rem!important;width:100%!important;max-width:58rem!important;margin-top:clamp(.7rem,1.3vw,1rem)!important;transform:none!important
}
html body.prime-v2 #studio .studio-capabilities>span{
  position:relative!important;display:flex!important;align-items:center!important;min-width:0!important;min-height:44px!important;padding:.62rem .72rem!important;
  border:1px solid rgba(105,226,255,.14)!important;border-radius:.72rem!important;background:linear-gradient(135deg,rgba(75,217,255,.055),rgba(140,104,255,.035))!important;
  color:rgba(223,247,255,.86)!important;font-size:.76rem!important;line-height:1.25!important;transform:none!important
}
html body.prime-v2 #studio .studio-actions{margin-top:clamp(.65rem,1.2vw,.95rem)!important}
html body.prime-v2 #studio .studio-actions .button{min-height:44px!important;touch-action:manipulation!important}

/* Archive shell */
html body.prime-v2 #studio .studio-console{grid-area:gallery!important;position:relative!important;width:100%!important;min-width:0!important;margin:0!important;align-self:start!important;overflow:hidden!important;overflow-anchor:none!important;transform:none!important}
html body.prime-v2 #studio .studio-console .studio-gallery{
  position:relative!important;width:100%!important;height:clamp(23rem,calc(50.625vw + 6rem),45.5rem)!important;min-height:23rem!important;max-height:45.5rem!important;margin:0!important;
  overflow:hidden!important;overscroll-behavior:contain!important;touch-action:pan-y pinch-zoom!important;overflow-anchor:none!important;border-radius:1rem!important
}
body.prime-v2 #studio .studio-gallery.ready::-webkit-scrollbar{display:none!important}
body.prime-v2 #studio .studio-shot-media{
  position:absolute!important;top:0!important;left:5%!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;width:90%!important;height:calc(100% - 3.1rem)!important;
  min-width:0!important;min-height:0!important;margin:0!important;overflow:hidden!important;border:1px solid rgba(105,226,255,.18)!important;border-radius:.9rem!important;
  background:linear-gradient(155deg,rgba(6,17,26,.96),rgba(1,6,11,.99))!important;box-shadow:0 .8rem 1.9rem rgba(0,0,0,.28)!important;color:#eafcff!important;
  opacity:0!important;transform:translate3d(0,0,0) scale(.9)!important;transform-origin:center!important;pointer-events:none!important;
  transition:transform .28s cubic-bezier(.2,.72,.2,1),opacity .22s ease,border-color .22s ease!important;will-change:transform,opacity!important
}
body.prime-v2 #studio .studio-shot-media.is-active{z-index:3!important;opacity:1!important;transform:translate3d(0,0,0) scale(1)!important;pointer-events:auto!important;border-color:rgba(105,226,255,.42)!important}
body.prime-v2 #studio .studio-shot-media.is-prev{z-index:1!important;opacity:.18!important;transform:translate3d(-102%,0,0) scale(.94)!important}
body.prime-v2 #studio .studio-shot-media.is-next{z-index:1!important;opacity:.18!important;transform:translate3d(102%,0,0) scale(.94)!important}
body.prime-v2 #studio .studio-shot-media.is-away{z-index:0!important;opacity:0!important;transform:translate3d(0,0,0) scale(.86)!important}
body.prime-v2 #studio .studio-shot-stage{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;overflow:hidden!important;background:radial-gradient(circle at 50% 45%,rgba(105,226,255,.055),transparent 62%),#010409!important}
body.prime-v2 #studio .studio-shot-stage[data-loaded="false"]::before{content:attr(data-placeholder)!important;color:rgba(198,239,248,.55)!important;font:800 .66rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.1em!important}
body.prime-v2 #studio .studio-shot-open{display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;border:0!important;background:transparent!important;color:inherit!important;cursor:zoom-in!important}
body.prime-v2 #studio .studio-shot-stage :is(img,video),body.prime-v2 #studio .studio-shot-open img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-position:center!important;background:transparent!important;border:0!important}
body.prime-v2 #studio .studio-shot-stage img,body.prime-v2 #studio .studio-shot-open img{object-fit:contain!important}
body.prime-v2 #studio .studio-shot-stage video{object-fit:contain!important;background:#000!important;touch-action:manipulation!important}
body.prime-v2 #studio .studio-shot-caption{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.7rem!important;min-width:0!important;min-height:2.55rem!important;padding:.55rem .7rem!important;border-top:1px solid rgba(105,226,255,.1)!important;background:rgba(3,10,16,.94)!important}
body.prime-v2 #studio .studio-shot-caption>span{overflow:hidden!important;color:#dff9ff!important;font-size:.75rem!important;font-weight:760!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body.prime-v2 #studio .studio-shot-caption>b{flex:0 0 auto!important;color:#65def7!important;font:850 .58rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.08em!important}
body.prime-v2 #studio .studio-carousel-nav{
  position:absolute!important;z-index:6!important;right:5%!important;bottom:0!important;left:5%!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;
  align-items:center!important;gap:.55rem!important;min-height:44px!important;pointer-events:none!important
}
body.prime-v2 #studio .studio-carousel-nav button{
  display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:0!important;padding:0!important;
  border:1px solid rgba(105,226,255,.28)!important;border-radius:999px!important;background:rgba(3,11,18,.92)!important;color:#e8fcff!important;
  font:800 1.15rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;pointer-events:auto!important;cursor:pointer!important;touch-action:manipulation!important
}
body.prime-v2 #studio .studio-carousel-nav button:active{transform:scale(.96)!important}
body.prime-v2 #studio .studio-carousel-nav button:focus-visible{outline:2px solid rgba(105,226,255,.82)!important;outline-offset:2px!important}
body.prime-v2 #studio .studio-carousel-count{min-width:0!important;text-align:center!important;color:rgba(210,243,250,.82)!important;font:800 .65rem/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.08em!important;white-space:nowrap!important}

/* Intake */
.studio-request-shell{position:relative;width:100%;min-width:0;height:auto;margin:0;padding:clamp(14px,2.5vw,24px);overflow:clip;border:1px solid rgba(105,226,255,.22);border-radius:clamp(.72rem,1.2vw,1rem);background:linear-gradient(145deg,rgba(7,18,29,.92),rgba(4,10,18,.96));box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 55px rgba(0,0,0,.22);box-sizing:border-box}
.studio-request-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(82,220,255,.06) 1px,transparent 1px),linear-gradient(rgba(82,220,255,.045) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
html body.prime-v2 #studio .studio-request-shell{grid-area:intake!important;width:100%!important;height:auto!important;min-width:0!important;margin:0!important;align-self:start!important;overflow-anchor:none!important;transform:none!important}
.studio-request-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem .8rem;align-items:start;margin:0 0 1rem}
.studio-request-head>div{min-width:0;grid-column:1;grid-row:1}.studio-request-head small{display:block;color:#62e4ff;font:800 .67rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}.studio-request-head h3{margin:.35rem 0 0;font-size:clamp(1.35rem,4vw,2.25rem);letter-spacing:-.03em;line-height:1.02}.studio-request-head p{grid-column:1/-1;margin:0;max-width:52rem;color:#a9beca;font-size:.84rem;line-height:1.5}
.studio-request-toggle{position:relative;z-index:2;grid-column:2;grid-row:1;align-self:center;min-width:44px;min-height:44px;margin:0;padding:.62rem .82rem;border:1px solid rgba(98,228,255,.36);border-radius:999px;background:rgba(7,29,41,.82);color:#e8fbff;font:800 .68rem/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;touch-action:manipulation;cursor:pointer}
.studio-request-toggle:hover,.studio-request-toggle:focus-visible{border-color:rgba(98,228,255,.76);outline:0;box-shadow:0 0 0 3px rgba(98,228,255,.08)}
html body.prime-v2 #studio .studio-request-form{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important;align-items:start!important;gap:12px!important;width:100%!important;height:auto!important;min-width:0!important;margin:0!important;padding:0!important;overflow:visible!important;opacity:1!important;visibility:visible!important;transform:none!important}
html body.prime-v2 #studio .studio-request-form[hidden]{display:none!important}
html body.prime-v2 #studio .studio-request-shell[data-studio-intake-collapsed="true"]{padding-block:clamp(12px,2vw,18px)!important}
html body.prime-v2 #studio .studio-request-shell[data-studio-intake-collapsed="true"] .studio-request-head{margin-bottom:0!important}
html body.prime-v2 #studio .studio-field{position:relative!important;display:grid!important;grid-column:1!important;gap:6px!important;width:100%!important;min-width:0!important;margin:0!important;opacity:1!important;visibility:visible!important;transform:none!important}
.studio-field span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#a8bdc9;font-weight:760}
html body.prime-v2 #studio .studio-field :is(input,select,textarea){display:block!important;width:100%!important;min-width:0!important;min-height:46px!important;margin:0!important;border:1px solid rgba(115,225,255,.2)!important;border-radius:10px!important;background:rgba(2,8,14,.8)!important;color:#edfaff!important;padding:10px 12px!important;font:inherit!important;outline:none!important;box-sizing:border-box!important}
html body.prime-v2 #studio .studio-field textarea{min-height:108px!important;max-height:15rem!important;resize:vertical!important}
html body.prime-v2 #studio .studio-field :is(input,select,textarea):focus-visible{border-color:rgba(98,228,255,.72)!important;box-shadow:0 0 0 3px rgba(98,228,255,.1)!important}
html body.prime-v2 #studio .studio-request-check{grid-column:1!important;display:flex!important;gap:9px!important;align-items:flex-start!important;margin:0!important;color:#bad0dc!important;font-size:.8rem!important;line-height:1.45!important}.studio-request-check input{margin-top:3px}
html body.prime-v2 #studio .studio-request-actions{grid-column:1!important;display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important;margin-top:2px!important}
.studio-request-submit{min-height:46px;border:1px solid rgba(98,228,255,.42);background:linear-gradient(135deg,rgba(98,228,255,.18),rgba(167,136,255,.12));color:#effcff;border-radius:999px;padding:.72rem 1.15rem;font:800 .76rem/1 system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}.studio-request-submit:disabled{opacity:.55;cursor:wait}.studio-request-status{color:#9bb2c0;font-size:.78rem;line-height:1.4;min-height:1.2em}.studio-request-status.success{color:#75f0bc}.studio-request-status.error{color:#ff9aac}.studio-request-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

@media(min-width:901px){
  html[data-prime-layout][data-prime-form-factor="desktop"][data-prime-orientation="landscape"] body.prime-v2 #main[data-app-shell] #studio:not([hidden])>.studio-layout{
    grid-template-columns:minmax(20rem,.82fr) minmax(30rem,1.18fr)!important;
    grid-template-areas:"copy gallery" "intake intake"!important;
    align-items:start!important;
    width:var(--prime-desktop-canvas,min(94%,90rem))!important;
    max-width:90rem!important;
    gap:var(--prime-desktop-gap,clamp(1.5rem,3vw,3.5rem))!important;
    padding:var(--prime-desktop-block,clamp(1rem,2.4vh,2rem)) var(--prime-desktop-inline,clamp(1.25rem,3vw,3rem)) var(--prime-page-bottom-clearance,5rem)!important;
  }
  html[data-prime-layout][data-prime-form-factor="desktop"][data-prime-orientation="landscape"] body.prime-v2 #studio .studio-copy{
    align-self:start!important;
    padding:.35rem!important;
  }
  html[data-prime-layout][data-prime-form-factor="desktop"][data-prime-orientation="landscape"] body.prime-v2 #studio .studio-gallery{
    height:clamp(24rem,52vh,35rem)!important;
    min-height:24rem!important;
    max-height:35rem!important;
  }
  html[data-prime-layout][data-prime-form-factor="desktop"][data-prime-orientation="landscape"] body.prime-v2 #studio .studio-request-shell{
    margin-top:.25rem!important;
  }
}

@media(min-width:760px){
  html body.prime-v2 #studio .studio-capabilities{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body.prime-v2 #studio .studio-request-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.prime-v2 #studio .studio-field{grid-column:auto!important}
  html body.prime-v2 #studio .studio-field.wide,html body.prime-v2 #studio .studio-request-check,html body.prime-v2 #studio .studio-request-actions{grid-column:1/-1!important}
}
@media(max-width:759px){
  html body.prime-v2 #main[data-app-shell] #studio:not([hidden])>.studio-layout{padding-inline:.42rem!important;gap:.72rem!important}
  html body.prime-v2 #studio .studio-copy{padding:.15rem!important}
  html body.prime-v2 #studio .studio-copy h2{font-size:clamp(2.15rem,11vw,3.55rem)!important;line-height:.88!important}
  html body.prime-v2 #studio .studio-capabilities{grid-template-columns:1fr!important}
  html body.prime-v2 #studio .studio-console .studio-gallery{height:clamp(19rem,calc(52.875vw + 6rem),31.5rem)!important;min-height:19rem!important;max-height:31.5rem!important}
  body.prime-v2 #studio .studio-shot-media{left:3%!important;width:94%!important;height:calc(100% - 3rem)!important}
  body.prime-v2 #studio .studio-carousel-nav{right:3%!important;left:3%!important}
  html body.prime-v2 #studio .studio-request-head{grid-template-columns:minmax(0,1fr) auto!important;gap:.45rem .6rem!important}
  html body.prime-v2 #studio .studio-request-head p{font-size:.78rem!important}
  html body.prime-v2 #studio .studio-request-shell[data-studio-intake-collapsed="true"] .studio-request-head p{display:none!important}
}
@media(max-height:560px) and (orientation:landscape){
  html body.prime-v2 #main[data-app-shell] #studio:not([hidden])>.studio-layout{padding-top:.3rem!important}
  html body.prime-v2 #studio .studio-copy h2{margin-top:.16rem!important;font-size:clamp(2rem,5.2vw,3.8rem)!important;line-height:.9!important}
}
@media(pointer:coarse){body.prime-v2 #studio .studio-carousel-nav button,.studio-request-toggle,.studio-request-submit{min-width:44px!important;min-height:44px!important}}
@media(prefers-reduced-motion:reduce){body.prime-v2 #studio .studio-shot-media{transition:none!important}}
/* PAGE09 VIDEO CAROUSEL ARTIFACT GUARD r1
   Studio-console is the only 3D machine. The gallery is a native carousel
   viewport; slides are media surfaces, not additional machine bezels.
   No transforms, negative-Z values, perspective, masks or clip-paths changed. */
html[data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #studio .studio-shot-media:not(.is-active){
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
/* Hide stale chrome from earlier hydration until the updated owners remove
   it. These are decoration-only nodes, NEVER original media or controls. */
body.prime-v2 #studio :is(.studio-gallery,.studio-shot-media) >
:is(.prime-diorama-glass-face,.prime-diorama-edge,.prime-diorama-well-backdrop,
    .prime-spatial-thickness,.prime-spatial-surface-relief,.prime-foil-midplane){
  display:none!important;
  pointer-events:none!important;
}
body.prime-v2 #studio .studio-shot-media.is-active{
  visibility:visible!important;
  pointer-events:auto!important;
}
/* The original video stage, poster, play affordance, captions, carousel nav
   and swipe handlers remain owned by StudioInstallation. */


/* PAGE09 PHYSICAL PLAY TARGET r13
   The native video is still the sole decoder and media owner. Only its
   central Safari play affordance receives a 64px button in front of the
   optical glass; no additional video, backdrop or click proxy is rendered.
   Pointer events are native and the play action remains user-initiated. */
body.prime-v2 #studio .studio-shot-stage{
  position:relative!important;
}
body.prime-v2 #studio .studio-shot-stage>.studio-shot-play{
  position:absolute!important;
  top:50%!important;left:50%!important;
  right:auto!important;bottom:auto!important;
  display:grid!important;place-items:center!important;
  width:64px!important;height:64px!important;
  min-width:64px!important;min-height:64px!important;
  margin:0!important;padding:0 0 0 3px!important;
  border:1px solid rgba(175,240,255,.55)!important;
  border-radius:50%!important;
  background:linear-gradient(155deg,rgba(46,70,80,.90),rgba(12,24,34,.88))!important;
  box-shadow:0 8px 23px rgba(0,0,0,.48),inset 0 1px 0 rgba(227,251,255,.23),0 0 16px rgba(97,220,255,.16)!important;
  color:#f4fcff!important;
  font:700 25px/1 ui-sans-serif,system-ui,sans-serif!important;
  text-shadow:0 0 8px rgba(191,245,255,.4)!important;
  opacity:1!important;visibility:visible!important;
  transform:translate3d(-50%,-50%,12px)!important;
  translate:none!important;
  z-index:80!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer!important;
}
body.prime-v2 #studio .studio-shot-stage>.studio-shot-play:active{
  background:rgba(53,119,139,.96)!important;
}
body.prime-v2 #studio .studio-shot-stage>.studio-shot-play:focus-visible{
  outline:2px solid #c6f7ff!important;outline-offset:4px!important;
}
body.prime-v2 #studio .studio-shot-stage>.studio-shot-play[hidden]{
  display:none!important;pointer-events:none!important;
}
body.prime-v2 #studio .studio-shot-stage>.studio-shot-video-status{
  position:absolute!important;bottom:13px!important;
  left:10px!important;right:10px!important;
  display:block!important;padding:7px 9px!important;
  border-radius:7px!important;
  color:#e5f8ff!important;background:rgba(5,18,28,.88)!important;
  font:700 11px/1.4 ui-monospace,Consolas,monospace!important;
  text-align:center!important;z-index:80!important;pointer-events:none!important;
}
body.prime-v2 #studio .studio-shot-stage>.studio-shot-video-status[hidden]{
  display:none!important;
}


/* STUDIO PLAY / PAUSE SINGLE HIT RECT r14
   Same real button and XY for both states, one decoder. While playing the
   64px control quiets visually but remains tappable above the native video. */
body.prime-v2 #studio .studio-shot-stage>.studio-shot-play[data-studio-play-state="playing"]{
  /* Fully transparent PAINT, not a hidden element or opacity:0:
     it remains a real 64px hit target for Safari and diorama rescue. */
  display:grid!important;
  opacity:1!important;
  visibility:visible!important;
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
body.prime-v2 #studio .studio-shot-stage>.studio-shot-play[data-studio-play-state="playing"]::before,
body.prime-v2 #studio .studio-shot-stage>.studio-shot-play[data-studio-play-state="playing"]::after{
  display:none!important;
}
/* Keyboard users retain a visible focus ring; touch interactions stay invisible. */
body.prime-v2 #studio .studio-shot-stage>.studio-shot-play[data-studio-play-state="playing"]:focus-visible{
  outline:2px solid #c6f7ff!important;
  outline-offset:4px!important;
}
body.prime-v2 #studio .studio-shot-stage>.studio-shot-play[data-studio-play-state="starting"]{
  opacity:.7!important;
  pointer-events:auto!important;
}
@media(prefers-reduced-motion:reduce){
 body.prime-v2 #studio .studio-shot-stage>.studio-shot-play{transition:none!important}
}
