/* PRIME /prime-premium-polish.css */
/* Prime Creation // sitewide finishing pass 2026-10-15.
   Material-aware detail, not a second paint/compositor/geometry system.
   Never transform, scale, clip, obscure, restyle physical Z roots,
   or alter the user-owned native scroll and hitboxes. */
html[data-prime-canon="prime-creation"]{
  --prime-polish-ice:rgba(157,233,255,.90);
  --prime-polish-line:rgba(174,231,255,.43);
  --prime-polish-focus:rgba(160,230,255,.80);
}

/* Controls keep their native material and 3D Z position. Only responsive,
   transient state edges are sharpened. This does not introduce a shadow
   atlas, background blur, or continuous compositing animation. */
@media(hover:hover) and (pointer:fine){
  html[data-prime-canon="prime-creation"] body.prime-v2
  #main[data-app-shell]>.app-window.is-prime-viewport-active
  :is(button,.button,.prime-price-tab,[role="button"],[role="tab"],[role="switch"]):not(:disabled):not([aria-disabled="true"]):hover{
    border-color:var(--prime-polish-line);
  }
}

/* Quiet finish at rest. Respect authored per-skin fill and gloss; refine
   only the control's existing edge and its embossed label. These paints do
   not create a new compositor layer or affect perspective/hit testing. */
html[data-prime-canon="prime-creation"] body.prime-v2
#main[data-app-shell]>.app-window.is-prime-viewport-active
:is(.prime-price-tab,.prime-storefront-tab,.prime-storefront-buy,.tab01-actions .button,.service-card .button,.sprite-launch-gate .button){
  border-color:color-mix(in srgb,currentColor 28%,transparent);
}
html[data-prime-canon="prime-creation"] body.prime-v2
#main[data-app-shell]>.app-window.is-prime-viewport-active
:is(.primary,.prime-storefront-buy,[data-prime-action-priority="primary"]){
  text-shadow:0 1px 0 rgba(0,0,0,.24);
  letter-spacing:.012em;
}
html[data-prime-canon="prime-creation"] body.prime-v2 ::selection{
  background:rgba(121,213,250,.26);
  color:inherit;
}

/* Focus belongs to the ORIGINAL button/input. No overlay is added above
   the transmissive panel glass, and no transform affects its clickbox. */
html[data-prime-canon="prime-creation"] body.prime-v2
#main[data-app-shell]>.app-window.is-prime-viewport-active
:is(button,a[href],.prime-price-tab,input,textarea,select,summary,[role="button"],[role="tab"],[role="switch"]):focus-visible,
html[data-prime-canon="prime-creation"] body.prime-v2
#primeCommandDeck :is(button,a[href],[role="button"],[role="tab"]):focus-visible{
  outline:2px solid var(--prime-polish-focus)!important;
  outline-offset:3px!important;
}

/* Native form fields and labels: preserve each selected Skin Forge surface,
   improve legibility of entered content and disabled/unfocused affordances. */
html[data-prime-canon="prime-creation"] body.prime-v2
#main[data-app-shell]>.app-window.is-prime-viewport-active
:is(input,textarea,select){
  caret-color:var(--prime-polish-ice);
}
html[data-prime-canon="prime-creation"] body.prime-v2
#main[data-app-shell]>.app-window.is-prime-viewport-active
:is(input,textarea)::placeholder{
  opacity:.78;
}
html[data-prime-canon="prime-creation"] body.prime-v2
#main[data-app-shell]>.app-window.is-prime-viewport-active
:is(input,textarea,select):focus-visible{
  border-color:var(--prime-polish-focus)!important;
}

/* Crisp money, counters, and dossier metadata. Fixed-width numerals keep
   values from visibly jumping when live text updates, without moving layout. */
html[data-prime-canon="prime-creation"] body.prime-v2
:is(.prime-visit-counter,.prime-visit-value,.prime-price-tab,.prime-storefront-price,[data-prime-price],[data-prime-total]){
  font-variant-numeric:tabular-nums;
}

