/* /ai-automation-development (2026-10-14). Needs public/css/rt-hue.css (tokens --hx-*, data-hue → --c, .hx-head, .hx-win, .hxs-*).
   1. hero: workflow + data + goals flow into one assistant, then three people log in (pg-ai-agent.js)
   2. tailor-made cards with looping illustrations   3. permissions console   4. integrations
   5. kinds of assistant (rt-hue showcase, chat scene)   6. timeline (四步開始用)   7. ready-made tools band
   Everything follows the site theme; light overrides sit at the end (no dark blocks in light mode).
   v2 (SPEC-v2): no top-edge strips or inset top highlights anywhere (own --aa-shadow instead of --card-shadow), radii
   20 panel / 16 card / 14 tile / 99 pill, readable text >= 14.5px, hero plays once with one corner button (no chapter bar). */

@property --ac{syntax:'<color>';inherits:true;initial-value:#B39BFF}

.aa-wrap{--aa-shadow:0 18px 40px -30px rgba(0,0,0,.7);max-width:1500px;margin:0 auto;padding:clamp(18px,2.4vw,34px) clamp(16px,3vw,48px) 0}
.aa-sec{padding:clamp(56px,6.4vw,96px) 0 0;scroll-margin-top:calc(var(--nav-h,52px) + 16px)}
.aa-demo{flex:none;margin-left:auto;padding:2px 8px;border-radius:99px;border:1px solid var(--line);font:600 12px/1.4 var(--font-sans);font-style:normal;color:var(--hx-text-2)}

/* ================= 1. HERO ================= */
.aa-hero{--c:var(--hx-ai);--ac:var(--c);transition:--ac .9s ease;position:relative;container-type:inline-size;border:1px solid var(--line);border-radius:20px;overflow:hidden;isolation:isolate;background:var(--chrome);
  box-shadow:0 34px 80px -46px rgba(0,0,0,.85),0 0 110px -60px var(--ac)}
.aa-frame{position:relative;display:grid;min-height:max(600px,46cqw);overflow:hidden;isolation:isolate;background:var(--hx-stage);color:var(--hx-text)}
.aa-frame::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(80% 90% at 70% 45%,#000 30%,transparent 85%);mask-image:radial-gradient(80% 90% at 70% 45%,#000 30%,transparent 85%)}
.aa-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.aa-aura{position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(34% 40% at 72% 46%,color-mix(in srgb,var(--ac) 28%,transparent),transparent 70%),
             radial-gradient(26% 32% at 14% 90%,color-mix(in srgb,var(--hx-sub) 15%,transparent),transparent 70%),
             radial-gradient(24% 28% at 32% 8%,color-mix(in srgb,var(--hx-ai) 16%,transparent),transparent 70%);
  animation:aa-drift 20s ease-in-out infinite alternate}
@keyframes aa-drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
.aa-body{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center;gap:3cqw;padding:3.4cqw 2.8cqw 3.4cqw 4cqw}

/* copy */
.aa-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:7px 15px;border:1px solid color-mix(in srgb,var(--ac) 45%,var(--line));border-radius:99px;background:color-mix(in srgb,var(--ac) 9%,transparent);font:600 14.5px/1.25 var(--font-mono);letter-spacing:.05em;color:var(--hx-text-2)}
.aa-kicker i{width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac);animation:aa-blink 1.8s ease-in-out infinite}
@keyframes aa-blink{50%{opacity:.25}}
.aa-hero h1{margin:0;font-size:clamp(36px,4.1cqw,64px);line-height:1.12;letter-spacing:-.035em;font-weight:900;color:var(--hx-text);word-break:keep-all;text-wrap:balance}
.aa-hero h1 span{display:block}
.aa-hero h1 .g{margin-top:.18em;font-size:.62em;line-height:1.28;letter-spacing:-.02em;background:linear-gradient(100deg,var(--hx-ai) 0%,var(--hx-web) 52%,var(--hx-sub) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.aa-now{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:24px 0 0;font-size:clamp(16px,1.4cqw,20px);font-weight:700;color:var(--hx-text-2)}
.aa-now span{font:700 14.5px/1 var(--font-mono);letter-spacing:.06em;padding:7px 10px;border-radius:99px;border:1px solid var(--line);color:var(--hx-text-2)}
.aa-now b{display:inline-flex;align-items:center;gap:9px;min-width:8.6em;padding:7px 16px;border-radius:99px;background:color-mix(in srgb,var(--ac) 15%,transparent);border:1px solid color-mix(in srgb,var(--ac) 50%,transparent);color:var(--ac);font-weight:800}
.aa-now b::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--ac)}
.aa-now b.is-swap{animation:aa-swap .5s cubic-bezier(.2,.8,.2,1)}
@keyframes aa-swap{from{opacity:0;transform:translateY(10px)}}
.aa-lead{margin:18px 0 0;max-width:31em;font-size:18px;line-height:1.8;color:var(--hx-text-2)}
.aa-hero .actions{margin-top:28px;gap:12px}

/* visual: inputs | assistant | app window, joined by wires (svg, drawn by JS) */
.aa-visual{position:relative;display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,.5fr) minmax(0,1.5fr);grid-template-areas:"in core app";align-items:center;gap:clamp(16px,2.2cqw,36px)}
.aa-wires{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.aa-wire .w{fill:none;stroke:var(--line);stroke-width:2}
.aa-wire .lit{fill:none;stroke:var(--c);stroke-width:2.4;opacity:0;transition:opacity .5s}
.aa-wire.is-lit .lit{opacity:.6}
.aa-wire .f{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 14;opacity:0;transition:opacity .3s}
.aa-wire.is-live .f{opacity:1;animation:aa-flow .7s linear infinite}
@keyframes aa-flow{to{stroke-dashoffset:-14}}
.aa-hero:is(.is-paused,.is-away) :is(.aa-wire .f,.aa-aura,.aa-kicker i,.aa-bot,.aa-login .spin),.aa-hero:is(.is-paused,.is-away) .aa-orb::after{animation-play-state:paused}
.aa-hero.is-done .aa-wire .f{opacity:0}
.aa-hero.is-done :is(.aa-aura,.aa-kicker i,.aa-bot),.aa-hero.is-done .aa-orb::after{animation:none}

/* one small corner button: pause while playing, replay when finished (no chapter bar) */
.aa-play{position:absolute;right:10px;top:10px;z-index:4;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--hx-text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.aa-play>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--hx-surface) 86%,transparent);box-shadow:var(--hx-shadow);transition:transform .2s,border-color .2s,color .2s}
.aa-play:hover>span{transform:scale(1.08);border-color:var(--ac);color:var(--ac)}
.aa-play svg{grid-area:1/1;width:13px;height:13px;fill:currentColor}
.aa-play .i-replay{width:17px;height:17px}
.aa-play .i-play,.aa-play .i-replay,.aa-hero.is-paused .aa-play .i-pause,.aa-hero.is-done .aa-play .i-pause,.aa-hero.is-done .aa-play .i-play{display:none}
.aa-hero.is-paused:not(.is-done) .aa-play .i-play,.aa-hero.is-done .aa-play .i-replay{display:block}
.aa-hero.is-calm .aa-play{display:none}
.aa-play:focus-visible{outline:none}
.aa-play:focus-visible>span{outline:2px solid var(--accent);outline-offset:2px}

