:root{--bg:#000;--text:#eef4f8;--muted:#91a0af;--line:rgba(255,255,255,.11)}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text)}
body.stream-mode #offline,body.stream-mode #debugPanel{display:none!important}
.stage{position:relative;width:100vw;height:100vh;overflow:hidden;background:
  radial-gradient(circle at 50% 28%,rgba(255,255,255,.06) 0,rgba(255,255,255,0) 24%),
  radial-gradient(circle at 18% 18%,rgba(73,131,255,.22) 0,rgba(73,131,255,0) 26%),
  radial-gradient(circle at 82% 22%,rgba(111,73,255,.16) 0,rgba(111,73,255,0) 24%),
  linear-gradient(135deg,#0d1322 0%,#070b14 38%,#030507 72%,#000 100%)}
.stage::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(120deg,rgba(255,255,255,.05) 0 17%,transparent 17% 100%),
  linear-gradient(300deg,transparent 0 68%,rgba(81,146,255,.09) 68% 80%,transparent 80% 100%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 110px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 90px);
  opacity:.85}
.stage::after{content:'';position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);width:min(96vw,1200px);height:42%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(62,136,255,.16) 0%,rgba(62,136,255,.08) 34%,rgba(62,136,255,0) 72%);
  filter:blur(6px)}
#avatarFrame{position:absolute;left:50%;top:51%;width:min(94vh,94vw,920px);aspect-ratio:1/1;transform:translate(-50%,-50%) scale(1);transform-origin:50% 52%;transition:transform .72s cubic-bezier(.18,.82,.18,1),filter .28s ease;filter:drop-shadow(0 28px 60px rgba(0,0,0,.72));will-change:transform}
#avatarFrame.authoritative,#avatarFrame.authoritive,#avatarFrame.firm,#avatarFrame.angry{transform:translate(-50%,-48.8%) scale(1.18);filter:contrast(1.055) brightness(.985) drop-shadow(0 32px 68px rgba(0,0,0,.78))}
.layer{position:absolute;inset:0;background-image:url('avatar_base.png');background-size:100% 100%;background-repeat:no-repeat;will-change:transform;user-select:none;pointer-events:none}
#torso{clip-path:polygon(0 88%,10% 86%,22% 83%,30% 80%,34% 77%,40% 78%,60% 78%,66% 77%,70% 80%,78% 83%,90% 86%,100% 88%,100% 100%,0 100%);transform-origin:50% 90%}
#head{clip-path:polygon(20% 2%,80% 2%,84% 11%,87% 25%,86% 45%,82% 58%,74% 69%,66% 77%,58% 81.5%,42% 81.5%,34% 77%,26% 69%,18% 58%,14% 45%,13% 25%,16% 11%);transform-origin:50% 78%;z-index:3}
#neckBlend{clip-path:polygon(40% 78%,60% 78%,68% 93%,32% 93%);opacity:.96;transform-origin:50% 85%;z-index:2}
#faceMotion{position:absolute;inset:0;z-index:4;transform-origin:50% 78%;will-change:transform;pointer-events:none}

