body[data-page="demos"] .site-footer{border-top:1px solid #ecece8;margin-top:38px}.roster-experience{padding:20px 0 30px;overflow:hidden}.roster-carousel{--card-width:480px;--card-height:544px;position:relative;outline:none}.roster-stage{height:calc(var(--card-height) + 74px);position:relative;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}.roster-stage.is-dragging{cursor:grabbing}.roster-card{position:absolute;left:50%;bottom:50px;width:var(--card-width);height:var(--card-height);margin-left:calc(var(--card-width) / -2);padding:0;border:0;background:transparent;transform-origin:50% 100%;cursor:inherit;border-radius:58px;will-change:transform;outline-offset:8px;-webkit-tap-highlight-color:transparent}.roster-card:focus-visible{outline:3px solid #51554c}.roster-card-glow{position:absolute;inset:0;transform:translateY(38px) scale(.84);filter:blur(30px);opacity:.54;pointer-events:none;border-radius:inherit;background:var(--portrait) center/cover}.roster-card-window{display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#eef0eb;box-shadow:none}.roster-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;max-width:none;will-change:transform}.roster-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin:-4px auto 0;position:relative}.roster-arrow,.roster-play{display:grid;place-items:center;width:40px;height:40px;border:1px solid #e7e8e3;border-radius:50%;background:transparent;color:#000;cursor:pointer;transition:background .2s,color .2s}.roster-arrow:hover,.roster-play:hover{background:#20231b;color:#fff}.roster-arrow svg{width:16px;height:16px}.roster-scrub{appearance:none;-webkit-appearance:none;width:200px;height:36px;background:transparent;cursor:ew-resize;margin:0}.roster-scrub::-webkit-slider-runnable-track{height:6px;background:#e5e5e5;border-radius:9px}.roster-scrub::-moz-range-track{height:6px;background:#e5e5e5;border-radius:9px}.roster-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:25px;height:8px;border-radius:9px;background:#161814;margin-top:-1px;box-shadow:0 1px 2px #0002}.roster-scrub::-moz-range-thumb{width:25px;height:8px;border:0;border-radius:9px;background:#161814}.roster-caption{text-align:center;margin:17px 0 0;min-height:68px}.roster-caption [data-character-name]{font-family:inherit;font-size:17px;line-height:1.3;letter-spacing:.16em;font-weight:500;margin:0}.roster-caption p{font-size:11px;color:#000;margin:10px 0 0;letter-spacing:.04em}.roster-meta{display:flex;justify-content:space-between;align-items:center;margin:0 auto;padding:0 46px;max-width:1600px;color:#000;font-size:11px;letter-spacing:.09em}.roster-meta a{border-bottom:1px solid #d2d5cc;padding:10px 0}.roster-meta-right{display:flex;align-items:center;gap:18px}.roster-play{width:32px;height:32px;font-size:11px}.roster-carousel:focus-visible{outline:1px solid #abb19f;outline-offset:-3px}.roster-noscript{padding:40px;text-align:center}.roster-noscript img{width:180px;display:inline-block}.roster-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:800px){.roster-experience{padding-top:24px}.roster-card{border-radius:36px}.roster-meta{padding:0 22px}.roster-controls{gap:18px}.roster-scrub{width:160px}.roster-card-glow{filter:blur(22px);transform:translateY(26px) scale(.84)}.roster-stage{height:calc(var(--card-height) + 90px)}.roster-caption{margin-top:18px}.roster-meta>a{max-width:150px;letter-spacing:0}.roster-caption p{font-size:10px}.roster-card{bottom:42px}}
@media(prefers-reduced-motion:reduce){.roster-card,.roster-card img{will-change:auto}}
/* Portrait-to-conversation shared-element transition. */
.avatar-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:#fff}.avatar-dialog::backdrop{background:rgba(241,242,237,0);backdrop-filter:blur(0);transition:background .65s ease,backdrop-filter .65s ease}.avatar-dialog.is-visible::backdrop{background:rgba(235,237,231,.56);backdrop-filter:blur(12px) saturate(.7)}.avatar-panel{position:fixed;overflow:hidden;background:#101110;isolation:isolate;box-shadow:0 30px 100px #1113;will-change:width,height,top,left,border-radius}.avatar-poster{position:absolute;inset:0;z-index:2;background:#e5e6e0;overflow:hidden;opacity:1;transition:opacity .5s ease;pointer-events:none}.avatar-poster img{width:100%;height:100%;object-fit:cover;max-width:none}.avatar-live-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#101110;opacity:0;transition:opacity .55s ease}.avatar-panel.has-chat .avatar-live-frame{opacity:1}.avatar-panel.has-chat .avatar-poster{opacity:0}.avatar-chat-caption,.avatar-chat-close{position:absolute;z-index:5;top:18px;background:rgba(24,27,23,.47);color:#fff;backdrop-filter:blur(18px);border:0;opacity:0;transition:opacity .3s ease;box-shadow:0 3px 14px #0001}.avatar-chat-caption{left:20px;padding:10px 17px;border-radius:var(--ag-pill-radius);font-size:11px;letter-spacing:.15em;pointer-events:none}.avatar-chat-close{right:18px;width:42px;height:42px;padding:10px;border-radius:50%;cursor:pointer}.avatar-chat-close svg{width:100%;height:100%}.avatar-chat-close:hover{background:#161a14}.avatar-chat-close:focus-visible{outline:2px solid #9daa88;outline-offset:4px}.avatar-dialog.is-visible .avatar-chat-close,.avatar-panel.is-expanded .avatar-chat-caption{opacity:1}.avatar-chat-message{position:absolute;z-index:4;bottom:25px;left:50%;transform:translateX(-50%);background:rgba(21,24,19,.72);backdrop-filter:blur(20px);padding:13px 22px;border:0;border-radius:var(--ag-pill-radius);display:flex;align-items:center;justify-content:center;gap:12px;max-width:calc(100% - 32px);width:max-content;opacity:0;transition:opacity .3s ease}.avatar-chat-message p{margin:0;font:13px/1.5 Satoshi,Arial,sans-serif;color:#fff;text-align:center}.avatar-panel.is-expanded .avatar-chat-message{opacity:1}.avatar-panel.has-chat .avatar-chat-message{opacity:0;pointer-events:none}.avatar-chat-spinner{width:14px;height:14px;flex:0 0 14px;border:1.5px solid #ffffff40;border-top-color:#fff;border-radius:50%;animation:avatar-spin .8s linear infinite}.avatar-chat-retry{display:none;border:0;border-radius:var(--ag-pill-radius);padding:8px 12px;white-space:nowrap;color:#000;background:#fff;cursor:pointer;font-size:12px}.chat-error .avatar-chat-retry{display:block}.chat-error .avatar-chat-spinner,.chat-unavailable .avatar-chat-spinner{display:none}.is-closing .avatar-chat-message,.is-closing .avatar-chat-caption,.is-closing .avatar-chat-close{opacity:0!important;pointer-events:none}.avatar-panel.is-closing .avatar-poster{transition-duration:.13s}@keyframes avatar-spin{to{transform:rotate(360deg)}}@media(max-width:700px){.avatar-chat-caption{top:14px;left:14px;font-size:9px;max-width:calc(100% - 84px)}.avatar-chat-close{top:12px;right:12px;width:38px;height:38px}.avatar-chat-message{bottom:18px;padding:12px 15px;flex-wrap:wrap}.avatar-chat-message p{font-size:12px}}@media(prefers-reduced-motion:reduce){.avatar-dialog::backdrop,.avatar-poster,.avatar-live-frame{transition-duration:.01ms}}
.avatar-poster{background:#161a17}.avatar-poster::before{content:"";position:absolute;inset:-35px;background:var(--poster) center/cover;filter:blur(32px) brightness(.52);opacity:.9}.avatar-poster img{position:relative;z-index:1;object-fit:contain}.avatar-panel.is-closing .avatar-live-frame{pointer-events:none}

/* Gentle hover emphasis, independent of the carousel transform. */
@media(hover:hover) and (pointer:fine){
.roster-card{scale:1;translate:0 0;transition:scale .48s cubic-bezier(.22,1,.36,1),translate .48s cubic-bezier(.22,1,.36,1)}
.roster-card-window{transition:box-shadow .48s ease}
.roster-carousel:not(.roster-entering) .roster-stage:not(.is-dragging) .roster-card:hover:not(.is-chat-source){scale:1;translate:0 0;cursor:pointer}
.roster-carousel:not(.roster-entering) .roster-stage:not(.is-dragging) .roster-card:hover .roster-card-window{box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.roster-card{transition:none!important;scale:1!important;translate:0 0!important}.roster-card-window{transition:none!important}}

/* Directional edge sheen: depth without zoom. */
.roster-card-window{transform-origin:50% 50%;pointer-events:none;backface-visibility:hidden}
.roster-card-window::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at var(--glint-x,50%) var(--glint-y,50%),rgb(255 255 255 / var(--glint-alpha,0)),transparent 72%)}
@media(prefers-reduced-motion:reduce){.roster-card-window::after{display:none}}

/* Match the homepage section-heading font size, including the mobile breakpoint. */
.roster-heading.hero-heading{padding-bottom:30px}
.roster-heading.hero-heading h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(44px,4.7vw,76px)}
@media(max-width:600px){.roster-heading.hero-heading h1{font-size:43px}}
@media(max-width:520px){.roster-heading.hero-heading{padding-bottom:24px}}


