#aiworkstation .plugins__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:stretch}
  #aiworkstation .figure{position:relative;border-radius:20px;overflow:hidden;min-height:min(100%,520px);border:1px solid var(--color-line);box-shadow:var(--card-shadow);background:#1a1826}
  #aiworkstation .figure__in{position:absolute;inset:0;overflow:hidden}
  /* three artwork plates, one per request: the active one fades up and drifts while it shows */
  #aiworkstation .figure__plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);
    transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);will-change:opacity,transform}
  #aiworkstation .figure__in[data-fig="0"] .figure__plate[data-plate="0"],
  #aiworkstation .figure__in[data-fig="1"] .figure__plate[data-plate="1"],
  #aiworkstation .figure__in[data-fig="2"] .figure__plate[data-plate="2"]{opacity:1;animation:fig-drift 11s linear both}
  @keyframes fig-drift{from{transform:scale(1.12) translate3d(1.4%,1%,0)}to{transform:scale(1.07) translate3d(-1.4%,-1%,0)}}
  @media (prefers-reduced-motion:reduce){#aiworkstation .figure__plate{transition:none;animation:none!important;transform:none}}
  #aiworkstation .stage__dots{display:flex;justify-content:center}
  /* Replaying/measuring the demo moves its content and accompanying artwork.
     Exclude both from scroll anchoring so re-entry cannot move the page. */
  #aiworkstation .plugins__grid{overflow-anchor:none}

  /* ---------- the request intro = the app's draft hero (DraftHeroHeadline.tsx), set on the light card ---------- */
  #aiworkstation .chat__intro > div{gap:0;padding:4px 0 16px}
  #aiworkstation .chat__eyebrow{font-family:var(--hx-font);font-size:11px;font-weight:500;letter-spacing:.035em;color:var(--color-muted-2)}
  #aiworkstation .chat__title{font-family:var(--hx-font);margin-top:8px;font-size:clamp(28px,2.6vw,38px);line-height:1.12;font-weight:500;letter-spacing:-.06em;color:var(--halo-ink)}
  #aiworkstation .chat__sub{font-family:var(--hx-font);margin-top:8px;font-size:13px;line-height:1.6}
  #aiworkstation .flow[data-enter=true] .chat__eyebrow{animation:e-up .4s var(--ease-out) both}

  /* ---------- prompt bar = the app composer (glass shell, accent outline, model · effort · access, paperclip, round send) ---------- */
  #aiworkstation .pbar{font-family:var(--hx-font);border-radius:20px;background:#121212;border:1px solid color-mix(in srgb,#346bf1 40%,rgb(255 255 255 / 8%));box-shadow:0 26px 50px -28px rgb(11 13 11 / 70%),0 1px 2px rgb(11 13 11 / 20%);padding:14px 16px 11px;color:#f1f3f7}
  #aiworkstation .pbar[data-state=sent]{background:#121212;border-color:color-mix(in srgb,#346bf1 30%,rgb(255 255 255 / 8%))}
  #aiworkstation .pbar::after{background:linear-gradient(110deg,#0000 30%,rgb(91 140 255 / 22%) 50%,#0000 70%)}
  #aiworkstation .pbar__text{font-size:15px;color:#f5f5f5;letter-spacing:0}
  #aiworkstation .pbar__ph{color:rgb(255 255 255 / 50%);opacity:1;left:3px}
  #aiworkstation .pbar__caret{background:#5b8cff}
  #aiworkstation .pbar__row{flex-wrap:wrap;gap:10px;margin-top:12px;font-size:12.5px;color:#f1f3f7;white-space:nowrap}
  #aiworkstation .pk{display:inline-flex;align-items:center;gap:6px;flex:none}
  #aiworkstation .pbar__model{padding:0}
  #aiworkstation .pk .pv{width:14px;height:14px}
  #aiworkstation .pk .lc{width:14px;height:14px}
  #aiworkstation .pk .lc.chev{width:12px;height:12px;color:#a3a3a3}
  #aiworkstation .pbar .sep{width:1px;height:16px;background:rgb(255 255 255 / 12%);flex:none}
  #aiworkstation .pbar__btn{width:auto;height:auto;color:#a3a3a3}
  #aiworkstation .pbar__btn .lc{width:15px;height:15px}
  #aiworkstation .pbar__edit{font-size:17px;line-height:1}
  #aiworkstation .pbar__send{width:32px;height:32px;border-radius:999px;background:color-mix(in srgb,#346bf1 42%,#0a0a0a);color:rgb(255 255 255 / 45%);box-shadow:none}
  #aiworkstation .pbar__send svg{width:14px;height:14px}
  #aiworkstation .pbar[data-can-send=true] .pbar__send{background:#346bf1;color:#fff;box-shadow:0 8px 18px -8px rgb(52 107 241 / 80%)}
  #aiworkstation .pbar__sent{color:#a3a3a3;letter-spacing:.12em}
  #aiworkstation .pbar__sent svg{color:#6ee7b7}

  /* ---------- the built plugin: a real Halofy window, scaled into a 320px card ---------- */
  #aiworkstation .result{position:relative;height:320px;border-radius:14px;overflow:hidden;border:1px solid rgb(11 13 11 / 14%);background:#000;box-shadow:0 30px 70px -30px rgb(11 13 11 / 50%);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  /* window rim: an overlay, so it sits ABOVE the app's opaque panes and reads on every edge */
  #aiworkstation .result::after{content:"";position:absolute;inset:0;border:1px solid rgb(255 255 255 / 18%);border-radius:inherit;pointer-events:none;z-index:5}
  #aiworkstation .result[data-active=true]{opacity:1;visibility:visible;animation:lp-in .35s var(--ease-out) both}
  #aiworkstation .hx-cam{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
  #aiworkstation .hx-scale{--s:var(--rs,.62);position:absolute;left:0;top:0;width:calc(100% / var(--s));height:calc(100% / var(--s));transform:scale(var(--s));transform-origin:0 0}
  #aiworkstation .result[data-built=true] .hx-cam{animation:res-zoom 3.4s var(--ease-out) both}
  #aiworkstation .result[data-built=true] :is(.hx-groups,.hx-head,.hx-hero,.hx-side > :not(.hx-foot),.hx-foot > :not(.pw)){animation:res-dim 3.4s var(--ease-out) both}
  /* the wallpaper keeps its own 30% opacity: dim it with filter only */
  #aiworkstation .result[data-built=true] .hx-wall{animation:res-dim-f 3.4s var(--ease-out) both}
  @keyframes res-dim-f{0%{filter:none}18%,72%{filter:blur(2.5px) brightness(.45)}100%{filter:none}}
  #aiworkstation .result[data-built=true] .pw{position:relative;animation:res-ring 3.4s var(--ease-out) both}
  @keyframes res-ring{0%{box-shadow:0 0 0 0 rgb(var(--hx-accent-rgb) / 0%)}18%,72%{box-shadow:0 0 0 2px rgb(var(--hx-accent-rgb) / 95%),0 0 0 9px rgb(var(--hx-accent-rgb) / 22%),0 24px 50px -18px rgb(0 0 0 / 85%)}100%{box-shadow:0 0 0 1.5px rgb(var(--hx-accent-rgb) / 60%)}}
  #aiworkstation .result .hx--dusk{--hx-accent-rgb:234 92 148}
  #aiworkstation .hx-gtools > span.slotk{width:auto;height:auto;display:inline-flex;align-items:center;align-self:center}
  #aiworkstation .slotk{font:600 10.5px/1 var(--hx-font);padding:4px 7px;border-radius:5px;border:1px solid var(--hx-line-2);color:var(--hx-muted-2);background:rgb(255 255 255 / 3%);white-space:nowrap;margin-right:6px}
  #aiworkstation .result .hx-threads{flex:0 1 auto}
  #aiworkstation .result .hx-hero__title{font-size:40px}
  /* page slots: the widget floats over the page, pinned to the right edge (beats hx.css .hx-body > * {position:relative}) */
  #aiworkstation .hx-body > .hx-slotdock{position:absolute;top:0;right:0;bottom:0;width:320px;padding:16px;display:flex;flex-direction:column;z-index:2;pointer-events:none}
  #aiworkstation .result[data-slot=page-mr] .hx-slotdock{justify-content:center}
  #aiworkstation .result[data-slot=page-br] .hx-slotdock{justify-content:flex-end}
  /* the page heading sits centred at the top of every window, so it never moves while the widget slot changes */
  #aiworkstation .result .hx-body{justify-content:flex-start}
  #aiworkstation .result .hx-hero{margin:44px auto 0;width:min(calc(100% - 48px),560px)}
  #aiworkstation .result .hx-hero .hx-comp,#aiworkstation .result .hx-hero__sub{display:none}
  #aiworkstation .result .hx-threads{flex:0 0 auto}
  #aiworkstation .result .hx-foot{margin-top:auto}
  #aiworkstation .hx-float{pointer-events:auto;width:100%;background:color-mix(in srgb,var(--hx-sidebar) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 40px -18px rgb(0 0 0 / 85%)}
  #aiworkstation .hx-float .hx-usage__head .lc:first-child{margin-left:0;color:var(--hx-accent-ink)}
  #aiworkstation .pw__runs{display:grid;gap:5px}
  #aiworkstation .pw__runs > div{display:grid;grid-template-columns:auto 14px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;border:1px solid var(--hx-line);background:rgb(255 255 255 / 2.5%);font-size:11.5px}
  #aiworkstation .pw__runs .t{font-family:var(--hx-mono);font-size:10.5px;color:var(--hx-muted-2);font-variant-numeric:tabular-nums}
  #aiworkstation .pw__runs .pv{width:12px;height:12px}
  #aiworkstation .pw__runs > div > span:nth-child(3){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #aiworkstation .pw__runs .s{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;white-space:nowrap}
  #aiworkstation .pw__runs .s .lc{width:11px;height:11px}
  #aiworkstation .pw__runs .s.run .lc{animation:spin 1.6s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  #aiworkstation .pw__foot{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--hx-muted-2);padding-top:7px;border-top:1px solid var(--hx-line)}
  #aiworkstation .pw__rows{display:grid;gap:3px}
  #aiworkstation .pw__rows > div{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:11.5px}
  #aiworkstation .pw__rows > div .lc{width:13px;height:13px;color:var(--hx-muted-2)}
  #aiworkstation .pw__rows > div b{margin-left:auto;font-weight:500;font-variant-numeric:tabular-nums;color:var(--hx-fg)}
  #aiworkstation .pw__rows > div[data-selected=true]{background:rgb(var(--hx-accent-rgb) / 14%)}
  #aiworkstation .pw__rows > div[data-selected=true] .lc{color:#6ee7b7}
  #aiworkstation .result .hx-usage__head .lc.lead{margin-left:0;color:var(--hx-accent-ink)}

  @media (max-width:900px){#aiworkstation .plugins__grid{grid-template-columns:1fr}#aiworkstation .figure{min-height:280px}#aiworkstation .pbar__text{font-size:14px}}
  @media (max-width:600px){
    /* phones: every window renders at the same 620px app width (JS sets --rs): sidebar + trimmed page, only the widget moves */
    #aiworkstation .result .hx{--hx-side-w:230px}
    #aiworkstation .result .hx-hero .hx-comp,#aiworkstation .result .hx-hero__sub,#aiworkstation .result .hx-hero__eyebrow{display:none}
    #aiworkstation .result .hx-hero{margin:26px auto 0;width:auto;max-width:none}
    #aiworkstation .result .hx-hero__title{font-size:26px}
    #aiworkstation .result .hx--v2 .hx-stage{margin:0 6px 6px 0}
    #aiworkstation .hx-body > .hx-slotdock{width:236px;padding:10px}
    #aiworkstation .result .hx-gtools > span:not(.slotk){display:none}
    #aiworkstation .pbar__row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px 8px;font-size:12px}
    #aiworkstation .pbar__model{grid-column:1 / -1}
    #aiworkstation .pbar__effort,#aiworkstation .pbar .sep,#aiworkstation .pbar__spacer,#aiworkstation .pbar__edit{display:none}
  }
  @media (max-width:360px){
    #aiworkstation #plugin-stage{padding:16px}
    #aiworkstation .pbar{padding:12px}
  }