/* Prime Creation // full-viewport channel overlay
   The hero is the base scene. Every selected channel is one full-frame,
   internally scrolling overlay with one explicit exit path. */
:root{
  --prime-overlay-live-height:var(--prime-live-vh,100dvh);
  --prime-overlay-safe-top:max(env(safe-area-inset-top),0px);
  --prime-overlay-safe-right:max(env(safe-area-inset-right),0px);
  --prime-overlay-safe-bottom:max(env(safe-area-inset-bottom),0px);
  --prime-overlay-safe-left:max(env(safe-area-inset-left),0px);
  --prime-overlay-inline:max(clamp(1rem,4vw,4rem),var(--prime-overlay-safe-left),var(--prime-overlay-safe-right));
  --prime-overlay-chrome-height:calc(var(--prime-overlay-safe-top) + clamp(4.15rem,7vw,5.1rem));
  --prime-overlay-content-top:calc(var(--prime-overlay-chrome-height) + clamp(.7rem,2vw,1.4rem));
  --prime-overlay-content-bottom:calc(var(--prime-overlay-safe-bottom) + var(--prime-tools-pill-height,3.35rem) + var(--prime-tools-tip-rise,1.7rem) + 1.15rem);
  --prime-tools-toolbar-clearance:0px;
}

html:not(.pc-reader-isolated),
html:not(.pc-reader-isolated) body.prime-v2{
  width:100%!important;
  height:var(--prime-overlay-live-height)!important;
  min-height:0!important;
  max-height:var(--prime-overlay-live-height)!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

html:not(.pc-reader-isolated) body.prime-v2{
  position:fixed!important;
  inset:0!important;
  margin:0!important;
  padding:0!important;
}

body.prime-v2>main#main{
  position:fixed!important;
  z-index:1!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;
  overflow:hidden!important;
  isolation:isolate;
}

/* Outrank the legacy framed-dock viewport rule on both axes. */
html:not(.pc-reader-isolated) body.prime-v2.focus-mode>main#main[data-app-shell]{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  box-sizing:border-box!important;
  width:100vw!important;
  height:var(--prime-overlay-live-height)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100vw!important;
  max-height:var(--prime-overlay-live-height)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  contain:layout paint style!important;
}

/* Home remains a complete visual-viewport scene. */
body.prime-v2 #top.hero:not([hidden]){
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  padding:0!important;
  overflow:hidden!important;
}

body.prime-v2 #top.hero:not([hidden])>.hero-message{
  width:min(40rem,calc(100% - (var(--prime-overlay-inline) * 2)))!important;
  max-width:none!important;
  margin:0 var(--prime-overlay-inline) calc(var(--prime-overlay-safe-bottom) + clamp(4.7rem,10vh,7rem))!important;
}

body.prime-v2 #top.hero:not([hidden])>.hero-message .display{
  max-width:10ch;
  font-size:clamp(2.65rem,6.6vw,6.6rem);
}

/* A selected channel owns the complete frame. It is the only page scroller. */
body.prime-v2.prime-viewport-overlay-open main#main>:is(#intro,#portfolio,#social,#music,#video,#book,#sprite,#studio,#process,#services,#contact)[data-prime-overlay-panel="active"]:not([hidden]){
  position:absolute!important;
  z-index:4!important;
  inset:0!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0!important;
  padding-top:var(--prime-overlay-content-top)!important;
  padding-right:var(--prime-overlay-inline)!important;
  padding-bottom:var(--prime-overlay-content-bottom)!important;
  padding-left:var(--prime-overlay-inline)!important;
  overflow-x:clip!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  scroll-padding-top:var(--prime-overlay-content-top)!important;
  scrollbar-gutter:stable;
  content-visibility:visible!important;
  contain:none!important;
  background-color:#03070d!important;
  opacity:1;
  pointer-events:auto;
}

body.prime-v2.prime-viewport-overlay-open [data-prime-overlay-panel="active"] [data-reveal]{
  opacity:1!important;
  transform:none!important;
}

body.prime-v2.prime-viewport-overlay-open>.topbar{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-.5rem)!important;
}

/* Intro has its own authored inner grid, so the root keeps zero padding and
   the inner zone receives the overlay clearances. */
body.prime-v2.prime-viewport-overlay-open #intro[data-prime-overlay-panel="active"]{
  padding:0!important;
}

