/* Hackly's web chat. Premium tech: a flat page, hairline borders, solid surfaces, one accent (the mascot's blue). Hackly is
   alive through the mascot and crisp motion, not decoration: a slow grid drift, a thin progress line while it works. You are
   ink (the dock, what you sent); Hackly speaks on white. Every class is .hc-*, so the landing page's styles never reach in. */
.hc{
  --paper:#fff; --mist:#f4f4f5; --line:#e6e6e9; --ink:#0a0a0b; --graphite:#5b5b64; --faint:#94949e;
  --signal:#1f5bff; --signal-soft:#eef3ff; --ok:#16a34a; --tg:#2aabee;
  --fur:#1f5bff; --lav:#5b8cff; --aqua:#8fb0ff; --gum:#ff4d5e; --sun:#ffcf4a; --mint:#16a34a;
  --glass:#fff; --glass-edge:var(--line);
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.22,1.15,.4,1); --bounce:cubic-bezier(.3,1.5,.5,1);
  --col:min(720px,100% - 32px);
  --lvl:0;
  position:fixed; left:0; right:0; top:var(--vt,0px); height:var(--vh,100%); z-index:1000; display:flex; flex-direction:column;
  background:#fafafa; color:var(--ink);
  font-family:"Host Grotesk",-apple-system,"Helvetica Neue",sans-serif; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; letter-spacing:-.005em; overflow:hidden; isolation:isolate;
}
.hc *,.hc *::before,.hc *::after{box-sizing:border-box}
:where(.hc button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hc :focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:14px}
.hc[hidden]{display:none}
/* the landing page behind an open chat is out of layout (chat.js solo()): nothing of it can widen the page on iOS */
html.hc-solo body>:not(.hc):not(.hc-morph):not(.hc-bit){display:none!important}
html.hc-solo,html.hc-solo body{overflow:hidden!important;height:100%}
/* the on-screen keyboard (chat.js sets .hc-kb and --vh/--vt from visualViewport, only while it is up): iOS Safari does not shrink
   the page for the keyboard, it pans the page up behind it, so the chat is sized to what is actually visible. The conversation must keep
   room, so everything that is not the conversation or the dock gives way while you type. */
.hc.hc-kb .hc-chips,.hc.hc-kb .hc-hero{display:none}
.hc.hc-kb .hc-top{padding-top:8px;padding-bottom:2px}
.hc.hc-kb .hc-foot{padding:6px 0 8px}
.hc.hc-kb .hc-list{padding-bottom:16px}
.hc.hc-kb .hc-jump{display:none}

/* ---------------------------------------------------------------- the page behind */
.hc-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* a faint grid that fades out toward the bottom and drifts slowly (transform only, so it costs nothing) */
.hc-grid{position:absolute;left:0;right:0;top:-56px;bottom:0;
  background-image:linear-gradient(rgba(10,10,11,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,11,.045) 1px,transparent 1px);
  background-size:56px 56px;animation:hc-grid 14s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000,transparent 80%);mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000,transparent 80%)}
@keyframes hc-grid{to{transform:translateY(56px)}}
/* one soft accent behind the mascot; it breathes, and swells with your voice */
.hc-aura{position:absolute;left:50%;top:-18vh;width:min(900px,120vw);height:60vh;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(31,91,255,.13),transparent);opacity:.8;transform:scale(calc(1 + var(--lvl) * .25));
  animation:hc-aura 6s ease-in-out infinite alternate;transition:transform .12s linear}
@keyframes hc-aura{to{opacity:1;scale:1.08}}
/* while Hackly works, a thin line runs across the top */
.hc-run{position:absolute;left:0;right:0;top:0;height:2px;z-index:5;overflow:hidden;opacity:0;transition:opacity .3s;pointer-events:none}
.hc-run::before{content:"";position:absolute;inset:0;width:38%;background:linear-gradient(90deg,transparent,var(--signal),transparent);animation:hc-run 1.3s cubic-bezier(.5,0,.5,1) infinite}
.hc[data-busy] .hc-run{opacity:1}
@keyframes hc-run{from{transform:translateX(-100%)}to{transform:translateX(265%)}}

/* ---------------------------------------------------------------- top */
.hc-top{position:relative;z-index:3;display:flex;align-items:center;gap:10px;width:min(1040px,100% - 24px);margin:0 auto;
  padding:14px 0 6px;padding-top:max(14px,env(safe-area-inset-top))}
.hc-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.hc-mark{font-weight:700;font-size:22px;letter-spacing:-.045em}
.hc-state{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:var(--glass);
  border:1px solid var(--line);
  font-size:13px;font-weight:500;color:var(--graphite);white-space:nowrap;transition:color .3s}
.hc-state i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:hc-ping 2.4s infinite}
.hc[data-busy] .hc-state{color:var(--signal)}
.hc[data-busy] .hc-state i{background:var(--signal);animation:hc-ping-b 1.1s infinite}
@keyframes hc-ping{70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@keyframes hc-ping-b{0%{box-shadow:0 0 0 0 rgba(31,91,255,.55)}70%{box-shadow:0 0 0 8px rgba(31,91,255,0)}100%{box-shadow:0 0 0 0 rgba(31,91,255,0)}}
.hc-state b{font-weight:500;display:inline-block;animation:hc-word-in .4s var(--ease)}
.hc-acts{display:flex;align-items:center;gap:8px}
.hc-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px 0 11px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font-size:14px;font-weight:500;transition:transform .25s var(--spring),border-color .2s}
.hc-pill:hover{transform:translateY(-1px);border-color:#c9c9d0}
.hc-pill svg{width:20px;height:20px;flex:none}
.hc-round{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);
  transition:transform .25s var(--spring),border-color .2s}