/* Lumina portrait bloom: a blurred duplicate behind the card, with no mirror or cut mask. */
.roster-card-glow{
  inset:0;z-index:0;pointer-events:none;transform-origin:50% 50%;
  transform:translateY(calc(var(--card-width) / 6)) scale(.8);
  filter:blur(calc(var(--card-width) * .141667));opacity:.8;
  border-radius:inherit;background:var(--portrait) center/cover;
  mask-image:none;-webkit-mask-image:none;
}
.roster-card-window{z-index:1;box-shadow:none}
.roster-card{bottom:104px}
.roster-stage{
  height:calc(var(--card-height) + 128px);
  overflow:visible;
}
@media(max-width:800px){
  .roster-card{bottom:82px}
  .roster-stage{height:calc(var(--card-height) + 130px)}
}

.roster-stage{mask-image:none;-webkit-mask-image:none}

/* Composite moving layers; paint the gradient and blur once, then move their textures. */
.roster-card{will-change:transform,opacity;backface-visibility:hidden}
.roster-card-window{contain:paint;will-change:transform}
.roster-card-glow{will-change:transform;backface-visibility:hidden;margin:0}
.roster-card-window::after{display:none}
.roster-card-sheen{position:absolute;inset:-50%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,255,255,0.9),transparent 60%);opacity:0;will-change:transform,opacity;backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){.roster-card,.roster-card-window,.roster-card-glow,.roster-card-sheen{will-change:auto}.roster-card-sheen{display:none}}

