/* The main page's hero animation: a small screen with the lantern at its edge. It opens, takes a
   job, starts a helper and finishes it; each finished job lands as a task card. hero-anim.js
   moves .ha-stage through data-step; without it (or with reduced motion) the "done" state shows. */
.hero .hero-art.hero-anim { height: auto; overflow: visible; display: flex; justify-content: center; }
.hero-anim::before { display: none; }

.ha-stage {
  --s: 1;
  position: relative;
  width: 470px;
  height: 396px;
  flex-shrink: 0;
  transform: scale(var(--s));
  transform-origin: top center;
  margin-bottom: calc(396px * (var(--s) - 1));
  color: #f4efe6;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  text-shadow: none;
}
.ha-stage svg { display: block; flex-shrink: 0; }

/* The screen */
.ha-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid #fff6e566;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 85% 0%, #ffe9c2, transparent 60%),
    linear-gradient(165deg, #f7d6a6 0%, #eaa66d 48%, #b9683f 100%);
  box-shadow: 0 30px 70px -30px #0b0f0bcc, inset 0 1px 0 #ffffff40;
  color: #f4efe6;
}
.ha-menubar { display: flex; align-items: center; gap: 9px; height: 24px; padding: 0 14px; background: #fff7ea8c; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #3a2c1f; }
.ha-menubar i { width: 26px; height: 5px; border-radius: 3px; background: #3a2c1f40; }
.ha-menubar b { margin-left: auto; font-size: 10px; font-weight: 600; }
.ha-apple { width: 9px; height: 11px; border-radius: 40% 40% 50% 50%; background: #3a2c1f; }

/* A Finder-style window and desktop icons, so the screen reads as a computer */
.ha-window { position: absolute; top: 46px; left: 20px; width: 236px; overflow: hidden; border: 1px solid #00000014; border-radius: 10px; background: #fffaf3; box-shadow: 0 18px 36px -18px #5a2e1499; color: #3a332b; }
.ha-window__bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #efe6d8; background: #f6efe4; color: #7a6f60; font-size: 10px; font-weight: 600; }
.ha-dots { display: inline-flex; gap: 4px; }
.ha-dots i { width: 7px; height: 7px; border-radius: 50%; background: #eb816d; }
.ha-dots i:nth-child(2) { background: #e7bb6c; }
.ha-dots i:nth-child(3) { background: #83b38a; }
.ha-window ul { margin: 0; padding: 6px; list-style: none; }
.ha-window li { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; font-size: 10.5px; }
.ha-window li:first-child { background: #f3e2c8; }
.ha-window em { margin-left: auto; color: #9a8f80; font-style: normal; font-size: 9.5px; }
.ha-file { position: relative; display: inline-block; flex-shrink: 0; width: 14px; height: 17px; border-radius: 2px; background: #e8e2d8; box-shadow: inset 0 0 0 1px #0000001a; }
.ha-file--video { background: #c76b3b; }
.ha-file--image { background: linear-gradient(160deg, #8cc4e8, #6aa36f); }
.ha-file--folder { width: 22px; height: 17px; border-radius: 3px; background: #7fb2e5; }
.ha-icons { position: absolute; left: 22px; top: 252px; display: flex; gap: 14px; }
.ha-icons span { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; color: #fffaf1; font-size: 9px; text-align: center; text-shadow: 0 1px 2px #5a2e1499; }
.ha-icons .ha-file { width: 26px; height: 32px; border-radius: 3px; }
.ha-icons .ha-file--folder { width: 34px; height: 27px; margin-top: 5px; }

/* The lantern at the edge */
.ha-pill {
  position: absolute;
  top: 58px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 46px;
  padding: 6px 0;
  border: 1px solid #ffffff2b;
  border-radius: 23px;
  background: #1a1d1ab8;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px -10px #000;
}
.ha-pill img { width: 34px; height: 34px; filter: drop-shadow(0 0 0 #ffb54a00); transition: filter .5s; }
.ha-badge { position: absolute; top: 2px; right: -2px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #fab845; color: #2b1d07; font-size: 10px; font-weight: 700; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s; }
.ha-pill__tools { display: grid; gap: 4px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .3s; }
.ha-pill__tools span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #e9e4da; }
.ha-pill__tools span:first-child { margin-top: 6px; }
.ha-pill__tools svg { width: 16px; height: 16px; }

/* The panel */
.ha-panel {
  position: absolute;
  top: 44px;
  right: 62px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 262px;
  height: 290px;
  padding: 12px;
  border: 1px solid #ffffff26;
  border-radius: 16px;
  background: #171a17e6;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 50px -20px #000;
  opacity: 0;
  transform: translateX(14px) scale(.97);
  transform-origin: right top;
  transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1);
}
.ha-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 600; font-size: 13px; }
.ha-panel__head i { font-style: normal; opacity: .5; }
.ha-home { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ha-home li { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; background: #ffffff0d; color: #e2ddd2; }
.ha-home svg { width: 15px; height: 15px; color: #fab845; }
.ha-thread { display: none; flex-direction: column; gap: 7px; min-height: 0; }
.ha-ask { align-self: flex-end; max-width: 86%; margin: 0; padding: 8px 11px; border-radius: 12px 12px 3px 12px; background: #c9873a; color: #fffaf1; }
.ha-start { position: relative; display: flex; align-items: center; gap: 8px; overflow: hidden; padding: 9px 10px; border: 1px solid #ffffff1f; border-radius: 10px; background: #ffffff0d; }
.ha-start img { width: 20px; height: 20px; }
.ha-start__label { font-weight: 600; font-size: 11.5px; }
.ha-cancel { margin-left: auto; padding: 3px 8px; border: 1px solid #ffffff2e; border-radius: 6px; font-size: 10px; opacity: .8; }
.ha-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #fab845; transform: scaleX(0); transform-origin: left; }
.ha-step { display: flex; align-items: center; gap: 7px; margin: 0; padding-left: 4px; color: #c9c4b8; font-size: 11px; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.ha-step svg { width: 12px; height: 12px; color: #7fd197; }
.ha-result { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #7fd19759; border-radius: 10px; background: #1f2d22; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.ha-result__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #5ccc82; color: #10220f; }
.ha-result__icon svg { width: 14px; height: 14px; }
.ha-result strong, .ha-result div > span { display: block; }
.ha-result strong { font-size: 11.5px; }
.ha-result div > span { margin-top: 2px; color: #b5c9b8; font-size: 10.5px; }
.ha-box { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 9px 9px 9px 12px; border: 1px solid #ffffff24; border-radius: 12px; background: #0000002e; color: #a9a396; }
.ha-input { color: #f4efe6; white-space: nowrap; overflow: hidden; }
.ha-input:not(:empty)::after { content: ""; display: inline-block; width: 1.5px; height: 13px; margin-left: 1px; vertical-align: -2px; background: #fab845; animation: ha-caret 1s steps(1) infinite; }
.ha-input:not(:empty) + .ha-placeholder { display: none; }
.ha-placeholder { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.ha-input:not(:empty) ~ svg { margin-left: auto; }
.ha-box > svg { width: 15px; height: 15px; }
.ha-send { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fab845; color: #2b1d07; }
.ha-send svg { width: 13px; height: 13px; }

/* The pointer */
.ha-cursor { position: absolute; z-index: 4; left: 0; top: 0; width: 20px; height: 20px; filter: drop-shadow(0 2px 3px #0008); transform: translate(120px, 250px); transition: transform .8s cubic-bezier(.45,0,.2,1), opacity .3s; }

/* A finished job: a notification beside the lantern, while the panel is closed */
.ha-note { position: absolute; top: 36px; right: 64px; z-index: 3; display: flex; align-items: center; gap: 10px; width: 228px; padding: 10px 12px; border: 1px solid #ffffff2e; border-radius: 14px; background: #1b1e1be6; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 30px -14px #000; opacity: 0; transform: translateX(16px); transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1); }
.ha-note img { width: 30px; height: 30px; }
.ha-note small, .ha-note strong, .ha-note span { display: block; }
.ha-note small { color: #a9a396; font-size: 9.5px; }
.ha-note strong { margin-top: 1px; font-size: 12px; }
.ha-note span { color: #d6d0c4; font-size: 10.5px; }
:is([data-step="close"], [data-step="hover"]).has-note .ha-note { opacity: 1; transform: none; }

/* Steps */
[data-step="hover"] .ha-pill__tools, [data-step="open"] .ha-pill__tools { max-height: 120px; opacity: 1; }
[data-step="hover"] .ha-cursor { transform: translate(430px, 76px); }
[data-step="open"] .ha-cursor, [data-step="typing"] .ha-cursor { transform: translate(250px, 306px); }
[data-step="start"] .ha-cursor, [data-step="work"] .ha-cursor, [data-step="done"] .ha-cursor { transform: translate(250px, 306px); opacity: 0; }
[data-step="close"] .ha-cursor { transform: translate(120px, 250px); }
:is([data-step="open"], [data-step="typing"], [data-step="start"], [data-step="work"], [data-step="done"]) .ha-panel { opacity: 1; transform: none; }
:is([data-step="start"], [data-step="work"], [data-step="done"]) .ha-home { display: none; }
:is([data-step="start"], [data-step="work"], [data-step="done"]) .ha-thread { display: flex; }
[data-step="start"] .ha-progress { animation: ha-progress 2.4s linear both; }
:is([data-step="work"], [data-step="done"]) .ha-cancel, :is([data-step="work"], [data-step="done"]) .ha-progress { display: none; }
:is([data-step="work"], [data-step="done"]) .ha-step--1 { opacity: 1; transform: none; }
:is([data-step="work"], [data-step="done"]) .ha-step--2 { opacity: 1; transform: none; transition-delay: .9s; }
[data-step="done"] .ha-step--2 { transition-delay: 0s; }
[data-step="done"] .ha-result { opacity: 1; transform: none; }
:is([data-step="done"], [data-step="close"]) .ha-badge { opacity: 1; transform: none; }
:is([data-step="done"], [data-step="close"]) .ha-pill img { filter: drop-shadow(0 0 10px #ffb54acc); }

@keyframes ha-caret { 50% { opacity: 0; } }
@keyframes ha-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .ha-stage *, .ha-stage *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 1000px) {
  .hero .hero-art.hero-anim { margin: 28px auto 0; width: 100%; }
}

/* "Show me how": Lantern drawing on the screen to point the way */
.show-how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px; margin-top: 56px; padding: 40px; border: 1.5px solid #282d27; background: #fbf3e4; }
.show-how h3 { margin: 10px 0 14px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.045em; font-weight: 600; }
.show-how__copy > p:last-child { margin: 0; color: #606257; font-size: 15px; line-height: 1.7; }
.show-how__art { position: relative; height: 260px; overflow: hidden; }
.sh-window { position: absolute; inset: 14px 30px 14px 0; overflow: hidden; border: 1px solid #c9bfae; border-radius: 10px; background: #fffdf8; box-shadow: 0 18px 36px -20px #5a2e1466; }
.sh-window__bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #ece4d6; background: #f6efe4; color: #7a6f60; font-size: 10px; font-weight: 600; }
.sh-window__body { display: flex; height: 100%; }
.sh-side { width: 150px; margin: 0; padding: 10px 8px; border-right: 1px solid #ece4d6; list-style: none; }
.sh-side li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: #4a433a; font-size: 11.5px; }
.sh-side i { width: 14px; height: 14px; border-radius: 4px; background: #d9cfbf; }
.sh-target i { background: #5b9be0; }
.sh-pane { flex: 1; display: grid; align-content: start; gap: 12px; padding: 18px; }
.sh-pane b { height: 10px; border-radius: 5px; background: #eee6d8; }
.sh-pane b:nth-child(2) { width: 70%; }
.sh-pane b:nth-child(4) { width: 55%; }
.sh-ink { position: absolute; left: 0; top: 0; width: 400px; height: 260px; overflow: visible; }
.sh-ink * { stroke: #e0892f; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 1px 0 #fff8); }
.sh-label { position: absolute; top: 30px; left: 262px; padding: 7px 12px; border-radius: 99px; background: #e0892f; color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 6px 14px -6px #a2541c; }
[data-card-motion='playing'] .sh-ring, [data-card-motion='paused'] .sh-ring { animation: sh-draw .9s .3s cubic-bezier(.45,0,.2,1) both; }
[data-card-motion='playing'] .sh-arrow, [data-card-motion='paused'] .sh-arrow { animation: sh-draw .6s 1.1s ease-out both; }
[data-card-motion='playing'] .sh-arrow--head, [data-card-motion='paused'] .sh-arrow--head { animation-delay: 1.6s; animation-duration: .3s; }
[data-card-motion='playing'] .sh-label, [data-card-motion='paused'] .sh-label { animation: sh-pop .4s 1.8s cubic-bezier(.22,1,.36,1) both; }
[data-card-motion='paused'] .show-how__art * { animation-play-state: paused; }
@keyframes sh-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sh-pop { from { opacity: 0; transform: translateY(6px) scale(.95); } }
@media (max-width: 900px) {
  .show-how { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 26px 22px; }
}
@media (max-width: 480px) {
  .sh-side { width: 120px; }
  .sh-arrow { display: none; }
  .sh-label { top: 150px; left: 150px; font-size: 11px; }
}