/* ── WHY EVERY RULE BELOW IS SCOPED TO #cw ────────────────────────────────────
   The widget's state classes are `idle`, `live`, `ended`, `starting`,
   `booting`, `talking` and `textonly`. They are ordinary English words, and the
   panel wears them as plain classes, so `.cw-panel{display:grid}` carried a
   specificity of exactly one class.

   agents.html has a live-call mock of its own, with a `.ended{display:none}`
   rule. Same specificity, declared later, so it won: the moment a visitor ended
   a call on that page the panel vanished, still in the DOM, still holding the
   transcript, computed to display:none. Nothing in the widget was wrong and
   nothing in that page was wrong. They simply both owned the word.

   That is not a quirk of one page, it is the shape of the product. This is sold
   as one line of code on somebody else's website, and somebody else's website
   is entitled to a class called `.live`. So the fix is not to rename the host's
   class, it is to put the widget out of reach: an id outranks any number of
   classes, so every rule here starts at #cw and nothing a host page can write
   will outrank it.

   The state classes themselves stay. Renaming them means editing 52 string
   literals across the script, several of which are ordinary words used for
   other things, and it would fix this one collision rather than all of them.
   ═══════════════════════════════════════════════════════════════════════════ */

#cw{
  /* THE WIDGET BRINGS ITS OWN PALETTE, and it has to. These were inherited
     from index.html's :root, which was fine while index.html was the only page
     that had a widget. agents.html sets --body to Inter and declares neither
     --serif nor --hangup, so an inherited widget there would have rendered in
     the wrong typeface, lost the serif her spoken words are set in, and drawn
     the end-call control with no fill at all.

     Declaring them here rather than patching each host means the widget looks
     identical everywhere it is dropped, and a page that restyles itself later
     cannot silently restyle the product sitting in its corner. */
  --coral:#ef5637; --coral-2:#ff6a4b; --green:#3ecf8e;
  --ink:#0d0d0f; --ink-2:#3a3a42; --paper:#ffffff; --paper-2:#f6f5f1;
  --hangup:#B23C1E; --r-pill:999px;
  --disp:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --cw-edge:22px;   /* launcher inset from the corner */
  --cw-btn:84px;    /* launcher diameter — drives the button AND --cw-rise */
  --cw-gap:14px;    /* launcher to whatever sits above it */
  --cw-air:18px;    /* never let anything touch the top edge */
  --cw-rise:calc(var(--cw-edge) + var(--cw-btn) + var(--cw-gap));
  --cw-room:calc(100vh - var(--cw-rise) - var(--cw-air));
  position:fixed;z-index:80;right:var(--cw-edge);bottom:var(--cw-edge);
  font-family:var(--body)}
@supports (height:100dvh){ #cw{--cw-room:calc(100dvh - var(--cw-rise) - var(--cw-air))} }

#cw[hidden]{display:none}
#cw .cw-panel,#cw .cw-nudge{position:fixed;z-index:2;right:var(--cw-edge);bottom:var(--cw-rise)}
#cw{--cw-nudge-x:calc(var(--cw-btn) * .58); --cw-nudge-y:10px}
#cw .cw-nudge{right:calc(var(--cw-edge) + var(--cw-nudge-x));
          bottom:calc(var(--cw-rise) + var(--cw-nudge-y))}
#cw .cw-btn{position:relative;z-index:2}
#cw .cw-scrim{position:fixed;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:rgba(26,17,11,.22);
  -webkit-backdrop-filter:blur(9px) saturate(1.08);backdrop-filter:blur(9px) saturate(1.08);
  transition:opacity .42s cubic-bezier(.2,.7,.2,1)}
#cw.open .cw-scrim{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){#cw .cw-scrim{transition:none}}
@media(max-width:820px){
  #cw{--cw-edge:14px;--cw-gap:12px;--cw-air:14px;--cw-btn:72px}
  #cw .cw-panel{left:var(--cw-edge)}
}

#cw .cw-btn{position:relative;display:block;width:var(--cw-btn);height:var(--cw-btn);
  border-radius:50%;border:0;padding:0;cursor:pointer;
  overflow:visible;background:var(--coral);
  /* The same light as the panel, at the scale of a button: shadow to seat it,
     coral to make it the lit thing in the corner. It is the only object on the
     page that glows when nothing is happening, which is how it gets found. */
  box-shadow:0 10px 26px -8px rgba(40,28,18,.55),
             0 2px 6px rgba(40,28,18,.22),
             0 8px 22px -6px rgba(239,86,55,.6),
             0 14px 44px -8px rgba(239,86,55,.45),
             0 0 38px -6px rgba(239,86,55,.42);
  opacity:0;transform:scale(.6) translateY(12px);
  transition:transform .32s cubic-bezier(.2,1.5,.4,1),box-shadow .28s,opacity .32s}
#cw.ready .cw-btn{opacity:1;transform:none}
#cw .cw-btn:hover{transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 32px -8px rgba(40,28,18,.5),
             0 2px 6px rgba(40,28,18,.2),
             0 12px 30px -6px rgba(239,86,55,.8),
             0 22px 58px -8px rgba(239,86,55,.6),
             0 0 54px -4px rgba(239,86,55,.58)}
