/* Prime Creation // CLEAN ROOM VIEWPORT + USER SCROLL CONTRACT v2
   Physical geometry is CSS-only. Browser-trusted gestures are the only page-scroll mover.
   No JS viewport measurement, scroll restoration, synthetic scroll, momentum shim, or route patch owns page movement.
   Spatial chains must never be collapsed by shell paint containment, isolation, or hidden overflow. */

:root{
  --prime-shell-bg:#020509;
  --prime-shell-height:100vh;
  --prime-page-viewport-height:100vh;
  --prime-layout-gutter:clamp(.65rem,1.25vw,1.15rem);
  --prime-layout-gap:clamp(.55rem,1vw,1rem);
  --prime-control-target:40px;
  --prime-copy-measure:72ch;
  --prime-page-bottom-clearance:calc(var(--prime-pill-system-reserve,68px) + clamp(.7rem,1.5vh,1.15rem));
  --prime-page-module-clearance:var(--prime-pill-system-reserve,68px);
  --prime-native-safe-left:env(safe-area-inset-left,0px);
  --prime-native-safe-right:env(safe-area-inset-right,0px);
  --prime-native-safe-top:env(safe-area-inset-top,0px);
  --prime-native-safe-bottom:env(safe-area-inset-bottom,0px);
  --prime-safe-content-left:var(--prime-native-safe-left);
  --prime-safe-content-right:var(--prime-native-safe-right);
  --prime-safe-content-top:var(--prime-native-safe-top);
  --prime-safe-content-bottom:var(--prime-native-safe-bottom);
  --prime-viewport-frame-inset:1px;
}
/* First paint must track the browser's currently visible viewport, not the
   permanently-small viewport. 100vh remains the universal fallback. */
@supports(height:100dvh){:root{--prime-shell-height:100dvh;--prime-page-viewport-height:100dvh}}

html{
  margin:0!important;
  padding:0!important;
  width:100%!important;
  height:var(--prime-shell-height)!important;
  background:var(--prime-shell-bg)!important;
  overflow:clip!important;
  overscroll-behavior:none!important;
  transform-style:preserve-3d!important;
}
body.prime-v2{
  position:fixed!important;
  inset:0 auto auto 0!important;
  width:100%!important;
  height:var(--prime-shell-height)!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  background:var(--prime-shell-bg)!important;
  overflow:clip!important;
  overscroll-behavior:none!important;
  transform-style:preserve-3d!important;
}

/* iOS WebKit browser-chrome guard.
   Chrome on iPhone/iPad can paint fixed viewport-root layers against a stale toolbar
   anchor on first paint, leaving a false empty strip below the shell. Keep the same
   CSS-only viewport rectangle, but anchor the root through normal absolute layout so
   the Receptor reaches the browser's actual page edge without any JS geometry writer. */
@supports (-webkit-touch-callout:none){
  @media (hover:none) and (pointer:coarse){
    html{
      height:100%!important;
      min-height:100%!important;
    }
    body.prime-v2{
      position:absolute!important;
      inset:0!important;
      height:100%!important;
      min-height:100%!important;
    }
  }
}

body.prime-v2>#main[data-app-shell]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:clip!important;
  background:var(--prime-shell-bg)!important;
  isolation:auto!important;
  contain:layout style!important;
  transform-style:preserve-3d!important;
}

/* Only the active route exists visually. */
body.prime-v2 #main[data-app-shell]>.app-window{display:none!important}
body.prime-v2 #main[data-app-shell]>.app-window[hidden],
body.prime-v2 #main[data-app-shell]>.app-window[aria-hidden="true"],
body.prime-v2 #main[data-app-shell]>.app-window:not(.is-prime-viewport-active){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  content-visibility:hidden!important;
}
body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active:not([hidden])[aria-hidden="false"]{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  content-visibility:visible!important;
  transform-style:preserve-3d!important;
}

/* Page 01 is fixed Receptor paint. */
body.prime-v2 #main[data-app-shell]>#top.app-window.is-prime-viewport-active:not([hidden]){
  display:grid!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:clip!important;
  overscroll-behavior:none!important;
  touch-action:manipulation!important;
  z-index:1!important;
  transform-style:preserve-3d!important;
}
body.prime-v2 #main[data-app-shell]>#top.app-window.is-prime-viewport-active:not([hidden]) .receptor-brand-group{
  top:0!important;
  bottom:auto!important;
  block-size:calc(100% - var(--prime-pill-system-reserve,68px))!important;
  max-block-size:calc(100% - var(--prime-pill-system-reserve,68px))!important;
}

/* ONE PHYSICAL PAGE RECTANGLE.
   No --pf-* variable, visualViewport value, JavaScript height, or route stylesheet participates.
   Shell height comes only from the CSS 100vh fallback / 100dvh live-chrome contract above. */
body.prime-v2 #main[data-app-shell]>.app-window[data-prime-viewport-module].is-prime-viewport-active:not([hidden]):not(#top){
  position:absolute!important;
  top:var(--prime-native-safe-top)!important;
  right:var(--prime-native-safe-right)!important;
  bottom:var(--prime-pill-system-reserve,68px)!important;
  left:var(--prime-native-safe-left)!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  box-sizing:border-box!important;
  border:1px solid rgba(137,230,255,.28)!important;
  border-radius:clamp(1.05rem,2.4vw,1.7rem)!important;
  background-clip:padding-box!important;
  container-type:inline-size;
  container-name:prime-page;
  z-index:1!important;
  transform-style:preserve-3d!important;
}

/* ONE NATIVE PAGE SCROLL CONTRACT.
   These are the only page routes with vertical page scrolling. No script participates.
   Native scrolling remains the only unavoidable grouping boundary; no additional shell
   paint/isolation boundary is allowed above it. */