body.prime-v2.prime-viewport-overlay-open #intro[data-prime-overlay-panel="active"] .tab01-intro-zone{
  box-sizing:border-box!important;
  min-height:100%!important;
  padding-top:var(--prime-overlay-content-top)!important;
  padding-right:var(--prime-overlay-inline)!important;
  padding-bottom:clamp(2.5rem,6vw,5rem)!important;
  padding-left:var(--prime-overlay-inline)!important;
}

body.prime-v2.prime-viewport-overlay-open #intro[data-prime-overlay-panel="active"] .tab01-continuity{
  margin-bottom:var(--prime-overlay-content-bottom)!important;
}

/* Persistent overlay chrome. */
.prime-viewport-overlay-chrome{
  position:fixed;
  z-index:10010;
  top:0;
  right:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:var(--prime-overlay-chrome-height);
  padding:var(--prime-overlay-safe-top) var(--prime-overlay-inline) 0;
  box-sizing:border-box;
  background:linear-gradient(180deg,rgba(2,7,13,.98) 0%,rgba(2,7,13,.9) 68%,rgba(2,7,13,0) 100%);
  pointer-events:none;
}

.prime-viewport-overlay-chrome[hidden]{display:none!important}

.prime-viewport-overlay-id{
  display:grid;
  min-width:0;
  gap:.28rem;
  margin:0;
  color:#f5fbff;
}

.prime-viewport-overlay-id span{
  color:#79e8ff;
  font:800 .55rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.16em;
}

.prime-viewport-overlay-id strong{
  overflow:hidden;
  font-size:clamp(.72rem,1.3vw,.9rem);
  font-weight:800;
  letter-spacing:.12em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.prime-viewport-overlay-exit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.62rem;
  min-width:6.25rem;
  min-height:2.75rem;
  padding:.58rem .62rem .58rem .9rem;
  border:1px solid rgba(129,230,251,.34);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(70,220,255,.13),rgba(129,91,255,.09)),rgba(3,12,20,.88);
  color:#f5fcff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 .55rem 1.7rem rgba(0,0,0,.28);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  pointer-events:auto;
}

.prime-viewport-overlay-exit b{
  display:grid;
  width:1.7rem;
  height:1.7rem;
  place-items:center;
  border-radius:50%;
  background:rgba(117,231,255,.1);
  color:#8deaff;
  font-size:1.05rem;
  font-weight:500;
}

.prime-viewport-overlay-exit:hover,
.prime-viewport-overlay-exit:focus-visible{
  border-color:rgba(137,236,255,.72);
  background:linear-gradient(135deg,rgba(70,220,255,.22),rgba(129,91,255,.14)),rgba(3,12,20,.94);
}

.prime-viewport-overlay-exit:focus-visible{
  outline:2px solid #8deaff;
  outline-offset:3px;
}

/* The page rail stays a bottom peek. Its taller left tip remains the one
   controls drawer, with the channel rail occupying the rest of the pill. */
body.prime-v2.focus-mode .app-dock.prime-pill-slider[data-prime-tools-drawer]{
  z-index:10000!important;
  bottom:calc(max(.18rem,var(--prime-overlay-safe-bottom)) + var(--prime-org-keyboard-inset,0px))!important;
}

/* Dense page content fits before it wraps or scrolls locally. */
body.prime-v2.prime-viewport-overlay-open [data-prime-overlay-panel="active"] h2{
  font-size:clamp(2.45rem,5.8vw,6.4rem);
}

body.prime-v2.prime-viewport-overlay-open #portfolio .portfolio-head,
body.prime-v2.prime-viewport-overlay-open #video .video-head{
  gap:clamp(1.4rem,5vw,6rem)!important;
}

body.prime-v2.prime-viewport-overlay-open #portfolio .gallery-tools{
  min-width:0!important;
  margin-top:clamp(1.6rem,4vw,3rem)!important;
  padding:.75rem 0!important;
}

body.prime-v2.prime-viewport-overlay-open #portfolio .filters{
  display:flex!important;
  width:100%!important;
  max-width:100%!important;
  flex-wrap:nowrap!important;
  gap:.35rem!important;
  padding:.1rem 0 .3rem!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain!important;
  scrollbar-width:thin;
}

body.prime-v2.prime-viewport-overlay-open #portfolio .filters>button{
  flex:0 0 auto!important;
  min-height:2.15rem!important;
  padding:.45rem .72rem!important;
}

