/* 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; inset:0; 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 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{opacity:0;transform:scale(1.2) translateY(-4.4%);transition:opacity .18s linear}
.hc-pet.mood video{opacity:1}
.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}
.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)}}
.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.go{border:0;color:#fff;background:var(--ink)}
.hc-btn.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(.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.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}

/* 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}
.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;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}

@media (max-width:640px){
  .hc{font-size:16px}
  .hc-pill .long{display:none}
  .hc-pill{padding:0 12px 0 10px}
  .hc-list{--col:calc(100% - 24px)}
  .hc-dockwrap,.hc-chips{width:calc(100% - 20px)}
  .hc-chip{height:38px;padding:0 13px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .hc *,.hc *::before,.hc *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}