/* Eyes: separate upper/lower metallic lids make the blink look like a real closure, not a flat oval. */
.eye{position:absolute;z-index:12;top:42.75%;width:16.3%;height:7.2%;overflow:hidden;border-radius:48% 48% 52% 52%/48% 48% 52% 52%;pointer-events:none}
#eyeL{left:31.85%;transform:rotate(-2.2deg)}
#eyeR{left:53.05%;transform:rotate(2.2deg)}
.eyeBall{position:absolute;left:10%;top:7%;width:80%;height:84%;border-radius:48% 48% 52% 52%/48% 48% 52% 52%;background:radial-gradient(ellipse at 50% 44%,rgba(220,231,241,.95) 0%,rgba(173,193,208,.72) 60%,rgba(48,58,65,.18) 100%);opacity:.40;mix-blend-mode:screen;filter:blur(.2px)}
.iris{position:absolute;left:34%;top:18%;width:32%;height:64%;border-radius:50%;background:radial-gradient(circle at 40% 38%,rgba(208,239,255,.98) 0 10%,rgba(111,191,255,.98) 24%,rgba(38,119,224,.96) 44%,rgba(8,39,112,.98) 68%,rgba(2,16,54,1) 100%);box-shadow:0 0 10px rgba(70,160,255,.38), inset 0 0 5px rgba(255,255,255,.24);will-change:transform,opacity;opacity:.96}
.pupil{position:absolute;left:50%;top:50%;width:38%;height:38%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(24,26,36,.92),rgba(0,0,0,1) 72%);box-shadow:0 0 2px rgba(255,255,255,.08)}
.irisShine{position:absolute;left:24%;top:18%;width:19%;height:19%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98),rgba(220,242,255,.65) 55%,transparent 72%);filter:blur(.12px)}
.lidHalf{position:absolute;left:-4%;width:108%;height:58%;opacity:0;will-change:transform,opacity}
.upperLid{top:-5%;transform-origin:50% 0%;border-radius:52% 52% 44% 44%;background:linear-gradient(180deg,#55585a 0%,#27292b 58%,#070809 100%);box-shadow:inset 0 -1px 2px rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.7)}
.lowerLid{bottom:-7%;transform-origin:50% 100%;border-radius:42% 42% 54% 54%;background:linear-gradient(0deg,#4b4e50 0%,#232527 65%,#090a0b 100%);box-shadow:inset 0 1px 2px rgba(255,255,255,.1),0 -1px 2px rgba(0,0,0,.65)}
#eyeR .upperLid{background:linear-gradient(180deg,#727678 0%,#343638 58%,#0a0b0c 100%)}
#eyeR .lowerLid{background:linear-gradient(0deg,#626668 0%,#303234 65%,#0b0c0d 100%)}
.lidCrease{position:absolute;left:5%;top:49%;width:90%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.85) 15%,rgba(0,0,0,.95) 50%,rgba(0,0,0,.85) 85%,transparent);opacity:0;filter:blur(.15px)}

.eyeGlow{position:absolute;z-index:10;top:45.55%;width:1.7%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.98) 0 18%,rgba(209,238,255,.95) 24%,rgba(100,190,255,.72) 48%,rgba(23,95,235,.38) 63%,transparent 78%);mix-blend-mode:screen;filter:blur(.2px);pointer-events:none;will-change:transform,opacity}
#glowL{left:40.75%}#glowR{left:59.1%}
.eyeAura{position:absolute;z-index:8;top:43.35%;width:10.9%;height:7.2%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(126,196,255,.26),rgba(62,136,255,.12) 48%,transparent 76%);filter:blur(5px);mix-blend-mode:screen;pointer-events:none;will-change:transform,opacity}
#auraL{left:35.75%}#auraR{left:54.05%}

/* Mouth rig: a cavity hides the original closed mouth while upper/lower lip image slices move independently. */
#mouthCavity{position:absolute;z-index:15;left:39.2%;top:65.0%;width:21.3%;height:4.6%;border-radius:48% 48% 57% 57%;background:radial-gradient(ellipse at 50% 52%,rgba(8,8,8,.98) 0 38%,rgba(0,0,0,.92) 58%,rgba(0,0,0,0) 78%);opacity:0;transform:scaleY(.12);transform-origin:50% 52%;pointer-events:none;will-change:transform,opacity}
.mouthSlice{position:absolute;inset:0;z-index:17;background-image:url('avatar_base.png');background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;will-change:transform,filter}
#upperLip{clip-path:polygon(38.0% 64.0%,62.0% 64.0%,61.5% 67.2%,38.5% 67.2%);transform-origin:50% 66.1%}
#lowerLip{clip-path:polygon(38.5% 66.1%,61.5% 66.1%,61.0% 69.6%,39.0% 69.6%);transform-origin:50% 66.8%}
#teethBand{position:absolute;z-index:16;left:42.0%;top:66.4%;width:15.9%;height:1.2%;border-radius:50%;background:linear-gradient(180deg,rgba(246,247,247,.96),rgba(164,170,170,.42));opacity:0;filter:blur(.10px);pointer-events:none;will-change:opacity,transform}
#lowerLipShade{position:absolute;z-index:18;left:40.4%;top:68.2%;width:18.8%;height:2.05%;border-radius:50%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.28));opacity:0;pointer-events:none;will-change:opacity,transform}