#cw .cw-btn .pic{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  --pw:185%;--ph:185%;--px:-42%;--py:-14.5%}
#cw .cw-btn .pic img{position:absolute;width:var(--pw);height:var(--ph);left:var(--px);top:var(--py);
  object-fit:cover;object-position:center;transition:opacity .3s ease}
#cw.eng2 .cw-btn .pic{--pw:100%;--ph:133%;--px:0%;--py:-10%}
#cw .cw-btn i.ping{position:absolute;inset:-6px;border-radius:50%;background:var(--coral);opacity:.45;
  animation:cwPing 2.8s cubic-bezier(.2,.7,.2,1) infinite;z-index:-1}
@keyframes cwPing{0%{transform:scale(.92);opacity:.5}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
#cw .cw-btn .x{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  font-size:calc(var(--cw-btn) * .33);
  opacity:0;transform:rotate(-90deg);transition:opacity .2s,transform .3s;background:var(--ink);border-radius:50%}
#cw.open .cw-btn .x{opacity:1;transform:none}
#cw.open .cw-btn i.ping{display:none}
#cw .cw-btn .dot{position:absolute;right:3px;bottom:3px;
  width:calc(var(--cw-btn) * .225);height:calc(var(--cw-btn) * .225);border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px #fffefc}
#cw.open .cw-btn .dot{opacity:0}

#cw .cw-nudge{max-width:198px;
  padding:13px 17px 14px 17px;border-radius:18px;
  color:var(--ink);cursor:pointer;
  /* Flat. The 168deg three-stop was built for the panel's 860px of height; over
     70px it is a flat fill with banding risk and extra steps. The radial coral
     wash that used to sit in the bottom-right corner is gone for a harder
     reason: it was expressed in percentages, so on a box a third the size it
     stopped being warmth in one corner and covered the whole surface. A pink
     bubble is not paper. */
  background:#fdfcf9;
  /* Three neutral layers to seat it, and ONE coral, tight and low, so her light
     lands on the underside where it would actually fall. The three wide coral
     layers this used to carry reached 48px of blur under a 70px object and
     collided with the launcher's own glow 14px below, which is how a corner
     ends up looking varnished. */
  box-shadow:
    0 1px 2px rgba(40,30,20,.06),
    0 4px 10px -4px rgba(40,30,20,.13),
    0 12px 24px -12px rgba(40,30,20,.24),
    0 6px 16px -10px rgba(239,86,55,.26);
  /* It rises and fades. It does not launch.

     The pivot is still her face, outside the box, using the same variables that
     build --cw-rise — but it is no longer load-bearing, and saying so is the
     point. Scaling from .62 about a point 62px below meant every corner
     travelled some 80px on the way in, with an overshoot on top, and 20px
     italic serif visibly resampling through the whole tween. That is a UI doing
     a trick. Overshoot belongs to objects with implied mass and 150px of paper
     has none, so .96 and no bounce: the type stays legible the entire way. */
  opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
  transform-origin:calc(100% - (var(--cw-btn) / 2))
                   calc(100% + var(--cw-gap) + (var(--cw-btn) / 2));
  transition:opacity .26s cubic-bezier(.2,.7,.2,1),
             transform .34s cubic-bezier(.2,.8,.25,1),
             box-shadow .2s}
#cw .cw-nudge.on{opacity:1;transform:none;pointer-events:auto}
#cw .cw-nudge.on:hover{transform:translateY(-2px)}
#cw .cw-nudge:focus-visible{outline:0;
  box-shadow:0 1px 2px rgba(40,30,20,.06),
             0 12px 24px -12px rgba(40,30,20,.24),
             0 0 0 2px #fffefc,0 0 0 4px var(--coral)}
#cw .cw-nudge.on ~ .cw-btn i.ping{animation:none;opacity:0}
#cw.off .cw-btn i.ping{display:none}

#cw .cw-nudge::after{
  content:"";position:absolute;bottom:-24px;width:26px;height:27px;right:4px;
  background:#fbfaf6;
  /* Straight-sided fallback first. clip-path:path() is Safari 13.1 and up, and
     without it an unclipped element leaves a rectangle hanging off the bubble,
     far worse than a plain triangle. */
  clip-path:polygon(0 0,24px 27px,10px 0);
  filter:drop-shadow(0 3px 4px rgba(40,30,20,.12));
  pointer-events:none}
@supports (clip-path:path("M 0,0 L 10,0 L 10,10 Z")){
  #cw .cw-nudge::after{clip-path:path("M 0,0 L 21.5,24.7 Q 25,27.6 22.8,23.4 L 10,0 Z")}
}
#cw .cw-nudge q{display:block;quotes:none;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:19px;line-height:1.16;letter-spacing:.005em;color:var(--ink)}
#cw .cw-nudge em{display:block;font-style:normal;margin-top:6px;
  font-family:var(--mono);font-size:8.5px;
  letter-spacing:.13em;text-transform:uppercase;color:#8b8778}
