/* =====================================================================
   Halofy landing — restyled in the halofy.ai design language
   Tokens, fonts, radii, shadows and button recipes mirror the live site.
   ===================================================================== */

@font-face{font-family:"FK Raster";src:url(assets/fonts/FK_Raster_Roman_Compact_Smooth.ttf) format("truetype");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(assets/fonts/PP_Neue_Montreal_Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(assets/fonts/PP_Neue_Montreal_Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(assets/fonts/PP_Neue_Montreal_Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}

#aiworkstation{
  --halo-ink:#0b0d0b;               --halo-ink-rgb:11 13 11;
  --halo-mineral:#f8faf5;           --halo-mineral-rgb:248 250 245;
  --halo-sage:#d7dbd9;              --halo-sage-rgb:215 219 217;
  --halo-sage-soft:#f2f3f2;
  --halo-olive:#8d9491;             --halo-olive-rgb:141 148 145;
  --halo-evergreen:#1a322b;         --halo-evergreen-rgb:26 50 43;
  --halo-evergreen-hover:#152822;
  --halo-stone:#e6e6e1;             --halo-stone-rgb:230 230 225;
  --halo-mint:#e8ecea;              --halo-mint-rgb:232 236 234;

  --color-ink:var(--halo-ink);
  --color-muted:#4b5548;
  --color-muted-2:#566151;
  --color-line:#e8ece2;
  --color-panel:#fff;
  --color-canvas:#fff;
  --color-accent:var(--halo-evergreen);
  --theme-focus:#315f51;

  --halo-brushed-metal:radial-gradient(ellipse at 16% 8%, rgb(var(--halo-mineral-rgb) / 22%), transparent 34%), radial-gradient(ellipse at 82% 86%, rgb(var(--halo-mineral-rgb) / 14%), transparent 38%), linear-gradient(118deg, rgb(var(--halo-mineral-rgb) / 18%) 0%, transparent 18%, rgb(var(--halo-mineral-rgb) / 10%) 42%, transparent 58%, rgb(var(--halo-ink-rgb) / 22%) 100%);
  --halo-onyx-metal:radial-gradient(circle at 18% 12%, rgb(var(--halo-mineral-rgb) / 26%), transparent 18%), radial-gradient(circle at 78% 86%, rgb(var(--halo-mineral-rgb) / 16%), transparent 28%), var(--halo-brushed-metal), linear-gradient(135deg, var(--halo-ink) 0%, #10171a 30%, #1b2427 52%, #283336 74%, #0b1011 100%);
  --halo-slate-metal:radial-gradient(120% 70% at 12% 8%, rgb(var(--halo-mineral-rgb) / 12%), transparent 30%), radial-gradient(90% 72% at 86% 18%, #4654522e, transparent 42%), linear-gradient(132deg, #050706 0%, #0a0f10 30%, #171f22 54%, #0d1113 76%, #050605 100%);
  --halo-frosted-glass:radial-gradient(circle at 18% 0%, rgb(var(--halo-mineral-rgb) / 74%), transparent 42%), linear-gradient(135deg, rgb(var(--halo-mineral-rgb) / 72%) 0%, rgb(var(--halo-stone-rgb) / 42%) 48%, rgb(var(--halo-sage-rgb) / 22%) 100%);
  --halo-frosted-border:rgb(var(--halo-evergreen-rgb) / 18%);
  --halo-frosted-shadow:0 18px 48px rgb(var(--halo-ink-rgb) / 7%), inset 0 1px 0 rgb(var(--halo-mineral-rgb) / 78%);
  --halo-metal-shadow:0 18px 44px rgb(var(--halo-ink-rgb) / 30%), inset 0 1px 0 rgb(var(--halo-mineral-rgb) / 22%);
  --halo-soft-surface:radial-gradient(circle at 76% 14%, rgb(var(--halo-sage-rgb) / 24%), transparent 28%), linear-gradient(180deg, #fdfdfa 0%, var(--halo-mineral) 100%);
  --halo-mist-gradient:radial-gradient(circle at 76% 18%, rgb(var(--halo-sage-rgb) / 24%), transparent 30%), linear-gradient(180deg, #fff 0%, #fff 100%);
  --card-shadow:inset 0 1px 0 #ffffffe0, 0 14px 28px -22px rgb(var(--halo-ink-rgb) / 22%);
  --glass-panel:radial-gradient(80% 58% at 12% 0,#fffffffa,#0000 70%),radial-gradient(72% 64% at 94% 100%,#dce6ee40,#0000 74%),linear-gradient(145deg,#ffffffeb,#f3f6f8c2);
  --glass-panel-shadow:0 24px 58px -30px #18222847,0 1px 2px #1822280d,0 0 0 .5px #ffffffe0,inset 0 1px #fffffffa,inset 0 -1px #080c0e0d;

  --font-site:"PP Neue Montreal","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-raster:"FK Raster","Handjet","Spline Sans",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --site-container-max:1700px;
  --site-container-pad:24px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:50px;
}
@media (min-width:901px){#aiworkstation{--site-container-pad:48px}}

/* ---------- base ---------- */
#aiworkstation *,#aiworkstation *::before,#aiworkstation *::after{box-sizing:border-box}
#aiworkstation{min-height:100%;font-family:var(--font-site);margin:0;font-size:100%;overflow-x:clip;scroll-behavior:smooth}
#aiworkstation{background:var(--color-canvas);min-height:100%;color:var(--color-ink);font-family:var(--font-site);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;margin:0;overflow-x:clip;line-height:1.5}
#aiworkstation a{color:inherit;text-decoration:none}
#aiworkstation button,#aiworkstation input{font:inherit;color:inherit}
#aiworkstation button{cursor:pointer;background:none;border:0;padding:0}
#aiworkstation img,#aiworkstation svg,#aiworkstation video{max-width:100%;display:block}
#aiworkstation main{background:var(--color-canvas)}
#aiworkstation h1,#aiworkstation h2,#aiworkstation h3,#aiworkstation h4,#aiworkstation p{margin:0}
#aiworkstation ul{list-style:none;margin:0;padding:0}
#aiworkstation :focus-visible{outline:2px solid rgb(var(--halo-evergreen-rgb) / 55%);outline-offset:3px}
#aiworkstation ::selection{background:var(--halo-sage);color:var(--halo-ink)}
#aiworkstation .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#aiworkstation .container{max-width:var(--site-container-max);margin:0 auto;padding:0 clamp(24px,4vw,48px)}
#aiworkstation .container--narrow{max-width:1240px}

/* ---------- type ---------- */
#aiworkstation .h1{max-width:20ch;color:var(--color-ink);letter-spacing:-.028em;font-size:clamp(27px,3.78vw,53.2px);font-weight:500;line-height:1.06;text-wrap:balance}
#aiworkstation .h2{letter-spacing:-1.04px;font-size:48px;font-weight:500;line-height:1.08;margin:0 0 16px;max-width:22ch;text-wrap:balance}
#aiworkstation .h3{letter-spacing:-.44px;font-size:22px;font-weight:500;line-height:1.2;margin:0 0 12px}
#aiworkstation .lede{color:var(--color-muted-2);font-size:22px;line-height:1.5;max-width:58ch;letter-spacing:-.01em}
#aiworkstation .body{color:var(--color-muted);letter-spacing:-.2px;font-size:19px;line-height:1.6}
#aiworkstation .section__head{margin-bottom:clamp(36px,4vw,56px);max-width:70ch}
#aiworkstation .section__head .lede{margin-top:6px}
@media (max-width:1200px){#aiworkstation .h1{max-width:16ch;font-size:clamp(38px,6.3vw,62px)}}
@media (max-width:760px){#aiworkstation .h1{letter-spacing:-.022em;max-width:14ch;font-size:clamp(34px,9.2vw,40px);line-height:1.1}}
@media (max-width:900px){
  #aiworkstation .h2{letter-spacing:-.56px;font-size:28px}
  #aiworkstation .lede{font-size:17px}
  #aiworkstation .body{font-size:17px}
}

#aiworkstation{
  /* dark metal pills (hero pill, download row, section eyebrows) */
  --metal-bg:linear-gradient(135deg,#2e3338 0%,#181c20 40%,#0a0c0e 100%);
  --metal-gloss:linear-gradient(180deg,#ffffff42 0%,#ffffff1a 38%,#ffffff00 55%);
  --metal-line:#ffffff29;
  --metal-shadow:inset 0 1px #ffffff4d,inset 0 -1px #00000080,0 14px 30px -16px #050708b3;
  --metal-ink:#f2f4f5;
}
/* the gloss lives on a ::before so the shine sweep (::after) stays free */
#aiworkstation .metal{position:relative;overflow:hidden;background:var(--metal-bg);border:1px solid var(--metal-line);box-shadow:var(--metal-shadow);color:var(--metal-ink)}
#aiworkstation .metal::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--metal-gloss);pointer-events:none}
#aiworkstation .metal > *{position:relative;z-index:1}
/* eyebrow pills */
#aiworkstation .eyebrow{position:relative;overflow:hidden;border:1px solid var(--metal-line);background:var(--metal-bg);box-shadow:var(--metal-shadow);color:var(--metal-ink);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;align-items:center;gap:10px;margin-bottom:16px;padding:8px 16px;font-size:12px;font-weight:700;line-height:1.3;display:inline-flex}
#aiworkstation .eyebrow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--metal-gloss);pointer-events:none}
#aiworkstation .eyebrow > *{position:relative;z-index:1}
#aiworkstation .eyebrow--sage{letter-spacing:.22em;padding:6px 16px;font-size:11px}
#aiworkstation .eyebrow--dark{letter-spacing:.22em;font-size:11px;padding:6px 16px}
#aiworkstation .raster{font-family:var(--font-raster);color:rgb(var(--halo-evergreen-rgb) / 30%);letter-spacing:.06em;font-size:18px;font-weight:500}

/* ---------- buttons ---------- */
#aiworkstation .btn{font-family:var(--font-site);white-space:nowrap;cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:14px 26px;font-size:15px;font-weight:600;line-height:1;text-decoration:none;transition:color .18s,background .18s,border-color .18s,box-shadow .18s,transform .18s;display:inline-flex;min-height:46px;letter-spacing:.005em}
#aiworkstation .btn:active{transform:translateY(0)}
#aiworkstation .btn--onyx{border:1px solid rgb(var(--halo-mineral-rgb) / 20%);background:var(--halo-onyx-metal);box-shadow:var(--halo-metal-shadow);color:var(--halo-mineral)}
#aiworkstation .btn--onyx:hover{border-color:rgb(var(--halo-mineral-rgb) / 38%);box-shadow:0 22px 52px rgb(var(--halo-ink-rgb) / 34%), inset 0 1px 0 rgb(var(--halo-mineral-rgb) / 26%);transform:translateY(-1px)}
#aiworkstation .btn--glass{border:1px solid var(--halo-frosted-border);background:var(--halo-frosted-glass);color:var(--color-accent);box-shadow:var(--halo-frosted-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#aiworkstation .btn--glass:hover{border-color:rgb(var(--halo-evergreen-rgb) / 34%);color:var(--halo-evergreen-hover);box-shadow:0 18px 42px rgb(var(--halo-evergreen-rgb) / 12%), inset 0 1px 0 rgb(var(--halo-mineral-rgb) / 88%);transform:translateY(-1px)}
#aiworkstation .btn--ghost{background:rgb(var(--halo-ink-rgb) / 6%);color:var(--color-ink);border:1px solid transparent}
#aiworkstation .btn--ghost:hover{background:rgb(var(--halo-ink-rgb) / 10%);color:var(--halo-evergreen)}
#aiworkstation .btn--sm{min-height:30px;padding:8.4px 15.6px;font-size:11.5px}
#aiworkstation .btn svg{width:16px;height:16px;flex:none}

/* ButtonLink family (square, uppercase) */
#aiworkstation .blink{isolation:isolate;letter-spacing:.08em;text-transform:uppercase;border:1px solid transparent;border-radius:4px;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:11px 22px;font-size:12px;font-weight:700;line-height:1;transition:transform .18s,box-shadow .18s,background .18s,color .18s,border-color .18s;display:inline-flex;position:relative;overflow:hidden;cursor:pointer;white-space:nowrap}
#aiworkstation .blink:hover{transform:translateY(-1px)}
#aiworkstation .blink:active{transform:translateY(0)}
#aiworkstation .blink--primary{color:#fff;background:#000;border-color:#000}
#aiworkstation .blink--outline{border-color:var(--halo-frosted-border);background:var(--halo-frosted-glass);color:var(--color-accent);box-shadow:var(--halo-frosted-shadow);backdrop-filter:blur(18px)}
#aiworkstation .blink--outline:hover{border-color:rgb(var(--halo-evergreen-rgb) / 34%);color:var(--halo-evergreen-hover)}
#aiworkstation .blink--light{border-color:rgb(var(--halo-sage-rgb) / 34%);background:var(--halo-frosted-glass);color:var(--color-accent);box-shadow:inset 0 1px 0 rgb(var(--halo-mineral-rgb) / 76%)}
#aiworkstation .blink--light:hover{border-color:rgb(var(--halo-evergreen-rgb) / 26%);color:var(--halo-evergreen-hover)}
#aiworkstation .blink--white{color:#000;background:#fff;border-color:#fff}
#aiworkstation .blink--mint{border-color:rgb(232 236 234 / 40%);background:rgb(232 236 234 / 12%);color:var(--halo-mint)}
#aiworkstation .blink--mint:hover{background:rgb(232 236 234 / 20%)}
#aiworkstation .blink--disabled,#aiworkstation .blink[aria-disabled=true]{border-color:rgb(var(--halo-ink-rgb) / 12%);background:rgb(var(--halo-ink-rgb) / 4%);color:rgb(var(--halo-ink-rgb) / 42%);box-shadow:none;cursor:not-allowed;transform:none}

/* ---------- cards ---------- */
#aiworkstation .card{border:1px solid var(--color-line);background:linear-gradient(180deg,#fdfdfa 0%,var(--halo-mineral) 100%);box-shadow:var(--card-shadow);border-radius:20px;padding:32px;transition:transform .32s var(--ease-out),border-color .32s,box-shadow .32s}
#aiworkstation .card--dark{background:linear-gradient(168deg,rgb(var(--halo-ink-rgb) / 78%) 0%,rgb(var(--halo-ink-rgb) / 86%) 55%,rgb(var(--halo-ink-rgb) / 92%) 100%),url(assets/brand/background.svg) center/cover no-repeat;background-color:#10171a;color:var(--color-panel);border:1px solid rgb(var(--halo-mineral-rgb) / 26%);box-shadow:0 22px 80px rgb(var(--halo-ink-rgb) / 30%), inset 0 1px 0 rgb(var(--halo-mineral-rgb) / 26%)}
#aiworkstation .glass{backdrop-filter:blur(24px) saturate(112%);-webkit-backdrop-filter:blur(24px) saturate(112%);background:var(--glass-panel);border:1px solid #080c0e17;border-radius:20px;box-shadow:var(--glass-panel-shadow)}

/* ---------- header ---------- */
#aiworkstation .site-header{position:fixed;top:0;left:0;right:0;z-index:10000;color:var(--color-ink);background:transparent;border-bottom:1px solid transparent;padding:12px 0;transition:padding .3s,border-color .3s,box-shadow .3s}
#aiworkstation .site-header[data-scrolled=true]{padding:8px 0}
#aiworkstation .site-header__overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(var(--halo-mineral-rgb) / 83%) 0%,rgb(var(--halo-mineral-rgb) / 71%) 100%);box-shadow:0 14px 36px -26px rgb(var(--halo-ink-rgb) / 45%), inset 0 1px 0 #ffffff8c;opacity:0;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);transition:opacity .32s}
#aiworkstation .site-header[data-scrolled=true] .site-header__overlay,#aiworkstation .site-header[data-menu-open=true] .site-header__overlay{opacity:1}
#aiworkstation .site-header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
#aiworkstation .brand{display:inline-flex;align-items:center;gap:4px;transition:transform .18s}
#aiworkstation .brand:hover{transform:scale(1.05)}
#aiworkstation .brand__mark{height:26px;width:auto}
#aiworkstation .brand__word{color:var(--halo-evergreen);letter-spacing:-.035em;font-size:27px;font-weight:500;line-height:1}
#aiworkstation .nav{display:flex;align-items:center;gap:2px;justify-self:center}
#aiworkstation .nav a{color:rgb(var(--halo-ink-rgb) / 76%);letter-spacing:.01em;border-radius:999px;padding:11px 18px;font-size:11.9px;font-weight:500;line-height:1;transition:color .18s,background .18s}
#aiworkstation .nav a:hover{color:var(--color-ink);background:rgb(var(--halo-ink-rgb) / 6%)}
#aiworkstation .site-header__actions{justify-self:end;display:flex;align-items:center;gap:8px}
#aiworkstation .menu-toggle{display:none}
#aiworkstation .mobile-nav{display:none}
@media (max-width:1040px){
  #aiworkstation .nav,#aiworkstation .site-header__actions .btn:not(.menu-toggle){display:none}
  #aiworkstation .site-header__actions .menu-toggle{display:inline-flex}
  #aiworkstation .site-header__inner{grid-template-columns:1fr auto}
  #aiworkstation .mobile-nav[data-open=true]{display:flex;flex-direction:column;gap:4px;padding:14px 0 10px}
  #aiworkstation .mobile-nav a{padding:12px 6px;font-size:16px;font-weight:500;border-top:1px solid var(--color-line)}
  #aiworkstation .mobile-nav .btn{align-self:flex-start;margin-top:10px}
}
@media (max-width:760px){#aiworkstation .brand__mark{height:22px}#aiworkstation .brand__word{font-size:23px}}

/* ---------- hero ---------- */
#aiworkstation .hero{position:relative;min-height:max(608px,100svh);padding-top:calc(var(--header-h) + 96px);padding-bottom:clamp(48px,7vw,96px);overflow:clip;isolation:isolate}
#aiworkstation .hero__bg{position:absolute;inset:0;z-index:-2}
#aiworkstation .hero__bg img,#aiworkstation .hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
#aiworkstation .hero__bg video{opacity:0;transition:opacity 1.2s ease}
#aiworkstation .hero__bg video[data-ready=true]{opacity:1}
#aiworkstation .hero__bg--mobile{display:none}
#aiworkstation .hero__mist{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(255 255 255 / 96%) 0%,rgb(255 255 255 / 88%) 28%,rgb(251 252 247 / 62%) 52%,rgb(251 252 247 / 22%) 72%,rgb(251 252 247 / 62%) 88%,#fff 100%)}
#aiworkstation .hero__copy{text-align:center;display:flex;flex-direction:column;align-items:center}
#aiworkstation .hero__copy .h1{margin:0 auto}
#aiworkstation .hero__lede{max-width:52ch;color:var(--color-muted);letter-spacing:-.01em;margin:clamp(16px,2.4vh,26px) auto 0;font-size:clamp(15px,1.155vw,17.5px);font-weight:400;line-height:1.5}
#aiworkstation .hero__ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(22px,3vh,32px)}
/* download group: one label, three platform buttons */
#aiworkstation .dl{display:flex;flex-direction:column;align-items:center;gap:12px}
#aiworkstation .dl__label{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent)}
#aiworkstation .dl__row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}
#aiworkstation .dl__btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;border-radius:999px;color:#eef0f2;font-size:15px;font-weight:600;white-space:nowrap;border:1px solid var(--metal-line);background:var(--metal-bg);box-shadow:var(--metal-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:color .18s,border-color .18s,transform .18s,box-shadow .18s}
#aiworkstation .dl__btn::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--metal-gloss);pointer-events:none}
#aiworkstation .dl__btn svg{width:17px;height:17px;flex:none}
#aiworkstation .dl__btn:hover{border-color:#ffffff60;color:#fff;box-shadow:var(--metal-shadow),inset 0 1px #ffffff2b;transform:translateY(-1px)}
#aiworkstation .dl__btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}
#aiworkstation .dl__btn:active{transform:translateY(0)}
#aiworkstation .dl__mac{position:relative;z-index:5}
#aiworkstation .dl__mac summary{cursor:pointer;list-style:none}
#aiworkstation .dl__mac summary::-webkit-details-marker{display:none}
#aiworkstation .dl__chevron{font-size:16px;line-height:1;transition:transform .18s}
#aiworkstation .dl__mac[open] .dl__chevron{transform:rotate(180deg)}
#aiworkstation .dl__options{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;padding:6px;border:1px solid var(--color-line);border-radius:16px;background:#fff;box-shadow:0 12px 32px rgb(0 0 0 / 14%);text-align:left}
#aiworkstation .dl__options a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:10px;color:var(--color-accent);font-size:14px;font-weight:600}
#aiworkstation .dl__options a:hover,#aiworkstation .dl__options a:focus-visible{background:rgb(var(--halo-evergreen-rgb) / 8%)}
#aiworkstation .dl__options a:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
#aiworkstation .dl__options a span{font-size:12px;font-weight:400;color:var(--color-muted-2)}
#aiworkstation .dl__note{font-size:13px;color:var(--color-muted-2);margin:0}
#aiworkstation .dl__note a{color:var(--color-accent);font-weight:600;border-bottom:1px solid rgb(var(--halo-evergreen-rgb) / 30%)}
#aiworkstation .dl__note a:hover{color:var(--halo-evergreen-hover);border-color:currentColor}
@media (max-width:480px){
  #aiworkstation .dl__row{width:100%;gap:10px}
  #aiworkstation .dl__btn{padding:0 16px;font-size:14px;min-height:44px}
  #aiworkstation .dl__btn svg{width:15px;height:15px}
}
#aiworkstation .hero__caption{margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted-2);font-weight:700}

/* hero pill (brushed silver; same frosted build + sweeping shine as the gold original) */
#aiworkstation .pill{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#f2f4f5;letter-spacing:.01em;white-space:nowrap;background:var(--metal-bg);border:1px solid var(--metal-line);border-radius:999px;align-items:center;gap:10px;margin-bottom:clamp(22px,3.12vh,34px);padding:10px 22px;font-size:15px;font-weight:600;line-height:1;display:inline-flex;position:relative;overflow:hidden;box-shadow:var(--metal-shadow)}
/* glossy highlight across the top half; ::after keeps the travelling shine */
#aiworkstation .pill::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--metal-gloss);pointer-events:none;z-index:0}
#aiworkstation .pill > *{position:relative;z-index:1}
#aiworkstation .pill::after{content:"";background:linear-gradient(110deg,#0000 30%,#ffffff4d 50%,#0000 70%);animation:hero-pill-shine 3.4s ease-in-out 1.2s infinite;position:absolute;inset:0;transform:translateX(-120%)}
#aiworkstation .pill__shine{color:#f2f4f5;font-weight:600}
/* silver sparkle, replacing the gold ✨ emoji */
#aiworkstation .pill__spark{width:15px;height:15px;flex:none;fill:#c4ccd1}
@keyframes hero-pill-shine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
#aiworkstation .reveal{overflow:hidden;display:block}
#aiworkstation .reveal span{display:block;animation:hero-title-reveal .8s var(--ease-out) both}
#aiworkstation .reveal:nth-child(2) span{animation-delay:.08s}
@keyframes hero-title-reveal{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* showcase */
#aiworkstation .showcase{margin-top:clamp(40px,6vh,72px)}
#aiworkstation .showcase__bar{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}
#aiworkstation .showcase__label{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent)}
#aiworkstation .iconbtn{width:34px;height:34px;border-radius:999px;display:inline-grid;place-items:center;border:1px solid var(--halo-frosted-border);background:var(--halo-frosted-glass);color:var(--color-accent);box-shadow:var(--halo-frosted-shadow);transition:transform .18s,border-color .18s}
#aiworkstation .iconbtn:hover{transform:translateY(-1px);border-color:rgb(var(--halo-evergreen-rgb) / 34%)}
#aiworkstation .iconbtn svg{width:16px;height:16px}
#aiworkstation .dots{display:inline-flex;gap:8px}
#aiworkstation .dots button{width:8px;height:8px;border-radius:999px;background:rgb(var(--halo-evergreen-rgb) / 18%);transition:background .18s,transform .18s}
#aiworkstation .dots button[aria-current=true]{background:var(--halo-evergreen);transform:scale(1.25)}
/* product frames: white rim → grainy dusk-plum band (the site's own purple, from the hero / ring imagery) → the app */
#aiworkstation{--plum:#2a2238;--plum-2:#584868;--plum-3:#7c6a95}
#aiworkstation .frame{position:relative;border-radius:26px;padding:clamp(28px,3.4vw,48px);border:1px solid rgb(var(--halo-ink-rgb) / 10%);box-shadow:0 40px 100px -40px rgb(var(--halo-ink-rgb) / 45%),var(--card-shadow);background:radial-gradient(120% 90% at 8% 0%,var(--plum-3) 0%,transparent 42%),radial-gradient(110% 80% at 96% 100%,#6a5a86 0%,transparent 46%),linear-gradient(160deg,var(--plum-2) 0%,var(--plum) 55%,#1a1626 100%);transform-origin:50% 0;transition:transform .6s var(--ease-out)}
/* grain over the plum band */
#aiworkstation .frame::after,#aiworkstation .agents-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;background:url(assets/img/grain.png) 0 0/256px 256px,url(assets/img/grain.png) 97px 61px/256px 256px;image-rendering:pixelated;mix-blend-mode:screen;opacity:.38;pointer-events:none}
/* the pale lilac bloom of the reference: brighter grain where the surround is lit (top-left / bottom-right) */
#aiworkstation .frame::before,#aiworkstation .agents-stage::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(90% 70% at 4% 0%,rgb(214 200 240 / 55%) 0%,transparent 48%),radial-gradient(80% 60% at 100% 100%,rgb(190 176 220 / 40%) 0%,transparent 50%);pointer-events:none}
/* white rim hugging the app */
#aiworkstation .slides,#aiworkstation .agents-stage__inner{outline:2px solid #fff;outline-offset:0;box-shadow:0 22px 50px -24px rgb(0 0 0 / 75%)}
#aiworkstation .slides{position:relative;z-index:1;border-radius:12px;overflow:hidden;aspect-ratio:16/9.6;min-height:420px}
#aiworkstation .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
#aiworkstation .slide[data-active=true]{opacity:1;pointer-events:auto}

/* ---------- app window mockups ---------- */
#aiworkstation .win{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;font-size:13px;line-height:1.35;--win-bg:#fff;--win-ink:var(--halo-ink);--win-muted:#5b665a;--win-line:#e8ece2;--win-pane:#f8faf5;--win-accent:var(--halo-evergreen);background:var(--win-bg);color:var(--win-ink)}
#aiworkstation .win--dark{--win-bg:#0b1211;--win-ink:#e6eeea;--win-muted:#8a9a94;--win-line:rgb(232 236 234 / 12%);--win-pane:#0f1716;--win-accent:var(--halo-mint)}
#aiworkstation .win--slate{--win-bg:#070b0a;--win-ink:#eef3ee;--win-muted:#9eaa9c;--win-line:rgb(232 236 234 / 14%);--win-pane:#0d1412;--win-accent:var(--halo-mint)}
#aiworkstation .win__bar{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--win-line);background:var(--win-pane);min-width:0;overflow:hidden}
#aiworkstation .win__lights{display:inline-flex;gap:6px}
#aiworkstation .win__lights i{width:10px;height:10px;border-radius:999px;background:var(--win-line)}
#aiworkstation .win__brand{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px}
#aiworkstation .win__brand span.mark{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e6eeea}
#aiworkstation .win__brand img{width:11px;height:auto}
#aiworkstation .win__tab{padding:5px 10px;border-radius:999px;background:rgb(127 127 127 / 12%);font-size:12px;font-weight:500;white-space:nowrap}
#aiworkstation .win__tools{margin-left:auto;display:inline-flex;gap:6px}
#aiworkstation .win__tools i{width:22px;height:22px;border-radius:7px;border:1px solid var(--win-line);display:block}
#aiworkstation .win__body{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:0;min-width:0}
#aiworkstation .win__side{border-right:1px solid var(--win-line);background:var(--win-pane);padding:12px;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}
#aiworkstation .side__search{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;border:1px solid var(--win-line);color:var(--win-muted);font-size:12px}
#aiworkstation .side__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--win-muted);font-weight:700;padding:6px 2px 2px}
/* project rows: fixed 16px icon column (provider logo, or empty) so titles align down the list; text truncates, never spills */
#aiworkstation .side__row{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;padding:6px 6px;border-radius:8px;align-items:center}
#aiworkstation .side__row[data-selected=true]{background:rgb(127 127 127 / 10%)}
#aiworkstation .side__row > div{min-width:0}
#aiworkstation .side__ico{width:16px;height:16px;display:grid;place-items:center}
#aiworkstation .side__ico img,#aiworkstation .side__ico svg{width:14px;height:14px;object-fit:contain}
#aiworkstation .side__meta{font-size:11px;color:var(--win-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .side__title{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .side__title img,#aiworkstation .side__title svg{width:14px;height:14px;vertical-align:-2px}
#aiworkstation .widget{margin-top:auto;border:1px solid var(--win-line);border-radius:12px;padding:10px 12px;background:rgb(127 127 127 / 6%);font-size:12px;display:flex;flex-direction:column;gap:6px}
#aiworkstation .widget__head{display:flex;justify-content:space-between;align-items:center;font-weight:600;cursor:pointer}
#aiworkstation .widget__head img{width:14px;height:14px}
#aiworkstation .live{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--win-accent);font-weight:700;display:inline-flex;align-items:center;gap:5px}
#aiworkstation .live::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;animation:halo-pulse 1.6s ease-in-out infinite}
@keyframes halo-pulse{0%,100%{opacity:1}50%{opacity:.35}}
#aiworkstation .widget__sub{display:flex;justify-content:space-between;color:var(--win-muted);font-size:11px}
#aiworkstation .kv{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:12px}
#aiworkstation .kv dt{color:var(--win-muted)}#aiworkstation .kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
#aiworkstation .bar{height:6px;border-radius:999px;background:rgb(127 127 127 / 18%);overflow:hidden}
#aiworkstation .bar i{display:block;height:100%;background:var(--win-accent);border-radius:999px;transition:width .6s var(--ease-out)}
#aiworkstation .widget__note{font-size:11px;color:var(--win-muted)}
#aiworkstation .win__main{display:grid;grid-template-rows:auto 1fr;min-height:0;min-width:0}
#aiworkstation .main__head{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--win-line);font-size:12px;min-width:0}
#aiworkstation .main__head .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aiworkstation .crumb{font-weight:600}#aiworkstation .crumb b{font-weight:500;color:var(--win-muted)}
#aiworkstation .main__actions{margin-left:auto;display:inline-flex;gap:6px;align-items:center}
#aiworkstation .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid var(--win-line);font-size:11px;color:var(--win-ink);background:rgb(127 127 127 / 8%);white-space:nowrap}
#aiworkstation .chip img,#aiworkstation .chip svg{width:12px;height:12px}
#aiworkstation .badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:10px;font-weight:700;background:var(--win-accent);color:var(--win-bg)}
#aiworkstation .session{position:relative;padding:18px;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}
#aiworkstation .session__bg{position:absolute;inset:0;object-fit:cover;opacity:.55;z-index:0}
#aiworkstation .session__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgb(11 18 17 / 20%),rgb(11 18 17 / 78%));z-index:0}
#aiworkstation .win--light .session__scrim{background:linear-gradient(180deg,rgb(255 255 255 / 40%),rgb(255 255 255 / 90%))}
#aiworkstation .session > :not(.session__bg):not(.session__scrim){position:relative;z-index:1}
#aiworkstation .msg{max-width:62ch;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5}
#aiworkstation .msg--user{align-self:flex-end;background:rgb(255 255 255 / 92%);color:var(--halo-ink);border:1px solid rgb(11 13 11 / 8%);box-shadow:0 8px 18px -12px rgb(0 0 0 / 40%)}
#aiworkstation .msg--ai{align-self:flex-start;background:rgb(11 18 17 / 62%);color:#e6eeea;border:1px solid rgb(232 236 234 / 16%);backdrop-filter:blur(8px)}
#aiworkstation .win--light .msg--ai{background:rgb(255 255 255 / 80%);color:var(--halo-ink);border:1px solid rgb(26 50 43 / 12%)}
#aiworkstation .msg code{font-family:var(--font-mono);font-size:12px;padding:1px 5px;border-radius:5px;background:rgb(127 127 127 / 18%)}
#aiworkstation .status{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--halo-sage);font-weight:700;opacity:.9}
#aiworkstation .win--light .status{color:var(--halo-evergreen)}
#aiworkstation .composer{margin-top:auto;border-radius:14px;border:1px solid rgb(232 236 234 / 18%);background:rgb(7 11 10 / 70%);backdrop-filter:blur(14px);padding:10px 12px;display:flex;flex-direction:column;gap:8px;color:#e6eeea}
#aiworkstation .win--light .composer{background:rgb(255 255 255 / 88%);color:var(--halo-ink);border:1px solid rgb(26 50 43 / 12%)}
#aiworkstation .composer__hint{font-size:12px;color:currentColor;opacity:.6}
#aiworkstation .composer__row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#aiworkstation .composer__row .send{margin-left:auto;width:28px;height:28px;border-radius:999px;background:var(--win-accent);color:var(--win-bg);display:inline-grid;place-items:center}
#aiworkstation .composer__row .send svg{width:14px;height:14px}

/* six-session grid (slide 2) */
#aiworkstation .six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:10px;padding:12px;min-height:0;overflow:hidden}
#aiworkstation .six__card{position:relative;border-radius:12px;border:1px solid var(--win-line);overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:10px;font-size:11.5px;cursor:pointer;background:#fff;transition:border-color .18s,box-shadow .18s}
#aiworkstation .six__card[data-selected=true]{border-color:var(--halo-evergreen);box-shadow:0 0 0 2px rgb(26 50 43 / 12%)}
#aiworkstation .six__card img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18}
#aiworkstation .six__card > :not(.bg){position:relative}
#aiworkstation .six__crumb{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:11px}
#aiworkstation .six__ask{font-weight:500}
#aiworkstation .six__peer{font-size:10.5px;color:var(--halo-evergreen);font-weight:600}
#aiworkstation .six__snip{color:#3c463b;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#aiworkstation .six__status{margin-top:auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--halo-evergreen)}
#aiworkstation .six__foot{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--win-muted);border-top:1px solid var(--win-line);padding-top:6px}
#aiworkstation .stats{display:grid;gap:4px;font-size:11px}
#aiworkstation .stats div{display:grid;grid-template-columns:82px 1fr auto;align-items:center;gap:6px}
#aiworkstation .stats .bar{height:4px}

/* canvas slide */
#aiworkstation .win__main--split{grid-template-rows:1fr}
#aiworkstation .split{display:grid;grid-template-columns:1fr 1fr;min-height:0;height:100%}
#aiworkstation .split > *{min-height:0}
#aiworkstation .canvas{border-left:1px solid var(--win-line);display:grid;grid-template-rows:auto auto 1fr auto;min-height:0;background:var(--win-pane)}
#aiworkstation .canvas__tabs{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--win-line);font-size:12px}
#aiworkstation .canvas__tabs .tab{padding:4px 10px;border-radius:999px}
#aiworkstation .canvas__tabs .tab[aria-current=true]{background:rgb(127 127 127 / 14%)}
#aiworkstation .canvas__note{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:11.5px;color:var(--win-muted);border-bottom:1px solid var(--win-line);gap:8px}
#aiworkstation .canvas__stage{position:relative;min-height:0;cursor:crosshair}
#aiworkstation .canvas__stage svg{width:100%;height:100%}
#aiworkstation .shape{cursor:pointer}
#aiworkstation .shape rect{fill:rgb(232 236 234 / 8%);stroke:#e8ecea;stroke-width:1.6;stroke-linejoin:round}
#aiworkstation .shape text{font-family:"Virgil","Segoe Print","Bradley Hand",var(--font-site);font-size:13px;fill:#eef3ee}
#aiworkstation .shape[data-selected=true] rect{stroke:#fff;stroke-width:2.4;fill:rgb(232 236 234 / 18%)}
#aiworkstation .shape .pin{font-family:var(--font-site);font-size:9.5px;fill:#e8ecea}
#aiworkstation .arrow{stroke:#e8ecea;stroke-width:1.4;fill:none;marker-end:url(#arrowhead)}
#aiworkstation .canvas__foot{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid var(--win-line);font-size:11px;color:var(--win-muted)}
#aiworkstation .canvas__tools{display:inline-flex;gap:6px}
#aiworkstation .canvas__tools button{padding:4px 9px;border-radius:7px;border:1px solid var(--win-line);font-size:11px;color:var(--win-ink)}
#aiworkstation .canvas__tools button[aria-pressed=true]{background:var(--win-accent);color:var(--win-bg);border-color:transparent}
#aiworkstation .quick{display:flex;gap:6px;flex-wrap:wrap}
#aiworkstation .quick button{padding:5px 10px;border-radius:999px;border:1px solid rgb(232 236 234 / 30%);color:#e6eeea;font-size:11px}
#aiworkstation .quick button:hover{background:rgb(232 236 234 / 12%)}
#aiworkstation .ctx{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgb(232 236 234 / 14%);font-size:11px;color:#e8ecea;align-self:flex-start}
#aiworkstation .ctx button{color:inherit;font-size:12px;line-height:1}

@media (max-width:1040px){#aiworkstation .win__body{grid-template-columns:1fr}#aiworkstation .win__side{display:none}#aiworkstation .six{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){#aiworkstation .frame,#aiworkstation .agents-stage{padding:16px;border-radius:20px}#aiworkstation .slides,#aiworkstation .agents-stage__inner{outline-width:2px}#aiworkstation .slides{aspect-ratio:auto;height:520px}#aiworkstation .six{grid-template-columns:1fr}#aiworkstation .split{grid-template-columns:1fr}#aiworkstation .canvas{display:none}#aiworkstation .msg{max-width:100%}#aiworkstation .main__head{flex-wrap:wrap;gap:6px 10px}#aiworkstation .main__actions{margin-left:0;flex-wrap:wrap}#aiworkstation .session{padding:14px}#aiworkstation .composer__row{gap:4px}}

/* ---------- generic section ---------- */
#aiworkstation .section{padding:96px 0;position:relative}
#aiworkstation [id]{scroll-margin-top:96px}
@media (max-width:900px){#aiworkstation .section{padding:48px 0 72px}}

/* ---------- plugins ---------- */
#aiworkstation .plugins__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:stretch}
#aiworkstation .figure{position:relative;border-radius:20px;overflow:hidden;min-height:min(100%,520px);border:1px solid var(--color-line);box-shadow:var(--card-shadow);background:#1a1826}
#aiworkstation .figure__in{position:absolute;inset:0}
#aiworkstation .figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#aiworkstation .stage{display:flex;flex-direction:column;gap:14px;padding:22px}
#aiworkstation .stage__top{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:20px}
#aiworkstation .stage__top .request__crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .stage__count{font-family:var(--font-site);color:var(--color-muted-2);letter-spacing:.14em;font-size:11px;font-weight:700;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
#aiworkstation .request__crumb{font-size:12px;color:var(--color-muted-2);font-weight:600}
/* prompt bar (composer): typed → sent, then it settles into a "sent message" state */
#aiworkstation .pbar{position:relative;border-radius:16px;border:1px solid var(--color-line);background:#fff;padding:13px 15px 11px;box-shadow:var(--card-shadow);overflow:hidden;transition:background .35s,border-color .35s,box-shadow .35s;--win-line:var(--color-line);--win-ink:var(--halo-ink);--win-muted:var(--color-muted);--win-accent:var(--halo-evergreen);--win-bg:#fff}
#aiworkstation .pbar[data-state=sent]{background:linear-gradient(180deg,#fdfdfa,#f8faf5);border-color:rgb(var(--halo-evergreen-rgb) / 16%)}
#aiworkstation .pbar::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,#0000 30%,rgb(var(--halo-sage-rgb) / 60%) 50%,#0000 70%);transform:translateX(-120%)}
#aiworkstation .pbar[data-state=sending]::after,#aiworkstation .pbar[data-state=sent]::after{animation:pbar-shine .55s ease-in-out both}
@keyframes pbar-shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
#aiworkstation .pbar__text{position:relative;font-size:16px;line-height:1.45;letter-spacing:-.01em;height:4.35em;overflow:hidden;color:var(--color-ink);text-wrap:pretty}
#aiworkstation .pbar__typed{white-space:pre-wrap;overflow-wrap:anywhere}
#aiworkstation .pbar__ph{position:absolute;left:5px;top:0;color:var(--color-muted-2);opacity:.75;pointer-events:none;white-space:nowrap}
#aiworkstation .pbar:not([data-state=idle]) .pbar__ph{display:none}
#aiworkstation .pbar__caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.18em;background:var(--color-accent);animation:lp-blink 1.05s steps(2,start) infinite}
#aiworkstation .pbar__caret--end,#aiworkstation .pbar[data-state=idle] .pbar__caret--end{display:none}
#aiworkstation .pbar[data-state=typing] .pbar__caret--end{display:inline-block}
#aiworkstation .pbar:not([data-state=idle]) .pbar__caret:not(.pbar__caret--end){display:none}
#aiworkstation .pbar__controls,#aiworkstation .pbar__meta{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease-out),opacity .2s}
#aiworkstation .pbar__controls > div,#aiworkstation .pbar__meta > div{overflow:hidden;min-height:0}
#aiworkstation .pbar__meta{grid-template-rows:0fr;opacity:0}
#aiworkstation .pbar[data-state=sent] .pbar__controls{grid-template-rows:0fr;opacity:0}
#aiworkstation .pbar[data-state=sent] .pbar__meta{grid-template-rows:1fr;opacity:1}
#aiworkstation .pbar__row{display:flex;align-items:center;gap:6px;margin-top:12px}
#aiworkstation .pbar__btn{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--color-muted-2);flex:none}
#aiworkstation .pbar__btn svg{width:15px;height:15px}
#aiworkstation .pbar__model{gap:5px;padding:5px 8px 5px 7px}
#aiworkstation .pbar__model svg{width:10px;height:10px;color:var(--color-muted-2)}
#aiworkstation .pbar__spacer{flex:1}
#aiworkstation .pbar__send{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--color-line);color:var(--color-muted-2);transition:background .25s,color .25s,transform .16s,box-shadow .25s}
#aiworkstation .pbar__send svg{width:15px;height:15px}
#aiworkstation .pbar[data-can-send=true] .pbar__send{background:var(--halo-ink);color:var(--halo-mineral);box-shadow:0 8px 16px -10px rgb(var(--halo-ink-rgb) / 70%)}
#aiworkstation .pbar[data-state=sending] .pbar__send{transform:scale(.86)}
#aiworkstation .pbar__sent{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--color-accent)}
#aiworkstation .pbar__sent svg{width:12px;height:12px}
/* plugin stage scene: centred composer (idle) → composer glides to the top, the thread builds beneath it (sent) */
#aiworkstation .flow{position:relative;flex:1;display:flex;flex-direction:column;gap:12px;transition:opacity .25s}
#aiworkstation .flow[data-swap=true]{opacity:0}
#aiworkstation .flow.measuring,#aiworkstation .flow.measuring *{transition:none!important;animation:none!important}
#aiworkstation .chat{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;transform:translateY(var(--lift,0px));transition:transform .65s var(--ease-out)}
#aiworkstation .chat__intro{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ease-out),opacity .3s}
#aiworkstation .chat__intro > div{overflow:hidden;min-height:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:6px 0 10px}
#aiworkstation .flow[data-state=sent] .chat__intro{grid-template-rows:0fr;opacity:0}
#aiworkstation .chat__title{font-size:19px;font-weight:500;letter-spacing:-.3px;line-height:1.25;color:var(--color-ink);text-wrap:balance}
#aiworkstation .chat__sub{font-size:13px;color:var(--color-muted-2)}
/* entrance: the workstation chat settles in before the prompt is typed (headline focus → sub → panel → controls) */
@keyframes e-focus{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes e-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes e-panel{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes e-send{from{transform:scale(.8)}to{transform:none}}
#aiworkstation .flow[data-enter=true] .chat__title{animation:e-focus .6s var(--ease-out) both}
#aiworkstation .flow[data-enter=true] .chat__sub{animation:e-up .45s var(--ease-out) .12s both}
#aiworkstation .flow[data-enter=true] .pbar{animation:e-panel .6s var(--ease-out) .16s both}
#aiworkstation .flow[data-enter=true] .pbar__ph{animation:e-up .4s var(--ease-out) .5s both}
#aiworkstation .flow[data-enter=true] .pbar__row{animation:e-up .4s var(--ease-out) .56s both}
#aiworkstation .flow[data-enter=true] .pbar__send{animation:e-send .45s var(--ease-out) .6s both}
/* thread under the composer: divider → widget (built section by section) → "added" callout */
#aiworkstation .thread{flex:1;display:flex;flex-direction:column;gap:11px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
/* idle: the hidden thread is taken out of flow so the card is the same height before and after the prompt is sent */
#aiworkstation .thread[data-stage=idle]{position:absolute;left:0;right:0;bottom:0}
#aiworkstation .thread[data-stage=building],#aiworkstation .thread[data-stage=done]{opacity:1;visibility:visible}
#aiworkstation .thread[data-stage=building] .divider,#aiworkstation .thread[data-stage=done] .divider{animation:lp-in .4s var(--ease-out) both}
#aiworkstation .results{display:grid;align-items:start}
#aiworkstation .results > *{grid-area:1/1;min-width:0}
#aiworkstation .result[data-built=true]{animation:res-done .9s ease-out both}
/* zoom-in on the finished widget: the app window scales up around the slot (transform-origin = the widget's centre, set by
   app.js as --zx/--zy), the rest of the UI dims, and the widget gets a mint focus ring — then it eases back to the full view */
/* camera model: the window scales from its top-left by --zoom and is panned by --tx/--ty (set by app.js) so the WHOLE widget
   sits centred and fully inside the 300px viewport; the rest of the UI dims + blurs behind a scrim the widget sits above */
#aiworkstation .result .win{transform-origin:0 0;will-change:transform}
#aiworkstation .result[data-built=true] .win{animation:res-zoom 3.4s var(--ease-out) both}
/* dim + blur everything EXCEPT the pane that holds the widget (the panes are their own stacking contexts, so a single
   top-layer scrim would cover the widget too): the bar, header, and whichever of sidebar / session centre isn't the slot */
#aiworkstation .result[data-built=true] .win__bar,#aiworkstation .result[data-built=true] .main__head,#aiworkstation .result[data-built=true] .session__center,#aiworkstation .result[data-built=true] .session__bg,#aiworkstation .result[data-built=true] .session__scrim,#aiworkstation .result[data-built=true] .win__side > :not(.pw){animation:res-dim 3.4s var(--ease-out) both}
#aiworkstation .result[data-built=true][data-slot=side-top] .win__side > :not(.pw){animation:res-dim 3.4s var(--ease-out) both}
#aiworkstation .result[data-built=true] .pw{position:relative;animation:res-focus 3.4s var(--ease-out) both}
@keyframes res-zoom{0%{transform:translate(0,0) scale(1)}18%,72%{transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--zoom,1.5))}100%{transform:translate(0,0) scale(1)}}
@keyframes res-dim{0%{filter:none;opacity:1}18%,72%{filter:blur(2.5px) brightness(.45);opacity:.6}100%{filter:none;opacity:1}}
@keyframes res-focus{0%{box-shadow:0 0 0 0 rgb(var(--halo-mint-rgb) / 0%)}18%,72%{box-shadow:0 0 0 1.5px rgb(var(--halo-mint-rgb) / 90%),0 0 0 6px rgb(var(--halo-mint-rgb) / 18%),0 18px 40px -16px rgb(0 0 0 / 80%)}100%{box-shadow:0 0 0 1px rgb(var(--halo-mint-rgb) / 55%)}}
@keyframes res-done{0%{box-shadow:0 30px 70px -30px rgb(var(--halo-ink-rgb) / 50%),0 0 0 0 rgb(var(--halo-mint-rgb) / 45%)}100%{box-shadow:0 30px 70px -30px rgb(var(--halo-ink-rgb) / 50%),0 0 0 14px rgb(var(--halo-mint-rgb) / 0%)}}
/* "built by the agent": window chrome → sidebar → widget sections, all with the mockups' lp-in / lp-bar primitives */
#aiworkstation .result[data-active=true] .bld{animation:lp-in .45s var(--ease-out) both;animation-delay:var(--d,0s)}
#aiworkstation .result[data-active=true] .bar i{animation:lp-bar .8s var(--ease-out) both;animation-delay:calc(var(--d,0s) + .15s)}
#aiworkstation .divider{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);font-weight:700}
#aiworkstation .divider::before,#aiworkstation .divider::after{content:"";flex:1;height:1px;background:var(--color-line)}
#aiworkstation .divider__wrap{display:grid;flex:none}
#aiworkstation .divider__wrap > *{grid-area:1/1;justify-self:center;align-self:center;white-space:nowrap}
#aiworkstation .divider__lbl{transition:opacity .2s}
#aiworkstation .thread[data-stage=done] .divider__lbl{opacity:0}
/* completion badge sits on the rule: dark pill, mint slot name, check draws in */
#aiworkstation .divider__done{display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border-radius:999px;background:var(--halo-ink);border:1px solid rgb(var(--halo-sage-rgb) / 45%);box-shadow:0 10px 18px -8px rgb(var(--halo-ink-rgb) / 38%),inset 0 1px 0 rgb(var(--halo-sage-rgb) / 18%);color:var(--halo-sage);font-size:10.5px;letter-spacing:.14em;opacity:0;transform:scale(.88);transition:opacity .25s,transform .45s var(--ease-out)}
#aiworkstation .thread[data-stage=done] .divider__done{opacity:1;transform:none}
#aiworkstation .divider__done b{color:var(--halo-mint);font-weight:700}
#aiworkstation .divider__done svg{width:12px;height:12px;flex:none}
#aiworkstation .divider__done path{fill:none;stroke:var(--halo-mint);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#aiworkstation .thread[data-stage=done] .divider__done path{animation:lp-draw .45s ease-out .15s both}
/* built plugin: a compact Halofy app window (the hero's .win--dark mockup recipe); the widget lands in its slot —
   side-top (sidebar, top-left) · page-mr (floating panel, mid-right) · page-br (floating panel, bottom-right) */
#aiworkstation .result{position:relative;height:300px;border-radius:14px;overflow:hidden;border:1px solid rgb(var(--halo-mineral-rgb) / 14%);background:#0b1211;box-shadow:0 30px 70px -30px rgb(var(--halo-ink-rgb) / 50%);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;--s-ink:#e6eeea;--s-muted:#8a9a94;--s-line:rgb(232 236 234 / 14%);--s-accent:var(--halo-mint);--wcol:clamp(170px,46%,220px)}
#aiworkstation .result .win{font-size:11px;line-height:1.35}
#aiworkstation .result .win__bar{padding:7px 10px;gap:10px}
#aiworkstation .result .win__lights i{width:8px;height:8px}
#aiworkstation .result .win__brand{font-size:11.5px;gap:5px}
#aiworkstation .result .win__brand span.mark{width:15px;height:15px}
#aiworkstation .result .win__brand img{width:9px}
#aiworkstation .result .win__tab{padding:3px 8px;font-size:10px}
#aiworkstation .result .win__kbd{margin-left:auto;font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;border:1px solid var(--win-line);color:var(--win-muted);background:rgb(255 255 255 / 3%);white-space:nowrap}
#aiworkstation .result .win__body{grid-template-columns:156px minmax(0,1fr)}
#aiworkstation .result .win__side{display:flex;padding:8px;gap:5px}
#aiworkstation .result .side__search{padding:5px 8px;font-size:10.5px;border-radius:7px;gap:6px}
#aiworkstation .result .side__search svg{width:10px;height:10px;flex:none}
#aiworkstation .result .side__label{font-size:9px;padding:3px 2px 0}
/* project rows: no checkbox — a fixed 14px icon column (provider logo, or empty) so titles align down the list */
#aiworkstation .result .side__row{grid-template-columns:14px minmax(0,1fr);gap:6px;padding:4px 5px;align-items:center}
#aiworkstation .result .side__row > div{min-width:0}
#aiworkstation .result .side__ico{width:14px;height:14px;display:grid;place-items:center}
#aiworkstation .result .side__ico img{width:11px;height:11px;object-fit:contain}
#aiworkstation .result .side__meta{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .result .side__title{font-size:10.5px;display:block}
#aiworkstation .result .side__clock{margin-top:auto;display:flex;justify-content:center;align-items:center;gap:5px;height:22px;border:1px solid var(--win-line);border-radius:7px;font-size:9.5px;color:#b8c6c0;font-variant-numeric:tabular-nums}
#aiworkstation .result .side__clock svg{width:9px;height:9px}
#aiworkstation .result .main__head{padding:6px 10px;font-size:10.5px;gap:8px}
#aiworkstation .result .badge{min-width:15px;height:15px;font-size:9px}
#aiworkstation .result .session{padding:10px;flex-direction:row}
#aiworkstation .result .session__center{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
#aiworkstation .result[data-slot^=page] .session__center{padding-right:calc(var(--wcol) + 4px)}
#aiworkstation .result .ask{margin:auto 0;max-width:100%;text-align:center;font-size:12.5px;font-weight:500;letter-spacing:-.2px;color:#eef3ee;text-wrap:balance;padding:4px 6px}
#aiworkstation .result .ask__u{border-bottom:1px dotted rgb(232 236 234 / 55%)}
#aiworkstation .result .composer{margin-top:0;width:min(100%,320px);padding:8px 9px;gap:6px;border-radius:11px}
#aiworkstation .result .composer__hint{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .result .composer__row{gap:4px;flex-wrap:nowrap;overflow:hidden}
#aiworkstation .result .composer__row .chip{font-size:9px;padding:3px 6px;gap:4px}
#aiworkstation .result .composer__row .chip img{width:9px;height:9px}
#aiworkstation .result .composer__row .send{width:20px;height:20px}
#aiworkstation .result .composer__row .send svg{width:10px;height:10px}
#aiworkstation .result .win .session > .session__dock{position:absolute;top:0;right:0;bottom:0;width:var(--wcol);padding:10px;display:flex;flex-direction:column;z-index:2;pointer-events:none}
#aiworkstation .result[data-slot=page-mr] .session__dock{justify-content:center}
#aiworkstation .result[data-slot=page-br] .session__dock{justify-content:flex-end}
/* the widget itself: the app's sidebar-widget recipe (usage panel) */
#aiworkstation .result .pw{pointer-events:auto;border:1px solid rgb(232 236 234 / 16%);border-radius:10px;padding:8px 9px 9px;background:rgb(13 22 21 / 94%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;display:flex;flex-direction:column;gap:6px;color:#b8c6c0;box-shadow:0 14px 30px -18px rgb(0 0 0 / 70%)}
#aiworkstation .result .win__side .pw{box-shadow:none;padding:7px 8px 8px;gap:5px}
#aiworkstation .result .pw__head{display:flex;justify-content:space-between;align-items:center;gap:5px;font-weight:600;font-size:9.5px;color:#e6eeea;letter-spacing:-.1px}
#aiworkstation .result .pw__head > span:first-child{display:inline-flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .result .pw__head img{width:11px;height:11px;flex:none}
#aiworkstation .result .pw__head > svg{width:10px;height:10px;flex:none;color:#8a9a94}
#aiworkstation .result .pw__lbl{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#8a9a94;white-space:nowrap}
#aiworkstation .result .pw__lbl > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .result .pw .live{font-size:9px;letter-spacing:.02em;text-transform:none;font-weight:500;color:#b8c6c0;gap:4px}
#aiworkstation .result .pw .live::before{background:#aab6b1}
#aiworkstation .result .pw__tiles{display:grid;grid-template-columns:1fr 1fr;gap:4px}
#aiworkstation .result .pw__tiles > div{padding:4px 6px;border-radius:6px;background:#1b2826;display:grid;gap:0;min-width:0}
#aiworkstation .result .pw__tiles span{font-size:8.5px;color:#8a9a94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .result .pw__tiles b{font-size:11px;font-weight:600;color:#e6eeea;font-variant-numeric:tabular-nums}
#aiworkstation .result .pw .bar{height:3px;background:#1b2826;border-radius:2px}
#aiworkstation .result .pw .bar i{background:#aab6b1;transform-origin:0 50%}
#aiworkstation .result .pw__note{font-size:8.5px;line-height:1.35;color:#8a9a94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .result .pw__runs{display:grid;gap:4px}
#aiworkstation .result .pw__runs > div{display:grid;grid-template-columns:auto 10px minmax(0,1fr) auto;gap:5px;align-items:center;padding:5px 6px;border-radius:7px;border:1px solid rgb(232 236 234 / 14%);background:rgb(255 255 255 / 2.5%);font-size:9.5px;color:#e6eeea}
#aiworkstation .result .pw__runs img{width:10px;height:10px}
#aiworkstation .result .pw__runs .t{font-family:var(--font-mono);font-size:8.5px;color:#8a9a94;font-variant-numeric:tabular-nums}
#aiworkstation .result .pw__runs > div > span:nth-child(3){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .result .pw__runs .s{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--halo-mint);white-space:nowrap}
#aiworkstation .result .pw__runs .s.dim{color:#8a9a94}
#aiworkstation .result .pw__runs .tsk__check{width:9px;height:9px}
#aiworkstation .result .pw__runs .spin{width:8px;height:8px;animation:lp-rot .8s linear infinite}
#aiworkstation .result .pw__foot{display:flex;justify-content:space-between;gap:8px;font-size:8.5px;color:#8a9a94;padding-top:6px;border-top:1px solid rgb(232 236 234 / 14%);white-space:nowrap}
#aiworkstation .result .pw__foot span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .result .pw__rows{display:grid;gap:2px}
#aiworkstation .result .pw .ws__group{padding:4px 6px;gap:6px;font-size:10px;border-radius:6px}
#aiworkstation .result .pw .ws__group i{width:10px;height:10px;border-radius:3px}
#aiworkstation .result .pw .ws__group .n{font-size:9px}
/* below the hero-mockup breakpoint the page-slot windows drop their sidebar (same as the hero) so the floating panel and the composer both fit */
@media (max-width:1040px){#aiworkstation .result[data-slot^=page] .win__body{grid-template-columns:1fr}#aiworkstation .result[data-slot^=page] .win__side{display:none}}
@media (max-width:600px){#aiworkstation .result .win__body{grid-template-columns:1fr}#aiworkstation .result .win__side{display:none}#aiworkstation .result[data-slot=side-top] .win__side{display:flex;border-right:0}#aiworkstation .result[data-slot=side-top] .win__main{display:none}}
/* side-top: the project list runs under the widget and fades out at the bottom, like the app sidebar */
#aiworkstation .result[data-slot=side-top] .win__side{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent)}
#aiworkstation .result[data-active=true]{opacity:1;visibility:visible;animation:lp-in .35s var(--ease-out) both}
@keyframes halo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#aiworkstation .stage__dots{display:flex;justify-content:center}
@media (max-width:900px){#aiworkstation .plugins__grid{grid-template-columns:1fr}#aiworkstation .figure{min-height:280px}#aiworkstation .pbar__text{font-size:15px}#aiworkstation .chat__title{font-size:17px}}

/* ---------- agents (dark section) ---------- */
#aiworkstation .agents{position:relative;color:var(--color-panel);isolation:isolate;overflow:clip;background:#10171a}
#aiworkstation .agents__bg{position:absolute;inset:0;z-index:-2}
#aiworkstation .agents__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
#aiworkstation .agents__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(168deg,rgb(var(--halo-ink-rgb) / 74%) 0%,rgb(var(--halo-ink-rgb) / 84%) 55%,rgb(var(--halo-ink-rgb) / 92%) 100%)}
#aiworkstation .agents .h2{color:#fff}
#aiworkstation .agents .lede{color:#b7c1b5}
#aiworkstation .agents-stage{position:relative;border-radius:26px;padding:clamp(28px,3.4vw,48px);border:1px solid rgb(var(--halo-mineral-rgb) / 18%);box-shadow:0 22px 80px rgb(var(--halo-ink-rgb) / 40%);background:radial-gradient(120% 90% at 8% 0%,var(--plum-3) 0%,transparent 42%),radial-gradient(110% 80% at 96% 100%,#6a5a86 0%,transparent 46%),linear-gradient(160deg,var(--plum-2) 0%,var(--plum) 55%,#1a1626 100%);--win-line:rgb(232 236 234 / 14%);--win-muted:#9eaa9c;--win-pane:rgb(13 20 18 / 80%);--win-ink:#eef3ee;--win-accent:var(--halo-mint);--win-bg:#0b1211}
#aiworkstation .agents-stage__inner{position:relative;z-index:1;border-radius:12px;overflow:hidden;background:rgb(7 11 10 / 92%);backdrop-filter:blur(18px)}
#aiworkstation .agents-stage__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;height:77px;border-bottom:1px solid var(--win-line);flex-wrap:wrap}
#aiworkstation .agents-stage__bar .dots button{background:rgb(232 236 234 / 25%)}
#aiworkstation .agents-stage__bar .dots button[aria-current=true]{background:var(--halo-mint)}
#aiworkstation .seg{display:inline-flex;border:1px solid var(--win-line);border-radius:999px;padding:3px;gap:2px}
#aiworkstation .seg button{padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:600;color:#c6d0c4}
#aiworkstation .seg button[aria-pressed=true]{background:var(--halo-mint);color:#07100b}
/* step callout: lives in the stage bar, centred between the step dots and the view switch */
#aiworkstation .callout{flex:1;min-width:0;justify-content:center;display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:16px;background:var(--halo-ink);border:1px solid rgb(var(--halo-sage-rgb) / 45%);box-shadow:0 10px 18px -8px rgb(var(--halo-ink-rgb) / 38%), inset 0 1px 0 rgb(var(--halo-sage-rgb) / 18%);color:var(--halo-sage);font-size:12px;max-width:min(92%,640px);animation:halo-in .4s var(--ease-out) both}
#aiworkstation .callout span{min-width:0;text-wrap:pretty;display:flex;align-items:center;min-height:2.5em}
#aiworkstation .callout b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:999px;background:var(--halo-mint);color:#07100b;font-size:11px;font-weight:700;flex:none}
#aiworkstation .agents-stage__body{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:680px;height:680px}
#aiworkstation .agents-stage__body .win__side{min-height:0;overflow:hidden}
#aiworkstation .agents-stage__body .win__side{color:#eef3ee}
#aiworkstation .panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--win-line);min-height:0}
#aiworkstation .pane{position:relative;background:#0b1211;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#aiworkstation .pane[data-focus=true]{outline:2px solid var(--halo-mint);outline-offset:-2px}
/* the pane that is working right now: zooms forward with a mint ring while the other panes blur back */
#aiworkstation .pane{transition:transform .6s var(--ease-out),box-shadow .6s,filter .5s ease,opacity .5s ease,z-index 0s}
#aiworkstation .pane{transform-origin:var(--ox,50%) var(--oy,50%)}
#aiworkstation .panes .pane:nth-child(1){--ox:0;--oy:0}
#aiworkstation .panes .pane:nth-child(2){--ox:100%;--oy:0}
#aiworkstation .panes .pane:nth-child(3){--ox:0;--oy:100%}
#aiworkstation .panes .pane:nth-child(4){--ox:100%;--oy:100%}
#aiworkstation .pane[data-live=true]{transform:scale(1.06);z-index:2;box-shadow:0 0 0 1.5px rgb(var(--halo-mint-rgb) / 70%),0 28px 70px -24px rgb(0 0 0 / 85%);animation:pane-pop .6s var(--ease-out) both}
#aiworkstation .panes:has(.pane[data-live=true]) .pane:not([data-live=true]){filter:blur(1.6px) brightness(.72);opacity:.9}
@keyframes pane-pop{from{transform:scale(1)}to{transform:scale(1.06)}}
/* streaming text: each word resolves out of blur (StreamingText), the reply bubble fades in, a caret blinks until the meta lands */
#aiworkstation .sw{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(3px);animation:sw-in .32s cubic-bezier(.23,1,.32,1) both;animation-delay:var(--d,0s)}
#aiworkstation .pane__meta.sw,#aiworkstation .msg.sw{display:block}
#aiworkstation .msg.stream{animation:sw-in .3s cubic-bezier(.23,1,.32,1) both;animation-delay:var(--d,0s);opacity:0}
#aiworkstation .msg--user.stream{animation-delay:0s;opacity:1;filter:none;transform:none;animation:none}
@keyframes sw-in{to{opacity:1;filter:blur(0);transform:none}}
#aiworkstation .caret{display:inline-block;width:2px;height:.9em;margin-left:3px;vertical-align:-2px;border-radius:1px;background:var(--halo-mint);opacity:0;animation:caret-on .15s ease-out both,lp-blink 1s steps(2,start) infinite;animation-delay:var(--d,0s),var(--d,0s)}
@keyframes caret-on{to{opacity:1}}
#aiworkstation .pane[data-focus=true] .pane__head{background:rgb(232 236 234 / 14%)}
#aiworkstation .pane__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
#aiworkstation .pane__head{position:relative;display:flex;align-items:center;gap:7px;padding:6px 10px;border-bottom:1px solid var(--win-line);font-size:11px;background:rgb(13 20 18 / 70%)}
#aiworkstation .pane__head .n{margin-left:auto}
#aiworkstation .pane__body{position:relative;padding:10px 11px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:0;flex:1;overflow:hidden;font-size:12px;background:linear-gradient(180deg,rgb(11 18 17 / 30%),rgb(11 18 17 / 82%))}
#aiworkstation .pane__empty{margin:auto;text-align:center;color:#9eaa9c;font-size:11px}
#aiworkstation .pane__empty b{display:block;color:#eef3ee;font-weight:500;font-size:12px;margin-bottom:4px}
#aiworkstation .pane .msg{font-size:12px;line-height:1.45;padding:6px 9px;border-radius:10px;max-width:94%}
#aiworkstation .pane__meta{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--halo-mint)}
#aiworkstation .pane__meta.dim{color:#9eaa9c;letter-spacing:.06em;text-transform:none;font-weight:500;font-size:10.5px}
#aiworkstation .pane__body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);mask-image:linear-gradient(to bottom,transparent 0,#000 28px)}
#aiworkstation .agentmap{display:none;padding:16px 18px;gap:14px;flex-direction:column;min-height:0;overflow:hidden}
#aiworkstation .agentmap .map{min-height:0;align-content:start}
#aiworkstation .agentmap[data-active=true]{display:flex}
#aiworkstation .agentmap__head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
#aiworkstation .agentmap__head h4{font-size:16px;font-weight:500;margin-bottom:4px}
#aiworkstation .agentmap__head p{font-size:12px;color:#9eaa9c}
#aiworkstation .agentmap__meta{font-size:11px;color:#9eaa9c;display:flex;gap:14px}
#aiworkstation .map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px 56px}
#aiworkstation .map svg.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
#aiworkstation .map svg.links path.lnk{fill:none;stroke:var(--halo-mint);stroke-width:1.25;stroke-linecap:round;marker-end:url(#maparrow);opacity:.72}
#aiworkstation .mapcard{position:relative;border-radius:14px;border:1px solid var(--win-line);background:rgb(13 20 18 / 88%);padding:10px 12px;font-size:11.5px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
#aiworkstation .mapcard:hover{border-color:rgb(232 236 234 / 40%)}
#aiworkstation .mapcard img,#aiworkstation .mapcard svg{width:14px;height:14px;flex:none}
#aiworkstation .stagewrap{position:relative;min-height:0;min-width:0;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden}
#aiworkstation .stagewrap .panes{border-top:1px solid var(--win-line)}
#aiworkstation .mapcard__top{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:#9eaa9c}
#aiworkstation .mapcard__top .st{color:var(--halo-mint);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
#aiworkstation .mapcard__title{font-weight:500;color:#eef3ee}
#aiworkstation .mapcard__id{font-family:var(--font-mono);font-size:10px;color:#6f7d72}
#aiworkstation .mapcard__link{font-size:11px;color:var(--halo-mint)}
#aiworkstation .saved{border-top:1px solid var(--win-line);padding-top:12px;font-size:12px}
#aiworkstation .saved h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9eaa9c;margin:0 0 8px;font-weight:700}
#aiworkstation .saved ul{display:grid;gap:4px}
#aiworkstation .saved li{display:flex;gap:10px;align-items:center;color:#c6d0c4}
#aiworkstation .saved li b{font-family:var(--font-mono);font-weight:500;color:var(--halo-mint)}
#aiworkstation .saved__empty{color:#9eaa9c}
@media (max-width:1040px){#aiworkstation .agents-stage__body{grid-template-columns:1fr;grid-template-rows:680px;height:680px}#aiworkstation .agents-stage__body .win__side{display:none}}
@media (max-width:760px){#aiworkstation .agents-stage__bar{height:auto;min-height:124px}#aiworkstation .agents-stage__body{grid-template-rows:900px;height:900px}#aiworkstation .panes .pane{--ox:50%}#aiworkstation .panes .pane:nth-child(1),#aiworkstation .panes .pane:nth-child(2),#aiworkstation .panes .pane:nth-child(3){--oy:0}#aiworkstation .panes .pane:nth-child(4){--oy:100%}#aiworkstation .panes{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(0,1fr))}#aiworkstation .pane{min-height:0}#aiworkstation .map{grid-template-columns:1fr}#aiworkstation .callout{flex:0 1 100%;order:3}#aiworkstation .agents-stage__body{min-height:0}}

/* ---------- comparison ----------
   Three grid columns; the Halofy lane is ONE absolutely-positioned card (.cmp__card) sitting behind
   column 2 — a table cell flattens 3D transforms, so the plate has to be its own element. It carries
   the pills' glossy metal and tips up from its left edge on hover (perspective in its own transform,
   since an ancestor's perspective doesn't reach it). */
#aiworkstation .cmp{position:relative;border:1px solid var(--color-line);border-radius:20px;background:linear-gradient(180deg,#fdfdfa 0%,var(--halo-mineral) 100%);box-shadow:var(--card-shadow);padding:10px 10px 4px;overflow-x:auto}
#aiworkstation .cmp__grid{position:relative;display:grid;grid-template-columns:minmax(210px,34%) minmax(180px,33%) minmax(180px,33%);min-width:680px}
#aiworkstation .cmp__row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}
#aiworkstation .cmp__cap,#aiworkstation .cmp__cell{position:relative;z-index:1;padding:16px 18px;font-size:15px;min-width:0}
#aiworkstation .cmp__row:not(.cmp__row--head) > *{border-top:1px solid var(--color-line)}
#aiworkstation .cmp__cap{font-weight:500;color:var(--color-ink)}
#aiworkstation .cmp__cell{color:var(--color-muted)}
#aiworkstation .cmp__row--head > *{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--color-muted-2);padding-bottom:14px;white-space:nowrap}
#aiworkstation .cmp__row:not(.cmp__row--head) .cmp__me{border-top-color:#ffffff1f}

/* the metal card behind column 2 */
#aiworkstation .cmp__card{position:absolute;z-index:0;left:0;top:0;width:0;height:0;border-radius:16px;background:var(--metal-bg);border:0;box-shadow:var(--metal-shadow);overflow:hidden;
  transform-origin:50% 50%;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
#aiworkstation .cmp__card::after{content:"";position:absolute;inset:0;background:var(--metal-gloss);pointer-events:none}
#aiworkstation .cmp:hover .cmp__card{z-index:2;transform:scale(1.035,1.015)!important;box-shadow:inset 0 1px #ffffff5e,inset 0 -1px #00000080,0 34px 60px -30px #0507088c}
#aiworkstation .cmp__me{color:#f2f4f5;font-weight:500;z-index:3}
#aiworkstation .cmp__row--head .cmp__me{letter-spacing:normal;text-transform:none;font-size:12px;color:#fff;padding-top:16px}

/* brand lockup on the metal */
#aiworkstation .cmp__brand{vertical-align:-7px}
#aiworkstation .cmp__brand:hover{transform:none}
#aiworkstation .cmp__brand .brand__mark{height:24px;filter:brightness(0) invert(1) drop-shadow(0 1px 2px #0006)}
#aiworkstation .cmp__brand .brand__word{font-size:21px;color:#fff}

/* verdict marks: filled = yes, half = partial, hairline dash = none */
#aiworkstation .cmp__mark{display:inline-block;width:9px;height:9px;border-radius:999px;margin-right:9px;vertical-align:1px;flex:none}
#aiworkstation .cmp__me .cmp__mark--yes{background:#fff;box-shadow:0 0 0 3px #ffffff26}
#aiworkstation .cmp__mark--yes{background:var(--halo-ink)}
#aiworkstation .cmp__mark--some{background:linear-gradient(90deg,var(--color-muted-2) 50%,transparent 50%);box-shadow:inset 0 0 0 1px var(--color-muted-2)}
#aiworkstation .cmp__mark--no{width:12px;height:1.5px;border-radius:0;background:rgb(var(--halo-ink-rgb) / 22%);vertical-align:4px;margin-right:6px}
#aiworkstation .cmp__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#aiworkstation .cmp__foot{padding:30px 18px 16px;font-size:12px;color:var(--color-muted-2);max-width:70ch;margin-left:auto;text-align:right;text-wrap:balance}

/* reveal: the rows deal in one by one the first time the table is seen */
#aiworkstation .cmp__row > *{opacity:0;transform:translateY(10px)}
#aiworkstation .cmp[data-seen=true] .cmp__row > *{animation:cmp-row .5s var(--ease-out) both;animation-delay:calc(var(--r,0) * 70ms)}
@keyframes cmp-row{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#aiworkstation .cmp__row:not(.cmp__row--head):hover .cmp__cap{color:var(--halo-evergreen)}
#aiworkstation .cmp__row:not(.cmp__row--head):hover .cmp__cell:not(.cmp__me){color:var(--color-ink)}
@media (prefers-reduced-motion:reduce){#aiworkstation .cmp__row > *{opacity:1;transform:none}#aiworkstation .cmp__card{transition:none}#aiworkstation .cmp:hover .cmp__card{transform:none}}
@media (max-width:760px){#aiworkstation .cmp{border-radius:16px;padding:6px 6px 2px}#aiworkstation .cmp__cap,#aiworkstation .cmp__cell{padding:13px 14px;font-size:14px}}

/* ---------- compatibility ---------- */
#aiworkstation .providers{position:relative;display:flex;flex-wrap:wrap;gap:10px 26px;padding:24px 0;margin-left:-14px}
/* the rules are drawn from the text column (the list itself is shifted −14px so the first pill's logo lines up with it) */
#aiworkstation .providers::before,#aiworkstation .providers::after{content:"";position:absolute;left:14px;right:0;height:1px;background:var(--color-line)}
#aiworkstation .providers::before{top:0}#aiworkstation .providers::after{bottom:0}
#aiworkstation .provider{position:relative;display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;color:var(--color-ink);transition:color .18s}
#aiworkstation .provider:hover{color:var(--halo-evergreen)}
#aiworkstation .provider__icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;background:linear-gradient(155deg,#252a2d,#0d1012);box-shadow:inset 0 1px #ffffff3d}
/* specular rim (specular.js): a WebGL light streak around the whole logo + name pill that steers toward the pointer */
#aiworkstation .provider .spec-fx{position:absolute;left:-14px;top:-14px;pointer-events:none;z-index:1}
#aiworkstation .provider > span{position:relative;z-index:2}
#aiworkstation .provider__icon img,#aiworkstation .provider__icon svg{width:19px;height:19px;object-fit:contain}
#aiworkstation .provider__icon img[src*="grokbot"]{width:100%;height:100%;border-radius:inherit;object-fit:cover}
#aiworkstation .provider__icon img.round{border-radius:50%}
#aiworkstation .provider__name{font-size:16px;font-weight:500;letter-spacing:-.1px}
@media (max-width:900px){#aiworkstation .providers{gap:4px 24px;padding:16px 0}#aiworkstation .provider__name{font-size:15px}}

/* ---------- faq ---------- */
#aiworkstation .faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px}
#aiworkstation .faq__list{border-top:1px solid var(--color-line)}
#aiworkstation .faq__item{border-bottom:1px solid var(--color-line)}
#aiworkstation .faq__q{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:16px;text-align:left;padding:22px 8px;font-size:22px;font-weight:500;letter-spacing:-.44px;line-height:1.2}
#aiworkstation .faq__q .raster{font-size:14px}
#aiworkstation .faq__q .plus{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--halo-frosted-border);background:var(--halo-frosted-glass);color:var(--color-accent);font-size:18px;line-height:1;transition:transform .32s var(--ease-out)}
#aiworkstation .faq__item[data-open=true] .plus{transform:rotate(45deg)}
#aiworkstation .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease-out)}
#aiworkstation .faq__item[data-open=true] .faq__a{grid-template-rows:1fr}
#aiworkstation .faq__a > div{overflow:hidden}
#aiworkstation .faq__a p{padding:0 8px 24px 68px;max-width:60ch}
@media (max-width:900px){#aiworkstation .faq__grid{grid-template-columns:1fr;gap:20px}#aiworkstation .faq__q{font-size:18px;grid-template-columns:34px 1fr auto}#aiworkstation .faq__a p{padding-left:8px}}

/* ---------- close ---------- */
#aiworkstation .close{padding:104px 0 40px;background:var(--color-canvas)}
/* Let the banner shadow fade over the following footer instead of ending at its edge. */
#aiworkstation .close__card{position:relative;z-index:1;overflow:hidden;border-radius:22px;min-height:460px;display:grid;place-items:center;text-align:center;padding:clamp(48px,7vw,96px) 24px;color:#fff;border:1px solid rgb(var(--halo-mineral-rgb) / 26%);box-shadow:0 22px 80px rgb(var(--halo-ink-rgb) / 30%), inset 0 1px 0 rgb(var(--halo-mineral-rgb) / 26%);background:#10171a}
#aiworkstation .close__bg{position:absolute;inset:0}
#aiworkstation .close__bg img,#aiworkstation .close__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
#aiworkstation .close__bg video{opacity:0;transition:opacity 1.2s ease}
#aiworkstation .close__bg video[data-ready=true]{opacity:1}
#aiworkstation .close__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgb(11 13 11 / 30%),rgb(11 13 11 / 72%))}
#aiworkstation .close__copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
#aiworkstation .close__copy .h2{color:#fff;font-size:clamp(36px,4.4vw,56px);letter-spacing:-.8px;line-height:1.06;margin:0}
#aiworkstation .close__copy .lede{color:#dfe6dc}
@media (max-width:900px){#aiworkstation .close{padding:72px 0 24px}}
/* Frame the taller mobile copy inside the ring's opening. */
@media (max-width:760px){#aiworkstation .close__bg img{top:-10%;height:170%;object-position:50% 0%}}

/* ---------- footer ---------- */
#aiworkstation .footer{position:relative;background:#010403;color:var(--halo-mineral);overflow:hidden;margin-top:-1px}
#aiworkstation .footer__horizon{height:clamp(300px,18vw,380px);background:linear-gradient(to bottom,var(--color-panel) 0%,var(--color-panel) 22%,#f8fbf5 34%,#e0ecd6 48%,#94b98e 66%,#163a2a 86%,#010403 100%);position:relative}
#aiworkstation .footer__stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 62%,#eaf1ff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 28% 78%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 41% 70%,#eaf1ff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 55% 84%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 66% 66%,#eaf1ff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 80%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 88% 72%,#eaf1ff 50%,transparent 51%),radial-gradient(1px 1px at 94% 88%,#eaf1ff 50%,transparent 51%);animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.7}50%{opacity:1}}
#aiworkstation .footer__body{position:relative;padding:24px 0 40px;box-shadow:inset 0 -150px 190px #00000094}
#aiworkstation .footer__glow{position:absolute;inset:auto 0 0 0;height:360px;background:radial-gradient(60% 80% at 50% 100%,#264a3a29,transparent 70%);pointer-events:none}
#aiworkstation .footer__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
#aiworkstation .footer__brand{display:flex;align-items:center;gap:10px}
#aiworkstation .footer__brand img{height:28px;width:auto}
#aiworkstation .footer__brand span{font-size:22px;font-weight:500;letter-spacing:-.03em}
#aiworkstation .footer__tag{margin-top:10px;color:#b7c1b5;font-size:14px}
#aiworkstation .footer__links{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end;font-size:14px;font-weight:500}
#aiworkstation .footer__links a{color:#dfe6dc;padding:6px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
#aiworkstation .footer__links a:hover{color:#fff;border-color:rgb(var(--halo-mineral-rgb) / 40%)}
#aiworkstation .footer__links a[aria-disabled=true]{color:#7d8a80;cursor:default}
#aiworkstation .footer__watermark{font-family:var(--font-raster);font-size:clamp(4.5rem,15vw,11rem);font-weight:700;letter-spacing:.02em;color:rgb(var(--halo-mineral-rgb) / 15%);line-height:.9;text-align:center;margin:56px 0 24px;mask-image:linear-gradient(#000 40%,#0000 95%);-webkit-mask-image:linear-gradient(#000 40%,#0000 95%);user-select:none}
#aiworkstation .footer__bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#9eaa9c;border-top:1px solid rgb(var(--halo-mineral-rgb) / 12%);padding-top:18px}
@media (max-width:760px){#aiworkstation .footer__grid{grid-template-columns:1fr}#aiworkstation .footer__links{justify-content:flex-start}}

/* ---------- modal ---------- */
#aiworkstation .modal{position:fixed;inset:0;z-index:20000;display:none;place-items:center;padding:24px;background:rgb(var(--halo-ink-rgb) / 45%);backdrop-filter:blur(10px)}
#aiworkstation .modal[data-open=true]{display:grid}
#aiworkstation .modal__dialog{width:min(520px,100%);background:rgb(255 255 255 / 92%);backdrop-filter:blur(22px) saturate(115%);border:1px solid #080c0e1a;border-radius:18px;padding:28px;box-shadow:0 24px 58px -30px #18222847,inset 0 1px #fff;animation:halo-in .4s var(--ease-out) both}
#aiworkstation .modal__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#aiworkstation .modal__title{font-size:26px;font-weight:500;letter-spacing:-.5px;line-height:1.15;margin-bottom:18px}
#aiworkstation .field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--color-muted-2)}
#aiworkstation .field input{border:1px solid rgb(var(--halo-evergreen-rgb) / 18%);background:#fff;border-radius:8px;padding:12px 14px;font-size:15px;font-weight:400;color:var(--color-ink)}
#aiworkstation .field input:focus{outline:2px solid rgb(var(--halo-evergreen-rgb) / 35%);outline-offset:2px}
#aiworkstation .modal__row{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
#aiworkstation .modal__note{font-size:12.5px;color:var(--color-muted-2);margin-top:12px;line-height:1.5}

/* =====================================================================
   Work loop — tabbed product snippets with choreographed CSS animations.
   Every mockup is plain HTML/SVG; timing lives in inline --d (delay) and
   --until (hide-at) custom properties so each panel replays when shown.
   ===================================================================== */
#aiworkstation .loop{padding:72px 0}
#aiworkstation .loop .section__head{margin:0 auto 26px;text-align:center;display:flex;flex-direction:column;align-items:center}
#aiworkstation .loop .section__head .h2{margin:0 auto 10px}
#aiworkstation .loop .section__head .lede{margin:0 auto;font-size:18px;max-width:54ch}

/* tab bar */
#aiworkstation .loop__bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
#aiworkstation .loop[data-auto=false] .loop__prog{display:none}
#aiworkstation .loop__tabs{display:flex;gap:4px;padding:5px;margin:0;border-radius:999px;border:1px solid var(--halo-frosted-border);background:var(--halo-frosted-glass);box-shadow:var(--halo-frosted-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
#aiworkstation .loop__tabs::-webkit-scrollbar{display:none}
#aiworkstation .loop__tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:0 16px;min-height:38px;border-radius:999px;font-size:13px;font-weight:500;color:rgb(var(--halo-ink-rgb) / 72%);white-space:nowrap;border:1px solid transparent;transition:color .18s,background .18s,box-shadow .18s,border-color .18s;overflow:hidden;flex:none}
#aiworkstation .loop__tab svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#aiworkstation .loop__tab:hover{color:var(--color-ink);background:rgb(var(--halo-ink-rgb) / 6%)}
#aiworkstation .loop__tab[aria-selected=true]{color:var(--halo-mineral);background:var(--halo-onyx-metal);border-color:rgb(var(--halo-mineral-rgb) / 20%);box-shadow:var(--halo-metal-shadow)}
#aiworkstation .loop__prog{position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--halo-mint);transform-origin:0 50%;transform:scaleX(0);opacity:0}
#aiworkstation .loop__tab[aria-selected=true] .loop__prog{opacity:.9;animation:lp-prog var(--loop-dur,9.5s) linear both}
#aiworkstation .loop[data-paused=true] .loop__prog{animation-play-state:paused}
@keyframes lp-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* stage */
#aiworkstation .loop__stage{position:relative;border-radius:22px;padding:8px;background:var(--halo-frosted-glass);border:1px solid var(--halo-frosted-border);box-shadow:0 40px 100px -40px rgb(var(--halo-ink-rgb) / 45%),var(--halo-frosted-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#aiworkstation .loop__panel{display:none;grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#fdfdfa 0%,var(--halo-mineral) 100%);border:1px solid var(--color-line);min-height:460px}
#aiworkstation .loop__panel[data-active=true]{display:grid;animation:halo-in .5s var(--ease-out) both}
#aiworkstation .loop__copy{padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;justify-content:center;gap:10px}
#aiworkstation .loop__copy .h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.6px;margin:0}
#aiworkstation .loop__copy .body{font-size:16px;line-height:1.5;max-width:38ch}
#aiworkstation .loop__hint{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--color-muted-2);margin-top:6px}
#aiworkstation .loop__hint kbd{font-family:var(--font-site);font-size:11px;font-weight:600;padding:3px 7px;border-radius:6px;border:1px solid var(--color-line);background:#fff;box-shadow:0 1px 0 rgb(var(--halo-ink-rgb) / 8%);color:var(--color-ink)}
#aiworkstation .loop__snipwrap{position:relative;padding:20px 20px 20px 0;display:flex;flex-direction:column;justify-content:center;min-width:0}
#aiworkstation .loop__snipwrap::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 82% 18%,rgb(var(--halo-sage-rgb) / 38%),transparent 70%),radial-gradient(rgb(var(--halo-ink-rgb) / 12%) .8px,transparent 1.2px);background-size:auto,11px 11px;pointer-events:none;-webkit-mask-image:radial-gradient(120% 120% at 100% 0%,#000 0%,#00000055 55%,#0000 80%);mask-image:radial-gradient(120% 120% at 100% 0%,#000 0%,#00000055 55%,#0000 80%)}

/* dark mockup window */
#aiworkstation .snip{position:relative;z-index:1;border-radius:16px;overflow:hidden;background:#0b1211;color:#e6eeea;border:1px solid rgb(var(--halo-mineral-rgb) / 14%);box-shadow:0 30px 70px -30px rgb(var(--halo-ink-rgb) / 55%),0 1px 2px rgb(var(--halo-ink-rgb) / 20%),inset 0 1px 0 rgb(255 255 255 / 8%);font-size:12.5px;line-height:1.4;display:flex;flex-direction:column;height:420px;--s-line:rgb(232 236 234 / 12%);--s-pane:#0f1716;--s-muted:#8a9a94;--s-accent:var(--halo-mint);--s-ink:#e6eeea;--win-line:var(--s-line);--win-muted:var(--s-muted);--win-accent:var(--s-accent);--win-bg:#0b1211;--win-ink:var(--s-ink)}
#aiworkstation .snip::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 18% 0%,rgb(var(--halo-mint-rgb) / 9%),transparent 60%),radial-gradient(50% 40% at 100% 100%,rgb(var(--halo-sage-rgb) / 6%),transparent 60%);pointer-events:none;z-index:0}
#aiworkstation .snip > *{position:relative;z-index:1}
#aiworkstation .snip__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--s-line);background:rgb(255 255 255 / 2.5%);font-size:12px;color:var(--s-muted)}
#aiworkstation .snip__lights{display:inline-flex;gap:6px}
#aiworkstation .snip__lights i{width:9px;height:9px;border-radius:999px;background:rgb(255 255 255 / 12%)}
#aiworkstation .snip__title{font-weight:500;color:var(--s-ink)}
#aiworkstation .snip__kbd,#aiworkstation .snip kbd{margin-left:auto;font-family:var(--font-site);font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:5px;border:1px solid var(--s-line);color:var(--s-muted);background:rgb(255 255 255 / 4%);white-space:nowrap}
#aiworkstation .snip__body{flex:1;min-height:0;position:relative;display:flex}
#aiworkstation .snip__caption{padding:9px 14px;border-top:1px solid var(--s-line);font-size:11.5px;color:var(--s-muted);letter-spacing:.02em;text-align:center}
#aiworkstation .snip .msg{font-size:11.5px;padding:8px 11px;max-width:100%}
#aiworkstation .snip .chip{font-size:10.5px;padding:4px 8px}
#aiworkstation .snip .divider{font-size:10px}
#aiworkstation .cmd{display:inline-flex;align-items:center;min-width:0}

/* animation primitives */
#aiworkstation .a{animation:lp-in .55s var(--ease-out) both;animation-delay:var(--d,0s)}
#aiworkstation .a.until{animation:lp-in .55s var(--ease-out) both var(--d,0s),lp-hide .01s linear forwards var(--until,999s)}
#aiworkstation .type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:100%;animation:lp-type calc(var(--n) * var(--cps,70ms)) steps(var(--n),end) both;animation-delay:var(--d,0s)}
#aiworkstation .caret{display:inline-block;width:7px;height:1.1em;margin-left:2px;flex:none;background:var(--s-accent);visibility:hidden;animation:lp-blink 1s steps(2,start) infinite,lp-show .01s linear both var(--d,0s),lp-hide .01s linear forwards var(--until,999s)}
#aiworkstation .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:lp-draw .7s ease-out both;animation-delay:var(--d,0s)}
#aiworkstation .spin{width:11px;height:11px;border-radius:999px;border:1.5px solid rgb(var(--halo-mint-rgb) / 25%);border-top-color:var(--s-accent);flex:none;animation:lp-rot .8s linear infinite,lp-hide .01s linear forwards var(--until,999s)}
#aiworkstation .stat{display:inline-grid;width:14px;height:14px;place-items:center;flex:none}
#aiworkstation .stat > *{grid-area:1/1}
@keyframes lp-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes lp-type{from{width:0}to{width:calc(var(--n) * 1ch)}}
@keyframes lp-blink{50%{opacity:0}}
@keyframes lp-show{from{visibility:hidden}to{visibility:visible}}
@keyframes lp-hide{to{visibility:hidden}}
@keyframes lp-out{to{opacity:0}}
@keyframes lp-dim{to{opacity:.32}}
@keyframes lp-pop{from{opacity:0;visibility:visible;transform:translate(-50%,10px) scale(.96)}to{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}}
@keyframes lp-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lp-rot{to{transform:rotate(360deg)}}
@keyframes lp-wipe{from{clip-path:inset(0 100% 0 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes lp-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lp-sel{from{box-shadow:0 0 0 1px transparent;background:transparent}to{box-shadow:0 0 0 1px var(--halo-mint),0 0 0 5px rgb(var(--halo-mint-rgb) / 16%);background:rgb(var(--halo-mint-rgb) / 8%)}}
@keyframes lp-load{from{transform:scaleX(0);opacity:1}80%{transform:scaleX(1);opacity:1}to{transform:scaleX(1);opacity:0}}
@keyframes lp-split{from{flex-basis:0;opacity:0;padding-left:0;padding-right:0}to{flex-basis:46%;opacity:1}}
@keyframes lp-travel{from{transform:translate(calc(var(--x1) * 1px),calc(var(--y1) * 1px));opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translate(calc(var(--x2) * 1px),calc(var(--y2) * 1px));opacity:0}}

/* workspaces */
#aiworkstation .ws{flex:1;display:grid;grid-template-columns:150px minmax(0,1fr);min-height:0}
#aiworkstation .ws__side{border-right:1px solid var(--s-line);background:rgb(255 255 255 / 2%);padding:12px 10px;display:flex;flex-direction:column;gap:4px;font-size:12px}
#aiworkstation .ws__label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-muted);font-weight:700;padding:2px 4px 6px}
#aiworkstation .ws__group{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;color:var(--s-ink);white-space:nowrap}
#aiworkstation .ws__group i{width:14px;height:14px;border-radius:4px;border:1px solid var(--s-line);flex:none}
#aiworkstation .ws__group[data-selected=true]{background:rgb(var(--halo-mint-rgb) / 10%)}
#aiworkstation .ws__group .n{margin-left:auto;font-size:10px;color:var(--s-muted)}
#aiworkstation .ws__panes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--s-line);min-height:0}
#aiworkstation .ws__pane{background:#0b1211;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0;animation:lp-wipe .6s var(--ease-out) both;animation-delay:var(--d,0s)}
#aiworkstation .ws__title{font-weight:500;font-size:12.5px;color:var(--s-ink)}
#aiworkstation .ws__chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--s-muted);border:1px solid var(--s-line);border-radius:999px;padding:3px 8px;align-self:flex-start;white-space:nowrap}
#aiworkstation .ws__chip img{width:11px;height:11px}
#aiworkstation .ws__line{font-size:11.5px;color:#c6d0c4;line-height:1.45}
#aiworkstation .ws__line code{font-family:var(--font-mono);font-size:10.5px;padding:1px 5px;border-radius:4px;background:rgb(255 255 255 / 7%);color:var(--s-ink)}
#aiworkstation .ws__status{margin-top:auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--s-accent);display:inline-flex;align-items:center;gap:6px}
#aiworkstation .ws__status::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;animation:halo-pulse 1.6s ease-in-out infinite}

/* agents map */
#aiworkstation .amap{flex:1;padding:12px 16px 10px;display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}
#aiworkstation .amap svg{flex:1 1 0px;min-height:0;width:100%;height:auto;display:block;overflow:visible}
#aiworkstation .amap .node{transform-box:fill-box}
#aiworkstation .amap .node rect{fill:#0f1716;stroke:var(--s-line);stroke-width:1}
#aiworkstation .amap .node text{fill:var(--s-ink);font-family:var(--font-site);font-size:12.5px;font-weight:500}
#aiworkstation .amap .node .sub{fill:var(--s-muted);font-size:10.5px;font-weight:400}
#aiworkstation .amap .node .st{fill:var(--s-accent);font-size:8.5px;letter-spacing:.12em;font-weight:700}
#aiworkstation .amap .node .st.dim{fill:var(--s-muted)}
#aiworkstation .amap .link{fill:none;stroke:var(--s-accent);stroke-width:1.4;opacity:.75}
#aiworkstation .amap .ah{fill:var(--s-accent);stroke:none;transform-box:fill-box}
#aiworkstation .amap .node .num{fill:var(--s-accent);stroke:none}
#aiworkstation .amap .node .numtxt{fill:#07100b;font-size:9.5px;font-weight:700}
#aiworkstation .amap .dot{fill:#fff;filter:drop-shadow(0 0 4px rgb(var(--halo-mint-rgb) / 90%));animation:lp-travel 1.3s ease-in-out var(--d,0s) 2 both}
#aiworkstation .amap__cards{display:none}
#aiworkstation .amap__card{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 8px;align-items:center;padding:9px 10px;border-radius:10px;border:1px solid var(--s-line);background:#0f1716}
#aiworkstation .amap__card b{grid-row:1/3;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--s-accent);color:#07100b;font-size:11px;font-weight:700}
#aiworkstation .amap__card .t{font-size:12.5px;font-weight:500;color:var(--s-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .amap__card .p{font-size:10.5px;color:var(--s-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .amap__msgs{display:flex;flex-wrap:wrap;gap:6px}
#aiworkstation .amap__msg{font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--s-line);color:#c6d0c4;background:rgb(255 255 255 / 3%);white-space:nowrap}
#aiworkstation .amap__msg b{font-family:var(--font-mono);font-weight:500;color:var(--s-accent);margin-right:6px}

/* browser */
#aiworkstation .brw{flex:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);min-height:0}
#aiworkstation .brw__page{border-right:1px solid var(--s-line);display:flex;flex-direction:column;min-width:0}
#aiworkstation .brw__chrome{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--s-line);font-family:var(--font-mono);font-size:11.5px;position:relative}
#aiworkstation .brw__nav{display:inline-flex;gap:4px;color:var(--s-muted)}
#aiworkstation .brw__nav i{width:18px;height:18px;border-radius:5px;border:1px solid var(--s-line);display:grid;place-items:center;font-style:normal;font-size:11px;line-height:1}
#aiworkstation .brw__url{flex:1;display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:8px;background:rgb(255 255 255 / 5%);border:1px solid var(--s-line);color:var(--s-ink);min-width:0;overflow:hidden;min-height:28px}
#aiworkstation .brw__url .lock{color:var(--s-accent);font-size:8px}
#aiworkstation .brw__prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--s-accent);transform-origin:0 50%;animation:lp-load 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
#aiworkstation .brw__doc{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:11px;min-height:0;overflow:hidden}
#aiworkstation .brw__h{font-size:17px;font-weight:500;color:#fff;letter-spacing:-.2px}
#aiworkstation .brw__p{font-size:11.5px;line-height:1.55;color:#b7c1b5;position:relative;padding:6px 8px;margin:-6px -8px;border-radius:8px}
#aiworkstation .brw__p.is-sel{animation:lp-in .55s var(--ease-out) both var(--d,0s),lp-sel .4s ease both var(--d2,0s)}
#aiworkstation .brw__sk{height:9px;border-radius:4px;background:rgb(255 255 255 / 7%)}
#aiworkstation .brw__sk.w60{width:60%}#aiworkstation .brw__sk.w85{width:85%}
#aiworkstation .brw__tip{position:absolute;right:10px;top:-13px;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--halo-mint);color:#07100b;box-shadow:0 8px 18px -8px rgb(0 0 0 / 60%)}
#aiworkstation .brw__chat{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:0}
#aiworkstation .brw__ctx{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;background:rgb(var(--halo-mint-rgb) / 14%);font-size:10.5px;color:var(--halo-mint);align-self:flex-start}
#aiworkstation .brw__thinking{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--halo-sage);opacity:.9}

/* terminal */
#aiworkstation .term{flex:1;display:flex;position:relative;min-height:0;font-family:var(--font-mono);font-size:12.5px}
#aiworkstation .term__pane{flex:1 1 auto;min-width:0;padding:16px 18px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
#aiworkstation .term__pane--new{flex:0 0 46%;border-left:1px solid var(--s-line);animation:lp-split .55s var(--ease-out) both;animation-delay:var(--d,0s)}
#aiworkstation .term__line{display:flex;align-items:center;gap:8px;white-space:nowrap;min-height:18px;min-width:0}
#aiworkstation .term__prompt{color:var(--s-accent);font-weight:700}
#aiworkstation .term .dim{color:var(--s-muted)}
#aiworkstation .term .ok{color:var(--s-accent)}
#aiworkstation .term .idx{color:var(--s-muted);min-width:10px}
#aiworkstation .term .dur{color:var(--s-muted);margin-left:auto;padding-left:12px}
#aiworkstation .term__line--wrap{white-space:normal;align-items:flex-start;line-height:1.5}
#aiworkstation .term__line--wrap .term__prompt,#aiworkstation .term__line--wrap .ok{flex:none;padding-top:1px}
#aiworkstation .palette{position:absolute;left:50%;top:32%;width:min(300px,86%);transform:translate(-50%,0);border-radius:12px;border:1px solid rgb(var(--halo-mineral-rgb) / 16%);background:rgb(16 23 26 / 92%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 50px -20px rgb(0 0 0 / 70%),inset 0 1px 0 rgb(255 255 255 / 8%);padding:6px;font-family:var(--font-site);visibility:hidden;z-index:2;animation:lp-pop .35s var(--ease-out) both var(--d,0s),lp-hide .01s linear forwards calc(var(--d,0s) + 1.7s)}
#aiworkstation .palette__row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;font-size:12.5px;color:var(--s-ink)}
#aiworkstation .palette__row.is-active{background:rgb(var(--halo-mint-rgb) / 14%)}
#aiworkstation .palette__row kbd{margin-left:12px}

/* tasks */
#aiworkstation .tsk{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-height:0}
#aiworkstation .tsk__head{display:flex;justify-content:space-between;align-items:center;font-weight:500;color:var(--s-ink)}
#aiworkstation .tsk__sub{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--s-muted)}
#aiworkstation .tsk__row{display:grid;grid-template-columns:40px 16px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;border:1px solid var(--s-line);background:rgb(255 255 255 / 2.5%);font-size:12px;position:relative;overflow:hidden}
#aiworkstation .tsk__row .t{font-variant-numeric:tabular-nums;color:var(--s-muted);font-family:var(--font-mono);font-size:11px}
#aiworkstation .tsk__row img{width:14px;height:14px}
#aiworkstation .tsk__row .s{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--s-accent);display:inline-grid;justify-items:end}
#aiworkstation .tsk__row .s > *{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#aiworkstation .tsk__row .s .muted{color:var(--s-muted)}
#aiworkstation .tsk__bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--s-accent);transform-origin:0 50%;transform:scaleX(0);animation:lp-bar 2.4s linear both var(--d,0s),lp-out .3s linear forwards calc(var(--d,0s) + 2.5s)}
#aiworkstation .tsk__check{width:13px;height:13px;flex:none}
#aiworkstation .tsk__check path{fill:none;stroke:var(--s-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#aiworkstation .tsk__foot{margin-top:auto;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:11px;color:var(--s-muted);padding-top:8px;border-top:1px solid var(--s-line)}

/* canvas */
#aiworkstation .cvs{flex:1;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);min-height:0}
#aiworkstation .cvs__stage{position:relative;border-right:1px solid var(--s-line);background-image:radial-gradient(rgb(255 255 255 / 9%) .8px,transparent 1.2px);background-size:14px 14px;display:flex;flex-direction:column;min-width:0}
#aiworkstation .cvs__tabs{display:flex;gap:6px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--s-line);font-size:11.5px;color:var(--s-muted);background:rgb(11 18 17 / 80%)}
#aiworkstation .cvs__tabs .tab{padding:3px 9px;border-radius:999px}
#aiworkstation .cvs__tabs .tab[aria-current=true]{background:rgb(255 255 255 / 10%);color:var(--s-ink)}
#aiworkstation .cvs__tabs .note{margin-left:auto;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .cvs__stage svg{flex:1 1 0px;width:100%;height:auto;padding:10px;min-height:0}
#aiworkstation .cvs .shp{transform-box:fill-box}
#aiworkstation .cvs .shp rect{fill:rgb(var(--halo-mint-rgb) / 8%);stroke:var(--halo-mint);stroke-width:1.6;stroke-linejoin:round}
#aiworkstation .cvs .shp text{font-family:"Virgil","Segoe Print","Bradley Hand",var(--font-site);font-size:13px;fill:#eef3ee}
#aiworkstation .cvs .shp .pin{font-family:var(--font-site);font-size:9.5px;fill:var(--halo-mint)}
#aiworkstation .cvs .arr{stroke:var(--halo-mint);stroke-width:1.4;fill:none;stroke-linecap:round}
#aiworkstation .cvs .arr--old{animation:lp-draw .7s ease-out both var(--d,0s),lp-out .3s linear forwards var(--until,999s)}
#aiworkstation .cvs__chat{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:0}

/* memory */
#aiworkstation .mem{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-height:0}
#aiworkstation .mem__session{margin-top:auto;padding-top:8px;border-top:1px solid var(--s-line);display:flex;flex-direction:column;gap:7px}
#aiworkstation .mem__session-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--s-muted)}
#aiworkstation .mem__session-head .chip{text-transform:none;letter-spacing:0;font-weight:500}
#aiworkstation .mem__session .msg b{font-weight:600;color:var(--halo-mint)}
#aiworkstation .mem__search{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;border:1px solid var(--s-line);background:rgb(255 255 255 / 4%);font-family:var(--font-mono);font-size:11.5px;color:var(--s-ink)}
#aiworkstation .mem__search svg{width:12px;height:12px;stroke:var(--s-muted);fill:none;stroke-width:2;stroke-linecap:round;flex:none}
#aiworkstation .mem__field{display:grid;flex:1;min-width:0}
#aiworkstation .mem__field > *{grid-area:1/1}
#aiworkstation .mem__search .ph{color:var(--s-muted)}
#aiworkstation .mem__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:7px 10px;border-radius:10px;border:1px solid var(--s-line);background:rgb(255 255 255 / 2.5%);font-size:12px;line-height:1.4;color:var(--s-ink)}
#aiworkstation .mem__row.fade{animation:lp-in .55s var(--ease-out) both var(--d,0s),lp-dim .4s ease forwards var(--until,999s)}
#aiworkstation .mem__row.hit{animation:lp-in .55s var(--ease-out) both var(--d,0s),lp-sel .4s ease forwards var(--until,999s)}
#aiworkstation .mem__row .k{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--s-muted);white-space:nowrap;padding-top:2px}
#aiworkstation .mem__row .k.pin{color:var(--s-accent)}
#aiworkstation .mem__row .src{grid-column:1/-1;font-size:10.5px;color:var(--s-muted)}
#aiworkstation .mem__recall{grid-column:1/-1;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;background:rgb(var(--halo-mint-rgb) / 14%);color:var(--halo-mint);font-size:10.5px;justify-self:start}

/* plugins */
#aiworkstation .plg{flex:1;display:grid;grid-template-columns:minmax(0,1.35fr) 172px;min-height:0}
#aiworkstation .plg__main{padding:14px 16px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--s-line);min-width:0}
#aiworkstation .plg__req{border-radius:12px;border:1px solid rgb(var(--halo-mint-rgb) / 18%);background:rgb(7 11 10 / 70%);padding:10px 12px;font-size:12.5px;line-height:1.5;color:var(--s-ink)}
#aiworkstation .plg__req .w{display:inline-block;animation:lp-in .3s ease both;animation-delay:var(--d,0s)}
#aiworkstation .plg__req .meta{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
#aiworkstation .plg__log{display:flex;flex-direction:column;gap:7px;font-family:var(--font-mono);font-size:11.5px;color:#c6d0c4}
#aiworkstation .plg__log div{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiworkstation .plg__log .sh{display:none}
#aiworkstation .plg__log svg{width:13px;height:13px;flex:none}
#aiworkstation .plg__log path{fill:none;stroke:var(--s-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#aiworkstation .plg__side{padding:12px 10px;display:flex;flex-direction:column;gap:4px;background:rgb(255 255 255 / 2%);font-size:12px;min-width:0}
#aiworkstation .plg__slotwrap{margin-top:auto;display:grid}
#aiworkstation .plg__slotwrap > *{grid-area:1/1}
#aiworkstation .plg__slot{align-self:end;border:1px dashed rgb(var(--halo-mint-rgb) / 30%);border-radius:10px;padding:14px 8px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--s-muted);text-align:center;font-weight:700}
#aiworkstation .plg__widget{border:1px solid var(--s-line);border-radius:12px;padding:10px;background:rgb(127 127 127 / 8%);font-size:11px;display:flex;flex-direction:column;gap:7px}
#aiworkstation .plg__widget .widget__head{font-size:10.5px;cursor:default}
#aiworkstation .plg__widget .stack i{transform-origin:0 50%;animation:lp-bar .8s var(--ease-out) both;animation-delay:var(--d,0s)}
#aiworkstation .plg__widget .kv{font-size:11px}
#aiworkstation .plg__widget .kv dt i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px;vertical-align:0}
#aiworkstation .plg__widget .widget__note{font-size:10px}

@media (max-width:1040px){
  #aiworkstation .loop__bar{flex-direction:column}
  #aiworkstation .loop__tabs{width:auto;max-width:100%}
  #aiworkstation .loop__panel{grid-template-columns:1fr;min-height:0}
  #aiworkstation .loop__copy{padding:20px 20px 4px;gap:8px}
  #aiworkstation .loop__copy .body{max-width:none}
  #aiworkstation .loop__snipwrap{padding:14px}
  #aiworkstation .snip{height:400px}
}
@media (max-width:760px){
  #aiworkstation .loop{padding:48px 0 56px}
  #aiworkstation .loop__tabs{justify-content:flex-start}
  /* phones: let each mockup grow to fit its stacked content instead of clipping */
  #aiworkstation .snip{height:auto;min-height:320px;font-size:12px}
  #aiworkstation .ws{grid-template-columns:1fr}
  #aiworkstation .ws__side{display:none}
  #aiworkstation .ws__panes{grid-template-columns:1fr 1fr}
  #aiworkstation .ws__pane:nth-child(3){display:none}
  /* browser: page on top, compact chat reply below */
  #aiworkstation .brw{grid-template-columns:1fr}
  #aiworkstation .brw__page{border-right:0;border-bottom:1px solid var(--s-line)}
  #aiworkstation .brw__doc{padding:14px 16px;gap:9px}
  #aiworkstation .brw__sk:nth-of-type(n+5){display:none}
  #aiworkstation .brw__chat{padding:10px 12px;gap:8px}
  /* canvas: drawing on top, chat reply below */
  #aiworkstation .cvs{grid-template-columns:1fr}
  #aiworkstation .cvs__stage{border-right:0;border-bottom:1px solid var(--s-line)}
  #aiworkstation .cvs__stage svg{flex:none;height:auto;max-height:190px}
  #aiworkstation .cvs__tabs .note{display:none}
  #aiworkstation .cvs__chat{padding:10px 12px;gap:8px}
  /* plugins: request + build log on top, installed widget below */
  #aiworkstation .plg{grid-template-columns:1fr}
  #aiworkstation .plg__main{border-right:0;border-bottom:1px solid var(--s-line)}
  #aiworkstation .plg__side{padding:10px 12px}
  #aiworkstation .plg__side .ws__group{display:none}
  #aiworkstation .plg__slotwrap{margin-top:0}
  #aiworkstation .plg__log .lg{display:none}
  #aiworkstation .plg__log .sh{display:inline}
  /* memory: keep the pinned preference, the Thursday promise and the recall; drop the filler rows */
  #aiworkstation .mem__row--opt{display:none}
  /* agents: the scaled SVG renders ~6px labels on phones, so swap it for readable cards
     and keep the "1 → 2" chips as the directional cue */
  #aiworkstation .amap{padding:12px;gap:10px}
  #aiworkstation .amap svg{display:none}
  #aiworkstation .amap__cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #aiworkstation .amap__msgs{display:flex}
  /* canvas: bigger labels inside the same shapes, secondary caption hidden */
  #aiworkstation .cvs .shp text{font-size:20px}
  #aiworkstation .cvs .shp .pin{display:none}
  /* terminal: stack the split vertically and let long test lines wrap instead of clipping */
  #aiworkstation .term{flex-direction:column;font-size:11.5px}
  #aiworkstation .term__pane{padding:12px 14px;gap:7px}
  #aiworkstation .term__line{white-space:normal;flex-wrap:wrap;row-gap:2px}
  #aiworkstation .term .dur{margin-left:0;padding-left:0}
  #aiworkstation .term__pane--new{flex:0 0 auto;border-left:0;border-top:1px solid var(--s-line);animation:lp-in .55s var(--ease-out) both;animation-delay:var(--d,0s)}
  #aiworkstation .palette{top:22%}
  /* tasks: time · provider · status on one row, full-width title below */
  #aiworkstation .tsk__row{grid-template-columns:40px 16px minmax(0,1fr);grid-template-areas:"t i s" "title title title";gap:6px 10px}
  #aiworkstation .tsk__row .t{grid-area:t}
  #aiworkstation .tsk__row img{grid-area:i}
  #aiworkstation .tsk__row .s{grid-area:s;justify-self:end}
  #aiworkstation .tsk__title{grid-area:title;line-height:1.35}
  #aiworkstation .tsk__sub span:last-child{display:none}
}

/* ---------- misc ---------- */
#aiworkstation .mt-8{margin-top:8px}#aiworkstation .mt-16{margin-top:16px}#aiworkstation .mt-24{margin-top:24px}
#aiworkstation .tiny{font-size:11px;color:var(--color-muted-2)}

@media (prefers-reduced-motion:reduce){
  #aiworkstation *,#aiworkstation *::before,#aiworkstation *::after{animation:none!important;transition:none!important}
  #aiworkstation{scroll-behavior:auto}
  /* work loop: jump every mockup straight to its finished state */
  #aiworkstation .rm-hide{display:none!important}
  #aiworkstation .type{width:auto!important}
  #aiworkstation .draw{stroke-dashoffset:0!important}
  #aiworkstation .amap .dot{display:none!important}
  #aiworkstation .brw__p.is-sel,#aiworkstation .mem__row.hit{box-shadow:0 0 0 1px var(--halo-mint),0 0 0 5px rgb(var(--halo-mint-rgb) / 16%);background:rgb(var(--halo-mint-rgb) / 8%)}
  #aiworkstation .mem__row.fade{opacity:.32}
  #aiworkstation .loop__prog{display:none!important}
  #aiworkstation .pbar__caret{display:none!important}
}

/* ---------- work loop: keeps the original mint palette (the rest of the page was neutralised to greys) ---------- */
#aiworkstation #loop-stage{--halo-mint:#b6e7cb;--halo-mint-rgb:182 231 203;--halo-sage:#dde7d1;--halo-sage-rgb:221 231 209;--halo-sage-soft:#f1f4ea;--halo-olive:#7e8a6f;--halo-olive-rgb:126 138 111}
#aiworkstation #loop-stage .snip,#aiworkstation #loop-stage .win{--s-accent:#b6e7cb;--s-line:rgb(182 231 203 / 14%);--win-accent:#b6e7cb;--win-line:rgb(180 220 205 / 12%)}
#aiworkstation #loop-stage .shape rect{fill:rgb(182 231 203 / 8%);stroke:#b6e7cb}
#aiworkstation #loop-stage .shape[data-selected=true] rect{fill:rgb(182 231 203 / 18%)}
#aiworkstation #loop-stage .shape .pin{fill:#b6e7cb}
#aiworkstation #loop-stage .arrow{stroke:#b6e7cb}
#aiworkstation #loop-stage .ctx{background:rgb(182 231 203 / 14%);color:#b6e7cb}
#aiworkstation #loop-stage .quick button{border-color:rgb(182 231 203 / 30%)}
#aiworkstation #loop-stage .quick button:hover{background:rgb(182 231 203 / 12%)}
#aiworkstation #loop-stage .msg--ai{border-color:rgb(182 231 203 / 16%)}
#aiworkstation #loop-stage .composer{border-color:rgb(182 231 203 / 18%)}

/* ---------- hero frame: the app window sits on the user's desktop wallpaper (assets/img/desktop-wallpaper.jpg).
   No gradient mesh, no grain, no rounded/soft window edge — the white rim is the window's hard edge. */
#aiworkstation #frame,#aiworkstation #agents-stage{background:url(assets/img/desktop-wallpaper.webp) center/cover no-repeat #16283a;border-radius:18px;overflow:hidden}
#aiworkstation #frame::before,#aiworkstation #frame::after,#aiworkstation #agents-stage::before,#aiworkstation #agents-stage::after{content:none}
#aiworkstation #agents-stage .agents-stage__inner{border-radius:0;outline:2px solid #fff;outline-offset:0;box-shadow:0 18px 40px -14px rgb(8 10 26 / 55%)}
#aiworkstation #frame .slides{border-radius:0;outline-width:2px;box-shadow:0 18px 40px -14px rgb(8 10 26 / 55%);transform:scale(var(--win-zoom,1));transform-origin:50% 50%;will-change:transform}
@media (prefers-reduced-motion:reduce){#aiworkstation #frame .slides{transform:none}}

/* ---------- performance: the heavy product sections skip render work while far offscreen ---------- */
/* NOTE: content-visibility:auto was removed here — a skipped subtree is not rendered, so the editor
   could not hit-test or select anything inside the product sections. The real perf wins (externalised
   + resized imagery, deferred ambient video) do not depend on it. */

/* ---------- slide 2 · six sessions: keep the reply readable in a short pane ----------
   .six-msgs is bottom-anchored with a top fade, but its children default to flex-shrink:1 and
   .hx-ai has overflow:hidden (automatic minimum size 0), so in a short pane the reply collapsed
   to nothing. Pin every row to its content height and let the mask clip the oldest line instead. */
#aiworkstation .six-msgs > *{flex:none}
#aiworkstation .six-msgs .hx-ai{min-height:fit-content}

/* Offscreen sections stop animating (the pill shine, spinners, streaming carets, progress bars…).
   Purely a scheduling win — nothing is hidden, and the section resumes the moment it scrolls in. */
#aiworkstation [data-anim-off] .lc,#aiworkstation [data-anim-off] .spin,#aiworkstation [data-anim-off] .caret,#aiworkstation [data-anim-off] .bar i,#aiworkstation [data-anim-off] .pill::after,#aiworkstation [data-anim-off] .sw,#aiworkstation [data-anim-off] .bld,#aiworkstation [data-anim-off] .a,#aiworkstation [data-anim-off] .w,#aiworkstation [data-anim-off] .draw,#aiworkstation [data-anim-off] .pillar__bar,#aiworkstation [data-anim-off] .loop__prog,#aiworkstation [data-anim-off] .footer__stars,#aiworkstation [data-anim-off] .hx-dot,#aiworkstation [data-anim-off] [class*=anim],#aiworkstation [data-anim-off] [style*=animation]{animation-play-state:paused}

/* platform marks sit on the dark metal row now */
#aiworkstation .dl__btn svg,#aiworkstation .dl__btn svg path,#aiworkstation .dl__btn svg rect{fill:currentColor}

/* Imported provider alignment and agent card surround. */
@media (max-width:760px){
  #aiworkstation .providers{display:grid;grid-template-columns:1fr 1fr;gap:4px 6px;padding:20px 0}
  #aiworkstation .provider{padding:7px 8px;gap:8px}
  #aiworkstation .provider__icon{width:30px;height:30px}
  #aiworkstation .provider__icon img,#aiworkstation .provider__icon svg{width:17px;height:17px}
  #aiworkstation .provider__name{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* the agents carousel cards sit on the same desktop wallpaper as the workspaces frame (surround only —
   the card's own grain/plum gradient is switched off; the window, rim and chrome are untouched) */
#aiworkstation .mx__card{background:url(assets/img/desktop-wallpaper.webp) center/cover no-repeat #16283a!important}
#aiworkstation .mx__card::after{content:none!important}