.offline{display:none;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(7,9,12,.82);backdrop-filter:blur(8px);color:#d8e0e6;font-size:13px}
.debug{display:none;position:fixed;right:16px;bottom:16px;z-index:60;min-width:285px;max-width:min(430px,calc(100vw - 32px));padding:11px 13px;border:1px solid rgba(130,172,255,.26);border-radius:11px;background:rgba(3,7,13,.78);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.34);font-size:11px;line-height:1.42;color:var(--muted);pointer-events:none}
.debug-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-weight:750;letter-spacing:.08em;color:#eef4f8}
.debug-level{font-size:10px;color:#8fc7ff;border:1px solid rgba(111,181,255,.34);border-radius:999px;padding:1px 6px;letter-spacing:.06em}
.debug-grid{display:grid;grid-template-columns:72px minmax(0,1fr);gap:3px 9px}
.debug-grid span{color:#8292a3}.debug-grid b{color:#eef4f8;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.show-debug .debug{display:block}
@media(max-aspect-ratio:3/4){#avatarFrame{width:min(98vw,88vh);top:54%}}
/* Website integration: match the dark grey product page. */
:root{--bg:#252629}.stage{background:radial-gradient(ellipse at 50% 36%,rgba(165,190,200,.10),transparent 62%),linear-gradient(145deg,#303134,#202124)}
.stage::before{opacity:.22}.stage::after{background:radial-gradient(ellipse at center,rgba(135,164,173,.14),transparent 72%)}

/* v1.2.1: v3.2.3 facial calibration from uploaded avatar app. */
.eye{position:absolute;z-index:12;top:41.70%;width:13.4%;height:5.55%;overflow:hidden;border-radius:48% 48% 52% 52%/48% 48% 52% 52%;pointer-events:none}
#eyeL{left:32.5%;transform:rotate(-2.2deg)}
#eyeR{left:54.1%;transform:rotate(2.2deg)}
.eyeBall{position:absolute;left:12%;top:13%;width:76%;height:74%;border-radius:48% 48% 52% 52%/48% 48% 52% 52%;background:radial-gradient(ellipse at 50% 44%,rgba(220,231,241,.95) 0%,rgba(173,193,208,.72) 60%,rgba(48,58,65,.18) 100%);opacity:.12;mix-blend-mode:screen;filter:blur(.2px)}
.iris{position:absolute;left:39%;top:29%;width:22%;height:43%;border-radius:50%;background:radial-gradient(circle at 40% 38%,rgba(208,239,255,.98) 0 10%,rgba(111,191,255,.98) 24%,rgba(38,119,224,.96) 44%,rgba(8,39,112,.98) 68%,rgba(2,16,54,1) 100%);box-shadow:0 0 10px rgba(70,160,255,.38), inset 0 0 5px rgba(255,255,255,.24);will-change:transform,opacity;opacity:.88}
.pupil{position:absolute;left:50%;top:50%;width:38%;height:38%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(24,26,36,.92),rgba(0,0,0,1) 72%);box-shadow:0 0 2px rgba(255,255,255,.08)}
.irisShine{position:absolute;left:24%;top:18%;width:19%;height:19%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98),rgba(220,242,255,.65) 55%,transparent 72%);filter:blur(.12px)}
.lidHalf{position:absolute;left:-4%;width:108%;height:58%;opacity:0;will-change:transform,opacity}
.upperLid{top:-5%;transform-origin:50% 0%;border-radius:52% 52% 44% 44%;background:linear-gradient(180deg,#55585a 0%,#27292b 58%,#070809 100%);box-shadow:inset 0 -1px 2px rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.7)}
.lowerLid{bottom:-7%;transform-origin:50% 100%;border-radius:42% 42% 54% 54%;background:linear-gradient(0deg,#4b4e50 0%,#232527 65%,#090a0b 100%);box-shadow:inset 0 1px 2px rgba(255,255,255,.1),0 -1px 2px rgba(0,0,0,.65)}
#eyeR .upperLid{background:linear-gradient(180deg,#727678 0%,#343638 58%,#0a0b0c 100%)}
#eyeR .lowerLid{background:linear-gradient(0deg,#626668 0%,#303234 65%,#0b0c0d 100%)}
.lidCrease{position:absolute;left:5%;top:49%;width:90%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.85) 15%,rgba(0,0,0,.95) 50%,rgba(0,0,0,.85) 85%,transparent);opacity:0;filter:blur(.15px)}

.eyeGlow{position:absolute;z-index:10;top:43.9%;width:1.1%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.98) 0 18%,rgba(209,238,255,.95) 24%,rgba(100,190,255,.72) 48%,rgba(23,95,235,.38) 63%,transparent 78%);mix-blend-mode:screen;filter:blur(.2px);pointer-events:none;will-change:transform,opacity}
#glowL{left:38.4%}#glowR{left:60.5%}
.eyeAura{position:absolute;z-index:8;top:41.95%;width:9%;height:5.0%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(126,196,255,.26),rgba(62,136,255,.12) 48%,transparent 76%);filter:blur(5px);mix-blend-mode:screen;pointer-events:none;will-change:transform,opacity}
#auraL{left:34.6%}#auraR{left:56.3%}