body.prime-v2 #main[data-app-shell]>:is(#intro,#sprite,#process,#studio,#contact).app-window.is-prime-viewport-active:not([hidden]){
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:none!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y pinch-zoom!important;
  scroll-behavior:auto!important;
  scroll-snap-type:none!important;
  scroll-snap-align:none!important;
  scroll-snap-stop:normal!important;
  overflow-anchor:none!important;
  scrollbar-gutter:auto!important;
  scroll-padding:var(--prime-layout-gutter) var(--prime-layout-gutter) var(--prime-page-bottom-clearance)!important;
}
body.prime-v2 #main[data-app-shell]>#sprite[data-prime-sprit-mode="embedded-app"].app-window.is-prime-viewport-active:not([hidden]),
body.prime-v2 #main[data-app-shell]>:is(#music,#portfolio,#video,#book).app-window.is-prime-viewport-active:not([hidden]){
  overflow:clip!important;
  overscroll-behavior:none!important;
}

/* Route display semantics only. */
#main[data-app-shell]>:is(#intro,#music,#book,#studio).is-prime-viewport-active:not([hidden]){display:block!important}
#main[data-app-shell]>:is(#portfolio,#video,#sprite,#process,#contact).is-prime-viewport-active:not([hidden]){display:grid!important}

/* Explicit local scrollers remain native, user-driven, and isolated from page movement. */
[data-prime-local-scroll="x"]{overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-inline:contain!important;overscroll-behavior-block:none!important;touch-action:pan-x pinch-zoom!important}
[data-prime-local-scroll="y"]{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-inline:none!important;overscroll-behavior-block:contain!important;touch-action:pan-y pinch-zoom!important}
[data-prime-local-scroll="both"]{overflow:auto!important;overscroll-behavior:contain!important;touch-action:pan-x pan-y pinch-zoom!important}

/* Shared motion is paint under the page, never geometry. */
html[data-prime-viewport-motion] body.prime-v2 #main[data-app-shell]>.prime-viewport-motion-layer[data-prime-background-layer="true"]{
  clip-path:inset(0 round var(--prime-motion-radius,0px))!important;
}

/* Live frame is paint only. */
body.prime-v2>#main[data-app-shell]::after{
  content:""!important;
  position:absolute!important;
  inset:var(--prime-viewport-frame-inset)!important;
  z-index:9800!important;
  margin:0!important;
  box-sizing:border-box!important;
  border:1px solid rgba(137,230,255,.34)!important;
  border-radius:0 0 clamp(1.25rem,calc(var(--prime-native-safe-bottom) + .75rem),4rem) clamp(1.25rem,calc(var(--prime-native-safe-bottom) + .75rem),4rem)!important;
  box-shadow:inset 0 0 0 1px rgba(83,207,238,.025)!important;
  pointer-events:none!important;
}

/* Shell children. */
#main[data-app-shell]>.ambient,#main[data-app-shell]>.pc-spatial-viewport-field{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;pointer-events:none!important}
#main[data-app-shell]>.topbar[data-header]{position:absolute!important;z-index:900!important;top:var(--prime-native-safe-top)!important;right:var(--prime-native-safe-right)!important;left:var(--prime-native-safe-left)!important;width:auto!important;margin:0!important}
#main[data-app-shell]>:is(.prime-site-transition,#primeBrandIntro){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
#main[data-app-shell]>.help[data-help]{position:absolute!important;z-index:985!important;contain:none!important}
#main[data-app-shell]>footer{display:none!important}
html[data-prime-viewport-active="top"] #main[data-app-shell]>.topbar[data-header]{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* Content safety only. */
body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active :where(*){min-width:0}
body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active :where(img,video,canvas,svg,iframe){max-width:100%}
body.prime-v2 [data-prime-clip="true"]{overflow:clip!important}
body.prime-v2 :where(button,.button,a[href],input,select,textarea,[tabindex]):focus-visible{outline:2px solid rgba(137,230,255,.82)!important;outline-offset:2px!important}

/* Any explicit spatial parent chain must preserve Z. */
html[data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"] body.prime-v2 :is([data-prime-spatial-field-page],[data-prime-spatial-field-parent],[data-prime-spatial-field-child="true"],.pc-spatial-host){
  transform-style:preserve-3d!important;
}

html[data-prime-form-factor="desktop"]{--pad:clamp(1.2rem,4.2vw,6rem);--prime-layout-gutter:clamp(.8rem,1.2vw,1.25rem);--prime-layout-gap:clamp(.7rem,1vw,1.15rem);--prime-control-target:40px}
html[data-prime-form-factor="tablet"]{--pad:clamp(1rem,3.2vw,2.8rem);--prime-layout-gutter:clamp(.72rem,1.8vw,1.15rem);--prime-layout-gap:clamp(.62rem,1.5vw,1rem);--prime-control-target:44px}
html[data-prime-form-factor="phone"]{--pad:clamp(.68rem,3.3vw,1rem);--prime-layout-gutter:clamp(.48rem,2.6vw,.82rem);--prime-layout-gap:clamp(.42rem,2vw,.72rem);--prime-control-target:44px;--prime-copy-measure:62ch}
body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active :where(p,li,dd){max-inline-size:var(--prime-copy-measure)}

html[data-prime-viewport-morphing="true"] body.prime-v2>#main[data-app-shell],
html[data-prime-viewport-morphing="true"] #main[data-app-shell]>.app-window.is-prime-viewport-active{transition:none!important}
@media(prefers-reduced-motion:reduce){body.prime-v2 #main[data-app-shell] *{scroll-behavior:auto!important}}