.aa-ins{grid-area:in;position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(12px,1.4cqw,18px)}
.aa-in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic b" "s s";align-items:center;column-gap:10px;padding:12px 14px 13px 12px;border-radius:14px;border:1px solid var(--line);background:var(--hx-surface);box-shadow:var(--hx-shadow);opacity:.78;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s,opacity .4s}
.aa-in .ic{grid-area:ic;display:grid;place-items:center;width:38px;height:38px;border-radius:14px;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 78%,#fff) 0%,var(--c) 48%,color-mix(in srgb,var(--c) 62%,#04101C) 100%);box-shadow:0 10px 22px -12px var(--c)}
.aa-in .ic svg{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.aa-in b{grid-area:b;font-size:clamp(14.5px,1.25cqw,16.5px);font-weight:800;line-height:1.3;color:var(--hx-text)}
.aa-in small{grid-area:s;margin-top:8px;font-size:13px;line-height:1.45;color:var(--hx-text-2)}
.aa-in .ok{position:absolute;right:-8px;top:-8px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--c);color:var(--hx-on);box-shadow:0 4px 10px -4px var(--c);transform:scale(0);transition:transform .45s cubic-bezier(.2,.9,.3,1.5)}
.aa-in .ok svg{width:13px;height:13px}
.aa-in.is-on{opacity:1;transform:translateX(5px);border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent),0 18px 36px -18px var(--c)}
.aa-in.is-done{opacity:1;border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.aa-in.is-done .ok{transform:none}

.aa-core{grid-area:core;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.aa-orb{position:relative;width:clamp(92px,9.6cqw,128px);aspect-ratio:1;margin-bottom:9px}
.aa-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.aa-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.aa-ring .base{stroke:var(--line)}
.aa-ring .seg{stroke:var(--c);stroke-dasharray:0 300;transition:stroke-dasharray 1.1s cubic-bezier(.4,0,.2,1) .45s}
.aa-ring .seg.is-full{stroke-dasharray:86 214}
.aa-core.is-reset .seg{transition:none}
.aa-bot{position:absolute;inset:15%;display:grid;place-items:center;border-radius:50%;color:#fff;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--hx-ai) 58%,#fff),var(--hx-ai) 55%,color-mix(in srgb,var(--hx-ai) 60%,#140A3A));box-shadow:0 16px 36px -14px var(--hx-ai)}
.aa-bot svg{width:48%;height:48%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.aa-orb::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--hx-ai);opacity:0;pointer-events:none}
.aa-core.is-ready .aa-bot{animation:aa-beat 2.4s ease-in-out infinite}
.aa-core.is-ready .aa-orb::after{animation:aa-ping 2.4s ease-out infinite}
@keyframes aa-beat{50%{transform:scale(1.06)}}
@keyframes aa-ping{0%{opacity:.65;transform:scale(.92)}100%{opacity:0;transform:scale(1.4)}}
.aa-core b{font-size:clamp(15px,1.3cqw,17px);font-weight:900;color:var(--hx-text);white-space:nowrap}
.aa-core small{font:700 12.5px/1.3 var(--font-mono);color:var(--hx-ai)}
.aa-hero.is-paused .aa-core *,.aa-hero.is-away .aa-core *,.aa-hero.is-paused .aa-orb::after,.aa-hero.is-away .aa-orb::after{animation-play-state:paused}

.aa-app{grid-area:app;position:relative;z-index:1;min-width:0;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85),0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent),0 0 60px -26px color-mix(in srgb,var(--c) 60%,transparent);transition:box-shadow .6s,border-color .6s}
.aa-app .hx-win-bar{height:30px;font-size:12.5px}
.aa-url{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 12px;border-radius:99px;background:var(--hx-surface);border:1px solid var(--line-soft);color:var(--hx-text-2)}
.aa-url::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.aa-app .hx-win-body{flex:none;height:clamp(312px,28cqw,336px);overflow:hidden;background:var(--hx-surface)}

.aa-login{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px;transition:opacity .45s,transform .5s}
.aa-login .lg{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;background:var(--hx-ai);box-shadow:0 10px 24px -12px var(--hx-ai)}
.aa-login .lg svg{width:24px;height:24px}
.aa-login b{font-size:15px;font-weight:800;color:var(--hx-text)}
.aa-login .f{display:block;width:min(230px,82%);height:30px;border-radius:8px;border:1px solid var(--line);background:var(--hx-surface-2)}
.aa-login em{width:min(230px,82%);padding:7px 0;border-radius:8px;text-align:center;font-style:normal;font-size:13.5px;font-weight:800;color:var(--hx-text-2);background:color-mix(in srgb,var(--hx-ai) 26%,var(--hx-surface-2))}
.aa-login small{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--hx-text-2)}
.aa-login .spin{width:12px;height:12px;border-radius:50%;border:2px solid color-mix(in srgb,var(--hx-ai) 30%,transparent);border-top-color:var(--hx-ai);animation:aa-spin .9s linear infinite}
@keyframes aa-spin{to{transform:rotate(360deg)}}
.aa-app.is-in .aa-login{opacity:0;transform:scale(.96);pointer-events:none}

.aa-role{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;padding:13px 15px 14px;opacity:0;visibility:hidden;transform:translateX(18px);
  transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s}