#cw .cw-nudge .no{position:absolute;top:-7px;right:-7px;width:22px;height:22px;
  border:0;border-radius:50%;padding:0;
  background:#fffefc;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  font-size:10px;line-height:1;
  box-shadow:0 1px 3px rgba(40,30,20,.18),0 4px 10px -4px rgba(40,30,20,.22);
  transition:background .18s,color .18s,opacity .16s,transform .16s}
#cw .cw-nudge .no:hover{background:#f4f1e9;color:var(--ink)}
/* At rest the bubble is a line of speech and nothing else, which is the point.
   Fine pointers only: on touch there is no hover, and a dismiss you cannot see
   is a dark pattern, so there it stays visible. focus-within keeps it reachable
   from the keyboard. */
@media (hover:hover) and (pointer:fine){
  #cw .cw-nudge .no{opacity:0;transform:scale(.8)}
  #cw .cw-nudge:hover .no,#cw .cw-nudge:focus-within .no{opacity:1;transform:none}
}
#cw .cw-panel{
  /* One source of truth for the height, because the stage width is derived from
     it. 524 is the ceiling; --cw-room is what the screen will actually give.

     Back to 524 by 796 after a run up to 860 by 1180. At that size it stopped
     being a widget in the corner of a page and became a window over it, which
     is a different product. The derived stage stays, because that was a bug
     fix rather than a size change: a fixed stage column meant her frame drifted
     from 0.644 to 1.0 whenever the panel clamped, and 0.644 of 524 is 337,
     within a pixel of the 336 this layout was originally cut to. */
  --ph:min(524px,var(--cw-room));
  width:796px;max-width:calc(100vw - (var(--cw-edge) * 2));
  height:var(--ph);
  /* THE STAGE IS 0.644 OF THE HEIGHT, ALWAYS — not a fixed 492 that happened to
     be 0.644 of the designed height and nothing like it once the panel clamped.
     A fixed column meant her frame drifted from 0.644 to 0.80 on a laptop and
     to 1.0 on a short one, so the crop the portrait was composed for only
     existed on screens tall enough to never clamp. Deriving it means she is
     framed identically at every size the panel can be. */
  display:grid;grid-template-columns:calc(var(--ph) * .644) 1fr;
  overflow:hidden;border-radius:26px;
  background:linear-gradient(168deg,#fffefc 0%,#f8f6f1 52%,#f2f0e9 100%);
  /* THE LIGHT IT CASTS. Seven layers, and the order is the point: four of
     shadow to sit it on the page, then three of warm coral to make it read as a
     lit object rather than a heavy one. A panel this size held up by shadow
     alone looks like it is pressing on the page; the halo is what makes it
     hover. box-shadow is not clipped by this element's own overflow:hidden, so
     the glow reaches well past the corners while her frame stays cut to them.

     The coral is layered near-to-far rather than laid on in one pass. One wide
     soft shadow at high opacity goes muddy and reads as a coloured rectangle;
     three at falling strength and rising blur read as light falling off. */
  box-shadow:
    0 1px 2px rgba(40,30,20,.06),
    0 3px 8px -3px rgba(40,30,20,.14),
    0 18px 36px -14px rgba(40,30,20,.34),
    0 54px 90px -36px rgba(30,20,12,.48),
    0 100px 160px -58px rgba(24,15,9,.54),
    /* the warm spill: tight and bright, then wide, then the far haze */
    0 14px 44px -18px rgba(239,86,55,.42),
    0 46px 120px -34px rgba(239,86,55,.38),
    0 0 104px -18px rgba(239,86,55,.22);
  opacity:0;transform:translateY(18px) scale(.95);transform-origin:100% 100%;pointer-events:none;
  transition:opacity .26s cubic-bezier(.2,.7,.2,1),transform .42s cubic-bezier(.16,1.12,.3,1)}
#cw.open .cw-panel{opacity:1;transform:none;pointer-events:auto}

#cw .cw-stage{position:relative;overflow:hidden;min-width:0;background:#141019}
#cw .cw-stage img,#cw .cw-stage video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 14%}
#cw .cw-stage img{transition:opacity .6s ease}
#cw .cw-stage video{opacity:0;transition:opacity .6s ease}
#cw .cw-panel.live #cwVid,#cw .cw-panel.looping #cwLoop,#cw .cw-panel.eng2 #cwHead{opacity:1}
#cwHead{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
#cwHead canvas,#cwHead video{width:100%!important;height:100%!important;
  object-fit:cover;object-position:center 14%;display:block}
#cw .cw-panel.eng2 .cw-stage img{opacity:0}
#cw .cw-panel.looping .cw-stage img{opacity:0}
#cw .cw-sub{position:absolute;left:18px;right:18px;bottom:52px;z-index:3;pointer-events:none;
  font-family:var(--body);font-size:13px;line-height:1.35;font-weight:500;letter-spacing:.005em;
  color:rgba(255,255,255,.93);text-shadow:0 1px 3px rgba(9,7,13,.5);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:36px;
  opacity:0;transform:translateY(6px);
  transition:opacity .22s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1)}
#cw .cw-sub.on{opacity:1;transform:none}
#cw .cw-sub b{font-weight:500;opacity:.55;transition:opacity .12s linear}
#cw .cw-sub b.now{opacity:1}

