*{box-sizing:border-box}
  html,body{margin:0;min-height:100%;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#15171a;background:#f7f7f5}
  body{overflow:auto}
  .canvas{position:relative;width:100%;min-height:100vh;background-color:#f8f8f6;background-image:radial-gradient(#d7d9dc 1px,transparent 1px);background-size:24px 24px}
  .title{position:absolute;left:28px;top:22px;font-size:13px;color:#8a8f98;letter-spacing:.04em}
  .build-badge{position:absolute;right:28px;top:20px;padding:3px 7px;border:1px solid #e0e1e3;border-radius:999px;background:rgba(255,255,255,.82);font-size:10px;color:#777c83}
  .avatar-home{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%);width:118px;height:118px;display:grid;place-items:center;z-index:5}
  boop-face{filter:drop-shadow(0 12px 24px rgba(0,0,0,.08));transition:filter .2s ease}
  boopface:hover{filter:drop-shadow(0 15px 30px rgba(0,0,0,.13))}
  .controls{position:absolute;left:50%;top:calc(39% + 102px);transform:translateX(-50%);padding:8px;border-radius:16px;background:rgba(255,255,255,.88);box-shadow:0 7px 30px rgba(0,0,0,.08);backdrop-filter:blur(14px);display:flex;gap:6px;z-index:20;flex-wrap:wrap;justify-content:center;max-width:min(900px,calc(100% - 56px))}
  button{border:0;background:#f1f2f3;padding:8px 11px;border-radius:10px;font-size:12px;color:#333;cursor:pointer;white-space:nowrap}
  button:hover{background:#e7e8ea} button:active{transform:translateY(1px)}
  .controls button.is-new{position:relative}
  /* New features are marked with a small red dot in the corner. */
  .controls button.is-new::after,.demo-panel-toggle.is-new::after{content:'';position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 2px rgba(255,255,255,.95);pointer-events:none}
  .demo-panel-toggle.is-new{position:relative}
  .status-pill{position:absolute;left:28px;bottom:25px;font-size:11px;color:#858990;background:#fff;border:1px solid #ececec;border-radius:999px;padding:6px 10px}
  .follow-control{position:absolute;right:28px;bottom:24px;display:inline-flex;align-items:center;gap:9px;padding:6px 9px 6px 11px;border:1px solid #e2e3e5;border-radius:999px;background:rgba(255,255,255,.92);color:#777c83;font-size:11px;font-weight:600;white-space:nowrap;user-select:none}
  .follow-control input{position:absolute;opacity:0;pointer-events:none}
  .follow-switch{position:relative;width:30px;height:18px;border-radius:999px;background:#d4d6d9;transition:background .18s ease;cursor:pointer}
  .follow-switch::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .18s ease}
  .follow-control input:checked + .follow-switch{background:#666b72}
  .follow-control input:checked + .follow-switch::after{transform:translateX(12px)}
  .follow-control input:focus-visible + .follow-switch{outline:2px solid #aeb2b8;outline-offset:2px}

  .support-link{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid #dedfe1;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 6px 24px rgba(0,0,0,.05);color:#656a70;text-decoration:none;font-size:12px;font-weight:650;white-space:nowrap;transition:background .18s ease,border-color .18s ease,transform .18s ease}
  .support-link:hover{background:#fff;border-color:#d1d3d6;transform:translateX(-50%) translateY(-1px)}
  .support-cup{font-size:14px;line-height:1}

  .agent-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(239,240,238,.72);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
  .agent-overlay.open{opacity:1;visibility:visible}
  .agent-phone{width:420px;height:720px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.06);border-radius:32px;box-shadow:0 30px 90px rgba(0,0,0,.16);overflow:hidden;display:flex;flex-direction:column;transform:translateY(14px) scale(.985);transition:transform .32s cubic-bezier(.16,1,.3,1)}
  .agent-overlay.open .agent-phone{transform:translateY(0) scale(1)}
  .panel-head{height:96px;flex:0 0 96px;display:flex;align-items:center;gap:13px;padding:0 68px 0 20px;border-bottom:1px solid #ededed;position:relative}
  .panel-face-slot{width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center}
  .panel-copy{min-width:0}
  .panel-title{font-weight:700;font-size:18px;letter-spacing:-.01em}
  .panel-sub{font-size:12px;color:#999da4;margin-top:4px}
  .close{position:absolute;right:20px;top:31px;width:34px;height:34px;padding:0;border-radius:11px;font-size:18px;background:#f1f2f3}
  .chat{flex:1;overflow-y:auto;padding:22px 22px 14px;scroll-behavior:smooth;background:#fff}
  .message{display:flex;margin-bottom:14px}
  .message.agent{justify-content:flex-start}.message.user{justify-content:flex-end}
  .bubble{max-width:82%;padding:12px 14px;border-radius:18px;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
  .message.agent .bubble{background:#f1f2f3;color:#565b62;border-bottom-left-radius:7px}
  .message.user .bubble{background:#666b72;color:#fff;border-bottom-right-radius:7px}
  .reply-text{white-space:pre-wrap}
  .expression-tag{display:inline-flex;align-items:center;gap:5px;margin:9px 0 0;padding:4px 8px;border-radius:999px;font-size:10px;line-height:1.1;font-weight:650;letter-spacing:.01em;border:1px solid transparent}
  .expression-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.62}
  .expression-tag.success{background:#e9f5ec;border-color:#d4ead9;color:#6e9277}
  .expression-tag.wary{background:#fff5dc;border-color:#efe0b6;color:#9a7c38}
  .expression-tag.angry{background:#faecef;border-color:#f1d7dd;color:#a36f78}
  .expression-tag.refuse{background:#eaf1f6;border-color:#d8e3ea;color:#718897}
  .expression-tag.surprise{background:#eaf2fa;border-color:#d5e3f0;color:#6f89a2}
  .expression-tag.bored{background:#f0edf7;border-color:#e2dced;color:#86799a}
  .typing .bubble{color:#9a9da2;letter-spacing:.14em;min-width:52px;text-align:center}
  .composer-wrap{padding:14px 18px 18px;border-top:1px solid #f0f0f0;background:#fff}
  .composer{border:1px solid #e2e4e7;border-radius:20px;padding:12px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.035)}
  textarea{width:100%;height:68px;border:0;resize:none;outline:0;font:inherit;font-size:13px;line-height:1.5;color:#555a60;background:transparent}
  textarea::placeholder{color:#a6a9ae}
  .sendrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
  .hint{font-size:10px;color:#aaaeb4;padding-left:2px}
  .send{background:#666b72;color:#fff;padding:8px 15px;border-radius:11px}.send:hover{background:#585d63}.send:disabled{opacity:.45;cursor:default}

  @media(max-width:600px){
    .title{left:18px;top:16px}.build-badge{right:18px;top:14px}.status-pill{left:18px;bottom:72px}.follow-control{right:18px;bottom:72px}
    .controls{max-width:calc(100% - 20px);overflow:auto;flex-wrap:nowrap;justify-content:flex-start}
    .support-link{bottom:18px}
    .agent-overlay{padding:10px}.agent-phone{max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);border-radius:26px}
  }


  /* Critical demo styles: available before any module executes. */
    .demo-control-stack{position:absolute;left:50%;top:calc(39% + 128px);transform:translateX(-50%);width:min(900px,calc(100% - 56px));z-index:20;display:grid;gap:8px}
    .demo-control-stack>.controls{position:static;left:auto;top:auto;transform:none;max-width:none;width:100%;margin:0;overflow:visible;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
    .demo-control-stack>.controls button{width:auto!important;min-width:0;flex:0 0 auto!important}
    .demo-options{display:grid;gap:7px;width:100%;max-width:100%;justify-items:center;padding:0;border:0;background:transparent;box-shadow:none;color:#72777e;font-size:11px}
    /* One card for the toolbar row: groups spread with the card, icons keep their spacing. */
    .demo-panel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:276px;padding:6px 8px;border-radius:16px;background:rgba(255,255,255,.88);box-shadow:0 7px 30px rgba(0,0,0,.08);backdrop-filter:blur(14px)}
    .demo-toolbar-group{display:flex;align-items:center;gap:6px}
    /* Color panel: one strip of brand swatches; hovering previews, the caption names it. */
    .demo-options-group.demo-color-group{display:grid;gap:8px;width:100%!important;contain:inline-size;padding:10px 12px 8px}
    .demo-swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px}
    /* Each swatch is the background with a small head-colored block in the middle. */
    .demo-swatch{--swatch-top:var(--swatch-bg);--swatch-bottom:var(--swatch-head);position:relative;width:26px;height:26px;padding:0;border-radius:7px;background:var(--swatch-top);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:transform .15s ease,box-shadow .15s ease}
    .demo-swatch::before{content:'';position:absolute;left:50%;top:50%;width:12px;height:11px;margin:-5.5px 0 0 -6px;border-radius:3.5px;background:var(--swatch-bottom)}
    .demo-swatch:hover{background:var(--swatch-top);transform:translateY(-2px) scale(1.08)}
    .demo-swatch:active{transform:none}
    .demo-swatch:focus-visible{outline:2px solid #aeb2b8;outline-offset:2px}
    .demo-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #25282c}
    .demo-swatch[aria-pressed=true]:hover{transform:none}
    .demo-palette-caption{margin:0;min-height:14px;color:#5f646a;font:600 11px/14px Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;text-align:center}
    .demo-caption-extra{color:#a0a4aa;font-weight:500}
    .demo-palette-caption.demo-caption-hint{color:#a0a4aa;font-weight:500}
    .demo-color-custom{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06)}
    .demo-icon-option{border:0;color:#656a70;font:600 11px/1 Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;cursor:pointer}
    .demo-icon-option:hover{background:#e9eaec}
    .demo-swap-button{padding:4px 7px!important}
    .demo-icon-option svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .demo-palette-note{margin:0;color:#a0a4aa;font-size:9px;line-height:1.4;text-align:center}
    @media(prefers-reduced-motion:reduce){.demo-swatch{transition:none}}
    .demo-panel-toggle{width:34px!important;height:34px!important;padding:0!important;border:0!important;border-radius:9px!important;background:#f4f5f6!important;color:#72777e!important;display:grid!important;place-items:center!important;cursor:pointer!important}
    .demo-panel-toggle:hover{background:#e9eaec!important}
    .demo-panel-toggle.demo-panel-open{background:#dfe1e4!important;color:#25282c!important}
    .demo-panel-toggle svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .demo-panel-toggle svg .demo-palette-dot{fill:currentColor}
    .demo-panel-toggle svg .demo-dice-dot{fill:currentColor;stroke:none}
    .demo-options-group{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;width:max-content;max-width:100%;padding:7px 9px;border:1px solid rgba(0,0,0,.055);border-radius:14px;background:rgba(255,255,255,.82);box-shadow:0 6px 22px rgba(0,0,0,.055);backdrop-filter:blur(14px)}
    .demo-options-group[hidden]{display:none!important}
    .demo-option{min-height:30px;display:inline-flex;align-items:center;gap:7px;padding:4px 8px;border-radius:9px;background:#f4f5f6;white-space:nowrap;user-select:none;width:auto!important;flex:0 0 auto!important}
    .demo-option.color-option{padding-right:5px}
    .demo-option input[type=color]{width:24px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;cursor:pointer}
    .demo-option input[type=color]::-webkit-color-swatch-wrapper{padding:1px}
    .demo-option input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.12);border-radius:5px}
    .demo-toggle input{position:absolute;opacity:0;pointer-events:none}
    .demo-switch{position:relative;width:30px;height:18px;border-radius:999px;background:#d4d6d9;transition:background .18s ease;cursor:pointer;flex:0 0 auto}
    .demo-switch::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .18s ease}
    .demo-toggle input:checked+.demo-switch{background:#666b72}
    .demo-toggle input:checked+.demo-switch::after{transform:translateX(12px)}
    .demo-toggle input:focus-visible+.demo-switch{outline:2px solid #aeb2b8;outline-offset:2px}
    .demo-reset{border:0!important;color:#656a70!important;font:600 11px/1 Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif!important;cursor:pointer!important;padding:7px 10px!important}
    .demo-reset:hover{background:#e9eaec!important}
    .demo-language-option{border:0!important;background:#f4f5f6!important;color:#5f646a!important;border-radius:9px!important;padding:7px 9px!important;font-size:10px!important;cursor:pointer!important}
    .demo-language-option:hover{background:#e9eaec!important}
    .demo-language-option.demo-language-active{background:#dfe1e4!important;color:#202327!important;font-weight:700!important}
    .demo-control-stack .controls button.demo-active{background:#dfe1e4;color:#202327}
    .title.demo-title span{display:inline}
    .title.demo-title span:not(:last-child)::after{content:' / '}
    .follow-control.demo-original-follow{display:none!important}
    .support-link{display:none!important}
    .status-pill.demo-status{left:50%;top:calc(39% + 82px);bottom:auto;transform:translateX(-50%);z-index:15;pointer-events:none;white-space:nowrap}
    @media(max-width:600px){
      html,body{min-height:100%!important}.canvas{min-height:max(100vh,790px)!important}
      .title.demo-title{left:18px;top:14px;line-height:1.48;max-width:calc(100% - 90px)}
      .title.demo-title span{display:block}.title.demo-title span:not(:last-child)::after{content:''}
      .avatar-home{top:27%!important}.status-pill.demo-status{left:50%!important;top:calc(27% + 80px)!important;bottom:auto!important}
      .demo-control-stack{top:calc(27% + 128px);width:calc(100% - 20px);gap:7px}
      .demo-options-group{gap:5px;padding:7px 6px}.demo-option{padding:4px 7px;gap:6px}
    }
    @media(max-width:390px){
      .canvas{min-height:max(100vh,820px)!important}.avatar-home{top:26%!important}.status-pill.demo-status{top:calc(26% + 80px)!important}.demo-control-stack{top:calc(26% + 128px)}
      .demo-options-group{gap:5px}.demo-option,.demo-reset{font-size:10px!important;padding:4px 5px!important;gap:4px!important}
    }
    .demo-roundness-control{
      display:flex;align-items:center;justify-content:center;gap:8px;
      min-width:0;padding:0 4px;
      color:#747980;font:600 10px/1 Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
      user-select:none
    }
    .demo-roundness-label{white-space:nowrap}
    .demo-roundness-mark{width:14px;height:14px;flex:0 0 14px;border:1.5px solid #9a9ea4;background:transparent}
    .demo-roundness-mark.square{border-radius:3px}
    .demo-roundness-mark.round{border-radius:7px}
    .demo-roundness-control input[type=range]{
      width:96px;min-width:60px;flex:0 1 96px;height:18px;margin:0;padding:0;accent-color:#666b72;cursor:pointer
    }
    .demo-roundness-control input[type=range]:focus-visible{outline:2px solid #aeb2b8;outline-offset:2px;border-radius:999px}
    .demo-roundness-unlock{display:inline-flex;align-items:center;gap:5px;padding-left:3px;white-space:nowrap;cursor:pointer}
    .demo-roundness-unlock input{position:absolute;opacity:0;pointer-events:none}
    .demo-roundness-switch{position:relative;width:30px;height:18px;border-radius:999px;background:#d4d6d9;transition:background .18s ease;flex:0 0 auto}
    .demo-roundness-switch::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .18s ease}
    .demo-roundness-unlock input:checked+.demo-roundness-switch{background:#666b72}
    .demo-roundness-unlock input:checked+.demo-roundness-switch::after{transform:translateX(12px)}
    .demo-roundness-unlock input:focus-visible+.demo-roundness-switch{outline:2px solid #aeb2b8;outline-offset:2px}
    /* The toolbar stays one row: on narrow screens the slider shrinks and the text
       labels give way to the square/round marks (the full name stays as a tooltip). */
    @media(max-width:600px){
      .demo-panel-toolbar{gap:8px;padding:6px}
      .demo-roundness-control{flex:1 1 auto;gap:6px;padding:0}
      .demo-roundness-control input[type=range]{width:auto;min-width:36px;max-width:120px;flex:1 1 96px}
      .demo-roundness-label{display:none}
    }
    @media(max-width:360px){
      .demo-roundness-unlock>span:first-child{display:none}
    }
    @media(max-width:390px){
      .demo-roundness-control{gap:5px;font-size:9px}
      .demo-roundness-unlock{gap:4px;padding-left:1px}
    }
    .demo-control-stack{
      left:50%!important;
      transform:translateX(-50%)!important;
      width:var(--demo-stack-width,max-content)!important;
      max-width:calc(100vw - 20px)!important;
      justify-items:center!important;
      /* One column as wide as the stack, so a long hint wraps instead of widening it. */
      grid-template-columns:minmax(0,1fr)!important;
    }
    .demo-control-stack>.controls{
      position:static!important;left:auto!important;top:auto!important;transform:none!important;
      width:100%!important;max-width:calc(100vw - 20px)!important;margin:0!important;contain:inline-size;
      display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
      flex-wrap:wrap!important;gap:9px 6px!important;overflow:visible!important;padding:9px 8px 8px!important;
      padding-inline:calc((100% - var(--demo-controls-width,100%)) / 2 + 8px)!important;
    }
    .demo-control-stack>.controls button{
      width:auto!important;min-width:0!important;max-width:none!important;flex:0 0 auto!important;padding:8px 11px!important;
    }
    .demo-options{width:100%!important;max-width:calc(100vw - 20px)!important;margin:0!important;justify-self:center!important}
    .demo-options-group{width:100%!important;contain:inline-size;max-width:calc(100vw - 20px)!important;margin-inline:auto!important}
    @media(max-width:600px){
      .demo-control-stack{max-width:calc(100vw - 16px)!important}
      .demo-control-stack>.controls{max-width:calc(100vw - 16px)!important;gap:9px 5px!important}
      .demo-control-stack>.controls button{font-size:11px!important;padding:8px 7px!important}
      .demo-options,.demo-options-group{max-width:calc(100vw - 16px)!important}
    }
    @media(max-width:440px){
      .demo-control-stack>.controls{gap:9px 4px!important}
      .demo-control-stack>.controls button{font-size:10px!important;padding:8px 5px!important}
      .demo-option,.demo-reset{font-size:10px!important;padding:4px 5px!important}
    }
    .demo-chat-entry-hint{
      position:static;z-index:14;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;
      width:max-content;max-width:100%;padding:0;color:#8f949b;font-size:9px;line-height:1.25;
      pointer-events:none;user-select:none;justify-self:center;
    }
    .demo-interaction-lead{padding:3px 1px;font-weight:650;white-space:nowrap}
    .demo-interaction-tag{padding:4px 7px;border:1px solid rgba(0,0,0,.055);border-radius:999px;background:rgba(255,255,255,.76);white-space:nowrap;box-shadow:0 3px 12px rgba(0,0,0,.025)}
    .status-pill.demo-status{top:calc(39% + 90px)!important}
    @media(max-width:600px){
      .demo-chat-entry-hint{max-width:calc(100vw - 28px);gap:4px}
      .demo-interaction-tag{padding:4px 6px}
      .status-pill.demo-status{top:calc(27% + 88px)!important}
      .demo-control-stack{top:calc(27% + 134px)!important}
    }
    @media(max-width:390px){
      .status-pill.demo-status{top:calc(26% + 88px)!important}
      .demo-control-stack{top:calc(26% + 134px)!important}
    }
    .panel-head.agent-avatar-mode-ready{padding-right:174px}
    .agent-avatar-mode-switch{
      position:absolute;right:62px;top:33px;display:flex;align-items:center;gap:2px;
      padding:3px;border:1px solid #e2e4e7;border-radius:10px;background:#f3f4f5;
      box-shadow:0 2px 8px rgba(0,0,0,.025);z-index:3
    }
    .agent-avatar-mode-switch button{
      min-width:38px;height:28px;padding:0 8px;border:0;border-radius:7px;background:transparent;
      color:#8b9097;font-size:10px;font-weight:650;line-height:28px;cursor:pointer;box-shadow:none
    }
    .agent-avatar-mode-switch button:hover{background:rgba(255,255,255,.72)}
    .agent-avatar-mode-switch button:active{transform:none}
    .agent-avatar-mode-switch button.active{background:#fff;color:#4f545a;box-shadow:0 1px 4px rgba(0,0,0,.08)}
    .agent-phone.avatar-mode-inline .panel-face-slot{display:none}
    .agent-phone.avatar-mode-inline .panel-head{gap:0}
    .message.agent.avatar-live-row{align-items:flex-start;gap:10px}
    .inline-avatar-slot{
      width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;margin-top:1px;
      overflow:visible
    }
    .inline-avatar-slot boop-face{display:block;filter:drop-shadow(0 7px 14px rgba(0,0,0,.07))}
    @media(max-width:460px){
      .panel-head.agent-avatar-mode-ready{padding-right:148px}
      .agent-avatar-mode-switch{right:58px}
      .agent-avatar-mode-switch button{min-width:32px;padding:0 6px;font-size:9px}
      .inline-avatar-slot{width:44px;height:44px;flex-basis:44px}
      .message.agent.avatar-live-row{gap:8px}
    }
    .expression-tag.failure{background:#f7ecec;border-color:#ead8d8;color:#9b7474}
    .expression-tag.inspect{background:#eef0f7;border-color:#dde1ee;color:#737e9b}
  /* The avatar sits in a stage card as wide as the panels below, with the same corners;
     palettes color only the stage. The whole group is placed by placeComposition(). */
  .demo-stage{position:relative;display:grid;place-items:center;width:100%;contain:inline-size;height:clamp(190px,30vh,280px);border:1px solid rgba(0,0,0,.055);border-radius:16px;background:var(--demo-stage-bg,#fff);box-shadow:0 7px 30px rgba(0,0,0,.08)}
  .demo-stage-reel{position:absolute;inset:-1px;border-radius:inherit;overflow:hidden;pointer-events:none}
  .demo-stage-reel-strip{position:absolute;inset:0 0 auto;will-change:transform}
  .demo-intro-finale{position:absolute;inset:-1px;border-radius:inherit;overflow:hidden;pointer-events:none}
  .demo-intro-finale>div{position:absolute;border-radius:50%;-webkit-mask-image:radial-gradient(circle,transparent 26%,#000 44%,#000 52%,transparent 70%);mask-image:radial-gradient(circle,transparent 26%,#000 44%,#000 52%,transparent 70%);will-change:transform,opacity}
    /* Shown on the stage only while the colors differ from the default. */
  .demo-stage-reset{position:absolute;right:10px;bottom:10px;z-index:6;display:grid;place-items:center;width:26px;height:26px;padding:0;border-radius:50%;background:rgba(255,255,255,.4);color:rgba(0,0,0,.45);backdrop-filter:blur(6px);transition:background .15s ease,color .15s ease;animation:demo-reset-in .2s cubic-bezier(.2,.8,.3,1)}
  .demo-stage-reset:hover{background:rgba(255,255,255,.9);color:#3f4449}
  .demo-stage-reset[hidden]{display:none}
  .demo-stage-reset svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  @keyframes demo-reset-in{from{opacity:0;transform:scale(.85)}}
  @media(prefers-reduced-motion:reduce){.demo-stage-reset{animation:none}}
  .demo-stage .avatar-home{position:relative!important;left:auto!important;top:auto!important;transform:none!important}
  /* The expression name sits quietly at the bottom of the stage. */
  .demo-stage .status-pill.demo-status{position:absolute!important;left:50%!important;top:auto!important;bottom:10px!important;transform:translateX(-50%)!important;z-index:6;padding:4px 9px;border:0;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);color:rgba(0,0,0,.5);font-size:10px}
  .demo-control-stack{top:var(--demo-stack-top,12%)!important}
  [data-demo-ready] .demo-control-stack{transition:top .35s cubic-bezier(.16,1,.3,1)}
  @media(prefers-reduced-motion:reduce){[data-demo-ready] .demo-control-stack{transition:none}}
  /* Never paint intermediate controls, translations or a desktop-only position. */
  .demo-initializing .canvas{visibility:hidden}
  .demo-load-status{display:none;position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);margin:0;color:#777c83;font:12px/1.5 system-ui,sans-serif;text-align:center}
  .demo-initializing .demo-load-status{display:block}