.aa-role.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .4s .12s,transform .5s cubic-bezier(.2,.8,.2,1) .12s}
.aa-role .who{display:flex;align-items:center;gap:11px;padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.aa-role .av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--c);color:var(--hx-on);font-size:16px;font-weight:900;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
.aa-role .who b{display:block;font-size:15.5px;font-weight:900;line-height:1.3;color:var(--hx-text)}
.aa-role .who small{display:block;font-size:12.5px;font-weight:600;color:var(--hx-text-2)}
.aa-role .mates{margin-left:auto;display:flex;padding-left:5px}
.aa-role .mates i{display:grid;place-items:center;width:25px;height:25px;margin-left:-6px;border-radius:50%;border:2px solid var(--hx-surface);background:color-mix(in srgb,var(--c) 35%,var(--hx-surface-2));color:var(--hx-text);font:800 12px/1 var(--font-sans);font-style:normal;opacity:.55}
.aa-role .mates i.me{background:var(--c);color:var(--hx-on);opacity:1;transform:scale(1.14);z-index:1}
.aa-role .can{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.aa-role .can li{display:flex;align-items:center;gap:9px;padding:5px 10px;border-radius:9px;background:var(--hx-surface-2);border:1px solid var(--line-soft);font-size:13.5px;font-weight:700;color:var(--hx-text)}
.aa-role .can svg{flex:none;width:15px;height:15px}
.aa-role .can li.y svg{color:var(--c)}
.aa-role .can li.n{background:transparent;border-style:dashed;color:var(--muted)}
.aa-role .can li.n span{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 55%,transparent)}
.aa-role .can em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:800;color:var(--c);white-space:nowrap}
.aa-role .can li.n em{color:var(--muted)}
.aa-role.is-on .can li{animation:aa-row .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 110ms + .35s)}
.aa-role .scope{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding:7px 11px;border-radius:9px;background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 38%,transparent);font-size:13px;color:var(--hx-text-2)}
.aa-role .scope svg{flex:none;width:16px;height:16px;color:var(--c)}
.aa-role .scope b{font-weight:800;color:var(--hx-text)}
.aa-role.is-on .scope{animation:aa-up .45s both .9s}

.aa-hero :is(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* shared small animations */
@keyframes aa-up{from{opacity:0;transform:translateY(14px)}}
@keyframes aa-row{from{opacity:0;transform:translateX(14px)}}
@keyframes aa-pop{from{opacity:0;transform:scale(.4)}}
@keyframes aa-press{50%{transform:scale(.92);filter:brightness(1.2)}}

/* ================= 2. TAILOR-MADE CARDS ================= */
.aa-build{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.aa-bc{display:flex;flex-direction:column;border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));border-radius:16px;background:var(--panel);overflow:hidden;box-shadow:var(--aa-shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.aa-bc:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 26px 50px -30px color-mix(in srgb,var(--c) 60%,transparent)}
[data-reveal]:not(.in-view) .aa-bc{opacity:0}
[data-reveal].in-view .aa-bc{animation:aa-up .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 110ms)}
.aa-bc-art{position:relative;height:244px;overflow:hidden;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(70% 90% at 85% 0%,color-mix(in srgb,var(--c) 20%,transparent),transparent 70%),var(--hx-stage)}
.aa-bc-art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--hx-grid) 1.2px,transparent 1.6px);background-size:20px 20px}
.aa-bc-art>*{position:relative}
.aa-bc-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:24px 26px 26px}
.aa-bc-body h3{display:flex;align-items:center;gap:14px;font-size:21px;font-weight:800;line-height:1.3;color:var(--fg)}
.aa-bc-body .ic,.aa-tl-txt .ic,.aa-rh .ic{flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 78%,#fff) 0%,var(--c) 48%,color-mix(in srgb,var(--c) 62%,#04101C) 100%);box-shadow:0 12px 26px -16px var(--c)}
.aa-bc-body .ic,.aa-tl-txt .ic{width:48px;height:48px;border-radius:14px}
.aa-bc-body .ic svg,.aa-tl-txt .ic svg{width:24px;height:24px}
.aa-bc-body .ic svg,.aa-tl-txt .ic svg,.aa-rh .ic svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.aa-bc-body p{margin:0;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
.aa-bc-body .tg{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:6px 0 0;list-style:none}
.aa-bc-body .tg li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line-soft);font-size:15px;font-weight:700;color:var(--fg)}
.aa-bc-body .tg svg{width:14px;height:14px;color:var(--c)}

/* art 1: workflow steps, a highlight walks down, AI takes some steps, a person approves the last */
.art-flow .fl{margin:0;padding:18px 20px;list-style:none;display:flex;flex-direction:column;gap:9px}
.art-flow .fl::before{content:"";position:absolute;left:35px;top:34px;bottom:34px;width:2px;background:color-mix(in srgb,var(--c) 40%,var(--line))}
.art-flow li{position:relative;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 7px;border-radius:11px;background:var(--hx-surface);border:1px solid var(--line-soft);font-size:14.5px;font-weight:700;color:var(--hx-text)}
.art-flow .dot{flex:none;width:12px;height:12px;margin:0 3px;border-radius:50%;background:var(--hx-surface);border:2.5px solid var(--c)}
.art-flow em{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-style:normal;font-size:12.5px;font-weight:800;white-space:nowrap}
.art-flow em svg{width:14px;height:14px}
.art-flow em.ai{color:var(--hx-ai);background:color-mix(in srgb,var(--hx-ai) 15%,transparent);border:1px solid color-mix(in srgb,var(--hx-ai) 42%,transparent)}
.art-flow em.me{color:var(--hx-sub);background:color-mix(in srgb,var(--hx-sub) 15%,transparent);border:1px solid color-mix(in srgb,var(--hx-sub) 45%,transparent)}
.is-vis .art-flow li{animation:aa-step 5.2s ease-in-out infinite;animation-delay:calc(var(--i) * 1.1s)}
.is-vis .art-flow .dot{animation:aa-dot 5.2s ease-in-out infinite;animation-delay:calc(var(--i) * 1.1s)}
@keyframes aa-step{0%,30%,100%{border-color:var(--line-soft);box-shadow:none;transform:none}8%,22%{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent);transform:translateX(4px)}}
@keyframes aa-dot{0%,30%,100%{background:var(--hx-surface)}8%,22%{background:var(--c)}}