#cw .cw-veil{position:absolute;left:0;right:0;bottom:0;height:168px;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .7s ease;
  background:linear-gradient(180deg,rgba(9,7,13,0) 0%,rgba(9,7,13,.26) 34%,
                                    rgba(9,7,13,.6) 72%,rgba(9,7,13,.74) 100%)}
#cw .cw-veil::before{content:"";position:absolute;inset:0;
  -webkit-backdrop-filter:blur(7px) saturate(.92);backdrop-filter:blur(7px) saturate(.92);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 38%,#000 78%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 38%,#000 78%)}
#cw .cw-panel.captioning .cw-veil{opacity:1}

#cw .cw-live{position:absolute;left:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:var(--r-pill);background:rgba(12,10,16,.5);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);
  transition:padding .26s cubic-bezier(.2,.7,.2,1),gap .26s}
#cw .cw-live span{max-width:170px;overflow:hidden;white-space:nowrap;
  transition:max-width .26s cubic-bezier(.2,.7,.2,1),opacity .2s}
#cw .cw-panel.talking .cw-live{padding:7px;gap:0}
#cw .cw-panel.talking .cw-live span{max-width:0;opacity:0}
#cw .cw-live i{width:6px;height:6px;border-radius:50%;background:#8b8b93;transition:background .3s,box-shadow .3s}
#cw .cw-panel.live .cw-live i{background:var(--green);box-shadow:0 0 9px var(--green)}
#cw .cw-panel.talking .cw-live i{animation:opPip 1.6s ease-in-out infinite}
#cw .cw-panel.booting .cw-stage img{animation:cwBreathe 2.4s ease-in-out infinite}
@keyframes cwBreathe{0%,100%{filter:saturate(1) brightness(1)}50%{filter:saturate(1.09) brightness(1.05)}}
#cw .cw-load{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.18);
  overflow:hidden;opacity:0;transition:opacity .2s;z-index:4}
#cw .cw-panel.booting .cw-load{opacity:1}
#cw .cw-load i{position:absolute;inset:0;width:38%;background:var(--coral);animation:cwSlide 1.15s ease-in-out infinite}
@keyframes cwSlide{0%{left:-38%}100%{left:100%}}
#cw .cw-end{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;
  background:linear-gradient(180deg,rgba(12,9,15,.62),rgba(12,9,15,.82));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#cw .cw-panel.cw-ended .cw-end{display:flex;animation:cwUp .4s cubic-bezier(.2,.7,.2,1) both}
#cw .cw-end b{font-family:var(--disp);font-weight:800;font-size:16px;color:#fff;letter-spacing:-.01em}
#cw .cw-end span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
#cw .cw-end button{border:0;cursor:pointer;border-radius:var(--r-pill);padding:9px 16px;
  font-family:var(--body);font-weight:600;font-size:13px;color:var(--ink);background:#fff;
  transition:transform .16s,background .18s}
#cw .cw-end button:hover{transform:translateY(-1px);background:var(--paper-2)}
#cw .cw-panel.cw-ended .cw-stage img{opacity:.9}

#cw .cw-side{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;
  background:#fdfcf9;
  /* The paper folds rather than being cut: a soft trench where the two halves
     meet, in place of the border this page does not use. */
  box-shadow:inset 22px 0 26px -24px rgba(58,44,30,.2)}

#cw .cw-id{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:16px 18px 0}
#cw .cw-id b{display:block;font-family:var(--disp);font-weight:800;font-size:15.5px;letter-spacing:-.02em;line-height:1.1}
#cw .cw-id span{display:block;margin-top:3px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#8b8778}
#cw .cw-id .sp{margin-left:auto;display:flex;gap:6px}
#cw .cw-id button{width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(13,13,15,.06);color:var(--ink-2);font-size:14px;transition:background .18s,color .18s}
#cw .cw-id button:hover{background:rgba(13,13,15,.12)}
#cw .cw-panel.quiet .cw-id .mute{background:var(--coral);color:#fff}

#cw .cw-say{flex:0 0 auto;height:46px;padding:0 18px;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;min-width:0}
#cw .cw-you{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:#a9a49a;display:none}
#cw .cw-you.on{display:block;animation:cwUp .3s cubic-bezier(.2,.7,.2,1) both}
#cw .cw-you{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
#cw .cw-you b{font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-2)}
#cw .cw-line{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
/* Each word arrives on its own, which is what makes her look like she is
   speaking rather than pasting. */
@keyframes cwUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#cw .cw-eq{display:none;align-items:flex-end;gap:3px;height:11px}
#cw .cw-panel.talking .cw-eq{display:inline-flex}
#cw .cw-eq i{width:3px;height:4px;border-radius:2px;background:var(--green);animation:cwEq .62s ease-in-out infinite}
#cw .cw-eq i:nth-child(2){animation-delay:.13s}#cw .cw-eq i:nth-child(3){animation-delay:.26s}
@keyframes cwEq{0%,100%{height:4px}50%{height:11px}}

