.v3-portrait.v3-avatar-stage { --v3-avatar-hover-scale:1; --v3-avatar-size:68px; display: block; padding: 0; border: 0; overflow:visible; background:transparent; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y pinch-zoom; }
/* Expand only the circular aperture. Artwork stays anchored to its centre at
   a fixed CSS size, so hover reveals more of the portrait without zooming it. */
.v3-avatar-aperture { position:absolute;inset:-4px;overflow:hidden;border-radius:50%;background:#fff;pointer-events:none;clip-path:circle(calc(50% - 4px) at 50% 50%); }
/* In dark mode, keep white behind the portrait but tuck it half a CSS pixel
   inside the artwork clip so it cannot fringe the dark shirt's lower edge.
   Inheriting the animated clip keeps the same inset throughout the hover spring. */
@media (prefers-color-scheme: dark) {
 .v3-avatar-aperture { background:transparent; }
 .v3-avatar-aperture::before { content:'';position:absolute;inset:.5px;border-radius:inherit;clip-path:inherit;background:#fff; }
}
/* The aperture box is fixed 4px larger than the stage, so the artwork never
   re-lays out and the hover overshoot (radius <+3.5px) is never cut off by
   its own border-radius: only the clip radius moves. The hover shadow is a separate layer that only
   fades (opacity), instead of repainting an animated box-shadow. */
.v3-portrait.v3-avatar-stage::before { content:'';position:absolute;inset:-3px;border-radius:50%;box-shadow:0 3px 16px #00000008,0 8px 28px #00000004;opacity:0;pointer-events:none; }
.v3-avatar-stage canvas { position: absolute; display: block; visibility: hidden; pointer-events: none; }
.v3-portrait.v3-avatar-stage :is(canvas,img) { width:calc(var(--v3-avatar-size)*1.2084);height:calc(var(--v3-avatar-size)*1.2084);max-width:none;left:calc(50% - var(--v3-avatar-size)*.6111);top:calc(50% - var(--v3-avatar-size)*.4642); }
@media(max-width:480px){.v3-portrait.v3-avatar-stage{--v3-avatar-size:52px}}
.v3-avatar-stage.portrait-rendered canvas { visibility: visible; }
.v3-avatar-stage.portrait-rendered img { visibility: hidden; }
.v3-avatar-stage:focus-visible { outline: 2px solid var(--v3-focus); outline-offset: 5px; }
.v3-avatar-dialog {
  box-sizing: border-box; position: fixed; inset: 0; margin: 0; padding: 24px;
  width: 100%; max-width: none; height: 100dvh; max-height: none;
  border: 0; overflow: auto; background: transparent; color: var(--v3-ink);
  touch-action: manipulation;
  font-family: 'DM Sans', sans-serif; font-variation-settings: 'opsz' 14;
}
.v3-avatar-dialog[open] { display: grid; place-items: center; }
.v3-avatar-dialog::backdrop { background: var(--v3-portrait-backdrop); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
/* First-frame rendering is intentionally cheap; glass and colour follow after
   the shell has yielded one painted frame, independently of player readiness. */
.v3-avatar-dialog[data-opening]::backdrop { -webkit-backdrop-filter:none;backdrop-filter:none; }
.v3-avatar-dialog[data-opening] .v3-avatar-mesh { display:none; }
.v3-avatar-dialog[open]:not([data-opening]) .v3-avatar-mesh { animation:v3-avatar-colour-in 600ms ease both; }
@keyframes v3-avatar-colour-in { from{opacity:0}to{opacity:1} }
.v3-avatar-viewer { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.v3-avatar-large { position: relative; width: min(86vw, calc(100dvh - 140px), 860px); aspect-ratio: 1; user-select: none; -webkit-user-select: none; touch-action: pan-y pinch-zoom; cursor: grab; border-radius: 24px; }
.v3-avatar-large.dragging { cursor: grabbing; }
.v3-avatar-large img { display: block; width: 100%; height: 100%; object-fit: contain; }
.v3-avatar-large canvas { inset: 0; width: 100%; height: 100%; }
.v3-avatar-hint { margin: 0; font-size: 15px; line-height: 22px; text-align: center; color: var(--v3-muted); }
.v3-avatar-spin,.v3-avatar-hide { border: 0; border-radius: 100px; background: var(--v3-control-surface); padding: 13px 30px 13px 24px; color: var(--v3-ink); font: 500 18px/26px 'DM Sans',sans-serif; cursor: pointer; box-shadow: 0 3px 16px #00000008,inset 0 1px 0 var(--v3-control-rim); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.v3-avatar-spin:focus-visible,.v3-avatar-hide:focus-visible { outline: 2px solid var(--v3-focus); outline-offset: 5px; }

.v3-avatar-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.v3-avatar-spin,.v3-avatar-hide { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.v3-avatar-actions img { display: block; flex: 0 0 24px; }
/* Loading dims the label/icon, preserving the dark glass surface. */
.v3-avatar-spin:disabled { cursor: default; }
.v3-avatar-spin:disabled img,.v3-avatar-spin:disabled span { opacity: .52; }
@media(max-width:359px){.v3-avatar-actions{gap:8px}.v3-avatar-spin,.v3-avatar-hide{font-size:16px;padding:12px 22px 12px 16px;gap:9px}}

/* Static blurred shapes move on separate transform layers. The native glass
   stays at 8px; no per-frame path, filter or layout changes are needed. */
.v3-avatar-mesh { position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;isolation:isolate; }
.v3-avatar-mesh::before {
 content:'';position:absolute;inset:-25%;
 background:conic-gradient(from 25deg,#7040ff,#2ac9ff,#61e8ce,#ffb746,#ff5cbd,#7040ff);
 filter:blur(80px);opacity:.22;animation:v3-avatar-mesh-orbit 16s linear infinite paused;
}
.v3-avatar-mesh::after { content:'';position:absolute;inset:0;background:rgb(245 245 247 / .08);pointer-events:none; }
/* Android touch fallback: drop the animated colour field (and any ambience
   nested in it). The light native backdrop glass and all content remain. */
html[data-v3-android] .v3-avatar-mesh { display:none!important; }
.v3-avatar-light { position:absolute;width:72vmax;height:58vmax;border-radius:50%;filter:blur(56px);opacity:.34;animation:v3-avatar-light-flow 6.8s ease-in-out infinite paused; }
.v3-avatar-light--violet { left:-20%;top:-26%;background:radial-gradient(ellipse,#632cff 8%,#632cff88 38%,#632cff00 70%);animation-delay:-3s; }
.v3-avatar-light--cyan { width:90vmax;height:38vmax;left:5%;bottom:-28%;background:radial-gradient(ellipse,#00dbde 8%,#00dbde88 38%,#00dbde00 70%);animation-duration:8s;animation-delay:-5s;animation-direction:reverse; }
.v3-avatar-light--pink { width:54vmax;height:76vmax;right:-22%;top:-18%;background:radial-gradient(ellipse,#ff2ea6 8%,#ff2ea688 38%,#ff2ea600 70%);animation-duration:6s;animation-delay:-2s; }
.v3-avatar-light--amber { width:76vmax;height:46vmax;right:-16%;bottom:-30%;background:radial-gradient(ellipse,#ffab24 8%,#ffab2488 38%,#ffab2400 70%);animation-duration:9.5s;animation-delay:-6s;animation-direction:reverse; }
/* A ring, an S-shaped ribbon and an open arc give the field distinct contours.
   Geometry is static on the pseudo-element, then softened by its outer layer. */
.v3-avatar-wave { position:absolute;left:-24vmax;top:18%;width:min(130vmax,1800px);height:min(44vmax,660px);filter:blur(28px);opacity:.26;animation:v3-avatar-wave-orbit 8.2s ease-in-out infinite paused; }
.v3-avatar-wave::before { content:'';position:absolute;inset:0; }
.v3-avatar-wave--ring::before {
 background:linear-gradient(105deg,#723cff 12%,#ee42d1 37%,#19dce7 65%,#ffc051 90%);
 -webkit-mask-image:radial-gradient(ellipse,transparent 44%,#000 51%,#000 62%,transparent 72%);mask-image:radial-gradient(ellipse,transparent 44%,#000 51%,#000 62%,transparent 72%);
}
.v3-avatar-wave--ribbon { left:-15vmax;top:43%;height:min(36vmax,520px);animation-name:v3-avatar-ribbon-flow;animation-duration:7.1s;animation-delay:-4s; }
.v3-avatar-wave--ribbon::before {
 background:linear-gradient(100deg,#23dcd9,#5745ff 34%,#fc4ba9 68%,#ffb950);
 clip-path:polygon(0 34%,18% 4%,36% 10%,52% 64%,70% 75%,86% 36%,100% 52%,100% 90%,82% 70%,65% 100%,46% 86%,29% 35%,12% 25%,0 62%);
}
.v3-avatar-wave--arc { left:-5vmax;top:-15%;width:min(100vmax,1500px);height:min(80vmax,1100px);filter:blur(32px);animation-name:v3-avatar-arc-flow;animation-duration:10.5s;animation-delay:-6s;animation-direction:reverse; }
.v3-avatar-wave--arc::before {
 background:conic-gradient(from 15deg,transparent 7%,#21d9ed 20%,#7952ff 38%,#f54cb4 55%,#ffc767 68%,transparent 82%);
 -webkit-mask-image:radial-gradient(ellipse,transparent 41%,#000 49%,#000 60%,transparent 70%);mask-image:radial-gradient(ellipse,transparent 41%,#000 49%,#000 60%,transparent 70%);
}
.v3-avatar-dialog[open] .v3-avatar-mesh::before,.v3-avatar-dialog[open] .v3-avatar-light,.v3-avatar-dialog[open] .v3-avatar-wave { animation-play-state:running; }
.v3-avatar-dialog[data-background-paused] .v3-avatar-mesh::before,.v3-avatar-dialog[data-background-paused] .v3-avatar-light,.v3-avatar-dialog[data-background-paused] .v3-avatar-wave { animation-play-state:paused; }
@keyframes v3-avatar-mesh-orbit { from{transform:rotate(0deg) scale(1)}to{transform:rotate(360deg) scale(1)} }
@keyframes v3-avatar-light-flow {
 0%,100%{transform:translate(-12%,-12%) rotate(-14deg) scale(.86);opacity:.26}
 25%{transform:translate(24%,-8%) rotate(20deg) scale(1.16);opacity:.40}
 50%{transform:translate(8%,30%) rotate(-22deg) scale(.90);opacity:.32}
 75%{transform:translate(-22%,14%) rotate(12deg) scale(1.08);opacity:.42}
}
@keyframes v3-avatar-wave-orbit {
 0%,100%{transform:translate3d(-8%,-22%,0) rotate(-24deg) scale(1,.66);opacity:.16}
 33%{transform:translate3d(12%,8%,0) rotate(16deg) scale(.88,1.08);opacity:.34}
 66%{transform:translate3d(-2%,26%,0) rotate(34deg) scale(1.12,.78);opacity:.22}
}
@keyframes v3-avatar-ribbon-flow {
 0%,100%{transform:translate3d(-14%,-40%,0) rotate(-20deg) scale(.86,.70);opacity:.18}
 30%{transform:translate3d(12%,-16%,0) rotate(6deg) scale(1.10,.82);opacity:.32}
 60%{transform:translate3d(-2%,20%,0) rotate(18deg) scale(1.04,1.12);opacity:.20}
 82%{transform:translate3d(-12%,-5%,0) rotate(-8deg) scale(.90,.90);opacity:.28}
}
@keyframes v3-avatar-arc-flow {
 0%{transform:translate3d(-10%,4%,0) rotate(0deg) scale(.88);opacity:.16}
 50%{transform:translate3d(16%,-8%,0) rotate(180deg) scale(1.10);opacity:.30}
 100%{transform:translate3d(-10%,4%,0) rotate(360deg) scale(.88);opacity:.16}
}
/* Loading feedback exists only inside the large portrait, never on the page. */
.v3-avatar-loader { position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none; }
.v3-avatar-loader[hidden] { display:none; }
.v3-avatar-loading-status { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
@media(prefers-reduced-motion:reduce) {
 .v3-avatar-mesh,.v3-avatar-mesh::before,.v3-avatar-light,.v3-avatar-wave { animation:none!important; }
 .v3-avatar-loader { display:none; }
}

.v3-avatar-dialog:focus { outline: none; }
/* Dark glass keeps a white label while reflecting the same light rim as Brief. */
.v3-avatar-spin {
 background:linear-gradient(135deg,#ffffff0e,#ffffff02 54%,#ffffff06),rgb(3 3 5 / .92);
 color:#fff;
 box-shadow:0 3px 16px #00000018,inset 0 1px 0 #ffffff73,inset 0 -1px 0 #00000040,inset 1px 0 0 #ffffff2b,inset -1px 0 0 #ffffff24;
 -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
}
.v3-avatar-spin img { filter: brightness(0) invert(1); }
/* Use the hero Brief's light glass recipe, with its highlight above the sheen. */
@media (prefers-color-scheme: dark) {
 .v3-avatar-spin {
  background:var(--v3-light-glass-highlight),var(--v3-light-glass-sheen),#ffffffd9;
  color:#232522;
  box-shadow:0 4px 16px #00000024,var(--v3-light-glass-edge),inset 0 -2px 3px #23252212;
 }
 .v3-avatar-spin:hover { box-shadow:0 4px 16px #00000024,0 8px 28px #00000004,var(--v3-light-glass-edge),inset 0 -2px 3px #23252212; }
 .v3-avatar-spin img { filter:brightness(0); }
}

/* Hover: the white circle grows +3px on a damped spring (zeta .5, ~16% visible
   overshoot = ~0.5px, soft landing); leaving eases back without a bounce.
   linear() samples the spring; older engines keep the cubic-bezier fallback. */
@media(hover:hover) and (pointer:fine){
 .v3-avatar-aperture{transition:clip-path 420ms cubic-bezier(.37,0,.63,1)}
 .v3-portrait.v3-avatar-stage::before{transition:opacity 420ms cubic-bezier(.37,0,.63,1)}
 .v3-portrait.v3-avatar-stage:hover .v3-avatar-aperture{clip-path:circle(calc(50% - 1px) at 50% 50%);
  transition:clip-path 620ms cubic-bezier(.34,1.45,.64,1);
  transition:clip-path 620ms linear(0,.0713,.2428,.4582,.6741,.8614,1.0048,1.0997,1.1497,1.163,1.1501,1.1215,1.0862,1.0511,1.021,.9981,.983,.9753,.9735,.9758,.9805,.9863,.992,.9968,1.0005,1.0029,1.0041,1.0043,1.0039,1.0031,1.0022,1.0013,1)}
 .v3-portrait.v3-avatar-stage:hover::before{opacity:1;transition:opacity 360ms cubic-bezier(.22,1,.36,1)}
}
@media(prefers-reduced-motion:reduce){.v3-avatar-aperture,.v3-portrait.v3-avatar-stage::before{transition:none}}

.v3-portrait.v3-avatar-stage[data-return-focus]:focus-visible { outline: none; }

/* Keep the first pose visible until the replay bitmaps are complete. */
.v3-avatar-large picture { display:contents; }
.v3-avatar-large[data-welcome-pending] canvas { visibility:hidden; }
.v3-avatar-large[data-welcome-pending] img { visibility:visible; }

/* Animated colour background behind the portrait removed (heaviest idle effect); the frosted backdrop stays. */
.v3-avatar-mesh { display: none !important; }


.v3-avatar-hide img { filter:var(--v3-monochrome-filter); }