/* art 2: documents slide into the knowledge base, an answer comes back with its source */
.art-data{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px 18px}
.art-data .kb{display:flex;align-items:center;gap:14px}
.art-data .docs{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.art-data .docs span{display:flex;align-items:center;gap:7px;padding:5px 9px;border-radius:8px;background:var(--hx-surface);border:1px solid var(--line-soft);font:600 12.5px/1.35 var(--font-mono);color:var(--hx-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-data .docs svg{flex:none;width:14px;height:14px;color:var(--c)}
.art-data .box{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:98px;padding:12px 6px;border-radius:14px;text-align:center;background:color-mix(in srgb,var(--c) 14%,var(--hx-surface));border:1.5px solid color-mix(in srgb,var(--c) 50%,transparent)}
.art-data .box svg{width:27px;height:27px;color:var(--c)}
.art-data .box b{font-size:13px;font-weight:800;color:var(--hx-text)}
.art-data .ans{padding:9px 12px;border-radius:12px 12px 12px 3px;background:var(--hx-surface);border:1px solid color-mix(in srgb,var(--c) 40%,var(--line))}
.art-data .ans small{display:block;font-size:12.5px;font-weight:700;color:var(--hx-text-2)}
.art-data .ans p{margin:2px 0 4px;font-size:14px;line-height:1.5;font-weight:700;color:var(--hx-text)}
.art-data .ans em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12px;font-weight:800;color:var(--c)}
.art-data .ans em svg{width:13px;height:13px}
.is-vis .art-data .docs span{animation:aa-doc 6.4s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)}
.is-vis .art-data .box{animation:aa-box 6.4s ease-in-out infinite}
.is-vis .art-data .ans{animation:aa-ans 6.4s ease-in-out infinite}
@keyframes aa-doc{0%,8%{transform:none;opacity:1}22%,30%{transform:translateX(46px) scale(.88);opacity:0}40%,100%{transform:none;opacity:1}}
@keyframes aa-box{0%,14%,42%,100%{transform:none;box-shadow:none}24%,32%{transform:scale(1.08);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 18%,transparent)}}
@keyframes aa-ans{0%,34%{opacity:.2;transform:translateY(8px)}44%,94%{opacity:1;transform:none}100%{opacity:.2;transform:translateY(8px)}}

/* art 3: goal checklist ticks one by one, bars grow, "持續調整" spins */
.art-goal{display:flex;align-items:center;padding:16px 18px}
.art-goal .gl{width:100%;padding:13px 15px;border-radius:14px;background:var(--hx-surface);border:1px solid var(--line-soft)}
.art-goal .gh{display:flex;align-items:center;gap:8px;font-size:14.5px}
.art-goal .gh>svg{width:19px;height:19px;color:var(--c)}
.art-goal .gh b{font-weight:800;color:var(--hx-text)}
.art-goal .gh em{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12.5px;font-weight:800;color:var(--c)}
.art-goal .gh em svg{width:15px;height:15px}
.is-vis .art-goal .gh em svg{animation:aa-spin 3.2s linear infinite}
.art-goal ul{display:flex;flex-direction:column;gap:9px;margin:12px 0 0;padding:0;list-style:none}
.art-goal li{display:grid;grid-template-columns:22px minmax(0,1fr) 54px;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--hx-text)}
.art-goal li i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;border:2px solid var(--c);background:var(--c);color:var(--hx-on)}
.art-goal li i svg{width:13px;height:13px}
.art-goal .bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.art-goal .bar s{display:block;height:100%;border-radius:99px;background:var(--c);transform-origin:left}
.is-vis .art-goal li i{animation:aa-chk 6s ease infinite;animation-delay:calc(var(--i) * .8s)}
.is-vis .art-goal li i svg{animation:aa-chk-i 6s ease infinite;animation-delay:calc(var(--i) * .8s)}
.is-vis .art-goal .bar s{animation:aa-bar 6s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--i) * .8s)}
@keyframes aa-chk{0%,10%,96%,100%{background:transparent}18%,90%{background:var(--c)}}
@keyframes aa-chk-i{0%,12%,96%,100%{opacity:0;transform:scale(.4)}20%,90%{opacity:1;transform:none}}
@keyframes aa-bar{0%,10%,100%{transform:scaleX(.12)}34%,90%{transform:scaleX(1)}}

/* ================= 3. PERMISSIONS CONSOLE ================= */
.aa-acc{position:relative;border:1px solid color-mix(in srgb,var(--hx-ai) 38%,var(--line));border-radius:20px;padding:clamp(22px,3vw,44px);
  background:radial-gradient(60% 70% at 100% 0%,color-mix(in srgb,var(--hx-ai) 14%,transparent),transparent 70%),radial-gradient(40% 60% at 0% 100%,color-mix(in srgb,var(--hx-teal) 8%,transparent),transparent 70%),var(--panel)}
.aa-acc .hx-head h2 .hl{color:var(--hx-ai)}
.aa-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 13px;border-radius:99px;background:var(--hx-ai);color:var(--hx-on);font-size:14.5px;font-weight:800;letter-spacing:.03em}
.aa-badge svg{width:16px;height:16px}
.aa-con{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:20px;align-items:start}
.aa-con-nav{display:flex;flex-direction:column;gap:8px}
.aa-con-nav button{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:9px 14px 9px 10px;border:1px solid var(--line);border-radius:14px;background:var(--editor);color:var(--fg-2);
  font:inherit;font-size:16px;font-weight:700;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .25s,background .25s,color .25s,box-shadow .25s}
.aa-con-nav .ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:14px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);transition:background .25s,color .25s}
.aa-con-nav .ic svg{width:21px;height:21px}
.aa-con-nav .tn{white-space:nowrap}
.aa-con-nav button:hover{border-color:color-mix(in srgb,var(--c) 50%,var(--line));color:var(--fg)}
.aa-con-nav button[aria-selected="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,var(--panel));color:var(--fg);font-weight:800;box-shadow:0 12px 26px -18px var(--c)}
.aa-con-nav button[aria-selected="true"] .ic{background:var(--c);color:var(--hx-on)}
.aa-con-nav button:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.aa-con-nav .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;opacity:0}
.aa-con.is-auto button[aria-selected="true"] .prog{opacity:1;animation:aa-prog var(--auto,6500ms) linear forwards}
.aa-con.is-hold button[aria-selected="true"] .prog,.aa-con.is-away button[aria-selected="true"] .prog{animation-play-state:paused}
@keyframes aa-prog{to{transform:none}}
.aa-con-win{min-width:0}
.aa-con-win .hx-win-bar{height:30px;font-size:12.5px}
.aa-con-win .hx-win-body{min-height:404px;padding:22px clamp(16px,2.4vw,30px) 26px;background:var(--hx-surface)}
.aa-scr[hidden]{display:none}
.aa-scr-head h3{font-size:clamp(21px,1.8vw,26px);font-weight:900;line-height:1.3;color:var(--fg)}
.aa-scr-head p{margin:6px 0 0;max-width:40em;font-size:16.5px;line-height:1.7;color:var(--fg-2)}
.aa-scr-demo{margin-top:18px}
.aa-scr.is-on .aa-scr-head{animation:aa-up .5s both}