/* Editorial links preserve authored contrast, gaining a discoverable
   underline only when keyboard- or mouse-targeted; buttons are excluded. */
html[data-prime-canon="prime-creation"] body.prime-v2
#main[data-app-shell]>.app-window.is-prime-viewport-active
:is(p,li,figcaption,.heading-copy) a[href]:not(.button):not([role="button"]):focus-visible{
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.19em;
}
@media(hover:hover) and (pointer:fine){
  html[data-prime-canon="prime-creation"] body.prime-v2
  #main[data-app-shell]>.app-window.is-prime-viewport-active
  :is(p,li,figcaption,.heading-copy) a[href]:not(.button):not([role="button"]):hover{
    text-decoration-line:underline;
    text-decoration-thickness:1px;
    text-underline-offset:.19em;
  }
}
/* Accessibility and forced-color fidelity are native, never faked. */
@media(forced-colors:active){
 html[data-prime-canon="prime-creation"] body.prime-v2 :is(button,a[href],input,textarea,select,[role="button"],[role="tab"]):focus-visible{
   outline-color:Highlight!important;
 }
}

/* PRIME /prime-finish-20261023.css */
/* PRIME // targeted visual + device-budget finishing pass, 2026-10-23.
   Non-destructive: viewport, scroll, 3D axes, native gallery interactions,
   gallery rail, payment dialogs, and skin materials remain with their owners. */
html[data-prime-canon="prime-creation"] body.prime-v2{
  --prime-finish-line:rgba(154,230,250,.42);
  --prime-finish-focus:#a0f0ff;
}
/* Page 02: intrinsic content rather than an empty artificial viewport floor.
   Keep description and storefront as independently bordered sibling panels. */
html[data-prime-viewport-authority] body.prime-v2
#main[data-app-shell]>#intro.is-prime-viewport-active:not([hidden])>.tab01-services{
  min-height:0!important;
}
html[data-prime-viewport-authority] body.prime-v2
#intro.is-prime-viewport-active>.tab01-continuity{
  margin-block:clamp(.4rem,1svh,.7rem)!important;
  padding-block:clamp(.42rem,.9svh,.64rem)!important;
  gap:clamp(.28rem,.65vw,.48rem)!important;
}
/* Page 04: artwork fills the existing canvas. Never create another toolbar,
   move the nav rail, touch the stage transforms, or crop image pixels. */
@media (min-width:761px) and (pointer:fine){
  html[data-prime-viewport-authority] body.prime-v2 #main[data-app-shell]
  #portfolio .page04-work[data-active="true"]{
    max-width:min(90vw,88rem)!important;
    max-height:calc(100svh - var(--prime-page-bottom-clearance,5rem) - 2.5rem)!important;
  }
  html[data-prime-viewport-authority] body.prime-v2 #main[data-app-shell]
  #portfolio .page04-work[data-active="true"] .page04-work-bezel{
    max-width:min(88vw,86rem)!important;
    max-height:calc(100svh - var(--prime-page-bottom-clearance,5rem) - 3rem)!important;
  }
  html[data-prime-viewport-authority] body.prime-v2 #main[data-app-shell]
  #portfolio .page04-work[data-active="true"] .page04-work-bezel>:is(img,video){
    max-width:min(87vw,85rem)!important;
    max-height:calc(100svh - var(--prime-page-bottom-clearance,5rem) - 3.5rem)!important;
    object-fit:contain!important;
  }
}
/* Avoid a giant non-content floor in Page 08's flat process sheet. */
html:not([data-prime-spatial-enabled="true"])[data-prime-viewport-authority] body.prime-v2
#main[data-app-shell]>#process.is-prime-viewport-active:not([hidden]) ol{
  min-height:0!important;
}
/* Price labels, links and input text use authored color/material but clear focus. */
html[data-prime-canon="prime-creation"] body.prime-v2
#main[data-app-shell]>.app-window.is-prime-viewport-active
:is(.prime-price-tab,.button,.prime-storefront-trigger,button,a[href],select):focus-visible{
  outline:2px solid var(--prime-finish-focus)!important;
  outline-offset:2px!important;
}
html[data-prime-canon="prime-creation"] body.prime-v2
#main[data-app-shell]>.app-window.is-prime-viewport-active
:is(img,video){image-rendering:auto}
/* The nine continuously animated Page 02 service sweeps need not repaint
   each mobile frame. Reveal states and user-triggered transitions stay intact. */
