/* hm-duo · home #how: both products in one tray (ElevenLabs' "Two platforms"), hover plays a product. Spec: asset.html header.
   The windows are hm-walk (its CSS is loaded too and styles everything inside .hm-walk); this file only lays them out.
   Base rules = the final frame. asset.js adds .is-live (and moves .is-act) while it plays. */
.hm-duo{--duo-t3:var(--t3,320ms);--duo-t4:var(--t4,560ms);--duo-e:var(--ease,cubic-bezier(.25,1,.5,1));color:#fff}
.hm-duo p,.hm-duo h3{margin:0}

/* head: a two-line H2, then the two products named in two columns that sit over their windows */
.hm-duo-h{max-width:760px}
.hm-duo-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;margin-top:48px}
.hm-duo-col h3{display:flex;align-items:center;gap:10px;font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.01em;color:#fff}
.hm-duo-col p{margin-top:6px;max-width:440px;font-size:17px;line-height:26px;color:var(--w-60,rgba(255,255,255,.6))}
.hm-duo-mk{flex:none;width:8px;height:8px;border-radius:50%}
.hm-duo-mk.ag{background:var(--blue-lt,#7DB9FF)}
.hm-duo-mk.pp{box-shadow:inset 0 0 0 1.5px #fff}
.hm-duo-col{transition:opacity var(--duo-t3) var(--duo-e)}
.hm-duo.is-live[data-act="ag"] .hm-duo-col[data-p="pp"],.hm-duo.is-live[data-act="pp"] .hm-duo-col[data-p="ag"]{opacity:.5}

/* the tray (v2): ElevenLabs' frosted-glass light, in our colours. Grainy diagonal beams on near-black: a dusty teal and the Hawcx blue
   leak in from the upper left, a violet band runs through the middle, a warm pearl leak lights the passwordless browser from the right. */
.hm-duo-tray{position:relative;height:660px;margin-top:40px;border-radius:24px;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.07) 30%,rgba(255,255,255,0) 42%,rgba(255,255,255,.05) 58%,rgba(255,255,255,0) 72%),
    radial-gradient(55% 75% at 6% 8%,rgba(132,176,196,.62),rgba(132,176,196,0) 62%),
    radial-gradient(60% 85% at 26% 62%,rgba(34,86,226,.7),rgba(34,86,226,0) 66%),
    radial-gradient(45% 70% at 58% 40%,rgba(118,92,214,.38),rgba(118,92,214,0) 68%),
    radial-gradient(50% 80% at 100% 90%,rgba(236,214,196,.34),rgba(236,214,196,0) 66%),
    linear-gradient(135deg,#1b2a44 0%,#0f1430 48%,#0b0a12 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hm-duo-tray::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/grain-tile.png) 0 0/128px 128px;opacity:.75;mix-blend-mode:overlay;pointer-events:none}
.hm-duo-tray::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/grain-tile.png) 64px 64px/128px 128px;opacity:.28;mix-blend-mode:soft-light;pointer-events:none}

/* the two windows: agents left and forward; people right, lower, cropped by the tray's right edge and bottom */
.hm-duo .hm-duo-w{position:absolute;display:block;top:48px;bottom:40px;outline:none;transition:opacity var(--duo-t4) var(--duo-e),transform var(--duo-t4) var(--duo-e)}
.hm-duo .hm-duo-w[data-p="ag"]{left:40px;width:calc(56% - 40px);z-index:2}
.hm-duo .hm-duo-w[data-p="pp"]{left:52%;right:40px;width:auto;top:88px;bottom:16px;z-index:1}
.hm-duo .hm-duo-w .hm-wk-win{height:100%;min-height:0;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.hm-duo .hm-duo-w .hm-wk-stage{min-height:0}
.hm-duo .hm-wk-sts .hm-wk-mk{display:none}
.hm-duo .hm-duo-pn{display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;font-weight:450;color:var(--w-60,rgba(255,255,255,.6));white-space:nowrap}
.hm-duo .hm-duo-pn .lg{display:none}
.hm-duo .hm-wk-sts{font-size:14px;line-height:20px;color:var(--w-85,rgba(255,255,255,.85))}
/* active and resting: the active window is forward and full; the other steps back */
.hm-duo.is-live .hm-duo-w{opacity:.46;transform:scale(.985)}
.hm-duo.is-live .hm-duo-w.is-act{opacity:1;transform:none;z-index:3}
.hm-duo.is-live .hm-duo-w:not(.is-act){cursor:pointer}
@media (hover:hover){ .hm-duo.is-live .hm-duo-w:not(.is-act):hover{opacity:.7} }
.hm-duo .hm-duo-w:focus-visible .hm-wk-win{outline:2px solid #fff;outline-offset:3px}

/* each window's footer: the current step and five segments (buttons) */
.hm-duo-ft{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px;padding:0 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.hm-duo-lb{display:flex;align-items:baseline;gap:10px;min-width:0;font-size:14px;line-height:20px}
.hm-duo-n{flex:none;font:500 11px/16px var(--mono,ui-monospace,monospace);letter-spacing:.04em;color:var(--w-45,rgba(255,255,255,.45))}
.hm-duo-ls{display:grid;min-width:0}
.hm-duo-ls>span{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity var(--duo-t3) var(--duo-e),transform var(--duo-t3) var(--duo-e)}
.hm-duo-ls>span.is-cur{opacity:1;transform:none}
.hm-duo-segs{flex:none;display:flex;gap:4px}
.hm-duo-seg{position:relative;width:28px;height:20px;padding:0;border:0;background:none;cursor:pointer}
.hm-duo-seg i{position:absolute;left:0;right:0;top:9px;height:2px;border-radius:1px;background:rgba(255,255,255,.18);overflow:hidden}
.hm-duo-seg i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.hm-duo-seg.is-done i::after{transform:none}
.hm-duo-seg.is-cur i::after{transform:scaleX(var(--p,1))}
.hm-duo-seg:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:3px}

.hm-duo-hint{margin-top:14px;text-align:right;font:400 11px/16px var(--mono,ui-monospace,monospace);letter-spacing:.06em;color:rgba(255,255,255,.5);pointer-events:none}
.hm-duo-hint .tp{display:none}
@media (hover:none){ .hm-duo-hint .hv{display:none} .hm-duo-hint .tp{display:inline} }
.hm-duo:not(.is-live) .hm-duo-hint{display:none}

@media (max-width:1100px){
  .hm-duo-tray{height:600px}
  .hm-duo .hm-duo-w[data-p="ag"]{left:24px;width:calc(60% - 24px)}
  .hm-duo .hm-duo-w[data-p="pp"]{left:54%;right:24px;width:auto}
  .hm-duo-col p{font-size:16px;line-height:24px}
}
/* <=900: the tray unstacks: two windows one under the other, each with its own light; each plays while in view */
@media (max-width:900px){
  .hm-duo-cols{display:none}
  .hm-duo-tray{height:auto;padding:24px;display:flex;flex-direction:column;gap:20px}
  .hm-duo .hm-duo-w,.hm-duo .hm-duo-w[data-p="ag"],.hm-duo .hm-duo-w[data-p="pp"]{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}
  .hm-duo .hm-duo-w .hm-wk-win{height:auto}
  .hm-duo .hm-duo-w .hm-wk-stage{min-height:400px}
  .hm-duo.is-live .hm-duo-w,.hm-duo.is-live .hm-duo-w.is-act{opacity:1;transform:none}
  .hm-duo-hint{display:none}
  .hm-duo .hm-duo-pn{color:#fff}
  .hm-duo .hm-duo-pn .s{display:none}
  .hm-duo .hm-duo-pn .lg{display:inline}
}
@media (max-width:760px){
  .hm-duo-tray{padding:12px;border-radius:20px;margin-top:32px}
  .hm-duo-ft{padding:0 14px}
  .hm-duo-seg{width:20px}
  .hm-duo .hm-duo-w .hm-wk-stage{min-height:380px}
}
@media (prefers-reduced-motion:reduce){ .hm-duo *{transition:none!important} }

/* ---------- v2 shells ---------- */
.hm-duo .hm-duo-w .hm-wk-win{border-radius:12px;border:0;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 2px 0 rgba(255,255,255,.04) inset,0 40px 90px -30px rgba(0,0,0,.75)}
.hm-duo .hm-duo-tb{position:relative;justify-content:flex-start;gap:14px;height:44px;padding:0 14px}
.hm-duo-lights{display:flex;gap:7px;flex:none}
.hm-duo-lights i{width:11px;height:11px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
.hm-duo-lights i:nth-child(2){background:#febc2e}.hm-duo-lights i:nth-child(3){background:#28c840}
.hm-duo.is-live .hm-duo-w:not(.is-act) .hm-duo-lights i{background:rgba(255,255,255,.18)}
.hm-duo .hm-duo-pn{gap:8px;color:#fff;font-size:13.5px}
.hm-duo .hm-duo-bot{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(125,185,255,.16);color:var(--blue-lt,#7DB9FF)}
.hm-duo .hm-duo-bot svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hm-duo .hm-duo-bot .fl{fill:currentColor;stroke:none}
.hm-duo .hm-duo-for{color:var(--w-45,rgba(255,255,255,.45));font-weight:400}
.hm-duo .hm-duo-sec{margin-left:auto!important;display:flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:rgba(143,209,158,.1);
  box-shadow:inset 0 0 0 1px rgba(143,209,158,.22);font-size:12px;line-height:16px;color:var(--ok-d,#8FD19E);white-space:nowrap}
.hm-duo .hm-duo-sec .hm-wk-g{width:13px;height:13px}
/* the agent app: dark chat, bottom-anchored thread, a composer */
.hm-duo .hm-duo-w[data-p="ag"] .hm-wk-win{background:#161618}
.hm-duo .hm-duo-chat{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:0 28px 12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px);mask-image:linear-gradient(to bottom,transparent 0,#000 56px)}
.hm-duo .hm-duo-stack{display:flex;flex-direction:column;gap:10px;flex:none;width:100%;max-width:520px;margin:0 auto}
.hm-duo .hm-duo-stack>.hm-duo-cm.hm-wk-e:not(.is-on){display:none}
.hm-duo .hm-duo-stack>.hm-duo-cm.is-on{animation:hm-duo-rise 420ms cubic-bezier(.25,1,.5,1) both}
.hm-duo .hm-wk-snap.hm-duo-cm,.hm-duo.is-inst .hm-duo-cm,.hm-duo .hm-duo-w.is-inst .hm-duo-cm{animation:none}
@keyframes hm-duo-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hm-duo .hm-duo-stack>.hm-duo-cm.is-on.is-dim{opacity:.55}
.hm-duo .hm-duo-me{align-self:flex-end;max-width:78%;padding:9px 14px;border-radius:16px 16px 5px 16px;background:#fff;color:#0a0a0a;font-size:14px;line-height:20px}
.hm-duo .hm-duo-ag{align-self:flex-start;max-width:82%;padding:9px 14px;border-radius:16px 16px 16px 5px;background:#26262a;color:rgba(255,255,255,.92);font-size:14px;line-height:20px}
.hm-duo .hm-duo-dots{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:16px 16px 16px 5px;background:#26262a}
.hm-duo .hm-duo-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);animation:hm-duo-blink 1.2s infinite}
.hm-duo .hm-duo-dots i:nth-child(2){animation-delay:.2s}.hm-duo .hm-duo-dots i:nth-child(3){animation-delay:.4s}
@keyframes hm-duo-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.hm-duo .hm-duo-ck{align-self:stretch;margin:2px 0;padding:12px 14px;border-radius:12px;background:linear-gradient(180deg,rgba(125,185,255,.07),rgba(125,185,255,.02));
  box-shadow:inset 0 0 0 1px rgba(125,185,255,.2),inset 3px 0 0 var(--blue-lt,#7DB9FF)}
.hm-duo .hm-duo-ckh{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:18px;color:var(--blue-lt,#7DB9FF);font-weight:500}
.hm-duo .hm-duo-ckh .hm-wk-g{width:14px;height:14px}
.hm-duo .hm-duo-ckc{font-weight:400;color:var(--w-45,rgba(255,255,255,.45))}
.hm-duo .hm-duo-call{margin-top:6px!important}
.hm-duo .hm-duo-call code{font:500 12.5px/18px var(--mono,ui-monospace,monospace);color:#fff;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07)}
.hm-duo .hm-duo-rows{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;list-style:none}
.hm-duo .hm-duo-rows li{display:flex;align-items:center;gap:6px;font-size:13px;line-height:20px;color:var(--w-85,rgba(255,255,255,.85))}
.hm-duo .hm-duo-rows .hm-wk-g{width:14px;height:14px}
.hm-duo .hm-duo-res{margin-top:8px!important;padding-top:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);font-size:13px;line-height:18px;font-weight:500}
.hm-duo .hm-duo-res .hm-wk-c{display:inline-flex;align-items:center;gap:6px}
.hm-duo .hm-duo-res .hm-wk-g{width:14px;height:14px}
.hm-duo .hm-duo-fin .hm-duo-res{box-shadow:none;padding-top:0;margin-top:4px!important;font-size:12.5px}
.hm-duo .hm-duo-ask{align-self:flex-start;min-width:280px;padding:12px 14px;border-radius:16px 16px 16px 5px;background:#26262a}
.hm-duo .hm-duo-askt{font-size:14px;line-height:20px;color:#fff}
.hm-duo .hm-duo-ask .hm-wk-slot{justify-items:start;margin-top:10px}
.hm-duo .hm-duo-ask .hm-wk-by{font-size:14px;color:var(--w-85,rgba(255,255,255,.85))}
.hm-duo .hm-duo-cmp{flex:none;display:flex;align-items:center;gap:8px;margin:0 20px 14px;padding:6px 6px 6px 14px;border-radius:14px;background:#202024;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hm-duo .hm-duo-inp{flex:1;display:grid;min-width:0;font-size:14px;line-height:20px}
.hm-duo .hm-duo-inp>*{grid-area:1/1;white-space:nowrap;overflow:hidden}
.hm-duo .hm-duo-ph{color:var(--w-35,rgba(255,255,255,.35))}
.hm-duo .hm-duo-typed{color:#fff}
.hm-duo .hm-duo-inp .hm-wk-e{transform:none}
.hm-duo .hm-duo-send{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;color:#0a0a0a;transition:transform 120ms ease}
.hm-duo .hm-duo-send svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hm-duo .hm-duo-send.is-press{transform:scale(.9)}
/* the browser: light toolbar, a URL field, a white page */
.hm-duo .hm-duo-w[data-p="pp"]{--hm-wk-grn:#1f8a4c;--hm-wk-red:#d93636;--hm-wk-amb:#b7791f}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-win{background:#fbfbfa;color:#0a0a0a;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 40px 90px -30px rgba(0,0,0,.7)}
.hm-duo .hm-duo-brt{background:#ecebe9;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.hm-duo .hm-duo-brt .hm-duo-lights i{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.hm-duo.is-live .hm-duo-w:not(.is-act) .hm-duo-brt .hm-duo-lights i{background:rgba(0,0,0,.14)}
.hm-duo .hm-duo-nav{display:flex;gap:6px;color:rgba(0,0,0,.4)}
.hm-duo .hm-duo-nav svg,.hm-duo .hm-duo-url svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hm-duo .hm-duo-url{flex:1;max-width:340px;display:flex;align-items:center;gap:6px;height:28px;margin:0 auto!important;padding:0 12px;border-radius:8px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);font-size:12.5px;line-height:16px;color:rgba(0,0,0,.62)}
.hm-duo .hm-duo-uw{display:grid}
.hm-duo .hm-duo-uw>*{grid-area:1/1;white-space:nowrap;transform:none}
.hm-duo .hm-duo-pn.pp{display:none}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-stage{background:#fbfbfa}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-ttl{color:#0a0a0a}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-fld{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);color:#0a0a0a}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-cta{background:#0a0a0a;color:#fff}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-line{color:rgba(0,0,0,.55)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-line.hm-wk-hi{color:rgba(0,0,0,.82)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-trk{stroke:rgba(0,0,0,.12)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-arcw svg{stroke:#1f8a4c}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-ring .hm-wk-fp{stroke:rgba(0,0,0,.6)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-bl,.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-note{color:rgba(0,0,0,.52)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-fake{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-addr{background:rgba(0,0,0,.045);color:rgba(0,0,0,.6)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-tag{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);color:rgba(0,0,0,.6)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-wk-fake .hm-wk-line+.hm-wk-line{color:rgba(0,0,0,.45)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-duo-ft{background:#f1f0ee;box-shadow:inset 0 1px 0 rgba(0,0,0,.07)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-duo-lb{color:#0a0a0a}
.hm-duo .hm-duo-w[data-p="pp"] .hm-duo-n{color:rgba(0,0,0,.45)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-duo-seg i{background:rgba(0,0,0,.14)}
.hm-duo .hm-duo-w[data-p="pp"] .hm-duo-seg i::after{background:#0a0a0a}
.hm-duo .hm-duo-w[data-p="ag"] .hm-duo-ft{background:#131315}
@media (max-width:900px){
  .hm-duo .hm-duo-w::before{content:attr(data-name);display:block;margin:4px 4px 12px;font-size:17px;line-height:24px;font-weight:500;color:#fff}
  .hm-duo .hm-duo-pn .lg{display:none!important}
  .hm-duo .hm-duo-pn .s{display:inline!important}
  .hm-duo .hm-duo-pn .for,.hm-duo .hm-duo-for{display:none}
  .hm-duo .hm-duo-chat{min-height:440px}
  .hm-duo .hm-duo-sec{display:none}
}
@media (max-width:560px){
  .hm-duo .hm-duo-chat{padding:0 14px 10px}
  .hm-duo .hm-duo-cmp{margin:0 12px 12px}
  .hm-duo .hm-duo-ask{min-width:0}
  .hm-duo .hm-duo-url{max-width:none}
}
@media (prefers-reduced-motion:reduce){ .hm-duo .hm-duo-dots i{animation:none} }

/* ---------- v3 (user: "this entire UI of the chat interface looks ai generated … see how product grade interfaces actually look").
   Grounded in the ChatGPT window (openai-features-07) and agent apps' tool rows and permission prompts: a white window with a history
   sidebar, the agent's replies as plain text beside a small avatar, only the user's message in a soft grey bubble, tool calls as quiet
   one-line rows, the held call as a permission prompt, a composer with a tool row. No accent bars, no glow, no coloured card borders. */
.hm-duo .hm-duo-w[data-p="ag"] .hm-wk-win.hm-duo-app{display:grid;grid-template-columns:176px minmax(0,1fr);background:#fff;color:#0d0d0d;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 40px 90px -30px rgba(0,0,0,.7)}
.hm-duo-side{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 10px 12px;background:#f9f9f9;box-shadow:inset -1px 0 0 rgba(0,0,0,.05);font-size:12.5px;line-height:18px}
.hm-duo-side .hm-duo-lights{margin:0 0 14px 4px!important}
.hm-duo-new{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:8px;color:#0d0d0d;font-weight:500}
.hm-duo-new svg,.hm-duo-an svg,.hm-duo-tools svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hm-duo-gl{margin:14px 8px 4px!important;font-size:11px;line-height:16px;color:rgba(0,0,0,.42)}
.hm-duo-it{height:28px;padding:5px 8px;border-radius:8px;color:rgba(0,0,0,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-duo-it.is-cur{background:#ececec;color:#0d0d0d}
.hm-duo-me2{margin-top:auto!important;display:flex;align-items:center;gap:8px;padding:6px 8px;color:#0d0d0d}
.hm-duo-me2 i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e3dcff;color:#3b2b8f;font-style:normal;font-size:11px;font-weight:600}
.hm-duo-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.hm-duo-mh{flex:none;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px}
.hm-duo-an{display:flex;align-items:center;gap:6px;font-size:14px;line-height:20px;font-weight:500;color:#0d0d0d}
.hm-duo-an .cv{color:rgba(0,0,0,.4)}
.hm-duo .av{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);color:#0d0d0d}
.hm-duo .av svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hm-duo .av .fl{fill:currentColor;stroke:none}
.hm-duo-prot{display:flex;align-items:center;gap:5px;font-size:12px;line-height:16px;color:rgba(0,0,0,.45)}
.hm-duo-prot svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.hm-duo .hm-duo-w[data-p="ag"] .hm-wk-stage{flex:1;min-height:0;background:#fff}
.hm-duo .hm-duo-w[data-p="ag"] .hm-duo-chat{padding:0 32px 10px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px);mask-image:linear-gradient(to bottom,transparent 0,#000 40px)}
.hm-duo .hm-duo-w[data-p="ag"] .hm-duo-stack{gap:14px;max-width:470px}
/* the thread */
.hm-duo .hm-duo-w[data-p="ag"] .hm-duo-me{align-self:flex-end;max-width:76%;padding:8px 14px;border-radius:18px;background:#f0f0f0;color:#0d0d0d;font-size:13.5px;line-height:20px}
.hm-duo-think,.hm-duo-as{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:21px;color:#0d0d0d}
.hm-duo-as p{padding-top:1px}
.hm-duo-think .sh{padding-top:1px;background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.8) 40%,rgba(0,0,0,.35) 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hm-duo-shim 1.4s linear infinite}
@keyframes hm-duo-shim{from{background-position:100% 0}to{background-position:-100% 0}}
.hm-duo-tool{margin-left:32px;padding:8px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
.hm-duo-tr{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;line-height:20px;color:#0d0d0d}
.hm-duo-tr .ti{display:grid;color:rgba(0,0,0,.45)}
.hm-duo-tr .ti svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.hm-duo-tr .tt{font-weight:500;white-space:nowrap}
.hm-duo-tr code{font:12px/18px var(--mono,ui-monospace,monospace);color:rgba(0,0,0,.5);white-space:nowrap}
.hm-duo-st{margin-left:auto;display:grid;justify-items:end;font-size:12px;line-height:18px;white-space:nowrap}
.hm-duo-st>*{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;color:rgba(0,0,0,.45)}
.hm-duo .hm-duo-st>.hm-wk-e{transform:none}
.hm-duo-st .is-ok{color:#1a7f37}.hm-duo-st .is-hold{color:#9a6700}
.hm-duo-st svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hm-duo-st .dt{width:6px;height:6px;border-radius:50%;background:currentColor}
.hm-duo-st .sp{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(0,0,0,.15);border-top-color:rgba(0,0,0,.55);animation:hm-duo-spin .8s linear infinite}
@keyframes hm-duo-spin{to{transform:rotate(360deg)}}
.hm-duo-tn{display:flex;align-items:center;gap:6px;margin-top:2px!important;padding-left:22px;font-size:12px;line-height:18px;color:rgba(0,0,0,.5)}
.hm-duo-tn .sh,.hm-duo-rec .sh{display:grid}
.hm-duo-tn svg,.hm-duo-rec svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.hm-duo .hm-duo-tn.hm-wk-e{transform:none}
/* the held call: a permission prompt (agent apps' "wants to use" pattern) */
.hm-duo-perm{margin-left:32px;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 8px 24px -12px rgba(0,0,0,.18)}
.hm-duo-perm .pt{font-size:13.5px;line-height:20px;font-weight:500;color:#0d0d0d}
.hm-duo-perm .pd{margin-top:2px!important;font-size:12.5px;line-height:18px;color:rgba(0,0,0,.55)}
.hm-duo-perm .pb{display:flex;gap:8px;margin-top:12px!important}
.hm-duo-perm .pb span{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500}
.hm-duo-perm .ap{background:#0d0d0d;color:#fff;transition:transform 120ms ease}
.hm-duo-perm .ap.is-press{transform:scale(.95)}
.hm-duo-perm .rj{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);color:#0d0d0d}
.hm-duo-sys{margin-left:32px;display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:18px;color:#1a7f37}
.hm-duo-sys svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hm-duo-rec{margin-left:32px;display:flex;align-items:center;gap:6px;font-size:12px;line-height:18px;color:rgba(0,0,0,.45)}
/* composer */
.hm-duo .hm-duo-w[data-p="ag"] .hm-duo-cmp{flex:none;display:block;margin:0 24px 16px;padding:10px 12px 8px 14px;border-radius:18px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.1),0 2px 8px -4px rgba(0,0,0,.12)}
.hm-duo .hm-duo-w[data-p="ag"] .hm-duo-inp{font-size:13.5px;line-height:20px}
.hm-duo .hm-duo-w[data-p="ag"] .hm-duo-ph{color:rgba(0,0,0,.38)}
.hm-duo .hm-duo-w[data-p="ag"] .hm-duo-typed{color:#0d0d0d}
.hm-duo-tools{display:flex;align-items:center;gap:12px;margin-top:8px!important;color:rgba(0,0,0,.45)}
.hm-duo .hm-duo-w[data-p="ag"] .hm-duo-send{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#0d0d0d;color:#fff}
.hm-duo .hm-duo-w[data-p="ag"] .hm-duo-send svg{width:14px;height:14px}
/* the chat's inactive rest: plain, no dim veil on white (opacity handles it) */
.hm-duo.is-live .hm-duo-w:not(.is-act) .hm-duo-lights i{background:rgba(0,0,0,.14)}
/* steps now sit in each product's column */
.hm-duo-col .hm-duo-ft{display:flex;align-items:center;justify-content:flex-start;gap:14px;height:auto;margin-top:18px;padding:0;background:none!important;box-shadow:none!important}
.hm-duo-col .hm-duo-lb{color:rgba(255,255,255,.85)}
.hm-duo-col .hm-duo-seg i{background:rgba(255,255,255,.18)!important}
.hm-duo-col .hm-duo-seg i::after{background:#fff!important}
.hm-duo:not(.is-live) .hm-duo-col .hm-duo-ft{display:none}
@media (max-width:1100px){
  .hm-duo .hm-duo-w[data-p="ag"] .hm-wk-win.hm-duo-app{grid-template-columns:minmax(0,1fr)}
  .hm-duo-side{display:none}
  .hm-duo .hm-duo-w[data-p="ag"] .hm-duo-chat{padding:0 20px 10px}
}
@media (max-width:560px){
  .hm-duo-tool,.hm-duo-perm,.hm-duo-sys,.hm-duo-rec{margin-left:0}
  .hm-duo-tr code{display:none}
  .hm-duo-prot{display:none}
  .hm-duo .hm-duo-w[data-p="ag"] .hm-duo-cmp{margin:0 12px 12px}
}
@media (prefers-reduced-motion:reduce){ .hm-duo-think .sh,.hm-duo-st .sp{animation:none} }