/* accounts */
.demo-accounts .tb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:14.5px;color:var(--fg-2)}
.demo-accounts .add{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;background:var(--c);color:var(--hx-on);font-size:13.5px;font-weight:800}
.demo-accounts .add svg{width:15px;height:15px}
.accts{margin:0;padding:0;list-style:none;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.accts li{display:grid;grid-template-columns:34px minmax(0,1fr) auto 104px;align-items:center;gap:12px;padding:9px 14px;border-top:1px solid var(--line-soft);font-size:15px}
.accts li:first-child{border-top:0}
.accts .av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c);color:var(--hx-on);font-size:14px;font-weight:900}
.accts b{font-weight:800;color:var(--fg)}
.accts .rl{padding:3px 10px;border-radius:99px;font-style:normal;font-size:13px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);white-space:nowrap}
.accts .st{justify-self:end;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--fg-2);white-space:nowrap}
.accts .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hx-blue)}
.accts li.new{background:color-mix(in srgb,var(--c) 9%,transparent)}
.accts li.new .st{color:var(--c)}
.accts li.new .st::before{background:var(--c)}
.aa-scr.is-on .accts li{animation:aa-row .45s both;animation-delay:calc(var(--i) * 90ms + .15s)}
.aa-scr.is-on .accts li.new{animation:aa-new .7s cubic-bezier(.2,.9,.3,1.2) both 1.7s}
.aa-scr.is-on .demo-accounts .add{animation:aa-press .5s ease 1.3s both}
@keyframes aa-new{from{opacity:0;transform:translateY(-12px) scale(.96)}}

/* role checklist */
.mx{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(var(--cols,3),minmax(0,1fr));border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.mx>span{display:flex;align-items:center;min-height:42px;padding:6px 12px;border-top:1px solid var(--line-soft);font-size:15px}
.mx>.mh{border-top:0;background:var(--hx-surface-2);font-size:13.5px;font-weight:800;color:var(--fg-2)}
.mx>.c,.mx>.cell{justify-content:center;text-align:center}
.mx>.fn{font-weight:700;color:var(--fg)}
.mx .cell svg{width:19px;height:19px}
.mx .cell.y svg{color:var(--hx-blue)}
.mx .cell.n svg{color:var(--muted);opacity:.8}
.mx .cell.c em,.aa-scr .lg .c em{padding:3px 8px;border-radius:99px;font-style:normal;font-size:12.5px;font-weight:800;color:var(--hx-sub);background:color-mix(in srgb,var(--hx-sub) 14%,transparent);border:1px solid color-mix(in srgb,var(--hx-sub) 45%,transparent);white-space:nowrap}
.aa-scr.is-on .mx .cell>*{animation:aa-pop .4s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--i) * 50ms + .2s)}
.aa-scr .lg{display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 0;font-size:14.5px;color:var(--fg-2)}
.aa-scr .lg span{display:inline-flex;align-items:center;gap:7px}
.aa-scr .lg svg{width:17px;height:17px}
.aa-scr .lg .y svg{color:var(--hx-blue)}
.aa-scr .lg .n svg{color:var(--muted)}

/* data scope */
.scp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.scp li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid var(--line-soft);background:var(--hx-surface-2)}
.scp .ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent)}
.scp li.off .ic{color:var(--muted);background:var(--panel-2)}
.scp .ic svg{width:22px;height:22px}
.scp div{flex:1;min-width:0}
.scp b{display:block;font-size:15.5px;font-weight:800;color:var(--fg)}
.scp small{display:block;margin-top:2px;font-size:13.5px;line-height:1.5;color:var(--fg-2)}
.scp .sw{flex:none;position:relative;width:46px;height:26px;border-radius:99px;background:var(--c)}
.scp .sw i{position:absolute;top:3px;left:23px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.scp .lk{flex:none;display:grid;place-items:center;width:46px;height:26px;border-radius:99px;border:1px dashed var(--muted);color:var(--muted)}
.scp .lk svg{width:15px;height:15px}
.aa-scr.is-on .scp li{animation:aa-up .45s both;animation-delay:calc(var(--i) * 100ms + .1s)}
.aa-scr.is-on .scp .sw{animation:aa-sw-bg .45s both;animation-delay:calc(var(--i) * .35s + .7s)}
.aa-scr.is-on .scp .sw i{animation:aa-sw .45s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * .35s + .7s)}
@keyframes aa-sw-bg{from{background:var(--line)}}
@keyframes aa-sw{from{left:3px}}

/* human confirmation */
.cf{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.cf-card{position:relative;padding:18px 20px;border-radius:16px;background:var(--hx-surface-2);border:1px solid color-mix(in srgb,var(--c) 45%,var(--line))}
.cf-h{display:flex;align-items:center;gap:12px}
.cf-h .bot{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--hx-ai);color:var(--hx-on)}
.cf-h .bot svg{width:23px;height:23px}
.cf-h b{display:block;font-size:16px;font-weight:900;color:var(--fg)}
.cf-h small{display:block;font-size:13.5px;color:var(--fg-2)}
.cf-card ul{margin:12px 0 0;padding:9px 12px;list-style:none;border-radius:10px;background:var(--hx-surface);border:1px solid var(--line-soft);font-size:14.5px;line-height:1.85;color:var(--fg-2)}
.cf-btns{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cf-btns span{padding:9px 16px;border-radius:10px;font-size:14.5px;font-weight:800}
.cf-btns .ok{background:var(--c);color:var(--hx-on)}
.cf-btns .no{border:1px solid var(--line);color:var(--fg-2)}
.cf-btns .cur{position:absolute;left:62px;top:24px;width:22px;height:26px;background:var(--fg);opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
  clip-path:polygon(0 0,0 78%,24% 60%,42% 100%,58% 93%,40% 56%,74% 56%)}
.aa-scr.is-on .cf-btns .cur{animation:aa-cur 2.2s ease both .4s}
.aa-scr.is-on .cf-btns .ok{animation:aa-press .4s ease 2.05s both}
@keyframes aa-cur{0%{opacity:0;transform:translate(130px,46px)}25%{opacity:1}70%{opacity:1;transform:none}78%{transform:scale(.85)}86%,100%{opacity:1;transform:none}}
.cf-done{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 12px;border-radius:10px;background:color-mix(in srgb,var(--hx-blue) 13%,transparent);border:1px solid color-mix(in srgb,var(--hx-blue) 40%,transparent);font-size:14.5px;font-weight:800;color:var(--fg)}
.cf-done svg{flex:none;width:17px;height:17px;color:var(--hx-blue)}
.aa-scr.is-on .cf-done{animation:aa-up .5s both 2.5s}
.cf-rule{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0;padding:18px 20px;border-radius:16px;border:1px dashed color-mix(in srgb,var(--c) 55%,var(--line))}
.cf-rule b{flex-basis:100%;font-size:15.5px;font-weight:900;color:var(--c)}
.cf-rule span{padding:7px 13px;border-radius:9px;background:var(--hx-surface-2);border:1px solid var(--line-soft);font-size:14.5px;font-weight:700;color:var(--fg)}

/* activity log */
.lgs{margin:0 0 0 8px;padding:0;list-style:none;border-left:2px solid var(--line)}
.lgs li{position:relative;display:grid;grid-template-columns:52px 72px minmax(0,1fr);align-items:center;gap:10px;padding:8px 0 8px 20px;font-size:15px}
.lgs li::before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--hx-surface);border:2px solid var(--muted)}
.lgs li.ai::before{border-color:var(--hx-ai);background:var(--hx-ai)}
.lgs time{font:600 13px/1 var(--font-mono);color:var(--fg-2)}
.lgs b{font-weight:800;color:var(--fg);white-space:nowrap}
.lgs li.ai b{color:var(--hx-ai)}
.lgs span{color:var(--fg-2);line-height:1.5}
.aa-scr.is-on .lgs li{animation:aa-row .45s both;animation-delay:calc(var(--i) * .3s + .2s)}
.lg-f{display:inline-flex;align-items:center;gap:7px;margin:14px 0 0;padding:7px 13px;border-radius:99px;background:color-mix(in srgb,var(--c) 12%,transparent);font-size:14.5px;font-weight:800;color:var(--c)}
.lg-f svg{width:16px;height:16px}