@media (hover:none) and (pointer:coarse){
  html[data-prime-viewport-authority] body.prime-v2 #intro
  .service-grid>.service-card:not([data-discipline-stage="reveal"])::before,
  html[data-prime-viewport-authority] body.prime-v2 #intro
  .service-grid>.service-card:not([data-discipline-stage="reveal"]) .service-orb::before{
    animation:none!important;
  }
}
/* Suppress ornament movement when a tab is backgrounded, without parking
   player transport, ambient audio, swipe animation, or Spatial pose. */
html[data-prime-finish-visibility="hidden"] body.prime-v2
:is(.tab01-atmosphere,.service-orb,.page04-atmosphere,.page04-orbit-ring,.ambient)::before,
html[data-prime-finish-visibility="hidden"] body.prime-v2
:is(.tab01-atmosphere,.service-orb,.page04-atmosphere,.page04-orbit-ring,.ambient)::after{
  animation-play-state:paused!important;
}
@media(prefers-reduced-motion:reduce){
  html[data-prime-viewport-authority] body.prime-v2 #intro
  .service-grid>.service-card::before,
  html[data-prime-viewport-authority] body.prime-v2 #intro .service-orb{
    animation:none!important;
  }
}
@media(forced-colors:active){
  html[data-prime-canon="prime-creation"] body.prime-v2
  #main[data-app-shell]>.app-window.is-prime-viewport-active :focus-visible{
    outline-color:Highlight!important;
  }
}

/* PRIME /prime-particle-system.css */
/* PRIME // INTERIOR Z2 CIRCUIT OPTICS.
   The sole traveling circuit-particle renderer is ::before ON EACH OF THE
   FOUR EXISTING inward-facing Z2 wall planes. No panel-face overlays.
   Z3 back wall, external bezels, glass, copy and media are untouched. */

/* Explicitly retire previous front/slab charge animation; preserve static metal foil. */
body.prime-v2 .prime-fx-panel{display:none!important}
html body.prime-v2 .prime-panel-chrome-circuit::after{
 content:none!important;display:none!important;animation:none!important;
}

/* Match the existing physical chamber ownership, pose and aperture clipping.
   No stacking/geometry changes to .prime-tunnel-wall itself. */