body.prime-v2.prime-viewport-overlay-open #portfolio .gallery-rail{
  grid-auto-columns:clamp(12.5rem,22vw,18rem)!important;
  gap:.72rem!important;
}

body.prime-v2.prime-viewport-overlay-open #portfolio .gallery-rail-card.gallery-item{
  min-height:0!important;
  max-height:24rem!important;
  aspect-ratio:4/5!important;
}

body.prime-v2.prime-viewport-overlay-open #portfolio .gallery:not(.gallery-rails) .gallery-item{
  min-height:clamp(13rem,24vw,23rem)!important;
}

body.prime-v2.prime-viewport-overlay-open #video .main-screen{
  min-height:clamp(18rem,36vw,34rem)!important;
}

body.prime-v2.prime-viewport-overlay-open #sprite .console-stage{
  min-height:clamp(18rem,31vw,29rem)!important;
}

/* Loading remains a compact status surface, never a replacement page. */
body.prime-v2 .prime-population-loader{
  z-index:10005!important;
  bottom:calc(var(--prime-overlay-content-bottom) - .35rem)!important;
  max-width:calc(100vw - (var(--prime-overlay-inline) * 2))!important;
}

html.pc-reader-isolated .prime-viewport-overlay-chrome,
body.prime-v2.pc-reader-isolated .prime-viewport-overlay-chrome{
  display:none!important;
}

@media(max-width:820px){
  :root{
    --prime-overlay-inline:max(1rem,var(--prime-overlay-safe-left),var(--prime-overlay-safe-right));
    --prime-overlay-chrome-height:calc(var(--prime-overlay-safe-top) + 4.15rem);
    --prime-overlay-content-top:calc(var(--prime-overlay-chrome-height) + .55rem);
    --prime-overlay-content-bottom:calc(var(--prime-overlay-safe-bottom) + var(--prime-tools-pill-height,3.18rem) + var(--prime-tools-tip-rise,1.25rem) + 1rem);
  }

  body.prime-v2 #top.hero:not([hidden])>.hero-message{
    width:calc(100% - (var(--prime-overlay-inline) * 2))!important;
    margin-bottom:calc(var(--prime-overlay-safe-bottom) + clamp(4.35rem,8vh,5.8rem))!important;
  }

  body.prime-v2 #top.hero:not([hidden])>.hero-message .display{
    font-size:clamp(2.55rem,12vw,4.35rem);
  }

  body.prime-v2.prime-viewport-overlay-open [data-prime-overlay-panel="active"] h2{
    font-size:clamp(2.35rem,11vw,4.6rem);
  }

  body.prime-v2.prime-viewport-overlay-open #portfolio .portfolio-head,
  body.prime-v2.prime-viewport-overlay-open #video .video-head{
    grid-template-columns:1fr!important;
    gap:1.15rem!important;
  }

  body.prime-v2.prime-viewport-overlay-open #portfolio .portfolio-copy{
    padding:0!important;
  }

  body.prime-v2.prime-viewport-overlay-open #portfolio .gallery-rail{
    grid-auto-columns:clamp(12rem,68vw,16.5rem)!important;
  }
}

@media(max-width:480px){
  .prime-viewport-overlay-chrome{gap:.7rem}
  .prime-viewport-overlay-id span{font-size:.49rem}
  .prime-viewport-overlay-id strong{font-size:.68rem;letter-spacing:.09em}
  .prime-viewport-overlay-exit{min-width:5.35rem;min-height:2.6rem;padding:.48rem .5rem .48rem .75rem}
  .prime-viewport-overlay-exit b{width:1.55rem;height:1.55rem}
  body.prime-v2.prime-viewport-overlay-open #intro[data-prime-overlay-panel="active"] .tab01-intro-zone{gap:1rem!important}
}

@media(max-height:620px) and (orientation:landscape){
  :root{
    --prime-overlay-chrome-height:calc(var(--prime-overlay-safe-top) + 3.65rem);
    --prime-overlay-content-top:calc(var(--prime-overlay-chrome-height) + .35rem);
  }
  .prime-viewport-overlay-exit{min-height:2.45rem}
  body.prime-v2 #top.hero:not([hidden])>.hero-message{margin-bottom:calc(var(--prime-overlay-safe-bottom) + 3.8rem)!important}
}

@media(prefers-reduced-motion:reduce){
  .prime-viewport-overlay-chrome,
  .prime-viewport-overlay-exit{transition:none!important}
}