:root {
        --ink: #1a1a2e;
        --line: #e2e0dc;
        --muted: #666;
        --drawer-w: 360px;
        --header-h: 52px;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family:
          system-ui,
          -apple-system,
          sans-serif;
        background: #f5f5f7;
        color: var(--ink);
      }
      header {
        position: sticky;
        top: 0;
        z-index: 30;
        height: var(--header-h);
        padding: 0 20px;
        background: var(--ink);
        color: #fff;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      header strong {
        font-size: 15px;
      }
      header .env {
        font-size: 12px;
        opacity: 0.7;
      }
      /* Which widget build is mounted — pushed to the right edge of the header. */
      header .build {
        margin-left: auto;
        font-size: 12px;
        font-family: ui-monospace, monospace;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }
      header .build a,
      header .source-switch {
        color: inherit;
      }
      header .build.warn {
        color: #ffd479;
      }
      header .source-switch {
        font-size: 12px;
        opacity: 0.8;
        white-space: nowrap;
      }
      .build-notice {
        position: sticky;
        top: var(--header-h);
        z-index: 29;
        padding: 8px 20px;
        background: #fff4d6;
        border-bottom: 1px solid #e8d49a;
        font-size: 13px;
      }
      .build-notice[hidden] {
        display: none;
      }
      .build-notice p {
        margin: 0;
      }
      /* ⚙ toggle — opens the config drawer. */
      .toggle {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 999px;
        background: transparent;
        color: #fff;
        font-size: 15px;
        cursor: pointer;
      }
      .toggle:hover {
        background: rgba(255, 255, 255, 0.12);
      }

      /* Full-width centered stage — the mounted widget is the whole experience. */
      main {
        min-height: calc(100vh - var(--header-h));
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 24px 16px;
      }
      .stage {
        width: 100%;
      }
      /*
       * Confine the embed to its own stacking context.
       *
       * The widget positions overlays (the rail, flyouts) INSIDE its shadow root, and shadow
       * content still participates in the host page's stacking order — so a `position: fixed`
       * layer in there paints against the viewport and was landing on top of the config drawer.
       * `overflow: hidden` on `further-app` clips but does not isolate; only a stacking context
       * does. `isolation: isolate` creates one without needing a z-index on the element itself,
       * so every descendant is capped below the drawer no matter what z-index it picks.
       *
       * On `main` rather than `further-app` so the empty-stage placeholder is covered by the same
       * rule, and so a future sibling of the widget cannot reintroduce this.
       */
      main {
        position: relative;
        z-index: 0;
        isolation: isolate;
      }
      .stage:empty {
        display: grid;
        place-items: center;
        min-height: calc(100vh - var(--header-h) - 48px);
      }
      .stage:empty::before {
        content: 'Open ⚙ Mount config and mount to load the embed.';
        color: var(--muted);
        font-size: 13px;
      }
      /* A DEFINITE height, not min-height (WIT-816). The embed scrolls its module panel internally
         and keeps the rail pinned beside it, which CSS can only do when some ancestor height is
         definite — with min-height alone the panel grows and the whole partner page scrolls, taking
         the rail with it. This is the posture partners are pointed at in
         docs/embed/adapter-contract.md, so the demo host has to model it. */
      .launcher {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        pointer-events: none;
      }
      .launcher[hidden] {
        display: none;
      }
      .launcher-note {
        margin: 0;
        font-size: 13px;
        opacity: 0.7;
      }
      /* The panel's button styles are scoped to `.panel`, so this one was rendering as a raw UA
         button. Styled here rather than by widening that selector — this is a page-level call to
         action, not another control in the settings list. */
      .launcher button {
        pointer-events: auto;
        padding: 13px 30px;
        border: 0;
        border-radius: 999px;
        background: var(--ink);
        color: #fff;
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.01em;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(26, 26, 46, 0.22);
        transition:
          transform 0.15s ease,
          box-shadow 0.15s ease,
          background 0.15s ease;
      }
      .launcher button:hover {
        background: #2c2c4a;
        box-shadow: 0 8px 22px rgba(26, 26, 46, 0.28);
        transform: translateY(-1px);
      }
      .launcher button:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(26, 26, 46, 0.22);
      }
      .launcher button:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 3px;
      }
      main {
        position: relative;
      }

      .presentation {
        border: 1px solid var(--line, #2a2a33);
        border-radius: 10px;
        padding: 12px;
        margin: 12px 0;
      }
      .presentation legend {
        padding: 0 6px;
        font-size: 12px;
        opacity: 0.7;
      }
      .pcard {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 2px 10px;
        align-items: start;
        padding: 8px;
        border: 1px solid transparent;
        border-radius: 8px;
        cursor: pointer;
      }
      .pcard:hover {
        border-color: var(--line, #2a2a33);
      }
      .pcard input {
        grid-row: span 2;
        margin-top: 3px;
      }
      .pcard-title {
        font-weight: 600;
      }
      .pcard-note {
        font-size: 12px;
        opacity: 0.7;
      }

      further-app {
        display: block;
        height: calc(100vh - var(--header-h) - 48px);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(26, 26, 46, 0.06);
      }

      /* Config drawer + backdrop. */
      .backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(26, 26, 46, 0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }
      body.config-open .backdrop {
        opacity: 1;
        pointer-events: auto;
      }
      .drawer {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        height: 100vh;
        width: var(--drawer-w);
        max-width: 92vw;
        background: #fff;
        border-right: 1px solid var(--line);
        box-shadow: 2px 0 16px rgba(26, 26, 46, 0.12);
        overflow-y: auto;
        padding: 16px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
      }
      body.config-open .drawer {
        transform: translateX(0);
      }
      .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
      }
      .drawer-head h2 {
        margin: 0;
        font-size: 14px;
      }
      .close {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 999px;
        background: #f0efec;
        color: var(--ink);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
      }
      .panel p {
        margin: 0 0 14px;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.5;
      }
      label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        margin: 12px 0 4px;
      }
      input,
      textarea,
      select {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
      }
      select {
        background: #fff;
      }
      textarea {
        resize: vertical;
        min-height: 64px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      }
      .readout {
        margin-top: 16px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fbfbfd;
      }
      .readout .group-label {
        margin-top: 0;
      }
      .readout dl {
        margin: 0;
        display: grid;
        /* `max-content` on the term column so the longest label sets the gutter and values stay
           aligned; `minmax(0, 1fr)` on the value column so a long feature list wraps instead of
           forcing the drawer to scroll sideways. */
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 4px 10px;
        font-size: 12px;
      }
      .readout dt {
        color: var(--muted);
      }
      .readout dd {
        margin: 0;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        overflow-wrap: anywhere;
      }
      .row {
        display: flex;
        gap: 8px;
        margin-top: 16px;
      }
      /* The drawer is narrow and these labels are long — without this the text wraps to two lines
         inside a pill and the row grows to twice its height. */
      .row button {
        white-space: nowrap;
      }
      .panel button {
        flex: 1;
        padding: 10px;
        border: 0;
        border-radius: 999px;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
      }
      button.primary {
        background: var(--ink);
        color: #fff;
      }
      button.ghost {
        background: #f0efec;
        color: var(--ink);
      }
      .status {
        margin-top: 14px;
        font-size: 12px;
        padding: 8px 10px;
        border-radius: 8px;
        background: #f0efec;
        color: var(--muted);
        word-break: break-word;
      }
      .status.ok {
        background: #e7f4ec;
        color: #1c6b3f;
      }
      .status.err {
        background: #fbeaea;
        color: #a12b2b;
      }
      .sep {
        border: 0;
        border-top: 1px solid var(--line);
        margin: 16px 0 0;
      }
      .group-label {
        font-size: 12px;
        font-weight: 600;
        margin: 14px 0 6px;
      }
      .modules {
        display: grid;
        gap: 6px;
      }
      .check,
      .switch {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 13px;
        font-weight: 400;
        cursor: pointer;
      }
      .check input[type='checkbox'],
      .switch input[type='checkbox'] {
        width: auto;
        margin: 0;
        flex: 0 0 auto;
      }
      .switch {
        margin-top: 14px;
        font-weight: 600;
      }

      /* The emulator injects this banner into the host page; it is noise in a harness. `body` prefix
         rather than `!important` — it out-specifies the SDK's own single-class rule either way. */
      body .firebase-emulator-warning {
        display: none;
      }