@layer hero-workbench {
  .hero-live { scroll-margin-top:100px; position:relative; isolation:isolate; overflow:visible; transition:transform 300ms ease,box-shadow 300ms; }
  .hero-upgraded .hero-live { border:1px solid #c7d3c3; border-radius:20px; background:#f8faf4; box-shadow:0 1px 0 #fff inset,0 7px 0 #d6dfce,0 8px 0 #bccbb3,0 24px 30px -17px #53634635,0 48px 65px -34px #364b3740; }
  .hero-live::before { content:''; position:absolute; inset:-6px; border:1px solid #e2e8dc; border-radius:25px; pointer-events:none; z-index:-1; box-shadow:0 1px 0 #fff inset; }
  .hero-live::after { content:''; position:absolute; left:3%; right:3%; bottom:-20px; height:22px; border-radius:50%; background:#5267440b; filter:blur(10px); pointer-events:none; z-index:-2; }
  .hero-symbols { position:absolute; pointer-events:none; }
  .hero-upgraded .hero-live .window-bar { background:#e9eee7; color:#536258; border:0; border-radius:19px 19px 0 0; min-height:56px; gap:10px; padding-inline:23px; box-shadow:0 1px 0 #ffffffd9 inset; }
  .hero-live .window-dots { margin-right:12px; }
  .hero-live .window-dots i { background:#bacbb8; box-shadow:0 1px 0 #ffffffb0; }
  .hero-live .window-bar strong { font-size:.8125rem; font-weight:500; }
  .hero-window-path { margin-left:14px; padding-left:18px; border-left:1px solid #c5d0c0; font-size:.6875rem; color:#7c8d73; }
  .hero-live .window-bar .sample-label { background:#f4f7f0; color:#76896b; margin-left:auto; border:1px solid #d4decb; padding:4px 8px; font-size:.625rem; border-radius:5px; }
  .hero-live .hero-workspace { grid-template-columns:178px minmax(0,1.35fr) minmax(0,1fr); min-height:570px; border-top:1px solid #d5dece; }
  .hero-live .hero-shops { padding:26px 12px 22px; background:#eef0e8; display:flex; flex-direction:column; }
  .hero-shops-heading { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0 5px; margin-bottom:21px; color:#72816a; }
  .hero-shops-heading .overline { font-size:.625rem; letter-spacing:0; }
  .hero-shops-heading>span:last-child { font-size:.625rem; border:1px solid #c5d0bb; padding:1px 4px; }
  .hero-live .hero-shop { position:relative; width:100%; text-align:left; min-height:68px; padding:11px 10px; border:1px solid transparent; color:#44513e; background:transparent; gap:10px; transition:background 200ms,box-shadow 200ms,transform 200ms; }
  .hero-live .hero-shop .text-mark { width:30px; height:30px; }
  .hero-live .hero-shop.selected { background:#fff; border-color:#ced8c4; box-shadow:0 8px 14px -11px #4b613455; }
  .hero-live .hero-shop.selected::before { content:''; position:absolute; left:-13px; top:15px; bottom:15px; width:3px; border-radius:0 2px 2px 0; background:#607c43; }
  .hero-live .hero-shop:enabled:hover { transform:translateX(3px); background:#f9fbf4; }
  .hero-live .hero-shop small { font-size:.6875rem; color:#79856b; }
  .hero-live .hero-shop i { background:none; width:auto; height:auto; font-style:normal; color:#829c6d; font-size:.875rem; opacity:0; }
  .hero-live .hero-shop.selected i { opacity:1; }
  .hero-live .hero-shop-note { display:flex; gap:8px; align-items:baseline; font-size:.625rem; margin:30px 5px 0; margin-top:auto; padding-top:24px; color:#718267; }
  .hero-shop-note small { display:block; font-size:.5625rem; color:#86947b; margin-top:3px; }
  .hero-online-dot,.hero-status-dot { display:inline-block; width:5px; height:5px; background:#6f8d54; border-radius:50%; flex-shrink:0; }
  .hero-live .hero-conversation { padding:28px 28px 22px; background:#fffef9; }
  .hero-live .hero-panel-heading h2 { font-size:1.125rem; color:#26332a; font-weight:550; margin-top:5px; }
  .hero-live .hero-panel-heading .overline { color:#7c896f; font-size:.625rem; }
  .hero-conversation-number { font-size:.625rem; color:#8c967f; font-variant-numeric:tabular-nums; }
  .hero-product-strip { display:flex; gap:13px; align-items:center; margin-top:24px; border-block:1px solid #e7eadf; padding:13px 0; }
  .hero-product-art { display:grid; place-items:center; width:58px; height:62px; border:1px solid #d4deca; border-radius:6px; background:#f1f4e9; transform:rotate(-4deg); box-shadow:3px 4px 0 #e8edde; transition:transform 300ms; }
  .hero-product-strip:hover .hero-product-art { transform:rotate(3deg) translateY(-3px); }
  .hero-product-art svg { width:45px; height:45px; fill:none; stroke:#6d8459; stroke-width:1.2; stroke-linejoin:round; }
  .hero-product-strip>div { flex:1; }
  .hero-product-strip>div>span { display:block; font-size:.5625rem; color:#89957c; margin-bottom:5px; }
  .hero-product-strip strong { display:block; font-size:.875rem; font-weight:550; color:#44553b; }
  .hero-product-strip small { display:block; font-size:.625rem; color:#89957c; margin-top:4px; }
  .hero-product-tag { font-size:.5625rem; color:#7a8c67; padding:4px 6px; border:1px solid #dce5d1; border-radius:3px; }
  .hero-live .hero-message { margin-top:20px; }
  .hero-live .message-who { display:flex; align-items:center; gap:6px; font-size:.6875rem; color:#7b8970; margin-bottom:9px; }
  .hero-live .message-who small { font-size:.5625rem; color:#99a28e; margin-left:auto; }
  .hero-buyer-avatar { font-size:.5rem; width:20px; height:20px; display:grid; place-items:center; border:1px solid #dce2d2; border-radius:50%; }
  .hero-live .hero-message>p { font-size:.875rem; padding:12px 16px; background:#f0f2eb; border:1px solid #e5e9dd; color:#3a4934; line-height:1.85; }
  .hero-live .hero-message.merchant>p { background:#eaf0df; border-color:#d3dfc2; min-height:76px; width:100%; }
  .hero-live .hero-retrieval { display:flex; margin-top:16px; padding-left:4px; min-height:35px; color:#687d51; }
  .hero-live .hero-retrieval strong { font-size:.6875rem; }
  .hero-live .hero-retrieval small { display:block; font-size:.5625rem; color:#8a997b; }
  .hero-live .retrieval-line { flex:1; max-width:none; height:1px; background:#d6dfcc; }
  .hero-source-count { font-size:.625rem; color:#738b57; font-weight:400; }
  .hero-loading-ring { flex-shrink:0; width:15px; height:15px; border:1.5px solid #cfdbbf; border-top-color:#6e8c49; border-radius:50%; animation:hero-search 850ms linear infinite; animation-play-state:paused; }
  .hero-live.is-playing[data-phase="1"] .hero-loading-ring { animation-play-state:running; }
  @keyframes hero-search { to { transform:rotate(360deg); } }
  .hero-live.is-composing #hero-answer::after { content:'▋'; color:#688849; }
  .hero-citations { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:10px; }
  .hero-citations>span { font-size:.5625rem; color:#8a977c; margin-right:3px; }
  .hero-citations button { color:#607b46; background:#f6f9ef; border:1px solid #d8e2ca; border-radius:3px; padding:5px 7px; font-size:.625rem; transition:background 180ms,border-color 180ms; }
  .hero-citations button:hover,.hero-citations button[aria-pressed="true"] { background:#e0ebcf; border-color:#8ba66b; }
  .hero-try { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:23px; border-top:1px dashed #dde4d2; padding-top:14px; }
  .hero-try>span { font-size:.625rem; color:#829072; }
  .hero-try>div { display:flex; flex-wrap:wrap; gap:6px; }
  .hero-try button { color:#60754e; font-size:.625rem; padding:6px 9px; border:1px solid #d7dfcc; background:transparent; border-radius:20px; transition:background 180ms,transform 180ms; }
  .hero-try button:hover { transform:translateY(-2px); background:#f1f6e6; }
  .hero-try button[aria-pressed="true"] { color:#f7f9ef; background:#60734e; border-color:#60734e; }
  .hero-live .hero-evidence { display:block; padding:28px 24px 22px; background:#f0f1e9; position:relative; }
  .hero-evidence-tag { font-size:.5rem; letter-spacing:.12em; color:#909c80; }
  .hero-source-stack { position:relative; margin-top:27px; isolation:isolate; }
  .hero-source-stack::before,.hero-source-stack::after { content:''; position:absolute; inset:5px 0 -5px; border:1px solid #ccd6bd; background:#e7edda; border-radius:4px; z-index:-1; transform:rotate(-2deg); }
  .hero-source-stack::after { inset:7px -2px -7px; background:#f8faf1; transform:rotate(2deg); z-index:-2; }
  .hero-live .hero-source-card { position:relative; background:#fffef8; border:1px solid #c9d6b9; padding:19px; margin:0; box-shadow:0 22px 24px -22px #495b3260; transform:rotate(-.6deg); transition:transform 450ms,box-shadow 450ms; }
  .hero-source-card:focus,.hero-source-card:hover,.hero-live.has-proof .hero-source-card { transform:rotate(0deg) translateY(-4px); box-shadow:0 26px 32px -22px #495b3280; }
  .hero-source-header { display:flex; justify-content:space-between; align-items:center; color:#74875a; }
  .hero-source-header .source-mini-title { font-size:.5625rem; letter-spacing:0; }
  .hero-live .hero-source-card h3 { margin:22px 0; font-size:1.1875rem; font-weight:500; line-height:1.7; letter-spacing:-.04em; color:#405333; }
  .hero-source-fact { display:flex; align-items:baseline; gap:10px; border-top:1px solid #e1e7d6; padding:15px 7px; margin-inline:-7px; transition:background 300ms,transform 300ms; }
  .hero-source-fact>span { font-size:.5625rem; color:#82936c; padding-top:2px; }
  .hero-source-fact>div { flex:1; }
  .hero-source-fact small { font-size:.625rem; color:#889977; }
  .hero-source-fact p { margin-top:6px; font-size:.875rem; line-height:1.9; color:#4c653b; }
  .hero-source-fact i { font-style:normal; color:#6c9045; opacity:0; }
  .hero-source-fact.is-highlighted { background:#e9f0dc; transform:translateX(-3px); }
  .hero-source-fact.is-highlighted i { opacity:1; }
  .hero-source-scope { font-size:.5625rem; color:#8a977c; border-top:1px dashed #d6dfc6; padding-top:15px; }
  .hero-source-scope>span { margin-right:5px; }
  .hero-evidence-result { display:flex; gap:11px; align-items:center; margin-top:32px; }
  .hero-result-icon { display:grid; place-items:center; width:30px; height:30px; border:1px solid #bccba9; border-radius:50%; color:#688445; flex-shrink:0; }
  .hero-evidence-result strong { font-size:.75rem; font-weight:500; color:#53683f; }
  .hero-evidence-result p { font-size:.625rem; line-height:1.7; margin-top:3px; color:#89987b; }
  .hero-live .hero-evidence-footer { font-size:.625rem; margin-top:24px; color:#70875a; }
  .hero-live .hero-workflow { justify-content:space-between; gap:20px; background:#f5f7ee; border-top:1px solid #d6dfc8; padding:12px 20px; border-radius:0 0 19px 19px; box-shadow:0 -1px 0 #ffffffd9 inset; }
  @media(min-width:851px) and (prefers-reduced-motion:no-preference) {
    .hero-upgraded .hero-live { transform:rotateX(.8deg) rotateY(-.8deg); }
  }
  .hero-live .workflow-label { display:flex; gap:8px; align-items:center; font-size:.625rem; min-width:126px; }
  .hero-steps { display:flex; align-items:center; gap:13px; }
  .hero-steps>i { width:22px; height:1px; background:#ccd9bc; position:relative; }
  .hero-steps>i::after { content:''; position:absolute; inset:0; background:#6d8b4a; transform:scaleX(var(--line-progress,0)); transform-origin:left; }
  .hero-live .hero-flow-step { border:0; background:none; color:#849275; display:flex; align-items:center; gap:7px; font-size:.6875rem; min-height:36px; padding:0 2px; }
  .hero-flow-step b { width:21px; height:21px; display:grid; place-items:center; font-size:.5625rem; font-weight:400; border:1px solid #cfdbbf; border-radius:50%; transition:color 200ms,background 200ms; }
  .hero-live .hero-flow-step.is-past,.hero-live .hero-flow-step[aria-current] { color:#4b6436; }
  .hero-flow-step[aria-current] b { background:#657b4c; color:#fff; border-color:#657b4c; }
  .hero-player { display:flex; gap:5px; }
  .hero-player button { width:34px; height:34px; border:1px solid #ccd7bf; background:transparent; color:#617b47; border-radius:50%; transition:background 180ms; }
  .hero-player button:hover { background:#e3eccf; }
  .hero-live.hero-enhanced [data-hero-reveal] { opacity:0; transform:translateY(10px); transition:opacity 420ms,transform 550ms cubic-bezier(.2,.8,.2,1); }
  .hero-live.hero-enhanced [data-hero-reveal].is-shown { opacity:1; transform:none; }
  .hero-live.hero-enhanced .hero-source-fact { opacity:.3; transition:opacity 450ms,background 350ms,transform 350ms; }
  .hero-live.hero-enhanced .hero-source-fact.is-found { opacity:1; }
  .hero-live button:focus-visible,.hero-live a:focus-visible { outline:2px solid #6f8c50; outline-offset:3px; }
  .hero-live button:disabled { cursor:default; }
  .hero-live .hero-conversation { display:flex; flex-direction:column; min-height:725px; }
  .hero-idle { display:none; }
  .hero-live[data-phase="-1"] .hero-idle { display:flex; flex:1; flex-direction:column; justify-content:center; align-items:flex-start; min-height:230px; padding-block:30px; }
  .hero-idle>span { display:grid; place-items:center; font-size:1.5rem; color:#799261; background:#f0f4e8; border:1px solid #d6e1c8; width:48px; height:48px; border-radius:10px; margin-bottom:20px; box-shadow:4px 5px 0 #e7edde; transform:rotate(-6deg); }
  .hero-idle strong { font-size:1.125rem; color:#465a37; font-weight:500; line-height:1.8; }
  .hero-idle p { font-size:.75rem; line-height:1.8; color:#889879; margin-top:7px; }
  .hero-live[data-phase="-1"] [data-hero-reveal] { display:none; }
  .hero-live .hero-try { margin-top:auto; padding-top:16px; }
  .hero-compose { position:relative; margin-top:14px; }
  .hero-draft-line { display:flex; align-items:center; gap:12px; padding:11px 10px 11px 14px; border:1px solid #b9c9a6; border-radius:6px; background:#fafcf5; box-shadow:0 3px 0 #edf1e5; }
  #hero-draft { flex:1; font-size:.8125rem; color:#4e633c; line-height:1.7; }
  #hero-send { display:flex; align-items:center; justify-content:center; gap:8px; background:#425e31; color:#f7faef; padding:10px 12px; min-height:42px; border:1px solid #425e31; border-radius:4px; font-size:.75rem; white-space:nowrap; transition:background 180ms,transform 180ms; }
  #hero-send b { font-weight:400; font-size:1rem; transition:transform 200ms; }
  #hero-send:enabled:hover { background:#58753f; transform:translateY(-2px); }
  #hero-send:enabled:hover b { transform:translate(2px,-2px); }
  #hero-send:disabled { background:#8b9e79; border-color:#8b9e79; }
  .hero-compose>small { display:block; margin-top:9px; font-size:.5625rem; line-height:1.8; color:#8a987b; }
  .hero-send-packet { pointer-events:none; position:absolute; right:24px; top:-5px; color:#688c43; font-size:1.7rem; opacity:0; }
  .hero-live.is-sending .hero-send-packet { animation:hero-message-send 500ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes hero-message-send { 0% { opacity:0; transform:translate(0,15px) scale(.6); } 35% { opacity:1; } 100% { opacity:0; transform:translate(-70px,-110px) scale(1.2); } }
  .hero-typing-dots { display:flex; align-items:center; gap:5px; height:23px; color:#688346; }
  .hero-typing-dots i { width:5px; height:5px; border-radius:50%; background:currentColor; animation:hero-typing 900ms ease-in-out infinite; animation-play-state:paused; }
  .hero-typing-dots i:nth-child(2) { animation-delay:150ms; }
  .hero-typing-dots i:nth-child(3) { animation-delay:300ms; }
  .hero-live.is-playing .hero-typing-dots i { animation-play-state:running; }
  @keyframes hero-typing { 0%,70%,100% { opacity:.3; transform:translateY(0); } 35% { opacity:1; transform:translateY(-4px); } }
  .hero-live[data-phase="1"] .hero-source-card::after { content:''; position:absolute; left:10px; right:10px; height:1px; background:#8ca568; top:30%; box-shadow:0 -5px 0 #e0e9d4; pointer-events:none; animation:hero-source-scan 2100ms ease-in-out infinite; animation-play-state:paused; }
  .hero-live.is-playing[data-phase="1"] .hero-source-card::after { animation-play-state:running; }
  @keyframes hero-source-scan { 0% { top:30%; opacity:0; } 20%,70% { opacity:.8; } 100% { top:86%; opacity:0; } }
  .hero-live.is-finished .hero-result-icon { background:#e4edd5; box-shadow:0 0 0 5px #edf2e3; }
  .hero-live .hero-message.merchant>p { min-height:102px; }
  @media(max-width:1100px) {
    .hero-live .hero-workspace { grid-template-columns:155px minmax(0,1.3fr) minmax(0,1fr); }
    .hero-live .hero-conversation { padding:23px 20px; }
    .hero-live .hero-evidence { padding:23px 17px; }
    .hero-live .hero-source-card { padding:16px; }
    .hero-live .hero-shop { gap:7px; padding-inline:7px; }
    .hero-live .hero-shop .text-mark { width:25px; height:25px; }
    .hero-product-tag { display:none; }
    .hero-steps { gap:8px; }
    .hero-steps>i { width:12px; }
    .hero-live .hero-workflow { gap:10px; padding-inline:16px; }
  }
  @media(max-width:850px) {
    .hero-live .hero-workspace { grid-template-columns:140px minmax(0,1fr); }
    .hero-live .hero-evidence { grid-column:1/-1; border-top:1px solid #d5dfc8; border-left:0; display:grid; grid-template-columns:1.1fr 1fr; gap:0 30px; align-items:start; }
    .hero-evidence>.hero-panel-heading { grid-column:1/-1; }
    .hero-source-stack { grid-row:2/4; }
    .hero-evidence-result { margin-top:36px; }
    .hero-live .hero-evidence-footer { margin-top:20px; }
    .hero-live .hero-workflow { flex-wrap:wrap; }
    .hero-live .workflow-label { flex:1; }
    .hero-steps { order:3; width:100%; justify-content:space-between; }
    .hero-window-path { display:none; }
    .hero-player button { width:40px; height:40px; }
  }
  @media(max-width:600px) {
    .hero-live::before { inset:-4px; border-radius:23px; }
    .hero-upgraded .hero-live .window-bar { padding:12px; min-height:48px; gap:7px; }
    .hero-live .window-dots { display:none; }
    .hero-live .window-bar .sample-label { display:inline; font-size:.5rem; }
    .hero-live .hero-workspace { grid-template-columns:1fr; }
    .hero-live .hero-shops { display:block; padding:14px 12px 8px; border-right:0; border-bottom:1px solid #d9e2ce; }
    .hero-shops-heading { margin-bottom:10px; }
    .hero-shop-list { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
    .hero-live .hero-shop { min-height:62px; flex-direction:column; justify-content:center; gap:5px; padding:7px 1px; margin:0; font-size:.625rem; border-radius:5px; text-align:center; }
    .hero-live .hero-shop i,.hero-live .hero-shop small,.hero-live .hero-shop-note,.hero-live .hero-shop.selected::before { display:none; }
    .hero-live .hero-shop:enabled:hover { transform:translateY(-2px); }
    .hero-live .hero-conversation { padding:22px 18px; }
    .hero-live .hero-panel-heading h2 { font-size:1.0625rem; }
    .hero-conversation-number { display:none; }
    .hero-product-strip { margin-top:18px; }
    .hero-live .hero-message>p { font-size:.875rem; padding:10px 12px; }
    .hero-citations { gap:6px; }
    .hero-citations>span { width:100%; }
    .hero-citations button,.hero-try button { min-height:38px; }
    .hero-live .hero-evidence { display:block; padding:23px 20px; }
    .hero-source-stack { margin-top:20px; }
    .hero-live .hero-source-card h3 { font-size:1.0625rem; margin:16px 0; }
    .hero-source-fact { padding-block:11px; }
    .hero-evidence-result { margin-top:24px; }
    .hero-live .hero-workflow { padding:12px; }
    .hero-steps { gap:2px; }
    .hero-steps>i { width:8px; }
    .hero-live .hero-flow-step { flex-direction:column; gap:4px; font-size:.5625rem; min-height:44px; }
    .workbench-label { align-items:flex-start; font-size:.625rem; }
    .workbench-label>span:last-child { max-width:150px; text-align:right; }
    .hero-bottom-caption { flex-wrap:wrap; gap:12px; }
  }
  .large-text .hero-live .hero-workspace { grid-template-columns:1fr; }
  .large-text .hero-live .hero-shops { display:block; }
  .large-text .hero-shop-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .large-text .hero-live .hero-shop-note { display:none; }
  .large-text .hero-live .hero-evidence { display:block; }
  .large-text .hero-live .hero-workflow,.large-text .hero-steps { flex-wrap:wrap; }
  .large-text .hero-window-path { display:none; }
  .large-text .hero-live .hero-panel-heading h2 { font-size:1rem; }
  .large-text .hero-product-strip { flex-wrap:wrap; }
  .large-text .hero-live .hero-source-card h3 { font-size:1rem; }
  .large-text .hero-live .window-bar { flex-wrap:wrap; }
  .large-text .hero-shops-heading,.large-text .hero-live .hero-panel-heading { flex-wrap:wrap; }
  @media(prefers-reduced-motion:reduce) {
    .hero-product-art,.hero-live .hero-source-card,.hero-source-card:focus,.hero-source-card:hover,.hero-live.has-proof .hero-source-card { transform:none; }
    .hero-loading-ring { animation:none; }
  }
}