html[data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active:not(#top):not(#portfolio)
[data-prime-z-screen="true"]>.prime-tunnel-wall[data-prime-tunnel-wall]::before{
 content:""!important;
 position:absolute!important;inset:0!important;
 display:block!important;
 width:100%!important;height:100%!important;
 box-sizing:border-box!important;margin:0!important;padding:0!important;border:0!important;
 pointer-events:none!important;user-select:none!important;
 opacity:.88!important;z-index:1!important;
 background:linear-gradient(90deg,
   rgba(88,208,233,.25) 0%,rgba(72,220,250,.51) 21%,
   rgba(190,255,255,.95) 38%,#fff 49%,
   rgba(131,246,255,.96) 55%,rgba(61,202,232,.51) 68%,
   rgba(77,185,213,.26) 100%);
 background-repeat:no-repeat!important;
 background-size:240% 100%!important;
 background-position:120% 0;
 -webkit-mask-image:url('/prime-z2-interior-circuit.svg')!important;
 mask-image:url('/prime-z2-interior-circuit.svg')!important;
 -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
 -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
 -webkit-mask-position:center!important;mask-position:center!important;
 animation:prime-z2-interior-charge 4.8s linear infinite!important;
 filter:none!important;box-shadow:none!important;
 /* No independent camera, 3D transform, backdrop-filter or compositor. */
}
@keyframes prime-z2-interior-charge{
 from{background-position:120% 0}to{background-position:-120% 0}
}
html[data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active:not(#top):not(#portfolio)
[data-prime-z-screen="true"]>.prime-tunnel-wall-right::before,
html[data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active:not(#top):not(#portfolio)
[data-prime-z-screen="true"]>.prime-tunnel-wall-bottom::before{
 animation-direction:reverse!important;animation-delay:-2.2s!important;
}
/* Low-tier: keep particles traveling on Z2 without expensive filter/texture duplication. */
html[data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]:is([data-prime-performance-mode="light"],[data-prime-resource-tier="low"],
[data-pc-hw-tier="low"],[data-prime-runtime-pressure="high"])
body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active:not(#top):not(#portfolio)
[data-prime-z-screen="true"]>.prime-tunnel-wall[data-prime-tunnel-wall]::before{
 animation-duration:7s!important;filter:none!important;opacity:.76!important;
}
/* Reuse PrimeZSpaceMap's existing visibility observer: no new observer. */
html[data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window
[data-prime-z-screen="true"][data-prime-optic-visible="false"]>.prime-tunnel-wall[data-prime-tunnel-wall]::before,
html[data-prime-particles-paused="true"]
body.prime-v2 #main[data-app-shell]>.app-window
[data-prime-z-screen="true"]>.prime-tunnel-wall[data-prime-tunnel-wall]::before{
 animation-play-state:paused!important;
}

/* Existing non-circuit effect: logo-background magnetic motes. */
body.prime-v2 #top .receptor-background-box>.prime-fx-field{
 position:absolute!important;inset:0!important;z-index:1!important;
 overflow:hidden!important;pointer-events:none!important;
 transform:translate3d(var(--fx-mx,0px),var(--fx-my,0px),0);
 transition:transform .28s ease-out;
}
body.prime-v2 .prime-fx-field>i{
 position:absolute;left:var(--x);top:var(--y);
 width:var(--s);height:var(--s);border-radius:50%;
 background:#e6ffff;box-shadow:0 0 9px 1px rgba(86,229,255,.75);
 animation:prime-fx-wander var(--d) ease-in-out var(--lag) infinite alternate;
}
body.prime-v2 .prime-fx-field>i:nth-child(5n){background:#abfff0}
@keyframes prime-fx-wander{
 from{translate:-11px -9px;opacity:.38;scale:.8}
 to{translate:12px 13px;opacity:.97;scale:1.23}
}

/* Existing independent vault dial vortex is not a circuit-wall particle. */
:is(#process,#primeVaultFloat) .prime-page08-vault .prime-fx-vortex{
 position:absolute!important;inset:20%!important;
 z-index:6!important;pointer-events:none!important;
 aspect-ratio:1;transform-origin:center;opacity:.64;
 background:radial-gradient(circle,rgba(108,255,230,.18),rgba(76,226,255,.07) 33%,transparent 61%);
 animation:prime-fx-spin 8s linear infinite;transition:opacity .3s ease;
}
:is(#process,#primeVaultFloat) .prime-page08-vault .prime-fx-vortex::before,
:is(#process,#primeVaultFloat) .prime-page08-vault .prime-fx-vortex::after{
 content:"";position:absolute;inset:8%;border-radius:50%;pointer-events:none;
 background:conic-gradient(from 10deg,transparent 0deg 28deg,
 rgba(93,245,255,.85) 36deg,transparent 58deg 103deg,
 rgba(184,255,244,.65) 116deg,transparent 144deg 214deg,
 rgba(84,233,255,.78) 231deg,transparent 262deg 322deg,
 rgba(176,255,242,.58) 341deg,transparent 360deg);
 -webkit-mask-image:radial-gradient(circle,transparent 47%,#000 52% 62%,transparent 68%);
 mask-image:radial-gradient(circle,transparent 47%,#000 52% 62%,transparent 68%);
 animation:prime-fx-vortex-arc 4.6s linear infinite;
}
:is(#process,#primeVaultFloat) .prime-page08-vault .prime-fx-vortex::after{
 inset:21%;opacity:.8;animation-direction:reverse;animation-duration:3.2s;
}
:is(#process,#primeVaultFloat) .prime-page08-vault .prime-fx-vortex>i{
 position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);
 border-radius:50%;background:#edffff;box-shadow:0 0 7px 1px rgba(92,244,255,.94);
}
:is(#process,#primeVaultFloat) .prime-page08-vault .prime-fx-vortex>i:nth-child(3n){
 background:#95ffd0;box-shadow:0 0 5px #64ffcc;
}
:is(#process,#primeVaultFloat) .prime-page08-vault.is-engaged .prime-fx-vortex{
 opacity:.96;animation-duration:4s;
}
:is(#process,#primeVaultFloat) .prime-page08-vault:is(.is-unlocking,.is-open) .prime-fx-vortex{
 opacity:1;animation-duration:1s;
}
:is(#process,#primeVaultFloat) .prime-page08-vault:is(.is-dark,.is-vanishing,.is-gone) .prime-fx-vortex{
 opacity:0;animation-play-state:paused;
}
@keyframes prime-fx-spin{to{transform:rotate(360deg)}}
@keyframes prime-fx-vortex-arc{to{transform:rotate(360deg)}}

/* Inactive routes never keep decorations running. */
html[data-prime-particles-paused="true"] body.prime-v2
:is(.prime-fx-field>i,.prime-fx-vortex,.prime-fx-vortex::before,.prime-fx-vortex::after),
html[data-prime-canon="prime-creation"] body.prime-v2
#top:not(.is-prime-viewport-active) .prime-fx-field>i,
html[data-prime-canon="prime-creation"] body.prime-v2
#process:not(.is-prime-viewport-active) .prime-fx-vortex{
 animation-play-state:paused!important;
}
html:is([data-prime-performance-mode="light"],[data-prime-resource-tier="low"],
[data-pc-hw-tier="low"],[data-prime-runtime-pressure="high"])
body.prime-v2 .prime-fx-field>i{
 animation:prime-fx-wander var(--d) ease-in-out var(--lag) infinite alternate!important;
 box-shadow:0 0 6px rgba(108,239,255,.75);
}
html:is([data-prime-performance-mode="light"],[data-prime-resource-tier="low"],
[data-pc-hw-tier="low"],[data-prime-runtime-pressure="high"])
body.prime-v2 .prime-fx-vortex{
 animation:prime-fx-spin 10s linear infinite!important;
}
@media(prefers-reduced-motion:reduce){
 html[data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
 body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active:not(#top):not(#portfolio)
 [data-prime-z-screen="true"]>.prime-tunnel-wall[data-prime-tunnel-wall]::before,
 html:is([data-prime-performance-mode="light"],[data-prime-resource-tier="low"],[data-pc-hw-tier="low"],[data-prime-runtime-pressure="high"])
 body.prime-v2 :is(.prime-fx-field>i,.prime-fx-vortex),
 html body.prime-v2 :is(.prime-fx-field>i,.prime-fx-vortex,.prime-fx-vortex::before,.prime-fx-vortex::after){
 animation:none!important;transition:none!important;
 }
 body.prime-v2 .prime-fx-field{transform:none!important;transition:none!important}
}
@media(forced-colors:active){
 body.prime-v2 .prime-fx-field,body.prime-v2 .prime-fx-vortex,
 html body.prime-v2 #main[data-app-shell]>.app-window
 [data-prime-z-screen="true"]>.prime-tunnel-wall[data-prime-tunnel-wall]::before{
 display:none!important;
 }
}