#cw .cw-gate{position:absolute;left:14px;bottom:52px;z-index:5;
  display:none;align-items:center;gap:10px;
  padding:7px 16px 7px 7px;border:0;cursor:pointer;border-radius:var(--r-pill);
  color:#fff;background:rgba(9,7,13,.62);
  -webkit-backdrop-filter:blur(14px) saturate(.9);
          backdrop-filter:blur(14px) saturate(.9);
  box-shadow:0 2px 6px rgba(9,7,13,.22),0 16px 32px -16px rgba(9,7,13,.62);
  transition:background .2s,box-shadow .22s,transform .18s,
             padding .3s cubic-bezier(.2,.7,.2,1),gap .3s cubic-bezier(.2,.7,.2,1)}
#cw .cw-panel.idle .cw-gate,#cw .cw-panel.starting .cw-gate{display:inline-flex}
#cw .cw-gate:hover{background:rgba(9,7,13,.72);transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(9,7,13,.22),0 20px 38px -18px rgba(9,7,13,.7)}
#cw .cw-panel.idle .cw-stage:hover .cw-gate{background:rgba(9,7,13,.72)}
#cw .cw-gate:focus-visible{outline:0;
  box-shadow:0 0 0 2px rgba(9,7,13,.9),0 0 0 5px rgba(255,255,255,.96),
             0 10px 30px -14px rgba(9,7,13,.85)}
/* No backdrop-filter, no softening, so the tint has to carry more on its own. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  #cw .cw-gate{background:rgba(9,7,13,.74)}
}

#cw .cw-stop{position:absolute;right:14px;bottom:14px;z-index:5;
  display:none;align-items:center;gap:7px;
  height:28px;padding:0 13px 0 11px;border:0;cursor:pointer;border-radius:var(--r-pill);
  color:#fff;background:var(--hangup);
  box-shadow:0 2px 6px rgba(9,7,13,.26),0 14px 28px -14px rgba(178,60,30,.8);
  transition:background .2s,box-shadow .22s}
#cw .cw-panel.live .cw-stop,#cw .cw-panel.textonly .cw-stop{display:inline-flex;
  animation:cwUp .3s cubic-bezier(.2,.7,.2,1) .14s both}
#cw .cw-stop b{font-family:var(--body);font-weight:600;font-size:12.5px;
  letter-spacing:-.005em;line-height:1;white-space:nowrap}
#cw .cw-stop i{font-size:14px;line-height:1}
#cw .cw-stop:hover{background:#9C3419;
  box-shadow:0 2px 6px rgba(9,7,13,.28),0 18px 34px -14px rgba(178,60,30,.86)}
#cw .cw-stop:active{background:#8A2E16}
#cw .cw-stop:focus-visible{outline:0;
  box-shadow:0 0 0 2px rgba(9,7,13,.9),0 0 0 5px rgba(255,255,255,.96),
             0 10px 30px -14px rgba(9,7,13,.85)}

#cw .cw-gate .wv{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;gap:2.5px;
  box-shadow:0 2px 7px -3px rgba(9,7,13,.9)}
#cw .cw-gate .wv i{width:2.5px;height:5px;border-radius:2px;background:var(--coral)}
#cw .cw-gate:hover .wv i,#cw .cw-gate:focus-visible .wv i,#cw .cw-panel.starting .cw-gate .wv i{animation:cwEq .62s ease-in-out infinite}
#cw .cw-gate .wv i:nth-child(2){animation-delay:.13s}
#cw .cw-gate .wv i:nth-child(3){animation-delay:.26s}
#cw .cw-gate b{max-width:150px;overflow:hidden;white-space:nowrap;
  font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:-.005em;line-height:1;
  transition:max-width .3s cubic-bezier(.2,.7,.2,1),opacity .2s}

#cw .cw-panel.starting .cw-gate{cursor:default;padding:7px;gap:0;
  background:rgba(9,7,13,.74);-webkit-backdrop-filter:none;backdrop-filter:none}
#cw .cw-panel.starting .cw-gate b{max-width:0;opacity:0}

#cw .cw-claim{display:none;font-style:normal;font-family:var(--mono);font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:#8b8778;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:821px){
  #cw .cw-panel.idle .cw-claim,#cw .cw-panel.starting .cw-claim{display:block}
}
#cw.open .cw-panel.idle .cw-gate{animation:cwUp .34s cubic-bezier(.2,.7,.2,1) .46s both}

#cw .cw-invite{flex:0 0 auto;display:none;padding:13px 18px 14px;min-width:0}
/* Desktop puts the gate on her. Below 820px the stage is a 186px band and
   every part of it is her face: a control there measured 17% of its pixels
   under 4.5:1 and sat on her mouth, so the paper keeps it. Both exist, one
   shows, and the breakpoint decides. */
@media(min-width:821px){#cw .cw-invite{display:none!important}}
@media(max-width:820px){
  #cw .cw-gate{display:none!important}
  #cw .cw-panel.idle .cw-invite,#cw .cw-panel.starting .cw-invite{display:block}
  #cw .cw-panel.idle .cw-say,#cw .cw-panel.starting .cw-say{display:none}
}

#cw .cw-go{position:relative;width:100%;overflow:hidden;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:12px;padding:11px 16px 11px 11px;border-radius:17px;
  color:#fff;background:linear-gradient(168deg,#f4693f 0%,#ea4d2b 62%,#e0431f 100%);
  box-shadow:0 1px 1px rgba(74,22,8,.2),0 3px 8px -4px rgba(74,22,8,.4),
             0 16px 30px -14px rgba(239,86,55,.95);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .22s,filter .22s}