/* ================= 4. INTEGRATIONS ================= */
.aa-hub-run{display:flex;align-items:center;gap:20px}
.aa-hub-core{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:112px;padding:16px 8px;border-radius:16px;text-align:center;
  background:color-mix(in srgb,var(--hx-ai) 13%,var(--panel));border:1px solid color-mix(in srgb,var(--hx-ai) 45%,transparent);box-shadow:0 18px 40px -24px var(--hx-ai)}
.aa-hub-core svg{width:40px;height:40px;color:var(--hx-ai)}
.aa-hub-core b{font-size:15px;font-weight:900;color:var(--fg)}
.aa-hub-rows{flex:1;min-width:0}

/* ================= 5. KINDS: chat scene inside the rt-hue showcase ================= */
.aa-kinds .hxs-panel{scroll-margin-top:calc(var(--nav-h,52px) + 150px)}
.aa-wrap .hx-more{min-height:40px}
.aa-ks{display:flex;align-items:center;justify-content:center;min-height:clamp(390px,34cqw,460px);padding:58px 6% 26px}
.aa-chat{position:relative;z-index:1;width:100%;max-width:480px}
.aa-chat .hx-win-bar{height:28px;font-size:12.5px}
.aa-chat .hx-win-body{display:flex;flex-direction:column;gap:13px;padding:16px}
.aa-chat .q{display:flex;align-items:flex-start;gap:10px}
.aa-chat .av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,var(--hx-surface-2));border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:var(--hx-text);font-size:14.5px;font-weight:900}
.aa-chat .q>div{min-width:0}
.aa-chat .q small{display:block;font-size:12.5px;font-weight:700;color:var(--hx-text-2)}
.aa-chat .q p{margin:4px 0 0;padding:9px 13px;border-radius:4px 14px 14px 14px;background:var(--hx-surface-2);border:1px solid var(--line-soft);font-size:15px;font-weight:700;line-height:1.55;color:var(--hx-text)}
.aa-chat .st{display:flex;flex-direction:column;gap:8px;margin:0 0 0 46px;padding:0;list-style:none}
.aa-chat .st li{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--hx-text-2)}
.aa-chat .st svg{flex:none;width:21px;height:21px;padding:3px;border-radius:6px;color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent)}
.aa-chat .rs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:11px 13px;border-radius:14px;background:color-mix(in srgb,var(--c) 12%,var(--hx-surface));border:1px solid color-mix(in srgb,var(--c) 45%,transparent)}
.aa-chat .rs .bot{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--hx-ai);color:var(--hx-on)}
.aa-chat .rs .bot svg{width:19px;height:19px}
.aa-chat .rs b{flex:1;min-width:8em;font-size:15px;font-weight:800;color:var(--hx-text)}
.aa-chat .rs em{padding:6px 12px;border-radius:9px;background:var(--c);color:var(--hx-on);font-style:normal;font-size:13.5px;font-weight:800;white-space:nowrap}
.hxs-panel.is-show .aa-chat{animation:hxs-rise .9s cubic-bezier(.16,.84,.3,1) .25s both}
.hxs-panel.is-show .aa-chat .q{animation:aa-up .5s both .6s}
.hxs-panel.is-show .aa-chat .st li{animation:aa-row .45s both;animation-delay:calc(var(--i) * .42s + 1.05s)}
.hxs-panel.is-show .aa-chat .rs{animation:aa-up .55s cubic-bezier(.2,.9,.3,1.2) both 2.5s}


/* ================= 6. TIMELINE: AI 助理導入 四步開始用 =================
   one rail with four small solid numbered nodes lighting up in turn (the colour fill grows with them) and a spark that keeps
   travelling (like /process); each node has a card: icon tile, title, one line, a small 情境示意 illustration that fills the
   card (equal heights, no empty bottoms). No top strips, no outlined numbers. ≤1180px: vertical timeline. */
.aa-tl{--g:22px;position:relative}
.aa-tl-list{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin:0;padding:0;list-style:none}
.aa-tl-rail{position:absolute;z-index:0;top:15px;height:4px;left:calc((100% - 3 * var(--g)) / 8);right:calc((100% - 3 * var(--g)) / 8);pointer-events:none}
.aa-tl-rail i{position:absolute;inset:0;display:block;border-radius:99px}
.aa-tl-rail .trk{background:color-mix(in srgb,var(--fg) 11%,transparent)}
.aa-tl-rail .flow{background:radial-gradient(circle,color-mix(in srgb,var(--fg) 42%,transparent) 1.4px,transparent 2px) 0 50%/14px 4px repeat-x}
.aa-tl-rail .seg{right:auto;left:calc(var(--k) * 100% / var(--segs,3));width:calc(100% / var(--segs,3));border-radius:0;background:linear-gradient(90deg,var(--a),var(--b));transition:width .7s linear calc(var(--k) * .7s + .3s)}
.aa-tl-rail .seg:first-of-type{border-radius:99px 0 0 99px}
/* segments grow by width (layout, so always repainted): a one-piece fill animated with transform, clip-path or
   background-size stopped being repainted in Chrome although its computed style was right */
.aa-tl-rail .spark{inset:auto;left:0;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--hx-sub) 40%,transparent),0 0 16px 4px color-mix(in srgb,var(--hx-sub) 80%,transparent)}
.aa-tl.is-vis .aa-tl-rail .flow{animation:aa-tl-flow 1.1s linear infinite}
.aa-tl.is-vis .aa-tl-rail .spark{animation:aa-tl-spark 5.4s cubic-bezier(.6,0,.4,1) 2.8s infinite}
@keyframes aa-tl-flow{to{background-position:14px 50%}}
@keyframes aa-tl-spark{0%{left:0;opacity:0}8%,90%{opacity:1}100%{left:100%;opacity:0}}

