#aiworkstation .demo{position:relative;padding:56px 0 96px;overflow:clip;background:radial-gradient(70% 55% at 50% 0%,#eef2ec 0%,transparent 70%),linear-gradient(180deg,#fbfcf8 0%,#f4f6f1 100%)}
  /* .showcase{margin-top:0} — dropped: in the hero the showcase needs its gap under the download row (styles.css owns it) */
  #aiworkstation .showcase__label b{font-weight:700;color:rgb(var(--halo-evergreen-rgb) / 55%)}
  #aiworkstation .showcase__cap{margin:-2px auto 18px;text-align:center;font-size:15px;line-height:1.4;color:var(--color-muted-2);min-height:1.4em;transition:opacity .3s}
  #aiworkstation .showcase__cap[data-swap=true]{opacity:0}
  #aiworkstation .showcase .slides{aspect-ratio:1240/780!important;height:auto!important;min-height:0!important}
  #aiworkstation .slide .hx{position:absolute;inset:0}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ---------- scripted cursor (desktop) / tap ripple (touch) ---------- */
  #aiworkstation .cur{position:absolute;left:0;top:0;z-index:40;width:20px;height:20px;pointer-events:none;opacity:0;transition:transform var(--dur,.8s) cubic-bezier(.45,0,.2,1),opacity .3s;filter:drop-shadow(0 2px 5px rgb(0 0 0 / 55%))}
  #aiworkstation .cur[data-on=true]{opacity:1}
  #aiworkstation .cur svg{display:block;width:100%;height:100%;transform-origin:2px 2px;transition:transform .12s}
  #aiworkstation .cur[data-down=true] svg{transform:scale(.84)}
  #aiworkstation .tap{position:absolute;left:0;top:0;z-index:39;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:999px;border:2px solid rgb(255 255 255 / 85%);background:rgb(255 255 255 / 16%);pointer-events:none;opacity:0}
  #aiworkstation .tap.go{animation:tap .55s ease-out}
  @keyframes tap{from{opacity:1;transform:scale(.35)}to{opacity:0;transform:scale(1.35)}}

  /* ---------- shared bits ---------- */
  #aiworkstation .hx-threads{margin-top:4px}
  #aiworkstation .mdock{display:none}
  #aiworkstation .w-slot:empty{display:none}
  #aiworkstation .hx-usage .m{color:var(--hx-muted-2);font-weight:400}
  #aiworkstation .hx-usage .hx-limit__bar{margin-top:2px}
  #aiworkstation .act__rows{display:grid;gap:6px}
  #aiworkstation .act__row{display:grid;grid-template-columns:78px 1fr 22px;align-items:center;gap:7px;font-size:10px;color:var(--hx-muted-2)}
  #aiworkstation .act__row b{text-align:right;font-weight:500;color:var(--hx-fg);font-variant-numeric:tabular-nums}
  #aiworkstation .act__row .b{height:3px;border-radius:999px;background:rgb(255 255 255 / 8%);overflow:hidden}
  #aiworkstation .act__row .b i{display:block;height:100%;width:0;border-radius:inherit;background:var(--hx-accent-ink);transition:width .5s var(--ease-out)}
  #aiworkstation .co-list{display:grid;gap:4px}
  #aiworkstation .co-row{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:7px;background:var(--hx-tile);font-size:10.5px;min-width:0;animation:lp-in .4s var(--ease-out) both}
  #aiworkstation .co-row b{font-family:var(--hx-mono);font-weight:500;color:#9db8ff;font-size:10px;flex:none}
  #aiworkstation .co-row span{color:var(--hx-muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #aiworkstation .co-empty{font-size:10px;color:var(--hx-muted);padding:2px 2px 0}

  /* ---------- 1 · Dusk: chat + side panel (Open a surface → Files) + token tracker ---------- */
  #aiworkstation .s1-stage{grid-template-columns:minmax(0,1fr) minmax(0,0fr);transition:grid-template-columns .65s var(--ease-out)}
  #aiworkstation .s1-stage[data-rp=open]{grid-template-columns:minmax(0,1fr) minmax(0,.74fr)}
  #aiworkstation .s1-stage[data-rp=closed] .hx-rp{border-left-color:transparent}
  #aiworkstation .s1-stage .hx-rp{overflow:hidden}
  #aiworkstation .s1-rpt{display:grid;place-items:center;width:24px;height:24px;border-radius:6px}
  #aiworkstation .s1-stage[data-rp=open] .s1-rpt{background:rgb(255 255 255 / 9%);color:var(--hx-fg)}
  #aiworkstation .s1-a{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:var(--d,0s)}
  #aiworkstation .s1-a.show{opacity:1;transform:none}
  #aiworkstation .s1-pbody{display:flex;flex-direction:column;min-height:0;min-width:0}
  #aiworkstation .sf{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px 18px 58px}
  #aiworkstation .sf__in{width:100%;max-width:400px}
  #aiworkstation .sf__head{text-align:center;margin-bottom:16px}
  #aiworkstation .sf__head b{display:block;font-size:12.5px;font-weight:500;color:var(--hx-fg)}
  #aiworkstation .sf__head span{display:block;margin-top:4px;font-size:11px;color:var(--hx-muted-2)}
  #aiworkstation .sf__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #aiworkstation .sf__card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid var(--hx-line-2);background:rgb(255 255 255 / 3%);text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
  #aiworkstation .sf[data-in=true] .sf__card{animation:lp-in .42s var(--ease-out) both;animation-delay:calc(var(--i) * 45ms)}
  #aiworkstation .sf__card[data-hl=true]{background:rgb(255 255 255 / 8%);border-color:rgb(255 255 255 / 24%)}
  #aiworkstation .sf__card[aria-disabled=true]{opacity:.4;cursor:default}
  #aiworkstation .sf__card kbd{position:absolute;top:10px;right:10px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:5px;border:1px solid var(--hx-line-2);background:rgb(255 255 255 / 4%);font:500 10px/1 var(--hx-font);color:var(--hx-muted-2)}
  #aiworkstation .sf__t{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--hx-fg);padding-right:24px}
  #aiworkstation .sf__t .lc{width:14px;height:14px}
  #aiworkstation .sf__d{margin-top:5px;font-size:10.5px;line-height:1.45;color:var(--hx-muted-2)}
  #aiworkstation .fb{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--hx-canvas)}
  #aiworkstation .fb__sub{height:40px;flex:none;display:flex;align-items:center;gap:4px;padding:0 8px;border-bottom:1px solid var(--hx-line)}
  #aiworkstation .fb__btn{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;color:var(--hx-muted-2)}
  #aiworkstation .fb__btn .lc{width:13px;height:13px}
  #aiworkstation .fb__search{flex:1;height:26px;display:flex;align-items:center;gap:6px;padding:0 8px;font-size:11.5px;color:rgb(255 255 255 / 45%)}
  #aiworkstation .fb__search .lc{width:12px;height:12px}
  #aiworkstation .fb__tree{flex:1;min-height:0;overflow:hidden;padding:6px}
  #aiworkstation .fb__tree[data-in=true] .fb__row{animation:lp-in .36s var(--ease-out) both;animation-delay:calc(var(--i) * 35ms)}
  #aiworkstation .fb__row{display:flex;align-items:center;gap:6px;height:26px;padding:0 8px 0 calc(8px + var(--lv,0) * 14px);border-radius:6px;font-size:12px;color:var(--hx-fg);white-space:nowrap;cursor:pointer}
  #aiworkstation .fb__row:hover{background:rgb(255 255 255 / 5%)}
  #aiworkstation .fb__row[aria-selected=true]{background:rgb(var(--hx-accent-rgb) / 26%)}
  #aiworkstation .fb__row .lc{width:13px;height:13px;color:var(--hx-muted-2)}
  #aiworkstation .fb__row .lc.chev{width:11px;height:11px}
  #aiworkstation .fb__row .sp{width:11px;flex:none}
  #aiworkstation .fb__row span{overflow:hidden;text-overflow:ellipsis}

  /* ---------- 2 · Jade: chat + Excalidraw + session activity ---------- */
  #aiworkstation .s2-stage{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  #aiworkstation .s2-chat .hx-body{justify-content:center}
  #aiworkstation .s2-log{flex:1}
  #aiworkstation .cv-ctx{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;background:rgb(var(--hx-accent-rgb) / 20%);color:#c3d3ff;font-size:10.5px;margin-bottom:6px;animation:lp-in .3s var(--ease-out) both}
  #aiworkstation .cv-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
  #aiworkstation .cv-quick button{padding:4px 9px;border-radius:999px;border:1px solid var(--hx-line-2);font-size:10.5px;color:var(--hx-fg);background:rgb(255 255 255 / 3%)}
  #aiworkstation .cv-quick button:hover{background:rgb(255 255 255 / 8%)}
  #aiworkstation .cv-busy{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--hx-muted-2);padding:0 4px}
  #aiworkstation .cv-busy .lc{width:12px;height:12px;color:#38bdf8;animation:spin 1.6s linear infinite}
  #aiworkstation .cv-thumb{display:block;width:120px;height:66px;border-radius:8px;background:#fff;margin-bottom:6px}
  #aiworkstation .cv-panel{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
  #aiworkstation .cv-note{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--hx-line);font-size:11px;color:var(--hx-muted-2)}
  #aiworkstation .cv-send{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border:1px solid var(--hx-line-2);border-radius:7px;font-size:11px;font-weight:500;color:var(--hx-fg);background:rgb(255 255 255 / 3%);white-space:nowrap}
  #aiworkstation .cv-send .lc{width:12px;height:12px}
  #aiworkstation .cv-stage{position:relative;background:#121212;min-height:0;overflow:hidden}
  #aiworkstation .cv-tools{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:2px;padding:4px;border-radius:9px;background:#232329;box-shadow:0 0 0 1px rgb(255 255 255 / 6%),0 8px 20px -8px rgb(0 0 0 / 70%)}
  #aiworkstation .cv-tools > span{width:25px;height:25px;border-radius:6px;display:grid;place-items:center;color:#ced4da}
  #aiworkstation .cv-tools > span[aria-pressed=true]{background:#403e6a;color:#b2aeff}
  #aiworkstation .cv-tools .lc{width:13px;height:13px}
  #aiworkstation .cv-stage > svg{position:absolute;left:8px;right:8px;top:46px;bottom:6px;width:calc(100% - 16px);height:calc(100% - 52px)}
  #aiworkstation .cv-title{font-family:ui-serif,"Times New Roman",Georgia,serif;font-size:19px;fill:#e5e5e5}
  #aiworkstation .shape{cursor:pointer;transform-box:fill-box;transform-origin:center}
  #aiworkstation .shape rect.b{fill:transparent;stroke:#e5e5e5;stroke-width:1.5}
  #aiworkstation .shape rect.s{fill:none;stroke:#8f8cff;stroke-width:1;stroke-dasharray:4 3;opacity:0}
  #aiworkstation .shape[data-selected=true] rect.s{opacity:1}
  #aiworkstation .shape text{font-family:ui-serif,"Times New Roman",Georgia,serif;font-size:14px;fill:#e5e5e5}
  #aiworkstation .shape.new{animation:shape-in .55s cubic-bezier(.16,1,.3,1) both}
  @keyframes shape-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
  #aiworkstation .arrow{stroke:#e5e5e5;stroke-width:1.4;fill:none;marker-end:url(#s2-ah)}
  #aiworkstation .arrow.new{stroke-dasharray:1;stroke-dashoffset:1;animation:lp-draw .6s ease-out .2s both}
  #aiworkstation .cv-toast{top:10px;right:12px}
  #aiworkstation .cv-mquick{display:none;position:absolute;left:0;right:0;bottom:14px;margin:0 auto;width:max-content;max-width:calc(100% - 24px);z-index:3;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgb(var(--hx-accent-rgb) / 55%);background:rgb(12 18 40 / 92%);color:#dbe6ff;font-size:11.5px;white-space:nowrap;animation:lp-in .3s var(--ease-out) both}

  /* ---------- 3 · Kanagawa: build a split group (2 new sessions + 2 chats dragged in) ----------
     Kanagawa wallpaper preset (chatBackgroundPresets.ts, intensity 30) over its #1f1f28 canvas; Ocean dark accent (themePalettes.ts) */
  /* the Kanagawa theme (.hx--wave) lives in hx.css so the plugins section shares it */
  #aiworkstation .s3-work{position:relative}
  #aiworkstation .s3-stage{position:relative;display:block;border:0!important;background:transparent!important}
  #aiworkstation .s3-grid{position:absolute;inset:0;display:grid;gap:8px;grid-template-columns:repeat(var(--c,1),minmax(0,1fr));grid-template-rows:repeat(var(--r,1),minmax(0,1fr))}
  #aiworkstation .s3-pane{border-radius:10px;grid-template-rows:38px minmax(0,1fr)}
  #aiworkstation .s3-pane[data-focus=true]{border-color:color-mix(in srgb,var(--hx-accent) 60%,var(--hx-line))}
  #aiworkstation .s3-pane--empty{grid-template-rows:minmax(0,1fr);border-style:dashed;border-color:var(--hx-line-2)}
  #aiworkstation .s3-pane--empty[data-focus=true]{border-color:color-mix(in srgb,var(--hx-accent) 55%,var(--hx-line))}
  #aiworkstation .s3-pane--in{animation:pane-in .55s var(--ease-out) both}
  @keyframes pane-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
  #aiworkstation .s3-pane .hx-body{display:flex;flex-direction:column}
  #aiworkstation .s3-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;text-align:center}
  #aiworkstation .s3-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:172px;height:32px;padding:0 14px;border-radius:9px;border:1px solid var(--hx-line-2);background:rgb(22 22 29 / 70%);color:var(--hx-fg);font:500 12px var(--hx-font);cursor:pointer}
  #aiworkstation .s3-btn--new{background:var(--hx-accent);border-color:transparent;color:#12151d}
  #aiworkstation .s3-btn .lc{width:13px;height:13px}
  #aiworkstation .s3-hint{font-size:10.5px;color:var(--hx-muted-2)}
  #aiworkstation .s3-draft{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px}
  #aiworkstation .s3-draft .e{font-size:10px;letter-spacing:.035em;color:rgb(255 255 255 / 72%)}
  #aiworkstation .s3-draft .t{font-size:clamp(22px,2.3vw,34px);line-height:1.1;font-weight:500;letter-spacing:-.06em;color:#fff}
  #aiworkstation .s3-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:12px 14px;overflow:hidden}
  #aiworkstation .s3-ask{align-self:flex-end;max-width:88%;padding:7px 11px;border-radius:13px;background:var(--hx-msg);font-size:12px;line-height:1.45;color:var(--hx-text)}
  #aiworkstation .s3-reply{font-size:12px;line-height:1.55;color:var(--hx-text);padding:0 2px;text-shadow:0 1px 8px rgb(0 0 0 / 45%)}
  #aiworkstation .s3-mini{margin:0 10px 10px;display:flex;align-items:center;gap:7px;border-radius:12px;border:1px solid color-mix(in srgb,var(--hx-accent) 34%,var(--hx-line));background:var(--hx-composer);padding:6px 6px 6px 10px;font-size:11px;white-space:nowrap;min-width:0}
  #aiworkstation .s3-mini .pv{width:12px;height:12px}
  #aiworkstation .s3-mini .ph{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:rgb(255 255 255 / 42%)}
  #aiworkstation .s3-mini .hx-send{width:22px;height:22px}
  #aiworkstation .s3-mini .hx-send svg{width:10px;height:10px}
  #aiworkstation .s3-pane[data-drop=after]::after{content:"";position:absolute;top:6px;bottom:6px;right:6px;width:calc(50% - 6px);z-index:5;border-radius:8px;border:1.5px dashed var(--hx-accent);background:rgb(var(--hx-accent-rgb) / 16%);pointer-events:none;animation:lp-in .25s var(--ease-out) both}
  #aiworkstation .s3-row{cursor:grab;transition:opacity .25s,background .25s,box-shadow .25s}
  #aiworkstation .s3-row--lift{opacity:.4}
  #aiworkstation .s3-ghost{position:absolute;left:0;top:0;z-index:38;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:9px;background:#262633;border:1px solid #6cb0ee;color:#ebe7d8;font:500 12px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;white-space:nowrap;box-shadow:0 18px 40px -12px rgb(0 0 0 / 70%);opacity:0;pointer-events:none;transition:transform var(--dur,.9s) cubic-bezier(.45,0,.2,1),opacity .2s}
  #aiworkstation .s3-ghost[data-on=true]{opacity:.97}
  #aiworkstation .s3-ghost .pv{width:13px;height:13px;display:block}
  #aiworkstation .s3-ghost span{overflow:hidden;text-overflow:ellipsis}
  @media (max-width:760px){#aiworkstation .s3-ghost{max-width:62%;font-size:11px;padding:6px 10px}}
  #aiworkstation .s3-sheet{display:none}
  #aiworkstation .sp-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  #aiworkstation .sp-slot{height:30px;border-radius:6px;border:1px dashed var(--hx-line-2);display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;color:var(--hx-muted-2)}
  #aiworkstation .sp-slot.on{border-style:solid;border-color:rgb(var(--hx-accent-rgb) / 45%);background:rgb(var(--hx-accent-rgb) / 12%);color:var(--hx-fg)}
  #aiworkstation .sp-slot b{font-weight:500}
  #aiworkstation .sp-slot .pv,#aiworkstation .sp-slot .lc{width:12px;height:12px}

  /* ---------- smaller screens: the same desktop app, scaled to fit the frame (JS sets the scale) ---------- */
  #aiworkstation .slides .s3-ghost{scale:var(--ss,1);transform-origin:0 0}
  @media (max-width:760px){
    #aiworkstation .showcase__cap{font-size:13.5px;padding:0 12px}
    #aiworkstation .frame{padding:14px;border-radius:18px}
    #aiworkstation .cur{width:14px;height:14px}
    #aiworkstation .tap{width:24px;height:24px;margin:-12px 0 0 -12px}
  }