.hd-avatar-page { background:radial-gradient(ellipse at 10% 20%,#082b43 0,transparent 45%),#010a10; }
.hd-flow-header { display:flex; justify-content:space-between; align-items:center; padding-top:26px; padding-bottom:26px; gap:20px; }
.hd-flow-header > a:last-child { font-size:14px; color:#b4d6e9; }
.hd-avatar-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:start; padding-top:46px; }
.hd-eyebrow { display:block; font-size:11px; font-weight:600; letter-spacing:2px; color:#58c5fa; margin-bottom:18px; }
.hd-avatar-intro h1 { font-size:clamp(40px,4.6vw,66px); line-height:1.08; margin-bottom:24px; }
.hd-avatar-intro h1 span { color:#61cdfc; }
.hd-avatar-intro p { font-size:16px; line-height:1.8; max-width:440px; }
.hd-avatar-art { position:relative; max-width:365px; margin-top:28px; border-bottom:1px solid #1b4560; }
.hd-avatar-art img { width:100%; height:auto; }
.hd-avatar-art > span { position:absolute; bottom:0; left:0; right:0; padding:18px 12px; background:linear-gradient(transparent,#061b2b); font-size:12px; text-align:center; color:#dbedf7; }
.hd-wizard { background:#071721; border:1px solid #203c4d; border-radius:24px; padding:32px; box-shadow:0 28px 70px #0005; }
.hd-steps { display:flex; justify-content:space-between; gap:8px; padding:0 0 24px; margin:0 0 28px; border-bottom:1px solid #233944; list-style:none; }
.hd-steps li { color:#77909f; font-size:11px; margin:0; }
.hd-steps li span { display:block; margin-top:6px; font-size:12px; }
.hd-steps li[aria-current] { color:#58cbff; font-weight:700; }
.hd-wizard h2 { font-size:clamp(24px,2.5vw,32px); line-height:1.25; margin-bottom:16px; }
.hd-wizard p { font-size:14px; line-height:1.8; color:#c0d0da; }
.hd-wizard .hd-muted,.hd-muted { font-size:12px; color:#93a9b7; line-height:1.8; }
.hd-muted a { color:#95d9fa; overflow-wrap:anywhere; }
.hd-consent { display:flex; align-items:flex-start; gap:13px; padding:20px 16px; border:1px solid #2b4352; border-radius:12px; margin:18px 0; cursor:pointer; }
.hd-consent input[type=checkbox] { appearance:auto; opacity:1; position:static; width:20px; height:20px; min-width:20px; margin:3px 0 0; accent-color:#18b4ff; }
.hd-consent span { font-size:14px; color:#e2edf3; line-height:1.7; }
.hd-action { display:inline-flex; align-items:center; justify-content:center; gap:20px; background:#20aff9; color:#001421; padding:15px 20px; min-height:50px; border:0; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; line-height:1.4; }
.hd-action:hover { background:#7bd6ff; }.hd-action:disabled { opacity:.55; cursor:wait; }
.hd-back { border:0; background:transparent; color:#bad3e2; padding:12px 0; font-size:14px; cursor:pointer; }
.hd-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; flex-wrap:wrap; }
.hd-field { display:block; margin:22px 0; font-size:14px; color:#d8e9f4; }
.hd-field input { width:100%; display:block; margin-top:8px; height:52px; border:1px solid #2d4554; border-radius:10px; padding:12px; background:#04111b; color:white; font-size:16px; }
.hd-phone { display:flex; align-items:center; gap:12px; }.hd-phone > span { margin-top:8px; color:#9fb8c7; }
.hd-camera { position:relative; margin:auto; width:100%; max-width:320px; aspect-ratio:3/4; border:1px solid #315b72; border-radius:24px; overflow:hidden; background:radial-gradient(ellipse,#17364a,#04101a); }
.hd-camera video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.hd-face-guide { position:absolute; width:57%; height:60%; top:10%; left:21.5%; border:2px dashed #81d9ff9c; border-radius:48%; pointer-events:none; }
#camera-prompt { position:absolute; bottom:26px; left:20px; right:20px; text-align:center; font-size:12px; color:#abc9d9; }
#record-clock { position:absolute; top:14px; right:14px; background:#02121ccc; padding:5px 12px; font-size:14px; border-radius:20px; font-variant-numeric:tabular-nums; }
#countdown { position:absolute; inset:0; display:grid; place-items:center; font-size:70px; color:white; text-shadow:0 2px 20px black; pointer-events:none; }
.hd-camera.is-recording { border-color:#ff707b; }.hd-camera.is-recording #record-clock { background:#a21827; }
.hd-script { padding:18px; margin-top:20px; background:#0c2534; border-left:2px solid #4bc9ff; border-radius:8px; }.hd-script .hd-eyebrow { font-size:10px; margin-bottom:8px; }.hd-script p { margin:0; font-size:16px; }
#record-status { margin:14px 0 0; font-size:12px; }
#recording-review { display:block; width:100%; max-height:430px; background:#020b10; border-radius:16px; }
#upload-progress progress { width:100%; height:12px; accent-color:#20aff9; }
.hd-flow-footer { color:#6f8999; font-size:12px; padding-top:40px; padding-bottom:30px; }
@media(max-width:991px){.hd-avatar-layout{gap:30px;grid-template-columns:.7fr 1fr;}.hd-wizard{padding:24px;}}
@media(max-width:767px){.hd-avatar-layout{grid-template-columns:1fr;padding-top:20px;gap:18px;}.hd-avatar-intro h1{font-size:38px;}.hd-avatar-intro h1 br{display:none;}.hd-avatar-intro p{font-size:14px;margin-bottom:10px;}.hd-avatar-art,.hd-avatar-intro > .hd-muted{display:none;}.hd-wizard{padding:22px 18px;border-radius:18px;}.hd-flow-header > a:last-child{font-size:11px;max-width:100px;text-align:right;}.hd-flow-header{padding-top:18px;padding-bottom:18px;}.hd-steps{margin-bottom:22px;}.hd-field{margin:18px 0;}.hd-action{font-size:13px;padding:14px;}.hd-consent{padding:14px;}.hd-consent span{font-size:13px;}.hd-camera{max-width:285px;}.hd-script p{font-size:14px;}.hd-flow-footer{text-align:center;}}
.hd-avatar-page .container { width:calc(100% - 48px); max-width:1180px; margin-inline:auto; }
@media(max-width:767px){.hd-avatar-page .container{width:calc(100% - 32px);}}
.hd-action,.hd-back { font-family:inherit; }
.hd-camera .hd-script { position:absolute; bottom:14px; left:12px; right:12px; height:43%; margin:0; overflow-y:auto; padding:12px; background:#01131be8; border-left:0; border-top:1px solid #54829a; scrollbar-width:thin; }
.hd-camera .hd-script p { font-size:15px; line-height:1.8; color:#f0f7fc; }
#camera-prompt { top:35%; bottom:auto; }
@media(max-width:767px){.hd-avatar-intro h1 span{margin-left:.15em;}.hd-capture-stage .hd-avatar-intro{display:none;}.hd-capture-stage .hd-avatar-layout{padding-top:0;}.hd-capture-stage .hd-steps{margin-bottom:18px;padding-bottom:16px;}.hd-capture-stage .hd-wizard h2{font-size:23px;}.hd-capture-stage .hd-wizard > form > section > .hd-eyebrow{display:none;}.hd-capture-stage .hd-wizard > form > section > p{font-size:12px;}.hd-camera .hd-script p{font-size:14px;}.hd-camera{max-width:280px;}}
.hd-flow-hint { display:flex; align-items:center; gap:10px; color:#bde8fb; font-size:13px; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid #233944; }
.hd-hint-dot { width:8px; height:8px; border-radius:50%; background:#50c5fc; flex-shrink:0; box-shadow:0 0 12px #50c5fc55; }
.hd-language { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:18px 0; color:#d9ecf7; font-size:14px; }
.hd-language small { display:block; color:#98b6c7; font-size:11px; margin-top:4px; }
.hd-language select { appearance:auto; background:#0a2535; border:1px solid #406478; color:#fff; border-radius:10px; min-height:46px; padding:10px 12px; font:inherit; max-width:100%; }
.hd-language select option { color:#fff; background:#0a2535; }
#record-script:lang(hi),#record-script:lang(mr) { font-family:'Nirmala UI','Noto Sans Devanagari','Mangal',sans-serif; font-size:16px; line-height:1.95; }
.hd-wizard h2,.hd-avatar-intro h1 { overflow-wrap:break-word; }
@media(max-width:575px){.hd-language{align-items:stretch;flex-direction:column;gap:8px;}.hd-language select{width:100%;font-size:16px;}.hd-flow-hint{font-size:12px;margin-bottom:18px;padding-bottom:16px;}.hd-actions .hd-action{flex:1;}.hd-action,.hd-back{min-height:44px;}#record-script:lang(hi),#record-script:lang(mr){font-size:15px;}}
/* Keep the intro and active form aligned as each step changes height. */
@media(min-width:768px){
 .hd-avatar-layout { align-items:stretch; }
 .hd-avatar-intro { display:flex; flex-direction:column; min-width:0; }
 .hd-avatar-intro > .hd-eyebrow,.hd-avatar-intro > h1,.hd-avatar-intro > p { flex-shrink:0; }
 .hd-avatar-intro .hd-avatar-art { flex:1 0 280px; width:100%; max-width:none; min-height:280px; margin-top:24px; }
 .hd-avatar-intro .hd-avatar-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
 .hd-avatar-intro > .hd-muted { margin:16px 0 0; }
 .hd-wizard { min-width:0; }
}
/* Floating accents sit behind the portrait and never intercept interaction. */
.hd-avatar-art { isolation:isolate; border-bottom:0; }
.hd-avatar-particles { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent); mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent); }
.hd-avatar-particles i { position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size); border-radius:50%; background:#59c8ff; box-shadow:0 0 10px #39aeef88; animation:hd-avatar-drift var(--duration) ease-in-out var(--delay) infinite alternate; }
.hd-avatar-particles i:nth-child(3n) { background:#fff; box-shadow:0 0 8px #ffffff66; }
.hd-avatar-art img { z-index:1; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%); }
.hd-avatar-art > span { z-index:2; background:none; text-shadow:0 2px 8px #010a10; }
@keyframes hd-avatar-drift { from {transform:translate3d(-5px,10px,0);opacity:.35;} to {transform:translate3d(8px,-18px,0);opacity:.95;} }
@media(prefers-reduced-motion:reduce){.hd-avatar-particles i{animation:none;opacity:.65;}}