.aa-tl-step{position:relative;display:flex;flex-direction:column;min-width:0}
.aa-tl-node{position:relative;z-index:1;align-self:center;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--c);background:var(--c);color:var(--hx-on);
  font:800 14.5px/1 var(--font-mono);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 18%,transparent)}
.aa-tl-node::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--c);opacity:0;pointer-events:none}
.aa-tl-step::after{content:"";position:absolute;left:50%;top:34px;width:2px;height:16px;margin-left:-1px;background:color-mix(in srgb,var(--c) 50%,transparent)}
.aa-tl-card{flex:1;display:flex;margin-top:16px;padding:24px;border-radius:16px;border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));background:color-mix(in srgb,var(--c) 7%,var(--panel));
  box-shadow:var(--aa-shadow);container-type:inline-size;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.aa-tl-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 24px 46px -30px color-mix(in srgb,var(--c) 60%,transparent)}
.aa-tl-in{flex:1;display:flex;flex-direction:column;gap:18px;min-width:0}
.aa-tl-txt{display:flex;flex-direction:column;gap:8px}
.aa-tl-txt .ic{margin-bottom:6px}
.aa-tl-txt h3{font-size:21px;font-weight:800;line-height:1.35;color:var(--fg)}
.aa-tl-txt p{margin:0;font-size:16.5px;line-height:1.75;color:var(--fg-2);word-break:keep-all;overflow-wrap:anywhere}
.aa-tl-demo{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:172px;padding:38px 14px 14px;border-radius:14px;border:1px solid var(--line-soft);background:var(--hx-stage);color:var(--hx-text)}
.aa-tl-demo .tag{position:absolute;left:12px;top:10px;padding:2px 9px;border-radius:99px;border:1px solid var(--line);font-style:normal;font-size:12px;font-weight:700;line-height:1.5;color:var(--hx-text-2)}
@container (min-width:540px){
  .aa-tl-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch;gap:26px}
  .aa-tl-txt{justify-content:center}
}
/* ① goal said in one line */
.demo-goal .bub{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px}
.demo-goal .bub p{margin:0;padding:9px 12px;border-radius:14px 14px 4px 14px;background:var(--c);color:var(--hx-on);font-size:14px;font-weight:700;line-height:1.5}
.demo-goal .av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--hx-surface-2);border:1px solid var(--line);font-size:12.5px;font-weight:800;color:var(--hx-text)}
.demo-goal .got{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:color-mix(in srgb,var(--hx-ai) 14%,transparent);border:1px solid color-mix(in srgb,var(--hx-ai) 40%,transparent);color:var(--hx-ai);font-size:13px;font-weight:800}
.demo-goal .got svg{width:14px;height:14px}
/* ② trial checklist */
.demo-try .tt{font-size:13.5px;font-weight:800;color:var(--hx-text)}
.demo-try ul,.demo-team ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.demo-try li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--hx-text-2)}
.demo-try li i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--c);color:var(--hx-on)}
.demo-try li i svg{width:12px;height:12px}
/* ③ accounts with role tags */
.demo-team li{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:99px;background:var(--hx-surface);border:1px solid var(--line-soft)}
.demo-team .av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:var(--hx-on);font-size:12.5px;font-weight:900}
.demo-team b{font-size:13.5px;font-weight:800;color:var(--hx-text)}
.demo-team em{padding:2px 8px;border-radius:99px;font-style:normal;font-size:12px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.demo-team li>svg{flex:none;margin-left:auto;width:15px;height:15px;color:var(--hx-blue)}
/* ④ a line that goes up (blue = up, colour-blind rule) */
.demo-tune .ln{display:block;width:100%;height:auto;overflow:visible}
.demo-tune .ar{fill:color-mix(in srgb,var(--hx-blue) 16%,transparent)}
.demo-tune .l{fill:none;stroke:var(--hx-blue);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.demo-tune .pt{fill:var(--hx-surface);stroke:var(--hx-blue);stroke-width:3}
.demo-tune .lb{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:var(--hx-text-2)}
.demo-tune .up{display:inline-flex;align-items:center;gap:5px;color:var(--hx-blue);font-weight:800}
.demo-tune .up svg{width:14px;height:14px}
/* sequence: nodes light one by one as the fill reaches them, each card and its illustration follow */
[data-reveal]:not(.in-view) .aa-tl-card{opacity:0}
[data-reveal]:not(.in-view) .aa-tl-node{background:var(--panel);color:var(--c)}
[data-reveal]:not(.in-view) .aa-tl-rail .seg{width:0}
.in-view .aa-tl-node{animation:aa-tl-on .45s cubic-bezier(.2,.9,.3,1.4) backwards;animation-delay:calc(var(--i) * .7s + .3s)}
.in-view .aa-tl-node::after{animation:aa-tl-ping .9s ease-out;animation-delay:calc(var(--i) * .7s + .45s)}
.in-view .aa-tl-card{animation:aa-up .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i) * .7s + .35s)}
.in-view .demo-goal .bub{animation:aa-up .5s backwards;animation-delay:calc(var(--i) * .7s + .9s)}
.in-view .demo-goal .got{animation:aa-pop .45s cubic-bezier(.2,.9,.3,1.4) backwards;animation-delay:calc(var(--i) * .7s + 1.5s)}
.in-view .demo-try li i{animation:aa-pop .4s cubic-bezier(.2,.9,.3,1.4) backwards;animation-delay:calc(var(--i) * .7s + .9s + var(--k) * .35s)}
.in-view .demo-team li{animation:aa-row .45s backwards;animation-delay:calc(var(--i) * .7s + .9s + var(--k) * .25s)}
.in-view .demo-tune .l{animation:aa-draw 1.2s cubic-bezier(.4,0,.2,1) backwards;animation-delay:calc(var(--i) * .7s + .9s)}
.in-view .demo-tune .ar{animation:aa-fade .6s backwards;animation-delay:calc(var(--i) * .7s + 1.7s)}
.in-view .demo-tune .pt{animation:aa-fade .3s backwards;animation-delay:calc(var(--i) * .7s + .9s + var(--k) * .24s)}
@keyframes aa-tl-on{from{background:var(--panel);color:var(--c);transform:scale(.75)}}
@keyframes aa-tl-ping{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}
@keyframes aa-draw{from{stroke-dashoffset:1}}
@keyframes aa-fade{from{opacity:0}}