#cw .cw-go:hover{transform:translateY(-1px);
  box-shadow:0 1px 1px rgba(74,22,8,.2),0 5px 12px -5px rgba(74,22,8,.42),
             0 22px 38px -16px rgba(239,86,55,1)}
#cw .cw-go:active{transform:none;filter:brightness(.97)}
#cw .cw-go:focus-visible{outline:0;
  box-shadow:0 0 0 3px rgba(239,86,55,.34),0 16px 30px -14px rgba(239,86,55,.9)}
#cw .cw-go::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
  transform:skewX(-16deg);opacity:0}
#cw .cw-go:hover::after{opacity:1;animation:cwSheen .72s cubic-bezier(.3,.6,.3,1)}
@keyframes cwSheen{from{left:-60%}to{left:118%}}

#cw .cw-go .wv{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;gap:2.5px;
  box-shadow:0 2px 6px -2px rgba(74,22,8,.5)}
#cw .cw-go .wv i{width:2.5px;height:5px;border-radius:2px;background:var(--coral)}
#cw .cw-go:hover .wv i,#cw .cw-go:focus-visible .wv i,#cw .cw-panel.starting .cw-go .wv i{animation:cwEq .62s ease-in-out infinite}
#cw .cw-go .wv i:nth-child(2){animation-delay:.11s}
#cw .cw-go .wv i:nth-child(3){animation-delay:.22s}
#cw .cw-go .wv i:nth-child(4){animation-delay:.33s}

#cw .cw-go .lb,#cw .cw-go .lb2{min-width:0}
#cw .cw-go .lb2{display:none}
#cw .cw-panel.starting .cw-go .lb{display:none}
#cw .cw-panel.starting .cw-go .lb2{display:block}
#cw .cw-panel.starting .cw-go{cursor:default;filter:saturate(.74) brightness(.97)}
#cw .cw-go b{display:block;font-family:var(--body);font-weight:600;font-size:14.5px;
  letter-spacing:-.005em;line-height:1.2}
#cw .cw-go em{display:block;margin-top:3px;font-style:normal;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.74);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#cw .cw-panel.idle .cw-stage{cursor:pointer}

#cw .cw-fields{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}

#cw .cw-fields{flex:1;min-height:0;min-width:0;overflow-y:auto;padding:2px 18px 6px 30px;position:relative;
  display:flex;flex-direction:column;gap:9px;
  scrollbar-width:thin;scrollbar-color:#dcd9d1 transparent}
#cw .cw-fields::-webkit-scrollbar{width:6px}
#cw .cw-fields::-webkit-scrollbar-thumb{background:#dcd9d1;border-radius:3px}
#cw .cw-cue{position:absolute;left:12px;top:0;width:9px;height:9px;border-radius:2.5px;background:var(--coral);
  transform:rotate(45deg) scale(0);opacity:0;
  transition:transform .34s cubic-bezier(.3,1.4,.4,1),top .34s cubic-bezier(.4,0,.2,1),
             background .3s,opacity .25s}
#cw .cw-cue.on{opacity:1;transform:rotate(45deg) scale(1)}
#cw .cw-cue.done{background:var(--green)}
#cw .cw-f{position:relative}
#cw .cw-f label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:#8b8778;margin-bottom:5px}
#cw .cw-f input,#cw .cw-f textarea{width:100%;border:0;outline:0;border-radius:13px;padding:10px 13px;
  font-family:var(--body);font-size:14px;color:var(--ink);background:#fff;resize:none;
  box-shadow:0 1px 1px rgba(40,30,20,.05),0 6px 14px -12px rgba(40,30,20,.45);
  transition:box-shadow .2s}
#cw .cw-f input::placeholder,#cw .cw-f textarea::placeholder{color:#b8b3a8}
#cw .cw-f input:focus,#cw .cw-f textarea:focus{box-shadow:0 0 0 3px rgba(239,86,55,.24),0 4px 14px -6px rgba(40,30,20,.16)}
#cw .cw-f textarea{min-height:52px;line-height:1.45}
#cw .cw-f.auto input,#cw .cw-f.auto textarea{animation:cwFill .9s cubic-bezier(.2,.7,.2,1)}
@keyframes cwFill{
  0%{box-shadow:0 0 0 0 rgba(62,207,142,.55),0 1px 1px rgba(40,30,20,.05)}
  60%{box-shadow:0 0 0 8px rgba(62,207,142,0),0 1px 1px rgba(40,30,20,.05)}
  100%{box-shadow:0 1px 1px rgba(40,30,20,.05),0 6px 14px -12px rgba(40,30,20,.45)}}
#cw .cw-f .tick{position:absolute;right:10px;top:26px;width:17px;height:17px;border-radius:50%;
  background:var(--green);display:grid;place-items:center;opacity:0;transform:scale(.4);
  transition:opacity .3s,transform .32s cubic-bezier(.3,1.6,.5,1)}