/* Larger Lumina-style scrub control and readable character labels. */
.roster-controls{gap:24px;padding-inline:24px}
.roster-scrub{width:min(400px,calc(100vw - 152px));height:44px;flex:0 1 400px;min-width:0}
.roster-scrub::-webkit-slider-runnable-track{height:12px;border-radius:999px;background:#dededb}
.roster-scrub::-moz-range-track{height:12px;border-radius:999px;background:#dededb}
.roster-scrub::-webkit-slider-thumb{width:40px;height:12px;margin-top:0;border:0;border-radius:999px;background:#161814;box-shadow:none}
.roster-scrub::-moz-range-thumb{width:40px;height:12px;border:0;border-radius:999px;background:#161814;box-shadow:none}
.roster-arrow{flex:0 0 40px}
.roster-caption{margin-top:22px;min-height:94px;padding-inline:20px}
.roster-caption [data-character-name]{font-size:32px;line-height:1.25;letter-spacing:.1em;font-weight:500;overflow-wrap:anywhere}
.roster-caption p{font-size:14px;line-height:1.5;margin-top:12px;letter-spacing:.04em}
@media(max-width:600px){
.roster-controls{gap:16px;padding-inline:20px}
.roster-scrub{width:calc(100vw - 152px)}
.roster-scrub::-webkit-slider-thumb{width:32px}
.roster-scrub::-moz-range-thumb{width:32px}
.roster-caption [data-character-name]{font-size:26px;letter-spacing:.08em}
.roster-caption p{font-size:12px}
}

/* Keep the source card at the same coordinates while the modal locks scrolling. */
html{scrollbar-gutter:stable}
.avatar-poster{border-radius:inherit;transform-origin:center;will-change:transform,opacity}
.avatar-panel.is-closing{pointer-events:none}

/* Word-by-word headline, followed by the existing card entrance. */
.roster-word{display:inline-block;animation:roster-word-rise 720ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--word-order,0)*140ms)}
@keyframes roster-word-rise{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.roster-heading.is-revealed .roster-word{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.roster-word{animation:none;opacity:1;transform:none}}

/* Compact 48px animated circle; generous hit area and large chevron. */
.roster-controls{gap:32px;padding-inline:32px;min-height:120px;box-sizing:border-box;margin-top:-28px}
.roster-arrow{width:80px;height:80px;flex:0 0 80px;position:relative;z-index:2;border:0;background:transparent;transform:none;isolation:isolate;transition:color .28s ease}
.roster-arrow::before{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;background:#161814;opacity:0;transform:translate(-50%,-50%) scale(.82);transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .28s ease;pointer-events:none;z-index:-1}
.roster-arrow svg{width:32px;height:32px;pointer-events:none;transform:scale(1);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.roster-arrow:hover,.roster-arrow:focus-visible{background:transparent;color:#fff}
.roster-arrow:hover::before,.roster-arrow:focus-visible::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(hover:hover) and (pointer:fine){.roster-arrow:hover svg{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.roster-arrow::before,.roster-arrow svg{transition:none}}
.roster-scrub{flex:0 1 400px;min-width:0}
@media(max-width:600px){.roster-controls{gap:24px;padding-inline:32px}.roster-scrub{width:auto;flex:1 1 0}}
@media(prefers-reduced-motion:reduce){.roster-arrow{transition:none}}

/* A native button keeps the hidden ten-tap trigger accessible without changing the headline. */
.roster-secret-trigger{appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.roster-secret-trigger:focus-visible{outline:2px solid currentColor;outline-offset:8px;border-radius:5px}

/* A single conversation portrait flows from the card into the ready widget. */
.avatar-panel.has-conversation-portrait .avatar-poster img{object-fit:cover;object-position:center}
.avatar-panel.has-conversation-portrait .avatar-poster::before{display:none}
.avatar-panel.has-conversation-portrait .avatar-live-frame{opacity:1;transition:none;pointer-events:none}
.avatar-panel.has-conversation-portrait.has-chat .avatar-live-frame{pointer-events:auto}


/* === MOBILE ROSTER: finger-first interaction === */
@media (hover:none) and (pointer:coarse){
  .roster-stage{touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
  .roster-card{touch-action:pan-y pinch-zoom;-webkit-touch-callout:none}
  .roster-arrow,.roster-play,.roster-scrub{touch-action:manipulation}
  .roster-arrow{min-width:64px;min-height:64px}
  .roster-arrow::before{opacity:.1;transform:translate(-50%,-50%) scale(1)}
  .roster-arrow:active::before{opacity:1}
  .roster-arrow:active{color:#fff}
}
@media(max-width:600px){
  .roster-experience{padding-top:8px}
  .roster-carousel{--card-width:min(76vw,350px);--card-height:min(86vw,397px)}
  .roster-stage{height:calc(var(--card-height) + 108px);min-height:430px}
  .roster-card{bottom:70px;border-radius:34px}
  .roster-controls{min-height:94px;margin-top:-22px;gap:10px;padding-inline:14px}
  .roster-arrow{width:58px;height:58px;flex-basis:58px}
  .roster-arrow::before{width:46px;height:46px}
  .roster-arrow svg{width:28px;height:28px}
  .roster-scrub{height:48px;flex:1 1 auto;min-width:90px}
  .roster-caption{margin-top:8px;min-height:78px}
  .roster-caption [data-character-name]{font-size:clamp(22px,6vw,27px)}
  .roster-caption p{font-size:11px;letter-spacing:.03em}
  .roster-meta{padding:0 18px;gap:12px;align-items:flex-start}
  .roster-meta-right{gap:10px}
}

/* Place the active name halfway into the portrait's soft reflection. */
.roster-caption{position:relative;z-index:120;margin-top:-56px;min-height:0;pointer-events:none}
.roster-caption [data-character-name]{display:inline-block;max-width:100%}
.roster-controls{z-index:120;margin-top:4px;min-height:80px}
@media(max-width:600px){
  .roster-caption{margin-top:-34px;min-height:0}
  .roster-controls{margin-top:0;min-height:64px}
}

/* The title and story live in the dialog's top layer, outside the video crop. */
.avatar-dialog{box-sizing:border-box;padding:max(18px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.avatar-chat-identity{position:fixed;z-index:8;display:flex;flex-direction:column;align-items:flex-start;gap:4px;box-sizing:border-box;padding:12px 18px;border:1px solid rgb(255 255 255 / .42);border-radius:18px;background:linear-gradient(145deg,rgb(255 255 255 /0.27),rgb(233 240 248 /0.108));-webkit-backdrop-filter:blur(20px) saturate(1.5) brightness(.82);backdrop-filter:blur(20px) saturate(1.5) brightness(.82);color:#fff;text-shadow:0 1px 3px rgb(0 0 0 / .65);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 8px 28px rgb(0 0 0 / .18);opacity:0;pointer-events:none;transform-origin:24px 50%}
.avatar-chat-identity-name{display:block;margin:0;max-width:100%;font:500 clamp(16px,1.5vw,22px)/1.25 var(--sans);letter-spacing:.08em;white-space:nowrap}
.avatar-story{position:fixed;z-index:7;box-sizing:border-box;margin:0;padding:18px 22px;border:1px solid rgb(255 255 255 / .72);border-radius:24px;background:linear-gradient(145deg,rgb(255 255 255 /0.558),rgb(244 246 247 /0.342));-webkit-backdrop-filter:blur(24px) saturate(1.45);backdrop-filter:blur(24px) saturate(1.45);box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),0 12px 36px rgb(27 31 36 / .1);color:#000;opacity:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;touch-action:pan-y pinch-zoom;transform-origin:50% 0}
.avatar-story-heading{margin:0;font:500 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#000}
.avatar-story-copy{margin:8px 0 0;font:400 14px/1.65 var(--sans);letter-spacing:0;color:#000;max-width:105ch}
.avatar-name-flight{position:fixed;z-index:12;box-sizing:border-box;margin:0;padding:0;pointer-events:none;transform-origin:0 0;white-space:nowrap;will-change:transform,opacity}
@media(max-width:700px){
  .avatar-chat-identity{padding:10px 13px;border-radius:16px;gap:3px}
  .avatar-chat-identity-name{font-size:14px}
  .avatar-story{padding:16px 18px;border-radius:22px}
  .avatar-story-copy{font-size:13px;line-height:1.6}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .avatar-chat-identity{background:rgb(42 47 54 / .88)}
  .avatar-story{background:rgb(246 247 246 / .96)}
}
@media(prefers-reduced-motion:reduce){.avatar-chat-identity,.avatar-story,.avatar-name-flight{will-change:auto}}

/* Keep tilted portrait edges clean while the chat grows and returns. */
.roster-card,.roster-card:focus-visible,.roster-card-window,.avatar-panel,.avatar-poster,.avatar-poster img{border:0;outline:none;box-shadow:none}
.roster-card-window,.avatar-panel,.avatar-panel.is-expanded,.avatar-poster,.avatar-panel.has-conversation-portrait .avatar-poster,.avatar-live-frame{background:transparent}
/* One rounded clip per visible image avoids dark antialiasing between layers. */
.avatar-panel{overflow:visible}
.avatar-live-frame{border-radius:inherit;outline:0;box-shadow:none}
.avatar-poster img{display:block}
.avatar-panel .avatar-live-frame{visibility:hidden}
.avatar-panel.is-expanded .avatar-live-frame{visibility:visible}
.avatar-panel.is-closing .avatar-live-frame{visibility:hidden}
.avatar-panel.is-closing .avatar-poster{opacity:1;transition:none}
/* Keyboard selection is marked on the name, outside the portrait. */
.roster-carousel:has(.roster-card:focus-visible) .roster-caption [data-character-name]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
@media(prefers-reduced-motion:reduce){.avatar-panel.is-closing .avatar-poster{transition:none}}

/* Touch controls use independent fingers; only nearby portraits need layers. */
@media(hover:none) and (pointer:coarse){
  .roster-card-sheen{display:none}
  .roster-card-window{will-change:auto}
}

/* Avatar descriptions use the same readable body copy as the editorial pages. */
.roster-heading.hero-heading h1{font-size:var(--ag-section-title-size);line-height:var(--ag-section-title-leading);letter-spacing:var(--ag-section-title-tracking)}
.roster-caption p,.roster-meta{font-size:var(--ag-label-size);line-height:1.5}
.avatar-story-heading{font-size:var(--ag-label-size);line-height:1.5;letter-spacing:.11em}
.avatar-story-copy{font-size:var(--ag-copy-size);line-height:var(--ag-copy-leading);max-width:var(--ag-copy-width);margin-top:12px}
/* Desktop stories follow the full width of the conversation panel. */
@media(min-width:701px){.avatar-story-copy{max-width:none}}


/* A compact conversation preview beneath the selected portrait. */
.roster-instruction{margin:15px auto 0;color:#000;font:400 var(--ag-label-size,13px)/1.5 var(--sans);letter-spacing:.04em}
.roster-preview{display:block;pointer-events:auto;width:max-content;max-width:min(650px,100%);margin:14px auto 0;padding:14px 22px;border:1px solid rgb(255 255 255 / .72);border-radius:18px;background:linear-gradient(145deg,rgb(255 255 255 /0.558),rgb(244 246 247 /0.342));-webkit-backdrop-filter:blur(24px) saturate(1.45);backdrop-filter:blur(24px) saturate(1.45);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 10px 24px rgb(27 31 36 / .05);color:#000;font:400 14px/1.55 var(--sans);letter-spacing:0;text-align:center;cursor:pointer;touch-action:manipulation}
.roster-preview:hover{border-color:#fff;background:linear-gradient(145deg,rgb(255 255 255 /0.72),rgb(244 246 247 /0.522))}
.roster-preview:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.avatar-story-preview-text{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:14px 22px;font:400 14px/1.55 var(--sans);letter-spacing:0;text-align:center;color:#000;pointer-events:none}
@media(max-width:600px){.roster-instruction{font-size:11px;margin-top:13px}.roster-preview{width:100%;max-width:380px;padding:12px 16px;font-size:13px;border-radius:16px;margin-top:12px}.avatar-story-preview-text{padding:12px 16px;font-size:13px}}

/* More of the cast fits on small screens; desktop portraits keep their full size. */
@media(max-width:800px){
  .roster-carousel{--card-width:min(43.2vw,240px);--card-height:min(48.96vw,272px)}
  .roster-stage{height:calc(var(--card-height) + 90px);min-height:0}
  .roster-card{bottom:56px;border-radius:24px}
  .roster-caption{margin-top:-26px}
}

/* Upcoming cast stays swipeable, with feedback independent of carousel/parallax transforms. */
.roster-lock-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:center;padding:0 20px 17%;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(8,12,17,0.036) 0%,rgba(8,12,17,0.108) 28%,rgba(8,12,17,0.414) 55%,rgba(8,12,17,0.765) 100%);color:#fff}
.roster-lock-badge{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font:500 24px/1.25 var(--sans);letter-spacing:.015em;text-shadow:0 2px 14px #0006}
.roster-lock-badge svg{display:block;width:44px;height:44px;flex-shrink:0;filter:drop-shadow(0 2px 8px #0003)}
.roster-preview.is-locked{cursor:pointer}
@media(max-width:800px){.roster-lock-overlay{padding:0 8px 14%}.roster-lock-badge{gap:7px;font-size:16px}.roster-lock-badge svg{width:28px;height:28px}}


/* One borderless identity pill, aligned to the selected portrait with a 12px gap. */
.roster-caption{width:var(--card-width);max-width:100%;padding:0;margin:-92px auto 0}
.roster-preview{display:flex;flex-direction:column;align-items:center;gap:10px;box-sizing:border-box;width:100%;max-width:none;margin:0;padding:20px 24px;border:0;border-radius:24px;box-shadow:0 10px 24px rgb(27 31 36 / .05)}
.roster-preview [data-character-name]{display:block;width:max-content;max-width:100%;margin:0;font-size:32px;line-height:1.25}
.roster-preview [data-character-summary]{display:block;width:100%;font:inherit}
.avatar-story{border:0;box-shadow:0 12px 36px rgb(27 31 36 / .1)}
@media(max-width:800px){.roster-caption{margin-top:-44px}.roster-preview{gap:8px;padding:14px 12px;border-radius:16px;font-size:12px;line-height:1.5}.roster-preview [data-character-name]{font-size:clamp(18px,3.3vw,24px);letter-spacing:.06em}}


/* Demo copy v1: quiet conversation guidance above the roster. */
.roster-howto{display:grid;gap:6px;max-width:650px;margin:18px auto 0;text-align:center}
.roster-howto p{margin:0;font:400 13px/1.55 var(--sans);color:#000;letter-spacing:0}
.avatar-chat-permission,.avatar-chat-disclaimer{margin:0;max-width:52ch;font:400 11px/1.45 var(--sans);letter-spacing:0;white-space:normal}
.avatar-chat-permission{color:rgb(255 255 255 / .82)}
.avatar-chat-disclaimer{margin-top:2px;color:#fff;font-weight:500}
@media(max-width:700px){
  .roster-howto{max-width:330px;margin-top:15px;gap:5px}
  .roster-howto p{font-size:12px;line-height:1.5}
  .avatar-chat-permission,.avatar-chat-disclaimer{font-size:10px;line-height:1.4;max-width:34ch}
}


/* Demo copy v1: make the muted hero sound control easier to spot. */
body[data-page="demos"] .home-video-controls button{
  background:#11120ff0;
  border:1px solid rgb(255 255 255 / .58);
  box-shadow:0 8px 24px rgb(0 0 0 / .24),inset 0 1px 0 rgb(255 255 255 / .18);
}
body[data-page="demos"] .home-video-controls button:hover{background:#050604fa}

/* Instructions share editorial body typography and flow as a wider paragraph. */
body[data-page="demos"] .roster-howto{display:block;width:calc(100% - 48px);max-width:920px;margin:22px auto 0;text-align:center;text-wrap:balance;font:400 var(--ag-copy-size)/var(--ag-copy-leading) var(--sans)}
body[data-page="demos"] .roster-howto p{display:inline;margin:0;font:inherit;letter-spacing:0}
body[data-page="demos"] .roster-howto p+p::before{content:" "}
@media(max-width:700px){body[data-page="demos"] .roster-howto{max-width:540px;margin-top:18px}}

/* Demo portraits grow around one horizontal centerline. */
body[data-page="demos"] .roster-card{transform-origin:50% 50%}

/* Portrait framing favors the upper image for more character headroom. */
body[data-page="demos"] .roster-card img{object-position:50% 25%}

/* Optional movie-poster scene, revealed only after its original artwork has decoded. */
.avatar-dialog.has-scene-backdrop{width:var(--avatar-scene-width,100vw)}
.avatar-dialog.has-scene-backdrop::backdrop{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none}
.avatar-scene-backdrop{
  position:fixed;inset:0 auto auto 0;width:var(--avatar-scene-width,100vw);height:100vh;height:100dvh;z-index:0;overflow:hidden;pointer-events:none;opacity:0;
  transition:opacity 700ms cubic-bezier(.22,1,.36,1);
}
.avatar-scene-backdrop img{
  display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;
  pointer-events:none;user-select:none;-webkit-user-select:none;filter:blur(10px);
  transition:filter 700ms cubic-bezier(.22,1,.36,1);
}
.avatar-dialog.has-scene-backdrop.is-scene-ready.is-visible .avatar-scene-backdrop{opacity:1;transition-duration:780ms}
.avatar-dialog.has-scene-backdrop.is-scene-ready.is-visible .avatar-scene-backdrop img{filter:blur(0);transition-duration:780ms}
.avatar-dialog.has-scene-backdrop .avatar-panel{z-index:1}
.avatar-dialog.has-scene-backdrop .avatar-panel.has-conversation-portrait:not(.has-cover-preview) .avatar-poster img{object-fit:contain}
.avatar-dialog.has-scene-backdrop .avatar-story{
  background:rgb(245 246 246 / .56);color:#000;border:0;
  transition:background-color 700ms cubic-bezier(.22,1,.36,1),color 700ms ease,backdrop-filter 700ms ease,-webkit-backdrop-filter 700ms ease;
}
.avatar-dialog.has-scene-backdrop .avatar-story :is(.avatar-story-heading,.avatar-story-copy,.avatar-story-preview-text){color:inherit}
.avatar-dialog.has-scene-backdrop.is-scene-ready.is-visible .avatar-story{
  background-color:rgb(0 0 0 / .64);color:#fff;
  -webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);
  transition-duration:780ms;
}
.avatar-dialog.has-scene-backdrop .avatar-chat-close{
  background:rgb(0 0 0 / .62);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
}
.avatar-dialog.has-scene-backdrop .avatar-chat-close:hover{background:rgb(0 0 0 / .82)}
@media(max-aspect-ratio:1/1){
  .avatar-scene-backdrop img{object-position:76% 50%}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .avatar-dialog.has-scene-backdrop.is-scene-ready.is-visible .avatar-story{background-color:rgb(0 0 0 / .82)}
}
@media(prefers-reduced-motion:reduce){
  .avatar-dialog.has-scene-backdrop .avatar-scene-backdrop,
  .avatar-dialog.has-scene-backdrop .avatar-scene-backdrop img,
  .avatar-dialog.has-scene-backdrop .avatar-story,
  .avatar-dialog.has-scene-backdrop .avatar-story :is(.avatar-story-heading,.avatar-story-copy,.avatar-story-preview-text){transition:none}
  .avatar-dialog.has-scene-backdrop .avatar-scene-backdrop img{filter:none}
}

/* Match the platform portrait in local loading/error previews, independently of live-widget imagery. */
.avatar-panel.has-cover-preview .avatar-poster img{object-fit:cover;object-position:center}
.avatar-panel.has-cover-preview .avatar-poster::before{display:none}

/* Mobile identity sits above the video with the same gap as its story. */
.avatar-dialog.is-mobile-layout .avatar-chat-identity{padding:12px 62px 12px 16px;border-radius:22px}
.avatar-dialog.is-mobile-layout .avatar-chat-identity-name{white-space:normal;overflow-wrap:anywhere}
.avatar-dialog.is-mobile-layout :is(.avatar-chat-permission,.avatar-chat-disclaimer){max-width:none}
.avatar-dialog.is-mobile-layout .avatar-chat-identity>.avatar-chat-close{top:12px;right:12px;width:38px;height:38px;pointer-events:auto}


/* Mobile identity shares the story surface instead of the site-wide dark label. */
html body[data-page] .avatar-dialog.is-mobile-layout .avatar-chat-identity{
  background:linear-gradient(145deg,rgb(255 255 255 /0.558),rgb(244 246 247 /0.342))!important;
  color:#000!important;border:0!important;border-radius:22px!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.45);backdrop-filter:blur(24px) saturate(1.45);
  box-shadow:0 12px 36px rgb(27 31 36 / .1)!important;text-shadow:none;padding-left:18px;
}
html body[data-page] .avatar-dialog.is-mobile-layout .avatar-chat-identity *{color:inherit!important}
html body[data-page] .avatar-dialog.is-mobile-layout:not(.has-scene-backdrop) .avatar-chat-close{background:rgb(0 0 0 / .08)}
html body[data-page] .avatar-dialog.is-mobile-layout:not(.has-scene-backdrop) .avatar-chat-close:hover{background:rgb(0 0 0 / .16)}
html body[data-page] .avatar-dialog.is-mobile-layout.has-scene-backdrop .avatar-chat-identity{
  background:rgb(245 246 246 / .56)!important;
  transition:background-color 700ms cubic-bezier(.22,1,.36,1),color 700ms ease,backdrop-filter 700ms ease,-webkit-backdrop-filter 700ms ease;
}
html body[data-page] .avatar-dialog.is-mobile-layout.has-scene-backdrop.is-scene-ready.is-visible .avatar-chat-identity{
  background-color:rgb(0 0 0 / .64)!important;color:#fff!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);transition-duration:780ms;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body[data-page] .avatar-dialog.is-mobile-layout:not(.has-scene-backdrop) .avatar-chat-identity{background:rgb(246 247 246 / .96)!important}
  html body[data-page] .avatar-dialog.is-mobile-layout.has-scene-backdrop.is-scene-ready.is-visible .avatar-chat-identity{background-color:rgb(0 0 0 / .82)!important}
}
@media(prefers-reduced-motion:reduce){
  html body[data-page] .avatar-dialog.is-mobile-layout .avatar-chat-identity{transition:none}
}


/* Selected dark artwork can use white glass conversation details at every size. */
html body[data-page] .avatar-dialog.has-light-chat-surface :is(.avatar-chat-identity,.avatar-story),
html body[data-page] .avatar-dialog.has-light-chat-surface.has-scene-backdrop :is(.avatar-chat-identity,.avatar-story),
html body[data-page] .avatar-dialog.has-light-chat-surface.has-scene-backdrop.is-scene-ready.is-visible :is(.avatar-chat-identity,.avatar-story){
  background:linear-gradient(145deg,rgb(255 255 255 /0.828),rgb(244 246 247 /0.738))!important;
  color:#000!important;border:0!important;text-shadow:none;
  -webkit-backdrop-filter:blur(24px) saturate(1.45);backdrop-filter:blur(24px) saturate(1.45);
  box-shadow:0 12px 36px rgb(27 31 36 / .1)!important;
}
html body[data-page] .avatar-dialog.has-light-chat-surface :is(.avatar-chat-identity,.avatar-story) *{color:inherit!important}
html body[data-page] .avatar-dialog.has-light-chat-surface .avatar-chat-close{background:rgb(255 255 255 / .88);color:#000!important}
html body[data-page] .avatar-dialog.has-light-chat-surface.is-mobile-layout .avatar-chat-close{background:rgb(0 0 0 / .08)}
html body[data-page] .avatar-dialog.has-light-chat-surface .avatar-chat-close:hover{background:#fff}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body[data-page] .avatar-dialog.has-light-chat-surface.has-scene-backdrop.is-scene-ready.is-visible :is(.avatar-chat-identity,.avatar-story){background:rgb(246 247 246 / .96)!important}
}