/* ================= 7. READY-MADE TOOLS BAND ================= */
.aa-rh{display:flex;align-items:center;gap:22px;padding:26px 28px;border-radius:20px;border:1px solid color-mix(in srgb,var(--c) 40%,var(--line));
  background:radial-gradient(60% 130% at 0% 50%,color-mix(in srgb,var(--c) 12%,transparent),transparent 70%),var(--panel)}
.aa-rh .ic{width:56px;height:56px;border-radius:14px}
.aa-rh .ic svg{width:28px;height:28px}
.aa-rh .tx{flex:1;min-width:0}
.aa-rh h2{font-size:clamp(22px,2vw,28px);font-weight:900;line-height:1.3;color:var(--fg)}
.aa-rh p{margin:6px 0 0;max-width:46em;font-size:16.5px;line-height:1.75;color:var(--fg-2)}
.aa-rh .action{flex:none}

/* ================= responsive ================= */
@media (max-width:1180px){
  .aa-frame{min-height:0}
  .aa-body{grid-template-columns:1fr;gap:36px;padding:42px 36px 36px}
  .aa-hero h1{font-size:clamp(34px,6cqw,56px)}
  .aa-app .hx-win-body{height:318px}
  .aa-build{grid-template-columns:1fr 1fr}
  .aa-build .aa-bc:last-child{grid-column:1 / -1}
  .aa-con{grid-template-columns:1fr}
  .aa-con-nav{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;scroll-snap-type:x proximity}
  .aa-con-nav::-webkit-scrollbar{display:none}
  .aa-con-nav button{flex:none;width:auto;min-height:52px;scroll-snap-align:center}
  .aa-tl-rail{display:none}
  .aa-tl-list{grid-template-columns:1fr;gap:20px}
  .aa-tl-step{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:18px;align-items:start}
  .aa-tl-node{align-self:start;margin-top:24px}
  .aa-tl-card{margin-top:0}
  .aa-tl-step::after{left:16px;top:66px;bottom:-36px;height:auto;margin-left:0}
  .aa-tl-step:last-child::after{display:none}
}
@media (max-width:720px){
  .aa-wrap{padding-top:14px}
  .aa-body{padding:28px 18px 24px;gap:28px}
  .aa-hero h1{font-size:clamp(31px,9cqw,40px)}
  .aa-hero h1 .g{font-size:.66em}
  .aa-now{margin-top:18px}
  .aa-hero .actions .action{flex:1 1 100%}
  .aa-visual{grid-template-columns:1fr;grid-template-areas:"in" "core" "app";gap:30px}
  .aa-ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .aa-in{grid-template-columns:1fr;grid-template-areas:"ic" "b";justify-items:center;row-gap:7px;padding:12px 6px 11px;text-align:center}
  .aa-in small{display:none}
  .aa-in b{font-size:14px}
  .aa-in .ic{width:40px;height:40px}
  .aa-in.is-on{transform:translateY(-4px)}
  .aa-in .ok{right:-5px;top:-6px}
  .aa-orb{width:92px}
  .aa-app .hx-win-body{height:304px}
  .aa-role{padding:12px 12px 13px}
  .aa-role .can li{font-size:13.5px}
  .aa-build{grid-template-columns:1fr}
  .aa-bc-art{height:244px}
  .aa-acc{padding:20px 16px}
  .aa-con-nav button{min-height:48px;padding:6px 12px 6px 7px;font-size:15px}
  .aa-con-nav .ic{width:34px;height:34px}
  .aa-con-win .hx-win-body{min-height:0;padding:18px 14px 20px}
  .accts li{grid-template-columns:32px minmax(0,1fr) auto;gap:10px;padding:9px 10px}
  .accts .st{display:none}
  .accts li.new .st{display:inline-flex;grid-column:2 / -1;justify-self:start}
  .mx{grid-template-columns:minmax(0,1.35fr) repeat(var(--cols,3),minmax(0,1fr))}
  .mx>span{padding:6px 8px;font-size:14px}
  .mx>.mh{font-size:13px}
  .mx .cell.c em{padding:2px 6px;font-size:12px}
  .scp{grid-template-columns:1fr}
  .cf{grid-template-columns:1fr}
  .lgs li{grid-template-columns:46px minmax(0,1fr);row-gap:2px;padding-left:16px}
  .lgs li span{grid-column:2}
  .aa-hub-core{display:none}
  .aa-ks{min-height:0;padding:54px 12px 18px}
  .aa-chat .st{margin-left:0}
  .aa-rh{flex-direction:column;align-items:flex-start;padding:22px 20px}
  .aa-bc-body,.aa-tl-card{padding:20px}
  .aa-tl-step{column-gap:14px}
  .aa-rh .action{width:100%;justify-content:center}
}

/* ================= light theme ================= */
html[data-theme="light"] .aa-hero{box-shadow:0 30px 60px -40px rgba(15,40,70,.35),0 0 100px -60px var(--ac)}
html[data-theme="light"] .aa-app{box-shadow:0 34px 60px -36px rgba(15,40,70,.4),0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent),0 0 50px -26px color-mix(in srgb,var(--c) 45%,transparent)}
html[data-theme="light"] .aa-wire .w{stroke:color-mix(in srgb,var(--hx-text) 16%,transparent)}
html[data-theme="light"] .aa-bot{background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--hx-ai) 50%,#fff),var(--hx-ai) 60%,color-mix(in srgb,var(--hx-ai) 80%,#1E0F55))}
html[data-theme="light"] .scp .sw i{box-shadow:0 1px 3px rgba(15,40,70,.35)}
html[data-theme="light"] .aa-wrap{--aa-shadow:0 10px 26px -18px rgba(15,40,70,.24)}
html[data-theme="light"] .aa-tl-rail .spark{background:var(--hx-sub)}
html[data-theme="light"] .aa-badge{background:color-mix(in srgb,var(--hx-ai) 12%,#fff);color:var(--hx-ai);border:1px solid color-mix(in srgb,var(--hx-ai) 35%,transparent)}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  .aa-hero *,.aa-hero *::before,.aa-hero *::after,.aa-build *,.aa-con *,.aa-tl *,.aa-tl *::before,.aa-tl *::after,.aa-chat *{animation:none!important;transition:none!important}
  [data-reveal] .aa-bc,[data-reveal] .aa-tl-card{opacity:1!important;animation:none!important}
  [data-reveal] .aa-tl-node{background:var(--c)!important;color:var(--hx-on)!important}
  [data-reveal] .aa-tl-rail .seg{width:calc(100% / var(--segs,3))!important}
  .aa-tl-rail .spark{display:none}
  .aa-wire .f{display:none}
}