#cw .cw-f.done .tick{opacity:1;transform:none}
#cw .cw-f .tick::after{content:"";width:7px;height:4px;border-left:2px solid #0f2a1e;border-bottom:2px solid #0f2a1e;
  transform:rotate(-45deg) translate(.5px,-1px)}
#cw .cw-f.done input,#cw .cw-f.done textarea{padding-right:32px}

#cw .cw-foot{flex:0 0 auto;padding:8px 18px 16px 30px;display:flex;flex-direction:column;gap:9px}
#cw .cw-ask{display:flex;align-items:center;gap:7px;min-width:0;padding:4px 4px 4px 6px;border-radius:var(--r-pill);
  background:#fff;box-shadow:0 1px 1px rgba(40,30,20,.05),0 6px 16px -12px rgba(40,30,20,.5)}
#cw .cw-ask input{flex:1;min-width:0;width:0;border:0;outline:0;background:none;padding:8px 4px;
  font-family:var(--body);font-size:13.5px;color:var(--ink)}
#cw .cw-ask input::placeholder{color:#b8b3a8}
#cw .cw-ask button{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:14px;transition:background .18s,transform .16s,color .18s}
#cw .cw-ask .mic{background:rgba(13,13,15,.06);color:var(--ink-2);display:none}
#cw .cw-panel.canhear .cw-ask .mic{display:grid}
#cw .cw-ask .mic:hover{background:rgba(13,13,15,.12)}
#cw .cw-panel.hearing .cw-ask .mic{background:var(--coral);color:#fff;animation:cwHear 1.4s ease-in-out infinite}
@keyframes cwHear{0%,100%{box-shadow:0 0 0 0 rgba(239,86,55,.5)}70%{box-shadow:0 0 0 9px rgba(239,86,55,0)}}
#cw .cw-ask .go{background:var(--coral);color:#fff}
#cw .cw-ask .go:hover:not(:disabled){background:var(--ink);transform:scale(1.06)}
#cw .cw-ask .go:disabled{opacity:.4;cursor:default}
#cw .cw-fine{display:block;text-align:center;font-style:normal;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.13em;text-transform:uppercase;color:#b8b3a8}
#cw .cw-submit{width:100%;border:0;cursor:pointer;border-radius:var(--r-pill);padding:12px 18px;
  font-family:var(--body);font-weight:600;font-size:14px;color:#fff;background:var(--coral);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 10px 22px -12px rgba(239,86,55,.9);transition:transform .16s,background .18s,opacity .2s}
#cw .cw-submit:hover:not(:disabled){background:var(--ink);transform:translateY(-1px)}
#cw .cw-submit:disabled{opacity:.42;cursor:default;box-shadow:none}

#cw .cw-done{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;
  justify-content:center;padding:20px 20px 16px;background:#fdfcf9}
#cw .cw-side.sent .cw-done{display:flex}

#cw .cw-rec{position:relative;background:#fff;border-radius:18px;padding:26px 20px 18px;
  box-shadow:0 1px 2px rgba(40,30,20,.06),0 10px 20px -14px rgba(40,30,20,.5),
             0 34px 60px -34px rgba(40,30,20,.5);
  animation:cwRec .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes cwRec{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
#cw .cw-seal{position:absolute;top:-19px;left:50%;transform:translateX(-50%) scale(.4);
  width:38px;height:38px;border-radius:50%;background:var(--green);display:grid;place-items:center;
  box-shadow:0 8px 18px -8px rgba(62,207,142,.9);opacity:0;
  animation:cwSeal .46s cubic-bezier(.3,1.6,.5,1) .18s forwards}
@keyframes cwSeal{to{opacity:1;transform:translateX(-50%) scale(1)}}
#cw .cw-seal::after{content:"";width:13px;height:7px;border-left:2.5px solid #0d2a1e;
  border-bottom:2.5px solid #0d2a1e;transform:rotate(-45deg) translate(1px,-2px)}

#cw .cw-rec h4{margin:0;text-align:center;font-family:var(--disp);font-weight:800;font-size:17px;
  letter-spacing:-.02em;animation:cwUp .34s cubic-bezier(.2,.7,.2,1) .26s both}
#cw .cw-rec .ref{display:block;text-align:center;margin-top:5px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.15em;text-transform:uppercase;color:#b4b0a6;
  animation:cwUp .34s cubic-bezier(.2,.7,.2,1) .3s both}

#cw .cw-rows{margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
#cw .cw-row{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:baseline;
  animation:cwUp .32s cubic-bezier(.2,.7,.2,1) both}
#cw .cw-row u{text-decoration:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8b8778}
#cw .cw-row s{text-decoration:none;font-size:13.5px;line-height:1.4;color:var(--ink);
  overflow-wrap:anywhere}
#cw .cw-row.byher u::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--green);margin-left:6px;vertical-align:middle}

#cw .cw-proof{margin:16px 0 0;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.35;
  color:#1a1720;text-align:center;animation:cwUp .34s cubic-bezier(.2,.7,.2,1) .58s both}
#cw .cw-route{margin:12px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:5px 8px;
  animation:cwUp .34s cubic-bezier(.2,.7,.2,1) .66s both}