.hc-round:hover{transform:scale(1.06);border-color:#c9c9d0}
.hc-round svg{width:16px;height:16px}

/* ---------------------------------------------------------------- Hackly himself */
.hc-pet{position:relative;width:var(--pet,64px);aspect-ratio:360/391;transform-origin:50% 100%;cursor:pointer;
  animation:hc-breathe 3.4s ease-in-out infinite}
.hc-pet>*{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
/* inset first: as a shorthand it would reset left/top, and the blink patch would land in the mascot's top-left corner */
.hc-pet .blink{inset:auto;left:23.95%;top:23.9%;width:49.78%;height:15.09%;opacity:0}
.hc-pet.blinking .blink{opacity:1}
/* the sticker is a 512 square drawn smaller than the still: this scale and lift put its body exactly over the still's, so the
   swap is a change of expression and nothing else (it used to be 1.32, a size jump and a cropped head) */
.hc-pet video,.hc-pet .hc-still{opacity:0;transform:scale(1.2) translateY(-4.4%);transition:opacity .18s linear}
.hc-pet.mood video,.hc-pet.mood .hc-still{opacity:1}
/* Safari's mood is a still pose (no webm there): before its first mood it has no src, and an <img> without one draws a
   broken-image frame over the face */
.hc-pet .hc-still:not([src]){display:none}
.hc-pet .face{transition:opacity .18s linear}
.hc-pet.mood .face,.hc-pet.mood .blink{opacity:0;transition:opacity .18s linear}
.hc-pet::after{content:"";position:absolute;left:12%;right:12%;bottom:-6%;height:12%;border-radius:50%;background:rgba(10,10,11,.16);filter:blur(5px);
  z-index:-1;animation:hc-shadow 3.4s ease-in-out infinite}
@keyframes hc-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
@keyframes hc-shadow{50%{transform:scaleX(1.06);opacity:.8}}
.hc-pet.hop{animation:hc-hop .7s var(--ease)}
@keyframes hc-hop{0%{transform:scale(1,1)}18%{transform:scale(1.08,.9)}45%{transform:translateY(-26%) scale(.95,1.06)}70%{transform:translateY(0) scale(1.06,.94)}85%{transform:scale(.99,1.01)}100%{transform:scale(1,1)}}
.hc-pet.wiggle{animation:hc-wiggle .6s var(--ease)}
@keyframes hc-wiggle{0%{transform:scale(1,1)}20%{transform:rotate(-7deg)}45%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}100%{transform:scale(1,1)}}
.hc-pet.lean{rotate:5deg;translate:3px 0;transition:rotate .4s var(--spring),translate .4s var(--spring)}
.hc-pet{transition:rotate .5s var(--spring),translate .5s var(--spring)}

/* ---------------------------------------------------------------- the conversation */
.hc-scroll{position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  mask-image:linear-gradient(transparent,#000 26px,#000 calc(100% - 34px),transparent)}
.hc-list{width:var(--col);margin:0 auto;padding:22px 0 56px;display:flex;flex-direction:column;gap:8px}
.hc-m{position:relative;max-width:100%}
.hc-h{align-self:flex-start;max-width:min(560px,92%);transform-origin:0 100%}
.hc-y{align-self:flex-end;max-width:min(500px,86%);transform-origin:100% 100%}
.hc-h+.hc-y,.hc-y+.hc-h,.hc-sys+.hc-m,.hc-m+.hc-sys{margin-top:14px}
.hc-m.new.hc-h{animation:hc-pop-h .45s var(--ease) both}
.hc-m.new.hc-y{animation:hc-pop-y .35s var(--ease) both}
@keyframes hc-pop-h{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes hc-pop-y{from{opacity:0;transform:translateY(12px) scale(.97)}}

.hc-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:17px;line-height:1.5}
.hc-text a{color:var(--signal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hc-w{display:inline-block;animation:hc-word-in .4s var(--ease) both}
@keyframes hc-word-in{from{opacity:0;transform:translateY(.35em)}}

/* Hackly speaks on white, with a hairline */
.hc-h .hc-text,.hc-glass{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(10,10,11,.04)}
.hc-h .hc-text{padding:12px 16px;border-radius:18px 18px 18px 5px}
/* you: ink */
.hc-y .hc-text{background:var(--ink);color:#fff;padding:12px 17px;border-radius:18px 18px 5px 18px}
.hc-y .hc-text a{color:#fff}
.hc-y.pending{opacity:.6}
.hc-y.failed .hc-text{background:#fff;color:var(--ink);border:1px dashed #e11d48}
.hc-retry{display:block;margin:6px 4px 0 auto;font-size:13px;color:#e11d48}
.hc-react{position:absolute;left:-12px;bottom:-12px;min-width:32px;height:32px;padding:0 6px;border-radius:999px;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;font-size:17px;box-shadow:0 2px 6px rgba(10,10,11,.1);
  animation:hc-pop-r .6s var(--bounce) both}
@keyframes hc-pop-r{from{transform:scale(0)}}
.hc-y:has(.hc-react){margin-bottom:14px}
.hc-else{font-size:12px;color:var(--faint);margin:4px 6px 0}
.hc-y .hc-else{text-align:right}

/* replying to a message: a button beside it (hover), a swipe (phone), the line quoted in the bubble */
.hc-rbtn{z-index:1;position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;display:grid;place-items:center;color:var(--graphite);
  opacity:0;transform:scale(.7);pointer-events:none;transition:opacity .15s,transform .3s var(--spring),color .15s}
.hc-rbtn svg{width:16px;height:16px}
.hc-h>.hc-rbtn{left:calc(100% + 8px)}
.hc-y>.hc-rbtn{right:calc(100% + 8px)}
/* the hover zone reaches across the gap to the button, so the mouse can get there */
@media (hover:hover){.hc-h::after,.hc-y::after{content:"";position:absolute;top:0;bottom:0;width:56px}.hc-h::after{left:100%}.hc-y::after{right:100%}}
@media (hover:hover){
  .hc-m:hover>.hc-rbtn,.hc-rbtn:focus-visible{opacity:1;transform:none;pointer-events:auto}
  .hc-rbtn:hover{color:var(--signal)}
}
.hc-m{transition:translate .2s var(--ease)}
.hc-m.armed::before{content:"";position:absolute;left:-44px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--signal-soft)}
.hc-m.flash .hc-text,.hc-m.flash .hc-card,.hc-m.flash .hc-file,.hc-m.flash .hc-voice,.hc-m.flash .hc-img{animation:hc-flash 1.3s var(--ease)}
@keyframes hc-flash{30%{box-shadow:0 0 0 4px rgba(31,91,255,.35)}}

.hc-quote{display:block;width:100%;text-align:left;margin:0 0 8px;padding:5px 10px;border-radius:10px;border-left:3px solid var(--signal);
  background:var(--signal-soft);color:var(--graphite);font-size:14px;line-height:1.35;white-space:normal;cursor:pointer}
.hc-quote b{display:block;font-size:13px;font-weight:600;color:var(--signal)}
.hc-quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hc-y .hc-text .hc-quote{background:rgba(255,255,255,.12);border-left-color:var(--aqua);color:rgba(255,255,255,.78)}
.hc-y .hc-text .hc-quote b{color:var(--aqua)}
.hc-quote.out{width:auto;max-width:100%;margin:0 0 4px}
.hc-y>.hc-quote.out{margin-left:auto}

/* the line above the dock while you write a reply */
.hc-replybar{position:relative;display:flex;align-items:center;gap:10px;margin:0 14px -16px;padding:10px 8px 26px 14px;border-radius:18px 18px 0 0;
  background:#17171a;color:#fff;border-left:3px solid var(--signal)}
.hc-replybar[hidden]{display:none}
/* pictures waiting for their words, above the box (pasted, dropped or picked) */
.hc-tray{display:flex;gap:8px;margin:0 14px -16px;padding:10px 12px 26px;border-radius:18px 18px 0 0;background:#17171a;overflow-x:auto}
.hc-tray[hidden]{display:none}
.hc-thumb{position:relative;flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.hc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hc-thumb button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,10,11,.72);color:#fff}
.hc-thumb button svg{width:12px;height:12px}
.hc-rico{display:grid;color:var(--aqua)}
.hc-rico svg{width:16px;height:16px}
.hc-rtxt{flex:1;min-width:0;line-height:1.3}
.hc-rtxt b{display:block;font-size:13px;font-weight:600;color:var(--aqua)}
.hc-rtxt span{display:block;font-size:14px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-rx{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;color:rgba(255,255,255,.7)}
.hc-rx:hover{background:rgba(255,255,255,.12);color:#fff}
.hc-rx svg{width:14px;height:14px}

/* a first visit: the hello is the page */
.hc-hero{display:none}
.hc.intro .hc-hero{display:block;--pet:min(170px,32vw);margin:0 0 10px -6px;animation:hc-drop .6s var(--ease) both}
@keyframes hc-drop{from{opacity:0;transform:translateY(-22px) scale(.92)}}
.hc.intro .hc-list{min-height:100%;justify-content:center;padding-bottom:10vh}
.hc.intro .hc-h .hc-text{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;
  font-size:clamp(28px,3.8vw,44px);line-height:1.1;letter-spacing:-.04em;font-weight:600}
.hc.intro .hc-h{max-width:100%}

/* at work: a glass bubble of jelly dots */
.hc-busy{align-self:flex-start;display:flex;align-items:center;gap:10px;height:42px;padding:0 16px 0 14px;border-radius:18px 18px 18px 5px;
  margin-top:12px;font-size:14px;color:var(--graphite);animation:hc-pop-h .4s var(--ease) both}
.hc-dots{display:flex;gap:5px}
.hc-dots i{width:9px;height:9px;border-radius:50%;animation:hc-jelly 1.05s ease-in-out infinite}
.hc-dots i{background:var(--signal)}
.hc-dots i:nth-child(2){animation-delay:.14s;opacity:.7}
.hc-dots i:nth-child(3){animation-delay:.28s;opacity:.4}
@keyframes hc-jelly{0%,70%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* ---------------------------------------------------------------- media */
.hc-sticker{display:block;width:150px;height:150px;object-fit:contain;animation:hc-drop .5s var(--ease) both}
.hc-gif{display:block;padding:6px 6px 22px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(10,10,11,.05);
  transition:transform .3s var(--spring)}
.hc-gif:hover{transform:translateY(-2px)}
.hc-gif video,.hc-gif img{display:block;width:min(260px,62vw);border-radius:12px;background:var(--mist)}
.hc-m.new .hc-gif{animation:hc-flip .5s var(--ease) both}
@keyframes hc-flip{from{opacity:0;transform:translateY(14px) scale(.96)}}
.hc-img{display:block;max-width:min(320px,100%);max-height:360px;border-radius:18px 18px 5px 18px;object-fit:cover}

/* files: Hackly's is a sheet of paper, yours is ink */
.hc-file{display:flex;align-items:center;gap:14px;padding:14px 18px 14px 14px;border-radius:18px;min-width:240px;max-width:340px;
  color:inherit;text-decoration:none;position:relative;overflow:hidden;transition:transform .35s var(--spring)}
a.hc-file:hover{transform:translateY(-2px)}
.hc-h .hc-file{border-radius:18px 18px 18px 5px}
.hc-y .hc-file{background:var(--ink);color:#fff;border-radius:18px 18px 5px 18px;margin-left:auto}
.hc-sheet{width:40px;height:50px;flex:none;position:relative;border-radius:7px;background:var(--signal-soft);
  box-shadow:0 0 0 1px rgba(31,91,255,.18) inset;overflow:hidden}
.hc-sheet::before{content:"";position:absolute;right:0;top:0;width:14px;height:14px;background:linear-gradient(225deg,var(--signal) 50%,#c7d6ff 50%);border-bottom-left-radius:4px}
.hc-sheet::after{content:attr(data-ext);position:absolute;left:6px;bottom:6px;font-size:9px;font-weight:700;color:var(--signal)}
.hc-y .hc-sheet{background:rgba(255,255,255,.1);box-shadow:none}
.hc-y .hc-sheet::after{color:#fff}
.hc-meta{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.hc-meta b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-meta small{font-size:13px;color:var(--faint)}
.hc-y .hc-meta small{color:rgba(255,255,255,.55)}
.hc-bar{position:absolute;left:0;bottom:0;height:3px;background:var(--signal);transition:width .2s linear}
.hc-cap{margin-top:8px}

/* voice notes */
.hc-voice{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:18px 18px 5px 18px;
  padding:8px 18px 8px 8px;min-width:240px}
.hc-play{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;flex:none;transition:transform .3s var(--spring)}
.hc-play:hover{transform:scale(1.08)}
.hc-play svg{width:14px;height:14px}
.hc-wave{display:flex;align-items:center;gap:2px;height:30px;flex:1}
.hc-wave i{width:3px;border-radius:2px;background:rgba(255,255,255,.35);min-height:3px}
.hc-wave i.on{background:#fff}
.hc-secs{font-size:13px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.hc-heard{font-size:14px;color:var(--graphite);margin:6px 8px 0;text-align:right;line-height:1.4}
.hc-heard.wait{background:linear-gradient(90deg,var(--faint) 30%,var(--ink) 50%,var(--faint) 70%) 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:hc-shine 1.4s linear infinite}
@keyframes hc-shine{to{background-position:-300% 0}}

/* ---------------------------------------------------------------- cards */
.hc-card{border-radius:18px 18px 18px 5px;padding:16px 18px;font-size:15.5px;line-height:1.5;overflow-wrap:anywhere}
.hc-card .pre,.hc-card details>div{white-space:pre-wrap}
.hc-card blockquote{margin:8px 0;padding:8px 12px;border-radius:10px;border-left:2px solid var(--signal);background:var(--mist);color:var(--graphite)}
.hc-card a{color:var(--signal)}
.hc-card code,.hc-card pre{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;background:var(--mist);border-radius:6px;padding:1px 5px}
.hc-card details{margin-top:8px;border-radius:12px;background:var(--mist);padding:2px 12px}
.hc-card summary{cursor:pointer;font-weight:600;font-size:14px;padding:8px 0;list-style:none;display:flex;align-items:center;gap:8px}
.hc-card summary::-webkit-details-marker{display:none}
.hc-card summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;margin:-3px 0 0 auto;transition:rotate .3s var(--spring)}
.hc-card details[open] summary::after{rotate:-135deg;margin-top:3px}
.hc-card details>div{padding:0 0 10px;color:var(--graphite)}
.hc-card.updated{animation:hc-glow 1.3s var(--ease)}
@keyframes hc-glow{from{box-shadow:0 0 0 3px rgba(31,91,255,.28)}}
/* a form question answered in the card itself (chat.js answerBox) */
.hc-ans{display:flex;align-items:center;gap:6px;margin-top:12px;padding:4px 4px 4px 16px;border-radius:999px;background:var(--mist);
  border:1px solid var(--line);white-space:normal;transition:border-color .2s,background .2s}
.hc-ans:focus-within{border-color:var(--ink);background:#fff}
.hc-ans input{flex:1;min-width:0;height:40px;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink)}
.hc-ans input::placeholder{color:var(--faint)}
.hc-ans .hc-send{width:40px;height:40px;background:var(--line);color:var(--faint);border:0;cursor:pointer;transition:transform .25s var(--spring),background .2s}
.hc-ans.typed .hc-send{background:var(--ink);color:#fff}
.hc-ans.sending{opacity:.55;pointer-events:none}
.hc-ans-sent{margin-top:12px;font-size:14px;color:var(--graphite);white-space:normal}
.hc-ans-sent b{color:var(--ink)}
.hc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;white-space:normal}
.hc-btn{height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:15px;font-weight:600;
  transition:transform .25s var(--spring),border-color .2s,background .2s}
.hc-btn:hover{transform:translateY(-1px);border-color:#bdbdc6}
.hc-btn:active{transform:scale(.97)}
.hc-btn.hc-go{border:0;color:#fff;background:var(--ink)}
.hc-btn.hc-go:hover{background:var(--signal)}
@keyframes hc-sheen{to{background-position:-200% 0}}
.hc-btn[disabled]{opacity:.5;pointer-events:none}
.hc-opts{flex-direction:column;align-items:stretch}
.hc-opt{display:flex;align-items:center;gap:10px;text-align:left;font-weight:500}
.hc-opt:not(.hc-go)::before{content:"";flex:none;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line);
  transition:background .2s,border-color .2s}
.hc-opts.one .hc-opt::before{border-radius:50%}
.hc-opt.on{border-color:var(--ink)}
.hc-opt.on::before{border-color:var(--ink);background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.hc-opt.hc-go{justify-content:center;font-weight:600}

/* Hackly at work: a capsule whose edge turns while it runs */
.hc-live{position:relative;display:inline-flex;align-items:center;gap:10px;padding:11px 16px 11px 13px;border-radius:16px;max-width:100%;
  background:#fff;border:1px solid var(--line);isolation:isolate;overflow:hidden;font-size:14.5px}
/* a line of accent runs along the bottom edge while it works, and settles green when done */
.hc-live::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--signal),transparent) 0/40% 100% no-repeat;
  animation:hc-slide 1.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes hc-slide{from{background-position:-60% 0}to{background-position:160% 0}}
.hc-live.done::before{animation:none;background:var(--ok);opacity:.7}
.hc-live .spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(31,91,255,.18);border-top-color:var(--signal);animation:hc-spin .8s linear infinite;flex:none}
.hc-live.done .spin{border:0;background:var(--ok);display:grid;place-items:center;animation:hc-pop-r .5s var(--bounce)}
.hc-live.done .spin::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;rotate:45deg;margin-top:-2px}
.hc-chipset{display:flex;flex-wrap:wrap;gap:6px}
.hc-src{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;background:var(--signal-soft);color:#1b3fb3;font-size:13px;font-weight:500;
  animation:hc-pop-r .45s var(--bounce) both}
.hc-src b{font-variant-numeric:tabular-nums;font-weight:700}
.hc-secs-live{color:var(--faint);font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}

/* the plan, step by step */
.hc-steps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.hc-steps li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;white-space:normal}
.hc-steps .ic{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:1px;font-size:12px}
.hc-steps .done .ic{background:var(--ok);animation:hc-pop-r .5s var(--bounce) both}
.hc-steps .done .ic::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;rotate:45deg;margin-top:-2px}
.hc-steps .doing .ic{border:2px solid rgba(31,91,255,.18);border-top-color:var(--signal);animation:hc-spin .8s linear infinite}
.hc-steps .doing span{background:linear-gradient(90deg,var(--ink) 30%,var(--faint) 50%,var(--ink) 70%) 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hc-shine 1.8s linear infinite}
.hc-steps .todo .ic{border:1.5px dashed #c9c9d1}
.hc-steps .todo span{color:var(--faint)}
.hc-steps .you .ic{background:var(--sun)}
.hc-steps .skip .ic{background:#e6e6e9}
.hc-head{font-weight:600;font-size:16px;display:flex;align-items:center;gap:8px}

/* a job */
.hc-job{padding:0;overflow:hidden;width:min(460px,100%)}
.hc-job .top{display:flex;gap:14px;align-items:center;padding:16px 18px 12px}
.hc-logo{width:48px;height:48px;border-radius:15px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:20px;letter-spacing:-.03em;
  box-shadow:0 1px 2px rgba(10,10,11,.2)}
.hc-job .who{min-width:0;flex:1;line-height:1.25}
.hc-job .who b{display:block;font-size:17px;font-weight:650;letter-spacing:-.015em}
.hc-job .who small{display:block;color:var(--graphite);font-size:14px;margin-top:2px}
.hc-ring{width:54px;height:54px;flex:none;position:relative}
.hc-ring svg{width:100%;height:100%;rotate:-90deg}
.hc-ring circle{fill:none;stroke-width:5}
.hc-ring .track{stroke:rgba(10,10,11,.07)}
.hc-ring .val{stroke:url(#hc-grad);stroke-linecap:round;transition:stroke-dashoffset 1.2s var(--ease)}
.hc-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.hc-ring small{position:absolute;bottom:-14px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--faint)}
.hc-flag{display:inline-flex;align-items:center;gap:6px;margin:0 18px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:rgba(255,207,74,.22);color:#8a5a00}
.hc-flag.yes{background:rgba(22,163,74,.12);color:#126b36}
.hc-flag.no{background:#efeff1;color:var(--graphite)}
.hc-job .body{padding:10px 18px 4px;font-size:15px}
.hc-job>.hc-btns{padding:8px 18px 18px;margin-top:0}
.hc-job.decided .body{display:none}
.hc-job.decided{width:min(380px,100%)}
.hc-job.decided .top{padding-bottom:6px}
.hc-job.decided .hc-flag{margin-bottom:14px}

/* the card step: a dark membership card, not a bill */
.hc-pass{position:relative;margin-top:12px;width:min(340px,100%);aspect-ratio:1.62;border-radius:18px;padding:18px 20px;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 90% at 100% 0%,rgba(31,91,255,.75),transparent 60%),#0a0a0b;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 18px 32px -20px rgba(10,10,11,.7);display:flex;flex-direction:column;justify-content:space-between;transition:transform .4s var(--spring)}
.hc-pass:hover{transform:translateY(-3px)}
.hc-pass::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 47%,transparent 59%);
  background-size:250% 100%;animation:hc-sheen 4s ease-in-out infinite}
.hc-pass .lbl{font-size:13px;opacity:.7;font-weight:500}
.hc-pass .big{font-size:30px;font-weight:700;letter-spacing:-.04em;line-height:1}
.hc-pass .big small{font-size:15px;font-weight:500;opacity:.75;letter-spacing:0}
.hc-pass img{position:absolute;right:-10px;bottom:-20px;width:100px;z-index:-1;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.hc-pass a{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;background:#fff;color:var(--ink);
  font-weight:600;font-size:15px;text-decoration:none;transition:transform .25s var(--spring)}
.hc-pass a:hover{transform:scale(1.04)}
.hc-pass a svg{width:13px;height:13px}

/* a Pathways report: three figures, each with what it is a share of, and the report itself (chat.js pathwaysCard) */
.hc-pw{width:min(440px,100%)}
.hc-pw-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:var(--graphite)}
.hc-pw-kind{font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--signal)}
.hc-pw-n{font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-pw-n b{color:var(--ink)}
.hc-pw-title{font-size:17px;font-weight:650;letter-spacing:-.015em;line-height:1.25;margin-top:4px}
.hc-pw-head{color:var(--graphite);margin-top:6px}
.hc-pw-figs{display:grid;gap:8px;margin-top:12px}
.hc-pw-fig{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:baseline;padding:10px 12px;border-radius:12px;
  background:var(--mist);animation:hc-pw-in .5s var(--ease) both}
.hc-pw-fig>b{grid-row:span 2;font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:3.2ch}
.hc-pw-fig>span{font-size:14.5px;line-height:1.3}
.hc-pw-fig>small{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.hc-pw-fig .bar{grid-column:1/-1;display:block;height:4px;margin-top:8px;border-radius:4px;background:rgba(10,10,11,.07);overflow:hidden}
.hc-pw-fig .bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--fur),var(--lav));transition:width 1.1s var(--ease)}
.hc-pw-open{display:inline-flex;align-items:center;gap:8px;height:40px;margin-top:14px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff!important;
  font-weight:600;font-size:14.5px;text-decoration:none;transition:transform .25s var(--spring)}
.hc-pw-open:hover{transform:scale(1.03)}
.hc-pw-open svg{width:12px;height:12px}
@keyframes hc-pw-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hc-pw-fig{animation:none}.hc-pw-fig .bar i{transition:none}}

/* onto their phone: WhatsApp or Telegram */
.hc-connect{width:min(440px,100%)}
.hc-connect .sub{color:var(--graphite);font-size:14.5px;margin:2px 0 12px}
.hc-apps{display:grid;grid-template-columns:1fr 1fr;gap:10px;white-space:normal}
.hc-app{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--line);
  color:inherit;text-decoration:none;transition:transform .35s var(--spring),border-color .2s,box-shadow .3s;cursor:pointer}
.hc-app:hover{transform:translateY(-2px);border-color:#bdbdc6}
.hc-app.on{border-color:var(--signal)}
.hc-app svg{width:34px;height:34px}
/* invite friends: the header's gift pill, and a pass with their link, a copy button and the counts (chat.js inviteSheet) */
.hc-invite-btn svg{color:var(--signal)}
.hc-invite{width:360px;max-width:100%;aspect-ratio:auto;min-height:222px;gap:6px;justify-content:flex-start;padding:20px 20px 16px;
  background:radial-gradient(90% 90% at 100% 0%,rgba(91,140,255,.8),transparent 62%),radial-gradient(70% 70% at 0% 100%,rgba(255,207,74,.22),transparent 60%),#0a0a0b}
.hc-invite:hover{transform:none}
.hc-invite .lbl{display:flex;align-items:center;gap:8px}
.hc-ifree{padding:2px 8px;border-radius:999px;background:var(--sun);color:var(--ink);font-size:11.5px;font-weight:700;opacity:1}
.hc-invite .big{margin-top:8px;font-size:27px}
.hc-invite .sub{font-size:14px;line-height:1.45;color:rgba(255,255,255,.72);max-width:31ch;margin-bottom:6px}
.hc-ilink{display:flex;align-items:center;gap:6px;height:44px;padding:0 4px 0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);margin-right:56px}
.hc-ilink span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-variant-numeric:tabular-nums;user-select:all}
.hc-icopy{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 11px;border:0;border-radius:999px;background:#fff;color:var(--ink);
  font:inherit;font-size:14px;cursor:pointer;transition:transform .25s var(--spring),background .2s}
.hc-icopy b{font-weight:600}
.hc-icopy svg{width:15px;height:15px}
.hc-icopy:hover{transform:scale(1.04)}
.hc-icopy.on{background:var(--ok);color:#fff}
.hc-ishare{align-self:flex-start;margin-top:4px;padding:4px 0;background:none;border:0;font:inherit;font-size:13.5px;color:rgba(255,255,255,.75);
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;cursor:pointer}
.hc-ishare:hover{color:#fff}
.hc-invite .foot{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:auto;padding-top:14px;padding-right:76px;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.hc-invite .foot span{white-space:nowrap}
.hc-invite img{width:92px;bottom:-22px}
/* saving the chat: the header pill, and the card with Google's button and the emailed code */
.hc-save.on{color:var(--ok);border-color:rgba(22,163,74,.35)}
/* the sign-in is a pass like the card step's: dark, the sheen, the face; Google's white pill or the emailed code on it,
   and once saved it turns over to show who it is saved to */
.hc-signin{width:360px;max-width:100%;aspect-ratio:auto;min-height:222px;gap:6px;justify-content:flex-start;padding:20px 20px 16px}
.hc-signin:hover{transform:none}
.hc-signin .big{margin-top:8px}
.hc-signin .sub{font-size:14px;line-height:1.45;color:rgba(255,255,255,.72);max-width:30ch;margin-bottom:6px}
.hc-signin .sub b{color:#fff;font-weight:600;overflow-wrap:anywhere}
.hc-signin .lbl{display:flex;align-items:center;gap:8px}
.hc-signin .tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#fff;font-size:11px;font-weight:700;opacity:1}
.hc-signin .foot{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;padding-right:76px;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.hc-signin .foot span{white-space:nowrap}
.hc-signin img{width:92px;bottom:-22px}
.hc-signin.saved{background:radial-gradient(90% 90% at 100% 0%,rgba(22,163,74,.55),transparent 60%),radial-gradient(70% 70% at 0% 100%,rgba(31,91,255,.35),transparent 60%),#0a0a0b}
.hc-signin.flip{animation:hc-flip .7s var(--spring) both}
@keyframes hc-flip{from{transform:perspective(900px) rotateY(-100deg);opacity:.2}to{transform:none;opacity:1}}
.hc-gbtn{min-height:44px;margin:4px 0 2px;color-scheme:light}
.hc-alt{align-self:flex-start;padding:4px 0;background:none;border:0;font:inherit;font-size:13.5px;color:rgba(255,255,255,.7);text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;cursor:pointer}
.hc-alt:hover{color:#fff}
.hc-email{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;white-space:normal}
.hc-email input{flex:1 1 180px;min-width:0;height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);
  font:inherit;font-size:16px;color:#fff;transition:border-color .2s,background .2s}
.hc-email input::placeholder{color:rgba(255,255,255,.4)}
.hc-email input:focus{outline:none;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}
.hc-email input[name=code]{letter-spacing:.3em;font-variant-numeric:tabular-nums}
.hc-signin .hc-email .hc-go{flex:none;height:44px;padding:0 18px;border-radius:999px;background:#fff;color:var(--ink);border:0;font-weight:600}
.hc-note{flex-basis:100%;font-size:12.5px;color:rgba(255,255,255,.55)}
.hc-note b{color:#fff}
.hc-note:empty{display:none}
.hc-note button{background:none;border:0;padding:0;font:inherit;color:#fff;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hc-err{margin:6px 60px 0 0;padding:10px 12px;border-radius:12px;background:rgba(255,77,94,.14);font-size:13.5px;color:#ffb3bb;white-space:normal}
.hc-err .hc-btns{margin-top:10px}
.hc-signin .hc-err .hc-btn{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.hc-signin .hc-err .hc-go{background:#fff;color:var(--ink);border-color:#fff}
.hc-signin .hc-go:hover{background:#dfe7ff}
.hc-signin [hidden]{display:none}
.hc-app b{font-size:16px;font-weight:650}
.hc-app small{font-size:12.5px;color:var(--faint)}
.hc-app.off{opacity:.55;cursor:default}
.hc-app.off:hover{transform:none;box-shadow:none}
.hc-qr{display:flex;gap:16px;align-items:center;margin-top:12px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--line);white-space:normal;animation:hc-pop-y .5s var(--spring)}
.hc-qr[hidden]{display:none}
.hc-qr .code{width:132px;height:132px;flex:none}
.hc-qr .code svg{width:100%;height:100%;display:block}
.hc-qr .how{display:flex;flex-direction:column;gap:4px;font-size:13.5px;line-height:1.4}
.hc-qr .how b{font-size:15px}
.hc-qr .how small{color:var(--graphite);font-size:13px}
.hc-qr .how a{color:var(--signal);font-weight:500;margin-top:4px;text-decoration:none}

.hc-sys{align-self:center;font-size:13px;color:var(--graphite);padding:6px 14px;border-radius:999px;display:flex;gap:6px;align-items:center}

/* ---------------------------------------------------------------- the dock */
.hc-foot{position:relative;z-index:3;padding:10px 0 max(16px,env(safe-area-inset-bottom))}
.hc-chips{width:var(--col);margin:0 auto 12px;display:flex;gap:8px;flex-wrap:wrap}
.hc-chips[hidden]{display:none}
.hc-chip{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:14.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px;
  transition:transform .35s var(--spring)}
.hc-chip:hover{transform:translateY(-2px);border-color:#bdbdc6}
.hc-chip .e{font-size:16px}
.hc.intro .hc-chip{animation:hc-pop-y .6s var(--spring) both}
.hc.intro .hc-chip:nth-child(2){animation-delay:.08s}.hc.intro .hc-chip:nth-child(3){animation-delay:.16s}
.hc-dockwrap{position:relative;width:var(--col);margin:0 auto}
.hc-dock{position:relative;min-height:60px;border-radius:30px;background:var(--ink);color:#fff;display:flex;align-items:flex-end;gap:4px;padding:8px;
  box-shadow:0 0 0 1px rgba(10,10,11,.9),0 18px 36px -20px rgba(10,10,11,.55);transition:border-radius .3s var(--ease),box-shadow .25s;isolation:isolate;z-index:1}
/* when you write, the dock takes a ring of the accent; when you speak, the ring swells with your voice */
.hc-dock:focus-within{box-shadow:0 0 0 1px var(--signal),0 0 0 4px rgba(31,91,255,.2),0 18px 36px -20px rgba(10,10,11,.55)}
.hc-dock.recording{box-shadow:0 0 0 1px var(--signal),0 0 0 calc(3px + var(--lvl) * 7px) rgba(31,91,255,.28),0 18px 36px -20px rgba(10,10,11,.55)}
.hc-dock.tall{border-radius:24px}
.hc-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;color:rgba(255,255,255,.75);transition:background .2s,color .2s}
.hc-ico:hover{background:rgba(255,255,255,.1);color:#fff}
.hc-ico svg{width:20px;height:20px}
.hc-input{flex:1;min-width:0;overscroll-behavior:contain;background:transparent;border:0;outline:0;resize:none;color:#fff;font:inherit;font-size:17px;line-height:1.45;
  padding:11px 6px;max-height:180px;caret-color:#fff}
.hc-input::placeholder{color:rgba(255,255,255,.42)}
.hc .hc-input:focus-visible{outline:0}
.hc-send{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--ink);
  background:#fff;transition:transform .25s var(--spring),background .2s}
.hc-send:hover{transform:scale(1.06)}
.hc-send svg{width:18px;height:18px}
.hc-dock:not(.typed) .hc-send.text,.hc-dock.typed .hc-send.mic{display:none}
.hc-dock .hc-send.mic{background:rgba(255,255,255,.1);color:#fff}
.hc-dock .hc-send.mic:hover{background:rgba(255,255,255,.18)}
.hc-dock.typed .hc-send.text{animation:hc-pop-r .35s var(--bounce)}
/* min-width:0 all the way down: a flex item will not shrink below its content, and the level bars are the content,
   so without it a long recording pushed the send button out of the dock */
.hc-rec{display:none;flex:1;min-width:0;align-items:center;gap:12px;height:44px;padding:0 6px}
.hc-dock.recording .hc-rec{display:flex}
.hc-dock.recording .hc-input,.hc-dock.recording .hc-send,.hc-dock.recording .hc-attach{display:none}
.hc-recdot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--gum);animation:hc-ping-b 1.2s infinite}
.hc-levels{flex:1;min-width:0;height:34px;display:flex;align-items:center;justify-content:flex-end;gap:2px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);mask-image:linear-gradient(90deg,transparent,#000 24px)}
.hc-levels i{width:3px;border-radius:2px;background:#fff;min-height:3px;flex:none}
.hc-clock{font-size:15px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);min-width:38px;flex:none}
.hc-stop{display:none}
.hc-dock.recording .hc-stop{display:grid}

.hc-jump{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,8px);width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .35s var(--spring)}
.hc-jump.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.hc-jump svg{width:16px;height:16px}

/* drop a CV anywhere */
.hc-drop{position:absolute;inset:12px;z-index:6;border-radius:24px;display:grid;place-items:center;text-align:center;opacity:0;pointer-events:none;
  background:rgba(250,250,250,.94);border:1.5px dashed var(--signal);transition:opacity .2s}
.hc.dragging .hc-drop{opacity:1}
.hc-drop .hc-pet{--pet:120px;margin:0 auto 12px}
.hc-drop b{display:block;font-size:clamp(28px,4vw,46px);font-weight:700;letter-spacing:-.04em}
.hc-drop small{color:var(--graphite);font-size:15px}

.hc-toast{position:absolute;left:50%;top:70px;z-index:7;transform:translate(-50%,-14px) scale(.9);background:var(--ink);color:#fff;font-size:14px;font-weight:500;
  padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .45s var(--spring);max-width:calc(100% - 32px)}
.hc-toast.on{opacity:1;transform:translate(-50%,0)}

/* confetti */
.hc-bit{position:fixed;z-index:1002;width:8px;height:12px;border-radius:2px;pointer-events:none}

/* the way in: content arrives once the page has opened */
.hc.opening .hc-top,.hc.opening .hc-scroll,.hc.opening .hc-chips{opacity:0;transform:translateY(14px)}
.hc.opening .hc-dock{opacity:0}
.hc .hc-top,.hc .hc-scroll,.hc .hc-chips{transition:opacity .45s var(--ease),transform .6s var(--ease)}
.hc .hc-scroll{transition-delay:.05s}.hc .hc-chips{transition-delay:.12s}
.hc-morph{position:fixed;z-index:1001;background:#0a0a0b;border-radius:999px;pointer-events:none}

/* a phone: the scale of a WhatsApp or Instagram chat, so one screen holds a conversation and not three bubbles. The box you type
   in stays at 16px: under that, iOS zooms the whole page when it is tapped */
@media (max-width:640px){
  .hc{font-size:15px;line-height:1.4}
  .hc-top{width:calc(100% - 20px);gap:8px;padding:8px 0 4px;padding-top:max(8px,env(safe-area-inset-top))}
  .hc-mark{font-size:19px}
  .hc-state{height:26px;padding:0 10px 0 8px;font-size:12px;gap:6px}
  .hc-pill .long{display:none}
  .hc-pill{height:34px;padding:0 10px 0 8px}
  .hc-pill svg{width:18px;height:18px}
  .hc-round{width:34px;height:34px}
  .hc-list{--col:calc(100% - 20px);padding:14px 0 32px;gap:4px}
  .hc-h{max-width:85%}
  .hc-y{max-width:80%}
  .hc-h+.hc-y,.hc-y+.hc-h,.hc-sys+.hc-m,.hc-m+.hc-sys{margin-top:10px}
  .hc-text{font-size:15px;line-height:1.4}
  .hc-h .hc-text{padding:8px 12px;border-radius:16px 16px 16px 4px}
  .hc-y .hc-text{padding:8px 12px;border-radius:16px 16px 4px 16px}
  .hc-quote{font-size:13px}
  .hc.intro .hc-hero{--pet:84px;margin:0 0 6px -4px}
  .hc.intro .hc-h .hc-text{font-size:22px;line-height:1.2;letter-spacing:-.03em}
  .hc-busy{height:36px;margin-top:8px;font-size:13px}
  .hc-card{padding:12px 14px;font-size:14.5px;line-height:1.4;border-radius:16px 16px 16px 4px}
  .hc-head{font-size:15px}
  .hc-btns{margin-top:10px;gap:6px}
  .hc-btn{height:38px;padding:0 14px;font-size:14px}
  .hc-file{min-width:0;max-width:100%;gap:10px;padding:10px 14px 10px 10px}
  .hc-sheet{width:32px;height:40px}
  .hc-voice{min-width:200px;padding:6px 14px 6px 6px}
  .hc-play{width:34px;height:34px}
  .hc-sticker{width:110px;height:110px}
  .hc-live{padding:8px 12px 8px 10px;font-size:13.5px}
  .hc-job .top{gap:12px;padding:12px 14px 10px}
  .hc-logo{width:40px;height:40px;border-radius:12px;font-size:17px}
  .hc-job .who b{font-size:15.5px}
  .hc-job .who small{font-size:13px}
  .hc-ring{width:46px;height:46px}
  .hc-flag{margin:0 14px}
  .hc-job .body{padding:8px 14px 4px;font-size:14px}
  .hc-job>.hc-btns{padding:6px 14px 14px}
  .hc-pass{width:min(300px,100%);padding:14px 16px}
  .hc-pass .big{font-size:26px}
  .hc-invite .big{font-size:23px}
  .hc-ilink{margin-right:0}
  .hc-pass img{width:84px}
  .hc-pass a{height:38px;padding:0 16px;font-size:14px}
  .hc-signin{padding:16px 16px 14px;min-height:0}
  .hc-signin .big{font-size:26px}
  .hc-pw-title{font-size:15.5px}
  .hc-pw-fig{padding:8px 10px}
  .hc-pw-fig>b{font-size:20px}
  .hc-pw-fig>span{font-size:13.5px}
  .hc-foot{padding:6px 0 max(10px,env(safe-area-inset-bottom))}
  .hc-chips{width:calc(100% - 20px);margin-bottom:8px;gap:6px}
  .hc-chip{height:32px;padding:0 12px;font-size:13.5px;gap:6px}
  .hc-chip .e{font-size:14px}
  .hc-dockwrap{width:calc(100% - 20px)}
  .hc-dock{min-height:48px;border-radius:24px;padding:4px}
  .hc-dock.tall{border-radius:20px}
  .hc-ico,.hc-send{width:40px;height:40px}
  .hc-input{font-size:16px;line-height:1.35;padding:9px 4px}
  .hc-rec{height:40px}
  .hc-jump{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .hc *,.hc *::before,.hc *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}