/* Mouth rig: a cavity hides the original closed mouth while upper/lower lip image slices move independently. */
#mouthCavity{position:absolute;z-index:19;left:39.3%;top:64.2%;width:21.4%;height:4.5%;border-radius:48% 48% 57% 57%;background:radial-gradient(ellipse at 50% 52%,rgba(8,8,8,.98) 0 38%,rgba(0,0,0,.92) 58%,rgba(0,0,0,0) 78%);opacity:0;transform:scaleY(.12);transform-origin:50% 52%;pointer-events:none;will-change:transform,opacity}
.mouthSlice{position:absolute;inset:0;z-index:17;background-image:url('avatar_base.png');background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;will-change:transform,filter}
#upperLip{clip-path:polygon(38.0% 62.8%,62.0% 62.8%,61.5% 65.15%,38.5% 65.15%);transform-origin:50% 66.1%}
#lowerLip{clip-path:polygon(38.5% 65.3%,61.5% 65.3%,61.0% 68.7%,39.0% 68.7%);transform-origin:50% 66.8%}
#teethBand{position:absolute;z-index:20;left:42.0%;top:65.55%;width:15.9%;height:1.15%;border-radius:50%;background:linear-gradient(180deg,rgba(246,247,247,.96),rgba(164,170,170,.42));opacity:0;filter:blur(.10px);pointer-events:none;will-change:opacity,transform}
#lowerLipShade{position:absolute;z-index:21;left:40.4%;top:67.4%;width:18.8%;height:2.05%;border-radius:50%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.28));opacity:0;pointer-events:none;will-change:opacity,transform}

/* Show more of the portrait in the narrower website preview. */
.stage{background:radial-gradient(circle at 50% 17%,rgba(165,170,175,.10),transparent 36%),linear-gradient(145deg,#303135,#252629 65%,#202124)}
#avatarFrame{width:min(87vh,87vw,820px);top:50%}
@media(max-aspect-ratio:3/4){#avatarFrame{width:min(91vw,83vh);top:52%}}