#cw .cw-route span{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#8b8778;background:var(--paper-2);padding:5px 9px;border-radius:var(--r-pill)}
#cw .cw-done .go{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;border-radius:var(--r-pill);padding:12px 18px;background:var(--coral);color:#fff;
  font-family:var(--body);font-weight:600;font-size:14px;text-decoration:none;
  box-shadow:0 10px 22px -12px rgba(239,86,55,.9);transition:transform .16s,background .18s;
  animation:cwUp .34s cubic-bezier(.2,.7,.2,1) .74s both}
#cw .cw-done .go:hover{background:var(--ink);transform:translateY(-1px)}

@media(max-height:620px){
  #cw .cw-rec{padding:22px 18px 14px}
  #cw .cw-proof{display:none}
}

#cw.open .cw-stage{animation:cwFrame .38s cubic-bezier(.2,.7,.2,1) .18s both}
@keyframes cwFrame{from{clip-path:inset(8% 0 8% 0);opacity:.4}to{clip-path:inset(0);opacity:1}}
#cw.open .cw-id{animation:cwUp .3s cubic-bezier(.2,.7,.2,1) .28s both}
#cw.open .cw-say,#cw.open .cw-invite{animation:cwUp .3s cubic-bezier(.2,.7,.2,1) .34s both}
#cw.open .cw-fields{animation:cwUp .3s cubic-bezier(.2,.7,.2,1) .42s both}
#cw.open .cw-foot{animation:cwUp .3s cubic-bezier(.2,.7,.2,1) .5s both}

@media(max-width:820px){
  #cw .cw-panel{width:auto;max-width:none;--ph:min(600px,var(--cw-room));
    grid-template-columns:1fr;grid-template-rows:186px 1fr}
  #cw .cw-stage img,#cw .cw-stage video{object-position:center 18%}
  #cw .cw-sub{-webkit-line-clamp:1;max-height:18px;bottom:50px;font-size:12.5px}
  #cw .cw-veil{height:110px}
  #cw .cw-side{box-shadow:inset 0 22px 26px -24px rgba(58,44,30,.2)}
  #cw .cw-say{height:42px;padding:0 15px}
  #cw .cw-invite{padding:12px 15px 12px}
  #cw .cw-fields{padding:2px 15px 6px 27px}
  #cw .cw-foot{padding:8px 15px 14px 27px}
  #cw .cw-cue{left:10px}
}

@media(prefers-reduced-motion:reduce){
  #cw .cw-btn,#cw .cw-nudge,#cw .cw-panel,#cw .cw-cue,#cw .cw-f input,#cw .cw-f textarea,#cw .cw-go,#cw .cw-gate{transition:none;animation:none}
  #cw .cw-btn i.ping,#cw .cw-line span,#cw .cw-f.auto input,#cw .cw-f.auto textarea,#cw .cw-go::after,#cw .cw-go .wv i,#cw .cw-gate .wv i,#cw.open .cw-panel.idle .cw-gate,#cw.open .cw-stage,#cw.open .cw-id,#cw.open .cw-say,#cw.open .cw-invite,#cw.open .cw-fields,#cw.open .cw-foot{animation:none}
  #cw .cw-line span{opacity:1;transform:none}
}

/* THE CALL CLOCK, in the header beside the controls. Scoped under .cw-id and
   resetting b/s explicitly: the header styles b at 15.5px block and span at
   block with a top margin, and both were landing on this. */
#cw .cw-id .cw-clock{display:none;align-items:center;justify-content:center;gap:3px;
  margin:0 4px 0 0;padding:0 10px;height:30px;box-sizing:border-box;align-self:center;
  border-radius:var(--r-pill);background:rgba(13,13,15,.06);color:var(--ink-2);
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;line-height:1;
  white-space:nowrap;text-transform:none;transition:background .3s,color .3s}
#cw .cw-panel.live .cw-id .cw-clock{display:inline-flex}
#cw .cw-id .cw-clock b,
#cw .cw-id .cw-clock s{display:inline;margin:0;line-height:1;font-family:var(--mono);
  font-size:9px;letter-spacing:.06em;text-transform:none;color:inherit}
#cw .cw-id .cw-clock b{font-weight:700}
#cw .cw-id .cw-clock s{text-decoration:none;opacity:.5}
#cw .cw-id .cw-clock.warn{background:var(--coral);color:#fff}
#cw .cw-id .cw-clock.warn s{opacity:.72}
#cw .cw-id .cw-clock.warn b{animation:cwPulse 1.4s ease-in-out infinite}
@keyframes cwPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* The spoken warning, written down too. Sits above the caption, never over her
   face, and leaves on its own. */
/* At the TOP of the stage: at the bottom it landed on the caption, which
   lives at bottom:52px, and covered the words she was saying. */
#cw .cw-note{position:absolute;left:14px;right:14px;top:14px;z-index:4;
  padding:10px 13px;border-radius:14px;background:rgba(12,10,16,.78);backdrop-filter:blur(12px);
  color:#fff;font-size:12.5px;line-height:1.45;opacity:0;transform:translateY(-6px);
  pointer-events:none;transition:opacity .28s,transform .28s}
#cw .cw-note.on{opacity:1;transform:none}
#cw .cw-note b{font-weight:700}